/* ============================================================
   Luxury wellness elevation — Kinfolk / Aesop / handcrafted
   Overrides only. Structure unchanged.
   ============================================================ */

:root {
  --ink: #2c2a27;
  --ink-soft: #5a564f;
  --cream: #f7f5f2;
  --sand: #f0ede8;
  --sand-deep: #e5e0d8;
  --paper: #f7f5f2;
  --paper-deep: #ebe7e1;
  --fog: #f7f5f2;
  --mist: #ebe7e1;
  --stone: #d6d1c9;
  --sage: #4f5d55;
  --sage-deep: #3a453f;
  --sage-soft: rgba(79, 93, 85, 0.08);
  --eucalyptus: #5f6f66;
  --eucalyptus-soft: rgba(95, 111, 102, 0.1);
  --teal: #55635f;
  --teal-soft: rgba(85, 99, 95, 0.08);
  --koi: #9a6b52;
  --koi-deep: #7d5642;
  --koi-soft: rgba(154, 107, 82, 0.1);
  --koi-wash: rgba(154, 107, 82, 0.06);
  --taupe: #8a847a;
  --champagne: #9a9286;
  --line: rgba(44, 42, 39, 0.08);
  --line-strong: rgba(44, 42, 39, 0.12);
  --measure: 30rem;
  --measure-wide: 33rem;
  --content: 68rem;
  --gutter: clamp(1.5rem, 5vw, 3.25rem);
  --section-y: clamp(5.5rem, 12vw, 9rem);
  --label-tracking: 0.2em;
}

body {
  font-size: clamp(1.02rem, 0.2vw + 0.98rem, 1.075rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
  background-color: var(--cream);
}

.eyebrow,
.aside-label,
.contact-details dt {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  color: color-mix(in srgb, var(--koi-deep) 82%, var(--taupe));
}

h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.15rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--sage-deep);
  margin-bottom: 1.35rem;
}

h3 {
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--sage-deep);
}

.section-lede,
.hero-desc,
.hero-support,
.copy p {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.hero-name {
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
}

.section-intro {
  max-width: 32rem;
  margin-bottom: clamp(2.75rem, 6vw, 4rem);
}

/* Dissolve obvious boxes into soft editorial stains */
.support-topic,
.pillar,
.session-row,
.practical-card,
.contact-form {
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background-color: transparent !important;
}

.support-grid {
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3.25rem);
}

.support-topic {
  padding: 0.35rem 0.15rem 1.15rem !important;
  border-radius: 0 !important;
  background-image: none !important;
  position: relative;
}

.support-topic::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.15rem;
  height: 1px;
  background: color-mix(in srgb, var(--koi) 55%, transparent);
  opacity: 0.7;
}

.support-topic h3 {
  padding-top: 0.85rem;
  font-size: clamp(1.22rem, 1.5vw, 1.4rem);
}

.support-topic p {
  max-width: 30ch;
  font-size: 0.98rem;
  line-height: 1.7;
}

.support-topic:nth-child(3n + 2),
.support-topic:nth-child(3n) {
  background-image: none !important;
  border-radius: 0 !important;
}

.pillars {
  gap: clamp(2rem, 4vw, 3.25rem);
  margin-top: 3.5rem;
  padding-top: 2.75rem;
  border-top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 20' fill='none'%3E%3Cpath d='M8 11c36-5 72-7 112-3 28 3 56 5 90 3 30-2 58-7 90-6' stroke='%23c47a55' stroke-opacity='0.35' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: min(22rem, 70%) 0.9rem;
}

.pillar {
  padding: 0.25rem 0.1rem 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.pillar h3 {
  font-size: clamp(1.35rem, 1.7vw, 1.55rem);
  margin-bottom: 0.9rem;
}

.session-rows {
  gap: 0;
}

.session-row {
  padding: 1.85rem 0.15rem !important;
  border-radius: 0 !important;
  background-image: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
  position: relative;
}

.session-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.1rem;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' fill='none'%3E%3Cpath d='M2 9c40-4 80-5 130-2 36 2 70 4 120 2 42-2 80-6 130-5' stroke='%237a7164' stroke-opacity='0.45' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.session-row:nth-child(even) {
  background-image: none !important;
  border-radius: 0 !important;
}

.session-row:last-child {
  border-bottom: 0 !important;
}

.practical-grid {
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
}

