/* ============================================================================
   Pali — Total Life Dynamics, Inc.
   Design foundation + component library
   Dart Marketing · Step 0 deliverable (type scale, palette tokens, components)

   The palette is the locked five-colour system. Every other value in this file
   is a tint, shade or alpha of those five — no sixth hue is introduced.
   No purple gradients. No all-caps body copy.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* --- the five locked brand colours ------------------------------------ */
  --cream:        #F6F3EC;
  --rich-blue:    #02019D;
  --bright-blue:  #3A4BFF;
  --ink:          #0A0E14;
  --mute:         #5A5750;

  /* --- light mode surfaces (tints/shades of cream + ink) ----------------- */
  --bg:           #F6F3EC;
  --bg-raised:    #FBF9F4;
  --bg-sunken:    #EFEAE0;
  --bg-anchor:    #02019D;   /* rich blue anchor surface */
  --bg-deep:      #0A0E14;   /* ink surface */

  --text:         #0A0E14;
  --text-soft:    #3A3E46;
  --text-mute:    #5A5750;
  --text-on-dark:      #F6F3EC;
  --text-on-dark-mute: rgba(246, 243, 236, 0.68);

  --accent:       #02019D;   /* links, primary actions */
  --accent-hi:    #3A4BFF;   /* hover, rules, focus */
  --accent-soft:  rgba(58, 75, 255, 0.10);

  --hairline:     rgba(10, 14, 20, 0.14);
  --hairline-2:   rgba(10, 14, 20, 0.08);
  --hairline-on-dark: rgba(246, 243, 236, 0.16);

  --shadow-sm: 0 1px 2px rgba(10, 14, 20, 0.05), 0 6px 20px -12px rgba(10, 14, 20, 0.28);
  --shadow-md: 0 2px 4px rgba(10, 14, 20, 0.05), 0 22px 48px -26px rgba(10, 14, 20, 0.40);
  --shadow-lg: 0 4px 8px rgba(10, 14, 20, 0.06), 0 44px 90px -40px rgba(10, 14, 20, 0.48);

  /* --- type ------------------------------------------------------------- */
  --font-display:   'Fraunces', 'Iowan Old Style', Georgia, serif;              /* display + branded terms */
  --font-body:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* all body + UI */
  --font-editorial: 'Newsreader', Georgia, serif;                               /* taglines, pull quotes */

  --fs-display-xl: clamp(2.6rem, 1.42rem + 4.6vw, 5rem);
  --fs-display-l:  clamp(2.1rem, 1.42rem + 2.7vw, 3.6rem);
  --fs-display-m:  clamp(1.7rem, 1.32rem + 1.6vw, 2.6rem);
  --fs-display-s:  clamp(1.35rem, 1.18rem + 0.7vw, 1.75rem);
  --fs-editorial:  clamp(1.25rem, 1.02rem + 1.0vw, 1.95rem);
  --fs-lead:       clamp(1.06rem, 1rem + 0.36vw, 1.28rem);
  --fs-body:       1rem;
  --fs-small:      0.9375rem;
  --fs-fine:       0.8125rem;
  --fs-micro:      0.6875rem;

  --lh-tight: 1.06;
  --lh-snug:  1.25;
  --lh-body:  1.72;

  --tracking-label: 0.22em;

  /* --- space + shape ---------------------------------------------------- */
  --gutter:     clamp(1.25rem, 0.6rem + 2.6vw, 4.5rem);
  --section-y:  clamp(4.5rem, 2.8rem + 6vw, 9rem);
  --max:        1200px;
  --max-wide:   1400px;
  --max-read:   68ch;

  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --header-h: 76px;
  color-scheme: light;
}

/* --- dark mode: same five colours, roles swapped ------------------------- */
:root[data-theme="dark"] {
  --bg:           #0A0E14;
  --bg-raised:    #12171F;
  --bg-sunken:    #06090D;
  --bg-anchor:    #02019D;
  --bg-deep:      #06090D;

  --text:         #F6F3EC;
  --text-soft:    rgba(246, 243, 236, 0.82);
  --text-mute:    rgba(246, 243, 236, 0.62);

  --accent:       #3A4BFF;
  --accent-hi:    #8E99FF;
  --accent-soft:  rgba(58, 75, 255, 0.20);

  --hairline:     rgba(246, 243, 236, 0.18);
  --hairline-2:   rgba(246, 243, 236, 0.10);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px -12px rgba(0, 0, 0, 0.7);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 22px 48px -26px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.55), 0 44px 90px -40px rgba(0, 0, 0, 0.9);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ 2. RESET */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease-soft), color 0.5s var(--ease-soft);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

::selection { background: var(--rich-blue); color: var(--cream); }
:root[data-theme="dark"] ::selection { background: var(--bright-blue); color: var(--cream); }

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--accent); color: var(--cream);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--cream); }

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

/* ------------------------------------------------------------- 3. PRIMITIVES */

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide   { max-width: var(--max-wide); }
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight  { padding-block: calc(var(--section-y) * 0.62); }
.section--sunken { background: var(--bg-sunken); }
.section--raised { background: var(--bg-raised); }
.section--hair   { border-top: 1px solid var(--hairline-2); }

