/* ============================================================
   Meditation Teacher Marketing Long Island — landing page
   Design tokens (from the brand design system) + custom styling
   layered on top of Bootstrap 5.
   ============================================================ */

:root {
  /* ---- Sage (brand primary) ---- */
  --sage-50:#f4f6f1; --sage-100:#e6ebde; --sage-200:#cdd8bd; --sage-300:#aec096;
  --sage-400:#8ba473; --sage-500:#6c8753; --sage-600:#566d42; --sage-700:#445536;
  --sage-800:#37432c; --sage-900:#2c3624;

  /* ---- Clay (accent / CTA) ---- */
  --clay-50:#fbf3ee; --clay-100:#f5e2d4; --clay-200:#eac3a3; --clay-300:#dda077;
  --clay-400:#cf7f52; --clay-500:#bd6a3d; --clay-600:#9c5330; --clay-700:#7c4127;
  --clay-800:#613321; --clay-900:#4c291c;

  /* ---- Seaglass (coastal accent) ---- */
  --seaglass-50:#eef4f2; --seaglass-100:#dfebe7; --seaglass-200:#bcd6cd;
  --seaglass-300:#94bcb0; --seaglass-400:#6fa294; --seaglass-500:#4d7a6d;
  --seaglass-600:#3c6255; --seaglass-700:#2f4d43;

  /* ---- Sand (neutral surfaces) ---- */
  --sand-50:#fdfcfa; --sand-100:#faf7f1; --sand-200:#f3ede1; --sand-300:#e8dfcd;
  --sand-400:#d3c6a8; --sand-500:#b8a988;

  /* ---- Ink (text) ---- */
  --ink-900:#23291f; --ink-800:#2f362a; --ink-700:#43493d; --ink-500:#6b7263;
  --ink-300:#a3aa98; --ink-100:#dde1d6;

  /* ---- Semantic aliases ---- */
  --surface-page:var(--sand-50);
  --surface-card:#ffffff;
  --surface-sunken:var(--sand-100);
  --border-subtle:var(--sand-300);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-link:var(--sage-700);

  /* ---- Type ---- */
  --font-serif-display:"Lora","Iowan Old Style","Palatino Linotype",serif;
  --font-sans-body:"Public Sans","Segoe UI",system-ui,sans-serif;
  --text-base:1.125rem; --text-md:1.375rem; --text-lg:1.75rem;
  --text-xl:2.25rem; --text-2xl:3rem; --text-3xl:3.75rem;
  --leading-tight:1.1; --leading-relaxed:1.7;

  /* ---- Effects ---- */
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(44,54,36,.06),0 1px 2px rgba(44,54,36,.04);
  --shadow-md:0 8px 24px rgba(44,54,36,.08),0 2px 6px rgba(44,54,36,.05);
  --shadow-lg:0 20px 48px rgba(44,54,36,.12),0 4px 12px rgba(44,54,36,.06);
  --ease-calm:cubic-bezier(0.22,0.61,0.36,1);
  --duration-fast:160ms; --duration-base:280ms;

  --section-padding-y:96px;

  /* Map Bootstrap's link + focus colors onto the brand */
  --bs-link-color:var(--sage-700);
  --bs-link-hover-color:var(--sage-800);
}

/* ---- Base ---- */
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--surface-page);
  color:var(--text-secondary);
  font-family:var(--font-sans-body);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
h1,h2,h3,h4 { font-family:var(--font-serif-display); color:var(--text-primary); font-weight:600; }
h1,h2 { text-wrap:balance; }
img { max-width:100%; }

