/* Rhema Print Studio: playful, vibrant palette taken from coloured print filament.
   Signature pattern: "strata", the stacked layer lines every 3D print carries. */

:root,
[data-theme="light"] {
  --paper: #FBF8FF;
  --paper-2: #F0E9FF;
  --ink: #1F1A3D;
  --ink-soft: #4E4770;
  --line: rgba(31, 26, 61, .16);
  --coral: #FF6A52;
  --coral-deep: #C23A24;
  --teal: #1FB5B0;
  --teal-ink: #0A6966;
  --lilac: #B8A4F2;
  --on-accent: #1F1A3D;
  --shadow: 0 18px 40px -24px rgba(31, 26, 61, .45);

  --chatbot-color: #FF6A52;
  --chatbot-on-color: #1F1A3D;
  --chatbot-background: #FBF8FF;
  --chatbot-surface: #F0E9FF;
  --chatbot-text: #1F1A3D;
  --chatbot-font: "Figtree", system-ui, sans-serif;
  --chatbot-radius: 18px;

  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #17142C;
  --paper-2: #231E42;
  --ink: #F4F0FF;
  --ink-soft: #C6BEE8;
  --line: rgba(244, 240, 255, .18);
  --coral: #FF7D68;
  --coral-deep: #FF9C8A;
  --teal: #3FD0CA;
  --teal-ink: #6FE3DD;
  --lilac: #9A84EA;
  --on-accent: #17142C;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);

  --chatbot-color: #FF7D68;
  --chatbot-on-color: #17142C;
  --chatbot-background: #17142C;
  --chatbot-surface: #231E42;
  --chatbot-text: #F4F0FF;

  color-scheme: dark;
}

:root {
  --f-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5.5vw, 96px);
  --maxw: 1200px;
  --hh-e: 84px;
  --hh-c: 60px;
  --r-lg: 34px;
  --r-md: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --space: clamp(72px, 10vw, 140px);
}

@media (max-width: 759px) {
  :root { --hh-e: 68px; --hh-c: 56px; --r-lg: 24px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--hh-e) + 16px);
  scrollbar-color: var(--coral) var(--paper-2);
  -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--paper-2); }
html::-webkit-scrollbar-thumb {
  background: var(--coral);
  border-radius: 12px;
  border: 3px solid var(--paper-2);
}
body {
  margin: 0;
  padding-top: var(--hh-e);
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-text);
  overflow-x: clip;
  transition: background-color .3s ease, color .3s ease;
}
html.nav-open body { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-ink); text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 750; }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
.lead { font-size: clamp(1.2rem, 1.7vw, 1.45rem); color: var(--ink-soft); line-height: 1.5; }
.small { font-size: .92rem; color: var(--ink-soft); }

.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px;
}
.skip:focus { top: 12px; }

/* ---------- strata pattern ---------- */
.strata {
  --sc: var(--teal);
  --gap: 9px;
  --w: 3px;
  background: repeating-linear-gradient(0deg, var(--sc) 0 var(--w), transparent var(--w) var(--gap));
  border-radius: 58% 42% 46% 54% / 52% 60% 40% 48%;
}
.strata--teal { --sc: var(--teal); }
.strata--coral { --sc: var(--coral); --gap: 12px; --w: 4px; }
.strata--lilac { --sc: var(--lilac); --gap: 7px; --w: 2px; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.35em;
  font: 650 1rem/1.1 var(--f-text);
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .2s, color .2s, box-shadow .2s;
}
.btn--primary { background: var(--coral); color: var(--on-accent); box-shadow: 0 4px 0 var(--ink); }
.btn--primary:hover { color: var(--on-accent); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--lg { min-height: 56px; padding: .85em 1.6em; font-size: 1.06rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 650; color: var(--ink);
  text-decoration: underline wavy var(--coral) 2px;
  text-underline-offset: .35em;
}
.text-link:hover { text-decoration-color: var(--teal); }

/* ---------- header ---------- */
.site-header {
  --hh: var(--hh-e);
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--hh);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  transition: height .28s var(--ease), background-color .28s ease, box-shadow .28s ease;
}
.site-header::after {
  /* the layer-line edge: three filament stripes */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background:
    linear-gradient(var(--coral) 0 2px, transparent 2px 4px, var(--teal) 4px 6px) left / 100% 100% no-repeat;
  opacity: .0;
  transform: scaleX(.35); transform-origin: left;
  transition: opacity .28s ease, transform .35s var(--ease);
}
.site-header.is-compact { --hh: var(--hh-c); background: var(--paper); box-shadow: var(--shadow); }
.site-header.is-compact::after { opacity: 1; transform: none; }
html.nav-open .site-header, html.nav-open .site-header::after { transition: none; }
/* backdrop-filter would trap the fixed menu inside the bar */
html.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }

