/* ==========================================================
   KALE VERSE — GLOBAL DESIGN SYSTEM 001
   Human warmth × contemporary technology
   ========================================================== */

:root {
  --ink: #172033;
  --ink-soft: #27334b;
  --muted: #626b7c;

  --paper: #f5f1e9;
  --paper-soft: #fbf8f2;
  --white: #ffffff;

  --violet: #7257d9;
  --turquoise: #159c99;
  --coral: #e96f62;
  --sun: #e7a53d;

  --accent: var(--violet);
  --accent-2: var(--turquoise);

  --line: rgba(23,32,51,.11);
  --surface: rgba(255,255,255,.78);

  --max: 1240px;
  --radius: 28px;
  --radius-small: 17px;

  --shadow:
    0 20px 55px rgba(35,39,51,.08);

  --shadow-hover:
    0 26px 65px rgba(35,39,51,.13);
}

/* ---------- Universe accents ---------- */

body[data-universe="main"] {
  --accent: var(--violet);
  --accent-2: var(--turquoise);
}

body[data-universe="kael"] {
  --accent: #536fd5;
  --accent-2: #159c99;
}

body[data-universe="jaiva"] {
  --accent: #d85d72;
  --accent-2: #7257d9;
}

body[data-universe="animation"] {
  --accent: #dc9631;
  --accent-2: #159c99;
}

body[data-universe="festival"] {
  --accent: #b85757;
  --accent-2: #7257d9;
}

/* ---------- Foundation ---------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(
      circle at 92% 4%,
      color-mix(in srgb, var(--accent) 12%, transparent),
      transparent 25%
    ),
    radial-gradient(
      circle at 5% 30%,
      rgba(231,165,61,.10),
      transparent 24%
    ),
    var(--paper);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.wrap {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(249,246,240,.91);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid var(--line);
}

.nav {
  width: min(calc(100% - 48px), var(--max));
  min-height: 76px;
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  font-size: 1.24rem;
  letter-spacing: -.045em;
}

.brand span {
  color: var(--violet);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 27px;
}

.nav-links a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}

.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: -10px;
  border-radius: 99px;
  background: var(--accent);
}

.menu-toggle {
  display: none;
  padding: 9px 13px;

  color: var(--ink);
  background: var(--white);

  border: 1px solid var(--line);
  border-radius: 12px;

  font: inherit;
  font-weight: 700;
}

/* ---------- Hero ---------- */

main {
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 70vh;
  padding: 105px 0 90px;

  display: grid;
  align-items: center;
}

.hero .wrap {
  position: relative;
  z-index: 2;
}

.hero::before {
  content: "";
  position: absolute;

  width: min(44vw, 620px);
  aspect-ratio: 1;
  right: -9%;
  top: -9%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 38%,
      color-mix(in srgb, var(--accent-2) 34%, white),
      color-mix(in srgb, var(--accent) 25%, transparent) 38%,
      transparent 68%
    );

  opacity: .56;
  filter: blur(18px);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;

  width: 250px;
  height: 250px;
  right: 19%;
  bottom: 4%;

  border-radius:
    45% 55% 63% 37% /
    52% 40% 60% 48%;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent) 22%, transparent),
      color-mix(in srgb, var(--accent-2) 22%, transparent)
    );

  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--accent-2);

  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  font-weight: 850;
}

.eyebrow::before {
  content: "";
  width: 29px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

h1 {
  max-width: 980px;
  margin: 21px 0 28px;

  color: var(--ink);

  font-size: clamp(3.5rem, 7.5vw, 7.6rem);
  line-height: .91;
  letter-spacing: -.07em;
}

.hero-copy {
  max-width: 720px;
  color: var(--muted);

  font-size: clamp(1.08rem, 1.8vw, 1.34rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---------- Buttons ---------- */

.button {
  min-height: 50px;
  padding: 0 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--line);
  border-radius: 999px;

  text-decoration: none;
  font-weight: 800;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 12px 30px rgba(23,32,51,.14);
}

.button-primary:hover {
  box-shadow: 0 16px 38px rgba(23,32,51,.20);
}

.button-secondary {
  color: var(--ink);
  background: rgba(255,255,255,.70);
  border-color: rgba(23,32,51,.13);
}

/* ---------- Sections ---------- */

.section {
  padding: 76px 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-heading {
  max-width: 790px;
  margin-bottom: 34px;
}

.section-heading h2,
.feature h2,
.contact-panel h2 {
  margin: 15px 0 19px;

  color: var(--ink);

  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: .99;
  letter-spacing: -.055em;
}

.section-heading p {
  color: var(--muted);
  font-size: 1.08rem;
}

/* ---------- Cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 18px;
}

.card {
  position: relative;
  overflow: hidden;

  grid-column: span 6;
  min-height: 0;
  padding: 28px;

  color: var(--ink);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.66)
    );

  border: 1px solid rgba(23,32,51,.10);
  border-radius: var(--radius);

  box-shadow: var(--shadow);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.card::before {
  content: "";
  position: absolute;

  width: 6px;
  height: 52px;
  left: 0;
  top: 29px;

  border-radius: 0 5px 5px 0;
  background: var(--accent);
}

.card::after {
  content: "";
  position: absolute;

  width: 170px;
  height: 170px;
  right: -80px;
  bottom: -85px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--accent) 28%, transparent),
      transparent 68%
    );
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color:
    color-mix(in srgb, var(--accent) 30%, transparent);
}

.card h3 {
  margin-bottom: 12px;

  color: var(--ink);

  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.card p {
  color: var(--muted);
}

.card-link {
  text-decoration: none;
}

/* Homepage: individual accents */

body[data-universe="main"] .card:nth-child(1) {
  --accent: #536fd5;
  --accent-2: #159c99;
}

body[data-universe="main"] .card:nth-child(2) {
  --accent: #d85d72;
  --accent-2: #7257d9;
}

body[data-universe="main"] .card:nth-child(3) {
  --accent: #dc9631;
  --accent-2: #159c99;
}

body[data-universe="main"] .card:nth-child(4) {
  --accent: #b85757;
  --accent-2: #7257d9;
}

/* ---------- Feature compositions ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(380px,1fr);
  gap: clamp(40px,7vw,90px);
  align-items: center;
}

.feature > div:first-child p:not(.eyebrow) {
  color: var(--muted);
}

.feature-panel {
  position: relative;
  overflow: hidden;

  min-height: 420px;

  border: 1px solid rgba(23,32,51,.10);
  border-radius: 38px;

  background:
    radial-gradient(
      circle at 20% 18%,
      color-mix(in srgb, var(--accent) 28%, white),
      transparent 40%
    ),
    radial-gradient(
      circle at 82% 80%,
      color-mix(in srgb, var(--accent-2) 25%, white),
      transparent 38%
    ),
    #e9e7e6;

  box-shadow: var(--shadow);
}

.orbit {
  position: absolute;
  inset: 12%;

  border: 1px solid rgba(23,32,51,.17);
  border-radius: 50%;

  transform: rotate(-18deg);
}

.orbit:nth-child(2) {
  inset: 25%;
  transform: rotate(32deg);
}

.orbit-core {
  position: absolute;

  width: 94px;
  height: 94px;

  left: 50%;
  top: 50%;

  transform: translate(-50%,-50%);

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent-2)
    );

  box-shadow:
    0 0 70px
    color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- KAeL process ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 11px;
  margin-top: 38px;
}

.step {
  padding: 19px 15px;

  color: var(--ink);
  background: rgba(255,255,255,.70);

  border: 1px solid var(--line);
  border-radius: var(--radius-small);

  font-size: .88rem;
  font-weight: 750;
}

.step strong {
  display: block;
  margin-bottom: 7px;

  color: var(--accent);

  font-size: .72rem;
  letter-spacing: .12em;
}

/* ---------- Manifesto ---------- */

#univers.section {
  padding-bottom: 64px;
}

#univers + .section {
  padding-top: 64px;
  padding-bottom: 72px;
}

.quote {
  max-width: 1040px;
  margin-bottom: 0;

  color: var(--ink);

  font-size: clamp(2.3rem,5vw,4.8rem);
  line-height: 1.06;
  letter-spacing: -.055em;
}

/* ---------- Contact ---------- */

.contact-panel {
  padding: clamp(34px,7vw,76px);

  background:
    radial-gradient(
      circle at 90% 10%,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 35%
    ),
    rgba(255,255,255,.76);

  border: 1px solid var(--line);
  border-radius: 38px;

  box-shadow: var(--shadow);
}

.contact-panel p {
  color: var(--muted);
}

/* ---------- KAeL demo ---------- */

.demo-shell {
  overflow: hidden;

  color: #eef3ff;
  background: #172033;

  border: 1px solid rgba(23,32,51,.15);
  border-radius: 30px;

  box-shadow:
    0 30px 80px rgba(23,32,51,.18);
}

.demo-topbar {
  padding: 16px 20px;

  display: flex;
  justify-content: space-between;

  color: #aeb9cf;
  background: #1d2940;

  border-bottom: 1px solid rgba(255,255,255,.09);
}

.demo-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 500px;
}

.demo-sidebar {
  padding: 22px;

  background: #19243a;
  border-right: 1px solid rgba(255,255,255,.08);
}

.demo-sidebar div {
  padding: 11px 12px;
  margin-bottom: 6px;

  color: #9eabc3;

  border-radius: 10px;
}

.demo-sidebar .active {
  color: #fff;
  background: rgba(255,255,255,.09);
}

.demo-content {
  padding: 35px;
}

.demo-content h2 {
  color: #fff;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.metric {
  padding: 22px;

  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
}

.metric b {
  display: block;
  color: #fff;
  font-size: 1.8rem;
}

.demo-shell .card {
  color: #fff;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

.demo-shell .card h3 {
  color: #fff;
}

.demo-shell .card p,
.demo-shell .small {
  color: #aeb9cf;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 47px 0;

  color: rgba(255,255,255,.73);
  background: var(--ink);

  border-top: 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.site-footer strong {
  color: #fff;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.small {
  color: var(--muted);
  font-size: .88rem;
}

.site-footer .small {
  color: rgba(255,255,255,.66);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {

  .nav-links {
    display: none;

    position: absolute;
    left: 18px;
    right: 18px;
    top: 69px;

    padding: 20px;

    flex-direction: column;
    align-items: stretch;

    background: var(--paper-soft);

    border: 1px solid var(--line);
    border-radius: 18px;

    box-shadow: var(--shadow-hover);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a[aria-current="page"]::after {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .card {
    grid-column: span 6;
  }

  .feature {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .demo-grid {
    grid-template-columns: 1fr;
  }

  .demo-sidebar {
    display: none;
  }

  .hero::before {
    width: 620px;
    right: -350px;
  }
}

@media (max-width: 600px) {

  .wrap,
  .nav {
    width: min(calc(100% - 30px), var(--max));
  }

  .hero {
    min-height: auto;
    padding: 75px 0 65px;
  }

  .hero::after {
    display: none;
  }

  h1 {
    font-size: clamp(3rem,16vw,5rem);
  }

  .section {
    padding: 68px 0;
  }

  .card {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .steps,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .feature-panel {
    min-height: 330px;
  }

  .contact-panel {
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ---------- KALE VERSE official identity ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

@media (max-width: 600px) {
  .brand-logo {
    height: 50px;
  }
}

/* ==========================================================
   KALE VERSE — HEADER IDENTITY 002
   Stronger official brand presence
   ========================================================== */

.site-header .nav {
  min-height: 104px;
}

.site-header .brand {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.site-header .brand-logo {
  width: auto;
  height: 86px;
  max-width: 150px;
  object-fit: contain;
}

.site-header .nav-links {
  gap: 30px;
}

.site-header .nav-links a {
  font-size: .94rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .site-header .nav {
    min-height: 88px;
  }

  .site-header .brand-logo {
    height: 72px;
    max-width: 125px;
  }

  .site-header .nav-links {
    top: 82px;
  }
}

@media (max-width: 600px) {
  .site-header .nav {
    min-height: 80px;
  }

  .site-header .brand-logo {
    height: 65px;
    max-width: 112px;
  }
}

/* ==========================================================
   KALE VERSE — HEADER / FOOTER BRAND FRAME 003
   Same dark identity frame
   ========================================================== */

.site-header {
  background: rgba(23,32,51,.97);
  border-bottom: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 8px 30px rgba(23,32,51,.10);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header .nav-links a {
  color: rgba(255,255,255,.72);
}

.site-header .nav-links a:hover,
.site-header .nav-links a[aria-current="page"] {
  color: #ffffff;
}

.site-header .nav-links a[aria-current="page"]::after {
  background: #bda15b;
}

.site-header .menu-toggle {
  color: #ffffff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.site-footer {
  background: #172033;
}

/* Mobile navigation remains readable */

@media (max-width: 900px) {
  .site-header .nav-links {
    background: #172033;
    border-color: rgba(255,255,255,.10);

    box-shadow:
      0 24px 55px rgba(10,15,27,.28);
  }

  .site-header .nav-links a {
    color: rgba(255,255,255,.76);
  }

  .site-header .nav-links a:hover,
  .site-header .nav-links a[aria-current="page"] {
    color: #ffffff;
  }
}

/* ==========================================================
   KALE VERSE — UNIVERSE IDENTITY 002
   Premium chromatic universes
   ========================================================== */

body[data-universe="main"] .card {
  isolation: isolate;
  overflow: hidden;
  min-height: 210px;
  border-color: rgba(23,32,51,.10);
}

body[data-universe="main"] .card > * {
  position: relative;
  z-index: 3;
}

body[data-universe="main"] .card::before {
  z-index: 4;
  width: 7px;
  height: 58px;
}

/* Decorative field shared by all universes */

body[data-universe="main"] .card::after {
  content: "";
  position: absolute;
  z-index: 1;

  width: 46%;
  height: 140%;

  right: -7%;
  bottom: -20%;

  border-radius: 48% 0 0 48%;

  opacity: 1;
  transform: rotate(-7deg);
}

/* ----------------------------------------------------------
   KAeL
   Sapphire × petrol turquoise
   Precision / orbit / technology
   ---------------------------------------------------------- */

body[data-universe="main"] .card:nth-child(1) {
  --accent: #3157d5;
  --accent-2: #008e91;

  background:
    radial-gradient(
      circle at 83% 52%,
      transparent 0 42px,
      rgba(49,87,213,.30) 43px 45px,
      transparent 46px 72px,
      rgba(0,142,145,.22) 73px 75px,
      transparent 76px
    ),
    linear-gradient(
      110deg,
      #ffffff 0 55%,
      #edf2ff 55% 72%,
      #d8e4ff 100%
    );
}

body[data-universe="main"] .card:nth-child(1)::after {
  background:
    linear-gradient(
      145deg,
      rgba(49,87,213,.28),
      rgba(0,142,145,.18)
    );
}

/* ----------------------------------------------------------
   JAIVA
   Aubergine × coral
   Encounter / culture / movement
   ---------------------------------------------------------- */

body[data-universe="main"] .card:nth-child(2) {
  --accent: #713b72;
  --accent-2: #d95d5d;

  background:
    radial-gradient(
      ellipse at 82% 30%,
      rgba(113,59,114,.32),
      transparent 29%
    ),
    radial-gradient(
      ellipse at 90% 82%,
      rgba(217,93,93,.36),
      transparent 36%
    ),
    linear-gradient(
      110deg,
      #ffffff 0 55%,
      #f8e8ed 55% 100%
    );
}

body[data-universe="main"] .card:nth-child(2)::after {
  right: -12%;
  transform: rotate(12deg);

  background:
    linear-gradient(
      155deg,
      rgba(113,59,114,.25),
      rgba(217,93,93,.34)
    );
}

/* ----------------------------------------------------------
   Animation enfants
   Amber × emerald
   Energy / transmission / play
   ---------------------------------------------------------- */

body[data-universe="main"] .card:nth-child(3) {
  --accent: #d88b16;
  --accent-2: #168a72;

  background:
    radial-gradient(
      circle at 78% 37%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),
    radial-gradient(
      circle at 91% 72%,
      rgba(22,138,114,.25) 0 55px,
      transparent 56px
    ),
    linear-gradient(
      110deg,
      #ffffff 0 55%,
      #fff1d4 55% 100%
    );
}

body[data-universe="main"] .card:nth-child(3)::after {
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(226,154,36,.25),
      rgba(22,138,114,.22)
    );
}

/* ----------------------------------------------------------
   Festival Doc' Chapelle
   Bordeaux × indigo
   Frame / projection / cinema
   ---------------------------------------------------------- */

body[data-universe="main"] .card:nth-child(4) {
  --accent: #8f3345;
  --accent-2: #5147a8;

  background:
    linear-gradient(
      90deg,
      transparent 0 73%,
      rgba(143,51,69,.20) 73% 74%,
      transparent 74% 82%,
      rgba(81,71,168,.18) 82% 83%,
      transparent 83%
    ),
    linear-gradient(
      110deg,
      #ffffff 0 55%,
      #f2e5eb 55% 78%,
      #e5e1f4 100%
    );
}

body[data-universe="main"] .card:nth-child(4)::after {
  border-radius: 22px;
  transform: rotate(-4deg);

  background:
    linear-gradient(
      145deg,
      rgba(143,51,69,.28),
      rgba(81,71,168,.25)
    );
}

/* Controlled premium interaction */

body[data-universe="main"] .card:hover {
  transform: translateY(-6px);

  border-color:
    color-mix(in srgb,var(--accent) 45%,transparent);

  box-shadow:
    0 28px 65px rgba(23,32,51,.14);
}

/* ==========================================================
   KALE VERSE — HERO FUSION 003
   The four universes become one visual language
   ========================================================== */

body[data-universe="main"] .hero {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      112deg,
      #f8f4ec 0%,
      #f8f4ec 53%,
      rgba(238,242,255,.88) 74%,
      rgba(246,235,239,.82) 100%
    );
}

/*
   Main fusion:
   KAeL orbit
   JAIVA organic field
   Animation circles
   Festival vertical frame
*/

body[data-universe="main"] .hero::after {
  content: "";
  display: block;

  position: absolute;
  z-index: 1;

  width: clamp(420px, 42vw, 680px);
  height: clamp(420px, 42vw, 680px);

  right: clamp(-155px, -5vw, -55px);
  top: 50%;

  transform:
    translateY(-48%)
    rotate(-7deg);

  border-radius: 50%;

  background:

    /* KAeL — orbital rings */
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),

    /* Animation — amber point */
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),

    /* Animation / transmission — emerald point */
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),

    /* JAIVA — cultural meeting */
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),

    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),

    /* Festival — cinematic vertical rhythm */
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),

    /* Common KALE VERSE field */
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  border:
    1px solid rgba(49,87,213,.10);

  box-shadow:
    0 32px 90px rgba(23,32,51,.07);

  opacity: .96;
}

/*
   Diagonal field: same visual cut used by the project cards.
   This connects the hero to the grid below.
*/

body[data-universe="main"] .hero::before {
  content: "";
  display: block;

  position: absolute;
  z-index: 0;

  width: 43%;
  height: 125%;

  right: -9%;
  top: -12%;

  transform: skewX(-13deg);

  background:
    linear-gradient(
      145deg,
      rgba(49,87,213,.055),
      rgba(0,142,145,.045) 28%,
      rgba(226,154,36,.040) 49%,
      rgba(217,93,93,.055) 72%,
      rgba(81,71,168,.065)
    );

  border-left:
    1px solid rgba(49,87,213,.055);
}

/* Text always remains above the fusion */

body[data-universe="main"] .hero .container,
body[data-universe="main"] .hero-copy {
  position: relative;
  z-index: 3;
}

/* Desktop breathing room for the visual composition */

@media (min-width: 1100px) {
  body[data-universe="main"] .hero-copy {
    max-width: 760px;
  }
}

/* Tablet */

@media (max-width: 900px) {

  body[data-universe="main"] .hero::after {
    width: 430px;
    height: 430px;
    right: -230px;
    opacity: .62;
  }

  body[data-universe="main"] .hero::before {
    width: 52%;
    right: -25%;
    opacity: .72;
  }
}

/* Mobile: identity remains, but never competes with text */

@media (max-width: 600px) {

  body[data-universe="main"] .hero::after {
    width: 320px;
    height: 320px;
    right: -220px;
    opacity: .42;
  }

  body[data-universe="main"] .hero::before {
    width: 58%;
    right: -38%;
    opacity: .50;
  }
}

/* =========================================================
   DOC' CHAPPELLE — BICOLOR IDENTITY 001
   Bordeaux × Indigo
   ========================================================= */

.doc-chappelle-title span {
  color: #8f3345;
}

.doc-chappelle-title strong {
  color: #5147a8;
  font: inherit;
  font-weight: inherit;
}


/* DOC' CHAPPELLE — INDIGO REFINEMENT 002 */
.doc-chappelle-title strong {
  color: #6558c9;
}

/* DOC' CHAPPELLE — TITLE HARMONY 003
   Same typographic hierarchy as the other universes */
.doc-chappelle-title span,
.doc-chappelle-title strong {
  color: var(--ink);
}

/* =========================================================
   KAEL STUDIO — PROJECT ATLAS V2
   Isolated interactive demo cockpit
   ========================================================= */

.atlas-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 2rem;
}

.atlas-intro .wrap {
  position: relative;
  z-index: 2;
  max-width: 1180px;
}

.atlas-demo-dna {
  position: absolute;
  z-index: 1;
  display: block;

  width: clamp(430px, 43vw, 650px);
  height: clamp(430px, 43vw, 650px);

  right: 35px;
  top: 50%;

  transform:
    translateY(-46%)
    rotate(-7deg);

  border-radius: 50%;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  opacity: .90;

  -webkit-mask-image:
    radial-gradient(
      circle,
      #000 0 84%,
      rgba(0,0,0,.98) 88%,
      rgba(0,0,0,.82) 92%,
      rgba(0,0,0,.55) 95%,
      rgba(0,0,0,.25) 98%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      circle,
      #000 0 84%,
      rgba(0,0,0,.98) 88%,
      rgba(0,0,0,.82) 92%,
      rgba(0,0,0,.55) 95%,
      rgba(0,0,0,.25) 98%,
      transparent 100%
    );
}

.atlas-intro h1 {
  margin: .35rem 0 .65rem;
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  letter-spacing: -.055em;
}

.atlas-intro .hero-copy {
  max-width: 760px;
}

.atlas-disclaimer {
  display: inline-flex;
  margin-top: 1.25rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(49, 87, 213, .18);
  border-radius: 999px;
  background: rgba(49, 87, 213, .06);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}


/* ---------- workspace ---------- */

.atlas-workspace {
  padding-top: 1rem;
}

.atlas-workspace .wrap {
  max-width: 1240px;
}

.atlas-command {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 0%,
      rgba(21, 156, 153, .14),
      transparent 30%),
    radial-gradient(circle at 15% 0%,
      rgba(83, 111, 213, .18),
      transparent 32%),
    #111827;
  color: #f8fafc;
  box-shadow:
    0 30px 80px rgba(23, 32, 51, .16),
    0 4px 18px rgba(23, 32, 51, .10);
}


/* ---------- command header ---------- */

.atlas-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.1rem 1.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.atlas-command .eyebrow {
  color: #8da5ff;
}

.atlas-command-head h2 {
  margin: .3rem 0 .25rem;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  letter-spacing: -.04em;
}

.atlas-command-head p {
  margin: 0;
  color: #9ca8bc;
}

.atlas-state {
  min-width: 150px;
  padding: .75rem 1rem;
  border: 1px solid rgba(245, 184, 73, .25);
  border-radius: 14px;
  background: rgba(245, 184, 73, .08);
}

.atlas-state span {
  display: block;
  margin-bottom: .22rem;
  color: #aeb8c9;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.atlas-state strong {
  color: #f5b849;
  font-size: 1rem;
  letter-spacing: .04em;
}


/* ---------- metrics ---------- */

.atlas-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.atlas-metrics article {
  min-width: 0;
  padding: 1.2rem 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.atlas-metrics article:last-child {
  border-right: 0;
}

.atlas-metrics span {
  display: block;
  margin-bottom: .4rem;
  color: #8794a9;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.atlas-metrics strong {
  color: #fff;
  font-size: 1.12rem;
}


/* ---------- main layout ---------- */

.atlas-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 470px;
}

.atlas-sidebar {
  padding: 1.25rem .85rem;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: rgba(5, 10, 22, .22);
}

.atlas-tab {
  width: 100%;
  margin: 0 0 .35rem;
  padding: .8rem .9rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8e9aaf;
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.atlas-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, .05);
}