.serif { font-family:var(--font-serif-display); }
.eyebrow {
  font-family:var(--font-sans-body); font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.section-pad { padding:var(--section-padding-y) 0; }
/* Centered content columns with responsive side gutters (like Bootstrap's
   .container). Without margin-auto + padding, content hugs the viewport edge. */
.container-page, .container-wide {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:1.5rem;
  padding-right:1.5rem;
}
.container-page { max-width:1160px; }
.container-wide { max-width:1300px; }
@media (min-width:768px){
  .container-page, .container-wide { padding-left:2rem; padding-right:2rem; }
}
@media (min-width:992px){
  .container-page, .container-wide { padding-left:3rem; padding-right:3rem; }
}

/* ---- Accessible focus rings on brand ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus, .form-select:focus {
  outline:3px solid var(--seaglass-300);
  outline-offset:2px;
  box-shadow:none;
}
.form-control:focus, .form-select:focus {
  border-color:var(--sage-400);
  outline-offset:0;
}

/* ---- Skip link ---- */
.skip-link {
  position:absolute; left:12px; top:-60px; z-index:1200;
  background:var(--sage-700); color:#fff; padding:10px 18px;
  border-radius:var(--radius-pill); text-decoration:none;
  transition:top var(--duration-fast) var(--ease-calm);
}
.skip-link:focus { top:12px; color:#fff; }

/* ============================================================
   Buttons — pill CTAs from the design system
   ============================================================ */
.btn { font-family:var(--font-sans-body); font-weight:600; border-radius:var(--radius-pill);
  transition:background-color var(--duration-fast) var(--ease-calm),
             transform var(--duration-fast) var(--ease-calm); }
.btn:active { transform:scale(.97); }

.btn-clay { background:var(--clay-500); color:#fff; border:1px solid var(--clay-500); }
.btn-clay:hover, .btn-clay:focus { background:var(--clay-600); border-color:var(--clay-600); color:#fff; }

.btn-sage { background:var(--sage-600); color:#fff; border:1px solid var(--sage-600); }
.btn-sage:hover, .btn-sage:focus { background:var(--sage-700); border-color:var(--sage-700); color:#fff; }

.btn-lg { padding:16px 30px; font-size:1.05rem; }
.btn-sm { padding:9px 20px; font-size:.95rem; }

/* ============================================================
   Nav
   ============================================================ */
.wlp-nav {
  background:rgba(253,252,250,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
}
.wlp-brand { font-family:var(--font-serif-display); font-size:1.2rem; font-weight:600;
  color:var(--text-primary); line-height:1.15; }
.wlp-brand-sub { font-size:.72rem; color:var(--text-muted); letter-spacing:.02em; }
.wlp-nav .nav-link { color:var(--text-secondary); font-weight:500; }
.wlp-nav .nav-link:hover { color:var(--sage-700); }

/* ============================================================
   Cards
   ============================================================ */
.wlp-card {
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:32px; height:100%;
}
.wlp-card h3 { font-size:1.25rem; margin-bottom:10px; }
.wlp-card p { font-size:1.0625rem; color:var(--text-secondary); line-height:1.6; margin:0; }
.icon-lg { width:26px; height:26px; margin-bottom:16px; display:block; }

.link-arrow { color:var(--text-link); font-weight:600; text-decoration:none; font-size:.95rem; }
.link-arrow:hover { color:var(--sage-800); }

/* Feature check lists */
.check-list { display:flex; flex-direction:column; gap:12px; }
.check-item { display:flex; align-items:flex-start; gap:10px;
  font-size:1.0625rem; color:var(--text-secondary); line-height:1.4; }
.check-item .lucide { flex-shrink:0; margin-top:3px; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position:relative; overflow:hidden; padding:88px 0 72px; min-height:620px;
  display:flex; align-items:center; }
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 45%; filter:saturate(.95) sepia(.02) contrast(1.02); }
.hero__scrim { position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(15,15,14,.82) 0%,rgba(15,15,14,.58) 35%,
    rgba(15,15,14,.24) 55%,rgba(15,15,14,.08) 70%); }
.hero__eyebrow { color:var(--seaglass-200); }
.hero h1 { color:var(--sand-50); font-size:var(--text-3xl); line-height:var(--leading-tight);
  max-width:620px; }
.hero__lede { color:rgba(255,255,255,.88); font-size:var(--text-base); max-width:480px; }

.review-card { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:32px; }
.review-card h2 { font-size:1.5rem; margin-bottom:20px; }
.review-badge { display:flex; align-items:center; justify-content:center; width:30px;
  height:30px; border-radius:50%; flex-shrink:0; }

/* ============================================================
   Trust strip
   ============================================================ */
.trust-strip { background:var(--sage-900); padding:30px 0; }
.trust-item { display:flex; align-items:center; gap:14px; color:var(--sand-50);
  font-size:1.0625rem; padding:0 20px; }
.trust-item .lucide { color:var(--seaglass-300); flex-shrink:0; }
@media (min-width:768px){
  .trust-item.trust-border { border-right:1px solid rgba(255,255,255,.14); }
}

/* ============================================================
   Section headers
   ============================================================ */
.section-title { font-size:var(--text-2xl); margin-bottom:14px; }
.section-lede { font-size:var(--text-base); color:var(--text-secondary);
  line-height:var(--leading-relaxed); }
.italic-serif { font-family:var(--font-serif-display); font-style:italic; }

/* Split image panels */
.media-panel { position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-lg); }
.media-panel img { width:100%; height:100%; object-fit:cover; display:block; }
.media-panel__tint { position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  pointer-events:none; }

/* Photo band */
.photo-band { position:relative; height:300px; overflow:hidden; }
.photo-band img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 28%; filter:saturate(.95) sepia(.05) contrast(1.02); }
.photo-band__scrim { position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(20,30,22,.53),rgba(20,30,22,.21)); }
.photo-band__text { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:0 24px; }
.photo-band__text p { font-family:var(--font-serif-display); font-style:italic;
  font-size:var(--text-xl); color:var(--sand-50); margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.25); }

/* ============================================================
   Process steps
   ============================================================ */
.process-num { font-family:var(--font-serif-display); font-style:italic; font-size:1.875rem;
  color:var(--sage-300); margin-bottom:12px; }
.process-step h3 { font-size:1.375rem; margin-bottom:8px; }
.process-step p { font-size:1rem; color:var(--text-secondary); line-height:1.6; margin:0; }

/* ============================================================
   Sample-plan mock (proof of work)
   ============================================================ */
.plan-mock { position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-subtle);
  background:linear-gradient(165deg,var(--sand-50) 0%,var(--surface-card) 22%);
  box-shadow:var(--shadow-lg); padding:28px 28px 24px; }