.practical-card {
  padding: 0.25rem 0.1rem 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
  position: relative;
}

.practical-card::before {
  content: "";
  display: block;
  width: 1.35rem;
  height: 1px;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--koi) 50%, transparent);
}

.practical-card:nth-child(2),
.practical-card:nth-child(3) {
  background-image: none !important;
  border-radius: 0 !important;
}

.contact-form {
  padding: clamp(1.85rem, 3.5vw, 2.5rem) 0 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
  position: relative;
}

.contact-form::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(100%, 28rem);
  height: 1.2rem;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 18' fill='none'%3E%3Cpath d='M4 10c42-5 86-6 140-2 40 3 78 5 130 2 36-2 60-5 80-5' stroke='%23c47a55' stroke-opacity='0.45' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='180' cy='7' r='1.6' fill='%23c47a55' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: color-mix(in srgb, var(--cream) 55%, transparent) !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--taupe) 28%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--koi) 55%, transparent) !important;
  background: color-mix(in srgb, var(--cream) 70%, transparent) !important;
}

.crisis-note {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-left: 0 !important;
  padding: 1.35rem 0 1.35rem 1.25rem !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
}

.crisis-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--koi) 55%, transparent),
    color-mix(in srgb, var(--sage) 40%, transparent)
  );
  opacity: 0.7;
}

/* Softer section fields — no flat white planes */
.about,
.approach,
.practical,
.contact,
.faq,
.support,
.sessions {
  background-color: transparent;
}

.about {
  background-image:
    radial-gradient(ellipse 55% 60% at 100% 0%, rgba(86, 104, 92, 0.13), transparent 70%),
    radial-gradient(ellipse 45% 50% at 92% 100%, rgba(196, 122, 85, 0.11), transparent 72%),
    radial-gradient(ellipse 40% 45% at 0% 40%, rgba(168, 152, 126, 0.08), transparent 70%);
}

.support {
  background-image:
    radial-gradient(ellipse 50% 55% at 0% 15%, rgba(196, 122, 85, 0.1), transparent 70%),
    radial-gradient(ellipse 48% 50% at 100% 80%, rgba(86, 104, 92, 0.1), transparent 72%);
}

.approach {
  background-image:
    radial-gradient(ellipse 55% 50% at 0% 100%, rgba(196, 122, 85, 0.12), transparent 68%),
    radial-gradient(ellipse 42% 48% at 100% 0%, rgba(86, 104, 92, 0.09), transparent 70%);
}

.sessions {
  background-image:
    radial-gradient(ellipse 48% 52% at 10% 0%, rgba(196, 122, 85, 0.09), transparent 70%),
    radial-gradient(ellipse 52% 48% at 90% 100%, rgba(86, 104, 92, 0.11), transparent 72%);
}

.practical {
  background-image:
    radial-gradient(ellipse 48% 52% at 100% 15%, rgba(110, 131, 117, 0.1), transparent 70%),
    radial-gradient(ellipse 42% 48% at 0% 95%, rgba(196, 122, 85, 0.08), transparent 70%);
}

.faq {
  background-image:
    radial-gradient(ellipse 52% 48% at 5% 0%, rgba(196, 122, 85, 0.1), transparent 70%),
    radial-gradient(ellipse 46% 44% at 95% 95%, rgba(86, 104, 92, 0.11), transparent 72%);
}

.contact {
  background-image:
    radial-gradient(ellipse 55% 52% at 0% 100%, rgba(86, 104, 92, 0.13), transparent 68%),
    radial-gradient(ellipse 50% 46% at 100% 0%, rgba(196, 122, 85, 0.12), transparent 70%);
}

.site-footer {
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 48% 55% at 0% 100%, rgba(86, 104, 92, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 45% at 100% 0%, rgba(196, 122, 85, 0.08), transparent 70%);
  border-top: 0;
}

.about-portrait-img {
  border-radius: 48% 52% 46% 54% / 52% 44% 56% 48%;
  box-shadow:
    0 22px 48px rgba(53, 50, 46, 0.1),
    0 2px 10px rgba(53, 50, 46, 0.04);
}

.section-intro h2::after,
.about-body h2::after,
.approach h2::after,
.contact-copy h2::after {
  width: 3.25rem;
  height: 0.7rem;
  margin-top: 1.05rem;
  opacity: 0.9;
}