.atlas-tab.active {
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(83, 111, 213, .28),
    rgba(21, 156, 153, .13)
  );
}

.atlas-tab.active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .55rem;
  border-radius: 50%;
  background: #6f8cff;
  box-shadow: 0 0 12px rgba(111, 140, 255, .8);
  vertical-align: .1em;
}

.atlas-panels {
  min-width: 0;
}

.atlas-panel {
  padding: 2rem 2.1rem 2.3rem;
  animation: atlasPanelIn .25s ease both;
}

.atlas-panel[hidden] {
  display: none;
}

@keyframes atlasPanelIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.atlas-panel h3 {
  margin: .35rem 0 1.5rem;
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  letter-spacing: -.035em;
}

.atlas-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.3rem;
}

.atlas-panel-heading h3 {
  margin-bottom: 0;
}


/* ---------- buttons inside cockpit ---------- */

.atlas-command .button {
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: none;
}

.atlas-command .button-primary {
  background: #5573e6;
  color: #fff;
}

.atlas-command .button-primary:hover {
  background: #6682ee;
  transform: translateY(-1px);
}

.atlas-command .button-secondary {
  background: rgba(255, 255, 255, .06);
  color: #e8edf7;
}

.atlas-command .button-secondary:hover {
  background: rgba(255, 255, 255, .10);
}

.atlas-command button:disabled {
  cursor: wait;
  opacity: .6;
}


/* ---------- checks ---------- */

.atlas-checks {
  display: grid;
  gap: .7rem;
}

.atlas-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}

.atlas-check strong {
  display: block;
  margin-bottom: .2rem;
  color: #f5f7fb;
}

.atlas-check p {
  margin: 0;
  color: #8996aa;
  font-size: .84rem;
}

.atlas-check > span {
  flex: 0 0 auto;
  padding: .35rem .55rem;
  border-radius: 7px;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .055em;
}

.atlas-check.is-pass > span {
  background: rgba(55, 190, 144, .12);
  color: #6fddb7;
}

.atlas-check.is-warning {
  border-color: rgba(245, 184, 73, .22);
  background: rgba(245, 184, 73, .045);
}

.atlas-check.is-warning > span {
  background: rgba(245, 184, 73, .12);
  color: #f5c767;
}

.atlas-check.is-pending > span {
  background: rgba(147, 160, 181, .11);
  color: #aeb9ca;
}


/* ---------- analysis ---------- */

.atlas-progress {
  overflow: hidden;
  width: 100%;
  height: 7px;
  margin: 1.6rem 0 1.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.atlas-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5573e6, #1bb4ad);
}

#atlasAnalysisMessage {
  max-width: 680px;
  min-height: 3rem;
  color: #a8b3c4;
  line-height: 1.65;
}


/* ---------- results ---------- */

.atlas-result-focus {
  margin-bottom: 1.2rem;
  padding: 1.35rem 1.45rem;
  border: 1px solid rgba(245, 184, 73, .18);
  border-radius: 16px;
  background: rgba(245, 184, 73, .055);
}

.atlas-result-focus > span {
  display: block;
  margin-bottom: .55rem;
  color: #f5c767;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.atlas-result-focus strong {
  display: block;
  max-width: 700px;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1.45;
}

.atlas-result-focus p {
  max-width: 700px;
  margin: .7rem 0 0;
  color: #9ba7ba;
  line-height: 1.6;
}

.atlas-decision {
  padding: 1.35rem 1.45rem;
  border: 1px solid rgba(111, 140, 255, .16);
  border-radius: 16px;
  background: rgba(83, 111, 213, .055);
}

.atlas-decision h4 {
  margin: .4rem 0 1rem;
  color: #fff;
  font-size: 1.1rem;
}

.atlas-decision .hero-actions {
  margin-top: 0;
}

#atlasDecisionFeedback {
  margin: .9rem 0 0;
  color: #aab6c7;
  font-size: .85rem;
}


/* ---------- history ---------- */

.atlas-history {
  display: grid;
  gap: .15rem;
}

.atlas-history article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.atlas-history time {
  color: #68778e;
  font-size: .75rem;
  font-weight: 750;
}

.atlas-history strong {
  color: #edf1f8;
  font-size: .9rem;
}

.atlas-history p {
  margin: .18rem 0 0;
  color: #8794a8;
  font-size: .82rem;
}


/* ---------- next action ---------- */

.atlas-next-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 2.1rem 1.4rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(21, 156, 153, .20);
  border-radius: 15px;
  background: rgba(21, 156, 153, .07);
}

.atlas-next-action h3 {
  margin: .3rem 0 0;
  color: #f7fafc;
  font-size: 1rem;
}

.atlas-step {
  flex: 0 0 auto;
  padding: .45rem .65rem;
  border-radius: 8px;
  background: rgba(21, 156, 153, .15);
  color: #6fd5d0;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
}


/* ---------- cycle ---------- */

.atlas-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(4, 9, 19, .25);
}

.atlas-cycle span {
  padding: .38rem .55rem;
  border-radius: 7px;
  color: #68768c;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .075em;
}

.atlas-cycle span.active {
  background: rgba(83, 111, 213, .17);
  color: #91a7ff;
}

.atlas-cycle b {
  color: #455166;
  font-weight: 500;
}


/* ---------- responsive ---------- */

@media (max-width: 820px) {
  .atlas-command-head,
  .atlas-panel-heading,
  .atlas-next-action {
    align-items: stretch;
    flex-direction: column;
  }

  .atlas-state {
    min-width: 0;
  }

  .atlas-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .atlas-metrics article:nth-child(2) {
    border-right: 0;
  }

  .atlas-metrics article:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .atlas-layout {
    grid-template-columns: 1fr;
  }

  .atlas-sidebar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .atlas-tab {
    margin: 0;
    text-align: center;
    white-space: nowrap;
  }

  .atlas-tab.active::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .atlas-command {
    border-radius: 20px;
  }

  .atlas-command-head,
  .atlas-panel {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .atlas-metrics article {
    padding: 1rem;
  }

  .atlas-sidebar {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
  }

  .atlas-check {
    align-items: flex-start;
    flex-direction: column;
  }

  .atlas-next-action {
    margin-left: 1.15rem;
    margin-right: 1.15rem;
  }

  .atlas-cycle {
    gap: .25rem;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .atlas-cycle b {
    font-size: .75rem;
  }
}

/* =========================================================
   KAEL STUDIO — COMMERCIAL PAGE FINAL 009
   One module. One geometry.
   ========================================================= */

body[data-universe="kael"] .kael-product-hero {
  position: relative;
  overflow: hidden;
}

body[data-universe="kael"] .kael-product-hero::before,
body[data-universe="kael"] .kael-product-hero::after {
  display: none;
}

body[data-universe="kael"] .kael-product-hero .wrap {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(420px, .92fr);

  grid-template-rows:
    auto
    auto
    auto
    auto
    auto;

  column-gap: clamp(3rem, 6vw, 7rem);
  align-items: center;

  padding-right: 0;
}

body[data-universe="kael"] .kael-product-hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 4.8vw, 4.8rem);
  line-height: .94;
  letter-spacing: -.055em;
}

body[data-universe="kael"] .kael-product-hero .eyebrow,
body[data-universe="kael"] .kael-product-hero h1,
body[data-universe="kael"] .kael-product-hero .hero-copy,
body[data-universe="kael"] .kael-product-hero .hero-actions,
body[data-universe="kael"] .kael-product-hero .kael-hero-proof {
  grid-column: 1;
}

body[data-universe="kael"] .kael-product-hero .eyebrow {
  grid-row: 1;
}

body[data-universe="kael"] .kael-product-hero h1 {
  grid-row: 2;
}

body[data-universe="kael"] .kael-product-hero .hero-copy {
  grid-row: 3;
}

body[data-universe="kael"] .kael-product-hero .hero-actions {
  grid-row: 4;
}

body[data-universe="kael"] .kael-product-hero .kael-hero-proof {
  grid-row: 5;
}

body[data-universe="kael"] .kael-product-hero .hero-copy {
  max-width: 720px;
  margin-top: 2rem;
}

body[data-universe="kael"] .kael-product-hero .hero-actions {
  margin-top: 2.5rem;
}

body[data-universe="kael"] .kael-product-hero .button-primary {
  padding: 1.05rem 1.65rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 750;
  box-shadow: 0 14px 34px rgba(23,32,51,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

body[data-universe="kael"] .kael-product-hero .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(23,32,51,.25);
}

body[data-universe="kael"] .kael-hero-proof {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
}

body[data-universe="kael"] .kael-hero-proof b {
  opacity: .45;
}


/* ---------- Atlas product teaser ---------- */

body[data-universe="kael"] .kael-atlas-teaser {
  position: relative;
  z-index: 3;

  grid-column: 2;
  grid-row: 1 / 6;
  align-self: center;
  justify-self: center;

  top: auto;
  right: auto;

  width: min(100%, 460px);
  padding: 1.35rem;

  display: block;

  color: #f8fafc;
  text-decoration: none;

  background:
    radial-gradient(circle at 90% 10%, rgba(21,156,153,.20), transparent 38%),
    linear-gradient(
      145deg,
      rgba(23,32,51,.91),
      rgba(13,20,34,.86)
    );

  -webkit-backdrop-filter: blur(14px) saturate(110%);
  backdrop-filter: blur(14px) saturate(110%);

  border: 1px solid rgba(143,216,212,.14);
  border-radius: 26px;

  box-shadow:
    0 24px 55px rgba(23,32,51,.14),
    0 6px 18px rgba(23,32,51,.08),
    inset 0 1px 0 rgba(255,255,255,.06);

  transform: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

body[data-universe="kael"] .kael-atlas-teaser:hover {
  transform: translateY(-3px);
  box-shadow:
    0 28px 65px rgba(23,32,51,.17),
    0 8px 22px rgba(23,32,51,.10),
    inset 0 1px 0 rgba(255,255,255,.07);
}

body[data-universe="kael"] .kael-atlas-top,
body[data-universe="kael"] .kael-atlas-metrics {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

body[data-universe="kael"] .kael-atlas-top {
  align-items: flex-start;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

body[data-universe="kael"] .kael-atlas-label,
body[data-universe="kael"] .kael-atlas-metrics span,
body[data-universe="kael"] .kael-atlas-next span {
  display: block;
  margin-bottom: .35rem;
  color: #8fd8d4;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
}

body[data-universe="kael"] .kael-atlas-top strong {
  display: block;
  font-size: 1.15rem;
}

body[data-universe="kael"] .kael-atlas-status {
  padding: .45rem .7rem;
  color: #f7c66c;
  background: rgba(231,165,61,.12);
  border: 1px solid rgba(231,165,61,.30);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .08em;
}

body[data-universe="kael"] .kael-atlas-metrics {
  margin: 1.1rem 0;
}

body[data-universe="kael"] .kael-atlas-metrics > div {
  flex: 1;
  padding: .9rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}

body[data-universe="kael"] .kael-atlas-metrics strong {
  display: block;
  font-size: 1.25rem;
}

body[data-universe="kael"] .kael-atlas-next {
  padding: 1rem;
  background: rgba(83,111,213,.14);
  border: 1px solid rgba(143,216,212,.14);
  border-radius: 14px;
}

body[data-universe="kael"] .kael-atlas-next strong {
  display: block;
  margin-bottom: .8rem;
  font-size: .95rem;
}

body[data-universe="kael"] .kael-atlas-next b {
  color: #8fd8d4;
  font-size: .75rem;
  letter-spacing: .04em;
}


/* ---------- KALE VERSE visual DNA ---------- */

body[data-universe="kael"] .kael-visual-dna {
  position: relative;
  z-index: 1;

  grid-column: 2;
  grid-row: 1 / 6;
  align-self: center;
  justify-self: center;

  /*
     Atlas: max 500px, right 0.
     DNA:   600px, right -50px.
     Both therefore share the same horizontal centre.
  */
  top: auto;
  right: auto;

  width: min(46vw, 650px);
  aspect-ratio: 1;

  transform: translate(155px, -135px) rotate(-7deg);

  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  border: none;
  box-shadow:
    0 0 70px 34px rgba(248,244,236,.68),
    0 0 120px 58px rgba(248,244,236,.34),
    0 32px 90px rgba(23,32,51,.07);
  opacity: .68;

  /*
     Feather the actual circumference.
     The page background progressively reappears underneath.
  */
  -webkit-mask-image:
    radial-gradient(
      circle at 50% 50%,
      #000 0 70%,
      rgba(0,0,0,.98) 76%,
      rgba(0,0,0,.82) 82%,
      rgba(0,0,0,.55) 88%,
      rgba(0,0,0,.25) 94%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      circle at 50% 50%,
      #000 0 70%,
      rgba(0,0,0,.98) 76%,
      rgba(0,0,0,.82) 82%,
      rgba(0,0,0,.55) 88%,
      rgba(0,0,0,.25) 94%,
      transparent 100%
    );
}

body[data-universe="kael"] .kael-visual-dna > * {
  display: none;
}


/* ---------- Responsive ---------- */

@media (max-width: 1050px) {

  body[data-universe="kael"] .kael-product-hero .wrap {
    padding-right: 0;
  }

  body[data-universe="kael"] .kael-visual-dna {
    display: none;
  }

  body[data-universe="kael"] .kael-atlas-teaser {
    position: relative;
    top: auto;
    right: auto;

    width: 100%;
    max-width: 560px;
    margin-top: 3rem;

    transform: none;
  }

  body[data-universe="kael"] .kael-atlas-teaser:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 700px) {

  body[data-universe="kael"] .kael-product-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.3rem);
  }

  body[data-universe="kael"] .kael-hero-proof {
    flex-wrap: wrap;
  }
}


/* =========================================================
   JAIVA — CULTURES IN MOTION 004
   Belgium × Japan × South Africa
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

body[data-universe="jaiva"] .jaiva-hero {

  position: relative;
  overflow: hidden;

  min-height: 760px;

  background:

    radial-gradient(
      circle at 93% 13%,
      rgba(230,48,65,.18),
      transparent 24%
    ),

    radial-gradient(
      circle at 5% 90%,
      rgba(245,181,48,.15),
      transparent 27%
    ),

    linear-gradient(
      118deg,
      #f8f4ec 0%,
      #f8f4ec 47%,
      #fae7eb 72%,
      #eee8fa 100%
    );
}


body[data-universe="jaiva"] .jaiva-hero::before,
body[data-universe="jaiva"] .jaiva-hero::after {

  display: none;

}


body[data-universe="jaiva"] .jaiva-hero-grid {

  display: grid;

  grid-template-columns:
    minmax(0,.93fr)
    minmax(480px,1.07fr);

  gap: clamp(3rem,6vw,7rem);

  align-items: center;

}


body[data-universe="jaiva"] .jaiva-hero-copy {

  position: relative;
  z-index: 5;

}


body[data-universe="jaiva"] .jaiva-hero h1 {

  margin:
    1.25rem 0
    .15rem;

  max-width: none;

  font-size:
    clamp(6.7rem,12vw,12rem);

  line-height: .78;

  letter-spacing: -.09em;

}


body[data-universe="jaiva"] .jaiva-tagline {

  margin:
    0 0
    2rem;

  color: #8e4264;

  font-size:
    clamp(2rem,3.3vw,3.6rem);

  font-weight: 760;

  line-height: 1;

  letter-spacing: -.045em;

}


body[data-universe="jaiva"] .jaiva-hero .hero-copy {

  max-width: 650px;

  color: #596478;

  font-size:
    clamp(1.04rem,1.4vw,1.22rem);

  line-height: 1.65;

}


body[data-universe="jaiva"] .jaiva-hero .button-primary {

  border: 0;

  background:

    linear-gradient(
      110deg,
      #dd3e58,
      #8b4f96 52%,
      #6558c9
    );

  box-shadow:
    0 18px 44px
    rgba(113,59,114,.20);

}


body[data-universe="jaiva"] .jaiva-hero .button-secondary {

  background:
    rgba(255,255,255,.74);

  border-color:
    rgba(113,59,114,.14);

}



/* =========================================================
   JAIVA — PAGE HARMONY 010
   Music · movement · editorial rhythm
   Visuals 009 remain untouched.
   ========================================================= */


/* =========================================================
   GLOBAL JAIVA RHYTHM
   ========================================================= */

body[data-universe="jaiva"] main {
  background: #f8f4ec;
}

body[data-universe="jaiva"] .eyebrow {
  letter-spacing: .17em;
}

body[data-universe="jaiva"] .button {
  border-radius: 999px;
}

body[data-universe="jaiva"] .button-primary {
  border: 0;

  color: #fff;

  background:
    linear-gradient(
      105deg,
      #df405b 0%,
      #a04482 48%,
      #7057d6 100%
    );

  box-shadow:
    0 14px 36px rgba(112,65,145,.16);
}

body[data-universe="jaiva"] .button-primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 20px 45px rgba(112,65,145,.22);
}



/* =========================================================
   MOVE · CONNECT · SHARE
   ========================================================= */

body[data-universe="jaiva"] .jaiva-movement {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding:
    clamp(100px,10vw,145px)
    0
    clamp(115px,11vw,160px);

  border-top: 0;

  color: #fff;

  background:
    radial-gradient(
      circle at 4% 13%,
      rgba(229,62,84,.21),
      transparent 26%
    ),

    radial-gradient(
      circle at 95% 77%,
      rgba(13,151,125,.20),
      transparent 29%
    ),

    radial-gradient(
      circle at 72% 9%,
      rgba(111,86,212,.17),
      transparent 26%
    ),

    linear-gradient(
      128deg,
      #181426 0%,
      #1b1b33 42%,
      #17243a 70%,
      #102d30 100%
    );
}


/* soft light running through section */

body[data-universe="jaiva"] .jaiva-movement::before {
  content: "";

  position: absolute;
  z-index: 0;

  width: 120%;
  height: 170px;

  left: -10%;
  top: 44%;

  transform: rotate(-7deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(239,184,58,.08) 23%,
      rgba(228,66,88,.10) 50%,
      rgba(25,158,132,.09) 76%,
      transparent
    );

  filter: blur(18px);

  pointer-events: none;
}

body[data-universe="jaiva"] .jaiva-movement .wrap {
  position: relative;
  z-index: 2;
}


/* =========================================================
   INTRO
   ========================================================= */

body[data-universe="jaiva"] .jaiva-movement-heading {
  display: grid;

  grid-template-columns:
    minmax(0,.76fr)
    minmax(0,1.24fr);

  gap: clamp(3rem,7vw,8rem);

  align-items: end;

  max-width: none;

  margin-bottom:
    clamp(70px,8vw,105px);
}

body[data-universe="jaiva"] .jaiva-movement-heading .eyebrow {
  align-self: start;

  color: #efb83a;
}

body[data-universe="jaiva"] .jaiva-movement-heading h2 {
  margin: 0;

  max-width: 820px;

  color: #fff;

  font-size:
    clamp(3.7rem,6.5vw,7rem);

  line-height: .88;

  letter-spacing: -.065em;
}


/* =========================================================
   BEATS
   ========================================================= */

body[data-universe="jaiva"] .jaiva-beats {
  display: grid;
  gap: 0;

  border-top:
    1px solid rgba(255,255,255,.15);
}

body[data-universe="jaiva"] .jaiva-beat {
  position: relative;

  display: grid;

  grid-template-columns:
    74px
    minmax(250px,.70fr)
    minmax(0,1fr);

  gap:
    clamp(2rem,5vw,6rem);

  align-items: center;

  min-height: 230px;

  padding:
    44px 0;

  border-bottom:
    1px solid rgba(255,255,255,.14);

  transition:
    padding .3s ease,
    background .3s ease;
}

body[data-universe="jaiva"] .jaiva-beat::before {
  content: "";

  position: absolute;

  left: -4%;
  right: -4%;
  top: 0;
  bottom: 0;

  z-index: -1;

  opacity: 0;

  transition: opacity .3s ease;
}

body[data-universe="jaiva"] .beat-move::before {
  background:
    linear-gradient(
      90deg,
      rgba(239,184,58,.09),
      transparent 65%
    );
}

body[data-universe="jaiva"] .beat-connect::before {
  background:
    linear-gradient(
      90deg,
      rgba(226,76,98,.09),
      transparent 65%
    );
}

body[data-universe="jaiva"] .beat-share::before {
  background:
    linear-gradient(
      90deg,
      rgba(58,195,160,.08),
      transparent 65%
    );
}

body[data-universe="jaiva"] .jaiva-beat:hover::before {
  opacity: 1;
}


/* numbers */

body[data-universe="jaiva"] .jaiva-beat-index {
  align-self: start;

  padding-top: .55rem;

  color:
    rgba(255,255,255,.33);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .18em;
}


/* MOVE / CONNECT / SHARE */

body[data-universe="jaiva"] .jaiva-beat-word {
  font-size:
    clamp(3.4rem,5.5vw,6.6rem);

  line-height: .78;

  font-weight: 950;

  letter-spacing: -.075em;
}

body[data-universe="jaiva"] .beat-move .jaiva-beat-word {
  color: #efb83a;
}

body[data-universe="jaiva"] .beat-connect .jaiva-beat-word {
  color: #e54c65;
}

body[data-universe="jaiva"] .beat-share .jaiva-beat-word {
  color: #35bfa0;
}


/* descriptive copy */

body[data-universe="jaiva"] .jaiva-beat-copy {
  max-width: 630px;
}

body[data-universe="jaiva"] .jaiva-beat-copy h3 {
  margin:
    0 0 .8rem;

  color: #fff;

  font-size:
    clamp(1.35rem,1.8vw,1.65rem);

  letter-spacing: -.025em;
}

body[data-universe="jaiva"] .jaiva-beat-copy p {
  margin: 0;

  color:
    rgba(255,255,255,.62);

  font-size: .98rem;

  line-height: 1.7;
}



/* =========================================================
   AFRICAN ELECTRONIC BRIDGES
   ========================================================= */

body[data-universe="jaiva"] .jaiva-bridges {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding:
    clamp(110px,10vw,145px)
    0
    clamp(120px,11vw,160px);

  border-top: 0;

  background:
    radial-gradient(
      circle at 96% 12%,
      rgba(225,62,83,.11),
      transparent 24%
    ),

    radial-gradient(
      circle at 2% 93%,
      rgba(12,151,123,.08),
      transparent 28%
    ),

    linear-gradient(
      118deg,
      #f8f4ec 0%,
      #f8f4ec 56%,
      #f5edf1 78%,
      #f1edf8 100%
    );
}


/* transition from the night section */

body[data-universe="jaiva"] .jaiva-bridges::before {
  content: "";

  position: absolute;

  width: 65%;
  height: 115px;

  left: 18%;
  top: -80px;

  border-radius: 50%;

  background:
    rgba(54,42,79,.11);

  filter: blur(42px);

  pointer-events: none;
}


body[data-universe="jaiva"] .jaiva-bridges-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(470px,1.08fr);

  gap:
    clamp(4rem,7vw,8rem);

  align-items: center;
}


