/* Her two fonts live in the site itself (2026-09-26) instead of coming from Google: the same files and settings Google
   served (latin letters, every weight in one file per font), so the page looks the same and starts drawing sooner.
   Cinzel and Space Grotesk are free fonts (SIL Open Font License). The files are preloaded in each page's <head>. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cinzel-v26-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/cinzel-v26-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-v22-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-v22-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-v22-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  /* Mystic-cosmic palette: sunlight moving through a starry night sky */
  --bg: #130F17;        /* base — near-black plum/eggplant, never pure black */
  --panel-1: #1C1521;   /* slightly lighter panel */
  --panel-2: #241A29;   /* lighter still, for layered surfaces */
  --gold: #E7B559;
  --terracotta: #C96A3E;
  --burnt: #8C3B22;     /* darkest gradient shadow stop */
  --pink: #E39AA0;
  --purple: #8C6BB5;
  --ivory: #F6EFE2;        /* warm white — headings */
  --ivory-muted: #C6BAAE;  /* muted warm white — secondary text */

  /* Legacy aliases — the rest of this file was written against these names;
     pointing them at the new tokens re-themes everything without a full rewrite. */
  --sand: var(--ivory);
  --black: var(--bg);
  --gold-deep: var(--terracotta);
  --font-display: 'Cinzel', 'Space Grotesk', serif;
}

html {
  color-scheme: dark;
  background-color: var(--black);
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--sand);
  background-color: transparent;
}

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

h1, h2 { text-wrap: balance; }

/* One continuous video backdrop behind every section, so the scroll never feels like it's jumping between separate images */
.bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.bg-video-tint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
  .bg-video-wrap {
    background-image: url('assets/img/orb-mystique.jpg');
    background-size: cover;
    background-position: center 35%;
  }
}

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url('assets/img/noise.png');
  background-size: 220px 220px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: grain-drift 45s steps(6) infinite;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1.5%); }
  40%  { transform: translate(1.5%, -2%); }
  60%  { transform: translate(-1%, -1.5%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .grain-overlay { animation: none; }
}

/* Sand-dust motes — soft, blurred flecks drifting slowly through the base color, so it never reads flat */
.dust-overlay {
  position: fixed;
  inset: 0;
  z-index: 9994;
  pointer-events: none;
  overflow: hidden;
}
.dust-overlay span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,239,226,.55) 0%, rgba(246,239,226,0) 72%);
  filter: blur(1px);
  animation: dust-drift linear infinite;
}
.dust-overlay span:nth-child(1)  { top: 8%;  left: 12%; width: 5px;  height: 5px;  animation-duration: 38s; animation-delay: -2s; }
.dust-overlay span:nth-child(2)  { top: 22%; left: 78%; width: 7px;  height: 7px;  animation-duration: 46s; animation-delay: -14s; opacity: .7; }
.dust-overlay span:nth-child(3)  { top: 64%; left: 30%; width: 4px;  height: 4px;  animation-duration: 33s; animation-delay: -8s; }
.dust-overlay span:nth-child(4)  { top: 80%; left: 88%; width: 6px;  height: 6px;  animation-duration: 42s; animation-delay: -22s; opacity: .6; }
.dust-overlay span:nth-child(5)  { top: 40%; left: 55%; width: 3px;  height: 3px;  animation-duration: 30s; animation-delay: -5s; }
.dust-overlay span:nth-child(6)  { top: 92%; left: 18%; width: 5px;  height: 5px;  animation-duration: 40s; animation-delay: -18s; opacity: .5; }
.dust-overlay span:nth-child(7)  { top: 5%;  left: 45%; width: 4px;  height: 4px;  animation-duration: 36s; animation-delay: -11s; }
.dust-overlay span:nth-child(8)  { top: 50%; left: 5%;  width: 6px;  height: 6px;  animation-duration: 44s; animation-delay: -27s; opacity: .55; }
@keyframes dust-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: .5; }
  25%  { transform: translate(3vw, -2vh) scale(1.15); opacity: .8; }
  50%  { transform: translate(-2vw, 3vh) scale(.9); opacity: .4; }
  75%  { transform: translate(-3vw, -1vh) scale(1.1); opacity: .7; }
  100% { transform: translate(0, 0) scale(1); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .dust-overlay span { animation: none; }
}

/* Subtle starfield — small ivory points scattered across the whole page, low opacity */
.stars-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 12%, rgba(246,239,226,.9), transparent 60%),
    radial-gradient(1px 1px at 22% 68%, rgba(246,239,226,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 39% 24%, rgba(246,239,226,.6), transparent 60%),
    radial-gradient(1px 1px at 54% 82%, rgba(246,239,226,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 68% 8%, rgba(246,239,226,.75), transparent 60%),
    radial-gradient(1px 1px at 77% 46%, rgba(246,239,226,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 91% 71%, rgba(246,239,226,.7), transparent 60%),
    radial-gradient(1px 1px at 12% 92%, rgba(246,239,226,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 85% 28%, rgba(246,239,226,.55), transparent 60%),
    radial-gradient(1px 1px at 47% 55%, rgba(246,239,226,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 30% 40%, rgba(246,239,226,.65), transparent 60%),
    radial-gradient(1px 1px at 62% 63%, rgba(246,239,226,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 95% 90%, rgba(246,239,226,.55), transparent 60%),
    radial-gradient(1px 1px at 4% 55%, rgba(246,239,226,.4), transparent 60%);
  background-repeat: repeat;
  background-size: 560px 560px;
  opacity: 0.4;
  animation: stars-twinkle 9s ease-in-out infinite;
}
@keyframes stars-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .stars-overlay { animation: none; opacity: 0.35; }
}

::selection { background: var(--gold); color: var(--black); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  background: var(--gold);
  color: var(--black);
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Custom cursor — desktop with a real mouse only; touch devices keep the system default */
#minicircle { display: none; }

@media (pointer: fine) {
  html, body { cursor: none; }
  a { cursor: none; }

  #minicircle {
    display: block;
    transition: transform 0.12s ease-out;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: fixed;
    top: 0; left: 0;
    z-index: 99999;
    background-color: var(--gold);
    pointer-events: none;
    mix-blend-mode: difference;
  }
}

@media (prefers-reduced-motion: reduce) {
  #minicircle { display: none !important; }
  html, body { cursor: auto !important; }
  a { cursor: pointer !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* WhatsApp floating button */
.wa-fab {
  position: fixed !important;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  animation: pulse 2.4s ease-in-out infinite;
  transform: translateZ(0);
}
.wa-fab svg { width: 26px; height: 26px; fill: #2a1608; }
@keyframes pulse {
  0%,100% { box-shadow: 0 8px 20px rgba(231,181,89,.35); }
  50% { box-shadow: 0 8px 26px rgba(231,181,89,.7); }
}

.bounding {
  width: fit-content;
  overflow: hidden;
}


#main {
  width: 100%;
}

/* ---------- HERO ---------- */
#hero {
  position: relative;
  color: var(--sand);
  width: 100%;
  height: 100vh;
  min-height: 640px;
  background-color: var(--black);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  display: block;
  filter: saturate(.9) brightness(.8);
  transform: scaleX(-1);
  pointer-events: none;
}
/* the photo is a <picture> in the page (a tall cut for upright phones); it fills the hero like a cover background */
.hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
@media (max-width: 900px) {
  .hero-bg img { object-position: 42% 20%; }
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 32%, rgba(19,15,23,.5) 0%, rgba(19,15,23,0) 100%),
    linear-gradient(180deg, rgba(19,15,23,.5) 0%, rgba(19,15,23,.15) 30%, rgba(140,59,34,.5) 65%, rgba(201,106,62,.78) 100%);
}

/* Generative sun — gold → terracotta → burnt-orange → transparent, soft-blurred, sitting behind the content */
.sun-flare {
  position: absolute;
  top: -14vw;
  right: -10vw;
  width: min(55vw, 640px);
  height: min(55vw, 640px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, var(--terracotta) 38%, var(--burnt) 62%, transparent 78%);
  filter: blur(50px);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .sun-flare { top: -20vw; right: -30vw; opacity: 0.32; }
}

/* Sacred-geometry ring — concentric circles + sundial ticks, turning almost imperceptibly slowly */
.hero-mark {
  position: absolute;
  top: 62%;
  right: -14vw;
  width: min(70vw, 820px);
  height: min(70vw, 820px);
  transform: translateY(-50%);
  background-image: url('assets/img/spiral.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero-mark { right: -30vw; opacity: 0.5; }
}

#nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 30px 40px;
  color: var(--sand);
}

#nav a.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: var(--sand);
}
#nav a.logo img {
  height: 52px;
  width: auto;
  display: block;
}

#navright {
  display: flex;
  align-items: center;
  gap: 36px;
}

#navright a {
  text-decoration: none;
  color: var(--sand);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#navright a.navcta {
  border: 1px solid var(--sand);
  padding: 10px 18px;
  border-radius: 2px;
}

