/* Immersive Health — the evolved design system: "grounded futurism".
   Loaded after styles.css. Tokens first, then the shared parts (type, header,
   logo, buttons, footer), then the homepage and the three pathway pages.

   To change the look site-wide, start with the tokens below.
   Day   = stone: warm mineral white, sand and graphite.
   Night = graphite ("Evening" in Sensory settings), warm mineral text.
   Accents are used by section, not all at once: coral/terracotta (Gather,
   the body), living green (Reimagine, the ground), lavender/periwinkle and a
   little chrome (Explore, the digital world). */

:root {
  /* foundation */
  --mineral: #F6F1EA;   --stone: #ECE4D8;   --sand: #E2D7C6;   --clay: #CDBBA4;
  --graphite: #151412;  --graphite-2: #211F1B; --graphite-3: #2E2B26;
  --metal: #A7A39B;     --metal-2: #D6D2CA;
  /* expressive accents */
  --coral: #E0674A;     --terracotta: #B5482D; --terracotta-ink: #A03B22;
  --moss: #3F5B3D;      --moss-2: #6F8F64;     --lichen: #B7C9A6;
  --lavender: #B2ADEB;  --periwinkle: #7F86D8; --lav-ink: #3D3F8F;
  --chrome: linear-gradient(115deg, #FAF8F6 0%, #C7C3F2 18%, #F2B9C8 36%, #BFE6E4 54%, #F6EFEB 72%, #F7D7BF 88%, #FAF8F6 100%);

  /* roles (day) */
  --bg: var(--stone);        --bg-rgb: 236, 228, 216;
  --alt: var(--sand);
  --surface: var(--mineral);
  --card: rgba(246, 241, 234, .62);
  --text: #1F1B17;           --text-2: #4A4239;          --text-3: #6B6258;
  --accent-text: var(--terracotta-ink);
  --focus: #1F1B17;
  --deco: var(--coral);
  --seed: #C4532F;
  --btn-bg: var(--graphite); --btn-ink: var(--mineral);  --btn-hover: var(--terracotta);
  --rule: rgba(31, 27, 23, .13); --rule-2: rgba(31, 27, 23, .3);
  --chip-on: var(--graphite); --chip-on-ink: var(--mineral);
  --hover-wash: rgba(31, 27, 23, .06);
  --line-rgb: 31, 27, 23;      --line-alpha: .12;
  --accent-rgb: 224, 103, 74;  --accent-alpha: .42;
  --glow-rgb: 246, 241, 234;
  --tile-rgb: 226, 215, 198;

  --glow-tl: radial-gradient(640px 460px at 0% 0%, rgba(246, 241, 234, .75) 0%, rgba(246, 241, 234, 0) 70%);
  --glow-br: radial-gradient(700px 500px at 100% 100%, rgba(178, 173, 235, .22) 0%, rgba(178, 173, 235, 0) 70%);
  --glow-tr: radial-gradient(600px 440px at 100% 0%, rgba(246, 241, 234, .7) 0%, rgba(246, 241, 234, 0) 70%);
  --glow-card: radial-gradient(380px 280px at 0% 0%, rgba(246, 241, 234, .9) 0%, rgba(246, 241, 234, 0) 72%);

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --exp: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --fs-hero: clamp(3.3rem, 9vw, 8.8rem);
  --fs-1: clamp(2.7rem, 6.2vw, 5.6rem);
  --fs-2: clamp(2.2rem, 4.6vw, 4.1rem);
  --fs-3: clamp(1.55rem, 2.5vw, 2.2rem);
  --fs-lede: clamp(1.1rem, 1.5vw, 1.32rem);
  --fs-body: clamp(1.02rem, 1.1vw, 1.12rem);
  --fs-small: .94rem;
  --fs-label: .78rem;

  /* space, shape, motion */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: clamp(56px, 7vw, 104px); --sp-6: clamp(80px, 10vw, 160px);
  --r-s: 12px; --r-m: 22px; --r-l: 34px; --r-arch: 999px 999px 28px 28px;
  --ease: cubic-bezier(.22, .8, .24, 1); --dur: .5s;
  color-scheme: light;
}

:root[data-ih="evening"] {
  --bg: var(--graphite);     --bg-rgb: 21, 20, 18;
  --alt: var(--graphite-2);
  --surface: var(--graphite-2);
  --card: rgba(255, 255, 255, .045);
  --text: #F1EBE2;           --text-2: #C3B9AC;          --text-3: #9C9387;
  --accent-text: #F29A7F;
  --focus: #F1EBE2;
  --deco: var(--coral);
  --seed: #E8805F;
  --btn-bg: #F1EBE2; --btn-ink: var(--graphite); --btn-hover: #F29A7F;
  --rule: rgba(241, 235, 226, .13); --rule-2: rgba(241, 235, 226, .3);
  --chip-on: #F1EBE2; --chip-on-ink: var(--graphite);
  --hover-wash: rgba(255, 255, 255, .06);
  --line-rgb: 241, 235, 226;   --line-alpha: .12;
  --accent-rgb: 224, 103, 74;  --accent-alpha: .55;
  --glow-rgb: 46, 43, 38;
  --tile-rgb: 33, 31, 27;
  --glow-tl: radial-gradient(640px 460px at 0% 0%, rgba(178, 173, 235, .1) 0%, rgba(178, 173, 235, 0) 70%);
  --glow-br: radial-gradient(700px 500px at 100% 100%, rgba(224, 103, 74, .1) 0%, rgba(224, 103, 74, 0) 70%);
  --glow-tr: radial-gradient(600px 440px at 100% 0%, rgba(178, 173, 235, .1) 0%, rgba(178, 173, 235, 0) 70%);
  --glow-card: radial-gradient(380px 280px at 0% 0%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 72%);
  color-scheme: dark;
}
:root[data-contrast="high"] { --text-2: #2E2924; --text-3: #3F3832; --rule: rgba(31, 27, 23, .3); --rule-2: rgba(31, 27, 23, .65); }
:root[data-ih="evening"][data-contrast="high"] { --text-2: #E6DED3; --text-3: #D2C9BD; --rule: rgba(241, 235, 226, .3); --rule-2: rgba(241, 235, 226, .65); }

/* ------------------------------------------------------------------ type */
body { font: 450 var(--fs-body)/1.65 var(--sans); letter-spacing: .002em; }
:root[data-ih="evening"] body { font-weight: 420; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -.012em; line-height: 1.02; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
h1 em, h2 em, h3 em, .serif-em { font-style: italic; }
.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: 450; }
.lede { font-size: var(--fs-lede); line-height: 1.6; max-width: 56ch; }
.fine { font-size: var(--fs-small); }
/* labels: Space Grotesk, the one experimental voice; quiet tracking, never shouting */
.label, .seg legend, .topics legend, .fl, .sc-k, .sc-sub, .rung, .eg-k, .door-k, .cap-cue, .refs summary, .founding-tag, .mm-over, .ways-in b, .human-pts b {
  font-family: var(--exp) !important; font-weight: 500 !important; font-size: var(--fs-label) !important; letter-spacing: .14em !important; text-transform: uppercase; }
.label { color: var(--accent-text); }
.fl i { font-family: var(--sans); letter-spacing: 0; }
/* the old all-caps, wide-tracked voice relaxes into readable sentence case */
.moment, .book-link, .page-links a, .skip-moment, .pause-go, .sc-more a, .sn-try, .sn-x, .who-own button, .dg-cards .go, .door-cta, .g-tag, .g-hint {
  font-family: var(--sans) !important; font-weight: 650 !important; font-size: .98rem !important; letter-spacing: .005em !important; text-transform: none !important; }
.btn, .menu-btn, .chip { font-family: var(--sans) !important; font-weight: 650 !important; font-size: .95rem !important; letter-spacing: .005em !important; text-transform: none !important; }
.btn { padding: 15px 24px 15px; gap: 10px; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn.ghost:hover { background: var(--text); color: var(--bg); }
.btn.primary:hover { color: var(--mineral); }
:root[data-ih="evening"] .btn.primary:hover { color: var(--graphite); }
.pw, .gn-over b, .mm-head, .gn-btn, .mega-over b, .mega-col li b, .gn-panel li b, .mm-body li b { text-transform: none !important; letter-spacing: 0 !important; }

/* reading surfaces use the display face only at size; dense copy stays in Manrope */
.door-t, .dg-cards b, .dg-soon-list b, .dg-list b, .offers h3, .senses b, .sense-tab .sn, .cap-senses b, .led-name, .who-line, .who-ask, .panel-lede,
.human-lede, .phil-line, .lv-t, .fd-h, .sc-copy b, .senses-nudge b { font-family: var(--display) !important; font-weight: 400 !important; letter-spacing: -.005em; }
.senses b { font-size: 1.55rem; }
.who-ask { font-size: 1.45rem; }
.panel-lede { font-size: 1.6rem; }
.pw { font-family: var(--display) !important; font-size: clamp(1.7rem, 3vw, 2.6rem) !important; }

/* --------------------------------------------------------- the mark */
.ih-mark { display: block; width: 100%; height: 100%; color: var(--text); overflow: visible; }
.ih-mark .ih-seed { fill: var(--seed); }
:root[data-motion="full"] .ih-mark .ih-seed, :root[data-motion="calm"] .ih-mark .ih-seed { transform-box: fill-box; transform-origin: center; animation: seed 6s ease-in-out infinite; }
@keyframes seed { 0%, 100% { opacity: .9; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------------------------------------------------------- header */
.bar { background: rgba(var(--bg-rgb), .86); border-bottom-color: var(--rule); }
.bar-in { min-height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: 0; font: inherit; color: var(--text); text-decoration: none; }
.wordmark .wm-mark, .foot-lockup .wm-mark { display: block; }
.wordmark .wm-mark { width: 34px; height: 34px; flex: none; }
.wordmark .wm-type { display: grid; gap: 3px; }
.wordmark .wm-name { font: 500 .92rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.wordmark .wm-llc { font: 500 .62rem/1 var(--exp); letter-spacing: .26em; text-transform: uppercase; color: var(--text-3); }
.wordmark:hover .wm-name { color: var(--accent-text); }
.gn-btn { font: 650 .98rem/1 var(--sans) !important; padding: 14px 15px 13px !important; }
.gn.is-here .gn-btn::after { background: var(--deco); height: 2px !important; bottom: 7px !important; right: 26px !important; }
.mega { background: var(--bg); background-image: var(--glow-br); box-shadow: 0 30px 70px rgba(21, 20, 18, .14); }
.mega-over b { font-family: var(--display) !important; font-weight: 400 !important; font-size: 1.9rem !important; line-height: 1; }
.mega-over span, .mega-col li span { font-size: .96rem !important; opacity: 1 !important; color: var(--text-2) !important; font-weight: 450 !important; }
.mega-col li b { font-family: var(--sans) !important; font-weight: 650 !important; font-size: 1rem !important; }
.mega-col.lit { background: var(--card); }
.mm-head { font-family: var(--display) !important; font-weight: 400 !important; font-size: clamp(2rem, 7vw, 2.6rem) !important; }
.mm-body li b { font-family: var(--sans) !important; font-weight: 650 !important; font-size: 1.05rem !important; }
.menu-side { background: var(--alt); background-image: none; }
@media (max-width: 520px) {
  .bar .wordmark { white-space: nowrap; max-width: none; }
  .wordmark .wm-mark { width: 30px; height: 30px; }
  .wordmark .wm-name { font-size: .74rem; letter-spacing: .22em; }
  .wordmark .wm-llc { font-size: .56rem; }
}
@media (max-width: 370px) { .wordmark .wm-name { letter-spacing: .14em; } .wordmark { gap: 9px; } }

/* surfaces that sat on tan now sit on stone (day) or graphite (evening) */
: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, :root:not([data-ih="evening"]) .dg-cards a,
:root:not([data-ih="evening"]) .human-pts li, :root:not([data-ih="evening"]) .ways-in a, :root:not([data-ih="evening"]) .early,
:root:not([data-ih="evening"]) .founding-in, :root:not([data-ih="evening"]) .eg { background-color: var(--card); }
:root[data-ih="evening"] .door-in, :root[data-ih="evening"] .dg-col, :root[data-ih="evening"] .offers li, :root[data-ih="evening"] .who-card,
:root[data-ih="evening"] .senses button, :root[data-ih="evening"] .dg-cards a, :root[data-ih="evening"] .dg-soon-list li, :root[data-ih="evening"] .human-pts li,
:root[data-ih="evening"] .ways-in a, :root[data-ih="evening"] .eg, :root[data-ih="evening"] .early, :root[data-ih="evening"] .founding-in,
:root[data-ih="evening"] .form-done, :root[data-ih="evening"] .book-form, :root[data-ih="evening"] .q-who, :root[data-ih="evening"] .cap-card,
:root[data-ih="evening"] .span, :root[data-ih="evening"] .sense-card, :root[data-ih="evening"] .cap-senses, :root[data-ih="evening"] .door-art {
  background-color: rgba(255, 255, 255, .045) !important; background-image: none !important; border-color: var(--rule) !important; }
:root[data-ih="evening"] .fld input, :root[data-ih="evening"] .fld textarea, :root[data-ih="evening"] .who-own input { background: rgba(255, 255, 255, .06); color: var(--text); }
:root[data-ih="evening"] .pause::before { background: linear-gradient(90deg, var(--graphite-2) 0%, rgba(33, 31, 27, .82) 38%, rgba(33, 31, 27, 0) 70%); }
.pause::before { background: linear-gradient(90deg, var(--sand) 0%, rgba(226, 215, 198, .8) 38%, rgba(226, 215, 198, 0) 70%); }
@media (max-width: 620px) { .pause::before { background: rgba(226, 215, 198, .74); } :root[data-ih="evening"] .pause::before { background: rgba(33, 31, 27, .8); } }
.senses-nudge { background-image: radial-gradient(260px 180px at 100% 0%, rgba(224, 103, 74, .22), rgba(224, 103, 74, 0) 70%); border-color: rgba(224, 103, 74, .35); }
.eg { border-left-color: var(--deco); }
::selection { background: var(--lavender); color: var(--graphite); }

/* ------------------------------------------------------- section rhythm */
.sec, .work, .question, .pause { padding-block: var(--sp-5); }
.sect-head h2, .levels-head h2, .conn-text h2, .phil h2 { font-size: var(--fs-2); }
.page-hero h1 { font-size: var(--fs-1); line-height: .98; max-width: 16ch; }
.page-hero .lede { font-size: var(--fs-lede); }
.page-links a { border-radius: 999px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }

/* ------------------------------------------------------------- footer */
.foot { padding-block: var(--sp-5) calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); background: var(--bg); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: var(--sp-4) clamp(20px, 3vw, 40px); }
.foot-brand { display: grid; gap: 18px; align-content: start; }
.foot-lockup { display: flex; align-items: center; gap: 16px; color: var(--text); text-decoration: none; }
.foot-lockup .wm-mark { width: 56px; height: 56px; flex: none; }
.foot-lockup .wm-name { font: 300 1.45rem/1.12 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.foot-motto { margin: 0; font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.12 var(--display); max-width: 14ch; }
.foot-col h2 { font: 500 var(--fs-label)/1.3 var(--exp); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a, .foot-col .link-btn { color: var(--text); text-decoration: none; font-weight: 550; font-size: 1rem; text-align: left; }
.foot-col a:hover, .foot-col .link-btn:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }
.foot-base { margin-top: var(--sp-4); padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; align-items: baseline; }
.foot-base .foot-note { margin: 0; max-width: 70ch; font-size: var(--fs-small); color: var(--text-2); }
.foot-base .fine { margin: 0; }
@media (max-width: 1000px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .foot-top { grid-template-columns: minmax(0, 1fr); } }

/* redirect stubs (old addresses) */
.moved { min-height: 50vh; display: grid; place-content: center; text-align: center; gap: 12px; padding: 40px; }

/* ====================================================================
   HOMEPAGE
   ==================================================================== */

/* A · Arrival: a threshold you can step through */
.arrive { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); padding-block: clamp(28px, 5vw, 72px) clamp(56px, 7vw, 110px); }
.arrive::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 55% at 74% 46%, rgba(178, 173, 235, .30) 0%, rgba(178, 173, 235, 0) 70%),
    radial-gradient(42% 40% at 86% 18%, rgba(242, 185, 200, .28) 0%, rgba(242, 185, 200, 0) 70%),
    radial-gradient(70% 50% at 50% 112%, rgba(111, 143, 100, .26) 0%, rgba(111, 143, 100, 0) 70%),
    radial-gradient(50% 60% at 6% 30%, rgba(246, 241, 234, .9) 0%, rgba(246, 241, 234, 0) 70%); }
:root[data-ih="evening"] .arrive::before { background:
    radial-gradient(60% 55% at 74% 46%, rgba(127, 134, 216, .22) 0%, rgba(127, 134, 216, 0) 70%),
    radial-gradient(42% 40% at 86% 18%, rgba(224, 103, 74, .16) 0%, rgba(224, 103, 74, 0) 70%),
    radial-gradient(70% 50% at 50% 112%, rgba(63, 91, 61, .4) 0%, rgba(63, 91, 61, 0) 70%); }
.arrive::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .34 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-ih="evening"] .arrive::after { mix-blend-mode: screen; opacity: .18; }
.arrive-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.arrive-text { display: grid; gap: 22px; justify-items: start; position: relative; z-index: 2; }
.arrive h1 { font-size: var(--fs-hero); line-height: .9; letter-spacing: -.025em; max-width: 9.5ch; margin: 0; }
.arrive h1 em { display: inline-block; padding-right: .06em; background: linear-gradient(100deg, var(--text) 0%, var(--terracotta) 45%, var(--periwinkle) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-ih="evening"] .arrive h1 em { background: linear-gradient(100deg, #F1EBE2 0%, #F29A7F 45%, #B2ADEB 100%); -webkit-background-clip: text; background-clip: text; }
:root[data-contrast="high"] .arrive h1 em { background: none; color: var(--text); }
.arrive-sub { margin: 0; font: 400 clamp(1.35rem, 2.3vw, 2rem)/1.3 var(--display); color: var(--text); max-width: 30ch; }
.arrive-sub span { display: inline; }
.arrive-sub span + span::before { content: " "; }
.arrive-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.arrive-cta .btn { padding: 17px 26px; font-size: 1rem !important; }
.arrive-quiet { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 4px; }
.arrive-quiet .moment { border-bottom-color: var(--rule-2); color: var(--text-2); }
.arrive-quiet .moment:hover { color: var(--text); border-bottom-color: var(--deco); }

/* the threshold: an arch of stone light with the living portal at its far end */
.threshold { position: relative; margin: 0; justify-self: center; width: min(100%, 470px); aspect-ratio: 4 / 5; display: grid; place-items: center; }
.th-rings { position: absolute; inset: -22% -30%; width: 160%; height: 144%; pointer-events: none; overflow: visible; }
:root[data-motion="full"] .th-rings { animation: rings-breathe 12s ease-in-out infinite; transform-origin: 50% 50%; }
:root[data-motion="calm"] .th-rings { animation: rings-breathe 20s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes rings-breathe { 0%, 100% { transform: scale(.985) rotate(-.6deg); } 50% { transform: scale(1.015) rotate(.6deg); } }
.th-arch { position: relative; width: 74%; height: 86%; border-radius: var(--r-arch); overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 46% at 50% 52%, #FFF4E2 0%, #FFD7A8 22%, #F2A27A 42%, #C9654A 62%, #6B3A3A 82%, #302822 100%);
  box-shadow: 0 0 0 1px rgba(var(--line-rgb), .14), 0 40px 90px rgba(90, 60, 50, .28), inset 0 0 60px rgba(21, 20, 18, .35); }
.th-arch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 30%), linear-gradient(0deg, rgba(21, 20, 18, .35) 0%, rgba(21, 20, 18, 0) 26%); }
.th-arch canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; background: none !important; display: block; }
.th-sill { position: absolute; left: 4%; right: 4%; bottom: 4.5%; height: 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(63, 91, 61, .32), rgba(63, 91, 61, 0) 70%); filter: blur(4px); }
.th-tag { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); white-space: nowrap; font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

/* the spiral of life through the threshold; the four connections tint it */
.threshold { --thread: var(--accent-rgb); }
.threshold[data-thread="self"] { --thread: 224, 103, 74; }
.threshold[data-thread="senses"] { --thread: 226, 158, 70; }
.threshold[data-thread="others"] { --thread: 127, 134, 216; }
.threshold[data-thread="spaces"] { --thread: 79, 122, 76; }
.th-spiral path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .8s ease, opacity .8s ease; }
.th-spiral .sp-echo { stroke: rgba(var(--line-rgb), .16); stroke-width: 1; }
.th-spiral .sp-main { stroke: rgba(var(--thread), .55); stroke-width: 1.5; }
.th-spiral .sp-flow { stroke: rgba(var(--thread), .95); stroke-width: 2.4; stroke-dasharray: 22 1000; opacity: 0; }
.threshold[data-thread]:not([data-thread=""]) .sp-main { stroke: rgba(var(--thread), .8); stroke-width: 1.8; }
:root[data-motion="full"] .th-spiral .sp-flow, :root[data-motion="calm"] .th-spiral .sp-flow { opacity: .85; animation: sp-life 14s linear infinite; }
:root[data-motion="calm"] .th-spiral .sp-flow { animation-duration: 26s; }
.threshold[data-thread]:not([data-thread=""]) .sp-flow { animation-duration: 6s !important; }
@keyframes sp-life { from { stroke-dashoffset: 1022; } to { stroke-dashoffset: 0; } }
.arrive-sub { display: flex; flex-wrap: wrap; gap: 0 .32em; }
.thread { font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; margin: 0; cursor: pointer; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; text-align: left; }
.thread:hover, .thread[aria-pressed="true"] { border-bottom-color: rgba(var(--accent-rgb), .7); }
.thread[data-thread="self"]:hover, .thread[data-thread="self"][aria-pressed="true"] { color: #B5482D; border-bottom-color: #E0674A; }
.thread[data-thread="senses"]:hover, .thread[data-thread="senses"][aria-pressed="true"] { color: #9A5B12; border-bottom-color: #E29E46; }
.thread[data-thread="others"]:hover, .thread[data-thread="others"][aria-pressed="true"] { color: #3D3F8F; border-bottom-color: #7F86D8; }
.thread[data-thread="spaces"]:hover, .thread[data-thread="spaces"][aria-pressed="true"] { color: #2F4A2E; border-bottom-color: #4F7A4C; }
:root[data-ih="evening"] .thread[data-thread="self"]:hover, :root[data-ih="evening"] .thread[data-thread="self"][aria-pressed="true"] { color: #F29A7F; }
:root[data-ih="evening"] .thread[data-thread="senses"]:hover, :root[data-ih="evening"] .thread[data-thread="senses"][aria-pressed="true"] { color: #F0C27E; }
:root[data-ih="evening"] .thread[data-thread="others"]:hover, :root[data-ih="evening"] .thread[data-thread="others"][aria-pressed="true"] { color: #B2ADEB; }
:root[data-ih="evening"] .thread[data-thread="spaces"]:hover, :root[data-ih="evening"] .thread[data-thread="spaces"][aria-pressed="true"] { color: #9DBB8E; }

/* B · Philosophy */
.philo { padding-block: var(--sp-6) var(--sp-5); background: var(--surface); }
.philo-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.philo h2 { font-size: var(--fs-1); line-height: .96; max-width: 11ch; margin-top: 18px; }
.philo-copy { display: grid; gap: 18px; margin-top: 28px; max-width: 52ch; }
.philo-copy p { margin: 0; font-size: var(--fs-lede); color: var(--text-2); }
.philo-copy p:first-child { color: var(--text); }
.philo-words { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.philo-words li { font: 500 .86rem/1 var(--exp); letter-spacing: .06em; padding: 10px 14px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--text); }
.philo-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
.philo-q { margin: 0 0 22px; font: italic 400 clamp(1.5rem, 2.4vw, 2.05rem)/1.2 var(--display); color: var(--text); max-width: 26ch; }
.philo .q-who { background: var(--alt); }
:root:not([data-ih="evening"]) .philo .who-card { background-color: var(--mineral); }

/* C · Pathways: three invitations, three temperaments */
.paths { padding-block: var(--sp-5) 0; background: var(--bg); }
.paths-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; padding-bottom: var(--sp-4); }
.paths-head h2 { font-size: var(--fs-2); max-width: 15ch; margin-top: 14px; }
.paths-head p { margin: 0; color: var(--text-2); font-size: var(--fs-lede); max-width: 46ch; }
.path-band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(48px, 6vw, 96px); }
.path-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.path-band:nth-of-type(even) .pb-art { order: 2; }
.pb-num { font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; text-transform: uppercase; display: flex; gap: 14px; align-items: center; }
.pb-num b { font: 400 3.4rem/.8 var(--display); letter-spacing: -.02em; text-transform: none; }
.pb-copy { display: grid; gap: 18px; justify-items: start; }
.pb-copy h3 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .92; letter-spacing: -.02em; }
.pb-line { margin: 0; font: italic 400 clamp(1.4rem, 2.3vw, 1.95rem)/1.2 var(--display); max-width: 24ch; }
.pb-copy p.pb-d { margin: 0; max-width: 50ch; color: var(--text-2); }
.pb-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-tags li { font: 500 .84rem/1 var(--exp); letter-spacing: .04em; padding: 9px 13px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.pb-note { margin: 0; display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.pb-note i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--deco); transform: translateY(-1px); }
.pb-art { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: var(--r-l); overflow: hidden; isolation: isolate; }
.pb-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pb-art figcaption { position: absolute; left: 18px; bottom: 16px; font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; text-transform: uppercase; }

/* Gather: warm, communal, earth and coral */
.pb-gather { background: linear-gradient(180deg, #EAD8C6 0%, #E7CDB6 100%); color: #251812; --deco: #C4532F; }
.pb-gather .pb-num, .pb-gather .pb-copy p.pb-d { color: #5B3A2C; }
.pb-gather .pb-tags li { box-shadow: inset 0 0 0 1px rgba(91, 58, 44, .35); color: #3A241B; }
.pb-gather .pb-art { background: radial-gradient(70% 70% at 50% 60%, #F6E2CD 0%, #E9B796 55%, #C9785A 100%); }
.pb-gather .pb-art figcaption { color: #4A2A1E; }
.pb-gather .btn.primary { background: #251812; color: #F6EDE3; } .pb-gather .btn.primary:hover { background: #A03B22; }
:root[data-ih="evening"] .pb-gather { background: linear-gradient(180deg, #2A1E19 0%, #33231C 100%); color: #F6E7DA; --deco: #F08A6A; }
:root[data-ih="evening"] .pb-gather .pb-num, :root[data-ih="evening"] .pb-gather .pb-copy p.pb-d { color: #DCC2B2; }
:root[data-ih="evening"] .pb-gather .pb-tags li { box-shadow: inset 0 0 0 1px rgba(246, 231, 218, .3); color: #F6E7DA; }
:root[data-ih="evening"] .pb-gather .btn.primary { background: #F6E7DA; color: #251812; }

/* Explore: graphite, lavender, a little chrome */
.pb-explore { background: #141320; color: #F6F0EC; --deco: #B2ADEB; }
.pb-explore::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 80% 30%, rgba(127, 134, 216, .35) 0%, rgba(127, 134, 216, 0) 70%), radial-gradient(40% 50% at 10% 90%, rgba(224, 103, 74, .18) 0%, rgba(224, 103, 74, 0) 70%); }
.pb-explore .pb-num { color: #B2ADEB; } .pb-explore .pb-copy p.pb-d { color: #DDCDC5; }
.pb-explore .pb-tags li { box-shadow: inset 0 0 0 1px rgba(246, 240, 236, .28); color: #F6F0EC; }
.pb-explore .pb-art { background: #0B0A14; box-shadow: 0 0 0 1px rgba(178, 173, 235, .22), 0 30px 80px rgba(0, 0, 0, .4); }
.pb-explore .pb-art figcaption { color: #B2ADEB; }
.pb-explore .btn.primary { background: #F6F0EC; color: #141320; } .pb-explore .btn.primary:hover { background: #B2ADEB; color: #141320; }
.pb-explore .moment { color: #F6F0EC !important; border-bottom-color: rgba(178, 173, 235, .6); }
.pb-explore .pb-copy h3 em { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Reimagine: stone, moss, architectural line */
.pb-reimagine { background: linear-gradient(180deg, #E4E2D6 0%, #DCDCCC 100%); color: #19221A; --deco: #3F5B3D; }
.pb-reimagine .pb-num, .pb-reimagine .pb-copy p.pb-d { color: #3D4A3B; }
.pb-reimagine .pb-tags li { box-shadow: inset 0 0 0 1px rgba(25, 34, 26, .3); color: #19221A; }
.pb-reimagine .pb-art { background: linear-gradient(160deg, #F1F0E8 0%, #D9DCCB 100%); box-shadow: inset 0 0 0 1px rgba(25, 34, 26, .14); }
.pb-reimagine .pb-art figcaption { color: #3D4A3B; }
.pb-reimagine .btn.primary { background: #19221A; color: #F1F0E8; } .pb-reimagine .btn.primary:hover { background: #3F5B3D; }
:root[data-ih="evening"] .pb-reimagine { background: linear-gradient(180deg, #171C17 0%, #1B211B 100%); color: #E7EDE2; --deco: #9DBB8E; }
:root[data-ih="evening"] .pb-reimagine .pb-num, :root[data-ih="evening"] .pb-reimagine .pb-copy p.pb-d { color: #BFCDB8; }
:root[data-ih="evening"] .pb-reimagine .pb-tags li { box-shadow: inset 0 0 0 1px rgba(231, 237, 226, .28); color: #E7EDE2; }
:root[data-ih="evening"] .pb-reimagine .pb-art { background: linear-gradient(160deg, #222A22 0%, #1A201A 100%); }
:root[data-ih="evening"] .pb-reimagine .btn.primary { background: #E7EDE2; color: #171C17; }

/* the generative art inside each pathway (decoration; swap for photography any time) */
.ga-orb { transform-box: fill-box; transform-origin: center; }
:root[data-motion="full"] .ga-orb { animation: ga-drift 9s ease-in-out infinite; }
:root[data-motion="calm"] .ga-orb { animation: ga-drift 16s ease-in-out infinite; }
.ga-orb:nth-child(2n) { animation-delay: -3s !important; } .ga-orb:nth-child(3n) { animation-delay: -6s !important; }
@keyframes ga-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(0, -6px) scale(1.04); } }
.ga-line { fill: none; stroke-linecap: round; }
:root[data-motion="full"] .ga-walk { animation: am-walk 7s linear infinite; }
:root[data-motion="calm"] .ga-walk { animation: am-walk 14s linear infinite; }
.pb-explore .pb-art canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; background: none !important; }

/* D · Featured experience */
.feature { padding-block: var(--sp-5); background: var(--graphite); color: #F6F0EC; }
.feature-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.feature-media { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; background: #0B0A14; box-shadow: 0 0 0 1px rgba(178, 173, 235, .22), 0 40px 100px rgba(0, 0, 0, .45); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-media figcaption { position: absolute; left: 18px; top: 16px; display: inline-flex; gap: 8px; align-items: center; font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; text-transform: uppercase; color: #F6F0EC; background: rgba(11, 10, 20, .55); border: 1px solid rgba(246, 240, 236, .2); border-radius: 999px; padding: 8px 12px 7px; }
.feature-media figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #9CFFB4; box-shadow: 0 0 0 4px rgba(156, 255, 180, .18); }
.feature-copy { display: grid; gap: 18px; justify-items: start; }
.feature-copy .label { color: #B2ADEB; }
.feature-copy h2 { font-size: var(--fs-2); color: #FBF9F7; }
.feature-copy p { margin: 0; color: #DDCDC5; max-width: 44ch; }
.feature-copy .status { font: 500 .86rem/1.4 var(--exp); letter-spacing: .04em; color: #B2ADEB; }
.feature .btn.primary { background: #F6F0EC; color: #141320; } .feature .btn.primary:hover { background: #B2ADEB; color: #141320; }
.feature .moment { color: #F6F0EC !important; border-bottom-color: rgba(178, 173, 235, .6); }

/* E · Beyond the screen */
.beyond { padding-block: var(--sp-5); background: var(--bg); }
.beyond-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.beyond h2 { font-size: var(--fs-2); max-width: 13ch; margin-top: 14px; }
.beyond-copy { display: grid; gap: 20px; justify-items: start; }
.beyond-copy > p { margin: 0; font-size: var(--fs-lede); color: var(--text-2); max-width: 44ch; }
.formats { list-style: none; margin: 0; padding: 0; display: grid; }
.formats li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--rule-2); }
.formats li:last-child { border-bottom: 1px solid var(--rule-2); }
.formats .f-n { font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .1em; color: var(--text-3); }
.formats b { display: block; font: 400 clamp(1.5rem, 2.4vw, 2.05rem)/1.1 var(--display); }
.formats span { display: block; color: var(--text-2); margin-top: 4px; font-size: .98rem; }
.formats .f-cost { font: 500 .78rem/1 var(--exp); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.nothing-yet { margin: 0; padding: 18px 20px; border-radius: var(--r-m); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); color: var(--text); max-width: 46ch; }
.beyond-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* F · Advisory invitation */
.adv-invite { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sp-6); background: linear-gradient(180deg, #DEDDCF 0%, #D2D6C3 100%); color: #19221A; }
.adv-invite::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -30%; width: 70vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(246, 241, 234, .9) 0%, rgba(246, 241, 234, 0) 65%); }
.adv-invite-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.adv-invite h2 { font-size: var(--fs-1); line-height: .95; max-width: 12ch; margin-top: 16px; }
.adv-invite .label { color: #2F4A2E; }
.adv-invite p { margin: 0; color: #33402F; font-size: var(--fs-lede); max-width: 44ch; }
.adv-invite-side { display: grid; gap: 22px; justify-items: start; }
.adv-invite .btn.primary { background: #19221A; color: #F1F0E8; } .adv-invite .btn.primary:hover { background: #3F5B3D; }
.adv-invite .moment { color: #19221A !important; border-bottom-color: #3F5B3D; }
.adv-invite-plan { position: absolute; z-index: -1; right: -6%; bottom: -16%; width: min(52vw, 620px); opacity: .32; pointer-events: none; }
@media (max-width: 1080px) { .adv-invite-plan { opacity: .18; width: 90vw; right: -20%; } }
.adv-invite-plan path, .adv-invite-plan rect, .adv-invite-plan circle { fill: none; stroke: #3F5B3D; stroke-width: 1.2; }
.adv-invite-plan .walk { stroke: #B5482D; stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
:root[data-ih="evening"] .adv-invite { background: linear-gradient(180deg, #161B16 0%, #1B211B 100%); color: #E7EDE2; }
:root[data-ih="evening"] .adv-invite::before { background: radial-gradient(circle, rgba(111, 143, 100, .2) 0%, rgba(111, 143, 100, 0) 65%); }
:root[data-ih="evening"] .adv-invite .label { color: #9DBB8E; } :root[data-ih="evening"] .adv-invite p { color: #C6D2BF; }
:root[data-ih="evening"] .adv-invite .btn.primary { background: #E7EDE2; color: #161B16; }
:root[data-ih="evening"] .adv-invite .moment { color: #E7EDE2 !important; }
:root[data-ih="evening"] .adv-invite-plan path, :root[data-ih="evening"] .adv-invite-plan rect, :root[data-ih="evening"] .adv-invite-plan circle { stroke: #6F8F64; }

/* G · Closing statement + the conversation form */
.closing { padding-block: var(--sp-6) var(--sp-4); text-align: center; background: var(--bg); }
.closing p { margin: 0 auto; font: 400 clamp(2.6rem, 7vw, 6.6rem)/.95 var(--display); letter-spacing: -.02em; max-width: 16ch; }
.closing p em { color: var(--accent-text); }
.closing .ih-mark { width: 54px; height: 54px; margin: 0 auto 28px; }
.close { background: var(--bg); padding-top: var(--sp-4); }
.close h2 { font-size: var(--fs-2); }
.book-form { background: var(--surface); background-image: none; }

/* the presence moment keeps its place, framed as an interlude */
.pause { background: var(--alt); }

/* ====================================================================
   PATHWAY PAGES
   ==================================================================== */
.pw-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(48px, 7vw, 110px) clamp(40px, 5vw, 80px); }
.pw-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.pw-hero h1 { font-size: var(--fs-1); line-height: .95; max-width: 13ch; margin-top: 16px; }
.pw-hero .lede { margin-top: 22px; }
.pw-hero .page-links { margin-top: 28px; }
.pw-hero .pb-art { aspect-ratio: 4 / 5; }
.pw-gather { background: linear-gradient(180deg, #EAD8C6 0%, var(--bg) 100%); }
.pw-explore { background: #141320; color: #F6F0EC; }
.pw-explore .label { color: #B2ADEB; } .pw-explore .lede { color: #DDCDC5; }
.pw-explore .page-links a { color: #F6F0EC; border-color: rgba(246, 240, 236, .3); } .pw-explore .page-links a:hover { background: #F6F0EC; color: #141320; }
.pw-reimagine { background: linear-gradient(180deg, #E4E2D6 0%, var(--bg) 100%); }
:root[data-ih="evening"] .pw-gather { background: linear-gradient(180deg, #2A1E19 0%, var(--bg) 100%); }
:root[data-ih="evening"] .pw-reimagine { background: linear-gradient(180deg, #171C17 0%, var(--bg) 100%); }

.cards3 { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards3 > li { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-l); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.cards3 h3 { font-size: var(--fs-3); }
.cards3 p { margin: 0; color: var(--text-2); }
.cards3 .k { font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.status-pill { justify-self: start; display: inline-flex; gap: 8px; align-items: center; font: 500 .74rem/1 var(--exp); letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--metal); }
.status-pill.live i { background: #4C9A5B; box-shadow: 0 0 0 4px rgba(76, 154, 91, .18); }
.status-pill.soon i { background: var(--periwinkle); }
.deliver { margin: 4px 0 0; padding: 14px 16px; border-radius: var(--r-s); background: rgba(var(--bg-rgb), .7); box-shadow: inset 0 0 0 1px var(--rule); }
.deliver b { display: block; font: 500 var(--fs-label)/1.2 var(--exp); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.deliver span { color: var(--text); }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.split h2 { font-size: var(--fs-2); }
.prose { display: grid; gap: 16px; }
.prose p { margin: 0; color: var(--text-2); font-size: var(--fs-lede); max-width: 56ch; }
.prose p b { color: var(--text); font-weight: 650; }
.steps-line { list-style: none; counter-reset: s; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.steps-line li { counter-increment: s; padding-top: 16px; border-top: 1px solid var(--rule-2); display: grid; gap: 6px; }
.steps-line li::before { content: "0" counter(s); font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; color: var(--accent-text); }
.steps-line b { font: 400 1.5rem/1.1 var(--display); }
.steps-line span { color: var(--text-2); font-size: .98rem; }
.join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: start; padding: clamp(22px, 4vw, 44px); border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.join h2, .join h3 { font-size: var(--fs-3); margin: 8px 0 10px; }
.join-copy p:not(.label) { color: var(--text-2); }
.join form { display: grid; gap: 14px; }
.join .btn { justify-self: start; border: 0; cursor: pointer; }
.pw-explore-cards .cards3 > li { background: rgba(255, 255, 255, .04); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .philo-in, .beyond-in, .adv-invite-in, .feature-in, .split, .paths-head { grid-template-columns: minmax(0, 1fr); }
  .cards3 { grid-template-columns: minmax(0, 1fr); }
  .steps-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .join { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .arrive-in { grid-template-columns: minmax(0, 1fr); }
  .threshold { width: min(78%, 360px); order: -1; margin-bottom: 8px; }
  .path-band .wrap, .pw-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .path-band:nth-of-type(even) .pb-art { order: 0; }
  .pw-hero .pb-art { aspect-ratio: 5 / 4; }
  .formats li { grid-template-columns: 36px minmax(0, 1fr); }
  .formats .f-cost { grid-column: 2; }
}
@media (max-width: 560px) {
  .arrive { padding-top: 18px; }
  .arrive h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .arrive-cta .btn { width: 100%; justify-content: center; }
  .threshold { width: min(70%, 280px); }
  .steps-line { grid-template-columns: minmax(0, 1fr); }
  .pb-num b { font-size: 2.6rem; }
}

/* evidence labels (North Star 6): say what kind of statement each one is */
.ev { display: inline-block; vertical-align: 1px; margin-left: 8px; font: 500 .66rem/1 var(--exp); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 999px; white-space: nowrap; }
.ev-evi { background: rgba(63, 91, 61, .14); color: #2F4A2E; box-shadow: inset 0 0 0 1px rgba(63, 91, 61, .35); }
.ev-int { background: rgba(127, 134, 216, .14); color: #3D3F8F; box-shadow: inset 0 0 0 1px rgba(127, 134, 216, .4); }
.ev-obs { background: rgba(167, 163, 155, .18); color: #4A4239; box-shadow: inset 0 0 0 1px rgba(107, 98, 88, .35); }
.ev-des { background: rgba(224, 103, 74, .12); color: #A03B22; box-shadow: inset 0 0 0 1px rgba(224, 103, 74, .4); }
:root[data-ih="evening"] .ev-evi { color: #A9C99B; } :root[data-ih="evening"] .ev-int { color: #C3C0F2; }
:root[data-ih="evening"] .ev-obs { color: #D2C9BD; } :root[data-ih="evening"] .ev-des { color: #F29A7F; }
.sc-k .ev { margin-left: 6px; }
.ev-key { margin-top: 22px; padding: 18px 20px; border-radius: var(--r-m); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); max-width: 900px; }
.ev-key ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.ev-key li { color: var(--text-2); font-size: .96rem; line-height: 1.5; }
.ev-key li .ev { margin: 0 8px 0 0; }
@media (max-width: 760px) { .ev-key ul { grid-template-columns: minmax(0, 1fr); } }

/* ====================================================================
   ONE FLOW (v2). One palette for the whole site, so every section feels
   like part of the same world: warm sand by day, deep indigo-violet in the
   evening, and a single iridescent accent family (violet, magenta, cyan,
   peach) instead of a different color per section. The page background is
   one continuous gradient; sections sit on it transparently.
   ==================================================================== */
:root {
  --sand: #E6D3BD; --sand-2: #DCC5AB; --sand-3: #EEDFCC;
  --ink: #2E231B; --ink-2: #544943; --ink-3: #6E6272;
  --iri-violet: #F79564; --iri-magenta: #C24F62; --iri-cyan: #2FA3BC; --iri-peach: #E9946A;
  --iri: linear-gradient(100deg, #F68B55 0%, #B37150 28%, #D9576D 46%, #3AA3C4 70%, #F79564 100%);
  --iri-soft: linear-gradient(100deg, #FBC5AA 0%, #F4A6B3 30%, #FFC9A8 50%, #9EE6F2 72%, #FBC5AA 100%);

  --bg: var(--sand); --bg-rgb: 230, 211, 189;
  --alt: var(--sand-2); --surface: var(--sand-3);
  --card: rgba(244, 233, 219, .58);
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
  --accent-text: #86303E; --focus: var(--ink);
  --deco: var(--iri-magenta); --seed: #C24F62;
  --btn-bg: var(--ink); --btn-ink: #F6ECDF; --btn-hover: #835138;
  --rule: rgba(46, 35, 27, .14); --rule-2: rgba(46, 35, 27, .3);
  --chip-on: var(--ink); --chip-on-ink: #F6ECDF; --hover-wash: rgba(46, 35, 27, .06);
  --line-rgb: 46, 35, 27; --accent-rgb: 194, 79, 98; --tile-rgb: 220, 197, 171;
  --flow: linear-gradient(180deg, #E8D6BF 0%, #E6D0BE 14%, #E4CDC6 30%, #DCCED0 48%, #E1D8D4 62%, #E2D1CC 80%, #E6D3BD 100%);
}
:root[data-ih="evening"] {
  --bg: #15122B; --bg-rgb: 21, 18, 43;
  --alt: #1D1839; --surface: #1E1A3B;
  --card: rgba(255, 255, 255, .05);
  --text: #F5EEEA; --text-2: #D7C5BC; --text-3: #B3A097;
  --accent-text: #EBA6B2; --focus: #F5EEEA;
  --deco: #E07C8D; --seed: #E89AA7;
  --btn-bg: #F5EEEA; --btn-ink: #15122B; --btn-hover: #E8D9CF;
  --rule: rgba(245, 238, 234, .13); --rule-2: rgba(245, 238, 234, .3);
  --chip-on: #F5EEEA; --chip-on-ink: #15122B; --hover-wash: rgba(255, 255, 255, .06);
  --line-rgb: 245, 238, 234; --accent-rgb: 224, 124, 141; --tile-rgb: 30, 26, 59;
  --glow-card: radial-gradient(380px 280px at 0% 0%, rgba(232, 217, 207, .07) 0%, rgba(232, 217, 207, 0) 72%);
  --flow: linear-gradient(180deg, #15122B 0%, #312117 18%, #342419 34%, #141A36 52%, #312117 70%, #2D1F15 86%, #15122B 100%);
}
:root[data-contrast="high"] { --text-2: #362C25; --text-3: #453A35; }
:root[data-ih="evening"][data-contrast="high"] { --text-2: #EEE4DD; --text-3: #E1D1C9; }

body { background: var(--bg); background-image: var(--flow); }
.arrive, .philo, .paths, .path-band, .feature, .beyond, .adv-invite, .closing, .close, .foot, .sec, .sec.alt, .sec.glow-l, .sec.glow-r, .question, .work,
.pw-hero, .pw-gather, .pw-explore, .pw-reimagine, .page-hero, .phil, .how-do, .page-hero.phil, .hero {
  background: transparent !important; color: var(--text); }
.sec[style*="surface"] { background: transparent !important; }
.foot { border-top-color: var(--rule); }
.bar { background: rgba(var(--bg-rgb), .78); }
.mega, .menu, .dd-panel, .senses-nudge { background-color: var(--bg); }
:root[data-ih="evening"] .mega, :root[data-ih="evening"] .menu, :root[data-ih="evening"] .dd-panel, :root[data-ih="evening"] .senses-nudge { background-color: #1A1636; }
.pause { background: rgba(var(--bg-rgb), .35); }
.pause::before { background: linear-gradient(90deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .7) 38%, rgba(var(--bg-rgb), 0) 70%) !important; }
@media (max-width: 620px) { .pause::before { background: rgba(var(--bg-rgb), .78) !important; } }
:root[data-ih="evening"] .door-in, :root[data-ih="evening"] .dg-col, :root[data-ih="evening"] .offers li, :root[data-ih="evening"] .who-card,
:root[data-ih="evening"] .senses button, :root[data-ih="evening"] .dg-cards a, :root[data-ih="evening"] .human-pts li, :root[data-ih="evening"] .ways-in a,
:root[data-ih="evening"] .eg, :root[data-ih="evening"] .early, :root[data-ih="evening"] .founding-in, :root[data-ih="evening"] .form-done,
:root[data-ih="evening"] .book-form, :root[data-ih="evening"] .q-who, :root[data-ih="evening"] .cap-card, :root[data-ih="evening"] .span,
:root[data-ih="evening"] .sense-card, :root[data-ih="evening"] .cap-senses { background-color: rgba(255, 255, 255, .05) !important; }
.philo .q-who, .book-form, .join, .cards3 > li, .nothing-yet, .ev-key { background-color: var(--card) !important; }
:root:not([data-ih="evening"]) .philo .who-card { background-color: rgba(250, 242, 232, .8); }

/* the headline: deep ink, and "connected." as living iridescence */
.arrive h1 { color: var(--text); }
.arrive h1 em, .philo h2 em, .paths-head h2 em, .pb-copy h3 em, .beyond h2 em, .adv-invite h2 em, .closing p em, .pw-hero h1 em, .split h2 em {
  background: var(--iri); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
:root[data-ih="evening"] .arrive h1 em, :root[data-ih="evening"] .philo h2 em, :root[data-ih="evening"] .paths-head h2 em, :root[data-ih="evening"] .pb-copy h3 em,
:root[data-ih="evening"] .beyond h2 em, :root[data-ih="evening"] .adv-invite h2 em, :root[data-ih="evening"] .closing p em, :root[data-ih="evening"] .pw-hero h1 em,
:root[data-ih="evening"] .split h2 em { background-image: var(--iri-soft); }
:root[data-motion="full"] .arrive h1 em { animation: iri-flow 9s ease-in-out infinite alternate; }
:root[data-motion="calm"] .arrive h1 em { animation: iri-flow 18s ease-in-out infinite alternate; }
@keyframes iri-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
:root[data-contrast="high"] .arrive h1 em { background: none !important; color: var(--text) !important; }
.arrive-sub { color: var(--text); }

/* the hero: no doorway. A luminous pearl at the spiral's eye */
.th-arch, .th-sill { display: none !important; }
.threshold { aspect-ratio: 1 / 1; width: min(100%, 500px); }
.pearl { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 55%, #F9F6F4 0%, #F2EAE5 40%, #EFCDBC 70%, #DCAD96 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 90px 10px rgba(var(--thread, 185, 166, 255), .55), 0 30px 70px rgba(87, 51, 33, .25); transition: box-shadow 1s ease; }
.pearl::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; filter: blur(14px); opacity: .9;
  background: conic-gradient(from 0deg, #FBC5AA, #F4A6B3, #FFD2B0, #9EE6F2, #E8D9CF, #F4A6B3, #FBC5AA); }
.pearl::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, .25) 16%, rgba(255, 255, 255, 0) 30%),
              radial-gradient(circle at 68% 76%, rgba(255, 255, 255, .35) 0 6%, rgba(255, 255, 255, 0) 22%),
              radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(136, 82, 54, .28) 100%); }
:root[data-motion="full"] .pearl::before { animation: pearl-turn 24s linear infinite; }
:root[data-motion="calm"] .pearl::before { animation: pearl-turn 48s linear infinite; }
:root[data-motion="full"] .pearl { animation: pearl-breathe 10s ease-in-out infinite; }
@keyframes pearl-turn { to { transform: rotate(360deg); } }
@keyframes pearl-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.98); } 50% { transform: translate(-50%, -50%) scale(1.03); } }
.threshold[data-thread="self"] .pearl { --thread: 233, 148, 106; }
.threshold[data-thread="senses"] .pearl { --thread: 244, 166, 179; }
.threshold[data-thread="others"] .pearl { --thread: 247, 149, 100; }
.threshold[data-thread="spaces"] .pearl { --thread: 47, 163, 188; }
.threshold { --thread: 194, 79, 98; }
.threshold[data-thread="self"] { --thread: 233, 148, 106; }
.threshold[data-thread="senses"] { --thread: 194, 79, 98; }
.threshold[data-thread="others"] { --thread: 247, 149, 100; }
.threshold[data-thread="spaces"] { --thread: 47, 163, 188; }
.th-spiral .sp-main { stroke: rgba(var(--thread), .5); }
.thread[data-thread="self"]:hover, .thread[data-thread="self"][aria-pressed="true"] { color: #A4522D; border-bottom-color: #E9946A; }
.thread[data-thread="senses"]:hover, .thread[data-thread="senses"][aria-pressed="true"] { color: #8E2F3F; border-bottom-color: #C24F62; }
.thread[data-thread="others"]:hover, .thread[data-thread="others"][aria-pressed="true"] { color: #4A35B5; border-bottom-color: #F79564; }
.thread[data-thread="spaces"]:hover, .thread[data-thread="spaces"][aria-pressed="true"] { color: #1F6E80; border-bottom-color: #2FA3BC; }
:root[data-ih="evening"] .thread[data-thread="self"]:hover, :root[data-ih="evening"] .thread[data-thread="self"][aria-pressed="true"] { color: #FFC0A0; }
:root[data-ih="evening"] .thread[data-thread="senses"]:hover, :root[data-ih="evening"] .thread[data-thread="senses"][aria-pressed="true"] { color: #F4A6B3; }
:root[data-ih="evening"] .thread[data-thread="others"]:hover, :root[data-ih="evening"] .thread[data-thread="others"][aria-pressed="true"] { color: #E8D9CF; }
:root[data-ih="evening"] .thread[data-thread="spaces"]:hover, :root[data-ih="evening"] .thread[data-thread="spaces"][aria-pressed="true"] { color: #9EE6F2; }
.arrive::before { background: radial-gradient(55% 55% at 74% 46%, rgba(251, 197, 170, .32) 0%, rgba(251, 197, 170, 0) 70%), radial-gradient(40% 40% at 88% 20%, rgba(244, 166, 179, .26) 0%, rgba(244, 166, 179, 0) 70%), radial-gradient(40% 50% at 60% 90%, rgba(158, 230, 242, .2) 0%, rgba(158, 230, 242, 0) 70%) !important; }
:root[data-ih="evening"] .arrive::before { background: radial-gradient(55% 55% at 74% 46%, rgba(247, 149, 100, .28) 0%, rgba(247, 149, 100, 0) 70%), radial-gradient(40% 40% at 88% 20%, rgba(194, 79, 98, .2) 0%, rgba(194, 79, 98, 0) 70%), radial-gradient(40% 50% at 60% 90%, rgba(47, 163, 188, .16) 0%, rgba(47, 163, 188, 0) 70%) !important; }

/* pathways: same world, same type and color; each keeps only a small accent */
.path-band, .pb-gather, .pb-explore, .pb-reimagine { color: var(--text) !important; }
.path-band::before { display: none !important; }
.pb-gather { --deco: var(--iri-peach); } .pb-explore { --deco: var(--iri-violet); } .pb-reimagine { --deco: var(--iri-cyan); }
.path-band .pb-num { color: var(--text-3) !important; }
.path-band .pb-num b { color: var(--deco); }
.path-band .pb-copy p.pb-d { color: var(--text-2) !important; }
.path-band .pb-tags li { box-shadow: inset 0 0 0 1px var(--rule-2) !important; color: var(--text) !important; }
.path-band .btn.primary, .feature .btn.primary, .adv-invite .btn.primary { background: var(--btn-bg) !important; color: var(--btn-ink) !important; }
.path-band .btn.primary:hover, .feature .btn.primary:hover, .adv-invite .btn.primary:hover { background: var(--btn-hover) !important; color: #fff !important; }
:root[data-ih="evening"] .path-band .btn.primary:hover, :root[data-ih="evening"] .feature .btn.primary:hover, :root[data-ih="evening"] .adv-invite .btn.primary:hover { color: var(--btn-ink) !important; }
.path-band .moment, .feature .moment, .adv-invite .moment { color: var(--accent-text) !important; border-bottom-color: var(--deco) !important; }
.pb-explore .pb-copy h3 em { background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; }
.path-band + .path-band { border-top: 1px solid var(--rule); }
.pb-art { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--rule) !important; }
.pb-art figcaption { color: var(--text-2) !important; }
.pb-explore .pb-art, .pw-explore .pb-art, .feature-media { background: #100D24 !important; box-shadow: 0 0 0 1px rgba(247, 149, 100, .25), 0 30px 80px rgba(46, 35, 27, .25) !important; }
.pb-explore .pb-art figcaption { color: #E8D9CF !important; }
.pb-note i { background: var(--deco); }

/* featured, invitation: no more dark or green blocks; they flow */
.feature { color: var(--text) !important; }
.feature-copy .label { color: var(--accent-text) !important; } .feature-copy h2 { color: var(--text) !important; }
.feature-copy p { color: var(--text-2) !important; } .feature-copy .status { color: var(--accent-text) !important; }
.adv-invite, .adv-invite p { color: var(--text) !important; } .adv-invite p { color: var(--text-2) !important; }
.adv-invite .label { color: var(--accent-text) !important; }
.adv-invite::before { background: radial-gradient(circle, rgba(158, 230, 242, .22) 0%, rgba(158, 230, 242, 0) 65%) !important; }
.adv-invite-plan path, .adv-invite-plan rect, .adv-invite-plan circle { stroke: rgba(var(--line-rgb), .55) !important; }
.adv-invite-plan .walk { stroke: var(--iri-magenta) !important; }
.closing p em { color: transparent; }

/* pathway pages: the same flow, the accent carried by the title only */
.pw-explore .label, .pw-explore .lede, .pw-explore .page-links a { color: inherit !important; }
.pw-explore .label { color: var(--accent-text) !important; } .pw-explore .lede { color: var(--text-2) !important; }
.pw-explore .page-links a { border-color: var(--rule-2) !important; }
.pw-explore .page-links a:hover { background: var(--text) !important; color: var(--bg) !important; }
.status-pill.live i { background: var(--iri-cyan); box-shadow: 0 0 0 4px rgba(47, 163, 188, .18); }
.status-pill.soon i { background: var(--iri-violet); }
.deliver b, .cards3 .k, .steps-line li::before { color: var(--accent-text); }
.pb-art svg { color: var(--text); }

/* the mark and the threads share the flow */
.ih-mark .ih-seed { fill: var(--seed); }
::selection { background: #E8D9CF; color: #2E231B; }
.q-who::before { background: radial-gradient(circle, rgba(244, 166, 179, .7) 0%, rgba(251, 197, 170, .3) 42%, rgba(251, 197, 170, 0) 70%) !important; }
:root[data-ih="evening"] .q-who::before { background: radial-gradient(circle, rgba(194, 79, 98, .35) 0%, rgba(247, 149, 100, .15) 42%, rgba(247, 149, 100, 0) 70%) !important; }
.am-window { stroke: #FBC5AA; } .am-path { stroke: var(--iri-magenta); } .am-step { fill: var(--iri-magenta); }
.am-wall { fill: rgba(var(--bg-rgb), .45); }
.founding .wrap.founding-in { width: calc(100% - 2 * var(--gutter)); max-width: calc(1320px - 2 * var(--gutter)); }
.founding-in { border-color: rgba(194, 79, 98, .3) !important; background-image: radial-gradient(420px 200px at 0% 0%, rgba(244, 166, 179, .25), rgba(244, 166, 179, 0) 70%) !important; }

/* ====================================================================
   COLORED LIGHT (v3). The palette now comes from one idea: rooms washed
   in a single saturated light (amber, ember red, magenta, living green),
   the way the installations we draw on use light. Earth by day, a dark
   room by evening. The old "iridescent" names are kept as aliases so
   every earlier rule inherits the new lights without being rewritten.
   ==================================================================== */
:root {
  --light-amber: #E8923A; --light-red: #D8452F; --light-magenta: #C2374E; --light-green: #7FA33F;
  --iri-violet: #A23446; --iri-magenta: #B83248; --iri-cyan: #5C8A33; --iri-peach: #C9702A;
  /* text-safe versions of the lights on sand (all 4.5:1 or better at body size) */
  --lt-amber: #8F4A12; --lt-red: #9C2B1C; --lt-magenta: #8E2436; --lt-green: #42611C;
  --iri: linear-gradient(100deg, #9A4B12 0%, #B2321F 34%, #A0253A 66%, #B2321F 100%);
  --iri-soft: linear-gradient(100deg, #FFC27A 0%, #FF7A5C 34%, #F27C90 66%, #FF7A5C 100%);
  --accent-text: #8A3418; --deco: #C9572B;
  --flow: linear-gradient(180deg, #E8D3BA 0%, #E6CDB8 18%, #E4C6B8 36%, #E2C8B4 54%, #E3CDB6 72%, #E6D3BD 100%);
  --accent-rgb: 184, 50, 72; --seed: #B83248; --btn-hover: #7A2E14;
}
:root[data-ih="evening"] {
  --bg: #15110E; --bg-rgb: 21, 17, 14; --alt: #1E1814; --surface: #201915;
  --text: #F3E9E2; --text-2: #D6C6BA; --text-3: #ADA096;
  --accent-text: #FFB08A; --deco: #FF8A70; --seed: #FF9A6A;
  --btn-bg: #F3E9E2; --btn-ink: #15110E; --btn-hover: #FFC27A;
  --rule: rgba(243, 233, 226, .13); --rule-2: rgba(243, 233, 226, .3);
  --line-rgb: 243, 233, 226; --accent-rgb: 232, 111, 131; --tile-rgb: 34, 27, 22;
  --lt-amber: #FFC27A; --lt-red: #FF8A70; --lt-magenta: #F4A0AE; --lt-green: #B9D77A;
  --flow: radial-gradient(900px 600px at 85% 4%, rgba(232, 146, 58, .14), rgba(232, 146, 58, 0) 70%),
          radial-gradient(900px 700px at 10% 38%, rgba(194, 55, 78, .12), rgba(194, 55, 78, 0) 70%),
          radial-gradient(900px 700px at 90% 70%, rgba(216, 69, 47, .1), rgba(216, 69, 47, 0) 70%),
          radial-gradient(900px 600px at 20% 96%, rgba(127, 163, 63, .08), rgba(127, 163, 63, 0) 70%), #15110E;
}
:root[data-ih="evening"] .mega, :root[data-ih="evening"] .menu, :root[data-ih="evening"] .dd-panel, :root[data-ih="evening"] .senses-nudge { background-color: #1C1612; }
::selection { background: #F2B07A; color: #2E231B; }
.arrive::before { background: radial-gradient(50% 55% at 74% 46%, rgba(232, 146, 58, .26) 0%, rgba(232, 146, 58, 0) 70%), radial-gradient(40% 40% at 92% 14%, rgba(194, 55, 78, .14) 0%, rgba(194, 55, 78, 0) 70%) !important; }
:root[data-ih="evening"] .arrive::before { background: radial-gradient(50% 55% at 74% 46%, rgba(232, 146, 58, .22) 0%, rgba(232, 146, 58, 0) 70%), radial-gradient(40% 40% at 92% 14%, rgba(194, 55, 78, .16) 0%, rgba(194, 55, 78, 0) 70%) !important; }

/* the spiral, used as a system: a small spiral marks every section label (monochrome, static) */
.kicker::before { width: 15px; height: 15px; opacity: .9; background: currentColor;
  -webkit-mask: url(../assets/brand/ih-mark-ink.svg) center / contain no-repeat; mask: url(../assets/brand/ih-mark-ink.svg) center / contain no-repeat; }

/* the threshold: a round window into a lit room; the spiral opens out of its edge */
.threshold { width: min(100%, 500px); aspect-ratio: 1 / 1; --thread: 232, 146, 58; }
.threshold[data-thread="self"] { --thread: 232, 146, 58; }
.threshold[data-thread="senses"] { --thread: 194, 55, 78; }
.threshold[data-thread="others"] { --thread: 216, 69, 47; }
.threshold[data-thread="spaces"] { --thread: 127, 163, 63; }
.th-window { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; isolation: isolate; background: #3A1A0C;
  box-shadow: 0 0 0 1px rgba(var(--thread), .45), 0 0 80px 6px rgba(var(--thread), .38), 0 30px 70px rgba(40, 16, 10, .35); transition: box-shadow 1s ease; }
.th-window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; transform: scale(1.12); }
.th-light { position: absolute; inset: 0; background: rgb(var(--thread)); mix-blend-mode: color; opacity: 0; transition: opacity 1s ease, background-color 1s ease; }
.threshold[data-thread="senses"] .th-light, .threshold[data-thread="others"] .th-light, .threshold[data-thread="spaces"] .th-light { opacity: .72; }
:root[data-motion="full"] .th-window img { animation: room-drift 30s ease-in-out infinite alternate; }
@keyframes room-drift { from { transform: scale(1.12) translateX(-2%); } to { transform: scale(1.2) translateX(2%); } }
.th-spiral .sp-echo { stroke: rgba(var(--line-rgb), .2); }
.th-spiral .sp-main { stroke: rgba(var(--thread), .7); }
.thread[data-thread="self"]:hover, .thread[data-thread="self"][aria-pressed="true"] { color: var(--lt-amber); border-bottom-color: var(--light-amber); }
.thread[data-thread="senses"]:hover, .thread[data-thread="senses"][aria-pressed="true"] { color: var(--lt-magenta); border-bottom-color: var(--light-magenta); }
.thread[data-thread="others"]:hover, .thread[data-thread="others"][aria-pressed="true"] { color: var(--lt-red); border-bottom-color: var(--light-red); }
.thread[data-thread="spaces"]:hover, .thread[data-thread="spaces"][aria-pressed="true"] { color: var(--lt-green); border-bottom-color: var(--light-green); }
:root[data-ih="evening"] .thread[data-thread]:hover, :root[data-ih="evening"] .thread[data-thread][aria-pressed="true"] { color: inherit; }
:root[data-ih="evening"] .thread[data-thread="self"][aria-pressed="true"], :root[data-ih="evening"] .thread[data-thread="self"]:hover { color: var(--lt-amber); }
:root[data-ih="evening"] .thread[data-thread="senses"][aria-pressed="true"], :root[data-ih="evening"] .thread[data-thread="senses"]:hover { color: var(--lt-magenta); }
:root[data-ih="evening"] .thread[data-thread="others"][aria-pressed="true"], :root[data-ih="evening"] .thread[data-thread="others"]:hover { color: var(--lt-red); }
:root[data-ih="evening"] .thread[data-thread="spaces"][aria-pressed="true"], :root[data-ih="evening"] .thread[data-thread="spaces"]:hover { color: var(--lt-green); }

/* three ways in: image cards, each room lit in its own color */
.paths { padding-block: var(--sp-5) var(--sp-5); }
.way-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.way a { display: grid; grid-template-rows: auto 1fr; height: 100%; color: var(--text); text-decoration: none; border-radius: 22px; overflow: hidden; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.way a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--rule-2), 0 30px 70px -30px var(--light); }
.way a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.way-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #2A1410; }
.way-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.way a:hover .way-img img { transform: scale(1.04); }
.way-body { display: grid; gap: 10px; align-content: start; padding: 22px 24px 26px; }
.way-k { font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.way-h { display: flex; justify-content: space-between; align-items: baseline; font: 400 clamp(2rem, 3vw, 2.7rem)/1 var(--display); letter-spacing: -.01em; }
.way-h i { font: 400 1.2rem/1 var(--sans); font-style: normal; transition: transform .4s ease; }
.way a:hover .way-h i { transform: translateX(4px); }
.way-d { color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.way-s { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: .9rem; font-weight: 600; color: var(--text); }
.way-s i { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--light); }
.way-s.live i { background: var(--light); box-shadow: 0 0 0 4px color-mix(in srgb, var(--light) 25%, transparent); }
.way-note { margin: 18px 0 0; font-size: .85rem; color: var(--text-3); }
@media (max-width: 960px) { .way-cards { grid-template-columns: 1fr; max-width: 560px; } .way a { grid-template-columns: 1fr; } }
@media (min-width: 620px) and (max-width: 960px) { .way-cards { max-width: none; } .way a { grid-template-rows: none; grid-template-columns: 42% 1fr; } .way-img { aspect-ratio: auto; } }

/* in person: the formats read as a row of cards, still with no invented dates */
.beyond-in { grid-template-columns: 1fr !important; }
.beyond-copy { max-width: 760px; }
.formats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: var(--sp-3); }
.formats li, .formats li:last-child { grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 22px; border: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.formats li > div b { font-size: 1.45rem; }
.formats .f-cost { justify-self: start; font: 600 .78rem/1 var(--sans); letter-spacing: .04em; padding: 6px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--text); margin-top: 4px; }

/* work with us: always a dark room with one spiral of light */
.adv-invite { background: #140F0C !important; color: #F3E9E2 !important; border-radius: 0; margin-block: var(--sp-4); }
.adv-invite::before { inset: 0 !important; max-width: none !important; aspect-ratio: auto !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; background: radial-gradient(60% 90% at 40% 50%, rgba(216, 69, 47, .32) 0%, rgba(194, 55, 78, .16) 35%, rgba(194, 55, 78, 0) 65%) !important; }
.adv-invite h2, .adv-invite p { color: #F3E9E2 !important; } .adv-invite p { color: #D6C8C8 !important; }
.adv-invite .label { color: #FFB59A !important; }
.adv-invite h2 em { background-image: var(--iri-soft) !important; }
.adv-invite .btn.primary { background: #F3E9E2 !important; color: #140F0C !important; }
.adv-invite .btn.primary:hover { background: #FFC27A !important; color: #140F0C !important; }
.adv-invite .moment { color: #F3E9E2 !important; border-bottom-color: #FF8A70 !important; }
.adv-invite-arc { position: absolute; left: 50%; top: 50%; width: min(64vw, 700px); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.adv-invite-arc path { fill: none; stroke: #FF8A70; stroke-width: 1.4; stroke-linecap: round; opacity: .4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(255, 110, 80, .8)); }
.adv-invite-in { position: relative; z-index: 1; }
.adv-invite :focus-visible { outline-color: #F3E9E2 !important; }

/* status colors follow the lights */
.status-pill.live i { background: var(--light-green); box-shadow: 0 0 0 4px rgba(127, 163, 63, .2); }
.status-pill.soon i { background: var(--light-amber); }
.pb-note i { background: var(--light-red); }
.am-window { stroke: #E8923A; }
.q-who::before { background: radial-gradient(circle, rgba(232, 146, 58, .55) 0%, rgba(194, 55, 78, .2) 42%, rgba(194, 55, 78, 0) 70%) !important; }
:root[data-ih="evening"] .q-who::before { background: radial-gradient(circle, rgba(232, 146, 58, .25) 0%, rgba(194, 55, 78, .12) 42%, rgba(194, 55, 78, 0) 70%) !important; }
.founding-in { border-color: rgba(216, 69, 47, .3) !important; background-image: radial-gradient(420px 200px at 0% 0%, rgba(232, 146, 58, .22), rgba(232, 146, 58, 0) 70%) !important; }
.pb-explore .pb-art, .pw-explore .pb-art, .feature-media { box-shadow: 0 0 0 1px rgba(var(--line-rgb), .12), 0 30px 80px rgba(40, 16, 10, .25) !important; }
.closing .ih-mark { color: var(--text); }
@media (max-width: 860px) { .adv-invite-arc { left: 70%; top: 30%; width: 120vw; } }

/* every page carries one lit room, the same family as the three pillars */
.hero-room { aspect-ratio: 4 / 5; background: #1A120C !important; box-shadow: 0 30px 80px -30px rgba(40, 16, 10, .55) !important; border-radius: 22px; }
.hero-room img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .hero-room { aspect-ratio: 4 / 3; } }
.pw-hero .pb-art { border-radius: 22px; }

/* ====================================================================
   PEARL AND MOSS (v4). Optimistic, retro-futurist, rooted in nature:
   pearl and blush grounds, moss and fern greens, chrome-opal sheen.
   Amber, rose and green remain as lights in the rooms, never the
   whole page. No violet anywhere.
   ==================================================================== */
:root {
  --bg: #E9E0D8; --bg-rgb: 233, 224, 216; --alt: #E2DDD4; --surface: #EFE8E1;
  --ink: #23272A; --text: #23272A; --text-2: #474C4E; --text-3: #61676A;
  --card: rgba(250, 246, 242, .62);
  --accent-text: #3B5C35; --deco: #D7889B; --seed: #C95A78; --focus: #23272A;
  --btn-bg: #23272A; --btn-ink: #F6F1EC; --btn-hover: #3B5C35;
  --rule: rgba(35, 39, 42, .13); --rule-2: rgba(35, 39, 42, .28);
  --line-rgb: 35, 39, 42; --accent-rgb: 201, 90, 120; --tile-rgb: 226, 221, 212;
  --light-magenta: #E58FA5; --light-aqua: #8FD3C8;
  --lt-magenta: #9A3550; --lt-green: #3B5C35;
  --iri: linear-gradient(100deg, #3B5C35 0%, #A63E58 36%, #3E6B78 70%, #3B5C35 100%);
  --iri-soft: linear-gradient(100deg, #F6EFE9 0%, #F7B9C6 28%, #BDE8D2 56%, #B6DCE8 78%, #F6EFE9 100%);
  --chrome: conic-gradient(from 210deg, #F7F3EF, #F4C9D2, #E9F2EC, #C9E8DD, #CFE3EC, #F7F3EF, #DCD6D0, #F4C9D2, #F7F3EF);
  --flow: linear-gradient(180deg, #ECDDD8 0%, #E9E1DA 22%, #E1E4DA 46%, #E4E4E0 64%, #E9E0D9 82%, #ECDDD8 100%);
}
:root[data-ih="evening"] {
  --bg: #121615; --bg-rgb: 18, 22, 21; --alt: #181D1B; --surface: #1A201E;
  --text: #F2EEEA; --text-2: #D0CCC6; --text-3: #A7A49E;
  --card: rgba(255, 255, 255, .05);
  --accent-text: #BFE3C4; --deco: #F2A8BA; --seed: #F2A8BA; --focus: #F2EEEA;
  --btn-bg: #F2EEEA; --btn-ink: #121615; --btn-hover: #F7C6D2;
  --rule: rgba(242, 238, 234, .13); --rule-2: rgba(242, 238, 234, .3);
  --line-rgb: 242, 238, 234; --accent-rgb: 242, 168, 186; --tile-rgb: 26, 32, 30;
  --lt-magenta: #F7B9C6; --lt-green: #BFE3C4;
  --flow: radial-gradient(900px 600px at 85% 4%, rgba(247, 185, 198, .12), rgba(247, 185, 198, 0) 70%),
          radial-gradient(900px 700px at 10% 38%, rgba(189, 232, 210, .09), rgba(189, 232, 210, 0) 70%),
          radial-gradient(900px 700px at 90% 70%, rgba(182, 220, 232, .08), rgba(182, 220, 232, 0) 70%),
          radial-gradient(900px 600px at 20% 96%, rgba(247, 185, 198, .07), rgba(247, 185, 198, 0) 70%), #121615;
}
:root[data-ih="evening"] .mega, :root[data-ih="evening"] .menu, :root[data-ih="evening"] .dd-panel, :root[data-ih="evening"] .senses-nudge { background-color: #181D1B; }
::selection { background: #F4C9D2; color: #23272A; }
.arrive::before { background: radial-gradient(50% 55% at 74% 46%, rgba(244, 201, 210, .45) 0%, rgba(244, 201, 210, 0) 70%), radial-gradient(40% 40% at 92% 14%, rgba(189, 232, 210, .4) 0%, rgba(189, 232, 210, 0) 70%) !important; }
:root[data-ih="evening"] .arrive::before { background: radial-gradient(50% 55% at 74% 46%, rgba(247, 185, 198, .16) 0%, rgba(247, 185, 198, 0) 70%), radial-gradient(40% 40% at 92% 14%, rgba(189, 232, 210, .12) 0%, rgba(189, 232, 210, 0) 70%) !important; }

/* the threshold: a pearl-lit room behind a chrome-opal rim */
.threshold { --thread: 244, 190, 202; }
.th-window { background: #C9A6A4; }
.th-window::after { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 5px; background: var(--chrome);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.th-window img { object-position: 50% 40%; transform: scale(1.04); }
@keyframes room-drift { from { transform: scale(1.04) translateY(-1%); } to { transform: scale(1.1) translateY(1%); } }
.th-spiral .sp-echo { stroke: rgba(var(--line-rgb), .18); }
.threshold[data-thread="self"] .th-light { opacity: .5; }

/* cards carry a faint pearl sheen */
.way a, .cards3 > li, .formats li { background-image: linear-gradient(150deg, rgba(255, 255, 255, .35) 0%, rgba(244, 201, 210, .12) 45%, rgba(201, 232, 221, .14) 100%); }
:root[data-ih="evening"] .way a, :root[data-ih="evening"] .cards3 > li, :root[data-ih="evening"] .formats li { background-image: linear-gradient(150deg, rgba(255, 255, 255, .05) 0%, rgba(247, 185, 198, .05) 45%, rgba(189, 232, 210, .05) 100%); }

/* work with us: a dark moss room with a pearl spiral */
.adv-invite { background: #131816 !important; }
.adv-invite::before { background: radial-gradient(60% 90% at 45% 50%, rgba(247, 185, 198, .2) 0%, rgba(189, 232, 210, .1) 40%, rgba(189, 232, 210, 0) 70%) !important; }
.adv-invite-arc path { stroke: #E9F2EC; opacity: .45; filter: drop-shadow(0 0 6px rgba(247, 185, 198, .8)); }
.adv-invite .label { color: #BFE3C4 !important; }
.adv-invite .btn.primary:hover { background: #F7C6D2 !important; }
.adv-invite .moment { border-bottom-color: #F7B9C6 !important; }
.adv-invite h2, .adv-invite p { color: #F2EEEA !important; } .adv-invite p { color: #D0CCC6 !important; }
.adv-invite .btn.primary { background: #F2EEEA !important; color: #131816 !important; }

/* status lights */
.status-pill.soon i { background: var(--light-magenta); box-shadow: 0 0 0 4px rgba(229, 143, 165, .2); }
.status-pill.live i, .way-s.live i { background: #6E9C52; }
.hero-room { background: #2A2E2C !important; }
.q-who::before { background: radial-gradient(circle, rgba(244, 201, 210, .6) 0%, rgba(189, 232, 210, .25) 42%, rgba(189, 232, 210, 0) 70%) !important; }
:root[data-ih="evening"] .q-who::before { background: radial-gradient(circle, rgba(247, 185, 198, .18) 0%, rgba(189, 232, 210, .08) 42%, rgba(189, 232, 210, 0) 70%) !important; }
.founding-in { border-color: rgba(59, 92, 53, .25) !important; background-image: radial-gradient(420px 200px at 0% 0%, rgba(244, 201, 210, .35), rgba(244, 201, 210, 0) 70%) !important; }

/* even pillars: every card in a row ends on the same line, and the parts inside line up across the row */
.cards3 > li { display: flex; flex-direction: column; }
.cards3 > li > .btn, .cards3 > li > .book-link { margin-top: auto; align-self: flex-start; }
#services .cards3 { grid-template-rows: repeat(6, auto); row-gap: 0; }
#services .cards3 > li { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 12px; }
#services .cards3 > li > .deliver { align-self: stretch; }
#services .cards3 > li > .book-link { align-self: end; justify-self: start; }
@media (max-width: 1080px) { #services .cards3 { grid-template-rows: none; } #services .cards3 > li { grid-row: auto; grid-template-rows: none; display: flex; } }
.way-cards { align-items: stretch; }
.way-body { grid-template-rows: auto auto auto 1fr; }
.way-s { align-self: end; }
/* inside the pillars, every box reads from its top edge */
#services .cards3 > li > .deliver, #services .cards3 > li > .eg { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
#services .cards3 > li > .eg > * { margin-top: 0; margin-bottom: 0; }
/* the connection lighting itself looks the same as one you chose */
.thread[data-thread="self"].is-lit { color: var(--lt-amber); border-bottom-color: var(--light-amber); }
.thread[data-thread="senses"].is-lit { color: var(--lt-magenta); border-bottom-color: var(--light-magenta); }
.thread[data-thread="others"].is-lit { color: var(--lt-red); border-bottom-color: var(--light-red); }
.thread[data-thread="spaces"].is-lit { color: var(--lt-green); border-bottom-color: var(--light-green); }

/* easier reading on the inner pages: body copy a step heavier, secondary text a step darker */
body:not([data-page="home"]) { font-weight: 520; }
body:not([data-page="home"]) :is(p, li, dd, td, .lede, .prose, .fine, figcaption) { font-weight: 520; }
body:not([data-page="home"]) .lede { font-weight: 540; }
body:not([data-page="home"]) :is(h3, .way-h, .sc-k) { font-weight: 500; }
:root:not([data-ih="evening"]) body:not([data-page="home"]) { --text-2: #3C4144; --text-3: #52585B; }
:root[data-ih="evening"] body:not([data-page="home"]) { --text-2: #DDD9D3; --text-3: #B9B5AF; }

/* in-person formats: number, title, description and tag each sit on one shared line across the row */
.formats { grid-auto-rows: auto; row-gap: 0; }
.formats li, .formats li:last-child { grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; margin-bottom: 14px; }
.formats li > div { display: contents; }
.formats li > div > b { align-self: end; }
.formats li > div > span { margin-top: 0; align-self: start; }
.formats .f-cost { align-self: start; }
.formats li > .f-n, .formats li > .f-cost, .formats li > div > * { grid-column: 1 / -1; }

/* Terms and notices: one readable column */
.terms { padding-block: var(--sp-5) var(--sp-6); }
.terms-in { max-width: 68ch; }
.terms h1 { font-size: var(--fs-2); margin: 0 0 .3em; }
.terms .terms-meta { color: var(--text-3); margin: 0 0 var(--sp-4); }
.terms h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 1.8em 0 .5em; scroll-margin-top: 110px; }
.terms p { margin: 0 0 1em; line-height: 1.7; }
.terms a { color: var(--accent-text); }
.early-pending { margin: 0; padding: 18px 20px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); color: var(--text-2); }
.early-pending a { color: var(--accent-text); }

/* In person: copy and a lit room side by side, the plans below */
.beyond-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.beyond-art { margin: 0; border-radius: 22px; overflow: hidden; background: #2A1A10; box-shadow: 0 30px 80px -30px rgba(40, 16, 10, .5); }
.beyond-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 60%; }
.beyond-art figcaption { padding: 10px 16px 12px; font-size: .85rem; color: #E9DCCF; background: #2A1A10; }
.formats-k { margin: var(--sp-4) 0 0; }
.formats { margin-top: 14px; }
@media (max-width: 1080px) { .beyond-top { grid-template-columns: minmax(0, 1fr); } }
.taste { margin: 22px 0 0; }

/* ====================================================================
   THE MOVEMENT FIRST. Believe: a dark editorial band of the questions
   behind the movement. Experience: one flagship, two made-with cards,
   and a quiet line for what's open to everyone.
   ==================================================================== */
.believe { position: relative; overflow: hidden; isolation: isolate; background: #131816; color: #F2EEEA; padding-block: clamp(80px, 11vw, 150px); margin-block: var(--sp-4); }
.believe::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 70% at 85% 20%, rgba(247, 185, 198, .16), rgba(247, 185, 198, 0) 70%), radial-gradient(50% 70% at 10% 90%, rgba(189, 232, 210, .12), rgba(189, 232, 210, 0) 70%); }
.believe::after { content: ""; position: absolute; z-index: -1; right: -8vw; top: 50%; width: min(56vw, 620px); aspect-ratio: 1; transform: translateY(-50%); opacity: .07; background: #F2EEEA;
  -webkit-mask: url(../assets/brand/ih-mark-ink.svg) center / contain no-repeat; mask: url(../assets/brand/ih-mark-ink.svg) center / contain no-repeat; pointer-events: none; }
.believe .label { color: #BFE3C4 !important; }
.believe-head h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.08; max-width: 22ch; margin: 16px 0 0; color: #F2EEEA; }
.believe-head h2 em { background-image: var(--iri-soft) !important; }
.believe-qs { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 80px); max-width: 1100px; }
.believe-qs li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 24px 0; border-top: 1px solid rgba(242, 238, 234, .16); }
.bq-n { font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .12em; color: #F7B9C6; }
.believe-qs p { margin: 0; font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.25 var(--display); color: #F2EEEA; }
.believe-close { margin: clamp(40px, 6vw, 64px) 0 0; font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--display); color: #D0CCC6; }
.believe-close em { font-style: italic; background: var(--iri-soft); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
@media (max-width: 760px) { .believe-qs { grid-template-columns: minmax(0, 1fr); } }

.experience { padding-block: var(--sp-5); }
.exp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; padding-bottom: var(--sp-4); }
.exp-head h2 { font-size: var(--fs-2); margin-top: 14px; max-width: 14ch; }
.exp-head h2 em { background: var(--iri); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
:root[data-ih="evening"] .exp-head h2 em { background-image: var(--iri-soft); }
.exp-head > p { margin: 0; color: var(--text-2); font-size: var(--fs-lede); max-width: 46ch; }
.flagship { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border-radius: 26px; overflow: hidden; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule), 0 40px 90px -50px rgba(40, 16, 10, .55); background-image: linear-gradient(150deg, rgba(255, 255, 255, .35), rgba(244, 201, 210, .12) 45%, rgba(201, 232, 221, .14)); }
.flag-art { position: relative; margin: 0; min-height: 100%; background: #2A1A10; }
.flag-art img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 40% 60%; }
.flag-art figcaption { position: absolute; left: 14px; bottom: 12px; right: 14px; font-size: .8rem; color: #F2E6DA; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.flag-copy { display: grid; gap: 14px; align-content: center; padding: clamp(26px, 4vw, 52px); }
.flag-k { margin: 0; display: flex; gap: 10px; align-items: center; font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.flag-k span { padding: 6px 10px; border-radius: 99px; background: var(--btn-bg); color: var(--btn-ink); }
.flag-copy h3 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1; margin: 2px 0 0; }
.flag-copy > p { margin: 0; color: var(--text-2); font-size: 1.06rem; line-height: 1.6; }
.flag-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flag-tags li { font-size: .85rem; font-weight: 600; padding: 7px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.flag-status { display: flex; gap: 9px; align-items: center; font-size: .92rem; font-weight: 600; color: var(--text) !important; }
.flag-status i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--light-amber); flex: none; }
.exp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(14px, 2vw, 22px); }
.exp-card { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .3), rgba(201, 232, 221, .12)); }
.exp-card h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin: 0; }
.exp-card p { margin: 0; color: var(--text-2); }
.exp-card .moment { justify-self: start; margin-top: 6px; }
.exp-k { margin: 0; font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.exp-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 28px; align-items: center; margin-top: clamp(26px, 4vw, 44px); padding: 20px 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.exp-open p:not(.exp-k) { margin: 0; color: var(--text-2); }
:root[data-ih="evening"] .flagship, :root[data-ih="evening"] .exp-card { background-color: rgba(255, 255, 255, .05); background-image: none; }
@media (max-width: 1080px) { .exp-head { grid-template-columns: minmax(0, 1fr); } .flagship { grid-template-columns: minmax(0, 1fr); } .flag-art img { min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 760px) { .exp-pair { grid-template-columns: minmax(0, 1fr); } .exp-open { grid-template-columns: minmax(0, 1fr); } }
.deliver .fmt { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--text-2); }
.deliver .fmt b { display: inline; color: var(--text); }
.believe-head h2 em { background: var(--iri-soft) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; padding-right: .06em; }

/* Sensory health, explained */
.ev-int { background: rgba(62, 107, 120, .12); color: #2F5F6B; box-shadow: inset 0 0 0 1px rgba(62, 107, 120, .38); }
:root[data-ih="evening"] .ev-int { color: #B6DCE8; }
.sh-hero h1 { max-width: 13ch; }
.sh-narrow { max-width: 780px; }
.sh-prose p { margin: 0 0 1.1em; font-size: 1.12rem; line-height: 1.7; color: var(--text-2); }
.sh-prose p:first-child { color: var(--text); }
.sh-pull { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.2 var(--display) !important; color: var(--text) !important; margin-top: 1.4em !important; }
.sh-pull em { background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
:root[data-ih="evening"] .sh-pull em { background-image: var(--iri-soft); }
.sh-believe h2, #incl-h { font-size: var(--fs-2); margin: 14px 0 26px; }
.sh-terms .sh-built { margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .92rem; }
.sh-terms .sh-built b { color: var(--text); }
.sh-qs { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sh-qs li { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.sh-qs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sh-qs h3 { margin: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; }
.sh-n { display: block; margin-bottom: 8px; font: 500 var(--fs-label)/1 var(--exp); letter-spacing: .12em; color: var(--accent-text); }
.sh-qs p { margin: 0; color: var(--text-2); line-height: 1.65; }
.sh-qs p .ev { margin: 0 8px 0 0; }
.sh-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sh-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sh-checks li { position: relative; padding: 14px 16px 14px 44px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.sh-checks li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background: var(--accent-text);
  -webkit-mask: url(../assets/brand/ih-mark-ink.svg) center / contain no-repeat; mask: url(../assets/brand/ih-mark-ink.svg) center / contain no-repeat; }
.sh-apps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.sh-apps li { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.sh-apps h3 { margin: 0; font-size: 1.5rem; }
.sh-apps p { margin: 0; color: var(--text-2); }
.sh-apps .moment { justify-self: start; margin-top: auto; }
.sh-refs { margin: var(--sp-3) 0 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: .95rem; color: var(--text-2); }
.sh-refs a { color: var(--accent-text); }
@media (max-width: 900px) { .sh-qs, .sh-split { grid-template-columns: minmax(0, 1fr); } }

/* the floating line: one phrase at a time, sitting on a line of light that drifts */
.float-line { position: relative; display: inline-block; min-width: 11ch; margin: 2px 0 0; padding-bottom: 12px; font: italic 400 clamp(2rem, 3.6vw, 3rem)/1.1 var(--display); color: var(--text); --fl: 232, 146, 58; }
.float-line[data-thread="senses"] { --fl: 229, 143, 165; } .float-line[data-thread="others"] { --fl: 216, 69, 47; } .float-line[data-thread="spaces"] { --fl: 127, 163, 63; }
.fl-word { display: inline-block; transition: opacity .32s ease, transform .32s ease, filter .32s ease; }
.fl-word.out { opacity: 0; transform: translateY(8px); filter: blur(3px); }
.fl-rule { position: absolute; left: 0; right: -18%; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--fl), .95), rgba(var(--fl), .35) 70%, rgba(var(--fl), 0)); box-shadow: 0 0 14px rgba(var(--fl), .55); transition: background 1s ease, box-shadow 1s ease; }
:root[data-motion="full"] .float-line { animation: fl-float 6s ease-in-out infinite; }
:root[data-motion="calm"] .float-line { animation: fl-float 11s ease-in-out infinite; }
@keyframes fl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* the four connections become small choices under the line */
.threads-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font: 500 .95rem/1 var(--sans) !important; max-width: none; }
.threads-row .thread { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 0 !important; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--text-2) !important; font: inherit; }
.threads-row .thread::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-2); transition: background .4s, box-shadow .4s; }
.threads-row .thread[data-thread="self"] { --c: var(--light-amber); } .threads-row .thread[data-thread="senses"] { --c: var(--light-magenta); }
.threads-row .thread[data-thread="others"] { --c: var(--light-red); } .threads-row .thread[data-thread="spaces"] { --c: var(--light-green); }
.threads-row .thread.is-lit, .threads-row .thread:hover, .threads-row .thread[aria-pressed="true"] { color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--c); }
.threads-row .thread.is-lit::before, .threads-row .thread:hover::before, .threads-row .thread[aria-pressed="true"]::before { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.threads-row .thread[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 14%, transparent); }
/* "Where the thinking shows up": titles, text and links sit on shared lines across the row */
.sh-apps { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 0; }
.sh-apps li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; margin-bottom: 14px; }
.sh-apps li > h3 { align-self: end; }
.sh-apps li > .moment { align-self: end; justify-self: start; margin-top: 6px; }
@media (max-width: 1180px) { .sh-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sh-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sh-apps { grid-template-columns: minmax(0, 1fr); } }

/* ====================================================================
   THE OFFICIAL MARK. The Immersive Health logo, used exactly as drawn;
   only its color is tuned: champagne to soft green, deeper on light
   grounds so it holds at small sizes, pearlier in the evening.
   ==================================================================== */
.ih-logo { position: relative; display: block; width: 100%; height: 100%; }
.ih-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s ease; }
.ih-logo .ih-logo-eve { opacity: 0; }
:root[data-ih="evening"] .ih-logo .ih-logo-day { opacity: 0; }
:root[data-ih="evening"] .ih-logo .ih-logo-eve { opacity: 1; }
.wordmark .wm-mark { width: 50px; height: 37px; }
@media (max-width: 720px) { .wordmark .wm-mark { width: 44px; height: 32px; } }
.foot-lockup .wm-mark { width: 84px; height: 62px; }
.closing .ih-logo { width: min(240px, 60vw); height: auto; aspect-ratio: 160 / 117; margin: 0 auto 30px; }
/* the mark as a one-color glyph for labels, lists and the dark band */
.kicker::before { width: 21px; height: 15px; -webkit-mask: url(../assets/brand/ih-logo-mark.svg) center / contain no-repeat !important; mask: url(../assets/brand/ih-logo-mark.svg) center / contain no-repeat !important; }
.sh-checks li::before { width: 21px; height: 15px; -webkit-mask: url(../assets/brand/ih-logo-mark.svg) center / contain no-repeat !important; mask: url(../assets/brand/ih-logo-mark.svg) center / contain no-repeat !important; }
.believe::after { aspect-ratio: 160 / 117; opacity: .09; -webkit-mask: url(../assets/brand/ih-logo-mark.svg) center / contain no-repeat !important; mask: url(../assets/brand/ih-logo-mark.svg) center / contain no-repeat !important;
  background: linear-gradient(120deg, #E8D6B6, #F2E6DC 40%, #C6D8BE 70%, #A9C4AA) !important; }
/* the hero: the official mark's ribbons orbit the window into the room */
.threshold .th-spiral { display: none; }
.threshold .th-logo { position: absolute; left: 50%; top: 50%; width: 132%; height: auto; aspect-ratio: 640 / 470; transform: translate(-50%, -50%); pointer-events: none; opacity: .95; }
:root[data-motion="full"] .threshold .th-logo { animation: logo-breathe 14s ease-in-out infinite; }
:root[data-motion="calm"] .threshold .th-logo { animation: logo-breathe 26s ease-in-out infinite; }
@keyframes logo-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.985) rotate(-1deg); } 50% { transform: translate(-50%, -50%) scale(1.015) rotate(1deg); } }
.threshold .th-window { width: 40%; }
:root:not([data-ih="evening"]) .threshold .th-logo .ih-logo-day { opacity: 0; }
:root:not([data-ih="evening"]) .threshold .th-logo .ih-logo-eve { opacity: 1; filter: drop-shadow(0 14px 22px rgba(60, 48, 36, .22)) drop-shadow(0 2px 3px rgba(60, 48, 36, .25)) saturate(1.1) contrast(1.05); }

/* footer: the mark, then the name on one line, aligned with the motto beneath */
.foot-lockup { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
.foot-lockup .wm-name { white-space: nowrap; font-size: clamp(15px, 1.35vw, 19px) !important; line-height: 1 !important; letter-spacing: .32em !important; margin: 0 !important; padding: 0 !important; }
.foot-motto { margin-top: 18px !important; }
.foot-lockup .wm-name { font-size: clamp(14px, 1.15vw, 17px) !important; letter-spacing: .24em !important; }
/* phones: the name stacks on two lines so it never runs under the Senses button */
@media (max-width: 520px) {
  .wordmark { gap: 8px !important; min-width: 0; }
  .wordmark .wm-mark { width: 40px !important; height: 30px !important; }
  .wordmark .wm-type { display: flex; flex-direction: column; gap: 3px; }
  .wordmark .wm-name { font-size: .64rem !important; letter-spacing: .2em !important; line-height: 1.15 !important; white-space: normal !important; width: 7.6em; }
  .wordmark .wm-llc { display: none !important; }
}
.foot-social { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; }
.foot-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--text); text-decoration: none; font-size: .95rem; }
.foot-social a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.foot-social svg { flex: none; color: var(--accent-text); }