/* =========================================================
   CAROLA · Master Your Energy · Opt-In Page
   Palette, type & layout pulled directly from the build spec.
========================================================= */

:root {
  --ivory: #F9F5ED;        /* warm ivory (primary) */
  --ivory-tint: #F2EBDD;   /* alternate light section, cards */
  --peach: #FAECDA;        /* organic blob shapes */
  --terracotta: #B76643;   /* accent */
  --terracotta-deep: #9E5537; /* hover, testimonial cards */
  --ink: #291911;          /* espresso ink */
  --teal: #265A61;         /* thin top accent bar */

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-card: 18px;
  --radius-pill: 999px;
  --maxw: 1080px;
}

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

html { scroll-behavior: smooth; }

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

/* ---------- Top accent bar ---------- */
.topbar { height: 4px; background: var(--teal); }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 5;
  /* Same centered 1080 container as the content so the logo aligns
     with the hero copy and the section columns below. Logo sits on
     the right edge of that container. */
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 40px);
  background: var(--ivory);
  display: flex;
  justify-content: center;
}
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo-mark { display: inline-flex; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text strong { font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: .2px; }
.logo-text em {
  font-style: normal; font-size: 9.5px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--terracotta);
}

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 18px;
}
.eyebrow.center, .center { text-align: center; }
.eyebrow.center { margin-left: auto; margin-right: auto; }

.serif-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.4px;
}
.serif-heading em { font-style: italic; color: var(--terracotta); }
.serif-heading.light { color: var(--ivory); }
.serif-heading.light em { color: var(--peach); }
.serif-heading.center { text-align: center; margin: 0 auto; }

.payoff {
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 21px);
  margin-top: 34px;
}
.payoff em { font-style: italic; color: var(--terracotta); }
.payoff.light { color: var(--ivory); }
.payoff.light em { color: var(--peach); }
.payoff.center { text-align: center; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.wrap.narrow { max-width: 760px; }

section { position: relative; }
.band-ivory { background: var(--ivory); padding: clamp(64px, 9vw, 104px) 0; }
.band-tint { background: var(--ivory-tint); padding: clamp(64px, 9vw, 104px) 0; }
.band-terracotta { background: var(--terracotta); padding: clamp(64px, 9vw, 100px) 0; }
.band-ink { background: var(--ink); padding: clamp(72px, 11vw, 128px) 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; border: none;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 16px 34px; border-radius: var(--radius-pill);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn-primary {
  background: var(--terracotta); color: var(--ivory);
  box-shadow: 0 8px 22px rgba(158, 85, 55, 0.22);
}
.btn-primary:hover { background: var(--terracotta-deep); transform: translateY(-2px); }
.btn-lg { padding: 19px 44px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------- Blobs & motifs ---------- */
.blob { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.blob-peach {
  bottom: -30px; right: -30px; width: 220px; height: 220px;
  background: var(--peach); z-index: 0;
}
.blob-ink {
  top: 50%; right: -120px; width: 320px; height: 320px;
  transform: translateY(-50%);
  background: var(--terracotta); opacity: .16;
}
.leaf-motif { display: none; }

/* ---------- 1 · Hero ---------- */
.hero {
  background: var(--ivory);
  padding: clamp(28px, 4vw, 52px) 0 clamp(64px, 8vw, 96px);
  overflow: hidden;
}
.hero-inner {
  position: relative; z-index: 3; max-width: 760px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
  text-align: center;
}
.hero .eyebrow {
  display: inline-block; margin: 0 auto 22px;
  background: rgba(183,102,67,.09); border: 1px solid rgba(183,102,67,.28);
  padding: 8px 16px; border-radius: var(--radius-pill);
}
.hero-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 6vw, 60px); line-height: 1.08;
  letter-spacing: -1px; margin: 0 auto 24px;
}
.hero-title em { font-style: italic; color: var(--terracotta); }
.hero-sub { max-width: 52ch; margin: 0 auto; font-size: clamp(16px, 1.9vw, 18px); color: rgba(41,25,17,.86); }

.hero-video-wrap { position: relative; margin: 40px auto 34px; max-width: 680px; width: 100%; }
.video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: linear-gradient(160deg, #2f2015, var(--ink));
  border: 2px solid var(--terracotta); border-radius: var(--radius-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
}
.video-el {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.video-play {
  position: relative; z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--terracotta); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.3); transition: background .22s ease, transform .22s ease, opacity .22s ease;
}
.video:hover .video-play { background: var(--terracotta-deep); transform: scale(1.05); }
.video-note {
  position: absolute; z-index: 2; bottom: 50px; left: 0; right: 0;
  text-align: center; font-size: 11px; color: rgba(249,245,237,.75); padding: 0 16px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  transition: opacity .22s ease;
}
.video.is-playing .video-play,
.video.is-playing .video-note { opacity: 0; pointer-events: none; }
.video::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  transition: opacity .22s ease;
}
.video.is-playing::before { opacity: .35; }

.cta-block { margin-top: 26px; text-align: center; }
.microcopy { margin-top: 14px; font-size: 13px; letter-spacing: .3px; color: rgba(41,25,17,.6); }
.microcopy.center { text-align: center; }

/* ---------- 2 · Empathy ---------- */
.empathy { text-align: center; }
.empathy .serif-heading { margin-bottom: 34px; }
.dot-list { list-style: none; max-width: 640px; margin: 0 auto; text-align: left; }
.dot-list li {
  position: relative; padding-left: 26px; margin-bottom: 15px;
  color: rgba(249,245,237,.94); font-size: clamp(15px, 1.9vw, 17px);
}
.dot-list li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ivory);
}

