/* Lull · sleep ring + coaching membership
   Fields: plum night, lilac, mint, butter, white. Hard edges between bands, no gradients between hues. */

@font-face { font-family: 'Wix Madefor Display'; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/lull__fonts-wix-madefor-display-latin.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/lull__fonts-rethink-sans-latin.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Reddit Mono'; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/lull__fonts-reddit-mono-500-latin.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --plum: #1A0B3D;
  --lilac: #C7B8FF;
  --mint: #B8F2E0;
  --butter: #FFEF7A;
  --white: #FFFFFF;
  --black: #000000;

  --white-72: rgba(255, 255, 255, .72);
  --white-50: rgba(255, 255, 255, .5);
  --white-16: rgba(255, 255, 255, .16);
  --white-08: rgba(255, 255, 255, .08);
  --black-64: rgba(0, 0, 0, .64);
  --black-14: rgba(0, 0, 0, .14);
  --black-08: rgba(0, 0, 0, .08);
  --plum-12: rgba(26, 11, 61, .12);
  --butter-40: rgba(255, 239, 122, .4);

  --f-title: 'Wix Madefor Display', system-ui, sans-serif;
  --f-ui: 'Rethink Sans', system-ui, sans-serif;
  --f-mono: 'Reddit Mono', ui-monospace, monospace;

  --gut: clamp(16px, 4.4vw, 64px);
  --r: 6px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--plum); color: var(--white); font: 400 17px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; color: transparent; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--butter); color: var(--black); padding: 10px 14px; border-radius: 999px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--butter); outline-offset: 3px; }
.field-lilac :focus-visible, .field-mint :focus-visible, .field-butter :focus-visible, .field-white :focus-visible { outline-color: var(--plum); }

