/* =====================================================================
   UBX main stylesheet
   Components use semantic tokens from tokens.css only.
   Mobile first. Breakpoints: 640, 960, 1280.
   ===================================================================== */

/* ---------- 1. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
  background-color: var(--color-cream);
}

body {
  min-height: 100vh;
  background-color: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
strong { font-weight: var(--font-weight-bold); }

:focus-visible {
  outline: var(--border-width-thick) solid var(--color-focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: var(--space-px); height: var(--space-px);
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: var(--space-3); left: var(--space-3);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-action-bg);
  color: var(--color-action-text);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--motion-button);
}
.skip-link:focus { transform: none; }

/* ---------- 2. Layout, themes and background flow ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { position: relative; isolation: isolate; padding-block: var(--space-section); }

/* Each section paints its own colour without JS */
[data-bg="cream"] { background-color: var(--color-cream); }
.theme-sunshine { background-color: var(--color-sunshine); color: var(--color-text); }
.theme-stage { background-color: var(--color-stage); color: var(--color-text); }

/* With JS: one fixed layer behind the page eases between Stage, Cream and Sunshine */
html.has-bgflow body { background-color: transparent; }
.page-bg { position: fixed; inset: 0; z-index: var(--z-below); background-color: var(--color-cream); pointer-events: none; }
html.has-bgflow [data-bg="cream"],
html.has-bgflow [data-bg="sunshine"]:not(.cta) { background-color: transparent; }

/* Stage sections inside the page fade their black in over the light (JS drives --stage) */
.quote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-color: var(--color-stage);
  opacity: var(--stage, 1);
  pointer-events: none;
}
html.has-bgflow .quote { background-color: transparent; }

/* ---------- 3. Typography ---------- */
.eyebrow {
  font-family: var(--font-family-body);
  font-size: var(--text-eyebrow-size);
  line-height: var(--text-eyebrow-lh);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-bottom: var(--space-stack-sm);
}

.h2 {
  font-family: var(--font-family-display);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-family-body);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-tracking);
}

.body-lg {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-body-size);
  text-decoration: none;
  color: var(--color-text-accent);
  transition: color var(--motion-button);
}
.arrow-link svg { width: var(--space-4); height: var(--space-4); transition: transform var(--motion-button); }
.arrow-link:hover { color: var(--color-text); }
.arrow-link:hover svg { transform: translateX(var(--nudge-distance)); }

/* Split line masks (built by main.js) */
.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line__inner { display: block; will-change: transform; }

/* ---------- 4. Buttons and icon links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-inline-sm); }
.actions--center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--button-pad-y) var(--button-pad-x);
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  letter-spacing: var(--text-button-tracking);
  line-height: var(--line-height-snug);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-button), border-color var(--motion-button), color var(--motion-button), box-shadow var(--motion-button);
}
.btn--sm { padding: var(--space-3) var(--space-5); }
.btn--block { width: 100%; }

.btn--primary { background-color: var(--color-action-bg); color: var(--color-action-text); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background-color: var(--color-action-bg-hover); box-shadow: var(--shadow-md); }

.btn--secondary { border-color: var(--color-action-secondary-border); color: var(--color-action-secondary-text); }
.btn--secondary:hover { border-color: var(--color-action-secondary-border-hover); background-color: var(--color-action-secondary-bg-hover); }

.btn__arrow { width: var(--space-4); height: var(--space-4); flex: none; transition: transform var(--motion-button); }
.btn:hover .btn__arrow { transform: translateX(var(--nudge-distance)); }
.btn:focus-visible { border-radius: var(--radius-full); }

.icon-link {
  display: inline-grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-full);
  color: var(--color-text);
  transition: background-color var(--motion-button), color var(--motion-button);
}
.icon-link svg { width: var(--icon-size); height: var(--icon-size); }
.icon-link:hover { background-color: var(--color-hover-pill); color: var(--color-text-accent); }
.social-row { display: flex; gap: var(--space-1); }

/* ---------- 5. Wordmark (text logo, light and dark via theme tokens) ---------- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5);
  text-decoration: none;
  transform-origin: left center;
  transition: transform var(--motion-header);
}
.wordmark__mark {
  font-family: var(--font-family-display);
  font-size: var(--font-size-500);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  color: var(--color-wordmark);
  transition: color var(--motion-header);
}
.wordmark__sub {
  font-size: var(--font-size-50);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-wordmark-sub);
  transition: color var(--motion-header);
}
.wordmark--lg .wordmark__mark { font-size: var(--font-size-700); }
.wordmark--lg .wordmark__sub { font-size: var(--font-size-100); }

/* ---------- 6. Header: fixed, always visible, compacts on scroll ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background-color: transparent;
  color: var(--color-text);
  transition: height var(--motion-header), color var(--motion-header);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-color: var(--color-bg);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity var(--motion-header), background-color var(--motion-header);
}
.site-header.is-solid::before { opacity: 1; }
.site-header.is-compact { height: var(--header-height-compact); }
.site-header.is-compact .wordmark { transform: scale(0.88); }

.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-4); }
.site-header__inner .wordmark { margin-right: auto; }
.site-header__cta, .site-header__social { display: none; }

.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-1); }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color var(--motion-button), color var(--motion-button);
}
.site-nav__link:hover { background-color: var(--color-hover-pill); }
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--space-1);
  width: var(--space-1); height: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-text-accent);
  transform: translateX(-50%);
}
.has-menu .site-nav__link { padding-right: var(--space-1); }
.site-nav__more {
  display: inline-grid;
  place-items: center;
  width: calc(var(--tap-target) * 0.7);
  height: var(--tap-target);
  border-radius: var(--radius-full);
  transition: background-color var(--motion-button);
}
.site-nav__more svg { width: var(--space-4); height: var(--space-4); transition: transform var(--motion-button); }
.site-nav__more:hover { background-color: var(--color-hover-pill); }
.has-menu.is-open .site-nav__more svg { transform: rotate(180deg); }

/* Experience dropdown: light card in every header state */
.site-nav__menu {
  --color-text: var(--color-neutral-100);
  --color-text-muted: var(--color-neutral-300);
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  min-width: var(--menu-max);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-neutral-950);
  box-shadow: var(--shadow-md);
  border: var(--border-width-hairline) solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(var(--space-2) * -1));
  transition: opacity var(--motion-button), transform var(--motion-button), visibility var(--duration-instant) linear var(--duration-base);
}
/* Invisible bridge so the pointer can travel from the link into the menu */
.site-nav__menu::before { content: ""; position: absolute; inset: calc(var(--space-3) * -1) 0 auto 0; height: var(--space-3); }
.has-menu.is-open .site-nav__menu,
.has-menu:focus-within .site-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--motion-button), transform var(--motion-button);
}
@media (hover: hover) {
  .has-menu:hover .site-nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--motion-button), transform var(--motion-button); }
  .has-menu:hover .site-nav__more svg { transform: rotate(180deg); }
}
.has-menu.is-open .site-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--motion-button), transform var(--motion-button);
}
.site-nav__menu a {
  display: grid;
  gap: var(--space-0-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color var(--motion-button);
}
.site-nav__menu a:hover { background-color: var(--color-sunshine-soft); }
.site-nav__menu strong { font-size: var(--text-body-size); }
.site-nav__menu span { font-size: var(--text-small-size); color: var(--color-text-muted); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.menu-toggle__bars { position: relative; display: block; width: var(--space-6); height: var(--space-3); }
.menu-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: var(--border-width-thick);
  background-color: currentColor;
  transition: transform var(--motion-button), top var(--motion-button);
}
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: calc(100% - var(--border-width-thick)); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: calc(50% - var(--border-width-hairline)); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: calc(50% - var(--border-width-hairline)); transform: rotate(-45deg); }

@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 960px) {
  .site-nav { display: block; margin-right: var(--space-2); }
  .site-header__social { display: flex; gap: 0; }
  .menu-toggle { display: none; }
}

/* Mobile menu (stage) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding: calc(var(--header-height) + var(--space-8)) var(--gutter) var(--space-10);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--motion-header);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__list { display: grid; gap: var(--space-2); }
.mobile-menu__list > li > a {
  display: inline-block;
  padding-block: var(--space-1);
  font-family: var(--font-family-display);
  font-size: var(--font-size-700);
  line-height: var(--line-height-snug);
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--motion-button);
}
.mobile-menu__list a:hover,
.mobile-menu__list a[aria-current="page"] { color: var(--color-gold); }
.mobile-menu__sub { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }
.mobile-menu__sub a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--space-4);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text);
}
.mobile-menu__list > li,
.mobile-menu__foot {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--motion-reveal), transform var(--motion-reveal);
}
.mobile-menu.is-open .mobile-menu__list > li,
.mobile-menu.is-open .mobile-menu__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * var(--reveal-stagger) + var(--duration-fast));
}
.mobile-menu__foot { display: grid; gap: var(--space-6); justify-items: start; }

/* ---------- 7. Hero: sunrise (book, app concept, gold light) ----------
   One screen, everything readable on arrival. The black-and-gold book stands
   in front of a sunshine disc; the app concept sits behind it. Every object is
   sized from --bw (book width), so the whole composition scales as one piece.
   main.js sets --p (scroll out, 0 to 1) and --mx/--my (pointer, -1 to 1). */