/* ---------- 3 · What you'll practise ---------- */
.practise .serif-heading { margin-bottom: 48px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--ivory-tint); border: 1px solid rgba(183,102,67,.14);
  border-radius: var(--radius-card); padding: 34px 28px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(41,25,17,.08); }
.ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--terracotta); color: var(--terracotta);
  font-family: var(--serif); font-size: 18px; margin-bottom: 18px;
}
.card-title { font-family: var(--serif); font-weight: 500; font-size: 24px; margin-bottom: 12px; }
.card p { font-size: 15px; color: rgba(41,25,17,.82); }

/* ---------- 4 · Who it is / isn't for ---------- */
.whofor .serif-heading { margin-bottom: 44px; }
.whofor-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.whofor-card {
  background: var(--ivory); border-radius: var(--radius-card);
  padding: 34px 32px; border: 1px solid rgba(41,25,17,.06);
  box-shadow: 0 8px 24px rgba(41,25,17,.05);
}
.col-title { font-family: var(--serif); font-weight: 500; font-size: 21px; margin-bottom: 20px; }
.whofor-card.notfor .col-title { color: var(--terracotta); }
.check-list, .cross-list { list-style: none; }
.check-list li, .cross-list li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: 15.5px; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #3f7d54; font-weight: 700;
}
.cross-list li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--terracotta); font-weight: 700;
}
.closing-line { margin-top: 20px; font-family: var(--serif); font-style: italic; color: var(--terracotta); }

/* ---------- 5 · Testimonials ---------- */
.light-eyebrow { color: var(--peach); }
.testimonials .serif-heading { margin-bottom: 44px; }
.quote-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote-card {
  background: var(--terracotta-deep); color: var(--ivory);
  border-radius: var(--radius-card); padding: 34px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.quote-card p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; margin-bottom: 20px; }
.quote-card cite { font-style: normal; font-size: 13px; letter-spacing: .5px; color: rgba(249,245,237,.75); }

/* ---------- 6 · About ---------- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.about-photo { position: relative; display: flex; justify-content: center; }
.portrait-frame {
  position: relative; z-index: 1; width: 100%; max-width: 360px;
  aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 20px 50px rgba(41,25,17,.16);
}
.portrait-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;
  display: block;
}
.about-text .serif-heading { margin: 10px 0 20px; }
.about-text p { margin-bottom: 18px; color: rgba(41,25,17,.86); }
.about-quote { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--terracotta); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.chip {
  border: 1px solid var(--terracotta); color: var(--terracotta);
  border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; font-weight: 500;
}

/* ---------- 7 · Final CTA ---------- */
.final-cta { overflow: hidden; }
.final-cta .wrap { position: relative; z-index: 2; }
.final-leadin { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 22px); color: var(--peach); margin-bottom: 14px; }
.final-hook { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6vw, 62px); color: var(--ivory); letter-spacing: -1px; line-height: 1.05; }
.final-detail { color: rgba(249,245,237,.72); margin: 18px 0 32px; font-size: 15px; letter-spacing: .4px; }
.reassurance { max-width: 44ch; margin: 28px auto 0; color: rgba(249,245,237,.62); font-size: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); padding: 0 0 40px; text-align: center; }
.site-footer p { color: rgba(249,245,237,.4); font-size: 12.5px; letter-spacing: .4px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(249,245,237,.94); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(183,102,67,.2);
  transform: translateY(120%); transition: transform .3s ease;
  display: none;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(41,25,17,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  position: relative; background: var(--ivory);
  border-radius: 22px; padding: clamp(30px, 5vw, 46px);
  width: 100%; max-width: 460px;
  box-shadow: 0 30px 80px rgba(41,25,17,.35);
  animation: pop .3s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 16px; right: 18px; background: none; border: none;
  font-size: 30px; line-height: 1; color: rgba(41,25,17,.4); cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.leaf-motif.small { position: static; display: block; margin-bottom: 12px; }
.modal-title { font-family: var(--serif); font-weight: 500; font-size: 27px; margin-bottom: 6px; }
.modal-title em { font-style: italic; color: var(--terracotta); }
.modal-sub { font-size: 14px; color: rgba(41,25,17,.6); margin-bottom: 26px; }
#signupForm label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .3px; margin-bottom: 16px; color: var(--ink); }
.optional { font-weight: 400; color: rgba(41,25,17,.45); }
#signupForm input, #signupForm select {
  width: 100%; margin-top: 7px; padding: 13px 15px;
  border: 1px solid rgba(41,25,17,.18); border-radius: 12px;
  /* 16px keeps iOS Safari from auto-zooming the page on focus */
  font-family: var(--sans); font-size: 16px; color: var(--ink); background: #fff;
}
#signupForm input:focus, #signupForm select:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: transparent; }
#signupForm .btn { margin-top: 8px; }

.modal-success-state { text-align: center; }
.success-mark { font-size: 40px; display: block; margin-bottom: 14px; }
.success-copy { color: rgba(41,25,17,.82); margin: 14px 0 18px; }
.success-sign { font-family: var(--serif); color: var(--terracotta); font-size: 18px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .cards-3, .quote-cards { grid-template-columns: 1fr; }
  .whofor-cols { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-photo { max-width: 340px; margin: 0 auto; order: -1; }
  .blob-hero { width: 320px; height: 320px; top: -40px; right: -110px; }
}
@media (max-width: 640px) {
  .sticky-cta { display: block; }
  .hero-title { font-size: clamp(30px, 9vw, 42px); }
  /* Reserve room so the sticky CTA never covers the footer */
  .site-footer { padding-bottom: 96px; }
  /* Leaf motif would collide with the headline on narrow screens */
  .leaf-motif { display: none; }
  .blob-hero { width: 260px; height: 260px; top: -30px; right: -120px; opacity: .8; }
  .hero-video-wrap { margin-bottom: 44px; }
}