/* type helpers */
.display {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500;
  line-height: var(--lh-tight); letter-spacing: -0.018em; color: var(--text);
}
.display--xl { font-size: var(--fs-display-xl); }
.display--l  { font-size: var(--fs-display-l); }
.display--m  { font-size: var(--fs-display-m); line-height: var(--lh-snug); }
.display--s  { font-size: var(--fs-display-s); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.display em  { font-style: italic; color: var(--accent); font-weight: 500; }

.editorial {
  font-family: var(--font-editorial); font-optical-sizing: auto;
  font-style: italic; font-weight: 340;
  font-size: var(--fs-editorial); line-height: 1.5; letter-spacing: -0.005em;
  color: var(--text-soft);
}

.lead { font-size: var(--fs-lead); line-height: 1.68; color: var(--text-soft); max-width: var(--max-read); }
.body { color: var(--text-soft); max-width: var(--max-read); }
.fine { font-size: var(--fs-fine); line-height: 1.65; color: var(--text-mute); }
.stack > * + * { margin-top: 1.15rem; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

.brandmark { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.012em; }

/* Fraunces has no precomposed o-macron, so the browser builds it from an "o"
   plus a combining mark. Tracking then pushes the macron off the letter. Any
   display-type "enso" gets its tracking reset so the mark sits where it should. */
.enso-word { letter-spacing: normal; }
.tm { font-size: 0.56em; vertical-align: super; letter-spacing: 0; font-weight: 500; }

/* micro UI label — never body copy */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem;
}
.eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--accent-hi); flex: none; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ''; width: 30px; height: 1px; background: var(--accent-hi); flex: none; }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 1.5rem + 2.4vw, 4.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1.1rem; }
.section-head--center p { margin-inline: auto; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 30px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.01em; cursor: pointer; text-align: center;
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft),
              border-color .3s var(--ease-soft), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--primary { background: var(--accent); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--bright-blue); color: var(--cream); transform: translateY(-2px); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .btn--primary:hover { background: var(--cream); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--accent-hi); color: var(--accent-hi); transform: translateY(-2px); }

.btn--on-dark { background: var(--cream); color: var(--rich-blue); }
.btn--on-dark:hover { background: var(--cream); color: var(--ink); transform: translateY(-2px); }
.btn--ghost-on-dark { background: transparent; color: var(--cream); border-color: var(--hairline-on-dark); }
.btn--ghost-on-dark:hover { border-color: var(--cream); color: var(--cream); transform: translateY(-2px); }

.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); font-weight: 600; color: var(--accent);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--accent-hi); gap: 15px; }

/* tags — sit beside a feature name, never inside the sentence */
.tag {
  display: inline-block; vertical-align: middle;
  padding: 3px 10px 4px; margin-left: 10px;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mute); white-space: nowrap;
  transform: translateY(-2px);
}
.tag--premium { color: var(--accent); border-color: var(--accent-hi); background: var(--accent-soft); }
.tag--wide { text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; }

/* The ensō mark — official artwork, tinted through the palette only.
   Never closed, recoloured outside the palette, given effects, rotated or
   redrawn. Clear space is enforced by --enso-clear (>= the macron stroke). */
.enso {
  --enso-size: 200px;
  --enso-clear: calc(var(--enso-size) * 0.09);
  width: var(--enso-size); height: var(--enso-size);
  margin: var(--enso-clear);
  background-color: currentColor;
  -webkit-mask-image: url("../img/enso.svg");     mask-image: url("../img/enso.svg");
  -webkit-mask-size: contain;                     mask-size: contain;
  -webkit-mask-repeat: no-repeat;                 mask-repeat: no-repeat;
  -webkit-mask-position: center;                  mask-position: center;
  flex: none;
}
.enso--accent { color: var(--accent); }
.enso--ink    { color: var(--text); }
.enso--cream  { color: var(--cream); }

/* ---------------------------------------------------------------- 4. HEADER */

/* The partial wrappers must not create a box of their own: a sticky header
   can only stick inside its parent, and a 76px-tall wrapper would let it
   scroll straight off the top of the page. */
[data-include] { display: contents; }


.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-soft), background-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.site-header.is-stuck { border-bottom-color: var(--hairline-2); box-shadow: var(--shadow-sm); }

.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand .enso { --enso-size: 30px; --enso-clear: 3px; color: var(--accent); transition: color .3s var(--ease-soft); }
.brand:hover .enso { color: var(--accent-hi); }
.brand-name { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
              font-size: 1.22rem; letter-spacing: -0.015em; line-height: 1; display: block; }
.brand-org  { display: block; font-family: var(--font-body); font-size: 0.6rem; font-weight: 600;
              letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); margin-top: 4px; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); }
.nav a {
  position: relative; font-size: var(--fs-small); font-weight: 500; color: var(--text-soft);
  padding: 6px 0; transition: color .25s var(--ease-soft);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent-hi); transition: right .35s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