/* =========================================================
   AEB COPY
   ========================================================= */

body[data-universe="jaiva"] .jaiva-bridges-copy {
  max-width: 700px;
}

body[data-universe="jaiva"] .jaiva-bridges-copy .eyebrow {
  color: #7257d9;
}

body[data-universe="jaiva"] .jaiva-bridges h2 {
  margin:
    1.1rem 0
    1.7rem;

  max-width: 690px;

  font-size:
    clamp(4rem,6vw,6.7rem);

  line-height: .82;

  letter-spacing: -.075em;
}

body[data-universe="jaiva"] .jaiva-route {
  display: flex;
  flex-wrap: wrap;

  gap: .35rem .55rem;

  margin:
    0 0
    2rem;

  color: #79506c;

  font-size:
    clamp(1.08rem,1.6vw,1.38rem);

  font-weight: 850;
}

body[data-universe="jaiva"] .jaiva-route span {
  color: #df405b;
}

body[data-universe="jaiva"] .jaiva-project-intro {
  max-width: 620px;

  margin-bottom: 2.3rem;

  color: #626c7d;

  font-size: 1.05rem;

  line-height: 1.7;
}


/* =========================================================
   ARTISTS SIGNATURE
   ========================================================= */

body[data-universe="jaiva"] .jaiva-signature {
  position: relative;

  margin:
    0 0
    2.5rem;

  padding:
    1.35rem 0
    1.4rem;

  border-top:
    1px solid rgba(23,32,51,.12);

  border-bottom:
    1px solid rgba(23,32,51,.12);
}

body[data-universe="jaiva"] .jaiva-signature::before {
  content: "";

  position: absolute;

  width: 42px;
  height: 3px;

  left: 0;
  top: -2px;

  background:
    linear-gradient(
      90deg,
      #e0445d,
      #7358d7
    );
}

body[data-universe="jaiva"] .jaiva-signature span {
  display: block;

  margin-bottom: .5rem;

  color: #df405b;

  text-transform: uppercase;

  font-size: .66rem;

  font-weight: 900;

  letter-spacing: .17em;
}

body[data-universe="jaiva"] .jaiva-signature strong {
  color: #172033;

  font-size:
    clamp(1.25rem,1.8vw,1.5rem);

  letter-spacing: -.02em;
}


/* =========================================================
   AUDIENCES
   ========================================================= */

body[data-universe="jaiva"] .jaiva-project-columns {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    clamp(2rem,4vw,3.5rem);

  margin-bottom:
    2.6rem;
}

body[data-universe="jaiva"] .jaiva-project-columns > div {
  position: relative;

  padding-top: 1.1rem;
}

body[data-universe="jaiva"] .jaiva-project-columns > div::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 27px;
  height: 2px;

  background: #7257d9;
}

body[data-universe="jaiva"] .jaiva-project-columns strong {
  display: block;

  margin-bottom: .7rem;

  color: #7257d9;

  font-size: .91rem;
}

body[data-universe="jaiva"] .jaiva-project-columns p {
  margin: 0;

  color: #667184;

  font-size: .92rem;

  line-height: 1.62;
}



/* =========================================================
   RESPONSIVE HARMONY
   ========================================================= */

@media (max-width: 1000px) {

  body[data-universe="jaiva"] .jaiva-movement-heading {
    grid-template-columns: 1fr;

    gap: 1.7rem;
  }

  body[data-universe="jaiva"] .jaiva-beat {
    grid-template-columns:
      54px
      minmax(210px,.68fr)
      minmax(0,1fr);
  }

  body[data-universe="jaiva"] .jaiva-bridges-grid {
    grid-template-columns: 1fr;
  }

  body[data-universe="jaiva"] .jaiva-bridges-copy {
    max-width: 760px;
  }

}


@media (max-width: 700px) {

  body[data-universe="jaiva"] .jaiva-movement {
    padding:
      85px 0
      100px;
  }

  body[data-universe="jaiva"] .jaiva-movement-heading h2 {
    font-size:
      clamp(3rem,14vw,4.8rem);
  }

  body[data-universe="jaiva"] .jaiva-beat {
    grid-template-columns: 1fr;

    gap: 1rem;

    min-height: 0;

    padding:
      34px 0;
  }

  body[data-universe="jaiva"] .jaiva-beat-index {
    padding: 0;
  }

  body[data-universe="jaiva"] .jaiva-beat-word {
    font-size:
      clamp(3.8rem,18vw,5.5rem);
  }

  body[data-universe="jaiva"] .jaiva-project-columns {
    grid-template-columns: 1fr;
  }

  body[data-universe="jaiva"] .jaiva-bridges h2 {
    font-size:
      clamp(3.8rem,16vw,5.5rem);
  }

}


/* =========================================================
   JAIVA — PHOTO-FIRST VISUAL IDENTITY 009
   Human · musical · live · editorial
   ========================================================= */


/* =========================================================
   SHARED MEDIA
   ========================================================= */

body[data-universe="jaiva"] .jaiva-live-image {
  position: absolute;
  inset: 0;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  filter:
    saturate(1.08)
    contrast(1.04);
}


/* =========================================================
   HERO — LIVE WORLD
   ========================================================= */

body[data-universe="jaiva"] .jaiva-motion-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  justify-self: end;

  width: min(48vw, 690px);
  aspect-ratio: 1.16;

  border: 0;
  border-radius:
    45% 55% 48% 52% /
    54% 43% 57% 46%;

  background:
    linear-gradient(
      145deg,
      #17152c,
      #372554 43%,
      #9a365e 72%,
      #e45c5f
    );

  box-shadow:
    0 45px 100px
    rgba(45,31,70,.18);

  transform: rotate(-2deg);
}


/*
   Real image slot.
   The gradient fallback remains visible until the file exists.
*/

body[data-universe="jaiva"] .jaiva-live-image-hero {
  background-image:
    linear-gradient(
      115deg,
      rgba(14,16,34,.74),
      rgba(20,19,43,.16) 46%,
      rgba(200,43,83,.25)
    ),
    url("/assets/images/jaiva-hero-live.webp");
}


/* colored stage light */

body[data-universe="jaiva"] .jaiva-motion-stage::before {
  content: "";

  position: absolute;
  z-index: 2;

  width: 90%;
  height: 33%;

  left: -14%;
  top: 35%;

  transform: rotate(-13deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(239,184,58,.10),
      rgba(239,184,58,.72) 51%,
      rgba(230,65,83,.48) 73%,
      transparent
    );

  mix-blend-mode: screen;

  filter: blur(3px);

  pointer-events: none;
}


/* second light */

body[data-universe="jaiva"] .jaiva-motion-stage::after {
  content: "";

  position: absolute;
  z-index: 2;

  width: 92%;
  height: 30%;

  right: -20%;
  bottom: 20%;

  transform: rotate(12deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(15,154,128,.58),
      rgba(63,93,177,.74),
      transparent
    );

  mix-blend-mode: screen;

  filter: blur(4px);

  pointer-events: none;
}


/* =========================================================
   HERO TYPOGRAPHY ON IMAGE
   ========================================================= */

body[data-universe="jaiva"] .jaiva-live-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  padding:
    clamp(28px,4vw,48px);

  color: #fff;

  pointer-events: none;
}


body[data-universe="jaiva"] .jaiva-live-kicker {
  margin-bottom: .85rem;

  color:
    rgba(255,255,255,.66);

  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
}


body[data-universe="jaiva"] .jaiva-live-word {
  margin-left: -.04em;

  font-size:
    clamp(5rem,9vw,9rem);

  line-height: .68;

  letter-spacing: -.08em;

  font-weight: 950;

  color: #fff;

  text-shadow:
    0 15px 45px
    rgba(0,0,0,.25);
}


body[data-universe="jaiva"] .jaiva-live-countries {
  display: flex;
  flex-wrap: wrap;

  gap:
    .6rem 1.2rem;

  margin-top:
    1.45rem;

  color:
    rgba(255,255,255,.75);

  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .16em;
}


/* =========================================================
   AFRICAN ELECTRONIC BRIDGES — LIVE ARTWORK
   ========================================================= */

body[data-universe="jaiva"] .jaiva-poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  justify-self: end;

  width: min(43vw, 610px);
  aspect-ratio: .90;

  border: 0;

  border-radius:
    32px 90px 42px 75px;

  background:
    linear-gradient(
      145deg,
      #15172d,
      #3a245b 40%,
      #af365e 75%,
      #e5a43c
    );

  box-shadow:
    0 42px 95px
    rgba(43,29,68,.20);

  transform:
    rotate(1.3deg);
}


body[data-universe="jaiva"] .jaiva-live-image-aeb {
  background-image:
    linear-gradient(
      115deg,
      rgba(15,16,35,.72),
      rgba(26,21,48,.24) 51%,
      rgba(196,44,76,.24)
    ),
    url("/assets/images/jaiva-aeb-live.webp");
}


/* light flare */

body[data-universe="jaiva"] .jaiva-poster::before {
  content: "";

  position: absolute;
  z-index: 2;

  width: 125%;
  height: 28%;

  left: -12%;
  top: 47%;

  transform: rotate(-16deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(238,179,53,.62),
      rgba(229,63,82,.34),
      transparent
    );

  mix-blend-mode: screen;

  filter: blur(4px);

  pointer-events: none;
}


/* photographic grain */

body[data-universe="jaiva"] .jaiva-poster::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 3;

  opacity: .18;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255,255,255,.08) 3px 4px
    );

  pointer-events: none;
}


/* =========================================================
   AEB EDITORIAL TYPOGRAPHY
   ========================================================= */

body[data-universe="jaiva"] .jaiva-aeb-art {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: flex;
  flex-direction: column;

  padding:
    clamp(30px,4vw,52px);

  color: #fff;

  pointer-events: none;
}


body[data-universe="jaiva"] .jaiva-aeb-small {
  color:
    rgba(255,255,255,.64);

  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .15em;
}


body[data-universe="jaiva"] .jaiva-aeb-title {
  margin-top:
    clamp(30px,5vw,62px);

  color: #fff;

  font-size:
    clamp(3rem,5.2vw,5.7rem);

  font-weight: 950;

  line-height: .74;

  letter-spacing: -.065em;

  text-shadow:
    0 14px 40px
    rgba(0,0,0,.20);
}


body[data-universe="jaiva"] .jaiva-aeb-footer {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 1rem;

  margin-top: auto;

  padding-top: 2rem;

  border-top:
    1px solid
    rgba(255,255,255,.25);

  color:
    rgba(255,255,255,.82);

  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .12em;
}


/* =========================================================
   RESPONSIVE VISUALS
   ========================================================= */

@media (max-width: 1000px) {

  body[data-universe="jaiva"] .jaiva-motion-stage,
  body[data-universe="jaiva"] .jaiva-poster {
    justify-self: center;

    width:
      min(86vw,650px);
  }

}


@media (max-width: 650px) {

  body[data-universe="jaiva"] .jaiva-motion-stage {
    aspect-ratio: .92;
  }

  body[data-universe="jaiva"] .jaiva-live-word {
    font-size:
      clamp(4.6rem,23vw,7rem);
  }

  body[data-universe="jaiva"] .jaiva-poster {
    width: 90vw;
  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  body[data-universe="jaiva"]
  .jaiva-hero-grid,

  body[data-universe="jaiva"]
  .jaiva-bridges-grid {

    grid-template-columns: 1fr;

  }


  body[data-universe="jaiva"]
  .jaiva-motion-stage,

  body[data-universe="jaiva"]
  .jaiva-poster {

    justify-self: center;

    width:
      min(82vw,580px);

  }


  body[data-universe="jaiva"]
  .jaiva-beat {

    grid-template-columns:
      58px
      minmax(220px,.65fr)
      1fr;

  }

}


@media (max-width: 700px) {

  body[data-universe="jaiva"]
  .jaiva-hero {

    min-height: auto;

  }


  body[data-universe="jaiva"]
  .jaiva-hero h1 {

    font-size:
      clamp(6rem,27vw,9rem);

  }


  body[data-universe="jaiva"]
  .jaiva-tagline {

    font-size:
      clamp(2rem,9vw,3rem);

  }


  body[data-universe="jaiva"]
  .jaiva-beat {

    grid-template-columns: 1fr;

    gap: 1.2rem;

  }


  body[data-universe="jaiva"]
  .jaiva-project-columns {

    grid-template-columns: 1fr;

  }


  body[data-universe="jaiva"]
  .jaiva-bridges h2 {

    font-size:
      clamp(3.8rem,16vw,5.5rem);

  }

}


@media (prefers-reduced-motion: reduce) {

  body[data-universe="jaiva"]
  .motion-belgium,

  body[data-universe="jaiva"]
  .motion-japan,

  body[data-universe="jaiva"]
  .motion-africa {

    animation: none;

  }

}

/* ===== JAIVA CONTROLLED 014 — START ===== */

/*
   No free collage.
   No random polygons.
   No rotations.

   HERO:
   3 controlled photographic zones.

   AEB:
   graphic only.
*/


/* =========================================================
   HERO BACKGROUND
   ========================================================= */

body[data-universe="jaiva"] section:has(.jaiva-motion-stage) {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  color: #fff;

  background:
    radial-gradient(
      circle at 76% 32%,
      rgba(220,55,78,.19),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 81%,
      rgba(30,159,150,.13),
      transparent 28%
    ),
    linear-gradient(
      115deg,
      #091222 0%,
      #111326 46%,
      #21101f 74%,
      #0b1820 100%
    );
}


body[data-universe="jaiva"] section:has(.jaiva-motion-stage)::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7,12,24,.98) 0%,
      rgba(7,12,24,.94) 30%,
      rgba(7,12,24,.50) 44%,
      rgba(7,12,24,.06) 68%,
      transparent 100%
    );

  pointer-events: none;
}


body[data-universe="jaiva"] section:has(.jaiva-motion-stage) .wrap {
  position: relative;
  z-index: 2;
}


body[data-universe="jaiva"] section:has(.jaiva-motion-stage) h1 {
  color: #fff;
}


body[data-universe="jaiva"] section:has(.jaiva-motion-stage) h1 + * {
  color: #ff7861;
}


body[data-universe="jaiva"] section:has(.jaiva-motion-stage) p {
  color: rgba(255,255,255,.72);
}


body[data-universe="jaiva"] section:has(.jaiva-motion-stage) .eyebrow {
  color: #efbd5d;
}


body[data-universe="jaiva"] section:has(.jaiva-motion-stage) .button:not(.button-primary) {
  color: #fff;

  border-color: rgba(255,255,255,.42);

  background: rgba(8,13,24,.32);
}



/* =========================================================
   HERO STAGE
   ========================================================= */

body[data-universe="jaiva"] .jaiva-motion-stage {
  position: relative;

  width: min(51vw, 760px);
  aspect-ratio: 1.38;

  justify-self: end;

  overflow: hidden;

  margin-left: auto;

  border: 0;
  border-radius: 0;

  background:
    linear-gradient(
      135deg,
      rgba(27,18,37,.50),
      rgba(13,29,36,.28)
    );

  box-shadow: none;

  transform: none;
}


body[data-universe="jaiva"] .jaiva-hero-photo {
  position: absolute;

  top: 0;
  bottom: 0;

  background-repeat: no-repeat;

  filter:
    saturate(1.05)
    contrast(1.04);
}



/* =========================================================
   LEFT — YURI LIVE
   ========================================================= */

body[data-universe="jaiva"] .jaiva-hero-live {
  z-index: 1;

  left: 0;
  width: 27%;

  background-image:
    linear-gradient(
      90deg,
      rgba(10,13,23,.15),
      transparent 65%
    ),
    url("/assets/images/jaiva-yuri-live.webp");

  background-size: cover;

  background-position:
    49% 28%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      black 0%,
      black 76%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      black 0%,
      black 76%,
      transparent 100%
    );
}



/* =========================================================
   CENTER — GROUP
   ========================================================= */

body[data-universe="jaiva"] .jaiva-hero-group {
  z-index: 3;

  left: 18%;
  width: 57%;

  top: 4%;
  bottom: 2%;

  background-image:
    url("/assets/images/jaiva-group.webp");

  background-size: cover;

  background-position:
    center 34%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black 11%,
      black 89%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black 11%,
      black 89%,
      transparent 100%
    );
}



/* =========================================================
   RIGHT — DJ STEASY
   ========================================================= */

body[data-universe="jaiva"] .jaiva-hero-steasy {
  z-index: 5;

  left: 68%;
  width: 32%;

  top: 10%;
  bottom: 0;

  background-image:
    linear-gradient(
      90deg,
      transparent,
      rgba(7,12,22,.03)
    ),
    url("/assets/images/jaiva-steasy-street.webp");

  background-size: cover;

  /*
     Important:
     entire head and upper body kept inside frame.
  */
  background-position:
    50% 18%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black 14%,
      black 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black 14%,
      black 100%
    );

  filter:
    saturate(1.02)
    contrast(1.05);
}



/* =========================================================
   LIGHT THAT UNITES THE 3 IMAGES
   ========================================================= */

body[data-universe="jaiva"] .jaiva-hero-glow {
  position: absolute;

  z-index: 4;

  left: 18%;
  right: 0;

  bottom: 7%;

  height: 18%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(229,161,49,.26),
      rgba(222,61,82,.20),
      transparent
    );

  transform: rotate(-4deg);

  filter: blur(10px);

  pointer-events: none;

  mix-blend-mode: screen;
}



/* =========================================================
   TEXT SAFETY
   ========================================================= */

body[data-universe="jaiva"] section:has(.jaiva-motion-stage) h1,
body[data-universe="jaiva"] section:has(.jaiva-motion-stage) p,
body[data-universe="jaiva"] section:has(.jaiva-motion-stage) .eyebrow,
body[data-universe="jaiva"] section:has(.jaiva-motion-stage) .actions,
body[data-universe="jaiva"] section:has(.jaiva-motion-stage) .button {
  position: relative;

  z-index: 20;
}



/* =========================================================
   MOVE CONNECT SHARE
   ========================================================= */

body[data-universe="jaiva"] .jaiva-movement {
  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(222,64,90,.16),
      transparent 27%
    ),
    radial-gradient(
      circle at 87% 72%,
      rgba(45,187,158,.13),
      transparent 29%
    ),
    linear-gradient(
      126deg,
      #101625 0%,
      #171328 48%,
      #10242a 100%
    );
}



/* =========================================================
   AEB — GRAPHIC ONLY
   ========================================================= */

body[data-universe="jaiva"] .jaiva-poster {
  position: relative;
  isolation: isolate;

  width: min(46vw,670px);
  aspect-ratio: 1.03;

  justify-self: end;

  overflow: hidden;

  border: 0;

  border-radius:
    4px 86px 4px 108px;

  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(238,61,77,.94) 0 11%,
      rgba(238,61,77,.12) 12% 21%,
      transparent 22%
    ),

    radial-gradient(
      circle at 25% 77%,
      rgba(19,158,139,.76),
      transparent 22%
    ),

    linear-gradient(
      138deg,
      #10172b 0%,
      #27153f 38%,
      #732a55 67%,
      #e55d43 100%
    );

  box-shadow:
    0 38px 90px
    rgba(41,27,61,.19);

  transform: none;
}


/* absolutely no photo */

body[data-universe="jaiva"] .jaiva-live-image-aeb {
  display: none !important;

  background-image: none !important;
}