.site-header__bar {
  height: 100%;
  width: min(1320px, 100% - 2 * clamp(16px, 3vw, 40px)); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-height: 44px; flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand__mark {
  display: grid; gap: 3px; width: 34px; flex-shrink: 0;
  transform-origin: left center; transition: transform .28s var(--ease);
}
.brand__mark i { display: block; height: 7px; border-radius: 4px; }
.brand__mark i:nth-child(1) { background: var(--coral); width: 62%; margin-inline: auto; }
.brand__mark i:nth-child(2) { background: var(--teal); width: 84%; margin-inline: auto; }
.brand__mark i:nth-child(3) { background: var(--lilac); width: 100%; }
.site-header.is-compact .brand__mark { transform: scale(.86); }
.brand__text { display: grid; line-height: 1.1; }
.brand__name { font: 800 1.2rem/1.1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.brand__tag { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; transition: opacity .2s; }
.site-header.is-compact .brand__tag { opacity: 0; height: 0; overflow: hidden; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(4px, 1vw, 14px); list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  text-decoration-line: underline; text-decoration-style: wavy; text-decoration-thickness: 2px;
  text-decoration-color: transparent; text-underline-offset: .45em;
  transition: text-decoration-color .2s;
}
.nav a:hover { text-decoration-color: var(--teal); }
.nav a[aria-current="page"] { text-decoration-color: var(--coral); }

.site-header__actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.icon-btn:hover { border-color: var(--ink); }
.theme-btn .i-sun { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: block; }
[data-theme="dark"] .theme-btn .i-moon { display: none; }
.header-cta { min-height: 46px; padding: .6em 1.2em; }
.site-header.is-compact .header-cta { min-height: 44px; }

.menu-btn { display: none; }
.menu-btn__bars { display: grid; gap: 4px; width: 20px; }
.menu-btn__bars i { height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; left: 0; right: 0; top: var(--hh); bottom: 0;
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px clamp(20px, 5vw, 40px) 40px;
  border-top: 2px solid var(--line);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0 0 24px; padding: 0; }
.mobile-menu li + li { border-top: 1px solid var(--line); }
.mobile-menu a[data-nav] {
  display: flex; align-items: center; min-height: 60px;
  font: 750 1.7rem/1 var(--f-display); color: var(--ink); text-decoration: none;
}
.mobile-menu a[aria-current="page"] { text-decoration: underline wavy var(--coral) 2px; text-underline-offset: .3em; }
.mobile-menu__cta { width: 100%; }

@media (max-width: 1180px) { .brand__tag { display: none; } }
@media (max-width: 959px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .site-header__actions { margin-left: auto; }
}
@media (max-width: 599px) {
  .header-cta { display: none; }
  .brand__name { font-size: 1.08rem; }
  .brand__mark { width: 28px; }
}
@media (max-width: 359px) {
  .brand { gap: 8px; }
  .brand__name { font-size: .98rem; }
  .site-header__actions { gap: 6px; }
}

/* ---------- reveal mechanics (only once motion is ready) ---------- */
html[data-motion="ready"] :is(.starts__grid, .token__copy, .steps, .about-why__copy) > * {
  transition: opacity .7s var(--ease), transform .75s var(--ease), clip-path .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
html[data-motion="ready"] .starts__grid:not(.is-visible) > * {
  opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0 round var(--r-md));
}
html[data-motion="ready"] .starts__grid > * { clip-path: inset(0 0 0 0 round var(--r-md)); }

html[data-motion="ready"] .depth__media[data-reveal] { transition: clip-path .9s var(--ease); }
html[data-motion="ready"] .depth__media[data-reveal]:not(.is-visible) { clip-path: inset(0 100% 0 0 round var(--r-lg)); }
html[data-motion="ready"] .depth__media[data-reveal] { clip-path: inset(0 0 0 0 round var(--r-lg)); }

html[data-motion="ready"] .token__copy:not(.is-visible) > * { opacity: 0; transform: translateX(-44px); }

html[data-motion="ready"] .cta__box[data-reveal] { transition: transform .8s var(--ease), opacity .6s ease; }
html[data-motion="ready"] .cta__box[data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(36px) scale(.96); }

html[data-motion="ready"] .steps:not(.is-visible) > * { opacity: 0; transform: translateX(-36px); }
html[data-motion="ready"] .item[data-reveal] { transition: opacity .7s ease, transform .8s var(--ease); }
html[data-motion="ready"] .item[data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(32px); }
html[data-motion="ready"] .about-split__media[data-reveal] { transition: clip-path .9s var(--ease); clip-path: inset(0 0 0 0 round var(--r-lg)); }
html[data-motion="ready"] .about-split__media[data-reveal]:not(.is-visible) { clip-path: inset(18% 0 18% 0 round var(--r-lg)); }
html[data-motion="ready"] .about-why__copy:not(.is-visible) > * { opacity: 0; transform: translateY(28px); }

@media (max-width: 759px) {
  /* phones: cards slide in from alternating sides instead of rising */
  html[data-motion="ready"] .starts__grid:not(.is-visible) > :nth-child(odd) { transform: translateX(-32px); }
  html[data-motion="ready"] .starts__grid:not(.is-visible) > :nth-child(even) { transform: translateX(32px); }
  html[data-motion="ready"] .depth__media[data-reveal]:not(.is-visible) { clip-path: inset(0 0 100% 0 round var(--r-lg)); }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(32px, 6vw, 88px) 0 var(--space); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__title { font-size: clamp(2.5rem, 5.4vw, 5rem); margin-bottom: .4em; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .ln > span { display: inline-block; }
.hero__lead { font-size: clamp(1.25rem, 1.9vw, 1.55rem); color: var(--ink-soft); max-width: 30ch; }

html[data-motion="ready"] .hero__title .ln > span { animation: line-up .95s var(--ease) both; animation-delay: calc(120ms + var(--i) * 120ms); }
@keyframes line-up { from { transform: translateY(108%); } to { transform: none; } }

.hero__media { position: relative; aspect-ratio: 5 / 4; }
.hero__plane { position: absolute; will-change: transform; }
.hero__plane--back {
  inset: -6% -10% 14% 18%;
  transform: translate3d(0, calc(var(--hero-p, 0) * 70px), 0);
}
.hero__photo {
  position: absolute; inset: 8% 4% 6% 0; margin: 0;
  border-radius: 46% 54% 40% 60% / 44% 38% 62% 56%;
  overflow: hidden; box-shadow: var(--shadow);
  transform: translate3d(0, calc(var(--hero-p, 0) * 20px), 0);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
html[data-motion="ready"] .hero__photo img { animation: push-in 1.6s var(--ease) both; }
@keyframes push-in { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero__plane--front {
  width: 34%; aspect-ratio: 1.6; left: -8%; bottom: -4%;
  border-radius: 999px;
  transform: translate3d(0, calc(var(--hero-p, 0) * -90px), 0);
}
.hero__ring {
  width: 18%; aspect-ratio: 1; right: -2%; top: 0;
  border-radius: 50%; border: 10px solid var(--lilac);
  transform: translate3d(0, calc(var(--hero-p, 0) * -140px), 0) rotate(calc(var(--hero-p, 0) * 40deg));
}
html[data-motion="ready"] .hero__plane--front { animation: plane-in .9s .3s var(--ease) both; }
html[data-motion="ready"] .hero__ring { animation: plane-in .9s .45s var(--ease) both; }
@keyframes plane-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 4 / 3; max-width: 640px; width: 100%; justify-self: center; }
}

/* ---------- section heads ---------- */
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--ink-soft); font-size: 1.12rem; }
@media (max-width: 759px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- starting points ---------- */
.starts { padding-bottom: var(--space); }
.starts__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
}
.start-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 2px solid var(--ink);
}
.start-card p { color: var(--ink-soft); flex: 1; }
.start-card--coral { grid-column: span 5; background: color-mix(in srgb, var(--coral) 22%, var(--paper)); }
.start-card--teal { grid-column: span 4; background: color-mix(in srgb, var(--teal) 20%, var(--paper)); margin-top: 48px; }
.start-card--lilac { grid-column: span 3; background: color-mix(in srgb, var(--lilac) 30%, var(--paper)); margin-top: 96px; }
.start-card--idea { grid-column: 3 / span 8; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 28px; border-style: dashed; background: transparent; }
.start-card--idea h3 { margin: 0; }
.start-card--idea p { margin: 0; flex: 1 1 260px; }
.start-card--idea .glyph { width: 64px; height: 64px; margin: 0; }
.glyph {
  width: 88px; height: 88px; margin-bottom: 18px;
  fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
}
.glyph .fill { fill: var(--ink); stroke: none; }
.glyph .thin { stroke-width: 2; stroke-dasharray: 3 5; }
.glyph--lg { width: 132px; height: 132px; margin: 0; }
@media (max-width: 959px) {
  .start-card--coral, .start-card--teal { grid-column: span 6; }
  .start-card--lilac { grid-column: span 6; margin-top: 0; }
  .start-card--teal { margin-top: 32px; }
  .start-card--idea { grid-column: span 6; }
}
@media (max-width: 599px) {
  .starts__grid > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

/* ---------- capture (focus zone) ---------- */
.capture { position: relative; padding-bottom: var(--space); }
.capture__stage { display: none; }
.capture__copy h2 { margin-bottom: 32px; }
.capture__panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.panel__fig { margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; }
.panel__fig img { width: 100%; height: 100%; object-fit: cover; }
.panel__step { font: 700 .95rem/1 var(--f-text); color: var(--teal-ink); margin-bottom: 10px; }
.panel h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.panel__text p:last-child { font-size: 1.15rem; color: var(--ink-soft); }
.capture__ticks { display: none; }
@media (max-width: 759px) { .panel { grid-template-columns: 1fr; } }

.capture[data-capture-active="true"] { height: 440vh; padding-bottom: 0; }
.capture[data-capture-active="true"] .capture__sticky {
  position: sticky; top: var(--hh-c);
  height: calc(100vh - var(--hh-c)); height: calc(100svh - var(--hh-c));
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.capture[data-capture-active="true"] .capture__stage {
  display: block; position: relative;
  height: min(76%, 600px); width: 100%;
}
.capture[data-capture-active="true"] .panel__fig { display: none; }
.capture[data-capture-active="true"] .capture__panels { display: grid; gap: 0; }
.capture[data-capture-active="true"] .panel {
  grid-area: 1 / 1; grid-template-columns: 1fr;
  opacity: 0; visibility: hidden; transform: translateY(28px);
  transition: opacity .45s ease, transform .6s var(--ease), visibility 0s .45s;
}
.capture[data-capture-active="true"] .panel[data-active="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s ease .12s, transform .7s var(--ease) .12s, visibility 0s;
}
.capture[data-capture-active="true"] .capture__ticks { display: flex; gap: 8px; margin-top: 32px; }
.capture__ticks i { height: 8px; width: 40px; border-radius: 4px; background: var(--line); transition: background-color .3s, width .4s var(--ease); }
.capture[data-state="0"] .capture__ticks i:nth-child(-n+1),
.capture[data-state="1"] .capture__ticks i:nth-child(-n+2),
.capture[data-state="2"] .capture__ticks i:nth-child(-n+3),
.capture[data-state="3"] .capture__ticks i:nth-child(-n+4) { background: var(--coral); width: 56px; }

.st { position: absolute; inset: 0; transition: transform .85s var(--ease), opacity .55s ease, clip-path .85s var(--ease); }
.st img { width: 100%; height: 100%; object-fit: cover; }
.st-a, .st-b, .st-c { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.st-strata { inset: 8% -6% -8% 40%; transition: transform 1s var(--ease); }
.st-dot { inset: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--coral); left: 4%; top: 6%; }

/* state 0: the idea, a full scene */
[data-capture-stage][data-state="0"] .st-a { transform: scale(1); }
[data-capture-stage][data-state="0"] .st-b { opacity: 0; transform: translate(40%, 30%) scale(.5); clip-path: inset(0 0 0 100% round var(--r-lg)); }
[data-capture-stage][data-state="0"] .st-c { opacity: 0; transform: scale(.6); }
[data-capture-stage][data-state="0"] .st-strata { transform: translate(0, 0) rotate(0); }
/* state 1: what it's for, a new scene wipes in, the first shrinks to a corner */
[data-capture-stage][data-state="1"] .st-a { transform: translate(-30%, -30%) scale(.36); z-index: 2; }
[data-capture-stage][data-state="1"] .st-b { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--r-lg)); }
[data-capture-stage][data-state="1"] .st-c { opacity: 0; transform: scale(.6); }
[data-capture-stage][data-state="1"] .st-strata { transform: translate(-40%, -20%) rotate(-12deg); }
[data-capture-stage][data-state="1"] .st-dot { transform: translate(560%, 620%) scale(.6); }
/* state 2: modelled, zoom into the layer lines */
[data-capture-stage][data-state="2"] .st-a { opacity: 0; transform: translate(-40%, -40%) scale(.2); }
[data-capture-stage][data-state="2"] .st-b { transform: translate(32%, 32%) scale(.36); z-index: 2; clip-path: inset(0 0 0 0 round var(--r-lg)); }
[data-capture-stage][data-state="2"] .st-c { opacity: 1; transform: scale(1); }
[data-capture-stage][data-state="2"] .st-c img { transform: scale(1.18); }
[data-capture-stage][data-state="2"] .st-strata { transform: translate(-60%, 10%) rotate(8deg) scale(1.2); }
[data-capture-stage][data-state="2"] .st-dot { transform: translate(40%, 700%) scale(1.3); background: var(--teal); }
/* state 3: pick it up, the pieces gather as a set */
[data-capture-stage][data-state="3"] .st-a { opacity: 1; transform: translate(-27%, -24%) scale(.44) rotate(-4deg); z-index: 2; }
[data-capture-stage][data-state="3"] .st-b { transform: translate(27%, -20%) scale(.44) rotate(3deg); z-index: 2; clip-path: inset(0 0 0 0 round var(--r-lg)); }
[data-capture-stage][data-state="3"] .st-c { opacity: 1; transform: translate(0, 26%) scale(.48); z-index: 3; }
[data-capture-stage][data-state="3"] .st-strata { transform: translate(-50%, -10%) scale(1.4); }
[data-capture-stage][data-state="3"] .st-dot { transform: translate(700%, 560%) scale(1.6); background: var(--lilac); }
.st-c img { transition: transform 1.1s var(--ease); }

@media (max-width: 759px) {
  .capture[data-capture-active="true"] { height: 400vh; }
  .capture[data-capture-active="true"] .capture__sticky {
    grid-template-columns: 1fr; grid-template-rows: 44% auto;
    align-content: center; gap: 20px; padding-block: 12px;
  }
  .capture[data-capture-active="true"] .capture__stage { height: 100%; }
  .capture[data-capture-active="true"] .capture__copy h2 { font-size: 1.6rem; margin-bottom: 12px; }
  .capture[data-capture-active="true"] .panel h3 { font-size: 1.5rem; }
  .capture[data-capture-active="true"] .panel__text p:last-child { font-size: 1.02rem; }
  .capture[data-capture-active="true"] .capture__ticks { margin-top: 16px; }
  .st-dot { width: 40px; height: 40px; }
}

/* ---------- depth band ---------- */
.depth { padding-bottom: var(--space); }
.depth__grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; }
.depth__media {
  grid-column: 1 / span 9; grid-row: 1;
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 16 / 10;
}
.depth__img {
  position: absolute; left: 0; right: 0; top: -12%; width: 100%; height: 124%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--depth, 0) * -9%), 0);
}
.depth__strata {
  position: absolute; width: 38%; aspect-ratio: 1; right: -8%; top: -10%;
  transform: translate3d(0, calc(var(--depth, 0) * 28%), 0) rotate(calc(var(--depth, 0) * 10deg));
}
.depth__copy {
  grid-column: 7 / -1; grid-row: 1; position: relative; z-index: 2;
  margin-bottom: -48px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 44px);
  box-shadow: 8px 8px 0 var(--teal);
}
.depth__copy p { color: var(--ink-soft); }
@media (max-width: 899px) {
  .depth__media { grid-column: 1 / -1; }
  .depth__copy { grid-column: 2 / -1; grid-row: 2; margin: -40px 0 0; }
}
@media (max-width: 599px) {
  .depth__copy { grid-column: 1 / -1; margin-top: -24px; box-shadow: 5px 5px 0 var(--teal); }
}