/* Gold light layer (shared with the About and Experience heroes) */
.seh__bg { position: absolute; inset: 0; background-color: var(--color-stage); }
.seh__bg canvas { width: 100%; height: 100%; }
.seh__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, var(--color-scrim) 100%);
  opacity: var(--vignette, 1);
  pointer-events: none;
}
.seh__fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.seh__fallback path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}
.seh__fallback path:nth-child(2) { opacity: 0.35; }
.seh__bg.is-fallback canvas { display: none; }
.seh__bg.is-fallback .seh__fallback { display: block; }

.hx {
  --bw: var(--hero-book-width-mobile);
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* Sky: dusk clouds lit from a low sun on the right, screened over the gold light so the streaks stay */
.hx__sky {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  background: url("../img/hero-sky.webp") 70% 100% / cover no-repeat;
  mix-blend-mode: screen;
  /* Clears as the hero scrolls out, so the gold flood and dawn read as on main */
  opacity: calc(var(--hero-sky-opacity) * (var(--hero-scene-fade-start) - var(--p, 0) * var(--hero-scene-fade-rate)));
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--p, 0) * 40px), 0) scale(1.04);
  pointer-events: none;
}

/* City skyline: a lit night city along the bottom, fading up into the stage */
.hx__city {
  position: absolute;
  inset: auto 0 0 0;
  z-index: var(--z-base);
  height: var(--hero-city-height-mobile);
  container-type: size;
  background: radial-gradient(ellipse 60% 90% at 82% 100%, var(--color-city-glow), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  opacity: calc(var(--hero-scene-fade-start) - var(--p, 0) * var(--hero-scene-fade-rate));
  pointer-events: none;
}
/* Three depth layers of one repeating strip; each drifts left, the far city slowest */
.hx__city-layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 100%;
  --tile: calc(100cqh * 1600 / 560);
  animation: hx-city var(--city-speed) linear infinite;
}
.hx__city-layer--far { background-image: url("../img/skyline-far.svg"); --city-speed: 240s; }
.hx__city-layer--mid { background-image: url("../img/skyline-mid.svg"); --city-speed: 150s; }
.hx__city-layer--near { background-image: url("../img/skyline-near.svg"); --city-speed: 90s; }
@keyframes hx-city { to { background-position: calc(var(--tile) * -1) 100%; } }
.hx__city::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 20% 55% at 50% 30%, var(--color-city-scrim), transparent 100%),
    linear-gradient(to bottom, transparent 58%, var(--color-city-floor) 74%, var(--color-stage) 86%);
}

/* One gold sparkle on the light streak */
.hx__spark { position: absolute; left: 39%; top: 13%; z-index: var(--z-base); width: var(--space-6); fill: var(--color-gold-100); filter: drop-shadow(0 0 6px var(--color-gold-300)); pointer-events: none; }

.hx__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-areas: "copy" "product" "quote" "marks";
  justify-items: center;
  align-content: center;
  gap: var(--space-12);
  padding-top: calc(var(--header-height) + var(--space-8));
  padding-bottom: var(--space-8);
}

/* Centre: the title block */
.hx__copy { grid-area: copy; display: grid; justify-items: center; text-align: center; }
.hx__title { display: grid; justify-items: center; font-family: var(--font-family-display); font-weight: var(--font-weight-regular); }
.hx__name { font-size: var(--hero-name-size); line-height: var(--line-height-snug); letter-spacing: 0.01em; color: var(--color-text); }
.hx__name em { font-family: var(--font-family-accent); font-style: italic; color: var(--color-gold-light); }
/* UBX: heavy Trajan-style capitals in brushed gold */
.hx__mark {
  font-family: var(--font-family-mark);
  font-weight: var(--font-weight-bold);
  font-size: var(--hero-mark-size);
  line-height: 0.95;
  letter-spacing: 0;
  background: linear-gradient(180deg, var(--color-gold-50) 0%, var(--color-gold-200) 28%, var(--color-gold-400) 55%, var(--color-gold-600) 78%, var(--color-gold-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hx__sub { margin-top: var(--space-3); font-family: var(--font-family-display); font-size: var(--hero-sub-size); letter-spacing: 0.02em; color: var(--color-text); }
.hx__by { margin-top: var(--space-3); font-size: var(--text-small-size); line-height: var(--line-height-relaxed); color: var(--color-text-muted); }
.hx__actions { display: grid; gap: var(--space-3); width: 100%; max-width: 23rem; margin-top: var(--space-6); }
.hx__actions .btn { width: 100%; }

/* Right: the quote, set off by a hairline */
.hx__quote { grid-area: quote; text-align: center; }
.hx__quote p { font-family: var(--font-family-display); font-size: var(--hero-quote-size); line-height: var(--line-height-snug); color: var(--color-text); }
.hx__quote em { display: block; font-family: var(--font-family-accent); font-style: italic; color: var(--color-gold-light); }
.hx__quote-rule { display: inline-block; width: var(--space-10); height: var(--border-width-thick); margin-top: var(--space-4); background-color: var(--color-gold); }

/* Left: the book, the phone in front, the audio pill below */
/* Warm light behind the products, as if from the sunset */
.hx__backlight {
  position: absolute;
  left: calc(var(--bw) * -0.3); top: calc(var(--bw) * -0.25);
  width: calc(var(--bw) * 2.2); height: calc(var(--bw) * 1.9);
  background: radial-gradient(ellipse at 50% 55%, var(--color-backlight) 0%, transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}
/* Floating: a soft pool of shadow and light far below the products */
.hx__floor {
  position: absolute;
  left: calc(var(--bw) * 0.05); top: calc(var(--bw) * 1.62);
  width: calc(var(--bw) * 1.5); height: calc(var(--bw) * 0.18);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgb(0 0 0 / 0.65) 0%, rgb(0 0 0 / 0.25) 45%, transparent 70%);
  filter: blur(8px);
}

/* Sun disc behind the products, as on main */
.hx__sun {
  position: absolute;
  left: calc(var(--bw) * 0.22); top: calc(var(--bw) * -0.02);
  width: calc(var(--bw) * 1.42);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 34% 28%, var(--color-sun-core) 0%, var(--color-sun-mid) 42%, var(--color-sun-edge) 100%);
  box-shadow: 0 0 calc(var(--bw) * 0.5) calc(var(--bw) * 0.04) var(--color-sun-glow);
}
/* Fine brushed rings, like light on gold leaf */
.hx__sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-radial-gradient(circle at 34% 28%, var(--color-sun-ring) 0 1px, transparent 1px 7px);
  mix-blend-mode: soft-light;
}
/* Book and phone overlap as one tight group, leaving air before the title */
.hx__product { grid-area: product; position: relative; width: calc(var(--bw) * 1.76); height: calc(var(--bw) * 1.98); }  /* wide enough to hold the disc and Soaking pill */
.hx__phoneset {
  position: absolute;
  left: calc(var(--bw) * 0.86); top: calc(var(--bw) * 0.32);
  width: calc(var(--bw) * 0.6);
  perspective: var(--perspective);
}
/* The phone answers the pointer too, a little more than the book (it is closer) */
.hx__phone { transform: rotateY(calc(-16deg + var(--mx, 0) * 14deg)) rotateX(calc(4deg - var(--my, 0) * 8deg)) translateZ(var(--lift, 0px)); transition: transform 600ms var(--ease-out); }
.hx__product:hover .hx__phone { --lift: 28px; }
.hx__listen {
  position: absolute;
  left: calc(var(--bw) * 0.32); top: calc(var(--bw) * 1.74);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-chip-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family-display);
  font-size: clamp(0.875rem, var(--bw) * 0.075, 1.125rem);
  white-space: nowrap;
  color: var(--color-text);
}
.hx__listen small { display: block; font-family: var(--font-family-body); font-size: 0.62em; font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-gold); }
.hx__listen-play { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: var(--radius-full); background-color: var(--color-gold); color: var(--color-stage); }
.hx__listen-play svg { width: 0.85em; height: 0.85em; }
.hx__eq { display: flex; align-items: center; gap: 3px; height: 1.2em; margin-left: var(--space-2); }
.hx__eq i { display: block; width: 2px; height: 100%; border-radius: 1px; background-color: var(--color-gold); transform: scaleY(0.4); }
/* Soaking pill: bottom right, over the phone */
.hx__soak {
  position: absolute;
  left: calc(var(--bw) * 1.0); top: calc(var(--bw) * 1.4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-chip-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family-display);
  font-size: clamp(0.8125rem, var(--bw) * 0.065, 1rem);
  white-space: nowrap;
  color: var(--color-text);
}
.hx__soak small { display: block; font-family: var(--font-family-body); font-size: 0.66em; font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-gold); }
.hx__soak-dot { position: relative; width: 0.6em; height: 0.6em; border-radius: var(--radius-full); background-color: var(--color-cta-end); }
.hx__soak-dot::after { content: ""; position: absolute; inset: -0.35em; border: 1px solid var(--color-cta-end); border-radius: inherit; opacity: 0; }
/* Rotating seal: bottom left, over the book */
.hx__seal {
  position: absolute;
  left: calc(var(--bw) * -0.2); top: calc(var(--bw) * 1.32);
  display: grid;
  place-items: center;
  width: calc(var(--bw) * 0.46);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background-color: var(--color-stage);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
.hx__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx__seal text { font-family: var(--font-family-body); font-size: 8.6px; font-weight: var(--font-weight-bold); letter-spacing: 1.2px; text-transform: uppercase; fill: var(--color-gold); }
.hx__seal span { font-family: var(--font-family-display); font-size: calc(var(--bw) * 0.1); letter-spacing: var(--tracking-wide); color: var(--color-text); }

/* Bottom: the characteristics row */
.hx__marks {
  grid-area: marks;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) 0;
  width: 100%;
}
.hx__marks li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  text-align: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-50);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}
.hx__marks svg { width: var(--space-8); height: var(--space-8); fill: none; stroke: var(--color-gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* The book: CSS 3D, the real cover on the front face */
.hx__book { position: absolute; left: 0; top: 0; width: var(--bw); }
.hx__float { perspective: var(--perspective); }
.book3d {
  --d: calc(var(--bw) * 0.2);
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-cover);
  transform-style: preserve-3d;
  transform: rotateY(calc(-32deg + var(--mx, 0) * 10deg)) rotateX(calc(4deg - var(--my, 0) * 6deg)) translateZ(var(--lift, 0px));
  transition: transform 600ms var(--ease-out);
}
.hx__product:hover { --lift: 18px; }
.book3d > * { position: absolute; }
.book3d__front, .book3d__gloss {
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 2px 5px 5px 2px;
  transform: translateZ(calc(var(--d) / 2));
}
.book3d__front { object-fit: cover; box-shadow: calc(var(--bw) * -0.12) calc(var(--bw) * 0.14) calc(var(--bw) * 0.22) calc(var(--bw) * -0.04) var(--color-book-shadow); }
.book3d__gloss {
  transform: translateZ(calc(var(--d) / 2 + 1px));
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.18) 0, rgb(255 255 255 / 0) 2.5%, rgb(0 0 0 / 0.35) 3.5%, rgb(0 0 0 / 0) 7%),
    linear-gradient(calc(118deg + var(--mx, 0) * 12deg), rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / 0.07) 100%),
    linear-gradient(90deg, rgb(255 200 110 / 0.35) 0%, rgb(255 200 110 / 0) 8%);
  pointer-events: none;
}
.book3d__pages {
  top: 1%; bottom: 1%; right: 0;
  width: var(--d);
  transform: translateX(calc(50% - 2px)) rotateY(90deg);
  background:
    linear-gradient(90deg, rgb(60 40 20 / 0.35), rgb(60 40 20 / 0) 30%, rgb(255 220 160 / 0.15) 70%, rgb(60 40 20 / 0.3)),
    repeating-linear-gradient(90deg, var(--color-pages) 0 1px, var(--color-pages-line) 1px 2px);
}
.book3d__top {
  top: 0; left: 0;
  width: calc(100% - 2px); height: var(--d);
  transform: translateY(-50%) translateY(2px) rotateX(90deg);
  background: repeating-linear-gradient(0deg, var(--color-pages) 0 1px, var(--color-pages-line) 1px 2px);
}
.book3d__spine {
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--d); height: 100%;
  padding-block: calc(var(--bw) * 0.08);
  transform: translateX(-50%) rotateY(-90deg);
  border-block: 2px solid var(--color-gold-500);
  background: linear-gradient(90deg, var(--color-neutral-50), var(--color-neutral-200) 50%, var(--color-neutral-50));
  writing-mode: vertical-rl;
  font-family: var(--font-family-display);
  color: var(--color-gold-light);
  white-space: nowrap;
}
.book3d__spine em { font-style: normal; font-size: calc(var(--bw) * 0.072); }
.book3d__spine b { font-weight: var(--font-weight-regular); font-size: calc(var(--bw) * 0.095); color: var(--color-gold-200); }
.book3d__back { inset: 0; transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); background-color: var(--color-stage); border-radius: 5px 2px 2px 5px; }