/* electronic beam */

body[data-universe="jaiva"] .jaiva-poster::before {
  content: "";

  position: absolute;

  z-index: 1;

  width: 135%;
  height: 24%;

  left: -18%;
  top: 50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(241,185,62,.64),
      rgba(229,61,82,.33),
      rgba(99,78,205,.44),
      transparent
    );

  transform:
    rotate(-16deg);

  filter:
    blur(2px);

  mix-blend-mode:
    screen;
}



/* sound field */

body[data-universe="jaiva"] .jaiva-poster::after {
  content: "";

  position: absolute;

  z-index: 2;

  inset: 9%;

  border:
    1px solid rgba(255,255,255,.17);

  border-radius:
    50%;

  box-shadow:
    0 0 0 54px rgba(255,255,255,.034),
    0 0 0 110px rgba(255,255,255,.021);

  transform:
    rotate(-10deg);
}



/* =========================================================
   AEB TYPOGRAPHY
   ========================================================= */

body[data-universe="jaiva"] .jaiva-aeb-art {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: flex;

  flex-direction: column;

  padding:
    clamp(35px,4vw,55px);

  color: #fff;

  pointer-events: none;
}


body[data-universe="jaiva"] .jaiva-aeb-small {
  color:
    rgba(255,255,255,.64);

  font-size: .58rem;

  font-weight: 900;

  letter-spacing: .16em;
}


body[data-universe="jaiva"] .jaiva-aeb-title {
  margin-top:
    clamp(44px,6vw,76px);

  color: #fff;

  font-size:
    clamp(3.7rem,5.5vw,6.2rem);

  line-height: .73;

  font-weight: 950;

  letter-spacing: -.072em;

  text-shadow:
    0 17px 42px
    rgba(0,0,0,.20);
}


body[data-universe="jaiva"] .jaiva-aeb-footer {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  margin-top: auto;

  padding-top: 1.3rem;

  border-top:
    1px solid rgba(255,255,255,.27);

  color:
    rgba(255,255,255,.78);

  font-size: .59rem;

  font-weight: 900;

  letter-spacing: .13em;
}


body[data-universe="jaiva"] .jaiva-bridges-copy::after {
  display: none !important;

  content: none !important;
}


body[data-universe="jaiva"] .jaiva-bridges-grid {
  grid-template-columns:
    minmax(0,.92fr)
    minmax(470px,1.08fr);

  gap:
    clamp(4rem,7vw,8rem);

  align-items: center;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  body[data-universe="jaiva"] .jaiva-motion-stage {
    width:
      min(88vw,760px);

    margin:
      3rem auto 0;
  }


  body[data-universe="jaiva"] .jaiva-poster {
    width:
      min(86vw,660px);

    margin:
      2rem auto 0;
  }


  body[data-universe="jaiva"] .jaiva-bridges-grid {
    grid-template-columns: 1fr;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  body[data-universe="jaiva"] .jaiva-motion-stage {
    width: 94vw;

    aspect-ratio: 1.05;
  }


  body[data-universe="jaiva"] .jaiva-hero-live {
    width: 30%;
  }


  body[data-universe="jaiva"] .jaiva-hero-group {
    left: 18%;

    width: 58%;
  }


  body[data-universe="jaiva"] .jaiva-hero-steasy {
    left: 66%;

    width: 34%;

    top: 12%;
  }


  body[data-universe="jaiva"] .jaiva-poster {
    width: 91vw;
  }


  body[data-universe="jaiva"] .jaiva-aeb-title {
    font-size:
      clamp(3rem,14vw,5rem);
  }

}

/* ===== JAIVA CONTROLLED 014 — END ===== */


/* ===== JAIVA ROUTE DOTS 015 ===== */

body[data-universe="jaiva"] .jaiva-route span {
  color: #c79b3b;
  font-size: .72em;
  font-weight: 900;
  margin-inline: .18em;
  vertical-align: .08em;
}

/* ===== END JAIVA ROUTE DOTS 015 ===== */

/* ===== EVEIL COMPACT 004 — START ===== */

body[data-universe="animation"] {

  --ec-ink: #172033;
  --ec-paper: #fbf7ee;
  --ec-amber: #e4a13a;
  --ec-green: #25977f;
  --ec-coral: #df6d5b;
  --ec-blue: #6077c8;

}


/* HERO */

body[data-universe="animation"] .eveil-c-hero {

  padding:
    clamp(75px,7vw,105px)
    0;

  background:

    radial-gradient(
      circle at 84% 18%,
      rgba(228,161,58,.18),
      transparent 26%
    ),

    radial-gradient(
      circle at 90% 82%,
      rgba(37,151,127,.10),
      transparent 25%
    ),

    #fbf7ee;

}


body[data-universe="animation"] .eveil-c-hero-grid {

  display: grid;

  grid-template-columns:
    minmax(400px,.98fr)
    minmax(430px,1.02fr);

  gap:
    clamp(3rem,7vw,7rem);

  align-items: center;

}


body[data-universe="animation"] .eveil-c-copy .eyebrow {

  color:
    #ac701e;

}


body[data-universe="animation"] .eveil-c-copy h1 {

  margin:
    .8rem 0
    1.6rem;

  color:
    var(--ec-ink);

  font-size:
    clamp(4.2rem,6.4vw,7rem);

  line-height:
    .84;

  letter-spacing:
    -.07em;

}


body[data-universe="animation"] .eveil-c-copy h1 span {

  display: block;

  color:
    #8d6077;

}


body[data-universe="animation"] .eveil-c-lead {

  max-width:
    650px;

  margin-bottom:
    1.7rem;

  color:
    #626c7d;

  font-size:
    1.06rem;

  line-height:
    1.65;

}



/* FACTS */

body[data-universe="animation"] .eveil-c-facts {

  display: flex;

  flex-wrap: wrap;

  gap:
    .55rem;

  margin-bottom:
    1.8rem;

}


body[data-universe="animation"] .eveil-c-facts span {

  padding:
    .65rem .85rem;

  border:
    1px solid rgba(23,32,51,.09);

  border-radius:
    999px;

  color:
    #667080;

  background:
    rgba(255,255,255,.67);

  font-size:
    .72rem;

}


body[data-universe="animation"] .eveil-c-facts strong {

  color:
    var(--ec-green);

}



/* BUTTON */

body[data-universe="animation"] .eveil-c-hero .button-primary,
body[data-universe="animation"] .eveil-c-final .button-primary {

  border: 0;

  color: #fff;

  background:
    linear-gradient(
      105deg,
      #de6e59,
      #e4a13a
    );

}



/* HERO VISUAL */

body[data-universe="animation"] .eveil-c-visual {

  position: relative;

  justify-self: end;

  width:
    min(43vw,600px);

  aspect-ratio:
    1.08;

  overflow: hidden;

  border-radius:
    48px 95px 50px 88px;

  background:

    radial-gradient(
      circle at 73% 28%,
      rgba(228,161,58,.55),
      transparent 29%
    ),

    radial-gradient(
      circle at 22% 77%,
      rgba(37,151,127,.38),
      transparent 26%
    ),

    linear-gradient(
      135deg,
      #fffdf9,
      #f5eadb
    );

  box-shadow:
    0 30px 70px
    rgba(78,57,32,.10);

}


body[data-universe="animation"] .eveil-c-visual::after {

  content: "";

  position: absolute;

  width: 110%;
  height: 18%;

  left: -5%;
  bottom: 25%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(223,109,91,.34),
      rgba(228,161,58,.45),
      transparent
    );

  transform:
    rotate(-13deg);

  filter:
    blur(5px);

}


body[data-universe="animation"] .eveil-c-word {

  position: absolute;

  z-index: 3;

  left: 10%;
  top: 12%;

  display: flex;

  flex-direction: column;

}


body[data-universe="animation"] .eveil-c-word strong {

  color:
    var(--ec-ink);

  font-size:
    clamp(4rem,6vw,6.5rem);

  line-height:
    .8;

  letter-spacing:
    -.075em;

}


body[data-universe="animation"] .eveil-c-word small {

  color:
    #a26b1f;

  font-size:
    .6rem;

  font-weight:
    900;

  letter-spacing:
    .18em;

}


body[data-universe="animation"] .eveil-c-flute {

  position: absolute;

  z-index: 4;

  width: 58%;
  height: 22px;

  left: 20%;
  bottom: 26%;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #cb8225,
      #f1be59,
      #d5912d
    );

  transform:
    rotate(-22deg);

}


body[data-universe="animation"] .eveil-c-flute i {

  position: absolute;

  top: 7px;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    #845827;

}


body[data-universe="animation"] .eveil-c-flute i:nth-child(1) { left: 20%; }
body[data-universe="animation"] .eveil-c-flute i:nth-child(2) { left: 34%; }
body[data-universe="animation"] .eveil-c-flute i:nth-child(3) { left: 48%; }
body[data-universe="animation"] .eveil-c-flute i:nth-child(4) { left: 62%; }
body[data-universe="animation"] .eveil-c-flute i:nth-child(5) { left: 76%; }


body[data-universe="animation"] .eveil-c-note {

  position: absolute;

  z-index: 5;

  font-size:
    2.6rem;

  font-weight:
    900;

}


body[data-universe="animation"] .note-a {

  right: 14%;
  top: 16%;

  color:
    var(--ec-blue);

}


body[data-universe="animation"] .note-b {

  right: 9%;
  top: 45%;

  color:
    var(--ec-coral);

}


body[data-universe="animation"] .note-c {

  left: 11%;
  bottom: 11%;

  color:
    var(--ec-green);

}



/* =========================================================
   CORE — ONE COMPACT SECTION
   ========================================================= */

body[data-universe="animation"] .eveil-c-core {

  padding:
    clamp(80px,8vw,110px)
    0;

  background:
    #fffaf2;

}


body[data-universe="animation"] .eveil-c-heading {

  display: grid;

  grid-template-columns:
    .34fr 1.66fr;

  gap: 3rem;

  align-items: start;

  margin-bottom:
    3.5rem;

}


body[data-universe="animation"] .eveil-c-heading .eyebrow {

  color:
    #ad711f;

}


body[data-universe="animation"] .eveil-c-heading h2 {

  margin: 0;

  color:
    var(--ec-ink);

  font-size:
    clamp(3.6rem,5.5vw,5.8rem);

  line-height:
    .86;

  letter-spacing:
    -.06em;

}


body[data-universe="animation"] .eveil-c-columns {

  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    clamp(2rem,5vw,5rem);

}


body[data-universe="animation"] .eveil-c-columns h3 {

  margin:
    0 0
    1rem;

  color:
    var(--ec-ink);

  font-size:
    1.65rem;

}


body[data-universe="animation"] .eveil-c-columns > div > p {

  max-width:
    560px;

  color:
    #687282;

  line-height:
    1.65;

}


body[data-universe="animation"] .eveil-c-concept ul {

  list-style: none;

  padding: 0;
  margin:
    1.5rem 0 0;

}


body[data-universe="animation"] .eveil-c-concept li {

  padding:
    .75rem 0;

  border-bottom:
    1px solid rgba(23,32,51,.08);

  color:
    #677181;

}


body[data-universe="animation"] .eveil-c-concept strong {

  display: inline-block;

  min-width:
    95px;

  color:
    var(--ec-green);

}



/* SESSION */

body[data-universe="animation"] .eveil-c-session ol {

  list-style: none;

  padding: 0;
  margin:
    1.4rem 0 0;

}


body[data-universe="animation"] .eveil-c-session li {

  display: grid;

  grid-template-columns:
    42px 1fr;

  gap: .9rem;

  padding:
    .7rem 0;

  border-bottom:
    1px solid rgba(23,32,51,.08);

}


body[data-universe="animation"] .eveil-c-session li > span {

  color:
    var(--ec-coral);

  font-size:
    .68rem;

  font-weight:
    900;

}


body[data-universe="animation"] .eveil-c-session strong {

  color:
    var(--ec-ink);

}


body[data-universe="animation"] .eveil-c-session p {

  margin:
    .2rem 0 0;

  color:
    #717a89;

  font-size:
    .86rem;

}



/* BENEFITS */

body[data-universe="animation"] .eveil-c-benefits {

  display: flex;

  flex-wrap: wrap;

  gap:
    .55rem;

  margin-top:
    3.5rem;

  padding-top:
    2rem;

  border-top:
    1px solid rgba(23,32,51,.09);

}


body[data-universe="animation"] .eveil-c-benefits span {

  padding:
    .62rem .85rem;

  border-radius:
    999px;

  background:
    rgba(37,151,127,.09);

  color:
    #287866;

  font-size:
    .72rem;

  font-weight:
    800;

}



/* =========================================================
   FINAL = HOST + REGISTRATION
   ========================================================= */

body[data-universe="animation"] .eveil-c-final {

  padding:
    clamp(80px,8vw,110px)
    0;

  background:
    linear-gradient(
      118deg,
      #efb24b,
      #ef9950 48%,
      #e2775d
    );

}


body[data-universe="animation"] .eveil-c-final-grid {

  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:
    clamp(4rem,8vw,9rem);

  align-items: center;

}


body[data-universe="animation"] .eveil-c-final .eyebrow {

  color:
    rgba(23,32,51,.60);

}


body[data-universe="animation"] .eveil-c-final h2 {

  margin:
    .8rem 0
    1.2rem;

  color:
    var(--ec-ink);

  font-size:
    clamp(3.5rem,5.5vw,5.8rem);

  line-height:
    .86;

  letter-spacing:
    -.06em;

}


body[data-universe="animation"] .eveil-c-final-grid > div > p {

  max-width:
    600px;

  color:
    rgba(23,32,51,.72);

  line-height:
    1.65;

}


body[data-universe="animation"] .eveil-c-register {

  padding:
    2.2rem;

  border-radius:
    28px;

  background:
    rgba(255,255,255,.40);

}


body[data-universe="animation"] .eveil-c-register h3 {

  margin:
    .6rem 0
    .8rem;

  color:
    var(--ec-ink);

  font-size:
    2rem;

}


body[data-universe="animation"] .eveil-c-phone {

  display: block;

  margin:
    1rem 0;

  color:
    var(--ec-ink);

  font-size:
    1.2rem;

  font-weight:
    900;

  text-decoration: none;

}


body[data-universe="animation"] .eveil-c-register small {

  color:
    rgba(23,32,51,.62);

  line-height:
    1.5;

}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  body[data-universe="animation"] .eveil-c-hero-grid,
  body[data-universe="animation"] .eveil-c-columns,
  body[data-universe="animation"] .eveil-c-cycle-head,
  body[data-universe="animation"] .eveil-c-final-grid {

    grid-template-columns:
      1fr;

  }


  body[data-universe="animation"] .eveil-c-visual {

    justify-self:
      center;

    width:
      min(82vw,600px);

  }


  body[data-universe="animation"] .eveil-c-heading {

    grid-template-columns:
      1fr;

    gap:
      1rem;

  }


}


@media (max-width: 650px) {

  body[data-universe="animation"] .eveil-c-copy h1 {

    font-size:
      clamp(3.5rem,17vw,5rem);

  }


  body[data-universe="animation"] .eveil-c-visual {

    width:
      92vw;

  }


  body[data-universe="animation"] .eveil-c-heading h2,
body[data-universe="animation"] .eveil-c-final h2 {

    font-size:
      clamp(3rem,14vw,4.4rem);

  }




  body[data-universe="animation"] .eveil-c-cycle-grid > div {

    min-height:
      110px;

  }

}

/* ===== EVEIL COMPACT 004 — END ===== */

/* ===== DOC CHAPELLE COMPACT 001 — START ===== */

body[data-universe="festival"] {

  --doc-ink: #111521;
  --doc-night: #0b0d12;
  --doc-night-soft: #15171d;

  --doc-paper: #f4efe6;
  --doc-gold: #d3a94d;
  --doc-brick: #b95d50;
  --doc-violet: #5d4b78;

}


/* =========================================================
   PAGE
   ========================================================= */

body[data-universe="festival"] .docc-page {

  overflow: hidden;

  background:
    var(--doc-night);

}



/* =========================================================
   HERO
   ========================================================= */

body[data-universe="festival"] .docc-hero {

  position: relative;

  min-height:
    min(760px, calc(100vh - 115px));

  display: flex;

  align-items: center;

  padding:
    clamp(70px,8vw,110px)
    0;

  color: #fff;

  background:

    radial-gradient(
      circle at 81% 26%,
      rgba(185,93,80,.20),
      transparent 24%
    ),

    radial-gradient(
      circle at 92% 78%,
      rgba(93,75,120,.22),
      transparent 28%
    ),

    linear-gradient(
      120deg,
      #090c12 0%,
      #12141d 49%,
      #20121a 100%
    );

}


body[data-universe="festival"] .docc-hero-grid {

  display: grid;

  grid-template-columns:
    minmax(420px,.94fr)
    minmax(480px,1.06fr);

  gap:
    clamp(4rem,7vw,8rem);

  align-items: center;

}


body[data-universe="festival"] .docc-hero .eyebrow {

  color:
    var(--doc-gold);

}


body[data-universe="festival"] .docc-hero h1 {

  margin:
    .9rem 0
    .8rem;

  color:
    #fff;

  font-size:
    clamp(6rem,9vw,10rem);

  line-height:
    .72;

  letter-spacing:
    -.075em;

}


body[data-universe="festival"] .docc-hero h1 span {

  color:
    var(--doc-gold);

}


body[data-universe="festival"] .docc-tagline {

  margin:
    1.7rem 0
    .8rem;

  color:
    #fff;

  font-size:
    clamp(1.6rem,2.4vw,2.4rem);

  font-weight:
    850;

  letter-spacing:
    -.035em;

}


body[data-universe="festival"] .docc-lead {

  max-width:
    620px;

  color:
    rgba(255,255,255,.62);

  font-size:
    1.02rem;

  line-height:
    1.7;

}


body[data-universe="festival"] .docc-hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap:
    .7rem;

  margin-top:
    2rem;

}


body[data-universe="festival"] .docc-hero .button {

  color:
    #fff;

  border-color:
    rgba(255,255,255,.25);

  background:
    rgba(255,255,255,.04);

}


body[data-universe="festival"] .docc-hero .button-primary {

  color:
    #17130d;

  border: 0;

  background:
    linear-gradient(
      105deg,
      #c99535,
      #e0bb66
    );

}


body[data-universe="festival"] .docc-meta {

  display: flex;

  flex-wrap: wrap;

  gap:
    .55rem;

  margin-top:
    2.5rem;

}


body[data-universe="festival"] .docc-meta span {

  padding:
    .52rem .72rem;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    999px;

  color:
    rgba(255,255,255,.57);

  font-size:
    .64rem;

  font-weight:
    800;

  letter-spacing:
    .05em;

}



/* =========================================================
   CINEMA SCREEN
   ========================================================= */

body[data-universe="festival"] .docc-screen {

  position: relative;

  justify-self: end;

  width:
    min(47vw,680px);

  aspect-ratio:
    1.18;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    4px 70px 4px 70px;

  background:

    radial-gradient(
      circle at 77% 18%,
      rgba(185,93,80,.76),
      transparent 17%
    ),

    radial-gradient(
      circle at 22% 77%,
      rgba(72,87,116,.37),
      transparent 24%
    ),

    linear-gradient(
      135deg,
      #181a20 0%,
      #241927 55%,
      #3c2026 100%
    );

  box-shadow:
    0 45px 110px
    rgba(0,0,0,.36);

}


body[data-universe="festival"] .docc-projector-beam {

  position: absolute;

  width: 125%;
  height: 26%;

  left: -19%;
  top: 47%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(211,169,77,.12),
      rgba(237,215,162,.56),
      rgba(185,93,80,.24),
      transparent
    );

  transform:
    rotate(-14deg);

  filter:
    blur(4px);

}


body[data-universe="festival"] .docc-screen-copy {

  position: absolute;

  z-index: 3;

  left: 8%;
  top: 10%;

}


body[data-universe="festival"] .docc-screen-copy small {

  display: block;

  margin-bottom:
    2.3rem;

  color:
    rgba(255,255,255,.54);

  font-size:
    .58rem;

  font-weight:
    900;

  letter-spacing:
    .18em;

}


body[data-universe="festival"] .docc-screen-copy strong {

  display: block;

  color: #fff;

  font-size:
    clamp(3.9rem,5.9vw,6.8rem);

  line-height:
    .76;

  letter-spacing:
    -.07em;

}


body[data-universe="festival"] .docc-screen-line {

  position: absolute;

  left: 8%;
  right: 8%;
  bottom: 15%;

  height: 1px;

  background:
    rgba(255,255,255,.19);

}


body[data-universe="festival"] .docc-screen-footer {

  position: absolute;

  left: 8%;
  right: 8%;
  bottom: 7%;

  display: flex;

  justify-content: space-between;

  color:
    rgba(255,255,255,.56);

  font-size:
    .56rem;

  font-weight:
    900;

  letter-spacing:
    .15em;

}



/* =========================================================
   FESTIVAL
   ========================================================= */

body[data-universe="festival"] .docc-festival {

  padding:
    clamp(90px,9vw,130px)
    0;

  background:
    var(--doc-paper);

}


body[data-universe="festival"] .docc-section-head {

  display: grid;

  grid-template-columns:
    .32fr 1fr .8fr;

  gap:
    clamp(2rem,5vw,6rem);

  align-items: start;

}


body[data-universe="festival"] .docc-festival .eyebrow {

  color:
    #9c7431;

}


body[data-universe="festival"] .docc-section-head h2 {

  margin: 0;

  color:
    var(--doc-ink);

  font-size:
    clamp(3.8rem,6vw,6.5rem);

  line-height:
    .83;

  letter-spacing:
    -.065em;

}


body[data-universe="festival"] .docc-section-head p {

  margin: 0;

  color:
    #646b78;

  line-height:
    1.7;

}



/* PRINCIPLES */

body[data-universe="festival"] .docc-principles {

  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  margin-top:
    clamp(65px,7vw,90px);

  border-top:
    1px solid rgba(17,21,33,.12);

}


body[data-universe="festival"] .docc-principles article {

  min-height:
    230px;

  padding:
    1.7rem 1.5rem;

  border-right:
    1px solid rgba(17,21,33,.10);

}


body[data-universe="festival"] .docc-principles article:last-child {

  border-right: 0;

}