/* ---------- token ---------- */
.token { padding: calc(var(--space) + 32px) 0 var(--space); }
.token__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.token__art { position: relative; aspect-ratio: 1; max-width: 360px; width: 100%; }
.token__layer {
  position: absolute; left: 50%; width: 80%; height: 22%; border-radius: 50%;
  translate: -50% 0;
  border: 3px solid var(--ink);
}
.token__layer:nth-child(1) { bottom: 6%; background: var(--lilac); }
.token__layer:nth-child(2) { bottom: 22%; background: var(--teal); width: 72%; }
.token__layer:nth-child(3) { bottom: 38%; background: var(--coral); width: 64%; }
.token__layer:nth-child(4) { bottom: 54%; background: var(--paper-2); width: 56%; }
html[data-motion="ready"] .token__layer { transition: transform .7s var(--ease); }
html[data-motion="ready"] .token:not(:has(.is-visible)) .token__layer { transform: translateY(30px); }
html[data-motion="ready"] .token .token__layer:nth-child(2) { transition-delay: 90ms; }
html[data-motion="ready"] .token .token__layer:nth-child(3) { transition-delay: 180ms; }
html[data-motion="ready"] .token .token__layer:nth-child(4) { transition-delay: 270ms; }
.token__line { font-size: clamp(2.2rem, 4.8vw, 4.2rem); max-width: 16ch; }
@media (max-width: 759px) {
  .token__grid { grid-template-columns: 1fr; }
  .token__art { max-width: 200px; }
}