/* `.nav a` would otherwise strip the pill's horizontal padding away */
.nav a.btn { padding: 12px 24px; color: var(--cream); }
:root[data-theme="dark"] .nav a.btn:hover { color: var(--ink); }
.nav .btn::after { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.theme-toggle {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  cursor: pointer; color: var(--text-soft);
  transition: border-color .3s var(--ease-soft), color .3s var(--ease-soft), transform .5s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent-hi); color: var(--accent-hi); transform: rotate(18deg); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none; width: 42px; height: 40px; background: none;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer; position: relative;
}
.nav-toggle span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text);
  transition: transform .35s var(--ease), opacity .2s var(--ease-soft);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 120;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rich-blue), var(--bright-blue));
  pointer-events: none;
}
:root[data-theme="dark"] .scroll-progress { background: linear-gradient(90deg, var(--bright-blue), var(--cream)); }

/* ------------------------------------------------------------------ 5. HERO */

.hero { position: relative; padding-block: clamp(3rem, 1.8rem + 5vw, 6rem) clamp(4rem, 2.5rem + 5vw, 7.5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero-headline { margin-bottom: 1.4rem; }
.hero-tagline  { margin-bottom: 1.9rem; max-width: 26ch; }
.hero-body     { margin-bottom: 2.4rem; }

.hero-mark { position: relative; display: grid; place-items: center; min-height: 300px; }
.hero-mark .enso { --enso-size: clamp(190px, 25vw, 330px); color: var(--accent); position: relative; z-index: 1; }
.hero-mark::before {
  content: ''; position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 68%);
  border-radius: 50%;
}
.hero-mark .halo { position: absolute; border: 1px solid var(--hairline-2); border-radius: 50%; }
.hero-mark .halo--1 { inset: 2%; }
.hero-mark .halo--2 { inset: -12%; }

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  font-size: var(--fs-fine); font-weight: 500; color: var(--text-mute);
}
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-hi); flex: none; }

/* page hero (inner pages) */
.page-hero { padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }
.page-hero .display { max-width: 18ch; }
.page-hero .lead { margin-top: 1.4rem; }

/* ------------------------------------------------------------ 6. STATE CARDS */

.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem); }
.state {
  position: relative; padding: clamp(1.25rem, 1rem + 0.8vw, 2rem);
  background: var(--bg-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius);
  transition: transform .5s var(--ease), border-color .4s var(--ease-soft), box-shadow .5s var(--ease);
  overflow: hidden;
}
.state::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-hi); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.state:hover, .state.is-active { transform: translateY(-4px); border-color: var(--hairline); box-shadow: var(--shadow-md); }
.state:hover::after, .state.is-active::after { transform: scaleX(1); }
.state .enso { --enso-size: 34px; --enso-clear: 4px; color: var(--accent); margin: 0 0 1rem; opacity: .45; transition: opacity .5s var(--ease-soft); }
.state:hover .enso, .state.is-active .enso { opacity: 1; }
.state h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--fs-display-s); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: .5rem;
}
.state p { font-size: var(--fs-small); line-height: 1.62; color: var(--text-mute); }

/* ----------------------------------------------------------- 7. CONTENT SETS */

.feature-list { border-top: 1px solid var(--hairline-2); }
.feature {
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  border-bottom: 1px solid var(--hairline-2);
}
.feature-index {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); padding-top: .55rem;
}
.feature h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500;
  font-size: var(--fs-display-s); line-height: 1.22; letter-spacing: -0.012em; margin-bottom: .7rem;
}
.feature p { color: var(--text-soft); max-width: 62ch; }
.feature .note { display: block; margin-top: .85rem; font-size: var(--fs-fine); color: var(--text-mute); max-width: 62ch; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.card {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--bg-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease-soft);
  height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--hairline); }
.card h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--fs-display-s); line-height: 1.24; letter-spacing: -0.012em; margin-bottom: .65rem;
}
.card p { font-size: var(--fs-small); color: var(--text-mute); line-height: 1.68; }
.card .card-index {
  display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem;
}

.steps { counter-reset: step; display: grid; gap: clamp(1rem, .6rem + 1vw, 1.5rem); }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 54px 1fr; gap: clamp(1rem, .6rem + 1vw, 1.75rem); align-items: start;
  padding: clamp(1.25rem, 1rem + .8vw, 1.85rem);
  background: var(--bg-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius);
  transition: border-color .4s var(--ease-soft), transform .5s var(--ease);
}
.step:hover { border-color: var(--hairline); transform: translateX(4px); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: 1.05rem; color: var(--accent); line-height: 1.7;
}
.step h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--fs-display-s); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: .45rem;
}
.step p { font-size: var(--fs-small); color: var(--text-mute); line-height: 1.68; }

.rows { border-top: 1px solid var(--hairline-2); }
.row {
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(1rem, .6rem + 2vw, 3rem);
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.9rem); border-bottom: 1px solid var(--hairline-2);
}
.row dt { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 1.06rem; letter-spacing: -0.008em; }
.row dd { color: var(--text-soft); font-size: var(--fs-small); line-height: 1.7; }

/* two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: start; }
.split--lead { grid-template-columns: 0.85fr 1.15fr; }

/* ------------------------------------------------------------------ 8. BANDS */