.btn-secondary {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--taupe) 30%, transparent);
  letter-spacing: 0.05em;
  padding: 0.82rem 1.65rem;
}

.btn-primary,
.nav-cta {
  border-radius: 999px !important;
}

/* ============================================================
   Hero — scannable editorial opening
   Logo · brand · headline · support · desc · service · CTA
   ============================================================ */

.hero {
  min-height: 100svh;
  background-color: #f4ebe0;
  display: grid;
  align-items: center;
}

.hero::before {
  display: none;
}

.hero-glow {
  inset: -18% -14% -10%;
  filter: blur(32px) saturate(0.9);
  opacity: 0.85;
  background:
    radial-gradient(ellipse 54% 46% at 50% 40%, rgba(250, 246, 240, 0.72), transparent 72%),
    radial-gradient(ellipse 48% 42% at 28% 36%, rgba(85, 103, 91, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 38% at 72% 58%, rgba(196, 122, 85, 0.1), transparent 72%),
    radial-gradient(ellipse 68% 38% at 50% 100%, rgba(232, 222, 207, 0.45), transparent 72%);
}

.hero::after {
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.28 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-position: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(7.5rem, 14vh, 10.5rem) 0 clamp(5.5rem, 12vh, 8rem);
  gap: 0;
  max-width: 34rem;
  width: min(34rem, calc(100% - var(--gutter) * 2));
}

.hero-brand {
  width: min(100%, 240px);
  margin: 0 auto 2rem;
}

.hero-logo {
  filter: drop-shadow(0 18px 40px rgba(53, 50, 46, 0.07));
}

.hero-name {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--sage-deep);
}

.hero-headline {
  margin: 0 0 1rem;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.55rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--sage-deep);
  text-wrap: balance;
}

.hero-support {
  margin: 0 0 1.75rem;
  font-size: clamp(1.05rem, 0.8vw, 1.12rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--sage-deep) 78%, var(--koi-deep));
}

.hero-desc {
  margin: 0 0 2rem;
  max-width: 28ch;
  font-size: clamp(1rem, 0.65vw, 1.06rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.hero-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 2.5rem;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--taupe));
}

.hero-service span {
  display: block;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
}

@media (max-width: 999px) {
  .hero-inner {
    padding: calc(6.5rem + env(safe-area-inset-top)) 0 5.25rem;
  }

  .hero-brand {
    width: min(100%, 220px);
    margin-bottom: 1.75rem;
  }

  .hero-name {
    margin-bottom: 1.5rem;
  }

  .hero-headline {
    margin-bottom: 0.85rem;
  }

  .hero-support {
    margin-bottom: 1.5rem;
  }

  .hero-desc {
    margin-bottom: 1.75rem;
  }

  .hero-service {
    margin-bottom: 2.15rem;
  }
}

@media (max-width: 599px) {
  .hero-inner {
    padding: calc(5.75rem + env(safe-area-inset-top)) 0 4.5rem;
  }

  .hero-brand {
    width: min(48vw, 190px);
    margin-bottom: 1.5rem;
  }

  .hero-name {
    font-size: clamp(1.4rem, 5.5vw, 1.65rem);
    letter-spacing: 0.12em;
    margin-bottom: 1.35rem;
  }

  .hero-headline {
    font-size: clamp(1.7rem, 7.2vw, 2.1rem);
    max-width: 14ch;
  }

  .hero-desc {
    max-width: 26ch;
  }

  .hero-service {
    gap: 0.4rem;
    font-size: 0.88rem;
  }
}

@media (max-height: 700px) and (max-width: 999px) {
  .hero-brand {
    width: min(36vw, 170px);
    margin-bottom: 1.1rem;
  }

  .hero-inner {
    padding-top: calc(5rem + env(safe-area-inset-top));
    padding-bottom: 3rem;
  }

  .hero-name {
    margin-bottom: 1rem;
  }

  .hero-headline {
    margin-bottom: 0.65rem;
  }

  .hero-support {
    margin-bottom: 1.1rem;
  }

  .hero-desc {
    margin-bottom: 1.25rem;
  }

  .hero-service {
    margin-bottom: 1.5rem;
  }
}

/* ============================================================
   Meaning — dedicated Eunoia name section
   ============================================================ */

