/* Kristin Kurtz — Longevity & Wellness
   Direction: a high-end spa. Calm, airy, lots of breathing room, slow soft motion.
   Every teal below was sampled from her own mandala logo (2026-09-24), never guessed:
   #3CAFA8 · #45B6B0 · #6BCBC7 · #A5E0DC · #DCF2F0. --teal-ink is the same hue taken
   darker so text and buttons stay readable (WCAG AA on the ivory ground). */

:root {
  --ivory: #FBFAF7;
  --pearl: #F4F7F5;
  --mist: #DCF2F0;
  --foam: #E8F6F6;
  --teal-soft: #A5E0DC;
  --teal-mid: #6BCBC7;
  --teal: #45B6B0;
  --teal-deep: #3CAFA8;
  --teal-ink: #1F6F6A;
  --ink: #1E2A29;
  --ink-soft: #4A5856;
  --muted: #7C8A88;
  --line: rgba(31, 111, 106, 0.14);

  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Lato', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 1.4s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-ink); text-decoration: none; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.08; letter-spacing: -.005em; }
h1 { font-size: clamp(46px, 6vw, 86px); font-weight: 300; }
h2 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 300; }
h1, h2, h3, blockquote { text-wrap: balance; }
p { text-wrap: pretty; }
h3 { font-size: 27px; font-weight: 500; }
h1 em, h2 em { font-style: italic; color: var(--teal-ink); }
p { margin: 0 0 1.1em; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 18px 34px; border-radius: 999px;
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.btn-solid { background: var(--teal-ink); color: #fff; box-shadow: 0 10px 30px -12px rgba(31, 111, 106, .55); }
.btn-solid:hover { background: #185C58; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(31, 111, 106, .6); }
.btn-ghost { color: var(--teal-ink); border: 1px solid rgba(31, 111, 106, .35); }
.btn-ghost:hover { background: rgba(165, 224, 220, .25); color: var(--teal-ink); }
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .6s var(--ease), box-shadow .6s var(--ease), padding .6s var(--ease);
  padding: 26px 0;
}
.nav.scrolled {
  background: rgba(251, 250, 247, .82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 14px 0;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand .name { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .01em; line-height: 1; }
.brand .tag { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; position: relative; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
.nav-links .btn { padding: 12px 24px; font-size: 12.5px; color: #fff; }
.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.menu-btn span { display: block; width: 24px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .5s var(--ease), opacity .4s; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: 140px 0 90px;
  overflow: hidden;
  /* The last layer ends in the exact ivory the next section starts with, so there is no seam. */
  background:
    linear-gradient(to bottom, rgba(251, 250, 247, 0) 70%, var(--ivory) 100%),
    radial-gradient(1100px 700px at 88% 18%, rgba(165, 224, 220, .38), transparent 62%),
    radial-gradient(900px 600px at 6% 70%, rgba(220, 242, 240, .8), transparent 60%),
    var(--ivory);
}
/* ⭐ NO HARD EDGES (Adam, 2026-09-24: "the bottom of the rotating mandala is getting clipped…
   blend that into the next card"). Each turning mandala sits in a still layer the size of its
   section whose edges fade to nothing, so the flower dissolves before any section boundary.
   The fade is on the layer, not the image, so it stays put while the flower turns. */
.glow-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 72%, transparent 100%);
}
.hero .glow-layer {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 97%);
}
/* ⭐ NO PHOTO ON THE OPENING SCREEN (Adam, 2026-09-24: "remove the big picture of Kristin
   that's in the doorway shape") — and NOTHING ELSE MOVES (Adam, same day: "I liked it more in
   the other positioning"). The words stay on the left exactly as before; the mandala keeps
   glowing on the right where the photo sat. Her photo first appears in "Hi, I'm Kristin".
   ⛔ STRUCK 2026-09-24: ".hero .wrap { display: block; text-align: center; max-width: 980px; }" */
.hero .wrap { display: block; }
.hero-copy { max-width: 700px; }
.hero-copy .eyebrow { margin-bottom: 30px; display: block; }
.hero-copy h1 { margin-bottom: 30px; }
.hero-copy .lede {
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.1vw, 28px);
  color: var(--ink-soft); margin-bottom: 46px; line-height: 1.5;
}
.hero-copy .lede span { white-space: nowrap; }
.hero-copy .lede .dot { color: var(--teal); padding: 0 .1em; font-style: normal; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* On the right, where the photo sat: the same spot and size as before the photo was removed. */
.hero-mandala {
  position: absolute; z-index: 0; pointer-events: none;
  width: 900px; right: -110px; top: 50%; margin-top: -430px; opacity: .2;
  animation: drift 140s linear infinite;
}
.hero .wrap { position: relative; z-index: 1; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-cue i { width: 1px; height: 44px; background: linear-gradient(var(--teal), transparent); animation: cue 2.8s var(--ease) infinite; transform-origin: top; }

/* ---------- the bloom ---------- */
.bloom { position: relative; padding: clamp(110px, 14vw, 180px) 0; text-align: center; overflow: hidden; background: linear-gradient(var(--ivory), var(--pearl) 50%, var(--ivory)); }
.bloom-flower {
  width: clamp(192px, 24vw, 304px); aspect-ratio: 1; margin: 0 auto 56px;   /* 20% smaller (Adam, 2026-09-24) */
  position: relative;
}
.bloom-flower img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(.35) rotate(-40deg);
  clip-path: circle(0% at 50% 50%);
  transition: opacity 2.2s var(--ease), transform 3.2s var(--ease), clip-path 3.2s var(--ease);
}
.bloom-flower .halo {
  position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 224, 220, .45), transparent 65%);
  opacity: 0; transform: scale(.6); transition: opacity 3s var(--ease), transform 3.4s var(--ease);
}
.bloom.in .bloom-flower img { opacity: 1; transform: scale(1) rotate(0); clip-path: circle(72% at 50% 50%); }
.bloom.in .bloom-flower .halo { opacity: 1; transform: scale(1); }
.bloom.in .bloom-flower { animation: breathe 9s ease-in-out 3.4s infinite; }
.bloom blockquote {
  margin: 0 auto; max-width: 860px;
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.3; color: var(--ink);
}
.bloom cite { display: block; margin-top: 30px; font-style: normal; }

/* ---------- about ---------- */
.about { padding: clamp(90px, 11vw, 150px) 0; }
.about .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 7vw, 110px); align-items: center; }
.portrait { position: relative; }
.portrait .frame {
  border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px -40px rgba(30, 60, 58, .4);
}
.portrait .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portrait .badge {
  position: absolute; right: -26px; bottom: 44px;
  background: rgba(251, 250, 247, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 26px; box-shadow: 0 24px 50px -30px rgba(30, 60, 58, .45);
}
.portrait .badge b { display: block; font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1; color: var(--teal-ink); }
.portrait .badge span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.about h2 { margin: 18px 0 34px; }
.about .signoff { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--teal-ink); margin-top: 12px; }