.band { background: var(--bg-anchor); color: var(--cream); position: relative; overflow: hidden; }
.band--ink { background: var(--bg-deep); }
.band > * { position: relative; z-index: 1; }
.band .eyebrow { color: var(--cream); }
.band .eyebrow::before, .band .eyebrow::after { background: var(--cream); opacity: .55; }
.band .display, .band h2, .band h3 { color: var(--cream); }
.band .display em { color: var(--cream); opacity: .74; }
.band p, .band .lead, .band .editorial { color: var(--text-on-dark-mute); }
.band a:not(.btn) { color: var(--cream); border-bottom: 1px solid rgba(246, 243, 236, .4); }
.band a:not(.btn):hover { color: var(--cream); border-bottom-color: var(--cream); }
.band .enso { color: var(--cream); }
.band-watermark {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  --enso-size: min(560px, 52vw); opacity: .08; pointer-events: none; z-index: 0; margin: 0;
}

.quote { max-width: 900px; margin-inline: auto; text-align: center; }
.quote blockquote {
  font-family: var(--font-editorial); font-optical-sizing: auto; font-style: italic;
  font-weight: 340; font-size: var(--fs-editorial); line-height: 1.52; letter-spacing: -0.005em;
}
.quote figcaption {
  margin-top: 1.75rem; font-size: var(--fs-fine); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute);
}
.band .quote figcaption { color: var(--text-on-dark-mute); }

/* --------------------------------------------------------- 9. PRODUCT IMAGERY */

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.showcase--flip .showcase-media { order: 2; }

.phone {
  position: relative; width: min(300px, 74vw); margin-inline: auto;
  border-radius: 44px; padding: 11px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--text) 24%, transparent), color-mix(in srgb, var(--text) 8%, transparent));
  box-shadow: var(--shadow-lg);
}
.phone::before {
  content: ''; position: absolute; top: 21px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 21px; border-radius: var(--radius-pill);
  background: var(--ink); opacity: .92; z-index: 2;
}
.phone-screen {
  border-radius: 34px; overflow: hidden; background: var(--bg-sunken);
  aspect-ratio: 1320 / 2868; display: block; width: 100%;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone-screen .placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: .4rem;
  padding: 2rem; text-align: center; font-size: var(--fs-fine); line-height: 1.5; color: var(--text-mute);
  background: repeating-linear-gradient(135deg, var(--bg-sunken) 0 14px, var(--bg-raised) 14px 28px);
}
.phone-screen .placeholder strong { font-family: var(--font-display); font-weight: 600; color: var(--text-soft); font-size: .95rem; }

.phone-stack { display: flex; justify-content: center; align-items: flex-end; }
.phone-stack .phone { margin-inline: 0; width: min(250px, 44vw); }
.phone-stack .phone:nth-child(1) { transform: translate(28px, 22px) scale(.9); z-index: 1; }
.phone-stack .phone:nth-child(2) { z-index: 3; }
.phone-stack .phone:nth-child(3) { transform: translate(-28px, 22px) scale(.9); z-index: 2; }

.watch-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, .6rem + 1.6vw, 2.25rem); }
.watch {
  width: clamp(118px, 15vw, 164px); border-radius: 30px; padding: 8px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--text) 26%, transparent), color-mix(in srgb, var(--text) 8%, transparent));
  box-shadow: var(--shadow-md); transition: transform .5s var(--ease);
}
.watch:hover { transform: translateY(-6px); }
.watch-screen { border-radius: 23px; overflow: hidden; background: var(--ink); aspect-ratio: 396 / 484; }
.watch-screen img { width: 100%; height: 100%; object-fit: cover; }
.watch-screen .placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; padding: .75rem; text-align: center;
  font-size: .62rem; line-height: 1.4; color: var(--text-on-dark-mute);
  background: repeating-linear-gradient(135deg, #0A0E14 0 10px, #12171F 10px 20px);
}
.media-caption { margin-top: 1.1rem; font-size: var(--fs-fine); color: var(--text-mute); text-align: center; }
.band .media-caption { color: var(--text-on-dark-mute); }

/* ------------------------------------------------------------------ 10. FORM */

.form-shell {
  background: var(--bg-raised); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; gap: clamp(1.5rem, 1rem + 1vw, 2.1rem); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }

.field > label {
  display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-mute); margin-bottom: .7rem;
}
.field .optional {
  margin-left: 10px; font-family: var(--font-editorial); font-style: italic;
  font-weight: 400; font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--text-mute);
}
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--hairline);
  padding: 6px 0 13px; font-size: 1.0625rem; color: var(--text); outline: none; resize: vertical;
  transition: border-color .3s var(--ease-soft); border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--text-mute) 60%, transparent); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent-hi); }
.field textarea { min-height: 108px; }
.field .hint { display: block; margin-top: .65rem; font-size: var(--fs-fine); color: var(--text-mute); }
.field .error { display: none; margin-top: .55rem; font-size: var(--fs-fine); color: var(--accent); font-weight: 600; }
.field.has-error input, .field.has-error textarea { border-bottom-color: var(--accent); }
.field.has-error .error { display: block; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: .5rem; }
.form-note { font-family: var(--font-editorial); font-style: italic; font-size: var(--fs-small); color: var(--text-mute); max-width: 42ch; }

.form-success { display: none; text-align: center; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
.form-success.is-visible { display: block; animation: rise .7s var(--ease) both; }
.form-success .enso { --enso-size: 66px; color: var(--accent); margin: 0 auto 1.5rem; }
.form-success h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: var(--fs-display-m); margin-bottom: .6rem; }
.form-success p { color: var(--text-mute); max-width: 46ch; margin-inline: auto; }