.meaning {
  background-color: color-mix(in srgb, var(--cream) 88%, var(--sand));
  background-image:
    radial-gradient(ellipse 48% 50% at 50% 0%, rgba(196, 122, 85, 0.08), transparent 70%),
    radial-gradient(ellipse 42% 44% at 50% 100%, rgba(85, 103, 91, 0.08), transparent 72%);
  text-align: center;
}

.meaning-inner {
  max-width: 28rem;
  margin-inline: auto;
  padding-block: 0.25rem;
}

.meaning .eyebrow {
  margin: 0 0 1.15rem;
}

.meaning h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(2.4rem, 5vw, 3.35rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--sage-deep);
}

.meaning h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 0.75rem;
  margin: 1.15rem auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14' fill='none'%3E%3Cpath d='M2 8c10-3.2 20-4 32-2 8 1.4 16 2.8 28 1.6' stroke='%23c47a55' stroke-opacity='0.7' stroke-width='1.55' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='5.2' r='1.4' fill='%23c47a55' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.meaning-phonetic {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--taupe) 65%, var(--koi));
}

.meaning-text {
  position: relative;
  margin: 0 auto;
  max-width: 32ch;
  font-size: clamp(1.05rem, 1.1vw, 1.15rem);
  line-height: 1.75;
  letter-spacing: 0.012em;
  color: var(--ink-soft);
}

.meaning-text::before {
  content: "“";
  display: block;
  margin: 0 auto 0.55rem;
  width: fit-content;
  font-family: var(--font-display), Georgia, "Times New Roman", serif;
  font-size: 1.65em;
  line-height: 1;
  color: var(--koi);
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 999px) {
  .about-portrait-img {
    border-radius: 1.75rem;
  }

  .support-topic,
  .pillar,
  .practical-card {
    padding-bottom: 0.35rem !important;
  }
}

/* ============================================================
   Soft art — understated logo-native flourishes
   ============================================================ */

/* Quieter paper fibre across the page */
body::before {
  opacity: 0.34;
  background-size: 280px 280px;
}

body::after {
  opacity: 0.18;
}

/* Hand-painted section transitions — soft ink smear, not a line */
.section::before {
  top: -1.1rem;
  width: min(28rem, 72vw);
  height: 2.4rem;
  opacity: 0.38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 40' fill='none'%3E%3Cpath d='M8 22c48-10 96-14 150-8 38 4 72 10 118 8 44-2 78-12 126-14 8-0.4 14 1 18 2' stroke='%23c47a55' stroke-opacity='0.28' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M18 24c52-7 100-10 152-5 40 4 78 8 124 5 40-3 74-10 112-10' stroke='%2355675b' stroke-opacity='0.22' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M30 26c44-4 90-6 140-3 34 2 70 5 110 3 32-1.5 60-5 90-6' stroke='%237a7164' stroke-opacity='0.2' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='210' cy='16' r='1.8' fill='%23c47a55' fill-opacity='0.35'/%3E%3C/svg%3E");
  filter: blur(0.35px);
}

/* Soft pigment bloom at the foot of each section */
.section {
  isolation: isolate;
}

.about,
.support,
.approach,
.sessions,
.practical,
.faq,
.contact {
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 3%,
    #000 97%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 3%,
    #000 97%,
    transparent 100%
  );
}

/* Delicate botanical flourishes — logo-native, very quiet */
.about::after {
  opacity: 0.32;
  width: min(12rem, 32vw);
  height: min(14rem, 36vw);
  top: 10%;
  left: -1%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150' fill='none'%3E%3Cpath d='M58 140c2-32 10-58 26-82 8-12 18-22 30-30-14 4-26 14-34 28-8 14-14 32-16 52z' fill='%2355675b' fill-opacity='0.2'/%3E%3Cpath d='M52 138c-3-28-12-52-28-72-10-12-22-20-36-26 12 2 24 10 34 22 12 14 20 34 24 56z' fill='%23a8987e' fill-opacity='0.18'/%3E%3Cpath d='M55 142c0-40 1.5-78 2.5-118' stroke='%237a7164' stroke-opacity='0.28' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='58' cy='20' r='1.8' fill='%23c47a55' fill-opacity='0.48'/%3E%3Ccircle cx='78' cy='42' r='1.15' fill='%23c47a55' fill-opacity='0.32'/%3E%3Ccircle cx='34' cy='56' r='1.1' fill='%233e5146' fill-opacity='0.22'/%3E%3C/svg%3E");
}

