@font-face {
  font-family: "Europa";
  src: url("/fonts/europa.woff2") format("woff2"), url("/fonts/europa.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
:root {
  --ground: #000;
  --sand: #e6d5ac;
  --sand-dim: rgba(230, 213, 172, .65);
  --mint: #7fb069;
  --white: #fff;
  --line: rgba(230, 213, 172, .18);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 5vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--sand); font-family: "Europa", "Helvetica Neue", Arial, sans-serif; font-size: clamp(17px, 1.1vw + 12px, 20px); line-height: 1.65; overflow-x: clip; }
a { color: var(--mint); }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
h1, h2, h3 { font-weight: normal; letter-spacing: .05em; color: var(--white); margin: 0; line-height: 1.15; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px; background: var(--mint); color: #000; }
.skip-link:focus { top: 10px; }
.masthead { position: sticky; top: 0; z-index: 20; display: flex; justify-content: center; align-items: center; min-height: 94px; padding: 15px var(--gutter); padding-top: max(15px, env(safe-area-inset-top)); text-align: center; background: linear-gradient(#000 40%, rgba(0,0,0,0)); }
.wordmark { color: var(--mint); text-decoration: none; font-size: 30px; font-weight: 400; letter-spacing: 3px; line-height: normal; white-space: nowrap; transition: color .4s ease; }
.wordmark:hover { color: var(--white); }
.hero { overflow: clip; position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(24px,5vw,80px); min-height: min(calc(100svh - 60px),860px); padding: clamp(24px,6vh,80px) var(--gutter) clamp(72px,10vh,120px); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/videos/colorfield.gif") center / cover no-repeat; opacity: .55; mask-image: linear-gradient(to bottom,#000 55%,transparent); -webkit-mask-image: linear-gradient(to bottom,#000 55%,transparent); }
.hero h1 { text-transform: none; font-size: clamp(56px,10vw,150px); letter-spacing: .04em; margin-bottom: .3em; }
.hero-text { max-width: 34em; }
.hero-text p { margin: 0 0 1em; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.lede { font-size: 1.25em; color: var(--white); line-height: 1.45; }
.cta { display: inline-block; margin-top: .8em; padding: 14px 30px; border-radius: 999px; background: var(--white); color: #000; font-size: .8em; letter-spacing: .14em; text-decoration: none; transition: filter .2s, transform .2s var(--ease); }
.cta:hover { filter: brightness(1.1); transform: translateY(-2px); }
/* Rings rotate; the labels counter-rotate to stay level. */
.orbit { --outer: 41cqi; --inner: 25cqi; container-type: inline-size; position: relative; width: min(100%,560px); aspect-ratio: 1; justify-self: center; letter-spacing: .06em; }
.ring { position: absolute; inset: 0; border-radius: 50%; animation: spin var(--period) linear infinite; }
.ring::before { content: ""; position: absolute; border: 1px dashed var(--line); border-radius: 50%; }
.ring-outer { --period: 140s; }
.ring-outer::before { inset: calc(50% - var(--outer)); }
.ring-inner { --period: 90s; animation-direction: reverse; }
.ring-inner::before { inset: calc(50% - var(--inner)); border-style: solid; border-color: rgba(127,176,105,.22); }
.body { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); text-decoration: none; }
.ring-outer .body { --r: var(--outer); }
.ring-inner .body { --r: var(--inner); }
.upright { position: absolute; inset: 0; animation: spin var(--period) linear infinite reverse; }
.ring-inner .upright { animation-direction: normal; }
.upright > span { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); white-space: nowrap; }
.ring-outer .upright > span { padding: .45em .95em; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.72); color: var(--white); font-size: clamp(12px,1.3vw,16px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .25s, color .25s, border-color .25s; }
.ring-outer .body:hover .upright > span, .ring-outer .body:focus-visible .upright > span { background: var(--mint); border-color: var(--mint); color: #000; }
.ring-inner .upright > span { color: var(--mint); font-size: clamp(11px,1.05vw,14px); }
.ring-inner .upright > span::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto 4px; border-radius: 50%; background: var(--mint); }
.core { position: absolute; top: 50%; left: 50%; width: 26%; transform: translate(-50%,-50%); border-radius: 50%; mix-blend-mode: screen; }
.orbit:hover .ring, .orbit:hover .upright, .orbit:focus-within .ring, .orbit:focus-within .upright { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.squiggle { height: 60px; margin: 0 0 clamp(24px,5vh,56px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%20400%2080' preserveAspectRatio='none'%3E%3Cpath d='M0%2040%20Q50%2010%20100%2040%20T200%2040%20T300%2040%20T400%2040' fill='none' stroke='%23ffffff' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 120px 60px; background-position: center; }
section h2 { font-size: clamp(30px,4.5vw,52px); margin-bottom: clamp(28px,5vh,56px); }
.beliefs, .book, .close, .traits, .help, .working { width: min(100%,860px); margin: 0 auto; padding: 0 var(--gutter) clamp(56px,10vh,110px); }
.help-topics, .belief-topics { margin: 32px 0; }
.help h2 { scroll-margin-top: 110px; }
.help-topics article + article, .belief-topics article + article { margin-top: 32px; }
.help-topics h3, .belief-topics h3 { font-size: clamp(22px,2.6vw,30px); margin-bottom: .5em; }
.help-topics p, .belief-topics p { margin: 0; }
.traits { width: min(100%,1000px); }
.traits h2 { max-width: 32ch; margin-left: auto; margin-right: auto; text-align: center; text-transform: none; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.4; letter-spacing: .02em; }
.trait-cloud { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.trait-cloud text { fill: var(--sand); font-size: 60px; }
.trait-cloud g:nth-of-type(3n + 1) text { fill: var(--mint); }
.trait-cloud g:nth-of-type(3n + 2) text { fill: var(--white); }
.belief { scroll-margin-top: 110px; }
.belief-topics p + p { margin-top: .9em; }
.book, .traits { scroll-margin-top: 80px; }
.how p { margin: 0 0 .8em; }
.how p:first-child { font-size: 1.3em; color: var(--white); }
.notice { margin: 1.5em 0 0; padding: 12px 16px; border-left: 3px solid var(--mint); background: rgba(127,176,105,.08); }
.book { scroll-margin-top: 110px; }
.ladder { display: grid; gap: 28px; margin-top: clamp(28px,5vh,48px); }
.slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(8px,2vw,16px); }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: clamp(116px,18vw,150px); padding: 16px 8px; border-radius: 18px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.03); color: var(--white); text-align: center; text-decoration: none; transition: transform .25s var(--ease), background .25s, filter .2s, border-color .25s; }
.slot .price { font-size: clamp(30px,5.5vw,46px); letter-spacing: .02em; line-height: 1; }
.slot .what { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
a.slot .what, .slot.booked .what, .slot.closed .what { font-size: clamp(15px,2.5vw,20px); letter-spacing: .08em; }
a.slot { background: var(--white); color: #000; border-color: var(--white); }
a.slot:hover { transform: translateY(-3px); filter: brightness(.94); }
.slot[aria-disabled="true"] { color: var(--sand-dim); border-style: dashed; border-color: var(--line); }
.slot[aria-disabled="true"] .price { text-decoration: line-through; text-decoration-thickness: 2px; }
.slot.held .what { color: var(--mint); }
.slot.preview { cursor: default; }
@keyframes arrive { from { opacity: 0; transform: translateY(20px); } }
.tally { margin-top: 1.4em; font-size: .85em; color: var(--sand-dim); }
.values { font-size: clamp(22px,3vw,32px); line-height: 1.45; color: var(--white); }
.sig { letter-spacing: .06em; color: var(--sand); padding-bottom: env(safe-area-inset-bottom); }
.motion-ready [data-fade] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.motion-ready [data-fade].in { opacity: 1; transform: none; }
@media (max-width: 750px) {
  .wordmark { font-size: 24px; line-height: 30px; }
  .hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding-top: 8px; }
  .orbit { width: min(85%,440px); order: -1; }
  .ring-outer .upright > span { font-size: 12px; padding: .4em .75em; }

  .slot { border-radius: 14px; }
}
@media (max-width: 420px) {
  .orbit { --outer: 34cqi; }
  .ring-outer .upright > span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  a.slot:hover { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready [data-fade] { opacity: 1; transform: none; }
  .hero::before { background: none; }
  .core { visibility: hidden; }
}