/* Immersive Health — site styles, built to the Belleza 04 brief.
   Palette: clay, ember and glow. Red-orange lives on the mark and decoration;
   text stays clay ink (day) or warm white (evening). Oxblood, never black. */

:root {
  /* brief palette */
  --cream: #FFF4EA; --sand: #FBE6D2; --clay-ink: #3A1410; --ember: #B8321F;
  --red-orange: #D9482B; --glow-orange: #F0702E; --oxblood: #2A0E0B; --warm-white: #FFE9D6;
  --amber: #FF9A55; --core-cream: #FFE3B5; --dusty-pink: #F4A0B8; --muted-clay: #7A4A40;

  /* Day (primary light) */
  --bg: #EACBAC;                 --bg-rgb: 234, 203, 172;   /* warm tan: between cream and terracotta */
  --alt: #E2BD9A;
  --card: rgba(255, 244, 234, .45);
  --text: var(--clay-ink);
  --text-2: var(--muted-clay);
  --accent-text: var(--ember);
  --deco: var(--red-orange);
  --btn-bg: var(--ember);   --btn-ink: var(--cream);
  --btn-hover: var(--clay-ink);
  --rule: rgba(58, 20, 16, .14);
  --rule-2: rgba(58, 20, 16, .32);
  --chip-on: var(--ember); --chip-on-ink: var(--cream);
  --hover-wash: rgba(58, 20, 16, .07);

  /* field + studies */
  --line-rgb: 58, 20, 16;      --line-alpha: .12;
  --accent-rgb: 217, 72, 43;   --accent-alpha: .42;
  --glow-rgb: 255, 227, 181;
  --tile-rgb: 226, 189, 154;
  --field-line-w: 1;

  /* sense auras: soft light, decoration only */
  --aura-sound: 255, 154, 85;   /* amber */
  --aura-light: 255, 205, 112;  /* gold */
  --aura-touch: 244, 160, 184;  /* dusty pink */
  --aura-scent: 255, 181, 138;  /* peach */
  --aura-taste: 240, 112, 46;   /* ember glow */
  --aura-space: 255, 227, 181;  /* core cream */

  /* the aura glow, used softly across the site */
  --glow-tl: radial-gradient(620px 440px at 0% 0%, rgba(255, 227, 181, .62) 0%, rgba(255, 154, 85, .14) 45%, rgba(255, 154, 85, 0) 72%);
  --glow-br: radial-gradient(680px 480px at 100% 100%, rgba(255, 227, 181, .5) 0%, rgba(240, 112, 46, .1) 45%, rgba(240, 112, 46, 0) 72%);
  --glow-tr: radial-gradient(560px 420px at 100% 0%, rgba(255, 227, 181, .55) 0%, rgba(255, 154, 85, .12) 45%, rgba(255, 154, 85, 0) 72%);
  --glow-card: radial-gradient(380px 280px at 0% 0%, rgba(255, 227, 181, .8) 0%, rgba(255, 154, 85, .2) 45%, rgba(255, 154, 85, 0) 72%);

  --display: "Belleza", "Gill Sans", Optima, "Trebuchet MS", sans-serif;
  --sans: "Josefin Sans", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --gutter: clamp(16px, 4vw, 52px);
  color-scheme: light;
}

/* Evening — a warm terracotta, lighter than oxblood. Chosen in Sensory settings
   only; it uses its own attribute so a host page theme can never switch it on.
   Contrast (WCAG): clay ink on #D77A57 ≈ 5.5:1; cream on clay-ink buttons ≫ 7:1. */
:root[data-ih="evening"] {
  --bg: #D77A57;             --bg-rgb: 215, 122, 87;
  --alt: #E08D69;
  --card: rgba(255, 244, 234, .22);
  --text: var(--clay-ink);
  --text-2: #4A1B12;
  --accent-text: #4A0F05;
  --deco: var(--core-cream);
  --btn-bg: var(--clay-ink);  --btn-ink: var(--cream);
  --btn-hover: var(--oxblood);
  --rule: rgba(58, 20, 16, .2);
  --rule-2: rgba(58, 20, 16, .42);
  --chip-on: var(--clay-ink); --chip-on-ink: var(--cream);
  --hover-wash: rgba(58, 20, 16, .1);
  --line-rgb: 58, 20, 16;      --line-alpha: .14;
  --accent-rgb: 255, 227, 181; --accent-alpha: .75;
  --tile-rgb: 224, 141, 105;
}
:root[data-contrast="high"] { --text-2: #55291F; --rule: rgba(58, 20, 16, .36); --rule-2: rgba(58, 20, 16, .72); --line-alpha: .28; --accent-alpha: .8; --field-line-w: 1.4; }
:root[data-ih="evening"][data-contrast="high"] { --text-2: #3A1410; --rule: rgba(58, 20, 16, .45); --rule-2: rgba(58, 20, 16, .8); --line-alpha: .3; --accent-alpha: .9; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
:root[data-motion="still"] { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 19px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--deco); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--dusty-pink); color: var(--clay-ink); }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
sup { font-size: .5em; letter-spacing: 0; vertical-align: super; line-height: 0; }
em { font-style: italic; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 80; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* labels: Josefin 500, 13px, caps, +0.2em */
.label { font: 500 13px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.lede { color: var(--text-2); max-width: 58ch; margin-top: 16px; }
.fine { font-size: 15px; color: var(--text-2); }
.btn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 18px 26px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.btn.primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn.primary:hover { background: var(--btn-hover); color: var(--bg); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.moment, .book-link { display: inline-flex; gap: 10px; align-items: center; font: 500 13px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--deco); background: none; cursor: pointer; }
.moment:hover, .book-link:hover { color: var(--text); }
.chev { display: inline-block; font-size: 11px; transition: transform .3s ease; }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

/* ------------------------------------------------------ header + directory */
.bar { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: rgba(var(--bg-rgb), .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.bar-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 72px; }
.wordmark { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; font-size: 16px; text-decoration: none; color: var(--text); white-space: nowrap; }
.bar-actions { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; padding: 12px 18px 10px; cursor: pointer; }
.menu-btn:hover { background: var(--text); color: var(--bg); }
.chip { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; padding: 12px 16px 10px; cursor: pointer; }
.chip:hover, .chip[aria-expanded="true"] { background: var(--text); color: var(--bg); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--deco); flex: none; margin-top: -2px; }
.chip .caret { letter-spacing: 0; font-size: 11px; margin-top: -2px; }
.chip .short, .book-top .short { display: none; }
.chip:disabled { opacity: .35; cursor: default; background: transparent; color: var(--text); }
.book-top { padding: 14px 20px 12px; }

.gnav { justify-self: center; }
.gn-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.gn { position: relative; }
.gn-btn { position: relative; white-space: nowrap; font: 500 15.5px/1 var(--sans); color: var(--text); background: none; border: 0; padding: 14px 14px 12px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; border-radius: 999px; }
.gn-btn:hover, .gn-btn[aria-expanded="true"] { background: var(--hover-wash); }
.gn.is-here .gn-btn::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--deco); border-radius: 2px; }
.gn-panel { position: absolute; left: 0; top: calc(100% + 8px); width: min(390px, 90vw); z-index: 60; background: var(--bg); border: 1px solid var(--rule); border-radius: 22px; box-shadow: 0 24px 60px rgba(58, 20, 16, .16); padding: 10px; background-image: var(--glow-card); }
.gn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.gn:nth-last-child(-n+2) .gn-panel { left: auto; right: 0; }
.gn-over { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; text-decoration: none; background: var(--alt); }
.gn-over b { font: 400 22px/1.15 var(--display); }
.gn-over span { color: var(--text-2); font-size: 15px; }
.gn-over i { font-style: normal; color: var(--accent-text); }
.gn-panel ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.gn-panel li a, .mm-body li a { display: grid; gap: 1px; padding: 10px 16px; border-radius: 12px; text-decoration: none; }
.gn-panel li a:hover { background: var(--alt); }
.gn-panel li b, .mm-body li b { font: 500 16px/1.3 var(--sans); }
.gn-panel li span, .mm-body li span { font-size: 14.5px; line-height: 1.4; color: var(--text-2); }