.hx__shadow {
  position: absolute;
  left: -4%; right: -14%; bottom: -5%;
  height: 9%;
  background: radial-gradient(ellipse at 45% 50%, var(--color-book-shadow) 0%, transparent 70%);
  filter: blur(6px);
  z-index: var(--z-below);
}

/* The app concept */
.hx__phone {
  position: relative;
  width: 100%;
  container-type: inline-size;
  rotate: 9deg;
}
.phone {
  position: relative;
  aspect-ratio: 9 / 19.5;
  padding: 3.2cqi;
  border-radius: 16cqi;
  background: linear-gradient(145deg, var(--color-device-edge), var(--color-stage) 38%, var(--color-device-edge));
  box-shadow:
    inset 0 0 0 1px var(--color-device-rim),
    -1px 1px 0 var(--color-phone-edge), -2px 2px 0 var(--color-phone-edge), -3px 3px 0 var(--color-phone-edge),
    -4px 4px 0 var(--color-phone-edge), -5px 5px 0 var(--color-phone-edge), -6px 6px 0 var(--color-phone-side),
    calc(var(--bw) * -0.1) calc(var(--bw) * 0.16) calc(var(--bw) * 0.22) calc(var(--bw) * -0.02) var(--color-book-shadow);
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(calc(120deg + var(--mx, 0) * 15deg), rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 75%, rgb(255 210 120 / 0.18) 100%);
  pointer-events: none;
}
.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4cqi;
  height: 100%;
  padding: 13cqi 6cqi 0;
  overflow: hidden;
  border-radius: 13cqi;
  background-color: var(--color-stage-raised);
  color: var(--color-text);
  font-size: 4.6cqi;
  line-height: 1.25;
}
.phone__island { position: absolute; left: 50%; top: 3.6cqi; width: 30cqi; height: 8cqi; border-radius: var(--radius-full); background-color: var(--color-stage); transform: translateX(-50%); }
.phone__top { display: flex; align-items: center; justify-content: space-between; }
.phone__mark { font-family: var(--font-family-display); font-size: 8cqi; letter-spacing: var(--tracking-wide); color: var(--color-gold); }
.phone__avatar { width: 9cqi; height: 9cqi; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-sunshine), var(--color-cta-end)); }
.phone__hello { font-size: 4.2cqi; color: var(--color-text-muted); }
.phone__story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1cqi;
  min-height: 52cqi;
  padding: 6cqi;
  overflow: hidden;
  border-radius: 7cqi;
  background: linear-gradient(140deg, var(--color-sun-core), var(--color-sunshine) 45%, var(--color-cta-end));
  color: var(--color-neutral-100);
}
.phone__tag { font-size: 3.4cqi; font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.phone__story strong { font-family: var(--font-family-display); font-size: 9cqi; font-weight: var(--font-weight-regular); line-height: 1; }
.phone__meta { font-size: 3.8cqi; opacity: 0.75; }
.phone__streak { position: absolute; inset: 0; width: 100%; height: 55%; }
.phone__streak path { fill: none; stroke: var(--color-neutral-100); stroke-width: 1.2; opacity: 0.22; vector-effect: non-scaling-stroke; }
.phone__player { display: flex; align-items: center; gap: 3cqi; padding: 3.5cqi; border-radius: 6cqi; background-color: var(--color-device-panel); }
.phone__play { display: grid; place-items: center; flex: none; width: 10cqi; height: 10cqi; border-radius: var(--radius-full); background-color: var(--color-gold); color: var(--color-stage); }
.phone__play svg { width: 5cqi; height: 5cqi; }
.phone__track { flex: 1; display: grid; gap: 1.6cqi; font-size: 3.8cqi; }
.phone__track i { display: block; height: 1.2cqi; border-radius: var(--radius-full); background-color: var(--color-progress-track); overflow: hidden; }
.phone__track b { display: block; width: 38%; height: 100%; background-color: var(--color-gold); }
.phone__time { font-size: 3.4cqi; color: var(--color-text-muted); }
.phone__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; }
.phone__tile { display: grid; align-content: start; gap: 1.5cqi; min-height: 30cqi; padding: 4cqi; border-radius: 5cqi; background-color: var(--color-device-panel); }
.phone__tile span { font-size: 3cqi; font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-gold); }
.phone__tile strong { font-size: 4cqi; font-weight: var(--font-weight-medium); line-height: 1.2; }
.phone__tile--soak { background: linear-gradient(160deg, var(--color-gold-800), var(--color-device-panel)); }
.phone__tabs { display: flex; justify-content: space-around; margin: auto -6cqi 0; padding: 4cqi 0 7cqi; border-top: 1px solid var(--color-border); font-size: 3.4cqi; color: var(--color-text-muted); }
.phone__tabs .is-on { color: var(--color-gold); }