#heading {
  position: relative;
  z-index: 3;
  margin-top: 40vh;
  padding-left: 40px;
}

#heading .blockText {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 6px;
}

#heading .blockText p {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .18em;
  line-height: 1.9;
  max-width: 44ch;
  color: var(--sand);
  margin-top: 18px;
  text-transform: uppercase;
  text-align: left !important;
}

#herofooter {
  padding: 0 2.5vw;
  width: 100%;
  position: absolute;
  z-index: 3;
  bottom: 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#herofooter a {
  text-decoration: none;
  color: var(--sand);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  gap: 8px;
}
#herofooter i { font-style: normal; font-size: 14px; }

#herofooter #iconset {
  display: flex;
  align-items: center;
  gap: 10px;
}

#herofooter .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(246,239,226,.5);
  transition: background-color 0.3s ease;
}
#herofooter .circle a { color: var(--sand); font-size: 14px; transition: color 0.3s ease; }
#herofooter .circle:hover { background: var(--sand); }
#herofooter .circle:hover a { color: var(--black); }

/* ---------- WAYS TO CONNECT ---------- */
#ways {
  position: relative;
  color: var(--sand);
  padding: 100px 6vw 70px;
  width: 100%;
  overflow: hidden;
}
.ways-mark {
  position: absolute;
  top: 12vw;
  right: -18vw;
  width: min(60vw, 640px);
  height: min(60vw, 640px);
  background-image: url('assets/img/spiral.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
#ways > * { position: relative; z-index: 1; }
#ways > .ways-mark { position: absolute; z-index: 0; }

.second-head {
  max-width: 640px;
  margin: 0 0 60px;
}
.second-head .eyebrow {
  font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.second-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;

  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.25;
}

.elem {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2.4vw 0;
  border-top: 1px solid rgba(231,181,89,.18);
}

.elem h3 {
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .03em;

  font-size: clamp(24px, 4.4vw, 50px);
  opacity: .92;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.elem .num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold);
}

.elem a {
  text-decoration: none;
  color: var(--sand);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
}

.elemlast {
  border-bottom: 1px solid rgba(231,181,89,.18);
}

.elem-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(231,181,89,.45);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.elem-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.elem-hover-img {
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  height: 110px;
  width: 110px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(231,181,89,.5);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  will-change: transform, opacity;
}

/* ---------- ABOUT ---------- */
#about {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  color: var(--sand);
  padding: 90px 6vw;
  width: 100%;
  background: radial-gradient(55% 60% at 15% 30%, rgba(201,106,62,.22) 0%, rgba(19,15,23,0) 60%);
}
#aboutimg { position: relative; flex: 0 0 auto; width: clamp(220px, 26vw, 320px); }
#aboutimg img { position: relative; z-index: 1; }
.about-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('assets/img/spiral.svg') center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
#aboutimg img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: 50%;
  border: 1px solid rgba(231,181,89,.35);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
#textabout { flex: 1 1 320px; max-width: 560px; }

#textabout h2 {
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 22px;
}

#textabout p {
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 22px;
  color: var(--ivory);
}

.chronicle {
  font-family: 'Space Grotesk', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  line-height: 1;
  width: 160px;
  height: 50px;
  border-radius: 50px;
  padding: 14px 20px;
  border: 1px solid var(--sand);
  transition: background .4s linear;
  margin-top: 10px;
}
.chronicle a { text-decoration: none; }
.chronicle:hover { background: var(--sand); }
.chronicle:hover span:nth-of-type(1) em {
  opacity: 0;
  transform: rotateX(90deg) scaleX(.9) translate3d(0,-10px,0);
}
.chronicle:hover span:nth-of-type(2) em {
  opacity: 1;
  transform: rotateX(0deg) scaleX(1) translateZ(0);
  transition: transform .75s cubic-bezier(.645,.045,.355,1), opacity .35s linear .3s;
}
.chronicle:hover em { color: var(--black); }
.chronicle span { position: relative; display: block; perspective: 108px; }
.chronicle span:nth-of-type(2) { position: absolute; }
.chronicle em {
  font-style: normal;
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
  transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.chronicle span:nth-of-type(1) em { transform-origin: top; }
.chronicle span:nth-of-type(2) em {
  opacity: 0;
  transform: rotateX(-90deg) scaleX(.9) translate3d(0,10px,0);
  transform-origin: bottom;
}

/* ---------- CONNECT ---------- */
#connect {
  position: relative;
  color: var(--sand);
  text-align: center;
  padding: 90px 6vw 100px;
  overflow: hidden;
}
#connect::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
}
#connect > * { position: relative; z-index: 1; }
#connect .eyebrow {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
#connect h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(26px, 4.4vw, 46px);
  margin-bottom: 40px;
}
.connect-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.connect-links a {
  color: var(--sand);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .05em;
  border-bottom: 1px solid rgba(246,239,226,.4);
  padding-bottom: 4px;
}

/* ---------- FOOTER ---------- */
#footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px;
  color: var(--sand);
  border-top: 1px solid rgba(246,239,226,.12);
}
#footerleft .footer-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  margin-bottom: 4px;
}
#footerleft span { font-size: 11px; opacity: .6; }

#footerright {
  display: flex;
  align-items: center;
  gap: 32px;
}
#footerright a {
  text-decoration: none;
  color: var(--sand);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}
#footerright a:hover { opacity: 1; }

@media (max-width: 900px) {
  #heading { padding-left: 20px; margin-top: 26vh; }
  #nav { padding: 22px 20px; }
  #navright { gap: 18px; }
  #navright a.navcta { display: none; }
  #navright a { padding: 10px 2px; }
  #about { padding: 70px 6vw; }
  .elem-hover-img { display: none; }
  .elem-thumb { width: 48px; height: 48px; }
  .elem { padding: 5vw 0; }
  #footer { flex-direction: column; gap: 16px; text-align: center; }
  #footerright { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .wa-fab { width: 52px; height: 52px; }
}

/* ---------- PERFORMANCE: defer rendering cost of below-the-fold sections ---------- */
#ways, #about, #connect, #footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Netlify honeypot field — hidden from real visitors, visible to naive bots */
.hidden-field { position: absolute; left: -9999px; top: -9999px; }

.eyebrow {
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.lede {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ivory-muted);
  max-width: 620px;
  margin-bottom: 22px;
}

/* ---------- SCROLL REVEAL (progressive disclosure) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1),
              filter .8s ease-out;
}
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ---------- WORLD SECTIONS (Sound / Solar / Art / Create) ---------- */
.world {
  display: flex;
  justify-content: center;
  padding: 90px 6vw;
  width: 100%;
  color: var(--sand);
}

.world-text { width: 100%; max-width: 680px; }
.world-text h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(28px, 4.2vw, 48px);
  margin-bottom: 18px;
}
.world-text .tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
  font-size: 16px;
  margin-bottom: 18px;
}

.offer-list { margin: 8px 0 28px; }
.offer-list > div {
  padding: 16px 0;
  border-top: 1px solid rgba(246,239,226,.14);
}
.offer-list dt {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 14px;
  margin-bottom: 6px;
}
.offer-list dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(246,239,226,.72);
}

.tag-label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246,239,226,.55);
  margin: 0 0 10px;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 28px;
}

/* "Cloud" pills — soft, luminous, drifting like clouds catching sunlight */
.tag-row span {
  position: relative;
  font-size: 12.5px;
  padding: 8px 16px;
  border-radius: 30px;
  color: rgba(246,239,226,.9);
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(246,239,226,.10), rgba(231,181,89,.07) 55%, rgba(201,106,62,.06));
  border: 1px solid rgba(246,239,226,.22);
  box-shadow: 0 8px 20px -10px rgba(231,181,89,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(0);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  animation: cloud-drift 8s ease-in-out infinite;
  animation-play-state: running;
}

