/* ─────────────────────────────────────────────────────────
   iThrive — "One Root, Three Branches"
   Light · editorial · botanical
   ───────────────────────────────────────────────────────── */

:root {
  --ivory:      #FAF7F1;
  --ivory-deep: #F4F0E6;
  --ink:        #1E3A2F;
  --ink-soft:   #43604F;
  --ink-faint:  #7C9184;
  --brand:      #F7B518;   /* iThrive yellow — logo graphics only */
  --clay:       #C06B3E;   /* terracotta — text accents */
  --clay-soft:  #E9CDB8;
  --sage:       #DCE5DA;
  --line:       #E7E0D1;
  --nav-h:      30px;
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* The hero bloom deliberately bleeds past the right edge. `hidden` only
     contains that bleed when it propagates from body to the viewport, which
     is unreliable on mobile and let the page pan sideways. `clip` cannot be
     escaped and creates no scroll container; `hidden` stays as the fallback
     for browsers without `clip` support (Safari < 16). */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection { background: var(--clay-soft); color: var(--ink); }

/* subtle paper warmth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 85% -5%, rgba(220, 229, 218, 0.5), transparent 60%),
    radial-gradient(1000px 700px at 8% 28%, rgba(233, 205, 184, 0.28), transparent 60%);
}

main, .nav, .footer { position: relative; z-index: 1; }

/* ── The vine — a marginal illustration, wide screens only ── */
#vine { display: none; }

@media (min-width: 1280px) {
  #vine {
    display: block;
    position: fixed;
    top: 0;
    left: clamp(10px, 2.6vw, 44px);
    height: 100vh;
    width: 64px;
    z-index: 3;               /* above section backgrounds, below the nav */
    opacity: 0.55;
    pointer-events: none;
  }
}

.vine-path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.vine-branch { stroke: var(--clay); stroke-width: 1.4; }

.vine-leaf path {
  fill: var(--sage);
  stroke: var(--ink-soft);
  stroke-width: 1;
}

/* ── The bloom (logo circle mark) ─────────────────────── */
.bloom { display: block; overflow: visible; }

.bloom use { fill: var(--brand); }

.bloom-petals { transform-origin: 18.43px 18.43px; }

/* the perpetual turn belongs only to the orbit diagram, where motion is the subject */
.orbit-mark .bloom-petals { animation: bloom-spin 120s linear infinite; }

@keyframes bloom-spin { to { transform: rotate(360deg); } }

/* hero bloom — a watermark centred on the hero's bottom-right corner.
   Half of it hangs off the right edge; the fold hides the lower quadrant
   until you scroll. Sits behind the type, drifts slower than the page. */
.hero-bloom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(280px, 38vw, 600px);
  z-index: 0;
  pointer-events: none;
  transform: translate(50%, 50%);
  will-change: transform;
}

.hero-bloom .bloom { width: 100%; height: auto; }

/* plain alpha rather than a blend mode — `main` creates a stacking context,
   which isolates mix-blend-mode and would make multiply a no-op here */
.hero-bloom use { fill-opacity: 0.28; }

/* ── Nav ──────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem clamp(1.5rem, 5vw, 4rem);
  z-index: 10;
  background: linear-gradient(to bottom, rgba(250, 247, 241, 0.94), rgba(250, 247, 241, 0));
}

.wordmark { display: flex; align-items: center; text-decoration: none; }

.nav-mark { height: var(--nav-h); width: auto; }

/* the wordmark text — cropped out of the full logo, collapses on scroll */
.nav-text {
  display: block;
  height: var(--nav-h);
  width: calc(var(--nav-h) * 2.487);
  margin-left: calc(var(--nav-h) * 0.163);
  overflow: hidden;
  transition:
    width 0.65s var(--ease-out),
    margin-left 0.65s var(--ease-out),
    opacity 0.45s ease;
}

.nav-text img {
  display: block;
  height: var(--nav-h);
  width: auto;
  margin-left: calc(var(--nav-h) * -1.127); /* hide the mark inside the full logo */
}

.nav.collapsed .nav-text {
  width: 0;
  margin-left: 0;
  opacity: 0;
}

.nav-links {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.3s var(--ease-out);
}

.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }

.nav-links a:hover { color: var(--ink); }

.nav-cta {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  color: var(--ink) !important;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out) !important;
}