/* Dawn: rises over everything as the hero leaves and hands over to Cream */
.hx__dawn {
  position: absolute;
  inset: auto 0 0 0;
  z-index: var(--z-raised);
  height: 45%;
  background: linear-gradient(to top, var(--color-cream) 0%, var(--color-dawn) 45%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 640px) {
  .hx { --bw: var(--hero-book-width-tablet); }
  .hx__marks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hx__marks li { font-size: var(--font-size-100); }
  .hx__marks li + li { border-left: var(--border-width-hairline) solid var(--color-border); }
}
@media (min-width: 960px) {
  .hx { --bw: var(--hero-book-width); min-height: max(100svh, var(--hero-min-height)); }
  .hx__city { height: var(--hero-city-height); }
  .hx__inner {
    grid-template-areas: "product copy quote" "marks marks marks";
    padding-bottom: var(--space-10);
    /* Products and quote hug the edges; the title centres between them, so both gaps match */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-16) var(--space-10);
    padding-top: calc(var(--header-height) + var(--space-6));
  }
  .hx__product { justify-self: start; }
  .hx__quote { justify-self: end; text-align: left; padding-left: var(--space-8); border-left: var(--border-width-hairline) solid var(--color-border-strong); }
}

@media (min-width: 960px) and (max-width: 1279px) {
  .hx { --bw: 11.5rem; }
  .hx__inner { gap: var(--space-12) var(--space-6); }
  .hx__listen { font-size: var(--text-small-size); }
  .hx__product { width: calc(var(--bw) * 1.64); }
  .hx__seal { left: 0; }
  .hx__soak { left: calc(var(--bw) * 0.74); }
  .hx__quote { padding-left: var(--space-6); }
  .hx__quote p { font-size: var(--font-size-500); }
}
@media (max-width: 639px) {
  .hx__sky { background-position: 85% 100%; }
}
@media (max-width: 959px) {
  .hx__spark { display: none; }
  .hx__seal { display: none; }
}
@media (max-width: 639px) {
  .hx__soak { display: none; }
}

/* Entrance: the title first, then the product and quote */
html.js:not(.hero-go) .hx__copy > *,
html.js:not(.hero-go) .hx__product,
html.js:not(.hero-go) .hx__quote,
html.js:not(.hero-go) .hx__marks { opacity: 0; }
html.hero-go .hx__copy > * { animation: hero-rise var(--duration-reveal) var(--ease-emphasis) backwards; }
html.hero-go .hx__copy > :nth-child(2) { animation-delay: 80ms; }
html.hero-go .hx__copy > :nth-child(3) { animation-delay: 160ms; }
html.hero-go .hx__copy > :nth-child(4) { animation-delay: 240ms; }
html.hero-go .hx__product { animation: hx-rise 1200ms var(--ease-emphasis) 200ms backwards; }
html.hero-go .hx__quote { animation: hero-rise var(--duration-reveal) var(--ease-emphasis) 360ms backwards; }
html.hero-go .hx__marks { animation: hero-fade 1200ms var(--ease-out) 500ms backwards; }
.hx__phoneset { animation: hx-bob 6s var(--ease-in-out) 1.4s infinite alternate; }
.hx__float { animation: hx-bob 8s var(--ease-in-out) 1.2s infinite alternate-reverse; }
.hx__spark { animation: hx-twinkle 3s var(--ease-in-out) infinite alternate; }
html.hero-go .hx__sun { animation: hx-sun 1600ms var(--ease-emphasis) 80ms backwards, hx-breathe 9s var(--ease-in-out) 1700ms infinite alternate; }
.hx__seal svg { animation: hx-spin 28s linear infinite; }
.hx__soak-dot::after { animation: hx-ping 2.4s var(--ease-out) infinite; }
.phone__track b { animation: hx-progress 14s linear infinite; }
.hx__eq i { animation: hx-eq 900ms var(--ease-in-out) infinite alternate; }
.hx__eq i:nth-child(2) { animation-delay: -300ms; }
.hx__eq i:nth-child(3) { animation-delay: -600ms; }
.hx__eq i:nth-child(4) { animation-delay: -150ms; }
.hx__eq i:nth-child(5) { animation-delay: -450ms; }

@keyframes hero-rise { from { opacity: 0; translate: 0 calc(var(--reveal-distance) * 2); } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hx-rise { from { opacity: 0; translate: 0 6%; } }
@keyframes hx-bob { to { translate: 0 -6px; } }
@keyframes hx-eq { to { transform: scaleY(1); } }
@keyframes hx-sun { from { opacity: 0; translate: 0 22%; scale: 0.8; } }
@keyframes hx-breathe { to { scale: 1.035; } }
@keyframes hx-spin { to { rotate: 360deg; } }
@keyframes hx-ping { 0% { opacity: 0.8; scale: 0.6; } 100% { opacity: 0; scale: 1.6; } }
@keyframes hx-twinkle { from { opacity: 0.4; scale: 0.8; } to { opacity: 1; scale: 1.1; } }
@keyframes hx-progress { from { width: 8%; } to { width: 92%; } }

@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation: none !important; }
}

/* No JS: nothing is hidden, so the hero simply shows */

/* ?record: clean canvas for screen-recording the Wix background loop */
html.is-record .hx__inner,
html.is-record .hx__dawn,
html.is-record .seh__bg::after,
html.is-record .site-header,
html.is-record .skip-link,
html.is-record .page-bg,
html.is-record main > section:not(.hx),
html.is-record .site-footer { display: none; }

/* ---------- 8. Photo placeholders (swap for client photos) ---------- */
.ph {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background-color: var(--color-placeholder-from);
  background-image: linear-gradient(160deg, var(--color-placeholder-to) 0%, var(--color-placeholder-from) 55%, var(--color-placeholder-end) 100%);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border);
}
.ph--tall { aspect-ratio: var(--ratio-tall); }
.ph--portrait { aspect-ratio: var(--ratio-portrait); }
.ph--full { aspect-ratio: var(--ratio-full-length); }
.ph--landscape { aspect-ratio: var(--ratio-landscape); }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

.ph__streak { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph__streak path {
  fill: none;
  stroke: var(--color-placeholder-streak);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}
.ph__streak path + path { opacity: 0.25; }
.ph__word {
  position: absolute;
  left: var(--space-5); bottom: var(--space-4);
  font-family: var(--font-family-display);
  font-size: var(--font-size-600);
  line-height: 1;
  color: var(--color-placeholder-word);
}
.ph__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-900);
  letter-spacing: var(--tracking-wide);
  color: var(--color-placeholder-word);
}

/* ---------- 9. Made for you if (cream) ---------- */
.statement {
  max-width: 20ch;
  font-family: var(--font-family-display);
  font-size: var(--text-statement-size);
  line-height: var(--text-statement-lh);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.statement .word { display: inline; }

.made__grid { display: grid; gap: var(--space-4); margin-top: var(--space-stack-lg); }
.made-card {
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.made-card__num {
  display: block;
  margin-bottom: var(--space-6);
  font-family: var(--font-family-display);
  font-size: var(--font-size-700);
  line-height: 1;
  color: var(--color-numeral);
}
.made-card .h3 { margin-bottom: var(--space-2); }
.made-card p { color: var(--color-text-muted); }

@media (min-width: 960px) {
  .made__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .made-card { padding: var(--space-10) var(--space-8); }
}

/* ---------- 10. The book ---------- */
.book__grid { display: grid; gap: var(--space-stack-lg); align-items: center; }
.book__visual { width: 100%; max-width: var(--book-max); margin-inline: auto; perspective: var(--perspective); }
.book__tilt { transform-style: preserve-3d; will-change: transform; }
.book__cover {
  width: 100%;
  aspect-ratio: var(--ratio-book);
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.book__copy .h2 { margin-bottom: var(--space-stack-sm); }

.book-list { margin-block: var(--space-stack-md) var(--space-6); border-bottom: var(--border-width-hairline) solid var(--color-border); }
.book-list__item {
  display: grid;
  grid-template-columns: var(--space-16) 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--color-border);
  font-size: var(--text-body-lg-size);
  font-weight: var(--font-weight-medium);
}
.book-list__num { font-family: var(--font-family-display); font-size: var(--font-size-600); line-height: 1; color: var(--color-numeral); }
.book__note {
  margin-bottom: var(--space-stack-md);
  font-family: var(--font-family-accent);
  font-style: italic;
  font-size: var(--font-size-500);
  line-height: var(--line-height-snug);
  color: var(--color-text-accent);
}
.book__stores { margin-top: var(--space-5); color: var(--color-text-muted); }
.book__imprint { font-size: var(--text-small-size); }

@media (min-width: 960px) {
  .book__grid { grid-template-columns: 5fr 6fr; gap: var(--space-20); }
}

/* ---------- 11. Experience preview (sunshine band) ---------- */
.preview__head { margin-bottom: var(--space-stack-md); }
.preview__grid { display: grid; gap: var(--space-6); }
.exp-card {
  --color-text: var(--color-neutral-100);
  --color-text-muted: var(--color-neutral-300);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-cream);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--motion-reveal), box-shadow var(--motion-reveal);
}
.exp-card:hover { transform: translateY(var(--lift-distance)); box-shadow: var(--shadow-md); }
.exp-card__media { border-radius: var(--radius-none); box-shadow: none; }
.exp-card__media > * { transition: transform var(--motion-reveal); }
.exp-card:hover .exp-card__media > * { transform: scale(1.05); }
.exp-card__body {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-6) calc(var(--tap-target) + var(--space-8)) var(--space-6) var(--space-6);
}
.exp-card__body p { color: var(--color-text-muted); }
.exp-card__go {
  position: absolute;
  right: var(--space-6);
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-full);
  background-color: var(--color-pop);
  color: var(--color-pop-text);
  transform: translateY(-50%);
  transition: background-color var(--motion-button);
}
.exp-card__go svg { width: var(--space-4); height: var(--space-4); transition: transform var(--motion-button); }
.exp-card:hover .exp-card__go { background-color: var(--color-action-bg); color: var(--color-action-text); }
.exp-card:hover .exp-card__go svg { transform: translateX(var(--nudge-distance)); }
.exp-card:focus-visible { border-radius: var(--radius-xl); }