/* Stagger drift timing per pill so the row moves like a loose cluster of clouds, not one synced block */
.tag-row span:nth-child(4n)   { animation-duration: 9.5s; animation-delay: -1.2s; }
.tag-row span:nth-child(4n+1) { animation-duration: 7.5s; animation-delay: -3.6s; }
.tag-row span:nth-child(4n+2) { animation-duration: 8.8s; animation-delay: -0.4s; }
.tag-row span:nth-child(4n+3) { animation-duration: 6.8s; animation-delay: -2.1s; }

.tag-row span:hover,
.tag-row span:focus-visible {
  animation-play-state: paused;
  border-color: rgba(231,181,89,.55);
  box-shadow: 0 10px 26px -8px rgba(231,181,89,.6), inset 0 1px 0 rgba(255,255,255,.12);
}

@keyframes cloud-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1.5px, -3px); }
  50%  { transform: translate(-1px, -5px); }
  75%  { transform: translate(-2px, -2px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tag-row span { animation: none; }
}

.world-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin-top: 6px;
}
.btn-primary, .btn-secondary {
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.btn-primary {
  background: var(--gold);
  color: var(--black);
  font-weight: 600;
}
.btn-secondary {
  color: var(--sand);
  border: 1px solid rgba(246,239,226,.4);
}

/* ---------- STATEMENT DIVIDERS ---------- */
.statement {
  position: relative;
  padding: 90px 6vw;
  text-align: center;
  color: var(--sand);
  overflow: hidden;
}
.statement::before,
.statement::after {
  content: '';
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.statement::before {
  top: -20%;
  left: -10%;
  background: radial-gradient(circle, rgba(231,181,89,.16) 0%, rgba(231,181,89,0) 70%);
  animation: mist-drift-a 26s ease-in-out infinite;
}
.statement::after {
  bottom: -25%;
  right: -10%;
  background: radial-gradient(circle, rgba(201,106,62,.14) 0%, rgba(201,106,62,0) 70%);
  animation: mist-drift-b 32s ease-in-out infinite;
}
.statement h2, .statement p, .statement ul {
  position: relative;
  z-index: 1;
}

/* Marsseia's own wordmark, worn like an old carved sign, resting quietly behind the words */
.statement-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vw, 1100px);
  height: auto;
  aspect-ratio: 1504 / 435;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}

@keyframes mist-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(6vw, 4vh) scale(1.15); }
}
@keyframes mist-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-5vw, -5vh) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .statement::before, .statement::after { animation: none; }
}

.statement h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(28px, 5vw, 56px);
  margin: 0 auto 18px;
  max-width: 780px;
}
.statement p.lede { margin: 0 auto; text-align: center; }
.statement-quiet { padding: 80px 6vw; }
.question-list {
  list-style: none;
  padding: 0;
  margin: 26px auto;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 15px;
  color: var(--gold);
}

/* ---------- CREATE: prompts + offer grid ---------- */
.prompt-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(16px, 2vw, 21px);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 28px;
}
.offer-grid > div {
  background: var(--panel-2);
  border: 1px solid rgba(246,239,226,.08);
  border-radius: 10px;
  padding: 16px 18px;
}
.offer-grid h3 {
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.offer-grid > div:last-child:nth-child(3n+2) { grid-column: span 2; }
.offer-grid p {
  margin: 0;
  font-size: 13.5px;
  color: rgba(246,239,226,.65);
}

/* ---------- CONTACT FORM ---------- */
.connect-sub { text-align: center; margin: 0 auto 40px; }
.idea-form {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.interest-picker {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.interest-picker legend {
  width: 100%;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246,239,226,.55);
  margin-bottom: 8px;
  padding: 0;
}
.interest-picker .pill {
  position: relative;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 30px;
  border: 1px solid rgba(246,239,226,.22);
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(246,239,226,.9);
  background: linear-gradient(135deg, rgba(246,239,226,.10), rgba(231,181,89,.07) 55%, rgba(201,106,62,.06));
  box-shadow: 0 8px 20px -10px rgba(231,181,89,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.interest-picker .pill:hover {
  border-color: rgba(231,181,89,.55);
  box-shadow: 0 10px 26px -8px rgba(231,181,89,.6), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.interest-picker input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.interest-picker .pill:has(input:checked) {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  box-shadow: 0 10px 24px -8px rgba(231,181,89,.7);
  transform: translateY(-1px);
}
.interest-picker input:focus-visible ~ .pill,
.interest-picker .pill:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.form-row { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.form-row label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246,239,226,.6);
}
.form-row input, .form-row textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(246,239,226,.25);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--sand);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  min-height: 44px;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus-visible, .form-row textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.form-row-split { flex-direction: row; gap: 18px; }
.form-row-split > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.idea-form button, .newsletter-row button {
  align-self: flex-start;
  background: var(--gold);
  color: var(--black);
  border: none;
  border-radius: 30px;
  padding: 13px 28px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.2s ease;
}
.idea-form button:disabled, .newsletter-row button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#idea-form-status, .newsletter-status {
  font-size: 13px;
  color: var(--gold);
  min-height: 1.4em;
}

/* ---------- FOOTER additions ---------- */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 8px;
}
.footer-nav a {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246,239,226,.7);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--sand); }

.newsletter-form { text-align: left; max-width: 320px; }
.newsletter-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  margin: 0 0 4px;
}
.newsletter-sub {
  font-size: 12px;
  color: rgba(246,239,226,.6);
  margin: 0 0 12px;
  line-height: 1.5;
}
.newsletter-row { display: flex; gap: 8px; }
.newsletter-row input {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(246,239,226,.25);
  border-radius: 30px;
  padding: 10px 16px;
  color: var(--sand);
  font-size: 13px;
  min-height: 44px;
}
.newsletter-row button { align-self: auto; padding: 10px 20px; }

@media (max-width: 900px) {
  .world { padding: 70px 6vw; }
  .offer-grid { grid-template-columns: 1fr; }
  .offer-grid > div:last-child:nth-child(3n+2) { grid-column: auto; }
  .form-row-split { flex-direction: column; }
  #footerright { align-items: center; }
  .newsletter-form { max-width: 100%; }
}