/* ------------------------------------------------------- 11. NOTICES / STATES */

.disclaimer {
  border: 1px solid var(--hairline); border-left: 3px solid var(--accent-hi);
  border-radius: var(--radius-sm);
  padding: clamp(1rem, .8rem + .8vw, 1.4rem) clamp(1.1rem, .9rem + .9vw, 1.6rem);
  background: var(--bg-raised);
}
.disclaimer p { font-size: var(--fs-fine); line-height: 1.7; color: var(--text-mute); max-width: 92ch; }
.disclaimer-label {
  display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.band .disclaimer { background: rgba(246, 243, 236, .07); border-color: var(--hairline-on-dark); border-left-color: var(--cream); }
.band .disclaimer p { color: var(--text-on-dark-mute); }
.band .disclaimer-label { color: var(--cream); }

.pending {
  border: 1px dashed var(--hairline); border-radius: var(--radius);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); text-align: center; background: var(--bg-sunken);
}
.pending h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: var(--fs-display-s); margin-bottom: .5rem; }
.pending p { font-size: var(--fs-small); color: var(--text-mute); max-width: 58ch; margin-inline: auto; }

/* ---------------------------------------------------------------- 12. FOOTER */

.site-footer {
  background: var(--bg-sunken); border-top: 1px solid var(--hairline-2);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2.25rem;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); }
.footer-brand .enso { --enso-size: 40px; --enso-clear: 4px; color: var(--accent); margin: 0 0 1rem; }
.footer-brand p { font-size: var(--fs-small); color: var(--text-mute); max-width: 36ch; margin-top: .75rem; }
.footer-col h4 {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 1.1rem;
}
.footer-col li { margin-bottom: .6rem; }
.footer-col a { font-size: var(--fs-small); color: var(--text-soft); }
.footer-col a:hover { color: var(--accent-hi); }

.footer-legal { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); padding-top: 1.75rem; border-top: 1px solid var(--hairline-2); }
.footer-legal .disclaimer { margin-bottom: 1.5rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; justify-content: space-between;
  font-size: var(--fs-fine); color: var(--text-mute);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.confidential-strip {
  margin-top: 1.25rem; font-size: var(--fs-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute); opacity: .78;
}

/* ------------------------------------------------------------ 13. ANIMATIONS */

@keyframes rise      { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes inkSettle { from { opacity: 0; transform: scale(.94); filter: blur(7px); }
                       to   { opacity: 1; transform: scale(1);   filter: blur(0); } }
@keyframes breathe   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } }
@keyframes haloDrift { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .9; transform: scale(1.035); } }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }
.no-js .reveal { opacity: 1; transform: none; }

.hero-mark .enso { animation: inkSettle 1.6s var(--ease) both, breathe 9s var(--ease-soft) 1.6s infinite; }
.hero-mark .halo { animation: haloDrift 11s var(--ease-soft) infinite; }
.hero-mark .halo--2 { animation-delay: 1.6s; }

/* ------------------------------------------------------------ 14. RESPONSIVE */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-mark { order: -1; min-height: 0; }
  .hero-tagline { max-width: none; }
  .states { grid-template-columns: repeat(2, 1fr); }
  .showcase, .split, .split--lead { grid-template-columns: 1fr; }
  .showcase--flip .showcase-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feature { grid-template-columns: 1fr; gap: .5rem; }
  .feature-index { padding-top: 0; margin-bottom: .35rem; }
  .row { grid-template-columns: 1fr; gap: .35rem; }
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--hairline-2);
    padding: 1rem var(--gutter) 1.75rem;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease-soft), transform .35s var(--ease);
    box-shadow: var(--shadow-md);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--hairline-2); font-size: 1.05rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1.1rem; border-bottom: none; }
  .states { grid-template-columns: 1fr; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .phone-stack { flex-wrap: wrap; gap: 1rem; }
  .phone-stack .phone { transform: none !important; width: min(260px, 72vw); }
  .band-watermark { display: none; }
  .form-foot { justify-content: stretch; }
  .form-foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .scroll-progress, .theme-toggle, .nav-toggle, .footer-grid { display: none !important; }
  body { background: #fff; color: #000; }
  .disclaimer { border: 1px solid #000; }
}

/* ============================================================================
   15. THE THREE-DIMENSIONAL LAYER
   Depth, tilt, scroll-driven perspective, the pinned state stage and the
   conversion furniture on the home page. All decoration — every piece of it
   collapses under prefers-reduced-motion, and no word depends on it.
   ========================================================================== */

.scene { perspective: 1400px; perspective-origin: 50% 45%; }
.scene-3d { transform-style: preserve-3d; }
[data-depth] { will-change: transform; transform-style: preserve-3d; }

/* --- tilt cards -------------------------------------------------------- */
[data-tilt] {
  position: relative; transform-style: preserve-3d; will-change: transform;
  backface-visibility: hidden;
}
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  pointer-events: none; transition: opacity .4s var(--ease-soft);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              color-mix(in srgb, var(--accent-hi) 24%, transparent), transparent 62%);
}
:root[data-theme="dark"] .tilt-glare {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(246, 243, 236, .15), transparent 62%);
}