body[data-universe="festival"] .docc-principles article > span {

  color:
    #a88a54;

  font-size:
    .63rem;

  font-weight:
    900;

}


body[data-universe="festival"] .docc-principles strong {

  display: block;

  margin:
    2.7rem 0
    .8rem;

  color:
    var(--doc-ink);

  font-size:
    1.3rem;

}


body[data-universe="festival"] .docc-principles p {

  color:
    #6f7480;

  font-size:
    .88rem;

  line-height:
    1.6;

}



/* =========================================================
   PROGRAMME
   ========================================================= */

body[data-universe="festival"] .docc-programme {

  padding:
    clamp(95px,9vw,135px)
    0;

  color: #fff;

  background:

    radial-gradient(
      circle at 86% 20%,
      rgba(185,93,80,.16),
      transparent 26%
    ),

    linear-gradient(
      125deg,
      #101218,
      #171820 58%,
      #21151b
    );

}


body[data-universe="festival"] .docc-programme-head {

  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:
    clamp(3rem,7vw,8rem);

  align-items: end;

}


body[data-universe="festival"] .docc-programme .eyebrow {

  color:
    var(--doc-gold);

}


body[data-universe="festival"] .docc-programme h2 {

  margin:
    .8rem 0 0;

  color: #fff;

  font-size:
    clamp(4rem,6vw,6.5rem);

  line-height:
    .83;

  letter-spacing:
    -.065em;

}


body[data-universe="festival"] .docc-programme-head > p {

  margin: 0;

  color:
    rgba(255,255,255,.58);

  line-height:
    1.7;

}



/* THEMES */

body[data-universe="festival"] .docc-themes {

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  margin-top:
    4rem;

  border-top:
    1px solid rgba(255,255,255,.14);

  border-left:
    1px solid rgba(255,255,255,.14);

}


body[data-universe="festival"] .docc-themes > div {

  min-height:
    150px;

  padding:
    1.4rem;

  border-right:
    1px solid rgba(255,255,255,.14);

  border-bottom:
    1px solid rgba(255,255,255,.14);

}


body[data-universe="festival"] .docc-themes span {

  display: block;

  color:
    var(--doc-gold);

  font-size:
    .62rem;

  font-weight:
    900;

}


body[data-universe="festival"] .docc-themes strong {

  display: block;

  margin-top:
    1.8rem;

  color: #fff;

  font-size:
    1.45rem;

}


body[data-universe="festival"] .docc-themes small {

  display: block;

  margin-top:
    .35rem;

  color:
    rgba(255,255,255,.50);

}



/* GUESTS */

body[data-universe="festival"] .docc-guests {

  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:
    clamp(3rem,7vw,8rem);

  margin-top:
    clamp(70px,8vw,100px);

  padding-top:
    clamp(60px,7vw,85px);

  border-top:
    1px solid rgba(255,255,255,.14);

}


body[data-universe="festival"] .docc-guests-heading h3 {

  margin:
    .8rem 0
    1.2rem;

  color: #fff;

  font-size:
    clamp(2.8rem,4vw,4.4rem);

  line-height:
    .88;

  letter-spacing:
    -.055em;

}


body[data-universe="festival"] .docc-guests-heading p {

  color:
    rgba(255,255,255,.52);

  line-height:
    1.65;

}


body[data-universe="festival"] .docc-guests-list {

  border-top:
    1px solid rgba(255,255,255,.14);

}


body[data-universe="festival"] .docc-guests-list > div {

  display: flex;

  justify-content: space-between;

  gap: 2rem;

  padding:
    1.25rem 0;

  border-bottom:
    1px solid rgba(255,255,255,.14);

}


body[data-universe="festival"] .docc-guests-list strong {

  color: #fff;

}


body[data-universe="festival"] .docc-guests-list span {

  color:
    rgba(255,255,255,.50);

  text-align: right;

  font-size:
    .82rem;

}



/* =========================================================
   FINAL
   ========================================================= */

body[data-universe="festival"] .docc-final {

  padding:
    clamp(90px,9vw,130px)
    0;

  background:
    linear-gradient(
      118deg,
      #e4d6bd 0%,
      #f0e5d3 55%,
      #d9b970 100%
    );

}


body[data-universe="festival"] .docc-final-grid {

  display: grid;

  grid-template-columns:
    1.12fr .88fr;

  gap:
    clamp(4rem,8vw,9rem);

  align-items: center;

}


body[data-universe="festival"] .docc-final .eyebrow {

  color:
    #80632f;

}


body[data-universe="festival"] .docc-participate h2 {

  margin:
    .8rem 0
    2rem;

  color:
    var(--doc-ink);

  font-size:
    clamp(4rem,6vw,6.4rem);

  line-height:
    .82;

  letter-spacing:
    -.065em;

}


body[data-universe="festival"] .docc-participation-list {

  max-width:
    670px;

  border-top:
    1px solid rgba(17,21,33,.13);

}


body[data-universe="festival"] .docc-participation-list > div {

  display: grid;

  grid-template-columns:
    160px 1fr;

  gap:
    1.5rem;

  padding:
    1rem 0;

  border-bottom:
    1px solid rgba(17,21,33,.13);

}


body[data-universe="festival"] .docc-participation-list strong {

  color:
    var(--doc-brick);

}


body[data-universe="festival"] .docc-participation-list span {

  color:
    #626875;

}


body[data-universe="festival"] .docc-contact {

  padding:
    clamp(2rem,4vw,3rem);

  border:
    1px solid rgba(17,21,33,.12);

  background:
    rgba(255,255,255,.36);

}


body[data-universe="festival"] .docc-contact h3 {

  margin:
    .8rem 0
    1rem;

  color:
    var(--doc-ink);

  font-size:
    clamp(2.6rem,4vw,4rem);

  line-height:
    .9;

  letter-spacing:
    -.055em;

}


body[data-universe="festival"] .docc-contact p {

  color:
    #616875;

  line-height:
    1.65;

}


body[data-universe="festival"] .docc-contact .button-primary {

  margin-top:
    1rem;

  border: 0;

  color: #fff;

  background:
    var(--doc-ink);

}


body[data-universe="festival"] .docc-phone {

  display: block;

  margin:
    1.3rem 0
    .4rem;

  color:
    var(--doc-ink);

  font-size:
    1.15rem;

  font-weight:
    900;

  text-decoration: none;

}


body[data-universe="festival"] .docc-contact small {

  color:
    rgba(17,21,33,.55);

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  body[data-universe="festival"] .docc-hero-grid,
  body[data-universe="festival"] .docc-section-head,
  body[data-universe="festival"] .docc-programme-head,
  body[data-universe="festival"] .docc-guests,
  body[data-universe="festival"] .docc-final-grid {

    grid-template-columns:
      1fr;

  }


  body[data-universe="festival"] .docc-screen {

    justify-self:
      center;

    width:
      min(84vw,650px);

  }


  body[data-universe="festival"] .docc-principles {

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }


  body[data-universe="festival"] .docc-themes {

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  body[data-universe="festival"] .docc-hero h1 {

    font-size:
      clamp(5rem,22vw,7rem);

  }


  body[data-universe="festival"] .docc-screen {

    width:
      92vw;

  }


  body[data-universe="festival"] .docc-screen-copy strong {

    font-size:
      clamp(3.2rem,14vw,5rem);

  }


  body[data-universe="festival"] .docc-section-head h2,
  body[data-universe="festival"] .docc-programme h2,
  body[data-universe="festival"] .docc-participate h2 {

    font-size:
      clamp(3.2rem,15vw,4.7rem);

  }


  body[data-universe="festival"] .docc-principles,
  body[data-universe="festival"] .docc-themes {

    grid-template-columns:
      1fr;

  }


  body[data-universe="festival"] .docc-principles article {

    min-height:
      0;

  }


  body[data-universe="festival"] .docc-guests-list > div {

    flex-direction:
      column;

    gap:
      .35rem;

  }


  body[data-universe="festival"] .docc-guests-list span {

    text-align:
      left;

  }


  body[data-universe="festival"] .docc-participation-list > div {

    grid-template-columns:
      1fr;

    gap:
      .3rem;

  }

}

/* ===== DOC CHAPELLE COMPACT 001 — END ===== */

/* ===== DOCCHAPPELLE NO OVERLAP 003 — START ===== */

body[data-universe="festival"] .docc-hero-grid {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap:
    clamp(3rem, 5vw, 6rem);
}

body[data-universe="festival"] .docc-hero-copy {
  min-width: 0;
}

body[data-universe="festival"] .docc-hero h1 {
  max-width: 100%;

  font-size:
    clamp(4.8rem, 6.7vw, 7.2rem);

  line-height: .78;

  white-space: nowrap;
}

body[data-universe="festival"] .docc-screen {
  width:
    min(44vw, 640px);

  max-width: 100%;
}

@media (max-width: 1180px) {

  body[data-universe="festival"] .docc-hero h1 {
    font-size:
      clamp(4.3rem, 6.2vw, 6.3rem);
  }

}

@media (max-width: 1000px) {

  body[data-universe="festival"] .docc-hero h1 {
    white-space: normal;
  }

}

/* ===== DOCCHAPPELLE NO OVERLAP 003 — END ===== */

/* ===== CONTACT HUB 001 — START ===== */

body[data-universe="main"] .contact-v2 {

  min-height:
    calc(100vh - 190px);

  background:
    #f7f2e9;

}


/* =========================================================
   HERO
   ========================================================= */

body[data-universe="main"] .contact-v2-hero {

  position: relative;

  min-height:
    calc(100vh - 190px);

  display: flex;

  align-items: center;

  overflow: hidden;

  padding:
    clamp(70px,8vw,110px)
    0;

  background:

    radial-gradient(
      circle at 91% 18%,
      rgba(114,87,217,.12),
      transparent 24%
    ),

    radial-gradient(
      circle at 84% 82%,
      rgba(21,156,153,.10),
      transparent 26%
    ),

    radial-gradient(
      circle at 6% 88%,
      rgba(231,165,61,.09),
      transparent 22%
    ),

    #f7f2e9;

}


body[data-universe="main"] .contact-v2-grid {

  display: grid;

  grid-template-columns:
    minmax(390px,.92fr)
    minmax(500px,1.08fr);

  gap:
    clamp(4rem,8vw,9rem);

  align-items: center;

}



/* =========================================================
   INTRO
   ========================================================= */

body[data-universe="main"] .contact-v2-intro .eyebrow {

  color:
    #7257d9;

}


body[data-universe="main"] .contact-v2-intro h1 {

  margin:
    .9rem 0
    1.6rem;

  color:
    #172033;

  font-size:
    clamp(4.8rem,7vw,7.8rem);

  line-height:
    .82;

  letter-spacing:
    -.072em;

}


body[data-universe="main"] .contact-v2-intro h1 span {

  background:
    linear-gradient(
      100deg,
      #7257d9 0%,
      #d85d72 38%,
      #e2a039 70%,
      #159c99 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

}


body[data-universe="main"] .contact-v2-intro > p {

  max-width:
    560px;

  color:
    #626b7c;

  font-size:
    1.05rem;

  line-height:
    1.7;

}



/* =========================================================
   DIRECT CONTACT
   ========================================================= */

body[data-universe="main"] .contact-v2-direct {

  display: flex;

  flex-wrap: wrap;

  gap:
    2.2rem;

  margin-top:
    3rem;

  padding-top:
    1.8rem;

  border-top:
    1px solid rgba(23,32,51,.11);

}


body[data-universe="main"] .contact-v2-direct a {

  display: flex;

  flex-direction: column;

  gap:
    .3rem;

  color:
    #172033;

  text-decoration:
    none;

}


body[data-universe="main"] .contact-v2-direct small {

  color:
    #8a909b;

  font-size:
    .62rem;

  font-weight:
    850;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


body[data-universe="main"] .contact-v2-direct strong {

  font-size:
    1rem;

}



/* =========================================================
   TOPIC LIST
   ========================================================= */

body[data-universe="main"] .contact-v2-topics {

  border-top:
    1px solid rgba(23,32,51,.13);

}


body[data-universe="main"] .contact-v2-topics-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    0 0
    1.1rem;

  color:
    #172033;

  font-size:
    .75rem;

  font-weight:
    850;

}


body[data-universe="main"] .contact-v2-topics-head small {

  color:
    #8a909b;

  font-weight:
    700;

}


body[data-universe="main"] .contact-v2-topics > a {

  display: grid;

  grid-template-columns:
    52px
    1fr
    38px;

  gap:
    1rem;

  align-items: center;

  min-height:
    94px;

  padding:
    1rem .2rem;

  border-bottom:
    1px solid rgba(23,32,51,.13);

  color:
    #172033;

  text-decoration:
    none;

  transition:
    padding .2s ease,
    background .2s ease;

}


body[data-universe="main"] .contact-v2-topics > a:hover {

  padding-left:
    1rem;

  padding-right:
    1rem;

  background:
    rgba(255,255,255,.52);

}


body[data-universe="main"] .contact-v2-index {

  color:
    #9ca1ab;

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

}


body[data-universe="main"] .contact-v2-topic-name {

  display: flex;

  flex-direction: column;

  gap:
    .25rem;

}


body[data-universe="main"] .contact-v2-topic-name strong {

  font-size:
    clamp(1.35rem,2vw,1.8rem);

  letter-spacing:
    -.035em;

}


body[data-universe="main"] .contact-v2-topic-name small {

  color:
    #757d8b;

  font-size:
    .76rem;

}


body[data-universe="main"] .contact-v2-arrow {

  color:
    #7257d9;

  font-size:
    1.25rem;

  text-align:
    right;

}



/* =========================================================
   INDIVIDUAL UNIVERSE ACCENTS
   ========================================================= */

body[data-universe="main"]
.contact-v2-topics > a:nth-of-type(1)
.contact-v2-arrow {

  color:
    #536fd5;

}


body[data-universe="main"]
.contact-v2-topics > a:nth-of-type(2)
.contact-v2-arrow {

  color:
    #d85d72;

}


body[data-universe="main"]
.contact-v2-topics > a:nth-of-type(3)
.contact-v2-arrow {

  color:
    #dc9631;

}


body[data-universe="main"]
.contact-v2-topics > a:nth-of-type(4)
.contact-v2-arrow {

  color:
    #b85757;

}


body[data-universe="main"]
.contact-v2-topics > a:nth-of-type(5)
.contact-v2-arrow {

  color:
    #159c99;

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  body[data-universe="main"] .contact-v2-grid {

    grid-template-columns:
      1fr;

    gap:
      4rem;

  }


  body[data-universe="main"] .contact-v2-hero {

    min-height:
      auto;

  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  body[data-universe="main"] .contact-v2-hero {

    padding:
      65px 0
      80px;

  }


  body[data-universe="main"] .contact-v2-intro h1 {

    font-size:
      clamp(4rem,18vw,5.7rem);

  }


  body[data-universe="main"] .contact-v2-direct {

    flex-direction:
      column;

    gap:
      1.2rem;

  }


  body[data-universe="main"] .contact-v2-topics > a {

    grid-template-columns:
      36px
      1fr
      25px;

    min-height:
      86px;

  }

}

/* ===== CONTACT HUB 001 — END ===== */

/* ===== KV HOME DNA CLONE 001B — START ===== */

/* Exact declaration-body clone of the KALE VERSE home visual. */

body[data-universe="animation"] .eveil-c-hero::after {
  content: "";
  display: block;

  position: absolute;
  z-index: 1;

  width: clamp(420px, 42vw, 680px);
  height: clamp(420px, 42vw, 680px);

  right: clamp(-155px, -5vw, -55px);
  top: 50%;

  transform:
    translateY(-48%)
    rotate(-7deg);

  border-radius: 50%;

  background:

    /* KAeL — orbital rings */
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),

    /* Animation — amber point */
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),

    /* Animation / transmission — emerald point */
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),

    /* JAIVA — cultural meeting */
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),

    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),

    /* Festival — cinematic vertical rhythm */
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),

    /* Common KALE VERSE field */
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  border:
    1px solid rgba(49,87,213,.10);

  box-shadow:
    0 32px 90px rgba(23,32,51,.07);

  opacity: .96;
}

body[data-universe="festival"] .docc-hero::after {
  content: "";
  display: block;

  position: absolute;
  z-index: 1;

  width: clamp(420px, 42vw, 680px);
  height: clamp(420px, 42vw, 680px);

  right: clamp(-155px, -5vw, -55px);
  top: 50%;

  transform:
    translateY(-48%)
    rotate(-7deg);

  border-radius: 50%;

  background:

    /* KAeL — orbital rings */
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),

    /* Animation — amber point */
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),

    /* Animation / transmission — emerald point */
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),

    /* JAIVA — cultural meeting */
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),

    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),

    /* Festival — cinematic vertical rhythm */
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),

    /* Common KALE VERSE field */
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  border:
    1px solid rgba(49,87,213,.10);

  box-shadow:
    0 32px 90px rgba(23,32,51,.07);

  opacity: .96;
}

body[data-universe="main"] .contact-v2-hero::after {
  content: "";
  display: block;

  position: absolute;
  z-index: 1;

  width: clamp(420px, 42vw, 680px);
  height: clamp(420px, 42vw, 680px);

  right: clamp(-155px, -5vw, -55px);
  top: 50%;

  transform:
    translateY(-48%)
    rotate(-7deg);

  border-radius: 50%;

  background:

    /* KAeL — orbital rings */
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),

    /* Animation — amber point */
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),

    /* Animation / transmission — emerald point */
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),

    /* JAIVA — cultural meeting */
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),

    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),

    /* Festival — cinematic vertical rhythm */
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),

    /* Common KALE VERSE field */
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  border:
    1px solid rgba(49,87,213,.10);

  box-shadow:
    0 32px 90px rgba(23,32,51,.07);

  opacity: .96;
}

/*
   Structural adapters only.
   They do not alter the copied artwork.
*/

body[data-universe="animation"] .eveil-c-hero,
body[data-universe="festival"] .docc-hero,
body[data-universe="main"] .contact-v2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body[data-universe="animation"] .eveil-c-hero > .wrap,
body[data-universe="festival"] .docc-hero > .wrap,
body[data-universe="main"] .contact-v2-hero > .wrap {
  position: relative;
  z-index: 2;
}

body[data-universe="animation"] .eveil-c-hero::after,
body[data-universe="festival"] .docc-hero::after,
body[data-universe="main"] .contact-v2-hero::after {
  pointer-events: none;
}

/* ===== KV HOME DNA CLONE 001B — END ===== */

/* ===== JAIVA HOME DNA 016 — START ===== */

body[data-universe="jaiva"] section:has(.jaiva-motion-stage)::after {
  content: "";
  display: block;

  position: absolute;
  z-index: 1;

  width: clamp(420px, 42vw, 680px);
  height: clamp(420px, 42vw, 680px);

  right: clamp(-155px, -5vw, -55px);
  top: 50%;

  transform:
    translateY(-48%)
    rotate(-7deg);

  border-radius: 50%;

  background:

    /* KAeL — orbital rings */
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),

    /* Animation — amber point */
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),

    /* Animation / transmission — emerald point */
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),

    /* JAIVA — cultural meeting */
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),

    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),

    /* Festival — cinematic vertical rhythm */
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),

    /* Common KALE VERSE field */
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  border:
    1px solid rgba(49,87,213,.10);

  box-shadow:
    0 32px 90px rgba(23,32,51,.07);

  opacity: .96;
}


/*
   Structural safety only.
   Artwork itself remains byte-identical to HOME.
*/

body[data-universe="jaiva"] section:has(.jaiva-motion-stage) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body[data-universe="jaiva"] section:has(.jaiva-motion-stage) > .wrap {
  position: relative;
  z-index: 2;
}

body[data-universe="jaiva"] section:has(.jaiva-motion-stage)::after {
  pointer-events: none;
}

/* ===== JAIVA HOME DNA 016 — END ===== */

/* ===== KAEL HOME DNA 010 — START ===== */

/* Old KAeL-specific hero artwork is neutralised here. */


body[data-universe="kael"] .hero::before {
  content: none !important;
  display: none !important;
}

/* Exact byte-for-byte HOME DNA clone. */

body[data-universe="kael"] .hero::after {
  content: "";
  display: block;

  position: absolute;
  z-index: 1;

  width: clamp(420px, 42vw, 680px);
  height: clamp(420px, 42vw, 680px);

  right: clamp(-155px, -5vw, -55px);
  top: 50%;

  transform:
    translateY(-48%)
    rotate(-7deg);

  border-radius: 50%;

  background:

    /* KAeL — orbital rings */
    radial-gradient(
      circle at 42% 43%,
      transparent 0 70px,
      rgba(49,87,213,.22) 71px 73px,
      transparent 74px 105px,
      rgba(0,142,145,.18) 106px 108px,
      transparent 109px
    ),

    /* Animation — amber point */
    radial-gradient(
      circle at 63% 29%,
      rgba(226,154,36,.32) 0 38px,
      transparent 39px
    ),

    /* Animation / transmission — emerald point */
    radial-gradient(
      circle at 73% 69%,
      rgba(22,138,114,.24) 0 55px,
      transparent 56px
    ),

    /* JAIVA — cultural meeting */
    radial-gradient(
      ellipse at 74% 43%,
      rgba(113,59,114,.26) 0 19%,
      transparent 42%
    ),

    radial-gradient(
      ellipse at 80% 62%,
      rgba(217,93,93,.25) 0 18%,
      transparent 43%
    ),

    /* Festival — cinematic vertical rhythm */
    linear-gradient(
      90deg,
      transparent 0 72%,
      rgba(143,51,69,.16) 72% 72.7%,
      transparent 72.7% 79%,
      rgba(81,71,168,.17) 79% 79.7%,
      transparent 79.7%
    ),

    /* Common KALE VERSE field */
    linear-gradient(
      138deg,
      rgba(49,87,213,.12) 0%,
      rgba(0,142,145,.10) 31%,
      rgba(226,154,36,.11) 52%,
      rgba(217,93,93,.12) 73%,
      rgba(81,71,168,.14) 100%
    );

  border:
    1px solid rgba(49,87,213,.10);

  box-shadow:
    0 32px 90px rgba(23,32,51,.07);

  opacity: .96;
}


/*
   Structural adapters only.
   They do not alter the HOME artwork.
*/