.hero-mark.has-canvas, .ways-mark.has-canvas, .about-mark.has-canvas { background-image: none; }
.spiral-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- PANELS: Sound / Solar / Art / Create open in-page from the Ways list ---------- */
.ways-hint {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.elem h3 { display: block; }
.elem-star {
  display: inline-block;
  margin-left: .3em;
  font-size: .62em;
  vertical-align: .28em;
  color: var(--gold);
  transition: transform .6s ease, text-shadow .4s ease;
}
.elem:hover .elem-star, .elem a:focus-visible .elem-star {
  transform: rotate(60deg) scale(1.25);
  text-shadow: 0 0 14px rgba(231,181,89,.85);
}

.js .panel {
  position: fixed;
  inset: 0;
  z-index: 9990;
  width: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 120px 6vw calc(110px + env(safe-area-inset-bottom, 0px));
  align-items: flex-start;
  background: linear-gradient(165deg, #2a1d2e 0%, #1c1521 45%, #130F17 100%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.js .panel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .18s ease, visibility 0s;
}
.js .panel [data-reveal] { opacity: 1; transform: none; filter: none; }

.panel-close {
  position: fixed;
  top: 26px;
  right: 6vw;
  z-index: 5;
  font: inherit;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  background: rgba(19,15,23,.55);
  border: 1px solid rgba(246,239,226,.55);
  border-radius: 40px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.panel-close:hover, .panel-close:focus-visible { background: var(--sand); color: var(--black); }
@media (pointer: fine) { .panel-close { cursor: none; } }

html.panel-open, html.panel-open body { overflow: hidden; }
html.panel-open .wa-fab, html.panel-open .gold-dust { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js .panel, .js .panel.is-open { transition: none; }
}
@media (max-width: 900px) {
  .js .panel { padding: 96px 6vw calc(120px + env(safe-area-inset-bottom, 0px)); }
  .panel-close { top: 18px; }
}

/* ---------- PERFORMANCE ---------- */
.js .panel:not(.is-open) .tag-row span { animation-play-state: paused; }
@media (max-width: 900px), (pointer: coarse) {
  .tag-row span { animation: none; }
}

/* ---------- MOBILE FIXES ---------- */
/* Larger invisible tap areas (no visual or layout change) */
#herofooter > a, .footer-nav a, #footerright > a, .connect-links a { position: relative; }
#herofooter > a::after, .footer-nav a::after, #footerright > a::after, .connect-links a::after {
  content: '';
  position: absolute;
  inset: -12px -8px;
}
#herofooter .circle a { width: 100%; height: 100%; justify-content: center; }

@media (max-width: 900px) {
  /* keep the two arrows clear of the floating WhatsApp button */
  #herofooter { padding-right: 84px; }
}
@media (max-width: 640px) {
  /* the larger logo + five links no longer fit on one row: logo on top, links below */
  #nav { flex-wrap: wrap; row-gap: 12px; }
  #nav a.logo img { height: 40px; }
  #navright { width: 100%; justify-content: space-between; gap: 0; }
  #navright a { padding: 8px 0; }
  #heading { margin-top: 180px; }
}
/* iOS Safari zooms the page when a field under 16px is focused */
@media (pointer: coarse) {
  .idea-form input, .idea-form textarea, .newsletter-form input { font-size: 16px; }
}

/* ---------- HERO TITLE: right side, 40px, very faint, wide-spaced letters breathing slowly ---------- */
#herotitle {
  position: absolute;
  z-index: 3;
  top: 130px;
  right: 40px;
  margin: 0 -.4em 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  line-height: 1.55;
  letter-spacing: .4em;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  pointer-events: none;
}
#herotitle .hl { display: block; }
.dw { display: inline-block; white-space: nowrap; }
.dl { display: inline-block; opacity: .3; animation: twinkle var(--dur, 8s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes twinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: .6; }
}
html.panel-open .dl { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .dl { animation: none !important; opacity: .45; }
}
@media (max-width: 900px) {
  #herotitle { top: auto; bottom: 17%; right: 20px; font-size: min(40px, 9.6vw); letter-spacing: .34em; margin-right: -.34em; }
}

/* ---------- GOLD DUST ---------- */
.gold-dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9994;
  pointer-events: none;
}

/* ---------- LEGIBILITY ---------- */
.tag-label { font-size: 12px; color: rgba(246,239,226,.75); }
.tag-row span { font-size: 13.5px; }
.offer-list dd { font-size: 15.5px; color: rgba(246,239,226,.84); }
#footerleft span { font-size: 12px; opacity: .75; }
#footerleft span span { opacity: 1; font-size: inherit; }
.form-row label, .interest-picker legend { color: rgba(246,239,226,.82); }
.newsletter-sub, .ways-hint { color: rgba(246,239,226,.82); }
@media (max-width: 900px) {
  #navright a { font-size: 12.5px; }
  #heading .blockText p { font-size: 13.5px; line-height: 1.7; }
  #herofooter a { font-size: 13px; }
  .form-row label, .interest-picker legend { font-size: 13px; }
  .newsletter-sub, .ways-hint { font-size: 13.5px; }
  .footer-nav { justify-content: center; }
  .footer-nav a, #footerright a { font-size: 12.5px; opacity: .9; }
  .offer-list dt { font-size: 15px; }
  .world-text .tagline { font-size: 14px; }
}

/* WhatsApp button steps aside while scrolling and where WhatsApp is already offered */
.wa-fab { transition: opacity .25s ease, transform .25s ease; }
.wa-fab.is-away { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }

@media (max-width: 900px) {
  #heading { padding-right: 20px; }
  #heading .blockText p:not(.hero-sub2) { text-wrap: balance; }
}

/* ---------- SOLAR GATE: the home page's doorway into /solar/ ---------- */
.solar-gate {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--sand);
  padding: clamp(90px, 15vw, 190px) 6vw;
  overflow: hidden;
}
.solar-gate-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.85);
  background: radial-gradient(circle, rgba(231, 181, 89, .32) 0, rgba(201, 106, 62, .14) 38%, rgba(19, 15, 23, 0) 68%);
  opacity: .8;
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1), opacity 1s ease;
  pointer-events: none;
}
.solar-gate:hover .solar-gate-glow,
.solar-gate:focus-visible .solar-gate-glow { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
.solar-gate-word {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(52px, 15vw, 280px);
  line-height: 1;
  letter-spacing: .34em;
  padding-left: .34em;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(19, 15, 23, .5);
}
.solar-gate-cta {
  position: relative;
  display: inline-block;
  margin-top: clamp(20px, 3vw, 36px);
  font-size: 12.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sand);
  text-shadow: 0 1px 14px rgba(19, 15, 23, .6);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(246, 239, 226, .6);
  transition: letter-spacing .5s ease;
}
.solar-gate:hover .solar-gate-cta,
.solar-gate:focus-visible .solar-gate-cta { letter-spacing: .42em; }
.solar-gate:focus-visible { outline-offset: -10px; }


/* ---------- Almost no floating sparkles: the drifting dust and star points are barely there ---------- */
.dust-overlay { opacity: .06; }
.stars-overlay { animation: none; opacity: 0; }

/* ---------- No grain layer ---------- */
.grain-overlay { display: none; }