@media (min-width: 640px) {
  .preview__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .exp-card__media { aspect-ratio: var(--ratio-portrait); }
}
@media (min-width: 960px) {
  .preview__grid { gap: var(--space-6); }
  .exp-card__media { aspect-ratio: var(--ratio-tall); }
}

/* ---------- 12. City to city (cream) ---------- */
/* --band-inset lines the first and last card up with the centred container's content edge */
.band { --band-inset: max(var(--gutter), calc((100% - var(--container-max)) / 2)); position: relative; padding-block: var(--space-section); overflow: hidden; }
.band__head { margin-bottom: var(--space-stack-md); }
.band__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--band-inset);
  scrollbar-width: none;
}
.band__viewport::-webkit-scrollbar { display: none; }
.band__track { display: flex; gap: var(--space-6); width: max-content; padding-inline: var(--band-inset); }
.band__item { flex: 0 0 var(--band-card-width); scroll-snap-align: start; }
.band__item figcaption { margin-top: var(--space-4); color: var(--color-text-muted); }
.band__item figcaption strong { color: var(--color-text); }
.band__progress { margin-top: var(--space-8); }
.band__rail { position: relative; height: var(--border-width-hairline); background-color: var(--color-border-strong); }
.band__bar {
  position: absolute;
  inset: calc(var(--border-width-hairline) * -1) 0;
  background-color: var(--color-gold-500);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* Desktop: a static row of five, no sliding. Phones and tablets keep the swipe row. */
@media (min-width: 960px) {
  .band__viewport { overflow: visible; scroll-snap-type: none; }
  .band__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); width: auto; }
  .band__progress { display: none; }
}

/* ---------- 13. Presented by (cream) ---------- */
/* Centred pair: heading, two equal portraits with level tops, link */
.authors__head { margin-bottom: var(--space-stack-lg); text-align: center; }
.authors__grid { display: grid; gap: var(--space-12); max-width: var(--container-narrow); margin-inline: auto; }
.author { text-align: center; }
.author__body { margin: var(--space-6) auto 0; max-width: var(--measure-narrow); }
.author__body .h3 { margin-bottom: var(--space-1); }
.author__role { margin-bottom: var(--space-3); font-weight: var(--font-weight-medium); color: var(--color-text-accent); }
.author__body p:last-child { color: var(--color-text-muted); }
.authors__more { margin-top: var(--space-stack-md); text-align: center; }

@media (min-width: 640px) {
  .authors__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (min-width: 960px) {
  .authors__grid { gap: var(--space-12); }
}

/* ---------- 13b. Film (Vimeo embeds, Home and About) ----------
   A plain lazy iframe in a framed, fixed-ratio box: no autoplay, no player script.
   Set --film-ratio on .film__frame when a video is not 16:9. */
.film__head { max-width: var(--panel-max); margin: 0 auto var(--space-stack-md); text-align: center; }
.film__head .body-lg { margin: var(--space-4) auto 0; }
.film__frame {
  position: relative;
  width: 100%;
  max-width: var(--film-max);
  margin-inline: auto;
  aspect-ratio: var(--film-ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-stage);
  box-shadow: var(--shadow-lg), inset 0 0 0 var(--border-width-hairline) var(--color-border);
}
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film--split .film__frame { max-width: none; }
.film__note { margin-top: var(--space-4); font-size: var(--text-small-size); color: var(--color-text-muted); }

/* About: copy beside a contained frame, so a long interview reads as optional */
.film--split .film__head { margin-bottom: var(--space-stack-md); text-align: left; margin-inline: 0; }
.film--split .film__head .body-lg { margin-inline: 0; }
@media (min-width: 960px) {
  .film__grid { display: grid; grid-template-columns: 4fr 7fr; gap: var(--space-16); align-items: center; }
  .film--split .film__head { margin-bottom: 0; }
}

/* ---------- 14. Quote (stage) ---------- */
.quote { overflow: hidden; }
.quote__streak { position: absolute; inset: 0; z-index: var(--z-below); width: 100%; height: 100%; }
.quote__streak path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.7;
}
.quote__streak path + path { opacity: 0.3; }
.quote__figure { text-align: center; }
.quote__text {
  font-family: var(--font-family-accent);
  font-style: italic;
  font-size: var(--text-quote-size);
  line-height: var(--text-quote-lh);
  font-weight: var(--text-quote-weight);
  letter-spacing: var(--text-quote-tracking);
  color: var(--color-text);
  text-wrap: balance;
}
.quote__cite {
  margin-top: var(--space-stack-md);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ---------- 15. Stay connected (cream) ---------- */
.connect__grid { display: grid; gap: var(--space-stack-lg); align-items: start; }
.connect__intro .h2 { margin-bottom: var(--space-stack-sm); }
.connect__social { display: grid; gap: var(--space-2); margin-top: var(--space-stack-md); }
.connect__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap-target);
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--motion-button);
}
.connect__social svg {
  flex: none;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-accent);
  transition: transform var(--motion-button);
}
.connect__social strong { color: var(--color-text); margin-right: var(--space-1); }
.connect__social a:hover { color: var(--color-text); }
.connect__social a:hover svg { transform: translateY(var(--lift-distance)); }

.connect__card {
  position: relative;
  padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: var(--font-weight-bold); font-size: var(--text-small-size); }
.field__opt { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.field__input {
  width: 100%;
  min-height: var(--field-height);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-field-bg);
  font-size: var(--text-body-size);
  color: var(--color-text);
  box-shadow: inset 0 calc(var(--border-width-thick) * -1) 0 transparent;
  transition: border-color var(--motion-button), box-shadow var(--motion-button);
  appearance: none;
}
.field__input:hover { border-color: var(--color-text-muted); }
.field__input:focus { outline: none; border-color: var(--color-focus-ring); box-shadow: inset 0 calc(var(--border-width-thick) * -1) 0 var(--color-focus-ring); }
.field__input--area { min-height: calc(var(--field-height) * 2); resize: vertical; }
.field__select { position: relative; }
.field__select select { padding-right: var(--space-12); cursor: pointer; }
.field__select svg {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: var(--space-4);
  height: var(--space-4);
  transform: translateY(-50%);
  pointer-events: none;
}
.field__error { min-height: 0; font-size: var(--text-small-size); font-weight: var(--font-weight-medium); color: var(--color-field-error); }
.field__error:empty { display: none; }
.field.is-invalid .field__input { border-color: var(--color-field-error); box-shadow: inset 0 calc(var(--border-width-thick) * -1) 0 var(--color-field-error); }