.wrap { padding-inline: var(--gut); }
.label { font: 500 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.display { font-family: var(--f-title); font-weight: 600; letter-spacing: -.03em; line-height: .98; }

.field-plum { background: var(--plum); color: var(--white); }
.field-lilac { background: var(--lilac); color: var(--black); }
.field-mint { background: var(--mint); color: var(--black); }
.field-butter { background: var(--butter); color: var(--black); }
.field-white { background: var(--white); color: var(--black); }

/* word rise: words sit in clipping spans */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wd__in { display: inline-block; will-change: transform; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: 500 16px/1 var(--f-ui); text-decoration: none; transition: transform .25s var(--ease-out), background-color .25s; }
.btn--butter { background: var(--butter); color: var(--black); }
.btn--butter:hover { transform: translateY(-2px); }

/* ---------------- NAV ---------------- */
.nav { position: fixed; z-index: 50; top: 0; padding-top: 16px; left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav__pill { display: flex; align-items: center; gap: 28px; background: var(--white); color: var(--black); border-radius: 999px; padding: 8px 10px 8px 16px; }
.logo { display: flex; align-items: center; gap: 7px; text-decoration: none; font: 700 22px/1 var(--f-title); letter-spacing: -.04em; }
.logo svg { width: 20px; height: 20px; color: var(--plum); }
.nav__links { display: flex; gap: 4px; }
.nav__links a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; font: 500 14px/1 var(--f-ui); transition: background-color .2s; }
.nav__links a:hover { background: var(--lilac); }
.nav__cta { display: flex; align-items: center; gap: 10px; background: var(--butter); color: var(--black); text-decoration: none; border-radius: 999px; padding: 12px 18px; font: 500 15px/1 var(--f-ui); }
.nav__price { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* ---------------- PACER (signature) ---------------- */
.pacer { position: fixed; z-index: 60; right: 16px; bottom: 16px; }
.pacer__btn { display: flex; align-items: center; gap: 12px; background: var(--plum); color: var(--white); border: 1px solid rgba(199, 184, 255, .45); border-radius: 999px; padding: 7px 18px 7px 7px; cursor: pointer; }
.pacer__ring { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--lilac); display: grid; place-items: center; flex: none; }
.pacer__core { width: 30px; height: 30px; border-radius: 50%; background: var(--mint); transform: scale(.45); will-change: transform; }
.pacer__text { display: grid; text-align: left; }
.pacer__label { font: 500 14px/1.2 var(--f-ui); }
.pacer__sub { font: 500 10px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--white-72); }
.pacer__btn[aria-pressed="true"] { border-color: var(--butter); }
.pacer__text { max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--ease-out), opacity .3s; }
.pacer.is-compact:not(:hover):not(:focus-within) .pacer__btn[aria-pressed="false"] .pacer__text { max-width: 0; opacity: 0; }
.pacer.is-compact:not(:hover):not(:focus-within) .pacer__btn[aria-pressed="false"] { padding-right: 7px; gap: 0; }
.pacer__btn { transition: padding .45s var(--ease-out), gap .45s var(--ease-out); }
.pacer__btn[aria-pressed="true"] .pacer__core { background: var(--butter); }
.dim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; pointer-events: none; display: grid; place-items: end center; padding-bottom: 14vh; }
.dim.is-on { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.dim__cue { font: 500 clamp(22px, 2.4vw, 34px)/1 var(--f-title); letter-spacing: -.02em; color: var(--white); }

/* ---------------- §1 HERO ---------------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-top: 110px; }
.hero__moon { position: absolute; left: 72%; top: 44%; width: min(40vw, 62vh); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.hero__glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 239, 122, .34), rgba(255, 239, 122, .1) 55%, rgba(255, 239, 122, 0) 100%); }
.hero__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--butter); box-shadow: 0 0 60px 10px var(--butter-40); }
.hero__canvas { position: absolute; left: 44%; top: 0; width: 56%; height: 88%; pointer-events: none; }
.hero__copy { position: relative; z-index: 2; width: min(100%, 52vw); padding-bottom: 28px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--white-72); margin-bottom: 22px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.hero__title { font-size: clamp(46px, 6.2vw, 104px); max-width: 9.5em; }
.hero__lede { margin-top: 22px; max-width: 31em; color: var(--white-72); font-size: 18px; }
.quiz { margin-top: 30px; }
.quiz__q { color: var(--white-72); margin-bottom: 12px; }
.quiz__chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; }
.chip { border: 0; background: var(--white); color: var(--black); padding: 12px 18px; border-radius: 999px; font: 500 15px/1 var(--f-ui); cursor: pointer; transition: background-color .05s ease-in, transform .05s ease-in; }
.chip:hover { background: var(--mint); }
.chip--ghost { background: var(--white-16); color: var(--white); box-shadow: inset 0 0 0 1px var(--white-50); }
.chip--ghost:hover { background: var(--white-08); }
.chip[aria-pressed="true"] { background: var(--butter); color: var(--black); box-shadow: none; }
.quiz__promise { margin-top: 14px; min-height: 3em; max-width: 36em; color: var(--white); font-size: 16px; }
.bedtime { position: relative; z-index: 2; display: flex; gap: clamp(20px, 4vw, 64px); align-items: flex-end; border-top: 1px solid var(--white-16); padding-top: 18px; padding-bottom: 22px; }
.bedtime .label { color: var(--white-72); display: block; margin-bottom: 8px; }
.bedtime__input { background: transparent; border: 0; border-bottom: 1.5px solid var(--lilac); color: var(--white); font: 600 34px/1.1 var(--f-title); font-variant-numeric: tabular-nums; letter-spacing: -.02em; padding: 0 6px 4px 0; width: auto; min-width: 9.2ch; color-scheme: dark; }
.bedtime__input:focus { outline: none; border-bottom-color: var(--butter); }
.bedtime__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bpill { display: inline-flex; align-items: baseline; gap: 8px; background: var(--butter); color: var(--black); border-radius: 999px; padding: 10px 16px; font: 600 20px/1 var(--f-title); letter-spacing: -.01em; }
.bpill small { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.bpill--soft { background: var(--white-16); color: var(--white); }

/* ---------------- §2 WAVES ---------------- */
.waves { position: relative; height: 500vh; }
.waves__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.waves__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.waves__intro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; justify-items: center; gap: 16px; padding: 0 var(--gut); will-change: transform, opacity; }
.waves__intro .label { color: var(--mint); }
.waves__title { font-size: clamp(44px, 6.6vw, 110px); }
.waves__sub { color: var(--white-72); }
.waves__stage { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 160px; padding-bottom: 92px; background: linear-gradient(to top, var(--plum) 0%, rgba(26, 11, 61, .94) 48%, rgba(26, 11, 61, 0) 100%); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; opacity: 0; }
.waves__now { max-width: 520px; }
.waves__clock { color: var(--mint); }
.waves__name { font: 600 clamp(48px, 7vw, 116px)/1 var(--f-title); letter-spacing: -.03em; margin: 8px 0 12px; }
.waves__body { color: var(--white); font-size: 18px; max-width: 30em; min-height: 4.5em; }
.hypno { width: 300px; flex: none; }
.hypno__svg { width: 100%; height: auto; overflow: visible; }
.hypno__grid line { stroke: var(--white-16); stroke-width: 1; }
.hypno__path { fill: none; stroke: var(--lilac); stroke-width: 2.5; stroke-linejoin: round; }
.hypno__dot { fill: var(--butter); }
.hypno__keys { display: flex; justify-content: space-between; color: var(--white-50); margin-top: 8px; }
.waves__ticks { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; text-align: right; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--white-50); opacity: 0; }
.waves__ticks li { transition: color .3s; }
.waves__ticks li.is-on { color: var(--butter); }