/* ---------- HERO TITLE: left side, low, clear of the small "Beyond time and space" line ---------- */
#herotitle { top: auto; bottom: 84px; left: 40px; right: auto; margin: 0; text-align: left; font-size: min(40px, 4.6vh); }
@media (min-width: 901px) and (max-height: 780px) { #heading { margin-top: 31vh; } }
@media (max-width: 900px) {
  #herotitle { top: auto; bottom: 92px; left: 20px; right: auto; margin: 0; font-size: min(40px, 9.6vw, 5vh); }
}


/* ---------- HERO v2: sound first, a small line of places, two buttons ---------- */
#heading .blockText p.hero-line { max-width: 64ch; font-size: 12.5px; }
.hero-bar { color: var(--gold); margin: 0 .45em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 26px; }
.hero-ctas .btn-primary, .hero-ctas .btn-secondary { font-size: 12px; padding: 12px 22px; }
.hero-ctas .btn-secondary { background: rgba(19,15,23,.35); }
@media (max-width: 900px) {
  #herotitle { position: relative; inset: auto; margin: 0 20px; padding-top: 12vh; font-size: min(34px, 8.6vw); }
  #heading { margin-top: 18px; }
}

/* ---------- SOLAR ACTIVATIONS: the gate, with its name and a way into the experiences ---------- */
.solar-block { position: relative; text-align: center; padding-top: clamp(40px, 6vw, 80px); }
.solar-block-eyebrow { margin-bottom: 0; }
.solar-block .solar-gate { padding-top: clamp(50px, 9vw, 120px); padding-bottom: clamp(50px, 9vw, 120px); }
.solar-block-more { padding: 0 6vw clamp(60px, 8vw, 100px); }

/* ---------- PAST EVENTS: real photos, almost no words ---------- */
.events { padding: 90px 6vw 100px; color: var(--sand); }
.events > .eyebrow { margin-bottom: 30px; }
.events-grid { columns: 3 260px; column-gap: 14px; }
.events-grid figure { break-inside: avoid; margin: 0 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(231,181,89,.22); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.events-grid img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
@media (pointer: fine) { .events-grid figure:hover img { transform: scale(1.035); } }
.events-places { margin: 34px auto 0; max-width: 980px; text-align: center; font-size: 12px; letter-spacing: .22em; line-height: 2.1; text-transform: uppercase; color: rgba(246,239,226,.8); }
@media (max-width: 640px) {
  .events-grid { columns: 2 140px; column-gap: 10px; }
  .events-grid figure { margin-bottom: 10px; border-radius: 10px; }
  .events-places { font-size: 11px; letter-spacing: .16em; }
}

/* ---------- ALSO: the other doors, quieter ---------- */
.also { padding: 20px 6vw 90px; color: var(--sand); }
.also > .eyebrow { margin-bottom: 18px; }
.elem-sm { padding: 1.6vw 0; }
.elem-sm h3 { font-size: clamp(18px, 2.6vw, 30px); }
@media (max-width: 900px) { .elem-sm { padding: 4vw 0; } }

/* the gate keeps its whole glow; the section edges do the clipping */
.solar-block { overflow: hidden; }
.solar-block .solar-gate { overflow: visible; }
.events-places { text-wrap: balance; }
.events-places span { white-space: nowrap; }
@media (max-width: 640px) { .elem-sm h3 { font-size: 16px; line-height: 1.35; } }

/* ---------- PERFORMANCE: nothing animates forever unless you can really see it ---------- */
.dust-overlay { display: none; }                          /* was at 6% opacity: invisible, but animating on top of the whole page */
.statement::before, .statement::after { animation: none; } /* the two glows stay, they just don't drift */
.tag-row span { animation: none; }                         /* pills stay still; the hover glow is unchanged */
/* WhatsApp glow: same pulse, but fading a layer instead of repainting the shadow on every frame */
.wa-fab { animation: none; }
.wa-fab::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 8px 26px rgba(231,181,89,.7); opacity: 0; animation: fab-glow 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes fab-glow { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::after { animation: none; } }
/* Hero intro in CSS: starts with the first paint instead of waiting for GSAP to download (same timing as before) */
.js #nav { animation: intro-fade .5s ease-out both; }
.js .boundingelem { animation: intro-rise .8s cubic-bezier(.22, .61, .36, 1) both; }
.js #herotitle { animation-delay: .2s; }
.js .hero-line { animation-delay: .28s; }
.js .hero-ctas { animation-delay: .36s; }
.js #herofooter { animation: intro-fade .5s ease-out .76s both; }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(14px); filter: blur(10px); } }
@media (prefers-reduced-motion: reduce) { .js #nav, .js .boundingelem, .js #herofooter { animation: none; } }

/* ---------- LIGHT AND SOUND TEMPLES: a living temple seen through an arch (the SOLAR page's language) ----------
   Her three words are three states of the light, like a sunrise: relax (violet, the light low on the horizon),
   integ (rose) and pres (gold, the light high). temples.js sets data-phase on the section, adds .is-open to the
   stage the first time it is well in view (the light rises from behind the horizon), draws the sound waves and
   the floor lights in the canvas, and toggles .is-live so nothing moves while the section is off-screen.
   Geometry shared with temples.js: arch 3:4.1, disk 60% of the arch width, horizon at 72% of its height,
   disk centre at 40% (pres), 52% (integ) and 64% (relax) of the arch height. */
.temples {
  --tp-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --tp-stars:
    radial-gradient(1.4px 1.4px at 14% 22%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1px 1px at 27% 12%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.2px 1.2px at 39% 29%, rgba(236, 228, 255, .75), transparent),
    radial-gradient(1px 1px at 52% 9%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.6px 1.6px at 66% 19%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1px 1px at 79% 31%, rgba(236, 228, 255, .7), transparent),
    radial-gradient(1.2px 1.2px at 86% 16%, rgba(255, 255, 255, .75), transparent),
    radial-gradient(1px 1px at 21% 38%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 72% 42%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.2px 1.2px at 33% 50%, rgba(236, 228, 255, .4), transparent),
    radial-gradient(1px 1px at 90% 48%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1px 1px at 9% 55%, rgba(255, 255, 255, .35), transparent);
  --tp-stars-few:
    radial-gradient(1.2px 1.2px at 14% 22%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.4px 1.4px at 66% 19%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 86% 16%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1px 1px at 27% 12%, rgba(255, 255, 255, .3), transparent);
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 150px) 6vw clamp(80px, 10vw, 140px);
  color: var(--sand);
}
.temples:not(.is-live) { --tp-play: paused; }
.tp-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". stage" "head stage" "foot stage" ". stage";
  column-gap: clamp(48px, 8vw, 120px);
}
.tp-head { grid-area: head; }
.tp-foot { grid-area: foot; margin-top: 34px; }
.tp-stage { grid-area: stage; position: relative; width: 100%; justify-self: center; }
.tp-stage[data-reveal] { filter: none; }  /* a fade and a small rise is enough for this big layer */

.tp-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.1;
  letter-spacing: .03em;
  color: var(--ivory);
  text-shadow: 0 2px 30px rgba(19, 15, 23, .6);
}
/* the title arrives letter by letter, like SOLAR (temples.js splits it; without JS it is plain text) */
.tp-title.is-split { opacity: 1; transform: none; filter: none; }
.tp-w { display: inline-block; white-space: nowrap; }
.tp-ch { display: inline-block; opacity: 0; transform: translateY(.3em); filter: blur(10px); }
.tp-title.is-split.is-inview .tp-ch { animation: tp-ch 1.5s cubic-bezier(.22, .61, .36, 1) forwards; animation-delay: calc(var(--k) * .045s); }
@keyframes tp-ch { to { opacity: 1; transform: none; filter: blur(0); } }
.tp-copy { margin-top: 24px; max-width: 30ch; font-size: 18px; line-height: 1.7; color: var(--ivory); text-shadow: 0 1px 18px rgba(19, 15, 23, .7); }

/* the arch and the thin gold rays behind it (same rays as SOLAR, turning very slowly) */
.tp-frame { position: relative; }
.tp-rays {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 175%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 64%);
  mask-image: radial-gradient(circle, #000 32%, transparent 64%);
  animation: tp-spin 260s linear infinite;
  animation-play-state: var(--tp-play, running);
}
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-arch, .tp-arch-outer { border-radius: 50% 50% 14px 14px / 36.59% 36.59% 14px 14px; }  /* a true half circle on top at any width */
.tp-arch-outer { position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(231, 181, 89, .34); transform: scale(1.05) translateY(-1.2%); pointer-events: none; }

.tp-arch {
  position: relative;
  z-index: 2;
  aspect-ratio: 3 / 4.1;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #05030a 0%, #0c0812 45%, #161019 72%, #0b0810 100%);
  box-shadow: 0 44px 90px -36px rgba(0, 0, 0, .9), 0 0 0 1px rgba(231, 181, 89, .45);
}
.tp-arch::after { content: ''; position: absolute; inset: 0; z-index: 7; border-radius: inherit; box-shadow: inset 0 0 60px rgba(5, 3, 10, .8); pointer-events: none; }

/* one layer per state for the wall, the disk and the floor; changing state only fades layers (no repaint) */
.tp-ph, .tp-face, .tp-fl { position: absolute; inset: 0; opacity: 0; transition: opacity 2.8s ease; }
.temples[data-phase="relax"] :is(.tp-ph--relax, .tp-face--relax, .tp-fl--relax),
.temples[data-phase="integ"] :is(.tp-ph--integ, .tp-face--integ, .tp-fl--integ),
.temples[data-phase="pres"] :is(.tp-ph--pres, .tp-face--pres, .tp-fl--pres) { opacity: 1; }

.tp-ph { z-index: 1; }
.tp-ph--relax { background: var(--tp-stars), radial-gradient(75% 36% at 50% 66%, rgba(150, 120, 230, .5), rgba(150, 120, 230, 0) 72%), linear-gradient(180deg, rgba(34, 24, 74, 0) 10%, rgba(34, 24, 74, .55) 72%); }
.tp-ph--integ { background: var(--tp-stars-few), radial-gradient(78% 40% at 50% 52%, rgba(226, 92, 112, .44), rgba(226, 92, 112, 0) 72%), linear-gradient(180deg, rgba(66, 16, 38, 0) 10%, rgba(66, 16, 38, .5) 72%); }
.tp-ph--pres { background: radial-gradient(80% 44% at 50% 40%, rgba(247, 168, 78, .46), rgba(247, 168, 78, 0) 72%), linear-gradient(180deg, rgba(72, 34, 12, 0) 10%, rgba(72, 34, 12, .45) 72%); }