.dd { position: relative; }
.dd-panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 50; width: min(390px, calc(100vw - 32px)); display: grid; gap: 16px; background: var(--bg); border: 1px solid var(--rule); border-radius: 24px; padding: 22px; box-shadow: 0 24px 60px rgba(58, 20, 16, .16); }
.panel-lede { font: 400 24px/1.25 var(--display); }
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seg legend { font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; padding: 0; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-block; padding: 10px 16px 8px; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 16px; }
.seg input:checked + span { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.seg input:focus-visible + span { outline: 2px solid var(--deco); outline-offset: 2px; }

.menu { position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)); }
.menu-in { display: grid; gap: 24px; max-width: 720px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.menu .menu-btn { display: inline-flex; }
.mm { display: grid; }
.mm-group { border-top: 1px solid var(--rule); }
.mm-group:last-child { border-bottom: 1px solid var(--rule); }
.mm-head { width: 100%; display: flex; justify-content: space-between; align-items: center; font: 400 clamp(1.9rem, 6vw, 2.6rem)/1.15 var(--display); color: var(--text); background: none; border: 0; padding: 16px 0; cursor: pointer; text-align: left; }
.mm-head .chev { font-size: 14px; }
.mm-body { padding: 0 0 16px; }
.mm-over { display: inline-flex; gap: 8px; font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; padding: 4px 0 12px; }
.mm-body ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mm-body li a { padding: 10px 0; border-top: 1px solid var(--rule); border-radius: 0; }
.menu-side { display: grid; gap: 18px; justify-items: start; background: var(--alt); border-radius: 26px; padding: 24px; background-image: var(--glow-card); }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--glow-tr), var(--bg); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 4vw, 60px); }
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 5.8rem); line-height: 1.06; margin-top: 20px; max-width: 13ch; }
.blank-wrap { display: inline-grid; vertical-align: baseline; }
.who-wrap { display: grid; justify-items: start; }
/* Out first, then in: the two words never overlap mid-change. */
.blank, .who-w { grid-area: 1 / 1; color: var(--accent-text); border-bottom: 2px solid var(--deco); padding: 0 .06em; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; }
.blank.on, .who-w.on { opacity: 1; visibility: visible; transition: opacity .4s ease .3s, visibility 0s linear .3s; }
:root[data-motion="still"] .blank, :root[data-motion="still"] .who-w { transition: none; }
.hero-copy { margin-top: 22px; max-width: 34ch; color: var(--text-2); min-height: 6.4em; }
.picks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.picks button, .who-picks button { font: 400 17px/1 var(--sans); color: var(--text); background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; padding: 13px 20px 11px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.picks button:hover, .who-picks button:hover { border-color: var(--deco); }
.picks button[aria-checked="true"], .who-picks button[aria-checked="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.hero .moment { margin-top: 28px; }
.aperture { display: grid; place-items: center; }
.mark { display: block; width: min(100%, 520px); aspect-ratio: 1 / 1; }
.mark img { display: block; width: 100%; height: auto; }
.mark-d { display: none; }
:root[data-motion="full"] .mark { animation: breathe 10s ease-in-out infinite; }
:root[data-motion="calm"] .mark { animation: breathe 16s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.02); } }

/* --------------------------------------------------------------- pause */
.pause { position: relative; overflow: hidden; background: var(--alt); padding-block: clamp(48px, 6vw, 84px); }
canvas.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pause::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--alt) 0%, rgba(226, 189, 154, .78) 38%, rgba(226, 189, 154, 0) 70%); }
:root[data-ih="evening"] .pause::before { background: linear-gradient(90deg, #E08D69 0%, rgba(224, 141, 105, .8) 38%, rgba(224, 141, 105, 0) 70%); }
.pause-in { position: relative; z-index: 2; pointer-events: none; }
.pause-in button, .pause-in a { pointer-events: auto; }
.pause-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; max-width: 920px; }
.pause h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.05; margin-top: 14px; max-width: 16ch; }
.prompt { margin-top: 20px; font-size: clamp(20px, 2vw, 24px); line-height: 1.5; max-width: 38ch; min-height: 4.6em; }
.senses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 920px; margin-top: 10px; }
.senses button { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 22px; padding: 20px 20px 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.senses button:hover { border-color: var(--deco); }
.senses button .aura-dot { position: absolute; top: 24px; right: 20px; margin: 0; }
.senses button[aria-checked="true"] { border-color: var(--deco); box-shadow: inset 0 0 0 1px var(--deco), 0 0 0 1px var(--deco), 0 10px 40px rgba(var(--a), .55); }
.senses b { display: block; font: 400 24px/1.2 var(--display); }
.senses span { display: block; margin-top: 6px; font-size: 16px; color: var(--text-2); }
.pause-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.pause .link-btn { font-size: 17px; }
.pause-foot .skip-moment { margin-left: auto; }
.skip-moment { display: inline-flex; gap: 8px; align-items: center; font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); text-decoration: none; border: 1px solid var(--rule-2); border-radius: 999px; padding: 11px 16px 9px; background: rgba(var(--bg-rgb), .7); }
.skip-moment:hover { background: var(--text); color: var(--bg); }
.pause-aura { position: absolute; z-index: 0; pointer-events: none; width: min(70vw, 760px); aspect-ratio: 1; right: -8vw; top: 50%; transform: translateY(-50%); border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(var(--a, var(--aura-space)), .75) 0%, rgba(var(--a, var(--aura-space)), .28) 40%, rgba(var(--a, var(--aura-space)), 0) 70%); filter: blur(10px); transition: opacity 1.2s ease; }
.pause.has-sense .pause-aura { opacity: 1; }
:root[data-motion="still"] .pause-aura { transition: none; }

/* ------------------------------------------------- the question, for everyone */
.question { background: var(--glow-tl), var(--bg); padding-block: clamp(44px, 6vw, 80px); }
.q-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.question h2 { margin-top: 14px; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.06; max-width: 19ch; }
.q-lede { margin-top: 20px; font-size: clamp(20px, 2vw, 24px); line-height: 1.5; max-width: 40ch; }
.q-who { position: relative; overflow: hidden; isolation: isolate; background: var(--alt); border-radius: 30px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; }
.q-who::before { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; right: -170px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--aura-light), .9) 0%, rgba(var(--aura-sound), .3) 42%, rgba(var(--aura-sound), 0) 70%); filter: blur(8px); }
:root[data-motion="full"] .q-who::before { animation: aura 10s ease-in-out infinite; }
.who-line { font: 400 clamp(1.7rem, 2.8vw, 2.4rem)/1.2 var(--display); min-height: 2.5em; }
.who-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.who-picks button { font-size: 16px; padding: 11px 16px 9px; }
.who-card { background: var(--bg); border-radius: 22px; padding: 20px 22px; display: grid; gap: 14px; align-content: start; min-height: 196px; }
.who-scene { color: var(--text); }
.who-ask { display: flex; gap: 12px; align-items: flex-start; font: 400 21px/1.35 var(--display); color: var(--accent-text); }
.who-ask .aura-dot { margin-top: 7px; }
.who-own { display: flex; gap: 8px; }
.who-own input { flex: 1; min-width: 0; font: 400 17px/1.4 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 999px; padding: 11px 18px 9px; }
.who-own input::placeholder { color: var(--text-2); opacity: .8; }
.who-own button { font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--btn-ink); background: var(--btn-bg); border: 0; border-radius: 999px; padding: 0 20px; cursor: pointer; }
.who-own button:hover { background: var(--btn-hover); }