/* ---------------- §3 FLOAT ---------------- */
.float { position: relative; padding-bottom: 110px; }
.float__stage { position: relative; height: 72vh; min-height: 460px; }
.float__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.float__head { position: relative; text-align: center; margin-top: -9vh; }
.float__title { font-size: clamp(42px, 6.8vw, 118px); max-width: 12em; margin: 0 auto; }
.float__sub { max-width: 34em; margin: 22px auto 0; font-size: 19px; }
.press { margin-top: 90px; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); padding: 18px 0 22px; overflow: hidden; }
.press__label { margin-bottom: 14px; }
.press__track { display: flex; width: max-content; will-change: transform; }
.press__row { display: flex; gap: 64px; padding-right: 64px; }
.press__row li { font: 600 clamp(24px, 2.6vw, 40px)/1 var(--f-title); letter-spacing: -.03em; white-space: nowrap; }
.press__row li:nth-child(3n+2) { font-family: var(--f-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(18px, 1.8vw, 28px); }
.press__row li:nth-child(3n) { font-weight: 500; letter-spacing: -.05em; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 90px; }
.card { border-radius: var(--r); padding: 12px 12px 22px; display: flex; flex-direction: column; }
.card:nth-child(even) { margin-top: 64px; }
.card--dark { background: var(--plum); color: var(--white); }
.card--light { background: var(--white); color: var(--black); }
.card__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--mint); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__t { font: 600 24px/1.1 var(--f-title); letter-spacing: -.02em; margin: 18px 6px 8px; }
.card__p { font-size: 15px; margin: 0 6px; opacity: .8; }