/* ---------- what I help with ---------- */
.help { padding: clamp(90px, 11vw, 150px) 0; background: var(--pearl); position: relative; overflow: hidden; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(56px, 7vw, 84px); }
.section-head h2 { margin: 18px 0 22px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px; padding: 40px 36px 36px;
  box-shadow: 0 20px 50px -38px rgba(30, 60, 58, .35);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease), background .8s var(--ease);
}
.tile:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 34px 60px -40px rgba(30, 60, 58, .45); }
.tile svg { width: 42px; height: 42px; color: var(--teal-deep); margin-bottom: 26px; }
.tile h3 { margin-bottom: 10px; }
.tile p { font-size: 16.5px; margin: 0; }

/* ---------- approach ---------- */
.approach { padding: clamp(90px, 11vw, 150px) 0; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 60px); counter-reset: pillar; }
.pillar { position: relative; padding-top: 34px; border-top: 1px solid var(--line); }
.pillar::before {
  counter-increment: pillar; content: '0' counter(pillar);
  position: absolute; top: -13px; left: 0; background: var(--ivory); padding-right: 14px;
  font-family: var(--serif); font-size: 22px; color: var(--teal); font-style: italic;
}
.pillar h3 { margin-bottom: 16px; }

/* ---------- experience strip ---------- */
.experience {
  padding: clamp(70px, 8vw, 110px) 0;
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(165, 224, 220, .35), transparent 70%),
    linear-gradient(135deg, #1D5F5B, #1F6F6A 55%, #2A837D);
  color: #fff; position: relative; overflow: hidden;
}
.experience .ghost { position: absolute; width: 760px; left: -300px; top: 50%; margin-top: -380px; opacity: .1; animation: drift 160s linear infinite reverse; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; }
.stat { text-align: center; padding: 0 10px; }
.stat b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 5vw, 66px); line-height: 1; margin-bottom: 14px; }
.stat span { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.creds { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16); position: relative; }
.creds span { font-family: var(--serif); font-size: 22px; font-style: italic; color: rgba(255, 255, 255, .92); }