.form-success { position: relative; padding-block: var(--space-10); text-align: center; outline: none; }
.form-success[hidden] { display: none; }
.form-success__streak { width: 100%; height: var(--space-16); margin-bottom: var(--space-6); }
.form-success__streak path { fill: none; stroke: var(--color-gold-500); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.form-success__title { font-family: var(--font-family-display); font-size: var(--font-size-600); font-weight: var(--font-weight-regular); line-height: var(--line-height-snug); margin-bottom: var(--space-3); }
.form-success__text { color: var(--color-text-muted); max-width: var(--measure-narrow); margin-inline: auto; }

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .connect__card { padding: var(--space-10); }
}
@media (min-width: 960px) {
  .connect__grid { grid-template-columns: 5fr 6fr; gap: var(--space-20); }
  .connect__intro { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
}

/* ---------- 16. Final CTA (sunshine to gold) ---------- */
.cta {
  text-align: center;
  padding-block: calc(var(--space-section) * 1.2);
  background-image: linear-gradient(180deg, var(--color-sunshine) 0%, var(--color-cta-end) 100%);
}
.cta__title {
  max-width: 14ch;
  margin-inline: auto;
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.cta .actions { margin-top: var(--space-stack-md); }

/* ---------- 17. Footer (stage) ---------- */
.site-footer { padding-block: var(--space-20) var(--space-10); }
.site-footer__grid { display: grid; gap: var(--space-10); }
.site-footer__line { margin-top: var(--space-4); max-width: var(--measure-narrow); color: var(--color-text-muted); }
.site-footer__label {
  margin-bottom: var(--space-3);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-gold);
}
.site-footer__col li a:not(.icon-link) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--motion-button);
}
.site-footer__col li a:not(.icon-link):hover { color: var(--color-text); }
.site-footer .social-row { margin-left: calc(var(--space-3) * -1); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--color-border);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ---------- 18. First-visit intro ---------- */
.intro { display: none; }
html.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-emphasis);
}
html.intro-on .intro.is-leaving { transform: translateY(-100%); }
.intro__mark { display: grid; justify-items: center; gap: var(--space-3); }
.intro__letters { display: flex; overflow: hidden; padding-bottom: 0.08em; }
.intro__letters span {
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
  animation: intro-rise var(--duration-intro) var(--ease-emphasis) backwards;
}
.intro__letters span:nth-child(2) { animation-delay: calc(var(--reveal-stagger) * 0.7); }
.intro__letters span:nth-child(3) { animation-delay: calc(var(--reveal-stagger) * 1.4); }
.intro__sub {
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  animation: hero-fade var(--duration-intro) var(--ease-out) var(--reveal-stagger) backwards;
}
.intro__streak {
  position: absolute;
  left: 0; top: 50%;
  width: 45%;
  height: var(--border-width-hairline);
  background: linear-gradient(90deg, transparent, var(--color-streak), transparent);
  transform: translateX(260%);
  animation: streak-sweep var(--duration-intro) var(--ease-in-out) backwards;
}
@keyframes intro-rise { from { transform: translateY(105%); } }
@keyframes streak-sweep { from { transform: translateX(-100%); } }

/* ---------- 19. Page transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-out var(--duration-page) var(--ease-emphasis) both; }
::view-transition-new(root) { animation: vt-in var(--duration-page) var(--ease-emphasis) both; }
@keyframes vt-out { to { opacity: 0.3; transform: translateY(calc(var(--reveal-distance) * -2)); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* JS fallback curtain: stage panel with a gold light streak and the wordmark */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--motion-page), visibility var(--duration-instant) linear var(--duration-page);
}
.curtain__streak { position: absolute; inset: 0; width: 100%; height: 100%; }
.curtain__streak path { fill: none; stroke: var(--color-gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.8; }
.curtain__streak path + path { opacity: 0.35; }
.curtain__mark {
  position: relative;
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
}
.curtain.is-covering,
html.curtain-in .curtain { transform: none; visibility: visible; transition: transform var(--motion-page); }
html.curtain-in .curtain { transition: none; }
.curtain.is-leaving { transform: translateY(-100%); visibility: visible; transition: transform var(--motion-page); }

/* =====================================================================
   STAGE 2: About and Experience
   ===================================================================== */

/* ---------- 20. Page hero (About, Experience): the cover world, compact ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: var(--page-hero-min);
  /* Bottom space keeps the copy clear of the shader's low gold streaks and the dawn */
  padding-block: calc(var(--header-height) + var(--space-16)) calc(var(--space-section) + var(--space-16));
}
.page-hero .seh__bg { z-index: var(--z-below); }
/* Dawn: a short band at the base hands the black over to Cream */
.page-hero__dawn {
  position: absolute;
  inset: auto 0 0 0;
  z-index: var(--z-below);
  height: var(--space-section);
  background: linear-gradient(to top, var(--color-cream) 0%, var(--color-dawn) 50%, transparent 100%);
  pointer-events: none;
}
.page-hero__grid { display: grid; gap: var(--space-stack-lg); align-items: end; width: 100%; }
.page-hero__title {
  max-width: 17ch;
  font-family: var(--font-family-display);
  font-size: var(--text-page-title-size);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  text-shadow: 0 var(--space-1) var(--space-10) var(--color-text-shadow);
}
.page-hero__title em { font-style: normal; color: var(--color-gold); }
.page-hero__lede {
  margin-top: var(--space-6);
  text-wrap: pretty;
  max-width: var(--measure-narrow);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--color-text-muted);
}

/* Jump list: numbered links to the page's parts */
.jump { border-bottom: var(--border-width-hairline) solid var(--color-border); }
.jump a {
  display: grid;
  grid-template-columns: var(--space-12) 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--tap-target) + var(--space-6));
  padding-block: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--motion-button);
}
.jump__num { font-family: var(--font-family-display); font-size: var(--font-size-500); line-height: 1; color: var(--color-numeral); }
.jump__label { display: grid; gap: var(--space-0-5); font-weight: var(--font-weight-bold); }
.jump__label span { font-size: var(--text-small-size); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.jump a svg { width: var(--space-4); height: var(--space-4); color: var(--color-gold); transition: transform var(--motion-button); }
.jump a:hover { color: var(--color-gold); }
.jump a:hover svg { transform: translateX(var(--nudge-distance)); }

@media (min-width: 960px) {
  .page-hero__grid { grid-template-columns: 7fr 4fr; gap: var(--space-20); }
}

html.js:not(.hero-go) .page-hero__grid > * { opacity: 0; }
html.hero-go .page-hero__grid > * { animation: hero-rise var(--duration-reveal) var(--ease-emphasis) backwards; }
html.hero-go .page-hero__grid > :nth-child(2) { animation-delay: calc(var(--reveal-stagger) * 3); }

/* ---------- 21. Shared Stage 2 pieces ---------- */
.section-head { margin-bottom: var(--space-stack-md); }
.section-head--center { text-align: center; }
.section-head--center .h2, .section-head--center .body-lg { margin-inline: auto; }
.section-head .h2 + .body-lg { margin-top: var(--space-stack-sm); }
.prose p + p { margin-top: var(--space-4); }
.prose .h2, .more .h2 { margin-bottom: var(--space-stack-sm); }
.prose p { max-width: var(--measure); }
.prose .body-lg + p { margin-top: var(--space-5); }
.split { display: grid; gap: var(--space-stack-lg); align-items: center; }
.split .ph { width: 100%; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
  .split--media-left > :first-child { order: 0; }
  .split--wide-copy { grid-template-columns: 6fr 5fr; }
}
.statement--md { max-width: 24ch; font-size: var(--font-size-700); line-height: var(--line-height-snug); }
.lead-display {
  font-family: var(--font-family-display);
  font-size: var(--font-size-600);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.lead-display--accent { color: var(--color-text-accent); }

/* ---------- 22. About: why UBX ---------- */
.story__grid { display: grid; gap: var(--space-stack-md); margin-top: var(--space-stack-lg); }
.story__grid .lead-display { margin-bottom: var(--space-5); }
@media (min-width: 960px) {
  .story__grid { grid-template-columns: 5fr 6fr; gap: var(--space-20); align-items: start; }
}

/* Same humanity (sunshine band) */
.human { text-align: center; }
.human .h2 { max-width: 24ch; margin-inline: auto; }
.human__sentence { margin-top: var(--space-stack-lg); }
.human__frame { display: block; font-size: var(--text-body-lg-size); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.human__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-6);
  max-width: var(--container-narrow);
  margin: var(--space-5) auto;
  font-family: var(--font-family-display);
  font-size: var(--font-size-700);
  line-height: var(--line-height-snug);
}
.human__words span:last-child { color: var(--color-text-accent); }
.human__close {
  display: grid;
  justify-items: center;
  margin-top: var(--space-stack-lg);
  padding-top: var(--space-stack-md);
  border-top: var(--border-width-hairline) solid var(--color-border);
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
}
.human__close span:last-child { color: var(--color-text-accent); }

/* Bridge arc: the gold streak drawn between the Bible and everyday life */
.arc { position: relative; margin-top: calc(var(--space-stack-lg) + var(--space-16)); }
.arc svg { width: 100%; height: auto; aspect-ratio: 1200 / 240; overflow: visible; }
/* The svg keeps the viewBox's aspect ratio, so it scales evenly and the strokes are set in viewBox units
   (non-scaling-stroke would break the pathLength dash in Chrome and cut the arc short) */
.arc path {
  fill: none;
  stroke: var(--color-gold-500);
  stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.arc path + path { stroke-width: 1.2; opacity: 0.45; }
@media (max-width: 959px) {
  .arc path { stroke-width: 5; }
  .arc path + path { stroke-width: 2.5; }
}
.arc circle { fill: var(--color-text-accent); }
.arc__labels { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
.arc__label, .arc__apex {
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent);
}
.arc__label:last-child { text-align: right; }
.arc__apex {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -110%);
  font-family: var(--font-family-display);
  font-size: var(--font-size-600);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--color-text);
}

/* Meets you where you are */
.made-card--plain .h3 { margin-bottom: 0; }
.nos { display: grid; gap: var(--space-2); margin-top: var(--space-stack-lg); text-align: center; }
.nos p { font-size: var(--font-size-500); line-height: var(--line-height-snug); font-weight: var(--font-weight-medium); text-wrap: balance; }
.nos p:last-child { margin-top: var(--space-3); color: var(--color-text-accent); }