/* ------------------------------------------------- ways to work with us */
.work { background: var(--glow-br), var(--glow-tl), var(--alt); padding-block: clamp(48px, 6vw, 88px); }
.sect-head { max-width: 820px; }
.sect-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.06; margin-top: 14px; }
.ways { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.door-in { height: 100%; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 10px; color: var(--warm-white); background: var(--oxblood); border: 1px solid rgba(255, 233, 214, .14); border-radius: 30px; padding: 16px 16px 24px; transition: box-shadow .3s ease, border-color .3s; }
.door-in > :not(.door-art) { margin-inline: 12px; }
.door.is-open .door-in { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 24px 60px rgba(58, 20, 16, .28); }
.door-art { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; background: #200907; margin-bottom: 8px; overflow: hidden; }
.door-k { font: 500 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.door-t { font: 400 clamp(1.7rem, 2.6vw, 2.3rem)/1.08 var(--display); }
.w-d { color: #E6C7B4; font-size: 18px; line-height: 1.55; }
.door-for { color: var(--warm-white); font-size: 16px; line-height: 1.5; align-self: start; }
.door-for b { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-right: 8px; }
.door-cta { justify-self: start; align-self: end; display: inline-flex; gap: 10px; align-items: center; font: 600 17px/1.2 var(--sans); color: var(--warm-white); text-decoration: none; background: none; border: 0; padding: 4px 0; margin-top: 4px; cursor: pointer; }
.door-cta:hover { color: var(--amber); }
.door-cta .chev { font-size: 12px; }

.path { margin-top: clamp(28px, 4vw, 44px); }
.path:not([hidden]) { animation: drop .45s ease both; }
:root[data-motion="still"] .path:not([hidden]) { animation: none; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.path-head { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 12px 32px; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--rule-2); }
.path-head h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; }
.path-head p { color: var(--text-2); max-width: 62ch; }
.path-head p b { color: var(--text); font-weight: 600; }
.offers { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.offers li, .digital-body { background: var(--bg); border: 1px solid var(--rule); border-radius: 26px; padding: 26px; display: grid; gap: 10px; align-content: start; background-image: var(--glow-card); }
.offers h4 { margin: 0; font: 400 28px/1.15 var(--display); }
.offers p, .digital-body p { color: var(--text-2); }
.offers .book-link { align-self: end; justify-self: start; margin-top: 6px; }
.digital-body { margin-top: 20px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; }
.digital-body b { color: var(--text); font-weight: 600; }
.digital-links { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.tags-row { margin-top: 24px; }
.tags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { border: 1px solid var(--rule-2); border-radius: 999px; padding: 9px 16px 7px; font-size: 16px; }

/* ------------------------------------------------- inner pages */
.page-hero { background: var(--glow-tr), var(--bg); padding-block: clamp(44px, 6vw, 84px) clamp(28px, 4vw, 48px); }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.04; margin-top: 14px; max-width: 17ch; }
.page-hero .lede { font-size: clamp(19px, 1.8vw, 22px); max-width: 54ch; margin-top: 20px; }
.page-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.page-links a { display: inline-flex; gap: 8px; font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--text); border: 1px solid var(--rule-2); border-radius: 999px; padding: 12px 18px 10px; }
.page-links a:hover { background: var(--text); color: var(--bg); }
.sec { padding-block: clamp(44px, 6vw, 80px); }
.sec.alt { background: var(--alt); }
.sec.glow-l { background: var(--glow-tl), var(--bg); }
.sec.glow-r { background: var(--glow-br), var(--bg); }
.sec.alt.glow { background: var(--glow-br), var(--glow-tl), var(--alt); }

/* how we work */
.levels-head { max-width: 760px; display: grid; gap: 12px; }
.levels-head h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.06; }
.levels-head p:not(.label) { color: var(--text-2); }
.levels { list-style: none; margin: clamp(24px, 3.5vw, 36px) 0 0; padding: 0; display: grid; gap: 12px; }
.level { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 32px; align-items: center; border: 1px solid var(--rule); border-radius: 26px; padding: 26px 28px; background: var(--bg); }
.level:nth-child(2) { background: var(--card); }
.level:nth-child(3) { background: var(--alt); }
.lv-k { display: grid; gap: 6px; }
.lv-k h3 { margin: 0; font: 400 clamp(1.9rem, 3vw, 2.5rem)/1 var(--display); }
.lv-t { font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--display); }
.lv-d { display: grid; gap: 12px; justify-items: start; }
.lv-d p { color: var(--text-2); font-size: 17px; }
.principles ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.principles li { border-top: 1px solid var(--rule-2); padding-top: 16px; }
.principles h3 { font-size: 23px; line-height: 1.2; }
.principles p { margin-top: 8px; color: var(--text-2); font-size: 17px; }
.next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* what we mean */
.conn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 5vw, 64px); }
.conn { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.conn:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.conn:nth-child(even) .conn-art { order: 2; }
canvas.study { display: block; width: 100%; aspect-ratio: 5 / 4; border-radius: 28px; background: var(--alt); }
.conn-text { display: grid; gap: 12px; justify-items: start; }
.conn-text h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.06; }
.conn-text p:not(.label) { color: var(--text-2); font-size: clamp(18px, 1.6vw, 20px); max-width: 44ch; }

/* science */
.capsule { display: grid; gap: 18px; }
.cap-cue { display: inline-flex; align-items: center; gap: 12px; font: 500 13px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.cue-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--deco); box-shadow: 0 0 0 6px rgba(217, 72, 43, .15); }
:root[data-motion="full"] .cue-dot { animation: aura 3s ease-in-out infinite; }
.cap-track-wrap { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.cap-track-wrap::-webkit-scrollbar { display: none; }
.cap-track { position: relative; display: flex; gap: 8px; min-width: max-content; padding: 18px 0 4px; }
.cap-track::before { content: ""; position: absolute; left: 12px; right: 12px; top: 36px; height: 1px; background: var(--rule-2); }
.cap-tab { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; min-width: 104px; padding: 8px 6px 10px; background: none; border: 0; cursor: pointer; color: var(--text-2); font: inherit; border-radius: 16px; }
.cap-tab .pod { width: 30px; height: 18px; border-radius: 999px; background: var(--bg); border: 2px solid var(--deco); transition: background .3s, transform .3s; }
.cap-tab .yr-s { font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.cap-tab:hover .pod { transform: scale(1.15); }
.cap-tab[aria-selected="true"] { color: var(--text); }
.cap-tab[aria-selected="true"] .pod { background: var(--deco); transform: scale(1.25); box-shadow: 0 0 18px 4px rgba(var(--aura-sound), .55); }
.cap-tab:focus-visible { outline-offset: -2px; }
.cap-panel { outline: none; }
.cap-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); background: var(--alt); border-radius: 30px; padding: clamp(24px, 4vw, 48px); position: relative; overflow: hidden; isolation: isolate; }
.cap-card::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; left: -180px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--aura-space), .9) 0%, rgba(var(--aura-sound), .25) 45%, rgba(var(--aura-sound), 0) 70%); filter: blur(10px); }
.cap-era { display: block; }
.cap-year { margin: 10px 0 0; font: 400 clamp(2.6rem, 6vw, 5rem)/1 var(--display); color: var(--accent-text); }
.cap-ago { margin-top: 10px; font-size: 16px; color: var(--text-2); }
.cap-card h4 { margin: 24px 0 0; font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.12 var(--display); }
.cap-story p { margin-top: 14px; color: var(--text-2); max-width: 58ch; }
.cap-story i { font-style: italic; }
.cap-senses { background: var(--bg); border-radius: 24px; padding: 22px 24px; align-self: start; display: grid; gap: 4px; }
.cap-senses ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.cap-senses li { display: grid; grid-template-columns: 22px 82px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.cap-senses li:first-child { border-top: 0; }
.cap-senses b { font: 400 20px/1.2 var(--display); }
.cap-senses span { color: var(--text-2); font-size: 16px; line-height: 1.45; }
.cap-nav { display: flex; gap: 10px; }
:root[data-motion="full"] .cap-card.opening, :root[data-motion="calm"] .cap-card.opening { animation: open-capsule .75s cubic-bezier(.2, .7, .2, 1); }
:root[data-motion="full"] .cap-card.opening .cap-senses li, :root[data-motion="calm"] .cap-card.opening .cap-senses li { animation: rise .6s ease both; }
.cap-card.opening .cap-senses li:nth-child(2) { animation-delay: .08s; } .cap-card.opening .cap-senses li:nth-child(3) { animation-delay: .16s; }
.cap-card.opening .cap-senses li:nth-child(4) { animation-delay: .24s; } .cap-card.opening .cap-senses li:nth-child(5) { animation-delay: .32s; }
@keyframes open-capsule { from { transform: scaleY(.94); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.span { margin: clamp(28px, 4vw, 44px) 0 0; padding: clamp(22px, 3vw, 32px); background: var(--alt); border-radius: 28px; display: grid; gap: 20px; background-image: var(--glow-card); }
.span figcaption { color: var(--text-2); max-width: 70ch; }
.span figcaption .label { display: block; margin-bottom: 8px; }
.span-rows { display: grid; gap: 14px; }
.span-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(130px, auto); gap: 16px; align-items: center; }
.span-k { font-size: 17px; }
.span-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(58, 20, 16, .1); overflow: hidden; }
:root[data-ih="evening"] .span-bar { background: rgba(58, 20, 16, .14); }
.span-bar i { position: absolute; right: 0; top: 0; bottom: 0; min-width: 3px; background: var(--deco); border-radius: 0 999px 999px 0; }
.span-v { font-size: 15px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.span-note { font-size: 16px; color: var(--text-2); }

.sense-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sense-tab { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 10px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; font: inherit; color: var(--text); cursor: pointer; transition: border-color .2s, box-shadow .3s, background .2s; }
.sense-tab:hover { border-color: var(--deco); }
.sense-tab .sn { font: 400 22px/1 var(--display); }
.sense-tab .ss { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.sense-tab[aria-selected="true"] { background: var(--alt); border-color: var(--deco); box-shadow: 0 8px 30px rgba(var(--a), .55); }
.sense-card { position: relative; overflow: hidden; isolation: isolate; margin-top: 16px; background: var(--alt); border-radius: 30px; padding: clamp(26px, 4vw, 50px); outline: none; }
.sense-card::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: -170px; top: -270px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--a), .95) 0%, rgba(var(--a), .35) 40%, rgba(var(--a), 0) 70%); filter: blur(10px); }
.sense-card:not([hidden]) { animation: drop .45s ease both; }
:root[data-motion="still"] .sense-card:not([hidden]) { animation: none; }
.sc-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sc-head h3 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }
.sc-sub { font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.sc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: 26px; }
.sc-cols > div { border-top: 1px solid var(--rule-2); padding-top: 16px; }
.sc-k { font: 500 13px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.sc-cols p:not(.sc-k) { color: var(--text-2); font-size: 18px; line-height: 1.6; }
.sc-cite { margin-top: 24px; font-size: 15px; color: var(--text-2); }
.refs { border-top: 1px solid var(--rule); padding-top: 18px; }
.refs summary { cursor: pointer; font: 500 13px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.refs ol { margin: 18px 0 14px; padding-left: 1.4em; display: grid; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 90ch; }

/* ------------------------------------------------------------- booking */
.close { background: var(--glow-tl), var(--glow-br), var(--bg); padding-block: clamp(56px, 7vw, 100px); text-align: center; }
.close-in { display: grid; justify-items: center; }
.close h2 { font-size: clamp(2.8rem, 7.4vw, 6.4rem); line-height: 1.02; }
.close .lede { margin-top: 20px; }
.book-form { width: 100%; max-width: 780px; margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 20px; text-align: left; background: var(--alt); border: 1px solid var(--rule); border-radius: 28px; padding: clamp(22px, 4vw, 40px); background-image: var(--glow-card); }
.topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.topics legend, .fl { font: 500 13px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); padding: 0; margin-bottom: 12px; }
.fl i { font-style: normal; letter-spacing: .1em; color: var(--text-2); text-transform: none; }
.topics label { position: relative; cursor: pointer; }
.topics input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topics span { display: inline-block; padding: 11px 16px 9px; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 16px; }
.topics input:checked + span { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.topics input:focus-visible + span { outline: 2px solid var(--deco); outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fld { display: grid; }
.fld .fl { margin-bottom: 8px; }
.fld input, .fld textarea { font: 400 18px/1.5 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 14px; padding: 13px 16px 11px; width: 100%; }
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--deco); outline-offset: 1px; border-color: transparent; }
.fld input::placeholder { color: var(--text-2); opacity: .75; }
.err { min-height: 1.4em; margin: -8px 0 0; color: var(--accent-text); font-size: 16px; }
.err:empty { min-height: 0; margin: 0; }
.form-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.book-form .btn { border: 0; cursor: pointer; }
.book-float { position: fixed; z-index: 35; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); box-shadow: 0 16px 40px rgba(58, 20, 16, .28); display: none; transition: transform .3s ease; white-space: nowrap; }
.book-float.show { transform: translate(-50%, 0); }
:root[data-motion="still"] .book-float { transition: none; }