/* ---------- book ---------- */
/* Ends in the footer's own colour, so the two read as one soft surface — no line between them. */
.book { padding: clamp(110px, 13vw, 170px) 0; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(to bottom, var(--ivory) 0%, var(--ivory) 55%, #F1F4F2 100%); }
/* Centred with margins, not a transform: the turning animation owns `transform`, and it was
   silently throwing the centring away. */
.book .ring { position: absolute; left: 50%; top: 50%; width: 900px; margin-left: -450px; margin-top: -450px; opacity: .13; animation: drift 200s linear infinite; pointer-events: none; }
.book .wrap { position: relative; max-width: 780px; }
.book h2 { margin: 18px 0 26px; }
.book p { font-size: 20px; }
.book .hero-actions { justify-content: center; margin-top: 44px; }
.book .contact-line { margin-top: 38px; font-size: 16px; color: var(--muted); }
.book .contact-line a { color: var(--teal-ink); border-bottom: 1px solid rgba(31, 111, 106, .3); }

/* ---------- footer ---------- */
.footer { background: #F1F4F2; padding: 40px 0 44px; }
.footer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer .brand .name { font-size: 28px; }
.footer .where { margin-top: 18px; font-size: 15px; color: var(--muted); }
.social { display: flex; gap: 12px; }
.social a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--teal-ink); transition: background .5s var(--ease), color .5s var(--ease);
}
.social a:hover { background: var(--teal-ink); color: #fff; }
.social svg { width: 17px; height: 17px; }
.footer .bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.footer .bottom a { color: var(--muted); margin-left: 26px; }
.footer .bottom a:hover { color: var(--teal-ink); }

/* ---------- a draft marker, for the demo only (remove before launch) ---------- */
.draft-note {
  display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: #8A5A12; background: #FBF1DC; border: 1px dashed #D9B46A; border-radius: 999px; padding: 4px 12px; margin-bottom: 18px;
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .15s; }
.reveal[data-delay="2"] { transition-delay: .3s; }
.reveal[data-delay="3"] { transition-delay: .45s; }
.reveal[data-delay="4"] { transition-delay: .6s; }
.reveal[data-delay="5"] { transition-delay: .75s; }

/* the hero's first entrance: line by line. The padding/negative margin leave room for
   the descenders (the g's of "graceful aging" were being clipped by the mask). */
.rise { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.rise > span { display: block; transform: translateY(105%); transition: transform 1.6s var(--ease); }
.is-in .rise > span { transform: none; }
.is-in .rise:nth-child(2) > span { transition-delay: .14s; }
.fade-late { opacity: 0; transition: opacity 1.6s var(--ease) .7s; }
.is-in .fade-late { opacity: 1; }

@keyframes drift { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- legal pages ---------- */
.legal { padding: 170px 0 110px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(44px, 5vw, 64px); margin: 16px 0 12px; }
.legal .updated { color: var(--muted); font-size: 15px; margin-bottom: 50px; }
.legal h2 { font-size: 32px; font-weight: 400; margin: 48px 0 14px; }
.legal p, .legal li { font-size: 17px; color: var(--ink-soft); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal .fill { background: #FBF1DC; border-bottom: 1px dashed #D9B46A; padding: 0 4px; color: #8A5A12; font-weight: 400; }
.legal .callout { background: var(--foam); border-left: 3px solid var(--teal); padding: 22px 26px; border-radius: 0 14px 14px 0; margin: 26px 0; }
.legal .callout p { margin: 0; }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .about .wrap { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; max-width: none; }
  .hero-actions { justify-content: center; }
  .hero-mandala { width: 620px; right: 50%; margin-right: -310px; top: 40px; margin-top: 0; }
  .hero { padding-top: 130px; }
  .tiles, .pillars { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; row-gap: 50px; }
  .portrait { max-width: 520px; margin-inline: auto; }
  .portrait .badge { right: 12px; }
  .nav-links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 34px;
    background: rgba(251, 250, 247, .97); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
  .nav-links a { font-size: 18px; }
  .nav.open .nav-links { opacity: 1; pointer-events: auto; }
  .menu-btn { display: block; position: relative; z-index: 2; }
  .nav.open .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.open .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .tiles, .pillars { grid-template-columns: 1fr; }
  .pillars { row-gap: 56px; }
  .hero { padding-top: 104px; padding-bottom: 60px; }
  .hero .wrap { gap: 34px; }
  .hero-copy .eyebrow { margin-bottom: 20px; }
  .hero-copy .eyebrow > span { display: block; }
  .hero-copy .eyebrow .sep { display: none; }
  .hero-copy h1 { margin-bottom: 20px; }
  .hero-copy .lede { margin-bottom: 32px; }
  .portrait .badge { right: 12px; bottom: 16px; padding: 14px 18px; }
  .portrait .badge b { font-size: 36px; }
  .brand .tag { display: none; }
  .btn { padding: 16px 24px; letter-spacing: .12em; }
  .footer .bottom a { margin: 0 20px 0 0; }
  .scroll-cue { display: none; }
}

/* ---------- no script (blocked, or failed to load): show everything, still ---------- */
.no-js .reveal, .no-js .fade-late { opacity: 1; transform: none; }
.no-js .rise > span { transform: none; }
.no-js .bloom-flower img { opacity: 1; transform: none; clip-path: none; }
.no-js .bloom-flower .halo { opacity: 1; transform: none; }

/* ---------- people who ask for less motion get none ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .fade-late { opacity: 1; transform: none; }
  .rise > span { transform: none; }
  .bloom-flower img { opacity: 1; transform: none; clip-path: none; }
  .bloom-flower .halo { opacity: 1; transform: none; }
}

/* three-card work row (2026-09-28) */
@media (max-width: 980px) {
  .tiles.three { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
}

/* larger corner name (2026-09-28) */
.nav .brand .name { font-size: 34px; font-weight: 500; letter-spacing: .005em; }
.nav .brand .tag { font-size: 11px; margin-top: 7px; }
@media (max-width: 640px) {
  .nav .brand .name { font-size: 28px; }
}

/* hero supporting line + card inquiry links (2026-09-29) */
.hero-copy .hero-sub { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: var(--ink-soft); max-width: 560px; margin: -26px 0 42px; }
.tile { display: flex; flex-direction: column; }
.tile p { flex: 1 0 auto; }
.tile .card-link {
  align-self: flex-start; margin-top: 26px; padding-top: 18px;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--teal-ink); border-top: 1px solid rgba(31, 111, 106, .18); width: 100%;
}
.tile .card-link .arrow { display: inline-block; transition: transform .5s var(--ease); }
.tile .card-link:hover .arrow { transform: translateX(4px); }
@media (max-width: 980px) { .hero-copy .hero-sub { margin-left: auto; margin-right: auto; } }