/* --- the two-signal canvas --------------------------------------------- */
.signal-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 58% 70% at 50% 50%, #000 24%, transparent 88%);
          mask-image: radial-gradient(ellipse 58% 70% at 50% 50%, #000 24%, transparent 88%);
}
.signal-canvas { display: block; width: 100%; height: 100%; }
.signal-legend {
  position: absolute; left: 0; right: 0; bottom: -4px; z-index: 2;
  display: flex; justify-content: center; gap: clamp(1.25rem, 4vw, 3rem);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-mute);
}
.signal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.signal-legend i { width: 16px; height: 2px; border-radius: 2px; background: var(--rich-blue); }
.signal-legend span + span i { background: var(--bright-blue); }
:root[data-theme="dark"] .signal-legend i { background: var(--bright-blue); }
:root[data-theme="dark"] .signal-legend span + span i { background: var(--cream); }

/* --- headline split ---------------------------------------------------- */
/* overflow:hidden is what gives the hinge its edge to swing behind — the
   padding/margin pair keeps it from clipping ascenders and diacritics
   (the macron on "ensō" is the one that catches this). */
.split-word {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: 0.14em 0 0.10em; margin: -0.14em 0 -0.10em;
}
.split-word-in {
  display: inline-block; transform: translateY(112%) rotateX(-58deg); opacity: 0;
  transform-origin: 50% 0;
  transition: transform 1.05s var(--ease), opacity .8s var(--ease-soft);
}
.is-split-in .split-word-in { transform: none; opacity: 1; }
.no-js .split-word-in { transform: none; opacity: 1; }

/* --- scroll-driven perspective ----------------------------------------- */
[data-scroll-3d] { --p: 0; }
.deck-3d {
  transform-style: preserve-3d;
  transform: perspective(1500px)
             rotateY(calc((1 - var(--p)) * 24deg))
             rotateX(calc((1 - var(--p)) * 8deg))
             translate3d(0, calc((1 - var(--p)) * 36px), calc(var(--p) * 60px - 60px));
}
.rise-3d {
  transform: perspective(1200px)
             translate3d(0, calc((1 - var(--p)) * 54px), calc((1 - var(--p)) * -110px))
             rotateX(calc((1 - var(--p)) * 7deg));
}

/* --- pinned state stage ------------------------------------------------ */
.stage { position: relative; height: 300vh; }
.stage-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: grid; place-items: center; overflow: hidden;
}
.stage-inner { position: relative; width: 100%; max-width: var(--max); padding-inline: var(--gutter); }
.stage-head { text-align: center; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.stage-deck { position: relative; height: clamp(250px, 34vh, 340px); perspective: 1200px; }

.stage-panel {
  position: absolute; inset: 0; margin: auto; max-width: 640px; height: fit-content;
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem);
  background: var(--bg-raised); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  text-align: center; transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--i, 0) * 26px), calc(var(--i, 0) * -110px)) scale(calc(1 - var(--i, 0) * 0.05));
  opacity: 0; pointer-events: none;
  transition: transform .8s var(--ease), opacity .6s var(--ease-soft), filter .6s var(--ease-soft);
}
.stage-panel.is-front { opacity: 1; filter: none; pointer-events: auto; }
.stage-panel:not(.is-front):not(.is-past) { opacity: .09; filter: blur(3px); }
.stage-panel.is-past { opacity: 0; transform: translate3d(0, -60px, 180px) scale(1.06); }
.stage.is-static { height: auto; }
.stage.is-static .stage-sticky { position: static; height: auto; padding-block: var(--section-y); }
.stage.is-static .stage-deck { height: auto; display: grid; gap: 1rem; }
.stage.is-static .stage-panel { position: static; opacity: 1; transform: none; }

.stage-panel .enso { --enso-size: 46px; --enso-clear: 5px; color: var(--accent); margin: 0 auto 1.1rem; }
.stage-panel h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--fs-display-m); letter-spacing: -0.015em; line-height: 1.15; margin-bottom: .7rem;
}
.stage-panel p { color: var(--text-mute); max-width: 46ch; margin-inline: auto; }

.stage-dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.stage-dots button {
  width: 34px; height: 3px; border: none; border-radius: 3px; padding: 0; cursor: pointer;
  background: var(--hairline); transition: background-color .4s var(--ease-soft), transform .4s var(--ease);
}
.stage-dots button.is-on { background: var(--accent-hi); transform: scaleY(1.8); }

/* --- conversion furniture ---------------------------------------------- */
.proof {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, .6rem + 2vw, 2.75rem);
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border-block: 1px solid var(--hairline-2);
}
.proof li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-fine); font-weight: 600; color: var(--text-mute);
}
.proof svg { color: var(--accent-hi); flex: none; }

.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 2rem); }
.benefit {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  border: 1px solid var(--hairline-2); border-radius: var(--radius-lg);
  background: var(--bg-raised); height: 100%;
}
.benefit .glyph {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 1.35rem;
  border: 1px solid var(--accent-hi); border-radius: var(--radius-pill); color: var(--accent);
}
.benefit h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--fs-display-s); letter-spacing: -0.012em; line-height: 1.2; margin-bottom: .6rem;
}
.benefit p { font-size: var(--fs-small); color: var(--text-mute); line-height: 1.7; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, .6rem + 1.4vw, 2rem); }
.compare-col {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); background: var(--bg-raised);
}
.compare-col--ours { border-color: var(--accent-hi); box-shadow: var(--shadow-md); }
.compare-col h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--fs-display-s); margin-bottom: 1.25rem; letter-spacing: -0.012em;
}
.compare-col li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding-block: .7rem; border-bottom: 1px solid var(--hairline-2);
  font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6;
}
.compare-col li:last-child { border-bottom: none; }
.compare-col li svg { margin-top: 5px; color: var(--text-mute); flex: none; }
.compare-col--ours li svg { color: var(--accent); }