/* ---------------- §4 DATA ---------------- */
.data { padding: 140px 0 140px; }
.data__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.data__sticky { position: sticky; top: 110px; }
.data__title { font-size: clamp(40px, 4.6vw, 76px); margin: 14px 0 34px; }
.statements { display: grid; gap: 12px; justify-items: start; }
.statement { font: 500 clamp(22px, 2.1vw, 34px)/1.2 var(--f-title); white-space: nowrap; letter-spacing: -.02em; background: var(--white); border-radius: 999px; padding: 14px 26px 14px 26px; }
.ipill { display: inline-flex; align-items: center; gap: 6px; background: var(--butter); color: var(--black); border-radius: 999px; padding: .06em .42em; margin: 0 .1em; line-height: 1.1; }
.ipill svg { width: .7em; height: .7em; }
.ipill--plum { background: var(--plum); color: var(--butter); }
.data__note { margin-top: 28px; font-size: 13px; color: var(--black-64); max-width: 30em; }
.data__cards { display: grid; gap: 14px; }
.dcard { background: var(--white); border-radius: var(--r); padding: 24px; }
.dcard__h { display: flex; justify-content: space-between; color: var(--black-64); margin-bottom: 18px; }
.score { position: relative; width: 220px; margin: 6px auto 18px; }
.score__svg { width: 100%; transform: rotate(-90deg); }
.score__track { fill: none; stroke: var(--plum-12); stroke-width: 10; }
.score__arc { fill: none; stroke: var(--plum); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; }
.score__n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 600 64px/1 var(--f-title); letter-spacing: -.04em; }
.score__n small { display: block; font: 500 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--black-64); }
.dcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black-08); padding-top: 16px; }
.dcard__stats li { display: grid; }
.dcard__stats b { font: 600 22px/1.2 var(--f-title); letter-spacing: -.02em; }
.dcard__stats span { font-size: 13px; color: var(--black-64); }
.temp__svg { width: 100%; height: auto; overflow: visible; }
.temp__grid line { stroke: var(--black-08); }
.temp__area { fill: var(--lilac); opacity: .55; }
.temp__line { fill: none; stroke: var(--plum); stroke-width: 3; stroke-linecap: round; }
.temp__dot { fill: var(--butter); stroke: var(--plum); stroke-width: 2.5; }
.dcard__foot { display: flex; justify-content: space-between; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--black-64); margin-top: 10px; }
.dcard--chat { background: var(--plum); color: var(--white); }
.dcard--chat .dcard__h { color: var(--white-72); }
.chat { display: grid; gap: 10px; }
.chat__who { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.chat__who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--lilac); }
.chat__who p { display: grid; font-size: 14px; line-height: 1.3; }
.chat__who span { color: var(--white-72); }
.bubble { background: var(--lilac); color: var(--black); padding: 12px 16px; border-radius: 18px 18px 18px 4px; max-width: 88%; font-size: 15px; }
.bubble--me { justify-self: end; background: var(--butter); border-radius: 18px 18px 4px 18px; }
.dcard--mug { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding: 12px; }
.dcard__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--lilac); }
.dcard__img img { width: 100%; height: 100%; object-fit: cover; }
.dcard__cap { font-size: 15px; padding-right: 12px; }
.dcard__cap .label { display: block; color: var(--black-64); margin-bottom: 8px; }

/* ---------------- §5 DEBT ---------------- */
.debt { position: relative; }
.debt__scroll { position: relative; height: 460vh; }
.debt__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.debt__text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.debt__title { font: 600 clamp(36px, 4.8vw, 80px)/1.04 var(--f-title); letter-spacing: -.03em; max-width: 15em; }
.debt__title .sw-word { display: inline-block; will-change: opacity, filter, transform; }
.debt__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.debt__chip { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--black-14); border-radius: 999px; padding: 10px 16px; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; }
.sw { width: 10px; height: 10px; border-radius: 50%; }
.sw--lilac { background: var(--lilac); }
.sw--mint { background: var(--mint); }
.tiles { position: absolute; inset: 38px 24px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 20px; pointer-events: none; }
.tile { position: relative; overflow: hidden; background: var(--lilac); opacity: 0; will-change: transform, opacity; }
.tile img { position: absolute; max-width: none; object-fit: cover; }
.tile--tl { border-top-left-radius: 16px; } .tile--tr { border-top-right-radius: 16px; }
.tile--bl { border-bottom-left-radius: 16px; } .tile--br { border-bottom-right-radius: 16px; }
.tiles__final { position: absolute; inset: 0; opacity: 0; clip-path: inset(38px 24px round 16px); }
.tiles__final img { width: 100%; height: 100%; object-fit: cover; }
.tiles__final::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(26, 11, 61, .62), rgba(26, 11, 61, 0)); pointer-events: none; }
.tiles__final figcaption { position: absolute; z-index: 1; left: var(--gut); bottom: 48px; color: var(--white); display: grid; gap: 10px; }
.tiles__final figcaption b { font: 600 clamp(32px, 4.4vw, 72px)/1 var(--f-title); letter-spacing: -.03em; max-width: 12em; }
.tiles__final figcaption .label { background: var(--butter); color: var(--black); justify-self: start; padding: 6px 10px; border-radius: 999px; }
.rail { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; gap: 5px; z-index: 3; }
.rail span { width: 4px; height: 16px; border-radius: 4px; background: var(--black-14); }
.meet { padding: 150px var(--gut) 150px; }
.meet__line { font: 500 clamp(30px, 4.2vw, 68px)/1.22 var(--f-title); letter-spacing: -.03em; max-width: 19em; }
.meet__line .w { display: inline-block; will-change: opacity, filter, transform; }
.ipic { display: inline-block; height: 1.05em; width: 1.25em; object-fit: cover; border-radius: 12px; vertical-align: -.16em; background: var(--lilac); margin: 0 .04em; }
.ipic[src$=".png"] { background: var(--mint); }
.meet__foot { display: flex; gap: 40px; justify-content: space-between; align-items: flex-end; margin-top: 60px; border-top: 1px solid var(--black-14); padding-top: 26px; }
.meet__foot p { max-width: 34em; font-size: 18px; }