/* -------------------------------------------------------------- footer */
.foot { padding-block: 48px calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); }
.foot-in { display: grid; gap: 20px; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.flat { display: inline-block; width: 40px; height: 40px; flex: none; }
.flat svg { display: block; width: 100%; height: 100%; }
.wordmark.static { white-space: normal; }
.foot-note { color: var(--text-2); max-width: 64ch; font-size: 17px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 17px; }
.foot-links a { text-underline-offset: 4px; }
.foot .link-btn { font-size: 17px; }

/* ------------------------------------------------------------- auras */
[data-sense="sound"] { --a: var(--aura-sound); }
[data-sense="light"], [data-sense="sight"] { --a: var(--aura-light); }
[data-sense="touch"] { --a: var(--aura-touch); }
[data-sense="scent"] { --a: var(--aura-scent); }
[data-sense="taste"] { --a: var(--aura-taste); }
[data-sense="space"] { --a: var(--aura-space); }
.aura-dot { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--a, var(--aura-sound)), 1) 0%, rgba(var(--a, var(--aura-sound)), .55) 48%, rgba(var(--a, var(--aura-sound)), 0) 74%); box-shadow: 0 0 14px 4px rgba(var(--a, var(--aura-sound)), .5); }
:root[data-motion="full"] .aura-dot { animation: aura 10s ease-in-out infinite; }
@keyframes aura { 0%, 100% { opacity: .75; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }

.portal-fly { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; pointer-events: none; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1499px) {
  .chip .long, .book-top .long { display: none; }
  .chip .short, .book-top .short { display: inline; }
}
@media (max-width: 1179px) {
  .gnav { display: none; }
  .menu-btn { display: inline-flex; }
  .bar-in { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 1080px) {
  .q-in { grid-template-columns: minmax(0, 1fr); }
  .level { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
  .lv-d { grid-column: 2; }
  .principles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways .door:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cap-card { grid-template-columns: minmax(0, 1fr); }
  .sc-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 860px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .aperture { order: -1; }
  .mark { width: min(64vw, 340px); }
  .path-head, .conn, .conn:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .conn:nth-child(even) .conn-art { order: 0; }
  .digital-body, .offers { grid-template-columns: minmax(0, 1fr); }
  .senses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .level { grid-template-columns: minmax(0, 1fr); }
  .lv-d { grid-column: auto; }
  .span-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .span-bar { grid-column: 1 / -1; grid-row: 2; }
  .book-top { display: none; }
  .book-float { display: inline-flex; }
  .chip, .menu-btn { padding: 11px 13px 9px; letter-spacing: .14em; }
  .dd { position: static; }
  .dd-panel { position: fixed; left: 16px; right: 16px; width: auto; top: calc(80px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 110px); overflow-y: auto; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .pause-foot .skip-moment { margin-left: 0; }
}
@media (max-width: 620px) {
  .pause::before { background: rgba(226, 189, 154, .72); }
  :root[data-ih="evening"] .pause::before { background: rgba(224, 141, 105, .75); }
  .principles ul { grid-template-columns: minmax(0, 1fr); }
  .wordmark { font-size: 13px; letter-spacing: .14em; }
  .hero-copy { min-height: 8em; }
  .cap-senses li { grid-template-columns: 22px minmax(0, 1fr); }
  .cap-senses span { grid-column: 2; }
}
@media (max-width: 440px) {
  .wordmark { font-size: 12px; letter-spacing: .1em; }
  .bar-actions { gap: 6px; }
  .chip .dot { display: none; }
  .chip, .menu-btn { padding: 10px 11px 8px; letter-spacing: .1em; font-size: 12px; }
  .senses button { padding: 16px 14px 14px; }
}
@media (max-width: 350px) {
  .wordmark sup { display: none; }
  .chip .caret { display: none; }
}

/* ---------------------------------------- hero shortcuts + the studio door */
.shortcut { margin-top: 20px; max-width: 520px; display: grid; gap: 10px; animation: drop .45s ease both; }
:root[data-motion="still"] .shortcut { animation: none; }
.sc-studio { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; text-decoration: none; color: var(--warm-white); background: var(--oxblood); border-radius: 26px; padding: 14px 22px 14px 14px; box-shadow: 0 18px 50px rgba(58, 20, 16, .28); }
.sc-studio::before { content: ""; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 154, 85, .55) 0%, rgba(255, 154, 85, 0) 70%); }
:root[data-motion="full"] .sc-studio::before { animation: aura 6s ease-in-out infinite; }
.sc-orb { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #FFE3B5 0%, #FF9A55 24%, #D9482B 52%, #7A2016 76%, #2A0E0B 100%); box-shadow: 0 0 28px 6px rgba(255, 154, 85, .5); }
:root[data-motion="full"] .sc-orb { animation: aura 6s ease-in-out infinite; }
.sc-copy { display: grid; gap: 2px; }
.sc-copy b { font: 400 clamp(1.4rem, 2.2vw, 1.8rem)/1.1 var(--display); }
.sc-copy span { font-size: 16px; line-height: 1.45; color: #E6C7B4; }
.sc-go { font-size: 26px; color: var(--amber); transition: transform .3s ease; }
.sc-studio:hover .sc-go { transform: translateX(5px); }
.sc-more { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sc-more a { font: 500 13px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--deco); padding-bottom: 5px; }
.sc-more a:hover { color: var(--text); }
.pause-go { font: 500 13px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--btn-ink); background: var(--btn-bg); text-decoration: none; border-radius: 999px; padding: 14px 20px 12px; }
.pause-go:hover { background: var(--btn-hover); }

.door-studio .door-in { background: radial-gradient(120% 70% at 50% 0%, #4A1810 0%, var(--oxblood) 62%); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 26px 80px rgba(217, 72, 43, .38); }
:root[data-motion="full"] .door-studio .door-in { animation: glow-pulse 5s ease-in-out infinite; }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--amber), 0 22px 60px rgba(217, 72, 43, .28); } 50% { box-shadow: 0 0 0 1px var(--amber), 0 28px 100px rgba(255, 154, 85, .55); } }
.door-studio { transform: translateY(-10px); }
.start-tag { justify-self: start; margin-inline: 12px; font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood); background: var(--amber); border-radius: 999px; padding: 8px 14px 6px; }
.door-cta.big { font: 600 18px/1.2 var(--sans); color: var(--oxblood); background: var(--amber); border-radius: 999px; padding: 16px 26px 14px; transition: background .2s, transform .2s; }
.door-cta.big:hover { background: var(--warm-white); color: var(--oxblood); }
:root[data-motion="full"] .door-cta.big .chev, :root[data-motion="full"] .door-cta.big span { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* digital panel */
.dg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; }
.dg-col { background: var(--bg); border: 1px solid var(--rule); border-radius: 26px; padding: 26px; display: grid; gap: 12px; align-content: start; background-image: var(--glow-card); }
.dg-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.dg-list a { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.dg-list li:first-child a { border-top: 0; }
.dg-list b { font: 400 22px/1.2 var(--display); }
.dg-list span { color: var(--text-2); font-size: 16px; line-height: 1.45; }
.dg-list a:hover b { color: var(--accent-text); }
.dg-soon h4 { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--display); }
.dg-soon p:not(.label) { color: var(--text-2); }
@media (max-width: 860px) { .dg-grid { grid-template-columns: minmax(0, 1fr); } .door-studio { transform: none; } }

/* evening: a little heavier, for legibility on terracotta */
:root[data-ih="evening"] body { font-weight: 500; }
:root[data-ih="evening"] .lede, :root[data-ih="evening"] .w-d, :root[data-ih="evening"] .fine,
:root[data-ih="evening"] .hero-copy, :root[data-ih="evening"] .cap-story p, :root[data-ih="evening"] .sc-cols p,
:root[data-ih="evening"] .conn-text p, :root[data-ih="evening"] .lv-d p, :root[data-ih="evening"] .dg-list span,
:root[data-ih="evening"] .offers p, :root[data-ih="evening"] .principles p, :root[data-ih="evening"] .gn-panel li span,
:root[data-ih="evening"] .cap-senses span, :root[data-ih="evening"] .span-v, :root[data-ih="evening"] .span-note { font-weight: 500; }
:root[data-ih="evening"] .label, :root[data-ih="evening"] .moment, :root[data-ih="evening"] .book-link { font-weight: 600; }
:root[data-ih="evening"] h1, :root[data-ih="evening"] h2, :root[data-ih="evening"] h3, :root[data-ih="evening"] h4 { text-shadow: 0 0 .5px currentColor, 0 0 .5px currentColor; }

.sect-head + .capsule { margin-top: 28px; }

/* aura dots share one corner and one baseline across every card */
.senses b { padding-right: 34px; }
.sense-tab .aura-dot { margin-top: -2px; }
.cap-senses li .aura-dot { justify-self: center; }
.offer-overview .aura-dot { top: 30px; right: 28px; }
@media (max-width: 440px) { .senses button .aura-dot { top: 20px; right: 14px; } }

/* ------------------------------------------- the directory: larger, bold, caps */
.gn-list { gap: 4px; }
.gn-btn { font: 600 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 16px 14px 14px; gap: 9px; }
.gn-btn .chev { font-size: 11px; }
.gn.is-here .gn-btn::after { left: 14px; right: 23px; bottom: 8px; height: 3px; }
.wordmark { font-size: 17px; }
.gn-panel { width: min(430px, 92vw); padding: 12px; }
.gn-over { padding: 16px 18px; }
.gn-over b { font: 600 17px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.gn-over span { font-size: 16px; }
.gn-panel li a, .mm-body li a { padding: 12px 18px; }
.gn-panel li b, .mm-body li b { font: 600 15px/1.25 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.gn-panel li span, .mm-body li span { font-size: 16px; line-height: 1.4; }
.mm-head { font: 600 clamp(1.15rem, 4.6vw, 1.5rem)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 20px 0; }
.mm-head .chev { font-size: 13px; }
.mm-over { font: 600 13px/1 var(--sans); letter-spacing: .18em; }
.mm-body li a { padding: 12px 0; }
.menu-btn, .chip, .book-top { font-weight: 600; }
.book-top { font-size: 14px; }
@media (max-width: 1279px) { .gnav { display: none; } .menu-btn { display: inline-flex; } .bar-in { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 1499px) and (min-width: 1280px) { .gn-btn { padding-inline: 11px; letter-spacing: .12em; } }

/* bigger still on wide screens; the directory never collides with the actions */
@media (min-width: 1440px) { .gn-btn { font-size: 16.5px; padding-inline: 14px; } .wordmark { font-size: 18px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .gn-btn { font-size: 15.5px; padding-inline: 10px; letter-spacing: .1em; } }
.gn-over b { font-size: 18px; }
.gn-panel li b, .mm-body li b { font-size: 16px; }
.gn-panel li span, .mm-body li span, .gn-over span { font-size: 16.5px; }
.mm-head { font-size: clamp(1.3rem, 5.2vw, 1.7rem); }

/* ---------------- the wide directory panel: every option on show at once */
.gn-panel { display: none; }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 30px 60px rgba(58, 20, 16, .16); background-image: var(--glow-tl), var(--glow-br); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.mega:not([hidden]) { animation: drop .25s ease both; }
:root[data-motion="still"] .mega:not([hidden]) { animation: none; }
.mega-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); padding-block: 26px 30px; }
.mega-col { border-radius: 24px; padding: 8px; transition: background .2s; }
.mega-col.lit { background: var(--alt); }
.mega-over { display: grid; gap: 4px; padding: 14px 16px 16px; text-decoration: none; border-bottom: 1px solid var(--rule-2); margin-bottom: 6px; }
.mega-over b { font: 600 19px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.mega-over span { color: var(--text-2); font-size: 16.5px; }
.mega-over i { font-style: normal; color: var(--accent-text); }
.mega-over:hover b { color: var(--accent-text); }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mega-col li a { display: grid; gap: 1px; padding: 12px 16px; border-radius: 14px; text-decoration: none; }
.mega-col li a:hover { background: var(--hover-wash); }
.mega-col li b { font: 600 16px/1.25 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.mega-col li span { color: var(--text-2); font-size: 16.5px; line-height: 1.4; }
@media (max-width: 1279px) { .mega { display: none; } }

/* ------------- ways to work with us: soft peach cards, the studio one glowing */
.door-in { color: var(--text); background: var(--bg); background-image: var(--glow-card); border: 1px solid var(--rule); box-shadow: 0 10px 40px rgba(217, 72, 43, .08); }
:root[data-ih="evening"] .door-in { background: rgba(255, 244, 234, .34); background-image: var(--glow-card); border-color: rgba(58, 20, 16, .22); }
.door-art { background: var(--alt); }
:root[data-ih="evening"] .door-art { background: rgba(255, 244, 234, .28); }
.door-k { color: var(--accent-text); }
.w-d { color: var(--text-2); }
.door-for { color: var(--text); }
.door-for b { color: var(--accent-text); }
.door-cta { color: var(--accent-text); border-bottom: 1px solid var(--deco); border-radius: 0; padding: 4px 0 6px; }
.door-cta:hover { color: var(--text); }
.door.is-open .door-in { border-color: var(--deco); box-shadow: 0 0 0 1px var(--deco), 0 18px 50px rgba(217, 72, 43, .16); }

.door-studio .door-in { background: linear-gradient(180deg, #FFF3E4 0%, #FFE2BF 100%); background-image: radial-gradient(520px 340px at 50% 0%, rgba(255, 154, 85, .55) 0%, rgba(255, 154, 85, 0) 70%), linear-gradient(180deg, #FFF3E4 0%, #FFE2BF 100%); border: 2px solid var(--amber); box-shadow: 0 0 0 4px rgba(255, 154, 85, .25), 0 26px 70px rgba(240, 112, 46, .32); }
:root[data-ih="evening"] .door-studio .door-in { background-image: radial-gradient(520px 340px at 50% 0%, rgba(255, 227, 181, .7) 0%, rgba(255, 227, 181, 0) 70%), linear-gradient(180deg, rgba(255, 244, 234, .55), rgba(255, 227, 181, .45)); }
:root[data-motion="full"] .door-studio .door-in { animation: glow-pulse 5s ease-in-out infinite; }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 154, 85, .2), 0 22px 60px rgba(240, 112, 46, .26); } 50% { box-shadow: 0 0 0 7px rgba(255, 154, 85, .34), 0 28px 90px rgba(240, 112, 46, .5); } }
.start-tag { background: var(--ember); color: var(--cream); }
:root[data-ih="evening"] .start-tag { background: var(--clay-ink); }
.door-cta.big { background: var(--btn-bg); color: var(--btn-ink); border: 0; border-radius: 999px; padding: 16px 28px 14px; font: 600 18px/1.2 var(--sans); box-shadow: 0 12px 30px rgba(184, 50, 31, .3); }
.door-cta.big:hover { background: var(--btn-hover); color: var(--bg); }

/* the hero's studio shortcut, in the same soft light */
.sc-studio { color: var(--text); background: linear-gradient(180deg, #FFF3E4, #FFE2BF); border: 2px solid var(--amber); box-shadow: 0 0 0 4px rgba(255, 154, 85, .22), 0 18px 50px rgba(240, 112, 46, .3); }
:root[data-ih="evening"] .sc-studio { background: linear-gradient(180deg, rgba(255, 244, 234, .6), rgba(255, 227, 181, .5)); }
.sc-orb { background: radial-gradient(circle at 50% 50%, #FFF4E2 0%, #FFD08A 22%, #FF9A55 46%, #F0702E 70%, #D9482B 100%); }
.sc-copy span { color: var(--text-2); }
.sc-go { color: var(--ember); }

/* day on tan: cards and panels sit a shade lighter than the page, so they lift */
:root:not([data-ih="evening"]) .door-in, :root:not([data-ih="evening"]) .dg-col, :root:not([data-ih="evening"]) .offers li,
:root:not([data-ih="evening"]) .who-card, :root:not([data-ih="evening"]) .senses button { background-color: rgba(255, 244, 234, .5); }

/* science hero: designing for the human */
.human { margin-top: clamp(22px, 3vw, 34px); padding-top: clamp(18px, 2.4vw, 26px); border-top: 1px solid var(--rule-2); max-width: 1080px; display: grid; gap: 14px; }
.human-lede { font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.4 var(--display); color: var(--text); max-width: 54ch; margin: 0; }
.human-pts { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.human-pts li { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 20px; background: rgba(255, 244, 234, .45); background-image: var(--glow-card); }
.human-pts b { font: 600 13px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.human-pts span { color: var(--text-2); font-size: 17px; line-height: 1.5; }
:root[data-ih="evening"] .human-pts li { background: rgba(255, 244, 234, .3); }
:root[data-ih="evening"] .human-pts span { font-weight: 500; }
@media (max-width: 860px) { .human-pts { grid-template-columns: minmax(0, 1fr); } }

/* digital page */
.dg-cards { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dg-cards a { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 24px 22px; text-decoration: none; color: var(--text); border: 1px solid var(--rule); border-radius: 26px; background: rgba(255, 244, 234, .5); background-image: radial-gradient(320px 240px at 0% 0%, rgba(var(--a, 255, 227, 181), .55) 0%, rgba(var(--a, 255, 227, 181), 0) 70%); transition: border-color .2s, transform .2s, box-shadow .2s; }
.dg-cards a:hover { border-color: var(--deco); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(217, 72, 43, .14); }
.dg-cards b { font: 400 clamp(1.4rem, 2vw, 1.7rem)/1.15 var(--display); }
.dg-cards span:not(.aura-dot) { color: var(--text-2); font-size: 17px; line-height: 1.5; }
.dg-cards .go { font: 600 13px/1 var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.dg-cards .go em { font-style: normal; }
.dg-soon-list { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dg-soon-list li { padding: 24px 22px; border: 1px dashed var(--rule-2); border-radius: 26px; display: grid; gap: 8px; align-content: start; background: rgba(255, 244, 234, .3); }
.dg-soon-list b { font: 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.15 var(--display); }
.dg-soon-list p { margin: 0; color: var(--text-2); }
.dg-note { margin-top: 24px; }
:root[data-ih="evening"] .dg-cards a, :root[data-ih="evening"] .dg-soon-list li { background-color: rgba(255, 244, 234, .28); }
:root[data-ih="evening"] .dg-cards span:not(.aura-dot), :root[data-ih="evening"] .dg-soon-list p { font-weight: 500; }
@media (max-width: 1100px) { .dg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dg-cards, .dg-soon-list { grid-template-columns: minmax(0, 1fr); } }

/* header fit: short action labels until there is real room for the long ones */
@media (min-width: 1280px) and (max-width: 1919px) {
  .chip .long, .book-top .long { display: none; }
  .chip .short, .book-top .short { display: inline; }
}
@media (min-width: 1440px) and (max-width: 1919px) { .gn-btn { font-size: 15.5px; padding-inline: 11px; letter-spacing: .12em; } .wordmark { font-size: 17px; } }

/* how we work: our philosophy */
.phil { background: var(--glow-br), var(--bg); }
.phil-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.phil-copy { display: grid; gap: 18px; justify-items: start; }
.phil h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.06; max-width: 18ch; }
.phil-words { display: flex; flex-wrap: wrap; gap: 4px 0; }
.pw { font: 400 clamp(1.5rem, 2.8vw, 2.4rem)/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--text); background: none; border: 0; padding: 4px 0 2px; cursor: pointer; opacity: .45; transition: opacity .3s; }
.pw:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 14px; color: var(--deco); opacity: 1; }
.pw:hover, .pw.on { opacity: 1; }
.pw.on { text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.phil-line { font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.35 var(--display); color: var(--accent-text); min-height: 2.7em; max-width: 34ch; margin: 0; }
.phil-sum { color: var(--text-2); max-width: 46ch; margin: 0; }
.worlds { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.wd { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; display: flex; }
.wd b { position: absolute; font: 600 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.w1 { left: 0; top: 0; background: radial-gradient(circle, rgba(255, 205, 112, .75) 0%, rgba(255, 205, 112, .3) 70%, rgba(255, 205, 112, .12) 100%); }
.w2 { right: 0; top: 0; background: radial-gradient(circle, rgba(255, 154, 85, .7) 0%, rgba(255, 154, 85, .28) 70%, rgba(255, 154, 85, .1) 100%); }
.w3 { left: 0; bottom: 0; background: radial-gradient(circle, rgba(244, 160, 184, .75) 0%, rgba(244, 160, 184, .3) 70%, rgba(244, 160, 184, .12) 100%); }
.w4 { right: 0; bottom: 0; background: radial-gradient(circle, rgba(240, 112, 46, .55) 0%, rgba(240, 112, 46, .22) 70%, rgba(240, 112, 46, .08) 100%); }
.w1 b { left: 18%; top: 30%; } .w2 b { right: 12%; top: 30%; } .w3 b { left: 26%; bottom: 30%; } .w4 b { right: 10%; bottom: 30%; }
.wd-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 clamp(1.1rem, 1.8vw, 1.4rem)/1 var(--display); color: var(--accent-text); }
:root[data-motion="full"] .wd { animation: wdrift 12s ease-in-out infinite; }
:root[data-motion="full"] .w2 { animation-delay: -3s; } :root[data-motion="full"] .w3 { animation-delay: -6s; } :root[data-motion="full"] .w4 { animation-delay: -9s; }
@keyframes wdrift { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
:root[data-ih="evening"] .pw { font-weight: 400; opacity: .55; }
:root[data-ih="evening"] .pw.on, :root[data-ih="evening"] .pw:hover { opacity: 1; }
:root[data-ih="evening"] .wd { mix-blend-mode: soft-light; }
:root[data-ih="evening"] .w1 { background: radial-gradient(circle, rgba(255, 233, 214, .9), rgba(255, 233, 214, .3)); }
@media (max-width: 900px) { .phil-in { grid-template-columns: minmax(0, 1fr); } .worlds { width: min(100%, 340px); } .wd b { font-size: 11px; letter-spacing: .14em; } }

/* science hero: the senses as aura bubbles circling you */
.sci-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); column-gap: clamp(24px, 4vw, 64px); align-items: center; }
.sci-hero > .human, .sci-hero > .page-links { grid-column: 1 / -1; }
.sci-orbit { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.orbit-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(184, 50, 31, .28); }
.orbit-ring.r1 { width: 72%; height: 72%; }
.orbit-ring.r2 { width: 96%; height: 96%; border-style: solid; border-color: rgba(184, 50, 31, .12); }
:root[data-motion="full"] .orbit-ring.r1 { animation: ring-turn 60s linear infinite; }
@keyframes ring-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.orb { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 4px; }
.orb b { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.orb.core { left: 50%; top: 50%; width: 40%; aspect-ratio: 1; background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 227, 181, .95) 26%, rgba(255, 154, 85, .55) 62%, rgba(240, 112, 46, .12) 100%); box-shadow: 0 0 60px 18px rgba(255, 154, 85, .35), inset 0 0 30px rgba(255, 255, 255, .45); }
.orb.core b { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--display); letter-spacing: .02em; text-transform: none; }
.orb.core i { font: 500 10px/1.2 var(--sans); font-style: normal; letter-spacing: .12em; max-width: 9em; text-transform: uppercase; color: var(--accent-text); }
.orb.sat { width: 25%; aspect-ratio: 1; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9) 0 7%, rgba(var(--a), .85) 30%, rgba(var(--a), .38) 66%, rgba(var(--a), .06) 100%); box-shadow: 0 0 34px 8px rgba(var(--a), .45), inset 0 0 16px rgba(255, 255, 255, .5); }
.s1 { left: 50%; top: 12%; } .s2 { left: 86%; top: 38%; } .s3 { left: 72%; top: 82%; } .s4 { left: 28%; top: 82%; } .s5 { left: 14%; top: 38%; }
.fleck { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9) 0 12%, rgba(var(--a), .8) 45%, rgba(var(--a), 0) 72%); }
.f1 { left: 70%; top: 14%; width: 5%; aspect-ratio: 1; } .f2 { left: 92%; top: 62%; width: 3.5%; aspect-ratio: 1; } .f3 { left: 48%; top: 94%; width: 4%; aspect-ratio: 1; }
.f4 { left: 4%; top: 62%; width: 4.5%; aspect-ratio: 1; } .f5 { left: 24%; top: 10%; width: 3%; aspect-ratio: 1; } .f6 { left: 62%; top: 60%; width: 3%; aspect-ratio: 1; }
:root[data-motion="full"] .orb.sat, :root[data-motion="full"] .fleck { animation: bubble 9s ease-in-out infinite; }
:root[data-motion="calm"] .orb.sat, :root[data-motion="calm"] .fleck { animation: bubble 16s ease-in-out infinite; }
:root[data-motion="full"] .orb.core { animation: core-breathe 10s ease-in-out infinite; }
.s2, .f2 { animation-delay: -1.8s !important; } .s3, .f3 { animation-delay: -3.6s !important; } .s4, .f4 { animation-delay: -5.4s !important; } .s5, .f5 { animation-delay: -7.2s !important; } .f6 { animation-delay: -4.5s !important; }
@keyframes bubble { 0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); } 50% { transform: translate(-50%, -50%) translateY(-8px) scale(1.05); } }
@keyframes core-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.04); } }
.fleck { transform: translate(-50%, -50%); }
:root[data-ih="evening"] .orbit-ring.r1 { border-color: rgba(58, 20, 16, .3); }
:root[data-ih="evening"] .orb b { font-weight: 700; }
@media (max-width: 900px) { .sci-hero { grid-template-columns: minmax(0, 1fr); } .sci-orbit { width: min(86%, 360px); margin-top: 28px; grid-row: 2; } }