.support::after {
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 170' fill='none'%3E%3Cpath d='M62 158c3-34 12-62 28-88 10-16 22-28 36-38-16 6-30 18-40 36-10 16-16 36-18 58z' fill='%2355675b' fill-opacity='0.18'/%3E%3Cpath d='M54 156c-4-30-14-56-32-78-12-14-26-24-42-30 14 2 28 12 40 26 14 16 24 38 28 60z' fill='%23c47a55' fill-opacity='0.1'/%3E%3Cpath d='M58 160c0-44 2-86 3-128' stroke='%237a7164' stroke-opacity='0.26' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='64' cy='26' r='1.7' fill='%23c47a55' fill-opacity='0.45'/%3E%3Ccircle cx='88' cy='58' r='1.1' fill='%23c47a55' fill-opacity='0.3'/%3E%3Ccircle cx='42' cy='72' r='0.9' fill='%2355675b' fill-opacity='0.28'/%3E%3C/svg%3E");
}

.approach::after {
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 140' fill='none'%3E%3Cpath d='M50 128c4-26 14-48 30-66 12-14 26-22 42-26-16 8-28 20-36 36-8 14-12 32-14 50z' fill='%23c47a55' fill-opacity='0.14'/%3E%3Cpath d='M44 126c-2-24-10-44-26-60C8 54-4 46-16 42c12 4 24 14 32 28 10 16 16 34 18 52z' fill='%2355675b' fill-opacity='0.16'/%3E%3Cpath d='M47 130c1-38 2-74 2-110' stroke='%237a7164' stroke-opacity='0.24' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='18' r='1.7' fill='%23c47a55' fill-opacity='0.48'/%3E%3Ccircle cx='72' cy='48' r='1.1' fill='%23c47a55' fill-opacity='0.28'/%3E%3Ccircle cx='28' cy='62' r='0.9' fill='%2355675b' fill-opacity='0.28'/%3E%3C/svg%3E");
}

.sessions::after {
  opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' fill='none'%3E%3Cpath d='M46 118c3-24 12-44 26-60 10-12 22-18 36-22-14 6-24 16-32 30-8 14-12 30-14 46z' fill='%236e8375' fill-opacity='0.18'/%3E%3Cpath d='M40 116c-2-22-10-40-24-56C8 50-2 44-14 40c10 4 20 12 28 24 9 14 14 30 16 48z' fill='%2355675b' fill-opacity='0.14'/%3E%3Cpath d='M43 120c1-34 2-66 2-100' stroke='%237a7164' stroke-opacity='0.22' stroke-width='0.9' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='16' r='1.5' fill='%23c47a55' fill-opacity='0.42'/%3E%3Ccircle cx='68' cy='42' r='1' fill='%23c47a55' fill-opacity='0.26'/%3E%3C/svg%3E");
}

.faq::after {
  opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' fill='none'%3E%3Cpath d='M44 118c3-24 11-42 26-58 10-10 22-18 34-22-12 6-22 16-30 30-7 12-12 28-14 44z' fill='%2355675b' fill-opacity='0.16'/%3E%3Cpath d='M38 116c-2-20-10-38-24-52C6 54-4 48-16 44c10 4 20 12 28 24 9 14 14 30 16 48z' fill='%23a8987e' fill-opacity='0.14'/%3E%3Cpath d='M41 120c1-34 2-66 2-98' stroke='%237a7164' stroke-opacity='0.22' stroke-width='0.9' stroke-linecap='round'/%3E%3Ccircle cx='44' cy='18' r='1.55' fill='%23c47a55' fill-opacity='0.4'/%3E%3Ccircle cx='62' cy='44' r='0.95' fill='%23c47a55' fill-opacity='0.28'/%3E%3C/svg%3E");
}

.contact::after {
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 140' fill='none'%3E%3Cpath d='M50 128c4-26 14-48 30-66 12-14 26-22 42-26-16 8-28 20-36 36-8 14-12 32-14 50z' fill='%23596d6a' fill-opacity='0.14'/%3E%3Cpath d='M44 126c-2-24-10-44-26-60C8 54-4 46-16 42c12 4 24 14 32 28 10 16 16 34 18 52z' fill='%2355675b' fill-opacity='0.15'/%3E%3Cpath d='M47 130c1-38 2-74 2-110' stroke='%237a7164' stroke-opacity='0.24' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='18' r='1.7' fill='%23c47a55' fill-opacity='0.42'/%3E%3Ccircle cx='74' cy='52' r='1.05' fill='%23c47a55' fill-opacity='0.3'/%3E%3C/svg%3E");
}