/* ---------- cta ---------- */
.cta { padding-bottom: var(--space); }
.cta__box {
  position: relative;
  background: var(--coral); color: var(--on-accent);
  border-radius: var(--r-lg);
  padding: clamp(36px, 6vw, 88px);
  overflow: hidden;
}
.cta__box::before {
  content: ""; position: absolute; width: 46%; aspect-ratio: 1; right: -12%; bottom: -30%;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--on-accent) 22%, transparent) 0 3px, transparent 3px 10px);
  border-radius: 50%; pointer-events: none;
}
.cta__box::after {
  /* frame drawn when the follow route arrives */
  content: ""; position: absolute; inset: 10px; border: 3px solid var(--on-accent); border-radius: calc(var(--r-lg) - 8px);
  clip-path: inset(0 100% 100% 0); transition: clip-path 1s var(--ease); pointer-events: none;
}
.cta.is-joined .cta__box::after, html[data-motion="off"] .cta__box::after { clip-path: inset(0 0 0 0); }
.cta__box h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); position: relative; }
.cta__box p { font-size: 1.2rem; position: relative; max-width: 46ch; }
.cta__box .btn-row { position: relative; }
.cta__box .btn--primary { background: var(--ink); color: var(--paper); box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 50%, var(--coral)); }
.cta__box .btn--primary:hover { color: var(--paper); }
.cta__box .btn--ghost { border-color: var(--on-accent); color: var(--on-accent); }
.cta__box .btn--ghost:hover { background: var(--on-accent); color: var(--coral); }