/* digital: a glimpse of what we're building */
.for-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.glimpse { margin: 0; display: grid; gap: 14px; justify-items: center; }
.g-device { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; border-radius: 38px; overflow: hidden; cursor: pointer; touch-action: none;
  background: radial-gradient(120% 80% at 50% 30%, #4A1810 0%, var(--oxblood) 60%, #170604 100%);
  border: 8px solid #2A0E0B; box-shadow: 0 0 0 1px rgba(255, 154, 85, .35), 0 0 60px rgba(255, 154, 85, .3), 0 30px 70px rgba(58, 20, 16, .35); }
.g-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-frost { position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, #000 62%); mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, #000 62%);
  background: linear-gradient(180deg, rgba(23, 6, 4, 0) 30%, rgba(23, 6, 4, .45) 100%); }
.g-tag { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap;
  font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--warm-white); background: rgba(23, 6, 4, .55); border: 1px solid rgba(255, 233, 214, .25); border-radius: 999px; padding: 8px 12px 7px; }
.g-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 154, 85, .2); }
:root[data-motion="full"] .g-tag i { animation: aura 3s ease-in-out infinite; }
.g-hint { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 233, 214, .75); transition: opacity .6s; }
.g-device.touched .g-hint { opacity: 0; }
.glimpse figcaption { max-width: 30ch; text-align: center; color: var(--text-2); font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) { .for-grid { grid-template-columns: minmax(0, 1fr); } .g-device { width: min(78%, 280px); } }