/* More than a book (sunshine) */
.more__believe { margin-top: var(--space-stack-md); margin-bottom: 0; }
.more .book-list { margin-block: var(--space-3) var(--space-8); }
.more .book-list__item { font-weight: var(--font-weight-medium); }

/* Mission and vision */
.mv__grid { display: grid; gap: var(--space-6); }
.mv-card {
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.mv-card .eyebrow { margin-bottom: var(--space-5); }
.mv-card__text {
  font-family: var(--font-family-display);
  font-size: var(--font-size-500);
  line-height: var(--line-height-normal);
  text-wrap: pretty;
}
@media (min-width: 960px) {
  .mv__grid { grid-template-columns: 1fr 1fr; }
  .mv-card { padding: var(--space-12) var(--space-10); }
}

/* Tagline (stage band, uses the quote section's streaks) */
.tagline {
  text-align: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-800);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.tagline span { display: block; }
.tagline em { font-style: normal; color: var(--color-gold); }

/* ---------- 23. About: meet the authors ---------- */
.meet__head .h2 { max-width: 22ch; }
.meet__intro { display: grid; gap: var(--space-stack-md); margin-top: var(--space-stack-lg); }
.meet__answer { margin-bottom: var(--space-4); font-size: var(--font-size-500); line-height: var(--line-height-snug); font-weight: var(--font-weight-bold); }
@media (min-width: 960px) {
  .meet__intro { grid-template-columns: 5fr 6fr; gap: var(--space-20); align-items: start; }
}

.philosophy {
  margin-top: var(--space-stack-lg);
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-sunshine-soft);
  text-align: center;
}
.philosophy .eyebrow { color: var(--color-tangerine-900); }
.philosophy__line {
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--font-family-display);
  font-size: var(--font-size-700);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
@media (min-width: 960px) { .philosophy { padding: var(--space-20) var(--space-16); } }

/* Author profiles: portrait holds still while the bio scrolls past (desktop) */
.profiles { display: grid; gap: var(--space-section); margin-top: var(--space-section); }
.profile { display: grid; gap: var(--space-stack-md); align-items: start; }
.profile__media { width: 100%; max-width: var(--profile-media); }
.profile__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-700);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.profile__creds { color: var(--color-text-accent); }
.roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-8); }
.roles li {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--tap-target) * 0.8);
  padding-inline: var(--space-4);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}
.profile__bio p { max-width: var(--measure); color: var(--color-text-muted); }
.profile__bio p + p { margin-top: var(--space-4); }
.profile__bio .body-lg { color: var(--color-text); }
.profile__bio cite { font-style: normal; font-weight: var(--font-weight-bold); color: var(--color-text); }
.profile__close {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--color-border);
  font-family: var(--font-family-display);
  font-size: var(--font-size-500);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  text-wrap: pretty;
}
.profile__bio .profile__close { color: var(--color-text); }
@media (min-width: 960px) {
  .profile { grid-template-columns: var(--profile-media) 1fr; gap: var(--space-20); }
  .profile__media { position: sticky; top: calc(var(--header-height-compact) + var(--space-8)); }
  .profile--flip { grid-template-columns: 1fr var(--profile-media); }
  .profile--flip .profile__media { order: 2; }
}

/* The heart behind UBX */
.heart__both { margin-block: var(--space-5); font-size: var(--font-size-500); line-height: var(--line-height-snug); font-weight: var(--font-weight-bold); }

/* Invitation (final CTA) */
.invite__lines { display: grid; gap: var(--space-1); margin-top: var(--space-6); font-size: var(--font-size-500); line-height: var(--line-height-snug); font-weight: var(--font-weight-medium); }
.invite__room { margin-top: var(--space-6); font-family: var(--font-family-display); font-size: var(--font-size-600); line-height: var(--line-height-snug); }
.invite__welcome {
  margin-top: var(--space-stack-md);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

/* ---------- 24. Experience: tabs ---------- */
.tabs { position: relative; padding-bottom: var(--space-stack-md); }
.tabbar {
  position: sticky;
  top: var(--header-height-compact);
  z-index: calc(var(--z-header) - 2);
  padding-block: var(--space-3);
  background-color: var(--color-cream);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}
.tabbar__list {
  position: relative;
  display: flex;
  gap: var(--space-1);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.tabbar__pill {
  position: absolute;
  left: 0; top: var(--space-1); bottom: var(--space-1);
  width: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-action-bg);
  transition: transform var(--motion-reveal), width var(--motion-reveal);
}
html:not(.has-tabs) .tabbar { display: none; }
.tab {
  position: relative;
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--pill-height);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-small-size);
  white-space: nowrap;
  transition: color var(--motion-button), background-color var(--motion-button);
}
.tab span { display: none; font-weight: var(--font-weight-regular); color: var(--color-text-muted); transition: color var(--motion-button); }
.tab:hover { background-color: var(--color-hover-pill); }
.tab[aria-selected="true"] { color: var(--color-action-text); background-color: transparent; }
.tab[aria-selected="true"] span { color: var(--color-neutral-700); }
@media (min-width: 640px) {
  .tab { padding-inline: var(--space-6); font-size: var(--text-body-size); }
}
@media (min-width: 960px) {
  .tab span { display: inline; }
}

.tabpanel { padding-top: var(--space-stack-lg); scroll-margin-top: calc(var(--header-height-compact) + var(--pill-height) + var(--space-6)); }
.tabpanel[hidden] { display: none; }
.tabpanel.is-entering { animation: panel-in var(--duration-reveal) var(--ease-emphasis); }
@keyframes panel-in { from { opacity: 0; translate: 0 var(--reveal-distance); } }
html:not(.has-tabs) .tabpanel + .tabpanel { margin-top: var(--space-section); }

.xp-intro { display: grid; gap: var(--space-stack-md); align-items: center; }
.xp-intro .h2 { margin-bottom: var(--space-stack-sm); }
.xp-intro .ph { width: 100%; }
@media (min-width: 960px) {
  .xp-intro { grid-template-columns: 6fr 5fr; gap: var(--space-20); }
}
.panel-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-stack-lg); padding-top: var(--space-8); border-top: var(--border-width-hairline) solid var(--color-border); }
.panel-next p { color: var(--color-text-muted); }

/* ---------- 25. Experience: placeholder players ---------- */
.playlist {
  margin-top: var(--space-stack-lg);
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.playlist__title { padding: var(--space-3) var(--space-3) var(--space-2); font-size: var(--text-eyebrow-size); font-weight: var(--text-eyebrow-weight); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--color-text-accent); }

.track {
  position: relative;
  display: grid;
  grid-template-columns: var(--play-size) 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--motion-button);
}
.track + .track { border-top: var(--border-width-hairline) solid var(--color-border); }
.track:hover, .track.is-current { background-color: var(--color-sunshine-soft); }
.track.is-current + .track, .track:hover + .track { border-top-color: transparent; }
.track__title { font-weight: var(--font-weight-bold); }
.track__meta { font-size: var(--text-small-size); color: var(--color-text-muted); }
.track__time { font-size: var(--text-small-size); font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }
/* Progress runs along the row's base */
.track::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 0;
  height: var(--progress-height);
  border-radius: var(--radius-full);
  background-color: var(--color-progress);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

.play {
  display: inline-grid;
  place-items: center;
  width: var(--play-size);
  height: var(--play-size);
  border-radius: var(--radius-full);
  background-color: var(--color-action-bg);
  color: var(--color-action-text);
  transition: background-color var(--motion-button), color var(--motion-button);
}
.play:hover { background-color: var(--color-action-bg-hover); }
.play svg { width: var(--space-5); height: var(--space-5); }
.play .i-pause { display: none; }
.is-playing > .play .i-play, .is-playing .now__controls .play .i-play { display: none; }
.is-playing > .play .i-pause, .is-playing .now__controls .play .i-pause { display: block; }
.play:focus-visible { border-radius: var(--radius-full); }