/* Soft organic wash shapes in section fields */
.about {
  background-image:
    radial-gradient(ellipse 62% 58% at 102% -4%, rgba(85, 103, 91, 0.14), transparent 72%),
    radial-gradient(ellipse 48% 52% at 94% 104%, rgba(196, 122, 85, 0.1), transparent 74%),
    radial-gradient(ellipse 44% 48% at -4% 42%, rgba(168, 152, 126, 0.09), transparent 70%),
    radial-gradient(ellipse 36% 30% at 48% 18%, rgba(250, 246, 240, 0.35), transparent 68%);
}

.support {
  background-image:
    radial-gradient(ellipse 54% 58% at -2% 12%, rgba(196, 122, 85, 0.1), transparent 72%),
    radial-gradient(ellipse 50% 52% at 102% 84%, rgba(85, 103, 91, 0.11), transparent 74%),
    radial-gradient(ellipse 38% 34% at 60% 40%, rgba(250, 246, 240, 0.28), transparent 68%);
}

.approach {
  background-image:
    radial-gradient(ellipse 58% 52% at -4% 104%, rgba(196, 122, 85, 0.12), transparent 70%),
    radial-gradient(ellipse 46% 50% at 104% -2%, rgba(85, 103, 91, 0.1), transparent 72%),
    radial-gradient(ellipse 34% 32% at 40% 50%, rgba(168, 152, 126, 0.07), transparent 68%);
}

.sessions {
  background-image:
    radial-gradient(ellipse 52% 56% at 8% -2%, rgba(196, 122, 85, 0.09), transparent 72%),
    radial-gradient(ellipse 56% 50% at 94% 102%, rgba(85, 103, 91, 0.12), transparent 74%),
    radial-gradient(ellipse 40% 36% at 50% 45%, rgba(250, 246, 240, 0.22), transparent 70%);
}

.practical {
  background-image:
    radial-gradient(ellipse 52% 54% at 104% 12%, rgba(110, 131, 117, 0.1), transparent 72%),
    radial-gradient(ellipse 46% 50% at -4% 96%, rgba(196, 122, 85, 0.08), transparent 72%),
    radial-gradient(ellipse 36% 34% at 55% 55%, rgba(168, 152, 126, 0.07), transparent 68%);
}

.faq {
  background-image:
    radial-gradient(ellipse 54% 50% at 2% -2%, rgba(196, 122, 85, 0.1), transparent 72%),
    radial-gradient(ellipse 50% 48% at 98% 98%, rgba(85, 103, 91, 0.11), transparent 74%),
    radial-gradient(ellipse 42% 38% at 45% 50%, rgba(250, 246, 240, 0.25), transparent 70%);
}

.contact {
  background-image:
    radial-gradient(ellipse 58% 54% at -2% 102%, rgba(85, 103, 91, 0.13), transparent 70%),
    radial-gradient(ellipse 52% 48% at 102% -2%, rgba(196, 122, 85, 0.11), transparent 72%),
    radial-gradient(ellipse 40% 36% at 50% 40%, rgba(168, 152, 126, 0.08), transparent 68%);
}

/* Soften remaining geometric accents into brush marks */
.support-topic::before,
.practical-card::before {
  width: 1.55rem;
  height: 0.45rem;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none'%3E%3Cpath d='M1 5c4-1.6 8-2 13-1 4 0.8 8 1.4 12 0.6' stroke='%23c47a55' stroke-opacity='0.45' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
}