body[data-universe="kael"] .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body[data-universe="kael"] .hero > .wrap {
  position: relative;
  z-index: 2;
}

body[data-universe="kael"] .hero::after {
  pointer-events: none;
}

/* ===== KAEL HOME DNA 010 — END ===== */

/* ===== KALE VERSE TRILINGUAL 001 — START ===== */

.kv-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-left: .7rem;
  padding-left: .85rem;
  border-left: 1px solid rgba(255,255,255,.18);
}

.kv-lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 28px;
  padding: .25rem .42rem;
  border-radius: 999px;
  color: rgba(255,255,255,.66);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  transition:
    background .18s ease,
    color .18s ease;
}

.kv-lang-switch a:hover {
  color: #fff;
  background: rgba(255,255,255,.10);
}

.kv-lang-switch a[aria-current="true"] {
  color: #172033;
  background: #fff;
}

.kv-lang-switch a[lang="ja"] {
  min-width: 44px;
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .kv-lang-switch {
    margin:
      .6rem 0 0;
    padding:
      .7rem 0 0;
    border-left: 0;
    border-top:
      1px solid rgba(255,255,255,.14);
  }
}

/* ===== KALE VERSE TRILINGUAL 001 — END ===== */

/* ===== KALE VERSE TRILINGUAL HEADER 002 — START ===== */

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.65rem, 1.5vw, 1.35rem);
}

.site-nav .kv-lang-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .22rem;

  margin-left: .35rem;
  padding-left: .8rem;

  border-left:
    1px solid rgba(255,255,255,.16);
}

.site-nav .kv-lang-switch a {
  min-width: 30px;
  min-height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .25rem .42rem;

  border-radius: 999px;

  color:
    rgba(255,255,255,.68);

  font-size: .64rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .04em;

  text-decoration: none;
}

.site-nav .kv-lang-switch a[aria-current="true"] {
  color: #172033;
  background: #fff;
}

.site-nav .kv-lang-switch a[lang="ja"] {
  min-width: 46px;
  letter-spacing: 0;
}


/* MOBILE — languages stay separate from main menu */

@media (max-width: 860px) {

  .site-nav {
    align-items: flex-start;
  }

  .site-nav .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }

  .site-nav .kv-lang-switch {
    margin:
      .8rem 0 0;

    padding:
      .8rem 0 0;

    border-left: 0;

    border-top:
      1px solid rgba(255,255,255,.14);
  }

}

/* ===== KALE VERSE TRILINGUAL HEADER 002 — END ===== */

/* ===== CONTACT CENTRALIZATION 003 — START ===== */

/*
   Project pages present the project.
   Direct contact actions live on the Contact page only.
*/


/* ÉVEIL — use the free space left by registration removal */

body[data-universe="animation"] .eveil-c-final-grid {
  grid-template-columns:
    minmax(0, 1fr);
}

body[data-universe="animation"] .eveil-c-host {
  max-width:
    820px;
}


/* Doc’ChAppelle — participation remains editorial */

body[data-universe="festival"] .docc-final-grid {
  grid-template-columns:
    minmax(0, 1fr);
}

body[data-universe="festival"] .docc-participate {
  max-width:
    920px;
}

/* ===== CONTACT CENTRALIZATION 003 — END ===== */

/* ===== MUSIC INSTAGRAM 001 — START ===== */

body[data-universe="music"] {
  --universe-a: #7257d9;
  --universe-b: #e96f62;
}


.music-hero {
  padding:
    clamp(5.5rem, 10vw, 9rem)
    0
    clamp(2.5rem, 5vw, 4.5rem);
}


.music-hero-inner {
  max-width:
    880px;
}


.music-hero h1 {
  max-width:
    780px;
  margin:
    .35rem 0 1rem;
}


.music-lead {
  max-width:
    720px;
  margin:
    0;
  font-size:
    clamp(1.05rem, 1.8vw, 1.3rem);
  line-height:
    1.65;
  color:
    var(--muted);
}


.music-feed {
  padding:
    0 0 clamp(5rem, 9vw, 8rem);
}


.music-instagram-grid {
  display:
    grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 310px), 1fr)
    );
  gap:
    clamp(1rem, 2vw, 1.6rem);
  align-items:
    start;
}


.music-social-card {
  min-width:
    0;
  padding:
    1rem;
  border:
    1px solid rgba(23, 32, 51, .10);
  border-radius:
    24px;
  background:
    rgba(255, 255, 255, .76);
  box-shadow:
    0 18px 55px rgba(23, 32, 51, .08);
}


.music-item-label {
  margin:
    0 0 .8rem;
  font-size:
    .74rem;
  font-weight:
    800;
  letter-spacing:
    .14em;
  text-transform:
    uppercase;
  color:
    var(--muted);
}


.music-social-card .instagram-media {
  width:
    100% !important;
  min-width:
    0 !important;
  max-width:
    100% !important;
  margin:
    0 !important;
}


.music-instagram-note {
  max-width:
    720px;
  margin:
    2rem auto 0;
  text-align:
    center;
  font-size:
    .9rem;
  color:
    var(--muted);
}


@media (max-width: 720px) {

  .music-hero {
    padding-top:
      4.5rem;
  }

  .music-social-card {
    padding:
      .65rem;
    border-radius:
      18px;
  }

}

/* ===== MUSIC INSTAGRAM 001 — END ===== */

/* ===== MUSIC INSTAGRAM 002 — START ===== */

.music-instagram-frame {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(114,87,217,.08),
      rgba(233,111,98,.08)
    );
}

.music-instagram-frame iframe {
  display: block;
  width: 100%;
  min-height: 560px;
  border: 0;
  background: #fff;
}

.music-instagram-link {
  display: inline-flex;
  align-items: center;
  margin-top: .85rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.music-instagram-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {

  .music-instagram-frame,
  .music-instagram-frame iframe {
    min-height: 520px;
  }

}

/* ===== MUSIC INSTAGRAM 002 — END ===== */

/* ===== MUSIC LOUNGE 003 — START ===== */

body[data-universe="music"] {
  background:
    #101728;
}


.music-lounge {
  position:
    relative;
  overflow:
    hidden;
  isolation:
    isolate;
  min-height:
    100vh;
  background:
    linear-gradient(
      180deg,
      #11192c 0%,
      #17172b 42%,
      #221827 72%,
      #121a2c 100%
    );
}


.music-light {
  position:
    absolute;
  z-index:
    -1;
  width:
    42rem;
  height:
    42rem;
  border-radius:
    50%;
  filter:
    blur(85px);
  opacity:
    .28;
  pointer-events:
    none;
}


.music-light-a {
  top:
    3rem;
  left:
    -16rem;
  background:
    #7257d9;
}


.music-light-b {
  top:
    20rem;
  right:
    -18rem;
  background:
    #e96f62;
}


.music-light-c {
  bottom:
    -16rem;
  left:
    30%;
  background:
    #e7a53d;
  opacity:
    .16;
}


.music-hero {
  position:
    relative;
  padding:
    clamp(6rem, 10vw, 9rem)
    0
    clamp(3rem, 6vw, 5rem);
}


.music-hero-inner {
  max-width:
    1000px;
}


.music-hero .eyebrow {
  color:
    rgba(255,255,255,.62);
}


.music-hero h1 {
  margin:
    .3rem 0 1rem;
  max-width:
    none;
  font-size:
    clamp(4rem, 9vw, 8.2rem);
  line-height:
    .88;
  letter-spacing:
    -.065em;
  color:
    #fff;
}


.music-lead {
  max-width:
    690px;
  margin:
    1.5rem 0 0;
  font-size:
    clamp(1.15rem, 2vw, 1.5rem);
  line-height:
    1.55;
  color:
    rgba(255,255,255,.72);
}


.music-feed {
  position:
    relative;
  padding:
    0 0 clamp(6rem, 10vw, 9rem);
}


.music-instagram-grid {
  display:
    grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap:
    clamp(1rem, 2vw, 1.5rem);
  align-items:
    start;
}


.music-social-card {
  position:
    relative;
  min-width:
    0;
  padding:
    .8rem;
  overflow:
    hidden;
  border:
    1px solid rgba(255,255,255,.11);
  border-radius:
    28px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.045)
    );
  box-shadow:
    0 30px 90px rgba(0,0,0,.28);
  backdrop-filter:
    blur(18px);
  -webkit-backdrop-filter:
    blur(18px);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.music-social-card:hover {
  transform:
    translateY(-5px);
  border-color:
    rgba(255,255,255,.22);
  box-shadow:
    0 38px 100px rgba(0,0,0,.38);
}


.music-card-head {
  display:
    flex;
  align-items:
    center;
  gap:
    .55rem;
  min-height:
    38px;
  padding:
    0 .5rem;
  font-size:
    .67rem;
  font-weight:
    750;
  letter-spacing:
    .11em;
  color:
    rgba(255,255,255,.55);
}


.music-pulse {
  width:
    7px;
  height:
    7px;
  flex:
    0 0 auto;
  border-radius:
    50%;
  background:
    #e7a53d;
  box-shadow:
    0 0 16px rgba(231,165,61,.9);
}


.music-instagram-frame {
  position:
    relative;
  width:
    100%;
  min-height:
    560px;
  overflow:
    hidden;
  border-radius:
    20px;
  background:
    #fff;
}


.music-instagram-frame iframe {
  display:
    block;
  width:
    100%;
  min-height:
    560px;
  border:
    0;
  background:
    #fff;
}


.music-instagram-link {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;
  margin:
    .7rem .3rem .15rem;
  padding:
    .65rem .25rem;
  font-size:
    .82rem;
  font-weight:
    720;
  text-decoration:
    none;
  color:
    rgba(255,255,255,.72);
}


.music-instagram-link:hover {
  color:
    #fff;
  text-decoration:
    none;
}


.music-instagram-note {
  max-width:
    700px;
  margin:
    2.4rem auto 0;
  text-align:
    center;
  color:
    rgba(255,255,255,.44);
}


@media (max-width: 1050px) {

  .music-instagram-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 700px) {

  .music-hero h1 {
    font-size:
      clamp(3.8rem, 19vw, 6rem);
  }

  .music-instagram-grid {
    grid-template-columns:
      1fr;
  }

  .music-social-card {
    border-radius:
      22px;
  }

  .music-instagram-frame,
  .music-instagram-frame iframe {
    min-height:
      520px;
  }

}

/* ===== MUSIC LOUNGE 003 — END ===== */

/* ===== HAINAUT NUMERIQUE 001 — START ===== */

body[data-universe="hainaut"] {
  --hn-blue: #315cdd;
  --hn-cyan: #17a8b8;
  --hn-green: #68b985;
  --hn-dark: #111a2d;
  --hn-cream: #f5f2eb;
}


.hn-page {
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #f8f6f1 0%,
      #eef5f8 42%,
      #f8f6f1 100%
    );
  color: var(--ink);
}


.hn-hero {
  position: relative;
  padding:
    clamp(5rem, 9vw, 8rem)
    0
    clamp(4rem, 7vw, 6rem);
  overflow: hidden;
}


.hn-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(20px);
  opacity: .24;
  pointer-events: none;
}


.hn-orb-a {
  width: 34rem;
  height: 34rem;
  top: -10rem;
  right: -7rem;
  background:
    radial-gradient(circle, #17a8b8, transparent 67%);
}


.hn-orb-b {
  width: 32rem;
  height: 32rem;
  bottom: -13rem;
  left: -9rem;
  background:
    radial-gradient(circle, #7257d9, transparent 67%);
}


.hn-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, .85fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}


.hn-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .9rem 0 1.1rem;
  padding: .5rem .8rem;
  border:
    1px solid rgba(49,92,221,.14);
  border-radius: 999px;
  background:
    rgba(255,255,255,.68);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}


.hn-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e7a53d;
  box-shadow:
    0 0 0 5px rgba(231,165,61,.13);
}


.hn-hero h1 {
  margin: 0;
  max-width: 850px;
  font-size:
    clamp(4rem, 8.5vw, 8rem);
  line-height: .88;
  letter-spacing: -.068em;
}


.hn-hero h1 span {
  display: block;
  margin-top: .15em;
  color: var(--hn-blue);
}


.hn-lead {
  max-width: 720px;
  margin: 1.8rem 0 0;
  font-size:
    clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.65;
  color: var(--muted);
}


.hn-system-card {
  padding:
    clamp(1.4rem, 3vw, 2rem);
  border:
    1px solid rgba(23,32,51,.09);
  border-radius: 30px;
  background:
    rgba(255,255,255,.72);
  box-shadow:
    0 30px 90px rgba(23,32,51,.11);
  backdrop-filter: blur(14px);
}


.hn-system-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.2rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--muted);
}


.hn-system-flow {
  display: grid;
  gap: .75rem;
}


.hn-system-flow span,
.hn-system-flow strong {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: #eef2fb;
  font-size: .82rem;
  letter-spacing: .09em;
}


.hn-system-flow strong {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      var(--hn-blue),
      var(--hn-cyan)
    );
}


.hn-system-flow i {
  padding-left: 1rem;
  font-style: normal;
  color: var(--muted);
}


.hn-metrics {
  padding: 0 0 clamp(5rem, 8vw, 7rem);
}


.hn-metrics-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  border:
    1px solid rgba(23,32,51,.08);
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 24px 70px rgba(23,32,51,.07);
}


.hn-metrics article {
  padding:
    clamp(1.5rem, 4vw, 2.5rem);
}


.hn-metrics article + article {
  border-left:
    1px solid rgba(23,32,51,.08);
}


.hn-metrics strong {
  display: block;
  margin-bottom: .25rem;
  font-size:
    clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.05em;
}


.hn-metrics span {
  color: var(--muted);
}


.hn-method,
.hn-programme {
  padding:
    clamp(4.5rem, 8vw, 7rem)
    0;
}


.hn-method {
  color: #fff;
  background: var(--hn-dark);
}


.hn-section-head {
  max-width: 820px;
  margin-bottom:
    clamp(2rem, 5vw, 4rem);
}


.hn-section-head h2,
.hn-finale h2 {
  margin: .35rem 0 1rem;
  font-size:
    clamp(2.6rem, 6vw, 5rem);
  line-height: .96;
  letter-spacing: -.05em;
}


.hn-method .hn-section-head > p:last-child {
  max-width: 720px;
  color: rgba(255,255,255,.66);
  font-size: 1.08rem;
  line-height: 1.65;
}


.hn-method-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap: 1rem;
}


.hn-method-card {
  min-height: 240px;
  padding: 1.4rem;
  border:
    1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.035)
    );
}


.hn-method-card > span {
  display: block;
  margin-bottom: 3rem;
  font-size: .72rem;
  color: rgba(255,255,255,.45);
}


.hn-method-card h3 {
  margin: 0 0 .7rem;
  font-size: 1.2rem;
}


.hn-method-card p {
  margin: 0;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
}


.hn-programme-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap: 1rem;
}


.hn-month {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 1.15rem;
  align-items: start;
  padding: 1.25rem;
  border:
    1px solid rgba(23,32,51,.09);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
}


.hn-month-code {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      var(--hn-blue),
      var(--hn-cyan)
    );
  font-size: .75rem;
  font-weight: 800;
}


.hn-month h3 {
  margin: .15rem 0 .4rem;
  font-size: 1rem;
}


.hn-month p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}


.hn-finale {
  padding:
    1rem 0 clamp(6rem, 10vw, 9rem);
}


.hn-finale-card {
  position: relative;
  padding:
    clamp(2rem, 6vw, 5rem);
  border-radius: 32px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #172440,
      #253e7e 58%,
      #167d88
    );
  box-shadow:
    0 35px 100px rgba(23,32,51,.18);
}


.hn-finale-card > p:not(.eyebrow) {
  max-width: 760px;
  font-size:
    clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255,255,255,.72);
}


.hn-final-flow {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-top: 2.2rem;
}


.hn-final-flow span,
.hn-final-flow strong {
  padding: .65rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  font-size: .7rem;
  letter-spacing: .08em;
}


.hn-final-flow strong {
  color: #172033;
  background: #fff;
}


.hn-final-flow i {
  font-style: normal;
  color: rgba(255,255,255,.42);
}


@media (max-width: 960px) {

  .hn-hero-grid,
  .hn-programme-grid {
    grid-template-columns: 1fr;
  }

  .hn-method-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

}


@media (max-width: 680px) {

  .hn-hero h1 {
    font-size:
      clamp(3.4rem, 18vw, 5.4rem);
  }

  .hn-metrics-grid,
  .hn-method-grid {
    grid-template-columns: 1fr;
  }

  .hn-metrics article + article {
    border-left: 0;
    border-top:
      1px solid rgba(23,32,51,.08);
  }

  .hn-month {
    grid-template-columns:
      54px 1fr;
  }

  .hn-month-code {
    width: 48px;
    height: 48px;
  }

}

/* ===== HAINAUT NUMERIQUE 001 — END ===== */

/* ===== HAINAUT CONTACT NAV 003 — START ===== */
body[data-universe="hainaut"] .hn-contact {

  min-height:
    calc(100vh - 190px);

  background:
    #f7f2e9;

}


/* =========================================================
   HERO
   ========================================================= */

body[data-universe="hainaut"] .hn-contact-hero {

  position: relative;

  min-height:
    calc(100vh - 190px);

  display: flex;

  align-items: center;

  overflow: hidden;

  padding:
    clamp(70px,8vw,110px)
    0;

  background:

    radial-gradient(
      circle at 91% 18%,
      rgba(114,87,217,.12),
      transparent 24%
    ),

    radial-gradient(
      circle at 84% 82%,
      rgba(21,156,153,.10),
      transparent 26%
    ),

    radial-gradient(
      circle at 6% 88%,
      rgba(231,165,61,.09),
      transparent 22%
    ),

    #f7f2e9;

}


body[data-universe="hainaut"] .hn-contact-grid {

  display: grid;

  grid-template-columns:
    minmax(390px,.92fr)
    minmax(500px,1.08fr);

  gap:
    clamp(4rem,8vw,9rem);

  align-items: center;

}



/* =========================================================
   INTRO
   ========================================================= */

body[data-universe="hainaut"] .hn-contact-intro .eyebrow {

  color:
    #7257d9;

}


body[data-universe="hainaut"] .hn-contact-intro h1 {

  margin:
    .9rem 0
    1.6rem;

  color:
    #172033;

  font-size:
    clamp(4.8rem,7vw,7.8rem);

  line-height:
    .82;

  letter-spacing:
    -.072em;

}


body[data-universe="hainaut"] .hn-contact-intro h1 span {

  background:
    linear-gradient(
      100deg,
      #7257d9 0%,
      #d85d72 38%,
      #e2a039 70%,
      #159c99 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

}


body[data-universe="hainaut"] .hn-contact-intro > p {

  max-width:
    560px;

  color:
    #626b7c;

  font-size:
    1.05rem;

  line-height:
    1.7;

}



/* =========================================================
   DIRECT CONTACT
   ========================================================= */

body[data-universe="hainaut"] .hn-contact-direct {

  display: flex;

  flex-wrap: wrap;

  gap:
    2.2rem;

  margin-top:
    3rem;

  padding-top:
    1.8rem;

  border-top:
    1px solid rgba(23,32,51,.11);

}


body[data-universe="hainaut"] .hn-contact-direct a {

  display: flex;

  flex-direction: column;

  gap:
    .3rem;

  color:
    #172033;

  text-decoration:
    none;

}


body[data-universe="hainaut"] .hn-contact-direct small {

  color:
    #8a909b;

  font-size:
    .62rem;

  font-weight:
    850;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


body[data-universe="hainaut"] .hn-contact-direct strong {

  font-size:
    1rem;

}



/* =========================================================
   TOPIC LIST
   ========================================================= */

body[data-universe="hainaut"] .hn-contact-topics {

  border-top:
    1px solid rgba(23,32,51,.13);

}


body[data-universe="hainaut"] .hn-contact-topics-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    0 0
    1.1rem;

  color:
    #172033;

  font-size:
    .75rem;

  font-weight:
    850;

}


body[data-universe="hainaut"] .hn-contact-topics-head small {

  color:
    #8a909b;

  font-weight:
    700;

}


body[data-universe="hainaut"] .hn-contact-topics > a {

  display: grid;

  grid-template-columns:
    52px
    1fr
    38px;

  gap:
    1rem;

  align-items: center;

  min-height:
    94px;

  padding:
    1rem .2rem;

  border-bottom:
    1px solid rgba(23,32,51,.13);

  color:
    #172033;

  text-decoration:
    none;

  transition:
    padding .2s ease,
    background .2s ease;

}


body[data-universe="hainaut"] .hn-contact-topics > a:hover {

  padding-left:
    1rem;

  padding-right:
    1rem;

  background:
    rgba(255,255,255,.52);

}


body[data-universe="hainaut"] .hn-contact-index {

  color:
    #9ca1ab;

  font-size:
    .62rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

}


body[data-universe="hainaut"] .hn-contact-topic-name {

  display: flex;

  flex-direction: column;

  gap:
    .25rem;

}


body[data-universe="hainaut"] .hn-contact-topic-name strong {

  font-size:
    clamp(1.35rem,2vw,1.8rem);

  letter-spacing:
    -.035em;

}


body[data-universe="hainaut"] .hn-contact-topic-name small {

  color:
    #757d8b;

  font-size:
    .76rem;

}


body[data-universe="hainaut"] .hn-contact-arrow {

  color:
    #7257d9;

  font-size:
    1.25rem;

  text-align:
    right;

}



/* =========================================================
   INDIVIDUAL UNIVERSE ACCENTS
   ========================================================= */

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(1)
.hn-contact-arrow {

  color:
    #536fd5;

}


body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(2)
.hn-contact-arrow {

  color:
    #d85d72;

}


body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(3)
.hn-contact-arrow {

  color:
    #dc9631;

}


body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(4)
.hn-contact-arrow {

  color:
    #b85757;

}


body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(5)
.hn-contact-arrow {

  color:
    #159c99;

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  body[data-universe="hainaut"] .hn-contact-grid {

    grid-template-columns:
      1fr;

    gap:
      4rem;

  }


  body[data-universe="hainaut"] .hn-contact-hero {

    min-height:
      auto;

  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  body[data-universe="hainaut"] .hn-contact-hero {

    padding:
      65px 0
      80px;

  }


  body[data-universe="hainaut"] .hn-contact-intro h1 {

    font-size:
      clamp(4rem,18vw,5.7rem);

  }


  body[data-universe="hainaut"] .hn-contact-direct {

    flex-direction:
      column;

    gap:
      1.2rem;

  }


  body[data-universe="hainaut"] .hn-contact-topics > a {

    grid-template-columns:
      36px
      1fr
      25px;

    min-height:
      86px;

  }

}
/* Hainaut integration */

#hn-overview,
#hn-method,
#hn-programme,
#hn-autonomy {
  scroll-margin-top: 110px;
}

html {
  scroll-behavior: smooth;
}


/*
  The Contact design is reused here intentionally.
  No floating duplicate menu.
*/

body[data-universe="hainaut"]
.hn-contact-topics {

  position: relative;
  z-index: 2;

  width: 100%;

  align-self: center;
}


/*
  Keep the menu visually integrated with the Hainaut hero.
  No white card around the entire navigation.
*/

body[data-universe="hainaut"]
.hn-contact-topics {

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;
}


/*
  Slightly tighter because Hainaut has 4 entries
  instead of Contact's 5.
*/

body[data-universe="hainaut"]
.hn-contact-topics > a {

  min-height: 88px;
}


/*
  Arrow colour follows Hainaut identity.
*/

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(1)
.hn-contact-arrow {
  color: #315cdd;
}

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(2)
.hn-contact-arrow {
  color: #17a8b8;
}

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(3)
.hn-contact-arrow {
  color: #7257d9;
}

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(4)
.hn-contact-arrow {
  color: #159c99;
}


/*
  Explicit guarantee:
  old floating navigation must never render.
*/

.hn-floating-nav {
  display: none !important;
}


@media (max-width: 960px) {

  body[data-universe="hainaut"]
  .hn-contact-topics {
    margin-top: 1rem;
  }

}
/* ===== HAINAUT CONTACT NAV 003 — END ===== */

/* ===== HAINAUT STICKY FULL NAV 005 — START ===== */


/*
  The large Contact-style navigation becomes
  the single persistent project navigation.
*/

@media (min-width: 1181px) {

  body[data-universe="hainaut"] .hn-contact-topics {
    position: fixed;

    z-index: 55;

    top: 165px;
    right: clamp(28px, 4vw, 70px);

    width: clamp(310px, 27vw, 410px);

    max-height: calc(100vh - 195px);

    overflow: auto;

    padding: 1.15rem 1.25rem;

    border:
      1px solid rgba(23,32,51,.08);

    border-radius: 28px;

    background:
      rgba(248,246,241,.90);

    box-shadow:
      0 28px 80px rgba(23,32,51,.11);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }


  /*
    Reserve space so the fixed menu NEVER covers
    the project content.
  */

  body[data-universe="hainaut"] .hn-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(330px, 410px);
  }


  body[data-universe="hainaut"]
  .hn-metrics .wrap,

  body[data-universe="hainaut"]
  .hn-method .wrap,

  body[data-universe="hainaut"]
  .hn-programme .wrap,

  body[data-universe="hainaut"]
  .hn-finale .wrap {

    width: min(
      calc(100% - 430px),
      980px
    );

    margin-left:
      clamp(40px, 9vw, 140px);

    margin-right: auto;
  }


  body[data-universe="hainaut"]
  .hn-contact-topics > a {

    min-height: 92px;

    grid-template-columns:
      42px
      minmax(0, 1fr)
      32px;
  }


  body[data-universe="hainaut"]
  .hn-contact-topic-name strong {

    font-size:
      clamp(1.2rem, 1.75vw, 1.75rem);
  }


  body[data-universe="hainaut"]
  .hn-contact-topic-name small {

    margin-top: .25rem;
  }

}