/* ---------------- §6 TOUR ---------------- */
.tour { position: relative; height: 600vh; }
.tour__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tour__head { position: absolute; top: 108px; left: 0; z-index: 2; }
.tour__title { font: 600 clamp(36px, 4.4vw, 72px)/1 var(--f-title); letter-spacing: -.03em; margin-top: 10px; }
.li { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.li__in { display: block; transform: translateY(105%); will-change: transform; }
.tour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.callout { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 16px; will-change: transform; }
.callout__line { display: block; height: 1px; width: 0; background: var(--black); opacity: 0; margin-top: 8px; flex: none; }
.callout__txt { width: 250px; font-size: 14px; line-height: 1.45; }
.callout__txt .label { margin-bottom: 4px; }
.callout--a { right: 57.5vw; top: 39vh; flex-direction: row-reverse; text-align: right; }
.callout--b { left: 63.5vw; top: 31vh; }
.callout--c { left: 64.5vw; top: 62vh; }
.callout--d { right: 56.5vw; top: 70vh; flex-direction: row-reverse; text-align: right; }
.tour__progress { position: absolute; left: var(--gut); bottom: 28px; }

/* ---------------- WHOM (image scroll) ---------------- */
.whom { padding: 130px 0 120px; }
.whom__title { font-size: clamp(40px, 5.4vw, 92px); margin-top: 14px; max-width: 11em; }
.whom__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 60px; }
.iscroll__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r); background: var(--mint); will-change: transform; }
.iscroll__img img { width: 100%; height: 100%; object-fit: cover; }
.iscroll figcaption { margin-top: 14px; font-size: 15px; max-width: 26em; }
.iscroll figcaption b { display: block; font: 600 22px/1.2 var(--f-title); letter-spacing: -.02em; }

/* ---------------- JOIN ---------------- */
.join { position: relative; height: 250vh; }
.join__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.join__details { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: var(--plum); color: var(--white); border-left: 1px solid var(--black); overflow: hidden; }
.join__details::before { content: ''; }
.join__inner { position: absolute; top: 0; right: 0; bottom: 0; width: 100vw; display: grid; grid-template-columns: 1fr 1fr; }
.join__img { position: relative; overflow: hidden; }
.join__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.join__body { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 110px var(--gut) 60px clamp(24px, 4vw, 64px); }
.join__body .label { color: var(--mint); }
.join__title { font: 600 clamp(44px, 5.6vw, 96px)/.98 var(--f-title); letter-spacing: -.03em; }
.join__list { display: grid; gap: 0; border-top: 1px solid var(--white-16); }
.join__list li { border-bottom: 1px solid var(--white-16); padding: 12px 0; font-size: 16px; }
.join__cta.li { padding-bottom: 0; margin-bottom: 0; }
.join__cta .li__in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.join__fine { font-size: 13px; color: var(--white-72); }
.join__lede { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); max-width: 44vw; }
.join__lede h3 { font: 600 clamp(40px, 5vw, 84px)/1 var(--f-title); letter-spacing: -.03em; }
.join__lede p { margin-top: 18px; font-size: 18px; max-width: 26em; }