/* senses: an invitation to change how the site feels */
.chip.invite { position: relative; }
.chip.invite::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid rgba(var(--aura-taste), .7); pointer-events: none; opacity: 0; }
:root[data-motion="full"] .chip.invite::after { animation: invite-ring 2.6s ease-out infinite; }
:root[data-motion="calm"] .chip.invite::after { animation: invite-ring 4.5s ease-out infinite; }
:root[data-motion="still"] .chip.invite::after { opacity: 1; }
@keyframes invite-ring { 0% { opacity: .9; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
.senses-nudge { position: absolute; right: 0; top: calc(100% + 14px); z-index: 52; width: min(300px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 20px;
  background: var(--bg); background-image: radial-gradient(260px 180px at 100% 0%, rgba(255, 154, 85, .45), rgba(255, 154, 85, 0) 70%); border: 1px solid rgba(217, 72, 43, .35);
  box-shadow: 0 0 40px rgba(255, 154, 85, .3), 0 20px 50px rgba(58, 20, 16, .18); display: grid; gap: 12px; }
.senses-nudge:not([hidden]) { animation: drop .45s ease both; }
.senses-nudge::before { content: ""; position: absolute; right: 44px; top: -7px; width: 12px; height: 12px; background: var(--bg); border-left: 1px solid rgba(217, 72, 43, .35); border-top: 1px solid rgba(217, 72, 43, .35); transform: rotate(45deg); }
.senses-nudge p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.senses-nudge b { display: block; font: 400 21px/1.2 var(--display); color: var(--text); margin-bottom: 4px; }
.sn-row { display: flex; gap: 10px; align-items: center; }
.sn-try { font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--btn-ink); background: var(--btn-bg); border: 0; border-radius: 999px; padding: 11px 16px 9px; cursor: pointer; }
.sn-try:hover { background: var(--btn-hover); }
.sn-x { font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); background: none; border: 0; padding: 10px 6px; cursor: pointer; }
.sn-x:hover { color: var(--text); }
.hero-links { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.moment.tune { font: 500 13px/1.3 var(--sans); letter-spacing: .2em; border-bottom: 1px solid var(--deco); }
.moment.tune .aura-dot { --a: var(--aura-taste); width: 11px; height: 11px; }

/* directory: bolder, so every option reads at a glance */
.gn-btn { font-weight: 700; }
.mega-over b { font-weight: 700; font-size: 20px; }
.mega-over span, .mega-col li span { font-weight: 500; color: var(--text); opacity: .8; }
.mega-col li b { font-weight: 700; font-size: 16.5px; }
.mm-head, .mm-body li b { font-weight: 700; }

/* how we work: philosophy opens the page, the three levels follow */
.page-hero.phil { background: var(--glow-tr), var(--glow-br), var(--bg); }
.phil h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; max-width: 16ch; margin: 0; }
.how-intro { padding-bottom: 0; }
.levels-sec { padding-top: clamp(20px, 3vw, 36px); }

/* readability: the whole site a step bolder, in day and evening */
:root { --text-2: #5E3128; }
:root[data-contrast="high"] { --text-2: #4A1B12; }
body { font-weight: 500; }
.lede, .w-d, .fine, .hero-copy, .cap-story p, .sc-cols p, .conn-text p, .lv-d p, .dg-list span, .offers p, .principles p,
.cap-senses span, .span-v, .span-note, .phil-sum, .human-pts span, .dg-cards span:not(.aura-dot), .dg-soon-list p, .door-for, .path-head p, .glimpse figcaption { font-weight: 500; }
.label, .moment, .book-link, .door-k, .page-links a, .chip, .btn, .lv-k .label { font-weight: 600; }
h1, h2, h3, h4, .lv-t, .door-t, .phil-line, .human-lede, .dg-cards b, .dg-soon-list b, .mega-over b + span { -webkit-text-stroke: .35px currentColor; }
h1 { -webkit-text-stroke-width: .6px; }
:root[data-ih="evening"] body { font-weight: 500; }

/* how we work: the how of what we do */
.how-do { background: var(--glow-tl), var(--bg); }
.steps { list-style: none; margin: clamp(26px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.steps::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 1px; background: linear-gradient(90deg, rgba(var(--aura-sound), .8), rgba(var(--aura-light), .8), rgba(var(--aura-touch), .8), rgba(var(--aura-taste), .8)); }
.steps li { position: relative; display: grid; gap: 10px; align-content: start; }
.st-n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--sans); letter-spacing: .1em; color: var(--text);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9) 0 8%, rgba(var(--a), .85) 40%, rgba(var(--a), .35) 100%); box-shadow: 0 0 26px 4px rgba(var(--a), .45); }
.steps h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-top: 8px; }
.steps p { color: var(--text-2); font-size: 17px; line-height: 1.55; margin: 0; max-width: 30ch; }
.ways-in { margin-top: clamp(34px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--rule-2); display: grid; gap: 12px; }
.ways-in ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ways-in a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 20px; text-decoration: none; background: rgba(255, 244, 234, .45); transition: border-color .2s, transform .2s; }
.ways-in a:hover { border-color: var(--deco); transform: translateY(-2px); }
.ways-in b { font: 700 15px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ways-in span { color: var(--text-2); font-size: 16px; }
:root[data-ih="evening"] .ways-in a { background: rgba(255, 244, 234, .25); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .steps::before { display: none; } .ways-in ul { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* advisory page: the sensory map */
.adv-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.adv-hero h1 { max-width: 17ch; }
.adv-hero .lede b { color: var(--text); font-weight: 700; }
.adv-map { margin: 0; display: grid; gap: 12px; justify-items: center; }
.adv-map svg { width: min(100%, 420px); height: auto; overflow: visible; }
.am-wall { fill: rgba(255, 244, 234, .4); stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.am-window { stroke: var(--amber); stroke-width: 7; stroke-linecap: round; }
.am-door { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .6; }
.am-furn { fill: rgba(255, 244, 234, .7); stroke: rgba(58, 20, 16, .45); stroke-width: 1.5; }
.am-path { fill: none; stroke: var(--ember); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; }
:root[data-motion="full"] .am-path { animation: am-walk 6s linear infinite; }
:root[data-motion="calm"] .am-path { animation: am-walk 12s linear infinite; }
@keyframes am-walk { to { stroke-dashoffset: -110; } }
.am-step { fill: var(--ember); }
.am-labels text { font: 700 12px/1 var(--sans); letter-spacing: .18em; fill: var(--text); }
:root[data-motion="full"] .am-auras circle { animation: am-glow 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.am-auras circle:nth-child(2) { animation-delay: -2s !important; } .am-auras circle:nth-child(3) { animation-delay: -4s !important; } .am-auras circle:nth-child(4) { animation-delay: -6s !important; }
@keyframes am-glow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
.adv-map figcaption { max-width: 32ch; text-align: center; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.adv-for { margin-top: 22px; }
.adv-look .tags { margin-top: 20px; }
.adv-how { margin-top: 26px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
@media (max-width: 900px) { .adv-hero { grid-template-columns: minmax(0, 1fr); } .adv-map svg { width: min(86%, 340px); } }

/* digital hero: copy beside the veiled glimpse */
.dg-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.dg-hero .g-device { width: min(100%, 270px); cursor: default; }
.g-frost { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 900px) { .dg-hero { grid-template-columns: minmax(0, 1fr); } .dg-hero .glimpse { margin-top: 12px; } .dg-hero .g-device { width: min(64%, 240px); } }

/* science hero: the spiral of life */
.spiral .sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-line { fill: none; stroke: url(#spg); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.sp-echo { fill: none; stroke: rgba(184, 50, 31, .22); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.sp-flow { fill: none; stroke: #FFF4EA; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 18 140; opacity: .85; filter: drop-shadow(0 0 4px rgba(255, 154, 85, .9)); }
:root[data-motion="full"] .sp-flow { animation: sp-flow 7s linear infinite; }
:root[data-motion="calm"] .sp-flow { animation: sp-flow 14s linear infinite; }
:root[data-motion="still"] .sp-flow { display: none; }
@keyframes sp-flow { to { stroke-dashoffset: -158; } }
.spiral .orb.core { width: 24%; }
.spiral .orb.core b { font-size: clamp(1.3rem, 2.1vw, 1.8rem); }
.spiral .orb.core i { font-size: 9px; }
.spiral .orb.sat b { font-size: 11px; letter-spacing: .16em; }
.spiral .orb.sat, .spiral .fleck { aspect-ratio: 1; }
.sp2, .sf2 { animation-delay: -1.8s !important; } .sp3, .sf3 { animation-delay: -3.6s !important; } .sp4, .sf4 { animation-delay: -5.4s !important; } .sp5, .sf5 { animation-delay: -7.2s !important; } .sf6 { animation-delay: -4.5s !important; }
:root[data-ih="evening"] .sp-echo { stroke: rgba(58, 20, 16, .3); }

/* what we mean: a web of connection */
.mean-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.web { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.web svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.web-ring { fill: none; stroke: rgba(184, 50, 31, .2); stroke-width: 1.2; stroke-dasharray: 3 7; }
.web-arc { fill: none; stroke: rgba(217, 72, 43, .35); stroke-width: 1.5; }
.web-thread { fill: none; stroke: rgba(217, 72, 43, .55); stroke-width: 2; stroke-linecap: round; }
.web-pulse { fill: none; stroke: #FFF4EA; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 200; opacity: .9; filter: drop-shadow(0 0 5px rgba(255, 154, 85, .95)); }
:root[data-motion="full"] .web-pulse { animation: web-go 3.6s ease-in-out infinite; }
:root[data-motion="calm"] .web-pulse { animation: web-go 7s ease-in-out infinite; }
:root[data-motion="still"] .web-pulse { display: none; }
.web-pulse.p2 { animation-delay: -.9s !important; } .web-pulse.p3 { animation-delay: -1.8s !important; } .web-pulse.p4 { animation-delay: -2.7s !important; }
@keyframes web-go { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -200; } }
.web .orb { aspect-ratio: 1; }
.web .orb.sat b { font-size: 11px; }
.web .orb.core i { font-size: 9px; }
.web .w-b { animation-delay: -2s !important; } .web .w-c { animation-delay: -4s !important; } .web .w-d { animation-delay: -6s !important; }
@media (max-width: 900px) { .mean-hero { grid-template-columns: minmax(0, 1fr); } .web { width: min(86%, 340px); } }
@media (min-width: 1280px) and (max-width: 1439px) { .bar .wordmark { letter-spacing: .14em; font-size: 15px; } }

/* advisory: an example under each offer */
.eg { margin: 6px 0 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 250, 244, .55); border-left: 3px solid var(--deco); display: grid; gap: 6px; }
.eg-k { margin: 0; font: 700 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.eg p:not(.eg-k) { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text); }
:root[data-ih="evening"] .eg { background: rgba(255, 244, 234, .3); }