/*
  Tablet:
  navigation remains visible but becomes a sticky
  horizontal project menu below the site header.
*/

@media (max-width: 1180px) and (min-width: 761px) {

  body[data-universe="hainaut"] .hn-contact-topics {

    position: sticky;

    z-index: 45;

    top: 92px;

    width: 100%;

    margin-top: 2rem;

    padding: .7rem;

    border:
      1px solid rgba(23,32,51,.08);

    border-radius: 20px;

    background:
      rgba(248,246,241,.95);

    box-shadow:
      0 18px 45px rgba(23,32,51,.09);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

}


/*
  Mobile:
  keep the complete list readable.
  No tiny numbered rail.
*/

@media (max-width: 760px) {

  body[data-universe="hainaut"] .hn-contact-topics {

    position: sticky;

    z-index: 45;

    top: 72px;

    margin-top: 1.2rem;

    padding: .55rem .7rem;

    border:
      1px solid rgba(23,32,51,.08);

    border-radius: 18px;

    background:
      rgba(248,246,241,.97);

    box-shadow:
      0 14px 38px rgba(23,32,51,.10);
  }


  body[data-universe="hainaut"]
  .hn-contact-topics-head {

    padding:
      .45rem .2rem
      .55rem;
  }


  body[data-universe="hainaut"]
  .hn-contact-topics > a {

    min-height: 62px;
  }


  body[data-universe="hainaut"]
  .hn-contact-topic-name strong {

    font-size: 1rem;
  }


  body[data-universe="hainaut"]
  .hn-contact-topic-name small {

    display: none;
  }

}


/* Absolute guarantee: the old mini rail never returns. */

.hn-persistent-nav {
  display: none !important;
}


/* ===== HAINAUT STICKY FULL NAV 005 — END ===== */

/* ===== HAINAUT KALE VERSE DNA 006 — START ===== */


/*
   DESKTOP
   Persistent navigation keeps the Contact DNA:
   transparent, thin lines, no floating white card.
*/

@media (min-width: 1181px) {

  body[data-universe="hainaut"]
  .hn-contact-topics {

    position: fixed;

    top: 150px;
    right: clamp(34px, 5vw, 78px);

    width: clamp(330px, 28vw, 430px);

    max-height: calc(100vh - 180px);

    overflow: visible;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    isolation: isolate;
  }


  /*
     KALE VERSE DNA
     Very soft visual identity, restricted to the
     reserved navigation column.
  */

  body[data-universe="hainaut"]
  .hn-contact-topics::before {

    content: "";

    position: absolute;

    z-index: -1;

    width: 520px;
    height: 520px;

    top: 50%;
    left: 50%;

    transform:
      translate(-46%, -50%);

    border-radius: 50%;

    border:
      1px solid rgba(83,111,213,.10);

    background:
      radial-gradient(
        circle at 34% 38%,
        rgba(21,156,153,.10),
        transparent 34%
      ),
      radial-gradient(
        circle at 72% 32%,
        rgba(114,87,217,.09),
        transparent 30%
      ),
      radial-gradient(
        circle at 70% 72%,
        rgba(233,111,98,.08),
        transparent 31%
      ),
      radial-gradient(
        circle at 34% 72%,
        rgba(231,165,61,.07),
        transparent 28%
      );

    pointer-events: none;
  }


  /*
     Header of the navigation
  */

  body[data-universe="hainaut"]
  .hn-contact-topics-head {

    padding:
      0
      0
      1rem;

    margin: 0;

    border-bottom:
      1px solid rgba(23,32,51,.14);

    background: transparent;
  }


  body[data-universe="hainaut"]
  .hn-contact-topics-head span {

    font-weight: 750;

    color: var(--ink);
  }


  body[data-universe="hainaut"]
  .hn-contact-topics-head small {

    color:
      rgba(98,107,124,.72);
  }


  /*
     Contact-style rows:
     no boxes, only fine separators.
  */

  body[data-universe="hainaut"]
  .hn-contact-topics > a {

    min-height: 96px;

    padding:
      1rem
      .15rem;

    border: 0;

    border-bottom:
      1px solid rgba(23,32,51,.13);

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    transform: none;
  }


  body[data-universe="hainaut"]
  .hn-contact-topics > a:hover {

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.48),
        rgba(255,255,255,0)
      );

    transform: none;

    box-shadow: none;
  }


  body[data-universe="hainaut"]
  .hn-contact-index {

    color:
      rgba(98,107,124,.62);
  }


  body[data-universe="hainaut"]
  .hn-contact-topic-name strong {

    color: var(--ink);

    font-size:
      clamp(1.28rem, 1.8vw, 1.8rem);

    font-weight: 720;

    letter-spacing: -.035em;
  }


  body[data-universe="hainaut"]
  .hn-contact-topic-name small {

    margin-top: .3rem;

    color:
      rgba(98,107,124,.82);

    font-size: .76rem;
  }


  body[data-universe="hainaut"]
  .hn-contact-arrow {

    font-size: 1.25rem;
    font-weight: 400;
  }

}


/*
   Keep the reserved content column from 005.
   Navigation remains beside content, never over it.
*/

@media (min-width: 1181px) {

  body[data-universe="hainaut"]
  .hn-metrics .wrap,

  body[data-universe="hainaut"]
  .hn-method .wrap,

  body[data-universe="hainaut"]
  .hn-programme .wrap,

  body[data-universe="hainaut"]
  .hn-finale .wrap {

    width:
      min(
        calc(100% - 470px),
        980px
      );

    margin-left:
      clamp(40px, 8vw, 130px);

    margin-right: auto;
  }

}


/*
   TABLET
   Same light DNA — no opaque card.
*/

@media (max-width: 1180px) and (min-width: 761px) {

  body[data-universe="hainaut"]
  .hn-contact-topics {

    background:
      rgba(248,246,241,.78);

    border:
      1px solid rgba(23,32,51,.08);

    box-shadow:
      0 12px 34px rgba(23,32,51,.06);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

}


/*
   MOBILE
   Preserve readability but keep it visually light.
*/

@media (max-width: 760px) {

  body[data-universe="hainaut"]
  .hn-contact-topics {

    background:
      rgba(248,246,241,.92);

    border:
      1px solid rgba(23,32,51,.08);

    box-shadow:
      0 10px 28px rgba(23,32,51,.07);
  }

}


/* ===== HAINAUT KALE VERSE DNA 006 — END ===== */

/* ===== HAINAUT COLOR HARMONY 007 — START ===== */


/*
   KALE VERSE navigation palette

   LIGHT
   ink       #172033
   muted     #6f798a
   line      subtle navy

   DARK
   ink       warm ivory
   muted     soft silver
   line      subtle white

   Accents:
   cobalt / lagoon / violet / jade
*/

body[data-universe="hainaut"]
.hn-contact-topics {

  --hn-nav-ink: #172033;

  --hn-nav-muted:
    rgba(98,107,124,.84);

  --hn-nav-index:
    rgba(98,107,124,.62);

  --hn-nav-line:
    rgba(23,32,51,.13);

  --hn-nav-active:
    rgba(49,92,221,.055);

  transition:
    color .28s ease;
}


/* DARK SECTIONS */

body[data-universe="hainaut"]
.hn-contact-topics.is-dark-context {

  --hn-nav-ink: #f7f5ef;

  --hn-nav-muted:
    rgba(231,235,244,.68);

  --hn-nav-index:
    rgba(231,235,244,.48);

  --hn-nav-line:
    rgba(255,255,255,.14);

  --hn-nav-active:
    rgba(43,192,200,.075);
}


/* HEADER */

body[data-universe="hainaut"]
.hn-contact-topics-head {

  border-bottom-color:
    var(--hn-nav-line);

  transition:
    border-color .28s ease;
}


body[data-universe="hainaut"]
.hn-contact-topics-head span {

  color:
    var(--hn-nav-ink);

  transition:
    color .28s ease;
}


body[data-universe="hainaut"]
.hn-contact-topics-head small {

  color:
    var(--hn-nav-muted);

  transition:
    color .28s ease;
}


/* ROWS */

body[data-universe="hainaut"]
.hn-contact-topics > a {

  border-bottom-color:
    var(--hn-nav-line);

  transition:
    background .22s ease,
    border-color .28s ease,
    opacity .22s ease;
}


body[data-universe="hainaut"]
.hn-contact-index {

  color:
    var(--hn-nav-index);

  transition:
    color .28s ease;
}


body[data-universe="hainaut"]
.hn-contact-topic-name strong {

  color:
    var(--hn-nav-ink);

  transition:
    color .28s ease;
}


body[data-universe="hainaut"]
.hn-contact-topic-name small {

  color:
    var(--hn-nav-muted);

  transition:
    color .28s ease;
}


/*
   Non-active rows remain readable,
   but active section gains a very subtle emphasis.
*/

body[data-universe="hainaut"]
.hn-contact-topics > a.is-active {

  background:
    linear-gradient(
      90deg,
      var(--hn-nav-active),
      transparent 88%
    );
}


body[data-universe="hainaut"]
.hn-contact-topics > a.is-active
.hn-contact-topic-name strong {

  font-weight: 780;
}


/* ============================================
   ACCENT HARMONY
   ============================================ */


/* 01 — cobalt */

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(1)
.hn-contact-arrow {

  color: #4674ed;
}


/* 02 — lagoon */

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(2)
.hn-contact-arrow {

  color: #16aeb5;
}


/* 03 — violet */

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(3)
.hn-contact-arrow {

  color: #7962df;
}


/* 04 — jade */

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(4)
.hn-contact-arrow {

  color: #159c99;
}


/*
   Slightly brighter accents over navy.
*/

body[data-universe="hainaut"]
.hn-contact-topics.is-dark-context
> a:nth-of-type(1)
.hn-contact-arrow {

  color: #6f95ff;
}


body[data-universe="hainaut"]
.hn-contact-topics.is-dark-context
> a:nth-of-type(2)
.hn-contact-arrow {

  color: #35cbd0;
}


body[data-universe="hainaut"]
.hn-contact-topics.is-dark-context
> a:nth-of-type(3)
.hn-contact-arrow {

  color: #a18cff;
}


body[data-universe="hainaut"]
.hn-contact-topics.is-dark-context
> a:nth-of-type(4)
.hn-contact-arrow {

  color: #39c5ae;
}


/* ============================================
   KALE VERSE CIRCLE DNA
   ============================================ */

body[data-universe="hainaut"]
.hn-contact-topics::before {

  transition:
    border-color .35s ease,
    background .35s ease,
    opacity .35s ease;
}


/*
   On dark navy:
   keep the circle present,
   but elegant and sufficiently distinct.
*/

body[data-universe="hainaut"]
.hn-contact-topics.is-dark-context::before {

  border-color:
    rgba(91,135,225,.16);

  background:

    radial-gradient(
      circle at 32% 35%,
      rgba(43,192,200,.13),
      transparent 34%
    ),

    radial-gradient(
      circle at 70% 34%,
      rgba(130,103,232,.12),
      transparent 31%
    ),

    radial-gradient(
      circle at 72% 71%,
      rgba(233,111,98,.075),
      transparent 30%
    ),

    radial-gradient(
      circle at 33% 72%,
      rgba(231,165,61,.07),
      transparent 28%
    );
}


/*
   Hover remains subtle.
*/

body[data-universe="hainaut"]
.hn-contact-topics > a:hover {

  background:
    linear-gradient(
      90deg,
      var(--hn-nav-active),
      transparent 90%
    );
}


/* ===== HAINAUT COLOR HARMONY 007 — END ===== */

/* ===== HAINAUT UNIFIED DARK 008 — START ===== */


/* ============================================
   GLOBAL HAINAUT SURFACE
   Exact base colour reused from METHOD.
   ============================================ */

body[data-universe="hainaut"] .hn-page,
body[data-universe="hainaut"] .hn-hero,
body[data-universe="hainaut"] .hn-metrics,
body[data-universe="hainaut"] .hn-method,
body[data-universe="hainaut"] .hn-programme,
body[data-universe="hainaut"] .hn-finale {

  background: var(--hn-dark);
  color: #f7f5ef;
}


/* Remove light transitions between sections */

body[data-universe="hainaut"] .hn-hero,
body[data-universe="hainaut"] .hn-metrics,
body[data-universe="hainaut"] .hn-method,
body[data-universe="hainaut"] .hn-programme,
body[data-universe="hainaut"] .hn-finale {

  border-color:
    rgba(255,255,255,.07);
}


/* ============================================
   HERO
   ============================================ */

body[data-universe="hainaut"] .hn-hero h1 {

  color: #f7f5ef;
}


body[data-universe="hainaut"] .hn-hero h1 span {

  color: #6f95ff;
}


body[data-universe="hainaut"] .hn-lead {

  color:
    rgba(231,235,244,.72);
}


body[data-universe="hainaut"] .hn-status {

  color: #f7f5ef;

  background:
    rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.12);
}


body[data-universe="hainaut"] .hn-status-dot {

  background: #e7a53d;
}


/* soft KALE VERSE atmospheric orbs */

body[data-universe="hainaut"] .hn-orb {

  opacity: .30;
}


/* ============================================
   METRICS
   ============================================ */

body[data-universe="hainaut"] .hn-metrics-grid {

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.09);

  box-shadow: none;
}


body[data-universe="hainaut"] .hn-metrics article {

  background: transparent;
}


body[data-universe="hainaut"] .hn-metrics article + article {

  border-left-color:
    rgba(255,255,255,.09);
}


body[data-universe="hainaut"] .hn-metrics strong {

  color: #f7f5ef;
}


body[data-universe="hainaut"] .hn-metrics span {

  color:
    rgba(231,235,244,.62);
}


/* ============================================
   SECTION HEADINGS
   ============================================ */

body[data-universe="hainaut"]
.hn-section-head h2,

body[data-universe="hainaut"]
.hn-finale h2 {

  color: #f7f5ef;
}


body[data-universe="hainaut"]
.hn-section-head > p:last-child,

body[data-universe="hainaut"]
.hn-programme .hn-section-head > p:last-child {

  color:
    rgba(231,235,244,.66);
}


/* ============================================
   METHOD CARDS
   Keep current METHOD visual language.
   ============================================ */

body[data-universe="hainaut"] .hn-method-card {

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow: none;
}


body[data-universe="hainaut"] .hn-method-card h3 {

  color: #f7f5ef;
}


body[data-universe="hainaut"] .hn-method-card p {

  color:
    rgba(231,235,244,.65);
}


/* ============================================
   12 MONTH PROGRAMME
   Convert former white cards to dark translucent.
   ============================================ */

body[data-universe="hainaut"] .hn-month {

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow: none;
}


body[data-universe="hainaut"] .hn-month h3 {

  color: #f7f5ef;
}


body[data-universe="hainaut"] .hn-month p {

  color:
    rgba(231,235,244,.65);
}


body[data-universe="hainaut"] .hn-month-code {

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #4674ed,
      #16aeb5
    );
}


/* ============================================
   AUTONOMY
   Remove large competing gradient.
   Keep hierarchy with a subtle panel.
   ============================================ */

body[data-universe="hainaut"] .hn-finale-card {

  color: #f7f5ef;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow: none;
}


body[data-universe="hainaut"]
.hn-finale-card > p:not(.eyebrow) {

  color:
    rgba(231,235,244,.70);
}


body[data-universe="hainaut"] .hn-final-flow span {

  color:
    rgba(247,245,239,.78);

  background:
    rgba(255,255,255,.075);
}


body[data-universe="hainaut"] .hn-final-flow strong {

  color: #172033;

  background: #f7f5ef;
}


/* ============================================
   PERSISTENT NAVIGATION
   Since ALL sections are now dark, use one
   coherent readable palette everywhere.
   ============================================ */

body[data-universe="hainaut"]
.hn-contact-topics {

  --hn-nav-ink: #f7f5ef;

  --hn-nav-muted:
    rgba(231,235,244,.68);

  --hn-nav-index:
    rgba(231,235,244,.48);

  --hn-nav-line:
    rgba(255,255,255,.14);

  --hn-nav-active:
    rgba(43,192,200,.075);
}


body[data-universe="hainaut"]
.hn-contact-topics-head span {

  color: var(--hn-nav-ink);
}


body[data-universe="hainaut"]
.hn-contact-topics-head small {

  color: var(--hn-nav-muted);
}


body[data-universe="hainaut"]
.hn-contact-topic-name strong {

  color: var(--hn-nav-ink);
}


body[data-universe="hainaut"]
.hn-contact-topic-name small {

  color: var(--hn-nav-muted);
}


body[data-universe="hainaut"]
.hn-contact-index {

  color: var(--hn-nav-index);
}


body[data-universe="hainaut"]
.hn-contact-topics-head,

body[data-universe="hainaut"]
.hn-contact-topics > a {

  border-color:
    var(--hn-nav-line);
}


/* KALE VERSE circle stays subtle */

body[data-universe="hainaut"]
.hn-contact-topics::before {

  border-color:
    rgba(91,135,225,.15);

  background:

    radial-gradient(
      circle at 32% 35%,
      rgba(43,192,200,.11),
      transparent 34%
    ),

    radial-gradient(
      circle at 70% 34%,
      rgba(130,103,232,.10),
      transparent 31%
    ),

    radial-gradient(
      circle at 72% 71%,
      rgba(233,111,98,.06),
      transparent 30%
    );
}


/* ============================================
   FOOTER TRANSITION
   ============================================ */

body[data-universe="hainaut"] .site-footer {

  border-top:
    1px solid rgba(255,255,255,.08);
}


/* ===== HAINAUT UNIFIED DARK 008 — END ===== */

/* ===== HAINAUT AIR WARMTH 009 — START ===== */


/* =========================================================
   GLOBAL — DARK BUT MORE OPEN
   ========================================================= */

body[data-universe="hainaut"] .hn-page {

  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(49,92,221,.11),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 25%,
      rgba(22,174,181,.09),
      transparent 27%
    ),
    radial-gradient(
      circle at 72% 78%,
      rgba(121,98,223,.07),
      transparent 30%
    ),
    var(--hn-dark);

  color: #f7f5ef;
}


/* Sections no longer feel like stacked boxes */

body[data-universe="hainaut"] .hn-hero,
body[data-universe="hainaut"] .hn-metrics,
body[data-universe="hainaut"] .hn-method,
body[data-universe="hainaut"] .hn-programme,
body[data-universe="hainaut"] .hn-finale {

  background: transparent;
  border: 0;
}


/* more breathing room */

body[data-universe="hainaut"] .hn-method,
body[data-universe="hainaut"] .hn-programme,
body[data-universe="hainaut"] .hn-finale {

  padding-top:
    clamp(5.5rem, 8vw, 9rem);

  padding-bottom:
    clamp(5.5rem, 8vw, 9rem);
}