.session-row::before {
  height: 1.35rem;
  opacity: 0.36;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 20' fill='none'%3E%3Cpath d='M4 12c52-5 104-7 168-3 48 3 96 5 156 2 52-2.5 96-7 140-7' stroke='%237a7164' stroke-opacity='0.35' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M24 14c48-3 100-4 160-1 44 2 90 3 140 1' stroke='%23c47a55' stroke-opacity='0.16' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.pillars {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 24' fill='none'%3E%3Cpath d='M10 14c42-6 86-8 136-4 36 3 72 6 118 4 38-2 70-7 96-8' stroke='%23c47a55' stroke-opacity='0.28' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M22 16c40-4 84-5 132-2 34 2 70 3 110 1' stroke='%2355675b' stroke-opacity='0.2' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='180' cy='10' r='1.5' fill='%23c47a55' fill-opacity='0.32'/%3E%3C/svg%3E");
  background-size: min(26rem, 78%) 1.15rem;
  filter: none;
}

.section-intro h2::after,
.about-body h2::after,
.approach h2::after,
.contact-copy h2::after {
  width: 3.6rem;
  height: 0.85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14' fill='none'%3E%3Cpath d='M2 8c10-3.2 20-4 32-2 8 1.4 16 2.8 28 1.6' stroke='%23c47a55' stroke-opacity='0.55' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M8 10c8-1.5 18-2 28-0.8 7 0.8 14 1.4 22 0.6' stroke='%2355675b' stroke-opacity='0.22' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='5.5' r='1.4' fill='%23c47a55' fill-opacity='0.45'/%3E%3C/svg%3E");
}

.site-footer::before {
  width: min(22rem, 60vw);
  height: 1.75rem;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 28' fill='none'%3E%3Cpath d='M8 16c40-7 80-9 128-5 34 3 68 7 108 5 32-1.5 56-6 72-7' stroke='%23c47a55' stroke-opacity='0.3' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M20 18c36-4 76-5 120-2 32 2 64 3 100 1' stroke='%2355675b' stroke-opacity='0.2' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='160' cy='11' r='1.5' fill='%23c47a55' fill-opacity='0.35'/%3E%3C/svg%3E");
}

/* Soften portrait into an organic edge */
.about-portrait-img {
  border-radius: 52% 48% 45% 55% / 48% 52% 48% 52%;
}

/* Quiet ink flecks near section intros */
.section-intro {
  position: relative;
}

.section-intro::after {
  content: "";
  position: absolute;
  right: -0.5rem;
  top: 0.35rem;
  width: 4.5rem;
  height: 4.5rem;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Ccircle cx='58' cy='18' r='1.2' fill='%23c47a55' fill-opacity='0.55'/%3E%3Ccircle cx='68' cy='28' r='0.8' fill='%2355675b' fill-opacity='0.4'/%3E%3Ccircle cx='52' cy='30' r='0.6' fill='%237a7164' fill-opacity='0.35'/%3E%3Cpath d='M40 48c6-8 14-12 24-14' stroke='%23a8987e' stroke-opacity='0.35' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 999px) {
  .section-intro::after {
    right: 0;
    opacity: 0.16;
    width: 3.25rem;
    height: 3.25rem;
  }

  .about,
  .support,
  .approach,
  .sessions,
  .practical,
  .faq,
  .contact {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about::after,
  .support::after,
  .approach::after,
  .sessions::after,
  .faq::after,
  .contact::after {
    animation: none !important;
  }
}

/* ============================================================
   Koi accent distribution — quiet guides back to the logo
   Burnt orange sparingly: accents, underlines, brush, hover,
   quotes, berries, icons, CTA highlights. Never dominate.
   ============================================================ */

/* Small heading accents — berry before pillar titles */
.pillar h3 {
  position: relative;
  padding-left: 0.95rem;
}

.pillar h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--koi) 78%, var(--koi-deep));
  opacity: 0.72;
  box-shadow: 0.55rem -0.35rem 0 -0.08rem color-mix(in srgb, var(--koi) 35%, transparent);
}

/* Session / FAQ row titles — soft koi underline on hover */
.session-row h3 {
  transition: color var(--duration-fast, 180ms) var(--ease, ease);
}

.session-row:hover h3,
.session-row:focus-within h3 {
  color: color-mix(in srgb, var(--sage-deep) 78%, var(--koi-deep));
}

.session-row::before {
  transition: opacity var(--duration-fast, 180ms) var(--ease, ease);
}

.session-row:hover::before {
  opacity: 0.55;
}

/* Support / practical brush marks brighten slightly on hover */
.support-topic::before,
.practical-card::before {
  transition:
    opacity var(--duration-fast, 180ms) var(--ease, ease),
    width var(--duration-fast, 180ms) var(--ease, ease);
}

.support-topic:hover::before,
.practical-card:hover::before {
  opacity: 1;
  width: 1.85rem;
}