/* ---------------- FOOTER ---------------- */
.foot { position: relative; overflow: hidden; }
.foot__img { height: 46vh; min-height: 300px; overflow: hidden; background: var(--lilac); }
.foot__img img { width: 100%; height: 100%; object-fit: cover; }
.foot__inner { padding-top: 70px; padding-bottom: 28px; }
.foot__tonight .label { color: var(--mint); }
.foot__line { font: 600 clamp(28px, 3.4vw, 54px)/1.15 var(--f-title); letter-spacing: -.03em; margin-top: 10px; }
.foot__line .ipill { padding: .02em .38em; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 24px; margin-top: 70px; }
.foot__cols li { padding: 4px 0; }
.foot__cols .label { color: var(--white-50); margin-bottom: 8px; }
.foot__cols a { text-decoration: none; }
.foot__cols a:hover { color: var(--butter); }
.foot__mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 70px; }
.foot__mid .foot__cols { margin-top: 0; padding-bottom: 2vw; }
.foot__word { font: 700 clamp(120px, 27vw, 480px)/.74 var(--f-title); letter-spacing: -.07em; color: var(--lilac); margin: 0 -.03em 10px 0; }
.foot__fine { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--white-72); border-top: 1px solid var(--white-16); padding-top: 18px; padding-bottom: 70px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card:nth-child(even) { margin-top: 0; }
  .card:nth-child(2), .card:nth-child(4) { transform: translateY(40px); }
}
@media (max-width: 991px) {
  .data__grid { grid-template-columns: 1fr; }
  .data__sticky { position: relative; top: 0; }
  .callout__txt { width: 200px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .nav { padding-top: 10px; }
  .nav__pill { padding: 8px 14px; }
  .nav__cta { padding: 11px 14px; }
  .hero { padding-top: 0; justify-content: flex-start; }
  .hero__moon { left: 50%; top: calc(64px + 42vw); width: 64vw; }
  .hero__canvas { left: 0; top: 64px; width: 100%; height: 84vw; }
  .hero__copy { width: 100%; padding-top: calc(64px + 90vw); }
  .hero__title { font-size: clamp(42px, 12vw, 60px); }
  .hero__lede { font-size: 16px; }
  .chip { padding: 11px 14px; font-size: 14px; }
  .quiz__chips { padding-right: 52px; }
  .bedtime { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 96px; }
  .waves { height: 420vh; }
  .waves__stage { flex-direction: column; align-items: flex-start; padding-bottom: 90px; gap: 18px; }
  .hypno { width: 220px; }
  .waves__ticks { display: none; }
  .waves__body { font-size: 16px; }
  .float__stage { height: 62vh; min-height: 380px; }
  .float__head { margin-top: -4vh; }
  .float__sub { font-size: 17px; }
  .cards { grid-template-columns: 1fr; margin-top: 60px; }
  .card:nth-child(2), .card:nth-child(4) { transform: none; }
  .data { padding: 100px 0; }
  .statement { padding: 12px 18px; }
  .dcard--mug { grid-template-columns: 1fr; }
  .score { width: 180px; }
  .tiles { inset: 70px 12px 90px; gap: 8px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
  .tile--tl, .tile--tr, .tile--bl, .tile--br { border-radius: 0; }
  .tiles__final figcaption { bottom: 96px; }
  .rail { display: none; }
  .meet { padding: 100px var(--gut); }
  .meet__foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .tour { height: 600vh; }
  .tour__head { top: 84px; }
  .callout { gap: 10px; }
  .callout__txt { width: 42vw; font-size: 12.5px; }
  .callout--a, .callout--d { right: auto; left: var(--gut); top: auto; bottom: 15vh; flex-direction: column-reverse; text-align: left; }
  .callout--b, .callout--c { left: auto; right: var(--gut); top: auto; bottom: 15vh; flex-direction: column-reverse; text-align: left; }
  .callout { flex-direction: column !important; gap: 8px; }
  .callout__line { margin-top: 0; width: 1px; height: 0; }
  .tour__progress { display: none; }
  .whom__strip { grid-template-columns: 1fr; gap: 40px; }
  .join { height: auto; }
  .join__pin { position: relative; height: auto; overflow: visible; }
  .join__details { position: relative; width: 100% !important; border-left: 0; }
  .join__inner { position: relative; width: 100%; grid-template-columns: 1fr; }
  .join__img { aspect-ratio: 4 / 5; }
  .join__body { padding: 40px var(--gut) 60px; }
  .join__lede { position: relative; top: auto; transform: none; max-width: none; padding: 90px var(--gut) 50px; left: 0; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .foot__mid { flex-direction: column; align-items: flex-start; }
  .foot__word { font-size: 48vw; margin-top: 20px; }
  .pacer__text { display: none; }
  .pacer__btn { padding: 5px !important; gap: 0 !important; }
  .statement { white-space: normal; }
  .foot__fine { padding-bottom: 90px; }
  .pacer { right: 10px; bottom: 10px; }
  .pacer__btn { padding: 5px 14px 5px 5px; }
  .pacer__ring { width: 34px; height: 34px; }
  .pacer__core { width: 25px; height: 25px; }
}

/* reduced motion: content visible, no transforms */
/* reduced motion (also ?static): §5 renders assembled, no scrub */
.is-reduced .debt__scroll { height: auto; }
.is-reduced .debt__pin { position: relative; height: auto; overflow: visible; }
.is-reduced .debt__text { position: relative; padding-top: 140px; padding-bottom: 80px; }
.is-reduced .debt__chip { opacity: 1; }
.is-reduced .tiles, .is-reduced .rail { display: none; }
.is-reduced .tiles__final { position: relative; opacity: 1; clip-path: none !important; aspect-ratio: 16 / 9; max-height: 100vh; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .li__in { transform: none !important; }
  .debt__chip { opacity: 1; }
  .waves__stage { opacity: 1; }
}

/* WordPress / Elementor compatibility: the active WordPress theme styles <body> and every heading as well
   (Twenty Twenty-Five sets body weight 300 and -0.1px tracking, h1-h6 weight 400, -0.1px tracking,
   line-height 1.125 and preset sizes, and text-wrap: pretty on headings, paragraphs and captions). This page's class rules set size, weight and line-height where it
   cares and rely on browser defaults for the rest, so restore those defaults at element level: every class
   rule above still wins (0,1,0 beats 0,0,3). Elementor's own element resets (img, a, video/iframe,
   figure) outrank single-class rules, so every source rule that sets those properties on those elements is
   repeated below one specificity step higher, in source order. Inert in a plain browser.
   Also pinned here: the Elementor container that holds the sections is display block with no padding or gap (once Elementor generates the page CSS it would make it a wrapping flex column), and headings, paragraphs and captions wrap normally (the theme sets text-wrap: pretty). */
html body { font-weight: 400; letter-spacing: normal; }
html body :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; letter-spacing: normal; line-height: inherit; }
html body h1 { font-size: 2em; }
html body h2 { font-size: 1.5em; }
html body h3 { font-size: 1.17em; }
html body :is(h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p) { text-wrap: wrap; }
.elementor.elementor img { max-width: 100%; }
.elementor.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
.elementor.elementor .btn { text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; }
.elementor.elementor .logo { text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; }
.elementor.elementor .nav__links a { text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; }
.elementor.elementor .nav__cta { text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; }
.elementor.elementor .card__img img { height: 100%; }
.elementor.elementor .chat__who img { height: 46px; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; }
.elementor.elementor .dcard__img img { height: 100%; }
.elementor.elementor .tile img { max-width: none; }
.elementor.elementor .tiles__final img { height: 100%; }
.elementor.elementor .ipic { height: 1.05em; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; }
.elementor.elementor .iscroll__img img { height: 100%; }
.elementor.elementor .join__img img { height: 100%; }
.elementor.elementor .foot__img img { height: 100%; }
.elementor.elementor .foot__cols a { text-decoration-line: none; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; }
html body .elementor .e-con.e-parent:has(> .elementor-element [class^="uichemy-"]) { --display: block; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --row-gap: 0px; --column-gap: 0px; --gap: 0px 0px; }
.elementor.elementor a.skip { text-decoration-line: underline; }