/* =========================================================
   HERO — KEEP SERIOUS, ADD LIGHT
   ========================================================= */

body[data-universe="hainaut"] .hn-hero {

  position: relative;

  background:
    radial-gradient(
      circle at 74% 28%,
      rgba(22,174,181,.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(121,98,223,.08),
      transparent 32%
    );
}


body[data-universe="hainaut"] .hn-hero-copy {

  position: relative;
  z-index: 2;
}


body[data-universe="hainaut"] .hn-hero h1 {

  letter-spacing: -.055em;
  line-height: .92;
}


body[data-universe="hainaut"] .hn-lead {

  max-width: 720px;

  line-height: 1.72;

  color:
    rgba(238,241,248,.72);
}


/* status lighter, less pill-like */

body[data-universe="hainaut"] .hn-status {

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow:
    0 10px 32px rgba(0,0,0,.08);

  backdrop-filter:
    blur(10px);
}


/* =========================================================
   METRICS — THREE LIGHT ISLANDS
   ========================================================= */

body[data-universe="hainaut"] .hn-metrics-grid {

  gap: 1rem;

  background: transparent;

  border: 0;

  box-shadow: none;
}


body[data-universe="hainaut"] .hn-metrics article {

  position: relative;

  padding:
    clamp(1.8rem, 3vw, 2.8rem);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 22px 55px rgba(0,0,0,.10);
}


body[data-universe="hainaut"] .hn-metrics article + article {

  border-left:
    1px solid rgba(255,255,255,.09);
}


/* coloured micro accents */

body[data-universe="hainaut"]
.hn-metrics article::before {

  content: "";

  position: absolute;

  top: 18px;
  right: 20px;

  width: 8px;
  height: 8px;

  border-radius: 999px;

  opacity: .9;
}


body[data-universe="hainaut"]
.hn-metrics article:nth-child(1)::before {

  background: #6f95ff;
}


body[data-universe="hainaut"]
.hn-metrics article:nth-child(2)::before {

  background: #35cbd0;
}


body[data-universe="hainaut"]
.hn-metrics article:nth-child(3)::before {

  background: #a18cff;
}


/* =========================================================
   SECTION HEADS — MORE AIR
   ========================================================= */

body[data-universe="hainaut"] .hn-section-head {

  margin-bottom:
    clamp(2.8rem, 5vw, 4.8rem);
}


body[data-universe="hainaut"] .hn-section-head h2 {

  max-width: 900px;

  line-height: .98;

  letter-spacing: -.045em;
}


body[data-universe="hainaut"]
.hn-section-head > p:last-child {

  max-width: 760px;

  line-height: 1.7;

  color:
    rgba(238,241,248,.68);
}


/* =========================================================
   METHOD — LESS RIGID
   ========================================================= */

body[data-universe="hainaut"] .hn-method-grid {

  gap:
    clamp(1rem, 2vw, 1.5rem);
}


body[data-universe="hainaut"] .hn-method-card {

  position: relative;

  min-height: 210px;

  padding:
    clamp(1.8rem, 2.8vw, 2.5rem);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius: 26px;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.072),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 18px 48px rgba(0,0,0,.08);

  overflow: hidden;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease;
}


body[data-universe="hainaut"]
.hn-method-card::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  opacity: .70;
}


body[data-universe="hainaut"]
.hn-method-card:nth-child(1)::after {

  background:
    linear-gradient(90deg,#4674ed,transparent);
}


body[data-universe="hainaut"]
.hn-method-card:nth-child(2)::after {

  background:
    linear-gradient(90deg,#35cbd0,transparent);
}


body[data-universe="hainaut"]
.hn-method-card:nth-child(3)::after {

  background:
    linear-gradient(90deg,#a18cff,transparent);
}


body[data-universe="hainaut"]
.hn-method-card:nth-child(4)::after {

  background:
    linear-gradient(90deg,#e7a53d,transparent);
}


body[data-universe="hainaut"]
.hn-method-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(255,255,255,.16);

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.095),
      rgba(255,255,255,.035)
    );
}


/* =========================================================
   PROGRAMME — MORE HUMAN, LESS GRID-LIKE
   ========================================================= */

body[data-universe="hainaut"] .hn-programme-grid {

  gap:
    clamp(1rem, 2vw, 1.4rem);
}


body[data-universe="hainaut"] .hn-month {

  padding:
    clamp(1.3rem, 2vw, 1.8rem);

  border:
    1px solid rgba(255,255,255,.085);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 16px 40px rgba(0,0,0,.07);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}


body[data-universe="hainaut"] .hn-month:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(53,203,208,.23);

  background:
    linear-gradient(
      145deg,
      rgba(53,203,208,.075),
      rgba(255,255,255,.025)
    );
}


body[data-universe="hainaut"] .hn-month-code {

  box-shadow:
    0 12px 28px rgba(49,92,221,.16);
}


/* =========================================================
   AUTONOMY — OPEN FINALE
   ========================================================= */

body[data-universe="hainaut"] .hn-finale-card {

  position: relative;

  padding:
    clamp(3rem, 6vw, 5rem);

  border-radius: 34px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      120deg,
      rgba(49,92,221,.13),
      rgba(22,174,181,.10) 60%,
      rgba(121,98,223,.09)
    );

  box-shadow:
    0 30px 80px rgba(0,0,0,.12);

  overflow: hidden;
}


body[data-universe="hainaut"]
.hn-finale-card::after {

  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -100px;
  top: -110px;

  border-radius: 50%;

  border:
    1px solid rgba(111,149,255,.13);

  background:
    radial-gradient(
      circle,
      rgba(53,203,208,.08),
      transparent 67%
    );

  pointer-events: none;
}


/* =========================================================
   NAVIGATION — LIGHTER + LESS ENCLOSED
   ========================================================= */

body[data-universe="hainaut"]
.hn-contact-topics::before {

  opacity: .62;

  border-color:
    rgba(111,149,255,.10);

  background:

    radial-gradient(
      circle at 33% 32%,
      rgba(53,203,208,.075),
      transparent 34%
    ),

    radial-gradient(
      circle at 70% 38%,
      rgba(161,140,255,.065),
      transparent 32%
    );
}


body[data-universe="hainaut"]
.hn-contact-topics > a {

  min-height: 96px;

  background: transparent;

  border-bottom:
    1px solid rgba(255,255,255,.11);
}


body[data-universe="hainaut"]
.hn-contact-topics > a.is-active {

  background:
    linear-gradient(
      90deg,
      rgba(53,203,208,.075),
      rgba(49,92,221,.025) 55%,
      transparent 92%
    );
}


body[data-universe="hainaut"]
.hn-contact-topics > a.is-active
.hn-contact-index {

  color: #35cbd0;
}


body[data-universe="hainaut"]
.hn-contact-topics > a:hover {

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.045),
      transparent 90%
    );
}


/* =========================================================
   TEXT COMFORT
   ========================================================= */

body[data-universe="hainaut"]
.hn-method-card p,

body[data-universe="hainaut"]
.hn-month p,

body[data-universe="hainaut"]
.hn-finale-card p {

  line-height: 1.62;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 860px) {

  body[data-universe="hainaut"] .hn-method,
  body[data-universe="hainaut"] .hn-programme,
  body[data-universe="hainaut"] .hn-finale {

    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  body[data-universe="hainaut"] .hn-method-card,
  body[data-universe="hainaut"] .hn-month {

    border-radius: 20px;
  }

}


/* ===== HAINAUT AIR WARMTH 009 — END ===== */

/* HAINAUT V010 — accessibility / peer-learning refinement */
body[data-universe="hainaut"] .hn-peer-note {
  max-width: 760px;
  margin: 2rem 0 0;
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: .82;
}

@media (min-width: 900px) {
  body[data-universe="hainaut"] .hn-method-grid {
    gap: 12px;
  }

  body[data-universe="hainaut"] .hn-method-card {
    min-height: 0;
    padding: 24px;
  }
}

/* ===== HAINAUT V010 — VISUAL CLARITY ===== */

/* Navigation projet : plus proche du bord droit,
   pour libérer la zone de lecture */
@media (min-width: 1100px) {
  body[data-universe="hainaut"] .hn-contact-topics {
    left: auto !important;
    right: 24px !important;
    width: min(430px, 29vw) !important;
    transform: none !important;
  }
}

/* Parcours 12 mois :
   repères de progression sans surcharger les cartes */
body[data-universe="hainaut"] .hn-month {
  position: relative;
  overflow: hidden;
}

body[data-universe="hainaut"] .hn-month::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
}

/* Phase 1 — prendre confiance */
body[data-universe="hainaut"] .hn-month:nth-child(1)::before,
body[data-universe="hainaut"] .hn-month:nth-child(2)::before,
body[data-universe="hainaut"] .hn-month:nth-child(3)::before {
  background: #36c8d5;
}

/* Phase 2 — utiliser et sécuriser */
body[data-universe="hainaut"] .hn-month:nth-child(4)::before,
body[data-universe="hainaut"] .hn-month:nth-child(5)::before,
body[data-universe="hainaut"] .hn-month:nth-child(6)::before {
  background: #438cff;
}

/* Phase 3 — gérer et travailler */
body[data-universe="hainaut"] .hn-month:nth-child(7)::before,
body[data-universe="hainaut"] .hn-month:nth-child(8)::before,
body[data-universe="hainaut"] .hn-month:nth-child(9)::before {
  background: #8b72f6;
}

/* Phase 4 — comprendre et devenir autonome */
body[data-universe="hainaut"] .hn-month:nth-child(10)::before,
body[data-universe="hainaut"] .hn-month:nth-child(11)::before,
body[data-universe="hainaut"] .hn-month:nth-child(12)::before {
  background: #d5a84c;
}

body[data-universe="hainaut"] .hn-month:nth-child(-n+3) .hn-month-code {
  color: #36c8d5;
}

body[data-universe="hainaut"] .hn-month:nth-child(n+4):nth-child(-n+6) .hn-month-code {
  color: #438cff;
}

body[data-universe="hainaut"] .hn-month:nth-child(n+7):nth-child(-n+9) .hn-month-code {
  color: #8b72f6;
}

body[data-universe="hainaut"] .hn-month:nth-child(n+10):nth-child(-n+12) .hn-month-code {
  color: #d5a84c;
}

/* ===== HAINAUT V010 — VISUAL CLARITY END ===== */











/* ===== HAINAUT V010 — DESKTOP GEOMETRY CLOSURE ===== */

@media (min-width: 1181px) {

  /* Une seule géométrie pour la colonne de contenu */
  body[data-universe="hainaut"] .hn-metrics .wrap,
  body[data-universe="hainaut"] .hn-method .wrap,
  body[data-universe="hainaut"] .hn-programme .wrap,
  body[data-universe="hainaut"] .hn-finale .wrap {
    width: min(calc(100% - 470px), 980px) !important;
    max-width: 980px !important;
    margin-left: clamp(40px, 8vw, 130px) !important;
    margin-right: auto !important;
  }

  /* Navigation : colonne droite indépendante */
  body[data-universe="hainaut"] .hn-contact-topics {
    position: fixed !important;
    top: 150px !important;
    right: clamp(34px, 5vw, 78px) !important;
    left: auto !important;

    width: clamp(330px, 28vw, 430px) !important;
    max-width: 430px !important;

    padding: 0 !important;
    transform: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
    z-index: 30 !important;
  }

  body[data-universe="hainaut"] .hn-contact-topics-head {
    display: flex !important;
  }

  body[data-universe="hainaut"] .hn-contact-topics > a {
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) 32px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
  }

  body[data-universe="hainaut"] .hn-contact-topic-name {
    display: flex !important;
  }

  body[data-universe="hainaut"] .hn-contact-arrow {
    display: block !important;
  }

  /* Cercle décoratif contenu dans la colonne navigation */
  body[data-universe="hainaut"] .hn-contact-topics::before {
    width: 430px !important;
    height: 430px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: .50 !important;
  }
}

/* ===== HAINAUT V010 — DESKTOP GEOMETRY CLOSURE END ===== */

/* ===== HAINAUT V010 — NAV VERTICAL POSITION ===== */
@media (min-width: 1181px) {
  body[data-universe="hainaut"] .hn-contact-topics {
    top: 270px !important;
  }
}
/* ===== HAINAUT V010 — NAV VERTICAL POSITION END ===== */


/* ===== HAINAUT V010 — NAV REFINEMENT ===== */

@media (min-width: 1181px) {

  /* Supprime les deux titres supérieurs */
  body[data-universe="hainaut"] .hn-contact-topics-head {
    display: none !important;
  }

  /* Rapproche 01–04 du texte */
  body[data-universe="hainaut"] .hn-contact-topics > a {
    grid-template-columns:
      28px
      minmax(0,1fr)
      24px !important;

    column-gap: 10px !important;
  }

  body[data-universe="hainaut"] .hn-contact-index {
    justify-self: start !important;
    margin: 0 !important;
  }

}

/* ===== HAINAUT V010 — NAV REFINEMENT END ===== */

/* ===== HAINAUT V010 — NAV COMPACT RIGHT ===== */

@media (min-width: 1181px) {

  /* Chaque ligne devient compacte et se range à droite */
  body[data-universe="hainaut"] .hn-contact-topics > a {
    width: 350px !important;
    margin-left: auto !important;
    margin-right: 0 !important;

    grid-template-columns:
      24px
      minmax(0, 1fr)
      20px !important;

    column-gap: 8px !important;
  }

  /* Numéro immédiatement devant le titre */
  body[data-universe="hainaut"] .hn-contact-index {
    justify-self: start !important;
    margin: 0 !important;
  }

  /* Flèche immédiatement après la zone texte */
  body[data-universe="hainaut"] .hn-contact-arrow {
    justify-self: end !important;
    margin: 0 !important;
  }

}

/* ===== HAINAUT V010 — NAV COMPACT RIGHT END ===== */

/* ===== HAINAUT V010 — PROGRESSION COLORS ===== */

/* ---------------------------------------------------------
   PARCOURS — PHASE 1
   M1–M3 · confiance · turquoise
   --------------------------------------------------------- */

body[data-universe="hainaut"] .hn-month:nth-child(1),
body[data-universe="hainaut"] .hn-month:nth-child(2),
body[data-universe="hainaut"] .hn-month:nth-child(3) {
  border-color: rgba(54,200,213,.28) !important;
  background:
    radial-gradient(circle at 12% 12%,
      rgba(54,200,213,.075),
      transparent 42%),
    rgba(255,255,255,.025) !important;
}

body[data-universe="hainaut"] .hn-month:nth-child(1) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(2) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(3) .hn-month-code {
  color: #dffcff !important;
  border-color: rgba(54,200,213,.48) !important;
  background:
    linear-gradient(135deg,
      rgba(54,200,213,.92),
      rgba(54,200,213,.58)) !important;
}


/* ---------------------------------------------------------
   PARCOURS — PHASE 2
   M4–M6 · utiliser / sécuriser · bleu
   --------------------------------------------------------- */

body[data-universe="hainaut"] .hn-month:nth-child(4),
body[data-universe="hainaut"] .hn-month:nth-child(5),
body[data-universe="hainaut"] .hn-month:nth-child(6) {
  border-color: rgba(67,140,255,.28) !important;
  background:
    radial-gradient(circle at 12% 12%,
      rgba(67,140,255,.075),
      transparent 42%),
    rgba(255,255,255,.025) !important;
}

body[data-universe="hainaut"] .hn-month:nth-child(4) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(5) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(6) .hn-month-code {
  color: #eef5ff !important;
  border-color: rgba(67,140,255,.52) !important;
  background:
    linear-gradient(135deg,
      rgba(67,140,255,.96),
      rgba(67,140,255,.60)) !important;
}


/* ---------------------------------------------------------
   PARCOURS — PHASE 3
   M7–M9 · maîtriser / travailler · violet
   --------------------------------------------------------- */

body[data-universe="hainaut"] .hn-month:nth-child(7),
body[data-universe="hainaut"] .hn-month:nth-child(8),
body[data-universe="hainaut"] .hn-month:nth-child(9) {
  border-color: rgba(139,114,246,.30) !important;
  background:
    radial-gradient(circle at 12% 12%,
      rgba(139,114,246,.085),
      transparent 42%),
    rgba(255,255,255,.025) !important;
}

body[data-universe="hainaut"] .hn-month:nth-child(7) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(8) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(9) .hn-month-code {
  color: #f5f1ff !important;
  border-color: rgba(139,114,246,.52) !important;
  background:
    linear-gradient(135deg,
      rgba(139,114,246,.96),
      rgba(139,114,246,.60)) !important;
}


/* ---------------------------------------------------------
   PARCOURS — PHASE 4
   M10–M12 · comprendre / autonomie · or
   --------------------------------------------------------- */

body[data-universe="hainaut"] .hn-month:nth-child(10),
body[data-universe="hainaut"] .hn-month:nth-child(11),
body[data-universe="hainaut"] .hn-month:nth-child(12) {
  border-color: rgba(213,168,76,.30) !important;
  background:
    radial-gradient(circle at 12% 12%,
      rgba(213,168,76,.085),
      transparent 42%),
    rgba(255,255,255,.025) !important;
}

body[data-universe="hainaut"] .hn-month:nth-child(10) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(11) .hn-month-code,
body[data-universe="hainaut"] .hn-month:nth-child(12) .hn-month-code {
  color: #fff8e8 !important;
  border-color: rgba(213,168,76,.54) !important;
  background:
    linear-gradient(135deg,
      rgba(213,168,76,.96),
      rgba(213,168,76,.60)) !important;
}


/* ---------------------------------------------------------
   NAVIGATION — même langage chromatique
   --------------------------------------------------------- */

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(1) .hn-contact-index,
body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(1) .hn-contact-arrow {
  color: #36c8d5 !important;
}

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(2) .hn-contact-index,
body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(2) .hn-contact-arrow {
  color: #438cff !important;
}

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(3) .hn-contact-index,
body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(3) .hn-contact-arrow {
  color: #8b72f6 !important;
}

body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(4) .hn-contact-index,
body[data-universe="hainaut"]
.hn-contact-topics > a:nth-of-type(4) .hn-contact-arrow {
  color: #d5a84c !important;
}

/* ===== HAINAUT V010 — PROGRESSION COLORS END ===== */

/* ===== HAINAUT V010 — NAV SECTION DIFFERENTIATION ===== */

@media (min-width: 1181px) {

  body[data-universe="hainaut"] .hn-contact-topics > a {
    position: relative !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    transition:
      background .22s ease,
      border-color .22s ease !important;
  }

  /* 01 — Vue d'ensemble · turquoise */
  body[data-universe="hainaut"] .hn-contact-topics > a:nth-of-type(1) {
    border-bottom-color: rgba(54,200,213,.34) !important;
    background:
      linear-gradient(
        90deg,
        rgba(54,200,213,.08),
        transparent 72%
      ) !important;
  }

  /* 02 — Méthode · bleu */
  body[data-universe="hainaut"] .hn-contact-topics > a:nth-of-type(2) {
    border-bottom-color: rgba(67,140,255,.34) !important;
    background:
      linear-gradient(
        90deg,
        rgba(67,140,255,.08),
        transparent 72%
      ) !important;
  }

  /* 03 — Parcours · violet */
  body[data-universe="hainaut"] .hn-contact-topics > a:nth-of-type(3) {
    border-bottom-color: rgba(139,114,246,.36) !important;
    background:
      linear-gradient(
        90deg,
        rgba(139,114,246,.09),
        transparent 72%
      ) !important;
  }

  /* 04 — Autonomie · or */
  body[data-universe="hainaut"] .hn-contact-topics > a:nth-of-type(4) {
    border-bottom-color: rgba(213,168,76,.36) !important;
    background:
      linear-gradient(
        90deg,
        rgba(213,168,76,.09),
        transparent 72%
      ) !important;
  }

  /* La section actuellement affichée devient plus évidente */
  body[data-universe="hainaut"] .hn-contact-topics > a.is-active {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.13),
        rgba(255,255,255,.035) 68%,
        transparent
      ) !important;

    border-bottom-color: currentColor !important;
  }

}

/* ===== HAINAUT V010 — NAV SECTION DIFFERENTIATION END ===== */

/* ===== HAINAUT V010 — FINALE LEGIBILITY ===== */

/* Texte explicatif : priorité de lecture */
body[data-universe="hainaut"] .hn-finale-card > p {
  max-width: 820px !important;
  font-size: clamp(1.08rem, 1.25vw, 1.25rem) !important;
  line-height: 1.7 !important;
  color: rgba(247,244,236,.82) !important;
}

/* La chaîne devient une vraie conclusion pédagogique */
body[data-universe="hainaut"] .hn-autonomy-flow {
  margin-top: 28px !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Étapes */
body[data-universe="hainaut"] .hn-autonomy-flow span {
  min-height: 42px !important;
  padding: 0 16px !important;

  display: inline-flex !important;
  align-items: center !important;

  font-size: .78rem !important;
  font-weight: 750 !important;
  letter-spacing: .075em !important;

  color: rgba(247,244,236,.90) !important;

  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
}

/* Flèches : plus visibles */
body[data-universe="hainaut"] .hn-autonomy-flow b {
  font-size: 1.15rem !important;
  color: rgba(247,244,236,.58) !important;
}

/* Dernière étape = autonomie / transmission */
body[data-universe="hainaut"] .hn-autonomy-flow span:last-child {
  color: #fff8e8 !important;
  background:
    linear-gradient(
      135deg,
      rgba(213,168,76,.28),
      rgba(213,168,76,.12)
    ) !important;

  border-color: rgba(213,168,76,.62) !important;
  box-shadow: 0 0 28px rgba(213,168,76,.10) !important;
}

/* ===== HAINAUT V010 — FINALE LEGIBILITY END ===== */

/* ===== KALE VERSE — GLOBAL COMPACT DESKTOP NAV ===== */
@media (min-width: 901px) {
  .site-header .nav {
    gap: 18px;
  }

  .site-header .nav-links {
    gap: 18px;
  }

  .site-header .nav-links a {
    font-size: .88rem;
    white-space: nowrap;
  }

  .site-header .brand-logo {
    max-width: 135px;
  }
}
/* ===== KALE VERSE — GLOBAL COMPACT DESKTOP NAV END ===== */