/* ---------- follow-me route ---------- */
.page--home { position: relative; }
.follow { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 3; }
.follow__track { stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; fill: none; }
.follow__filament { stroke: var(--coral); stroke-width: 4; stroke-linecap: round; fill: none; }
.follow__branch { stroke: var(--teal); stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .5s var(--ease); }
.follow__branch.is-on { stroke-dashoffset: 0; }
.follow__node { fill: var(--paper); stroke: var(--line); stroke-width: 3; transition: fill .3s, stroke .3s; }
.follow__node.is-on { fill: var(--teal); stroke: var(--ink); }
.follow__nozzle path { fill: var(--ink); }
.follow__nozzle circle { fill: var(--coral); }
[data-follow-anchor].is-reached h2 { text-decoration: underline wavy var(--teal) 3px; text-underline-offset: .22em; text-decoration-skip-ink: auto; }
.cta[data-follow-anchor].is-reached h2 { text-decoration: none; }

/* ---------- inner page hero ---------- */
.page-hero { position: relative; padding: clamp(40px, 7vw, 104px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.page-hero--tight { padding-bottom: 40px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; position: relative; z-index: 1; }
.page-hero h1 { max-width: 14ch; }
.page-hero .lead { max-width: 44ch; margin: 0; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero__strata { position: absolute; width: clamp(180px, 26vw, 380px); aspect-ratio: 1.3; right: -4%; top: -14%; opacity: .7; }
@media (max-width: 759px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__strata { width: 160px; right: -60px; top: -30px; }
}

.note-card {
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 32px);
}
.note-card h2 { font-size: 1.5rem; }
.note-card p:last-child { margin-bottom: 0; }
.note-card--teal { background: color-mix(in srgb, var(--teal) 18%, var(--paper)); }
.note-card--lilac { background: color-mix(in srgb, var(--lilac) 26%, var(--paper)); }
.note-card--alt { border-left: 8px solid var(--teal); }
.note-card--alt h2 { font-size: 1.25rem; }
.form.is-unavailable .note-card--alt { border-left-color: var(--coral); }
.note-card__big { font: 750 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--f-display); letter-spacing: -.01em; margin: 0; }
.page--shop .note-card { background: var(--coral); color: var(--on-accent); box-shadow: 8px 8px 0 var(--ink); }

/* ---------- shop ---------- */
.jump ul { list-style: none; margin: 0 0 clamp(32px, 5vw, 56px); padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600;
}
.jump a:hover { background: var(--ink); color: var(--paper); }
.catalog { display: grid; gap: clamp(24px, 3vw, 40px); }
.item {
  display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 48px);
  border: 2px solid var(--ink); border-radius: var(--r-lg);
  scroll-margin-top: calc(var(--hh-c) + 24px);
}
.item__art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; }
.item--coral .item__art { background: color-mix(in srgb, var(--coral) 28%, var(--paper)); }
.item--teal .item__art { background: color-mix(in srgb, var(--teal) 26%, var(--paper)); }
.item--lilac .item__art { background: color-mix(in srgb, var(--lilac) 36%, var(--paper)); }
.item--idea { border-style: dashed; }
.item--idea .item__art { background: var(--paper-2); }
.item:nth-child(even) { grid-template-columns: 1fr minmax(160px, 260px); }
.item:nth-child(even) .item__art { order: 2; }
.item h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: .3em; }
.item__desc { font-size: 1.25rem; }
.item__body > p:not(.item__desc) { color: var(--ink-soft); }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 20px 0 24px; border-top: 2px solid var(--line); }
.specs div { padding: 12px 16px 12px 0; border-bottom: 2px solid var(--line); }
.specs dt { font-size: .88rem; color: var(--ink-soft); }
.specs dd { margin: 2px 0 0; font-weight: 650; }
.item__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 699px) {
  .item, .item:nth-child(even) { grid-template-columns: 1fr; }
  .item:nth-child(even) .item__art { order: 0; }
  .item__art { width: 140px; }
  .glyph--lg { width: 96px; height: 96px; }
}