/* --- FAQ --------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hairline-2); }
.faq-item { border-bottom: 1px solid var(--hairline-2); }
.faq-item button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem); letter-spacing: -0.01em; color: var(--text);
  transition: color .3s var(--ease-soft);
}
.faq-item button:hover { color: var(--accent); }
.faq-sign { position: relative; width: 16px; height: 16px; flex: none; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item.is-open .faq-sign::after { transform: rotate(0deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.faq-answer p { padding-bottom: 1.5rem; color: var(--text-mute); max-width: 70ch; font-size: var(--fs-small); line-height: 1.75; }

/* --- sticky CTA bar ---------------------------------------------------- */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 12px clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--hairline-2); box-shadow: var(--shadow-md);
  transform: translateY(130%); transition: transform .55s var(--ease);
}
.cta-bar.is-up { transform: none; }
.cta-bar p { font-size: var(--fs-fine); color: var(--text-mute); margin: 0; }
.cta-bar .btn { padding: 11px 22px; flex: none; }

/* --- hero, in three dimensions ----------------------------------------- */
.hero--stage { min-height: min(90vh, 880px); display: grid; align-items: center; }
.hero-mark--3d { transform-style: preserve-3d; }
.hero-mark--3d .enso { will-change: transform; }
.hero-mark--3d .halo { will-change: transform; }

@media (max-width: 1024px) {
  .benefits { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .stage { height: auto; }
  .stage-sticky { position: static; height: auto; padding-block: var(--section-y); }
  .stage-deck { height: auto; display: grid; gap: 1rem; perspective: none; }
  .stage-panel { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .stage-dots { display: none; }
  .cta-bar p { display: none; }
  .cta-bar { justify-content: center; }
  .cta-bar .btn { width: 100%; }
  .signal-legend { position: static; margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .split-word-in { transform: none !important; opacity: 1 !important; }
  .deck-3d, .rise-3d { transform: none !important; opacity: 1 !important; }
  .stage-panel { position: static; opacity: 1 !important; transform: none !important; }
  .stage, .stage-sticky { height: auto; position: static; }
  .tilt-glare { display: none; }
}

/* ============================================================================
   16. PHOTOGRAPHY
   Every photograph is mapped onto the locked palette with a duotone: the image
   is desaturated, its shadows multiplied toward a brand blue and its highlights
   screened toward cream. Nothing outside the five colours reaches the page.
   ========================================================================== */

.photo { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-sunken); }
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.06);
  will-change: transform;
}
.photo::before, .photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.photo::before { background: var(--rich-blue); mix-blend-mode: multiply; opacity: .58; }
.photo::after  { background: var(--cream);     mix-blend-mode: screen;   opacity: .30; }

:root[data-theme="dark"] .photo::before { background: var(--rich-blue); opacity: .70; }
:root[data-theme="dark"] .photo::after  { background: var(--ink);       mix-blend-mode: multiply; opacity: .34; }

/* A softer treatment for the sumi-e pieces, which already sit in the palette */
/* The sumi-e pieces are pale enough to vanish into a cream page, so the wash
   keeps a real blue cast and pushes the contrast up rather than flattening it. */
.photo--wash img { filter: grayscale(.6) contrast(1.3) brightness(.97); transform: scale(1.04); }
.photo--wash::before { opacity: .30; }
.photo--wash::after  { opacity: .10; }
:root[data-theme="dark"] .photo--wash img { filter: grayscale(.8) contrast(1.12) brightness(.78); }
:root[data-theme="dark"] .photo--wash::before { opacity: .34; }

/* Ken Burns: the frame drifts as the section crosses the viewport. Reads as
   depth rather than movement, which is the whole register of this brand. */
.photo--drift img {
  transform: scale(calc(1.14 - var(--p, 0) * 0.10)) translate3d(0, calc((0.5 - var(--p, 0)) * -3%), 0);
}

/* Reveal: the frame opens rather than fading, so the image arrives like a
   brushstroke landing. */
.photo--reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease); }
.photo--reveal.is-in { clip-path: inset(0 0 0 0); }
.no-js .photo--reveal { clip-path: none; }

.photo-frame { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg);
               border: 1px solid var(--hairline-2); }
.photo-frame--wide { aspect-ratio: 16 / 10; }
.photo-caption { margin-top: .9rem; font-size: var(--fs-fine); color: var(--text-mute); }

/* Full-bleed photographic band: the image sits behind, the copy sits on top. */
.photo-band { position: relative; isolation: isolate; overflow: hidden; }
.photo-band > .photo {
  position: absolute; inset: 0; z-index: -1; border-radius: 0;
}
.photo-band > .photo::before { opacity: .14; }
.photo-band > .photo::after { opacity: .55; }
:root[data-theme="dark"] .photo-band > .photo::after { opacity: .72; }
/* A pale sumi-e behind copy has to sit down into the page in dark mode, or the
   band reads as a grey slab cut out of an ink-coloured site. */