.nav-cta:hover { background: var(--ink); color: var(--ivory) !important; }

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
}

/* keep the type above the bloom watermark */
.hero > *:not(.hero-bloom) { position: relative; z-index: 1; }

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 8.5vw, 6.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero-title .line { display: block; }

.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--clay);
}

.hero-sub {
  max-width: 34rem;
  margin-top: 2.4rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ink-soft);
}

.hero-scrollcue {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.scrollcue-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--ink-faint), transparent);
  animation: cue 2.6s var(--ease-out) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(12px); opacity: 0; }
}

.scrollcue-text {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Shared section bits ──────────────────────────────── */
section { padding: clamp(5rem, 12vw, 9rem) clamp(1.5rem, 6vw, 5rem); }

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: center;
}

.section-title em { font-style: italic; font-weight: 300; color: var(--clay); }

.section-sub {
  text-align: center;
  color: var(--ink-soft);
  margin-top: 1.4rem;
  font-size: 1.1rem;
}

/* ── Manifesto ────────────────────────────────────────── */
.manifesto { max-width: 62rem; margin: 0 auto; text-align: center; }

.manifesto-lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.3;
}

.manifesto-lead em { font-style: italic; color: var(--clay); }

.manifesto-body {
  max-width: 44rem;
  margin: 2.4rem auto 0;
  color: var(--ink-soft);
  font-size: 1.12rem;
}

.principles {
  margin-top: 5.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  text-align: left;
}

.principle {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  transition: border-color 0.6s var(--ease-out);
}

.principle:hover { border-color: var(--clay); }

.principle-icon {
  display: block;
  width: 34px;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.principle-icon svg { display: block; width: 100%; height: auto; }

.principle-icon .i-accent { stroke: var(--clay); }

.principle-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--clay);
  font-size: 0.95rem;
}

.principle h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0.6rem 0 0.7rem;
}

.principle p { color: var(--ink-soft); font-size: 0.98rem; }

/* ── Branches — the triptych ──────────────────────────── */
.branches { text-align: center; }

.triptych {
  margin: 4.5rem auto 0;
  max-width: 74rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  text-align: left;
}

.tcard {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 4px 26px 4px 26px;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  box-shadow: 0 24px 60px -44px rgba(30, 58, 47, 0.3);
  transition:
    transform 0.6s var(--ease-out),
    box-shadow 0.6s var(--ease-out),
    border-color 0.6s var(--ease-out),
    opacity 1s var(--ease-out),
    filter 1s var(--ease-out);
  transition-delay: 0s, 0s, 0s, var(--d, 0s), var(--d, 0s);
}

.tcard:nth-child(2) { border-radius: 26px 4px 26px 4px; }

.tcard:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--v) 55%, var(--line));
  box-shadow: 0 34px 70px -44px rgba(30, 58, 47, 0.4);
}

.tcard-logo {
  height: 42px;
  width: 42px;
  margin-bottom: 1.5rem;
  transition: transform 0.7s var(--ease-out);
}

.tcard:hover .tcard-logo { transform: rotate(24deg); }

.branch-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay);
  border: 1px solid var(--clay-soft);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  margin-bottom: 1.2rem;
}

.branch-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.branch-name em { font-style: italic; color: var(--clay); font-weight: 300; }

.branch-desc { color: var(--ink-soft); font-size: 0.99rem; }

.branch-proof {
  margin-top: 1.3rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink);
}

.branch-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.6rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--clay);
  transition: gap 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.branch-link:hover { gap: 0.9rem; color: var(--clay); }