.aside-band {
  margin: var(--space) 0; padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-lg); background: var(--paper-2);
  border-left: 10px solid var(--teal);
}
.aside-band h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* ---------- about ---------- */
.about-split, .about-why { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; margin-bottom: var(--space); }
.about-split__media { grid-column: 1 / span 7; margin: 0; }
.about-split__copy { grid-column: 9 / -1; }
.about-why__copy { grid-column: 1 / span 5; }
.about-why__media { grid-column: 7 / -1; margin: 0; position: relative; }
.about-split__media img, .about-why__media img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-why__media img { transform: translate3d(0, calc(var(--depth, 0) * -24px), 0); }
figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 10px; }
.prose p { color: var(--ink-soft); }
@media (max-width: 899px) {
  .about-split__media, .about-split__copy, .about-why__copy, .about-why__media { grid-column: 1 / -1; }
  .about-why__media { order: -1; }
}

/* ---------- help ---------- */
.help { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-bottom: var(--space); align-items: start; }
.help__index { position: sticky; top: calc(var(--hh-c) + 24px); }
.help__index ul { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--line); }
.help__index a { display: flex; align-items: center; min-height: 44px; padding-left: 16px; color: var(--ink); text-decoration: none; font-weight: 600; margin-left: -3px; border-left: 3px solid transparent; }
.help__index a:hover { border-left-color: var(--coral); }
.help__section { padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 2px solid var(--line); }
.help__section:last-child { border-bottom: 0; }
.help__section h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.pull { font: 750 clamp(1.5rem, 2.6vw, 2.1rem)/1.2 var(--f-display); letter-spacing: -.01em; padding-left: 20px; border-left: 8px solid var(--coral); }
.steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding: 24px 24px 20px 76px; border-radius: var(--r-md); background: var(--paper-2);
}
.steps li::before {
  content: counter(s); position: absolute; left: 20px; top: 20px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--coral); color: var(--on-accent); font: 800 1.1rem/1 var(--f-display);
}
.steps h3 { font-size: 1.2rem; margin-bottom: .3em; }
.steps p { margin: 0; color: var(--ink-soft); }
@media (max-width: 899px) {
  .help { grid-template-columns: 1fr; }
  .help__index { position: static; }
  .help__index ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .help__index a { border: 2px solid var(--ink); border-radius: 999px; padding: 0 16px; margin: 0; }
}
@media (max-width: 599px) { .steps { grid-template-columns: 1fr; } }