:root[data-theme="dark"] .photo-band .photo--wash img { filter: grayscale(.85) contrast(1.1) brightness(.30); }
:root[data-theme="dark"] .photo-band > .photo::before { opacity: .26; }
/* An ink band has to carry cream text over a photograph, so the image is
   pushed right down into the dark end before the palette wash goes on. */
.photo-band--ink { background: var(--ink); }
.photo-band--ink > .photo img     { filter: grayscale(1) contrast(1.06) brightness(.40); }
.photo-band--ink > .photo::before { background: var(--rich-blue); mix-blend-mode: multiply; opacity: .55; }
.photo-band--ink > .photo::after  { background: var(--ink); mix-blend-mode: multiply; opacity: .58; }
.photo-band--ink .display, .photo-band--ink h2, .photo-band--ink blockquote { color: var(--cream); }
.photo-band--ink p, .photo-band--ink .lead { color: var(--text-on-dark-mute); }
.photo-band--ink .eyebrow { color: var(--cream); }
.photo-band--ink .eyebrow::before, .photo-band--ink .eyebrow::after { background: var(--cream); opacity: .6; }
.photo-band--ink figcaption { color: var(--text-on-dark-mute); }
.photo-band--ink .enso { color: var(--cream); }

/* ============================================================================
   17. THE BRUSHSTROKE
   The ensō is drawn on rather than faded in — a conic sweep uncovers the mark
   the way a brush lays it down. The artwork itself is untouched: this composites
   a wipe over the existing mask, and where mask-composite is unsupported the
   mark simply appears as before.
   ========================================================================== */

@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .enso--draw {
    /* Declared at full sweep so the mark is visible even if the animation
       never runs; the keyframes take it from nothing up to this. */
    --draw: 1turn;
    -webkit-mask-image: url("../img/enso.svg"),
      conic-gradient(from -0.08turn, #000 var(--draw), transparent 0);
            mask-image: url("../img/enso.svg"),
      conic-gradient(from -0.08turn, #000 var(--draw), transparent 0);
    -webkit-mask-size: contain, 210% 210%;  mask-size: contain, 210% 210%;
    -webkit-mask-position: center, center;  mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: source-in;      mask-composite: intersect;
    animation: brushOn 1.9s var(--ease) .25s both, breathe 9s var(--ease-soft) 2.2s infinite;
  }
  @keyframes brushOn {
    from { --draw: 0turn; opacity: .2; }
    to   { --draw: 1turn; opacity: 1; }
  }
  @property --draw { syntax: '<angle>'; inherits: false; initial-value: 0turn; }
}

/* ============================================================================
   18. SPOTLIGHT
   Dark bands pick up a soft pool of light under the pointer. Palette only.
   ========================================================================== */

.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              rgba(246, 243, 236, .10), transparent 62%);
  opacity: 0; transition: opacity .6s var(--ease-soft);
}
.spotlight.is-lit::before { opacity: 1; }

/* ============================================================================
   19. PAGE TRANSITION
   An ensō-tinted wipe between pages. Purely cosmetic: if the script does not
   run, or the browser is restoring a page, links navigate exactly as normal.
   ========================================================================== */

.page-veil {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: var(--bg-anchor);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .55s var(--ease);
  display: grid; place-items: center;
}
.page-veil .enso { --enso-size: 92px; color: var(--cream); opacity: 0; transition: opacity .3s var(--ease-soft); }
.page-veil.is-out { transform: scaleY(1); }
.page-veil.is-out .enso { opacity: .9; }
/* Arrival lift. Written as an animation with forwards fill so it always
   finishes: the veil's resting state is already scaleY(0), so if the animation
   never runs there is simply nothing covering the page. */
/* There is no arrival animation. The veil rests at scaleY(0), so a page that
   loads normally is simply never covered. */

/* ============================================================================
   20. WATCH ENTRANCE
   ========================================================================== */

.watch-row .watch {
  opacity: 0; transform: translate3d(0, 34px, -80px) rotateX(16deg);
  transition: opacity .8s var(--ease-soft), transform 1s var(--ease);
}
.watch-row.is-in .watch { opacity: 1; transform: none; }
.watch-row.is-in .watch:nth-child(2) { transition-delay: .09s; }
.watch-row.is-in .watch:nth-child(3) { transition-delay: .18s; }
.watch-row.is-in .watch:nth-child(4) { transition-delay: .27s; }
.watch-row.is-in .watch:nth-child(5) { transition-delay: .36s; }
.no-js .watch-row .watch { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .photo-frame { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .photo--reveal { clip-path: none !important; }
  .photo--drift img { transform: scale(1.04) !important; }
  /* Drop the sweep layer entirely rather than compositing it */
  .enso--draw {
    animation: none !important;
    -webkit-mask-image: url("../img/enso.svg"); mask-image: url("../img/enso.svg");
    -webkit-mask-size: contain;                 mask-size: contain;
  }
  .watch-row .watch { opacity: 1 !important; transform: none !important; }
  .page-veil { display: none !important; }
  .spotlight::before { display: none; }
}