/* ── One living system (orbit) ────────────────────────── */
.ecosystem {
  background: var(--ivory-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.orbit {
  max-width: 26rem;
  margin: 3.5rem auto 0;
}

.orbit svg { width: 100%; height: auto; overflow: visible; }

.orbit-ring {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.1;
  opacity: 0.55;
  stroke-dasharray: 1005.3;
  stroke-dashoffset: 1005.3;
  transition: stroke-dashoffset 2.4s var(--ease-out) 0.2s;
}

.reveal.in .orbit-ring { stroke-dashoffset: 0; }

.orbit-pulse {
  transform-origin: 240px 240px;
  animation: bloom-spin 16s linear infinite;
}

.orbit-pulse circle { fill: var(--brand); }

.orbit-pulse-halo { opacity: 0.25; }

.orbit-mark { overflow: visible; }

.orbit-node circle {
  opacity: 0;
  transition: opacity 0.8s ease 1.6s;
}

.reveal.in .orbit-node circle { opacity: 1; }

.orbit-label {
  font-family: var(--serif);
  font-size: 19px;
  fill: var(--ink);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.9s ease 1.4s;
}

.orbit-verb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  fill: var(--clay);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.9s ease 2s;
}

.reveal.in .orbit-label,
.reveal.in .orbit-verb { opacity: 1; }

.eco-note {
  max-width: 40rem;
  margin: 3.5rem auto 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

/* ── Numbers ──────────────────────────────────────────── */
.numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 66rem;
  margin: 0 auto;
  text-align: center;
}

.number-value {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.number-label {
  display: block;
  margin-top: 0.6rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Begin / doors ────────────────────────────────────── */
/* ── Founder ──────────────────────────────────────────── */
.founder { border-top: 1px solid var(--line); }

.founder-grid {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.founder-portrait {
  margin: 0;
  /* echoes the asymmetric radius used on the branch cards and doors */
  border-radius: 4px 40px 4px 40px;
  overflow: hidden;
  box-shadow: 0 30px 70px -50px rgba(30, 58, 47, 0.55);
}

.founder-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* the shoot leaves a lot of empty backdrop above her, so bias the crop up */
  object-position: center 22%;
}

.founder-copy { text-align: left; }

.founder-copy .branch-tag { align-self: auto; margin-bottom: 1.4rem; }

.founder-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.founder-name em { font-style: italic; font-weight: 300; color: var(--clay); }

.founder-lead {
  margin-top: 1.6rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.founder-quote {
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--clay-soft);
}

.founder-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.founder-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--clay);
  transition: gap 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.founder-link:hover { gap: 0.9rem; color: var(--clay); }

.begin { text-align: center; }

.begin-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.begin-title em { font-style: italic; color: var(--clay); }

.begin-doors {
  margin-top: 4.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 17rem));
  justify-content: center;
  gap: 1.4rem;
}

.door {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 2.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 4px 22px 4px 22px;
  background: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.door:nth-child(2) { border-radius: 22px 4px 22px 4px; }

.door:hover {
  transform: translateY(-6px);
  border-color: var(--clay);
  background: #fff;
  box-shadow: 0 28px 55px -42px rgba(30, 58, 47, 0.4);
}

.door-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.4s var(--ease-out);
}

.door:hover .door-kicker { color: var(--clay); }

.door-name {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--ink);
}

/* ── Footer ───────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem clamp(1.5rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-logo { height: 34px; width: auto; }

.footer-line { color: var(--ink-faint); font-size: 0.95rem; }

.footer-links { display: flex; gap: 1.8rem; flex-wrap: wrap; justify-content: center; }

.footer-links a {
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.footer-links a:hover { color: var(--clay); border-color: var(--clay); }

/* ── Reveal animations ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(5px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}

.reveal.in { opacity: 1; transform: none; filter: blur(0); }

.hero-title .line.reveal:nth-child(2) { transition-delay: 0.15s; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .triptych { grid-template-columns: 1fr; max-width: 30rem; }
}

@media (max-width: 820px) {
  .principles, .numbers { grid-template-columns: 1fr; }
  .numbers { gap: 3rem; }
  .begin-doors { grid-template-columns: 1fr; max-width: 22rem; margin-left: auto; margin-right: auto; }
  .nav-links a:not(.nav-cta) { display: none; }
  .orbit { max-width: 21rem; }
  /* the hero type is centred here, so the watermark steps further back,
     and the mark scales with the screen instead of sitting at its 280px
     floor, which was over half the width of a phone */
  .hero-bloom { width: clamp(190px, 52vw, 320px); }
  .hero-bloom use { fill-opacity: 0.16; }

  .founder-grid { grid-template-columns: 1fr; }
  .founder-portrait { max-width: 22rem; margin: 0 auto; }
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .scrollcue-line, .bloom-petals, .orbit-pulse { animation: none; }
  .orbit-ring { stroke-dashoffset: 0; transition: none; }
  .orbit-node circle, .orbit-label, .orbit-verb { opacity: 1; transition: none; }
  .nav-text { transition: none; }
  #vine { opacity: 0.3; }
  * { transition-duration: 0.01ms !important; }
}