/* ---------- contact & form ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); padding-bottom: var(--space); align-items: start; }
.contact__aside { display: grid; gap: 20px; }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 6px; }
.field label, .field-pair legend { font-weight: 700; }
.field-pair { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field-pair legend { padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.field-pair .hint { grid-column: 1 / -1; margin: 0; }
.hint { font-size: .92rem; color: var(--ink-soft); margin: 0; }
input, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 14px;
  padding: 12px 14px; min-height: 50px; width: 100%;
  transition: box-shadow .2s;
}
textarea { resize: vertical; min-height: 160px; }
input:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 60%, transparent); }
input:user-invalid, textarea:user-invalid { border-color: var(--coral-deep); }
.form .btn { justify-self: start; }
.form__status { min-height: 1.6em; font-weight: 650; margin: 0; }
.form__status:empty { display: none; }
.form__status:not(:empty) { padding: 14px 18px; border-radius: 14px; background: var(--paper-2); border-left: 6px solid var(--teal); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 10px; border-left: 3px solid var(--teal-ink); border-bottom: 3px solid var(--teal-ink); transform: rotate(-45deg); }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 499px) { .field-pair { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--ink); color: var(--paper); padding: clamp(56px, 7vw, 96px) 0 48px; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: linear-gradient(var(--coral) 0 4px, var(--teal) 4px 8px, var(--lilac) 8px 12px);
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px 64px; }
.site-footer__name { font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-display); letter-spacing: -.02em; }
.site-footer p { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); }
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-weight: 600; }
.site-footer__note { grid-column: 1 / -1; font-size: .9rem; border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); padding-top: 24px; margin: 0; max-width: none; }
.site-footer :focus-visible { outline-color: var(--coral); }
@media (max-width: 699px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero__plane, .hero__photo, .depth__img, .depth__strata, .about-why__media img { transform: none !important; }
}