.plan-mock__dots { position:absolute; inset:0; opacity:.28; pointer-events:none;
  background-image:radial-gradient(circle,var(--sand-500) .9px,transparent .9px);
  background-size:16px 16px; }
.plan-pill { display:inline-block; font-family:var(--font-sans-body); font-size:.66rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--clay-600);
  background:var(--clay-100); padding:4px 9px; border-radius:999px; }
.plan-label { font-family:var(--font-sans-body); font-size:.69rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; }
.plan-tag { font-size:.75rem; color:var(--seaglass-700); background:var(--seaglass-100);
  padding:5px 11px; border-radius:999px; }
.bar { height:9px; border-radius:3px; display:inline-block; }

/* ============================================================
   Forms
   ============================================================ */
.form-card { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:32px; }
.form-label { font-size:.9rem; font-weight:600; color:var(--text-secondary);
  font-family:var(--font-sans-body); margin-bottom:8px; }
.form-control, .form-select {
  font-family:var(--font-sans-body); font-size:1.0625rem; color:var(--text-primary);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:13px 16px;
}
.form-control::placeholder { color:var(--ink-300); }
.honeypot { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Required-field asterisk + brand-tinted validation */
.req { color:var(--clay-500); font-weight:700; }
.invalid-feedback { color:var(--clay-600); font-size:.9rem; }
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color:var(--clay-500);
  background-image:none;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  outline:3px solid var(--clay-200);
  border-color:var(--clay-500);
}
/* Only surface errors — don't paint valid fields green (avoids a stray
   check mark on the optional Website field after a failed submit). */
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
  border-color:var(--border-subtle);
  background-image:none;
}

.form-status { border-radius:var(--radius-md); padding:14px 18px; font-size:1rem; margin-top:4px; }
.form-status--ok { background:var(--sage-100); color:var(--sage-800); }
.form-status--err { background:var(--clay-100); color:var(--clay-700); }

.form-success { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:40px; text-align:center; }

/* ============================================================
   FAQ accordion (brand-styled Bootstrap accordion)
   ============================================================ */
.accordion { --bs-accordion-border-color:var(--border-subtle);
  --bs-accordion-active-bg:var(--sand-100); --bs-accordion-active-color:var(--text-primary);
  --bs-accordion-btn-focus-box-shadow:0 0 0 3px var(--seaglass-200);
  --bs-accordion-color:var(--text-secondary); --bs-accordion-bg:transparent; }
.accordion-button { font-family:var(--font-serif-display); font-size:1.15rem;
  color:var(--text-primary); font-weight:600; }
.accordion-button:not(.collapsed) { color:var(--text-primary); box-shadow:none; }
.accordion-body { font-size:1.0625rem; color:var(--text-secondary); line-height:1.6; }

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta { position:relative; overflow:hidden; padding:64px 0; background:var(--sage-900); }
.final-cta img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.25; filter:saturate(.9) sepia(.05); }
.final-cta__scrim { position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(44,54,36,.55),rgba(44,54,36,.68)); }
.final-cta h2 { color:var(--sand-50); font-size:var(--text-2xl); }
.final-cta p { color:var(--sage-200); font-size:var(--text-base); }

/* ============================================================
   Footer
   ============================================================ */
.wlp-footer { padding:44px 0 32px; background:var(--surface-page);
  border-top:1px solid var(--border-subtle); color:var(--text-muted); }
.wlp-footer a { color:var(--text-link); text-decoration:none; }
.wlp-footer a:hover { color:var(--sage-800); }
.wlp-footer .foot-brand { font-family:var(--font-serif-display); font-size:1.125rem;
  font-weight:600; color:var(--text-primary); }

/* ============================================================
   Section background helpers
   ============================================================ */
.bg-sunken { background:var(--surface-sunken); }
.bg-sand50 { background:var(--sand-50); }
.bg-sage50 { background:var(--sage-50); }

/* ---- Below iPad (mobile): non-sticky header + darker hero overlay ---- */
@media (max-width:767.98px){
  /* Header should scroll away with the page, not stick */
  .wlp-nav.sticky-top { position:static; top:auto; }
  /* Darken the hero scrim so the white headline stays legible on small screens */
  .hero__scrim {
    background:linear-gradient(180deg, rgba(15,15,14,.80) 0%, rgba(15,15,14,.66) 60%, rgba(15,15,14,.60) 100%);
  }
}

/* ---- Responsive type scaling ---- */
@media (max-width:991px){
  :root { --text-3xl:2.75rem; --text-2xl:2.25rem; --text-xl:1.875rem; --section-padding-y:64px; }
}
@media (max-width:575px){
  :root { --text-3xl:2.25rem; --text-2xl:1.875rem; }
  .hero { min-height:auto; padding:64px 0 48px; }
  .wlp-card, .review-card, .form-card { padding:24px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}