/* the disk of light: rises from behind the horizon the first time, then moves with the state and breathes (10 s) */
.tp-sun {
  position: absolute;
  z-index: 2;
  left: 20%;
  top: 18.05%;
  width: 60%;
  aspect-ratio: 1;
  transform: translateY(126%);
  transition: transform 3.6s cubic-bezier(.45, .05, .25, 1);
  pointer-events: none;
}
.tp-stage.is-open .tp-sun { transform: none; }
.temples[data-phase="integ"] .tp-stage.is-open .tp-sun { transform: translateY(27.33%); }
.temples[data-phase="relax"] .tp-stage.is-open .tp-sun { transform: translateY(54.67%); }
.tp-breath {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate 1s cubic-bezier(.22, .61, .36, 1);
  animation: tp-breathe 10s ease-in-out infinite;
  animation-play-state: var(--tp-play, running);
}
@keyframes tp-breathe { 0%, 100% { transform: scale(.975); } 45% { transform: scale(1.025); } }
.tp-face { border-radius: 50%; }
.tp-face--relax { background: radial-gradient(circle at 26% 44%, #fcf9ff 0%, #ddd1fb 26%, #a994e0 60%, #5f4ca6 100%); box-shadow: 0 0 50px 10px rgba(160, 130, 240, .5), 0 0 140px 36px rgba(120, 95, 210, .25); }
.tp-face--integ { background: radial-gradient(circle at 50% 36%, #ffe6de 0%, #f9aa9f 26%, #df6470 58%, #8e2744 100%); box-shadow: 0 0 50px 10px rgba(240, 100, 110, .5), 0 0 140px 36px rgba(210, 70, 90, .25); }
.tp-face--pres { background: radial-gradient(circle at 50% 36%, #fff5da 0%, #ffd27f 26%, #f59a3a 58%, #c9521d 100%); box-shadow: 0 0 50px 10px rgba(255, 165, 70, .55), 0 0 140px 36px rgba(255, 125, 40, .28); }
/* inside each disk, translucent: a crescent moon, a tree with its roots (the earth), a fine sunburst (the sun) */
.tp-glyph { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-face--relax .g-rim { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: .8; }
.tp-face--integ .tp-glyph { fill: none; stroke: rgba(128, 28, 58, .46); stroke-linecap: round; }
.tp-face--integ .g-ground { stroke-width: .8; stroke-dasharray: 2 3; }
.tp-face--integ .g-leaves { fill: rgba(128, 28, 58, .42); stroke: none; }
.tp-face--pres .g-burst { fill: none; stroke: rgba(160, 64, 12, .4); stroke-linecap: round; }
.tp-glint { position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 235, .6) 0, rgba(255, 250, 235, .18) 45%, rgba(255, 250, 235, 0) 66%); opacity: 0; }
.tp-breath::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--tp-noise); mix-blend-mode: multiply; opacity: .3; }

/* the floor: hides the disk below the horizon, draws the line of light and the disk's reflection */
.tp-floor { position: absolute; z-index: 3; left: 0; right: 0; top: 72%; bottom: 0; background: linear-gradient(180deg, #150e18 0%, #0d0911 55%, #09060c 100%); pointer-events: none; }
.tp-fl::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
  box-shadow: 0 0 10px 1px var(--glow), 0 0 42px 7px var(--glow2);
  transform: scaleX(0);
  transition: transform 2.2s cubic-bezier(.22, .61, .36, 1) .3s;
}
.tp-stage.is-open .tp-fl::before { transform: none; }
.tp-fl--relax { --line: #dccfff; --glow: rgba(176, 150, 255, .85); --glow2: rgba(140, 110, 230, .3); background: radial-gradient(52% 46% at 50% 52%, rgba(170, 145, 245, .3), rgba(170, 145, 245, 0) 74%), radial-gradient(30% 78% at 50% 29%, rgba(170, 145, 245, .34), rgba(170, 145, 245, .1) 55%, rgba(170, 145, 245, 0) 100%), linear-gradient(180deg, rgba(140, 110, 230, .2), rgba(140, 110, 230, 0) 32%); }
.tp-fl--integ { --line: #ffcdc7; --glow: rgba(255, 130, 130, .85); --glow2: rgba(225, 85, 105, .3); background: radial-gradient(52% 46% at 50% 52%, rgba(240, 120, 125, .28), rgba(240, 120, 125, 0) 74%), radial-gradient(30% 78% at 50% 71%, rgba(240, 120, 125, .32), rgba(240, 120, 125, .1) 55%, rgba(240, 120, 125, 0) 100%), linear-gradient(180deg, rgba(225, 85, 105, .2), rgba(225, 85, 105, 0) 32%); }
.tp-fl--pres { --line: #ffe8b5; --glow: rgba(255, 196, 110, .9); --glow2: rgba(245, 150, 60, .32); background: radial-gradient(52% 46% at 50% 52%, rgba(255, 175, 85, .3), rgba(255, 175, 85, 0) 74%), radial-gradient(30% 78% at 50% 114%, rgba(255, 175, 85, .34), rgba(255, 175, 85, .1) 55%, rgba(255, 175, 85, 0) 100%), linear-gradient(180deg, rgba(245, 150, 60, .22), rgba(245, 150, 60, 0) 32%); }

.tp-waves { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
/* her keywords float up one by one in the dome of the arch, like projected light (temples.js runs them) */
.tp-word { position: absolute; left: 4%; right: 4%; top: 11%; z-index: 5; margin: 0; padding-left: .34em; text-align: center; white-space: nowrap; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase; color: #fff4dc; text-shadow: 0 0 18px rgba(255, 214, 150, .65), 0 1px 12px rgba(5, 3, 10, .85); opacity: 0; pointer-events: none; }
@media (max-width: 480px) { .tp-word { font-size: 11px; letter-spacing: .26em; padding-left: .26em; } }
/* the same words, still, under the arch when nothing should move (reduced motion, or temples.js can't run); otherwise for screen readers only */
.tp-keys { margin: 10px auto 0; max-width: 34em; text-align: center; font-size: 11px; letter-spacing: .24em; line-height: 1.9; text-transform: uppercase; color: rgba(231, 181, 89, .85); }
.temples.tp-ready .tp-keys { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the circle of people: still silhouettes with a thin rim of the light's colour on their heads and shoulders */
/* (no transition on the rim colour: fading `color` through the <use> copies made Chrome restyle them on every frame) */
.tp-people { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; fill: #07040b; stroke: url(#tp-rim); stroke-width: 1.1; color: #ffd48a; }
.temples[data-phase="relax"] .tp-people { color: #cdbcff; }
.temples[data-phase="integ"] .tp-people { color: #ffb4ab; }
.tp-touch { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.tp-touch:focus-visible { outline: 2px solid var(--gold); outline-offset: -8px; }
.tp-hint { margin-top: 22px; text-align: center; font-family: var(--font-display); font-size: 13px; letter-spacing: .18em; color: rgba(246, 239, 226, .6); }

/* her three words: each one is a state of the light (temples.js moves to the next one every 9 s) */
.tp-words { display: flex; flex-wrap: wrap; align-items: center; }
.tp-words button {
  position: relative;
  padding: 12px 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .55);
  cursor: pointer;
  transition: color .8s ease, text-shadow .8s ease;
}
.tp-words span { margin: 0 .75em 0 .1em; color: rgba(231, 181, 89, .7); }
.tp-words button:hover { color: rgba(246, 239, 226, .9); }
.tp-words button::after { content: ''; position: absolute; left: 0; right: .26em; bottom: 7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.tp-words button.is-on::after { transform: none; }
.temples[data-phase="relax"] .tp-words button.is-on { color: #d3c6f7; text-shadow: 0 0 18px rgba(170, 145, 245, .55); }
.temples[data-phase="integ"] .tp-words button.is-on { color: #f9b6ad; text-shadow: 0 0 18px rgba(240, 120, 125, .55); }
.temples[data-phase="pres"] .tp-words button.is-on { color: var(--gold); text-shadow: 0 0 18px rgba(231, 181, 89, .55); }

.tp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 26px; }
.tp-sound {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}
.tp-sound-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 226, 170, .75);
  background: rgba(19, 10, 22, .5);
  box-shadow: 0 0 34px rgba(242, 185, 89, .3);
  transition: background .4s ease, box-shadow .4s ease;
}
.tp-sound-ico i { width: 2px; height: 16px; border-radius: 2px; background: #fff1c9; transform: scaleY(.4); transition: background .4s ease; }
.tp-sound-ico i:nth-child(2) { transform: scaleY(.75); }
.tp-sound:hover .tp-sound-ico, .tp-sound:focus-visible .tp-sound-ico { background: rgba(231, 181, 89, .2); box-shadow: 0 0 46px rgba(242, 185, 89, .5); }
.tp-sound[aria-pressed="true"] .tp-sound-ico { background: var(--gold); }
.tp-sound[aria-pressed="true"] .tp-sound-ico i { background: #1a0f14; animation: tp-eq 1.1s ease-in-out infinite; animation-play-state: var(--tp-play, running); }
.tp-sound[aria-pressed="true"] .tp-sound-ico i:nth-child(2) { animation-duration: .9s; animation-delay: -.4s; }
.tp-sound[aria-pressed="true"] .tp-sound-ico i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.7s; }
@keyframes tp-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (pointer: fine) { .tp-touch, .tp-words button, .tp-sound { cursor: none; } }

@media (max-width: 900px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "stage" "foot"; row-gap: 40px; text-align: center; }
  .tp-copy { margin-inline: auto; }
  .tp-stage { width: min(76vw, 380px); }
  .tp-foot { margin-top: 0; }
  .tp-words, .tp-actions { justify-content: center; }
}
@media (max-width: 480px) {
  .tp-copy { font-size: 16.5px; }
  .tp-words button { font-size: 11px; letter-spacing: .2em; }
  .tp-words span { margin: 0 .5em 0 0; }
}

/* until temples.js runs (or if it can't): the golden state, still, with nothing to press */
.temples:not(.tp-ready) .tp-sun { transform: none; transition: none; }
.temples:not(.tp-ready) .tp-fl::before { transform: none; }
.temples:not(.tp-ready) :is(.tp-sound, .tp-hint, .tp-touch) { display: none; }
.temples:not(.tp-ready) .tp-words button { pointer-events: none; }
.tp-still :is(.tp-sun, .tp-ph, .tp-face, .tp-fl, .tp-fl::before) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tp-ch { opacity: 1; transform: none; filter: none; animation: none !important; }
  .tp-rays, .tp-breath, .tp-sound-ico i { animation: none !important; }
  .tp-fl::before { transform: none; }
  .tp-words button::after { transition: none; }
  .tp-touch, .tp-words button, .tp-sound { cursor: pointer !important; }
  .tp-word { display: none; }
  .temples.tp-ready .tp-keys { position: static; width: auto; height: auto; margin: 10px auto 0; overflow: visible; clip: auto; white-space: normal; }
}

/* ---------- SOUND EXPERIENCES: a short summary; each offer folds out when someone asks ---------- */
.folds { margin: 6px 0 30px; border-bottom: 1px solid rgba(246, 239, 226, .14); }
.fold { border-top: 1px solid rgba(246, 239, 226, .14); }
.fold-head { margin: 0; font-size: inherit; font-weight: inherit; }
.fold-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 56px;
  padding: 16px 0;
  border: 0;
  background: none;
  color: var(--sand);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
}
.fold-btn:hover, .fold.is-open .fold-btn { color: var(--gold); }
.fold-mark { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.fold-mark::before, .fold-mark::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--gold); transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.fold-mark::after { transform: rotate(90deg); }
.fold.is-open .fold-mark::after { transform: rotate(0deg); }
.fold-body { display: grid; grid-template-rows: 1fr; }
.folds.is-ready .fold-body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .5s; }
.folds.is-ready .fold.is-open .fold-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
.fold-inner { min-height: 0; overflow: hidden; }
.fold-inner > p { margin: 0 0 18px; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: rgba(246, 239, 226, .72); }
.fold-inner > .tag-row { margin: 2px 0 22px; }
@media (pointer: fine) { .fold-btn { cursor: none; } }
@media (prefers-reduced-motion: reduce) { .fold-mark::before, .fold-mark::after { transition: none; } .fold-btn { cursor: pointer !important; } }

/* ---------- PAST EVENTS: where the sound has travelled ---------- */
.events-global { margin: 46px auto 0; max-width: 980px; text-align: center; }
.events-global-label { margin: 0 0 14px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.events-global .events-places { margin: 0 auto; font-family: var(--font-display); font-size: clamp(18px, 2.3vw, 27px); letter-spacing: .1em; line-height: 1.7; text-transform: none; color: var(--ivory); }
@media (max-width: 640px) { .events-global .events-places { font-size: 17px; letter-spacing: .06em; } }

/* ---------- ALSO: one door now, Creative Direction, bigger, with its morphing gold star ---------- */
.elem-text { display: block; min-width: 0; }
.elem-sub { display: block; margin-top: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; color: rgba(246, 239, 226, .62); }
.elem-cd a { gap: clamp(18px, 2.6vw, 34px); }
.elem-cd h3 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.08; }
.cd-star { position: relative; flex: 0 0 auto; width: clamp(56px, 6vw, 84px); aspect-ratio: 1; }
.cd-star::before { content: ''; position: absolute; inset: -36%; border-radius: 50%; background: radial-gradient(circle, rgba(231, 181, 89, .32), rgba(231, 181, 89, 0) 62%); pointer-events: none; }
.cd-star svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 640px) { .elem-sub { font-size: 10.5px; letter-spacing: .12em; } .elem-cd h3 { font-size: 26px; } .cd-star { width: 48px; } }

/* ---------- PAST EVENTS: "and more" on its own line, with three dots that blink while you look ---------- */
.events-more { margin: 12px 0 0; padding-left: .42em; font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: rgba(246, 239, 226, .62); }
.events-dots i { display: inline-block; margin-left: .06em; font-style: normal; animation: more-blink 1.8s ease-in-out infinite; animation-play-state: paused; }
.events-dots i:nth-child(2) { animation-delay: .3s; }
.events-dots i:nth-child(3) { animation-delay: .6s; }
[data-live].is-live .events-dots i { animation-play-state: running; }
@keyframes more-blink { 0%, 100% { opacity: .2; } 45% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .events-dots i { animation: none !important; opacity: .7; } }

/* ---------- CREATIVE DIRECTION panel: an opening, then 01 Artistic Portraits and 02 Experience Design ---------- */
.cd-part { margin: 36px 0 30px; padding-top: 28px; border-top: 1px solid rgba(231, 181, 89, .25); }
.cd-part--who { margin-bottom: 18px; }
.cd-kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.cd-kicker span { font-size: 11px; letter-spacing: .1em; color: rgba(231, 181, 89, .7); }
.cd-title { margin: 0 0 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(22px, 3vw, 32px); letter-spacing: .01em; text-transform: uppercase; }
.offer-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .offer-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- HERO (2026-09-25): no big title any more. Her three titles are the page's h1 (same small style as
   before), and "Join the Solar Circle" takes the twinkling letters "Sound is a portal." had, a little smaller,
   with the email field and what the letters bring. Desktop: bottom left; phones: at the bottom, above the arrows. ---------- */
#heading .blockText h1.hero-line {
  margin: 18px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .18em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--sand);
  text-align: left;
}
.hero-join { position: absolute; z-index: 4; left: 40px; bottom: calc(4% + 58px); max-width: 520px; }
.hero-join-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(26px, 3.1vh);
  line-height: 1.5;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--sand);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}
.hero-join-title .hl { display: block; }            /* JOIN THE / SOLAR CIRCLE, like the old two-line title */
.hero-join-title .dl { animation-name: twinkle-join; }
@keyframes twinkle-join { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
.hero-circle { max-width: 380px; }
.hero-circle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 5px 0 18px;
  border: 1px solid rgba(246, 239, 226, .34);
  border-radius: 40px;
  background: rgba(19, 15, 23, .38);
  transition: border-color .3s ease;
}
.hero-circle:focus-within .hero-circle-row { border-color: rgba(231, 181, 89, .85); }
.hero-circle input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivory);
  font: inherit;
  font-size: 13.5px;
  letter-spacing: .03em;
}
.hero-circle input::placeholder { color: rgba(246, 239, 226, .58); }
.hero-circle input:focus-visible { outline: none; }
.hero-circle button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 30px;
  background: rgba(231, 181, 89, .18);
  color: var(--gold);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.hero-circle button:hover, .hero-circle button:focus-visible { background: var(--gold); color: var(--black); }
.hero-circle button:disabled { opacity: .6; }
.hero-circle-status { margin: 8px 0 0; min-height: 0; font-size: 12.5px; color: #ffe2a3; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.hero-circle-status:empty { display: none; }
.hero-join-sub { margin: 12px 0 0; max-width: 520px; font-size: 12.5px; line-height: 1.6; letter-spacing: .04em; color: rgba(246, 239, 226, .85); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.js .hero-join { animation-delay: .5s; }
@media (pointer: fine) { .hero-circle button { cursor: none; } }
@media (min-width: 901px) { #heading .blockText h1.hero-line { max-width: none; } }
/* the words and buttons sit a little higher now, so the Solar Circle has room below them */
@media (min-width: 901px) { #heading { margin-top: 32vh; } }
@media (min-width: 901px) and (max-height: 780px) { #heading { margin-top: 25vh; } }
@media (max-width: 900px) {
  #hero { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100svh; padding-bottom: 104px; }
  #heading { margin-top: 14vh; }
  #heading .blockText h1.hero-line { font-size: 13.5px; line-height: 1.7; }
  .hero-join { position: relative; left: auto; bottom: auto; max-width: 420px; margin: auto 20px 0; padding-top: 44px; }
  .hero-join-title { font-size: min(24px, 6.4vw); letter-spacing: .34em; }
  .hero-circle { max-width: none; }
  .hero-circle input { font-size: 16px; }
  .hero-join-sub { max-width: none; font-size: 13px; }
}

/* footer: a way back up to the Solar Circle */
#footerright a.footer-circle { color: var(--gold); opacity: 1; border-bottom: 1px solid rgba(231, 181, 89, .5); padding-bottom: 3px; }

/* ---------- ALSO: Creative Direction as a centred emblem, the star above a bigger title ---------- */
.also > .eyebrow { text-align: center; }
.elem-cd { justify-content: center; padding: clamp(40px, 6vw, 84px) 0; }
.elem-cd a { flex-direction: column; justify-content: center; gap: clamp(14px, 2vw, 24px); text-align: center; }
.elem-cd h3 { font-size: clamp(40px, 7.6vw, 108px); letter-spacing: .04em; line-height: 1; }
.elem-cd .cd-star { width: clamp(64px, 7vw, 100px); }
.elem-cd .elem-sub { margin-top: 14px; }
@media (max-width: 640px) { .elem-cd h3 { font-size: 40px; } .elem-cd .cd-star { width: 60px; } }

/* ---------- CREATIVE DIRECTION: inside a translucent golden portal (an arch standing on the line below), with gold dust
   that swirls around the cursor or a finger (script.js initPortalDust) ---------- */
.elem-cd { isolation: isolate; }
.cd-portal {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: clamp(18px, 2.4vw, 30px);
  bottom: 0;
  width: clamp(290px, 36vw, 500px);
  translate: -50% 0;
  overflow: hidden;
  border: 1px solid rgba(231, 181, 89, .55);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255, 234, 186, .22) 0%, rgba(231, 181, 89, .1) 45%, rgba(231, 181, 89, .03) 100%);
  box-shadow: inset 0 0 70px rgba(242, 196, 110, .16), 0 0 90px -12px rgba(231, 181, 89, .24);
  pointer-events: none;
}
.cd-portal::before { content: ''; position: absolute; inset: 10px 10px 0; border: 1px solid rgba(231, 181, 89, .22); border-bottom: 0; border-radius: 999px 999px 0 0; }
.cd-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.elem-cd .elem-sub + .elem-sub { margin-top: 6px; }

/* ---------- HERO (2026-09-25, later): her titles and her three ways in as short lists, on the left, so the photo's
   face stays clear on phones ---------- */
.hero-role { display: block; }
.hero-links { display: grid; justify-items: start; gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; }
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(246, 239, 226, .32);
  color: var(--sand);
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(19, 15, 23, .6);
  transition: color .3s ease, border-color .3s ease, gap .35s ease;
}
.hero-link:hover, .hero-link:focus-visible { color: var(--gold); border-color: var(--gold); gap: 16px; }
.hero-link--main { color: var(--gold); border-color: rgba(231, 181, 89, .7); font-weight: 600; }
@media (min-width: 901px) {
  #heading { margin-top: 26vh; }
  .hero-join-title { font-size: min(24px, 2.9vh); }
}
@media (min-width: 901px) and (max-height: 780px) { #heading { margin-top: 20vh; } }
@media (max-width: 900px) {
  #heading { margin-top: 26vh; }
  #heading .blockText h1.hero-line { font-size: 13px; line-height: 1.75; }
  .hero-link { font-size: 12px; letter-spacing: .16em; }
  .hero-join-title { font-size: min(21px, 5.4vw); letter-spacing: .3em; }
}
.elem-cd .elem-sub + .elem-sub { margin-top: 4px; }
/* short desktop screens (laptops): the Solar Community block follows the links instead of sitting on top of them */
@media (min-width: 901px) and (max-height: 820px) {
  #hero { height: auto; min-height: 100vh; padding-bottom: 120px; }
  .hero-join { position: relative; left: auto; bottom: auto; margin: 46px 40px 0; }
}
@media (max-width: 900px) { .hero-links { gap: 2px; margin-top: 18px; } .hero-join { padding-top: 26px; } }   /* keeps the first screen within one phone screen */
@media (max-width: 900px) { #heading { margin-top: 23vh; } #hero { padding-bottom: 92px; } .hero-link { min-height: 36px; } }

/* ---------- HERO (2026-09-25, last): "Sound. Light. Art. Experience." back, above her titles, in the letters of
   "Join the Solar Community" and a little bigger. It stays still (only the Solar Community twinkles); the lines rise in one by
   one when the page opens. The words start higher, so her titles keep their place. ---------- */
#heading .blockText p.hero-tagline {
  margin: 0 0 6px;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(30px, 3.6vh);
  line-height: 1.26;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.hero-tagline > span { display: block; }
.js .hero-tagline > span { animation: intro-rise .8s cubic-bezier(.22, .61, .36, 1) both; }
.js .hero-tagline > span:nth-child(2) { animation-delay: .08s; }
.js .hero-tagline > span:nth-child(3) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .js .hero-tagline > span { animation: none; } }
@media (min-width: 901px) { #heading { margin-top: calc(26vh - 122px); } }
@media (min-width: 901px) and (max-height: 780px) { #heading { margin-top: max(28px, calc(20vh - 112px)); } }
/* phones: the words begin just under her chin, and the spacing below tightens so the first screen still fits one phone */
@media (max-width: 900px) {
  #heading { margin-top: calc(33vh - 134px); }
  #heading .blockText p.hero-tagline { font-size: min(24px, 6.2vw); line-height: 1.18; letter-spacing: .1em; }
  #heading .blockText h1.hero-line { margin-top: 12px; }
  .hero-links { margin-top: 12px; }
  .hero-join { padding-top: 16px; }
  .hero-join-title { margin-bottom: 10px; }
  .hero-join-sub { margin-top: 6px; }
  #hero { padding-bottom: 86px; }
}

/* ---------- SPEED (2026-09-25): decorative pictures far down the page load when the visitor gets near them
   (script.js initLazyBackgrounds adds .bg-in), so the first screen downloads first. Without JavaScript they load
   as before. ---------- */
#connect.bg-in::before, html:not(.js) #connect::before { background-image: url('assets/img/sun-glow-grain.jpg'); }
.statement-wordmark.bg-in, html:not(.js) .statement-wordmark { background-image: url('assets/img/from-live-site/live-texture-strip.png'); }
/* the video's still frame is set by script.js when the video starts; without JavaScript, show it as a picture */
html:not(.js) .bg-video-wrap { background-image: url('assets/img/orb-mystique.jpg'); background-size: cover; background-position: center 35%; }

/* ---------- LANGUAGES (2026-10-04): the EN | ES switch in the menu, and where she works, in the footer ---------- */
#navright a.lang-switch { border: 1px solid rgba(246, 239, 226, .45); border-radius: 999px; padding: 6px 11px; letter-spacing: .14em; transition: border-color .3s ease, color .3s ease; }
#navright a.lang-switch:hover, #navright a.lang-switch:focus-visible { border-color: var(--gold); color: var(--gold); }
@media (max-width: 640px) { #navright a.lang-switch { padding: 5px 10px; } }
.footer-places { margin: 2px 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 239, 226, .62); }
/* footer links: at least 24px tall to tap on phones (they wrap into rows once the language link is there) */
.footer-nav { row-gap: 2px; }
.footer-nav a { display: inline-block; padding: 4px 0; }