/* Audio: now playing card (stage) and chapter list */
.listen { display: grid; gap: var(--space-stack-md); margin-top: var(--space-stack-lg); align-items: start; }
.now {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}
.now__streak { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.now__streak path { fill: none; stroke: var(--color-gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.45; }
.now__streak path + path { opacity: 0.2; }
.now__top { position: relative; display: grid; grid-template-columns: var(--now-cover) 1fr; gap: var(--space-5); align-items: center; }
.now__cover { width: var(--now-cover); aspect-ratio: var(--ratio-book); object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.now .eyebrow { margin-bottom: var(--space-2); }
.now__title { font-family: var(--font-family-display); font-size: var(--font-size-600); line-height: var(--line-height-snug); text-wrap: balance; }
.now__meta { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-small-size); }
.now__bar { position: relative; margin-top: var(--space-8); height: var(--progress-height); border-radius: var(--radius-full); background-color: var(--color-progress-track); }
.now__bar span { position: absolute; inset: 0; border-radius: inherit; background-color: var(--color-progress); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.now__times { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-small-size); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.now__controls { position: relative; display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.now__controls .play { width: var(--play-size-lg); height: var(--play-size-lg); }
.now__controls .play svg { width: var(--space-6); height: var(--space-6); }
.now__controls p { color: var(--color-text-muted); font-size: var(--text-small-size); }

.chapters { display: grid; gap: var(--space-6); }
.chapters .playlist { margin-top: 0; }
.chapters__part { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-2); }
.chapters__part span { font-family: var(--font-family-display); font-size: var(--font-size-500); line-height: 1; color: var(--color-numeral); }
.chapters__part strong { font-size: var(--text-body-size); }
.listen__more { margin-top: var(--space-6); }

@media (min-width: 960px) {
  .listen { grid-template-columns: 5fr 6fr; gap: var(--space-12); }
  .now { position: sticky; top: calc(var(--header-height-compact) + var(--pill-height) + var(--space-12)); padding: var(--space-8); }
}

/* ---------- 26. Experience: devotionals feed (Wix Blog in the build) ---------- */
.devo__grid { display: grid; gap: var(--space-6); margin-top: var(--space-stack-lg); }
.devo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.devo-card__ref {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--space-1);
  min-height: calc(var(--space-32) + var(--space-8));
  padding: var(--space-6);
  overflow: hidden;
  background-color: var(--color-sunshine-soft);
  transition: background-color var(--motion-reveal);
}
.devo-card__ref svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.devo-card__ref path { fill: none; stroke: var(--color-placeholder-streak); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0.5; }
.devo-card__ref strong { position: relative; font-family: var(--font-family-display); font-size: var(--font-size-600); font-weight: var(--font-weight-regular); line-height: 1; }
.devo-card__ref span { position: relative; font-size: var(--text-eyebrow-size); font-weight: var(--text-eyebrow-weight); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--color-tangerine-900); }
.devo-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-3); padding: var(--space-6); }
.devo-card__meta { font-size: var(--text-small-size); color: var(--color-text-muted); }
.devo-card__title { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); font-weight: var(--text-h3-weight); text-wrap: balance; }
.devo-card__title a { text-decoration: none; color: inherit; }
/* The whole card is the link target */
.devo-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); }
.devo-card__excerpt { color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.devo-card__go { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); font-weight: var(--font-weight-bold); color: var(--color-text-accent); }
.devo-card__go svg { width: var(--space-4); height: var(--space-4); transition: transform var(--motion-button); }
.devo-card:hover .devo-card__ref { background-color: var(--color-sunshine); }
.devo-card:hover .devo-card__go svg { transform: translateX(var(--nudge-distance)); }
.devo-card:focus-within { outline: var(--border-width-thick) solid var(--color-focus-ring); outline-offset: var(--space-1); }
.devo-card__title a:focus-visible { outline: none; }

@media (min-width: 640px) { .devo__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .devo__grid { grid-template-columns: repeat(3, 1fr); } }

/* One devotional in full: the reference panel beside the four parts */
.devo-post {
  display: grid;
  margin-top: var(--space-stack-lg);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.devo-post__ref { min-height: calc(var(--space-24) + var(--space-8)); }
.devo-post__body { padding: var(--space-8) var(--space-6); }
.devo-post__title { font-family: var(--font-family-display); font-size: var(--font-size-600); font-weight: var(--font-weight-regular); line-height: var(--line-height-snug); }
.devo-post__part { max-width: var(--measure); margin-top: var(--space-8); }
.devo-post__part + .devo-post__part { padding-top: var(--space-6); border-top: var(--border-width-hairline) solid var(--color-border); }
.devo-post__label {
  margin-bottom: var(--space-3);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent);
}
.devo-post__part p { color: var(--color-text-muted); }
.devo-post__part .devo-post__hook { font-size: var(--text-body-lg-size); line-height: var(--line-height-normal); color: var(--color-text); font-weight: var(--font-weight-medium); }
.devo-post__part .devo-post__scripture p {
  font-family: var(--font-family-accent);
  font-style: italic;
  font-size: var(--font-size-500);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}
.devo-post__scripture cite { font-family: var(--font-family-body); font-style: normal; font-size: var(--text-small-size); font-weight: var(--font-weight-bold); color: var(--color-text-accent); white-space: nowrap; }
.devo-post__part .devo-post__prayer { color: var(--color-text); }

@media (min-width: 960px) {
  .devo-post { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .devo-post__ref { align-content: start; padding: var(--space-10); }
  .devo-post__body { padding: var(--space-12) var(--space-12) var(--space-12) var(--space-10); }
  .devo-post__part:first-of-type { margin-top: var(--space-6); }
}

/* =====================================================================
   Wix build additions (29 Oct 2026)
   "Coming soon" state for Soaking and Audio until the recordings are uploaded.
   ===================================================================== */
.soon-banner {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-stack-md);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-sunshine-soft);
  border: var(--border-width-hairline) solid var(--color-border);
}
.soon-banner .eyebrow { margin: 0; }
.soon-banner__title { font-family: var(--font-family-display); font-size: var(--font-size-600); line-height: 1.15; }
.soon-banner__text { color: var(--color-text-muted); max-width: var(--measure); }
.soon-banner .arrow-link { justify-self: start; margin-top: var(--space-2); }
.listen + .soon-banner, .soon-banner + .listen { margin-top: var(--space-stack-md); }

.play--soon { opacity: 0.35; cursor: default; }
.play--soon:hover { background-color: var(--color-action-bg); }
.track.is-soon:hover { background-color: transparent; }
.track.is-soon + .track { border-top-color: var(--color-border); }
.track.is-soon .track__time { font-weight: var(--font-weight-medium); }
.track.is-soon::after { display: none; }

.now.is-soon .now__bar, .now.is-soon .now__times { display: none; }
.now.is-soon .now__controls { margin-top: var(--space-6); }
.soon-banner .arrow-link + .arrow-link { margin-top: 0; }

/* ---------- Cityscape (client request, 30 Oct 2026) ----------
   Dark sections (heroes, quote bands, footer): the client-approved skyline artwork
   (assets/img/cityscape-*.webp, from skyline.png), screen-blended so its black drops out and
   only the gold haze, towers and lit windows show. Sunshine CTAs: the same city as a faint
   tangerine silhouette (assets/img/cityscape.svg used as a mask), since a dark photo can't sit on yellow. */
.cityscape {
  position: absolute;
  inset: auto 0 0 0;
  pointer-events: none;
  aspect-ratio: 2087 / 298;
  min-height: 120px;
  background: url("/assets/img/cityscape-2087.webp") center bottom / cover no-repeat;
  mix-blend-mode: screen;
}
@media (max-width: 959px) {
  .cityscape { background-image: url("/assets/img/cityscape-1200.webp"); }
}
/* Heroes: rises out of the dawn band at the base */
.cityscape--hero { opacity: 0.9; }
.page-hero .cityscape--hero { bottom: calc(var(--space-section) * 0.45); opacity: 0.8; }
/* Quote bands and footer: a quieter line along the bottom edge */
.cityscape--stage { z-index: var(--z-below); opacity: 0.55; }
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.cityscape--footer { z-index: var(--z-below); opacity: 0.35; }
/* Sunshine CTAs: tangerine silhouette */
.cityscape--cta {
  z-index: var(--z-below);
  aspect-ratio: auto;
  height: clamp(100px, 16vw, 240px);
  opacity: 0.07;
  mix-blend-mode: multiply;
  background: var(--color-tangerine-900);
  -webkit-mask: url("/assets/img/cityscape.svg") center bottom / auto 100% repeat-x;
          mask: url("/assets/img/cityscape.svg") center bottom / auto 100% repeat-x;
}

/* ---------- Home hero: client banner (30 Oct 2026) ----------
   The client's banner artwork shown as supplied, below the fixed header, with the two
   main buttons underneath so visitors can still buy the book and explore. */
.hero-banner {
  position: relative;
  padding-top: var(--header-height);
  padding-bottom: var(--space-10);
  background-color: #000;
}
.hero-banner__art { display: block; }
.hero-banner__art img { display: block; width: 100%; height: auto; max-width: 2155px; margin-inline: auto; }
.hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (max-width: 639px) {
  .hero-banner { padding-bottom: var(--space-8); }
  .hero-banner__actions { flex-direction: column; align-items: stretch; }
  .hero-banner__actions .btn { justify-content: center; }
}

/* The book section copy (client, 30 Oct): subline and two-line list items */
.book__sub { margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-4); font-family: var(--font-family-accent); font-style: italic; font-size: var(--font-size-500); color: var(--color-text-accent); }
.book__copy .body-lg + .body-lg { margin-top: var(--space-3); }
.book-list__title { display: block; font-weight: var(--font-weight-bold); line-height: var(--line-height-snug); }
.book-list__text { display: block; margin-top: var(--space-1); font-size: var(--text-body-size); font-weight: var(--font-weight-regular); color: var(--color-text-muted); line-height: 1.5; }