.support-topic h3 {
  transition: color var(--duration-fast, 180ms) var(--ease, ease);
}

.support-topic:hover h3 {
  color: color-mix(in srgb, var(--sage-deep) 82%, var(--koi-deep));
}

/* Decorative heading underlines — more clearly koi, still quiet */
.section-intro h2::after,
.about-body h2::after,
.approach h2::after,
.contact-copy h2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14' fill='none'%3E%3Cpath d='M2 8c10-3.2 20-4 32-2 8 1.4 16 2.8 28 1.6' stroke='%23c47a55' stroke-opacity='0.72' stroke-width='1.65' stroke-linecap='round'/%3E%3Cpath d='M10 10c7-1.2 16-1.6 26-0.6 6 0.6 12 1.1 20 0.5' stroke='%23c47a55' stroke-opacity='0.22' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='5.2' r='1.45' fill='%23c47a55' fill-opacity='0.55'/%3E%3C/svg%3E");
}

/* Quote marks live on .meaning-text (see Meaning section) */

/* Nav / text link hover — underline stays koi, slightly clearer */
.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  background: color-mix(in srgb, var(--koi) 88%, var(--koi-deep));
}

.copy a:hover,
.copy a:focus-visible,
.credential a:hover,
.credential a:focus-visible,
.contact-details a:hover,
.contact-details a:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--koi-deep);
  border-bottom-color: color-mix(in srgb, var(--koi) 70%, transparent);
}

/* Secondary CTA — koi rim on hover, primary stays the solid accent */
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: color-mix(in srgb, var(--koi) 48%, var(--taupe));
  color: var(--koi-deep);
  background: color-mix(in srgb, var(--koi-soft) 55%, transparent);
}

.btn-text:hover,
.btn-text:focus-visible {
  color: var(--koi-deep);
  border-bottom-color: color-mix(in srgb, var(--koi) 65%, transparent);
}

/* Primary CTA — soft koi glow, not a loud fill change */
.btn-primary:hover,
.btn-primary:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible {
  box-shadow:
    0 10px 28px -14px color-mix(in srgb, var(--koi-deep) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--koi) 18%, transparent);
}

/* Trust list berries — slightly warmer, leaf-sized */
.trust-list li::before {
  width: 0.3rem;
  height: 0.3rem;
  background: color-mix(in srgb, var(--koi) 82%, var(--koi-deep));
  box-shadow: 0.42rem -0.28rem 0 -0.06rem color-mix(in srgb, var(--koi) 28%, transparent);
}

/* Form focus — clearer koi underline */
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--koi) 72%, transparent) !important;
}

/* Aside / contact labels — icons as quiet koi markers */
.aside-label::before,
.contact-details dt::before {
  content: "";
  display: inline-block;
  width: 0.28rem;
  height: 0.28rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--koi) 75%, var(--koi-deep));
  opacity: 0.7;
  vertical-align: 0.12em;
}

/* Section intro flecks — a little more berry, still quiet */
.section-intro::after {
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Ccircle cx='58' cy='18' r='1.35' fill='%23c47a55' fill-opacity='0.62'/%3E%3Ccircle cx='68' cy='28' r='0.85' fill='%23c47a55' fill-opacity='0.35'/%3E%3Ccircle cx='52' cy='30' r='0.6' fill='%237a7164' fill-opacity='0.35'/%3E%3Cpath d='M40 48c6-8 14-12 24-14' stroke='%23a8987e' stroke-opacity='0.35' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M46 22c4-2 8-2.5 12-1' stroke='%23c47a55' stroke-opacity='0.28' stroke-width='0.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.site-footer::before {
  opacity: 0.4;
}

/* Crisis note accent bar — lean more koi at the top */
.crisis-note::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--koi) 70%, transparent),
    color-mix(in srgb, var(--sage) 35%, transparent)
  );
  opacity: 0.8;
}

/* Form success state */
.form-status[data-type="success"] {
  border-color: color-mix(in srgb, var(--sage) 35%, var(--line));
  background: color-mix(in srgb, var(--sage-soft) 70%, var(--cream));
  color: var(--sage-deep);
}

.contact-form[data-submitted="true"] .form-status[data-type="success"] {
  margin: 0.25rem 0 0;
  padding: 1.15rem 1.2rem;
  font-size: 1.02rem;
  line-height: 1.55;
}

