/* Stress Burner theme */
/* Local Walkway font faces (replacing Raleway) */
@font-face{
  font-family:"Walkway";
  src:url('../fonts/Walkway rounded.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Walkway";
  src:url('../fonts/Walkway SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Walkway";
  src:url('../fonts/Walkway Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Walkway";
  src:url('../fonts/Walkway Black.ttf') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
:root{
  --sb-red:#9A0C0C; /* deep red */
  --sb-charcoal:#333333;
  --sb-warm:#F6F3F1;
  --sb-gold:#B68A5A;
  --sb-green:#6F8D7B;
  --sb-ink:#3b2e2e; /* warm ink */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--sb-ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;font-size:18px}
/* Screen reader only - visually hidden but accessible */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Ensure media doesn't overflow horizontally on small screens */
img,svg,video{max-width:100%;height:auto}
html{min-height:100%;background:var(--sb-warm) !important}
h1,h2,h3,h4{font-family:"Walkway", Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; font-weight:600; letter-spacing:.02em; color:var(--sb-ink); margin:0 0 .5rem}
p{line-height:1.8;margin:.5rem 0 1rem}
a{color:var(--sb-red);text-decoration:none}
a:hover{text-decoration:underline}

/* Page background: soft warm wash */
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(182,138,90,.15), transparent 60%),
    radial-gradient(800px 400px at 120% 10%, rgba(111,141,123,.12), transparent 40%),
    var(--sb-warm);
}

main{flex:1}

.container{max-width:1140px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:860px; margin-left:auto; margin-right:auto}

/* Header */
.sb-header{
  /* Neumorphic header: soft dual shadows that appear as you scroll */
  --hdr-s: var(--header-shadow, 0);
  /* Unified pill dimensions for brand and nav items */
  --nav-pill-height: 44px;    /* total height INCLUDING padding (box-sizing: border-box) */
  --nav-pill-py: 8px;         /* top/bottom padding */
  --nav-pill-px: 14px;        /* left/right padding */
  background: transparent; /* island is now applied to the inner content width */
  position:relative; z-index:10;
  box-shadow: none;
  transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
/* Fixed clone header that appears when scrolling up mid-page */
.sb-header.sb-header--fixed{ position:fixed; top:0; left:0; right:0; z-index:20; transform:translateY(-100%); will-change: transform; pointer-events:none; transition: transform .24s ease }
.sb-header.sb-header--fixed.is-visible{ transform:translateY(0); pointer-events:auto }
/* Utility to disable transition for instant swap at top */
.sb-header.sb-header--fixed.no-anim{ transition: none !important }
/* Prevent brief drop-shadow flash on icon during instant swap */
.sb-header.sb-header--fixed.no-anim .logo-icon{ filter: none !important }
/* While the fixed header is animating at the true top, neutralize any compositing effects */
.sb-header.sb-header--fixed.is-top-animating{ isolation:isolate }
/* During top-animating/instant-swap, suppress only logo/text drop-shadow filters (keep nav/link shadows and header borders) */
.sb-header.sb-header--fixed.is-top-animating .brand .logo-icon,
.sb-header.sb-header--fixed.is-top-animating .brand .logo-text,
.sb-header.sb-header--fixed.no-anim .brand .logo-icon,
.sb-header.sb-header--fixed.no-anim .brand .logo-text{
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
}
/* Fade-out state for fixed header: gently remove island background/blur/shadows before swapping */
.sb-header.sb-header--fixed.is-fading{ pointer-events:none }
.sb-header.sb-header--fixed.is-fading .header-inner{
  background: rgba(246,243,241, 0) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color .22s ease, box-shadow .22s ease, backdrop-filter .22s ease !important;
}
/* Hide normal in-flow header visually (keep space) when fixed clone is visible */
.sb-header.is-invisible{ visibility:hidden }
/* Rounded pill island confined to header content width (container) */
.sb-header .header-inner{
  border-radius: 999px;
  padding: 8px 14px; /* space so rounded nav hovers don't touch edges */
  background: rgba(246,243,241, calc(.9 * var(--hdr-s))); /* slightly more opaque on scroll */
  backdrop-filter: blur(calc(8px * var(--hdr-s))) saturate(1.05);
  -webkit-backdrop-filter: blur(calc(8px * var(--hdr-s))) saturate(1.05);
  box-shadow:
    -8px -8px 18px rgba(0,0,0, calc(.06 * var(--hdr-s))),
    8px 8px 18px rgba(0,0,0, calc(.10 * var(--hdr-s))),
    inset 0 1px 0 rgba(255,255,255, calc(.45 * var(--hdr-s))),
    inset 0 -1px 0 rgba(0,0,0, calc(.06 * var(--hdr-s)));
  transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
/* Fixed clone: keep a constant background opacity instead of fading with --hdr-s near the top */
.sb-header.sb-header--fixed .header-inner{ background: rgba(246,243,241,.92) }
/* Start transparent at top of home and let JS animate variables */
.page-home .sb-header{ --header-bg: 0; --header-blur: 0px; --header-border: 0 }
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Brand link: remove underline; hover matches nav pill neuromorphism */
.brand{ text-decoration:none }
.brand:hover, .brand:focus, .brand:focus-visible{ text-decoration:none }
.brand .logo{
  --logo-icon-size: calc(var(--nav-pill-height) - (2 * var(--nav-pill-py)));
  display:inline-flex;align-items:center;gap:10px;
  height: var(--nav-pill-height);
  padding: var(--nav-pill-py) var(--nav-pill-px);
  border-radius:999px;background:transparent;box-shadow:none;
  /* Smooth hover like other nav items */
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease
}
.brand:hover .logo, .brand:focus-visible .logo{background:var(--sb-warm);box-shadow:-6px -6px 14px rgba(255,255,255,.85), 6px 6px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.05)}
.brand:active .logo{transform:translateY(1px);box-shadow: inset 6px 6px 14px rgba(0,0,0,.14), inset -6px -6px 14px rgba(255,255,255,.25)}
/* Keyboard focus ring parity with .nav-link */
.brand:focus-visible .logo{ outline:2px solid var(--sb-red); outline-offset:2px; border-radius:999px }
/* Ensure no inner element drop-shadows on hover for brand */
.brand:hover .logo-icon, .brand:focus-visible .logo-icon,
.brand:hover .logo-text, .brand:focus-visible .logo-text,
.brand:active .logo-icon, .brand:active .logo-text{ filter:none !important }
.brand .logo-icon, .brand .logo-text{ transition: filter .22s ease }
.brand .logo-icon{height:var(--logo-icon-size);width:auto;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.75))}
.brand .logo-text{display:flex;flex-direction:column;line-height:1}
.brand .logo-line{font-family:"Walkway", Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; font-weight:600; text-transform:none; letter-spacing:.02em; color:var(--sb-ink); font-size: clamp(16px, calc(var(--logo-icon-size) / 1.5), 24px); transition: color .18s ease }

.nav{display:flex;gap:var(--nav-gap, 18px);flex-wrap:wrap;--nav-gap:18px}
/* Rounded pill nav items with soft neuromorphic hover; no underline */
.nav-link{
  color:var(--sb-ink);
  font-weight:600;
  display:inline-flex;align-items:center;
  height: var(--nav-pill-height);
  padding: var(--nav-pill-py) var(--nav-pill-px);
  text-decoration:none;
  border-radius:999px;
  position:relative;
  z-index:0;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.nav-link:hover,
.nav-link.active{
  background:var(--sb-warm);
  box-shadow:-6px -6px 14px rgba(255,255,255,.85), 6px 6px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.05);
  text-decoration:none;
}
.nav-link:active{ transform: translateY(1px); box-shadow: inset 6px 6px 14px rgba(0,0,0,.14), inset -6px -6px 14px rgba(255,255,255,.25) }
/* Neutralize previous underline/rectangle background approach */
.nav-link::before{ content:none !important; }
.nav-link:focus-visible{outline:2px solid var(--sb-red);outline-offset:2px;border-radius:999px}
.nav-toggle{display:none;background:var(--sb-warm);border:0;font-size:26px;line-height:1;padding:10px;margin-left:auto;border-radius:12px;box-shadow:-6px -6px 14px rgba(255,255,255,.85), 6px 6px 14px rgba(0,0,0,.08)}
.nav-toggle:focus-visible{outline:2px solid var(--sb-red);outline-offset:2px;border-radius:8px}

/* Hero */
/* Constrain hero visuals to the same width as primary content by moving background to the inner .container */
.hero{position:relative;isolation:isolate;margin-top:24px}
/* Layered backgrounds: foreground (1) over background (0) */
.hero .container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:1280px;min-height:calc(100svh - 64px - 24px - 24px);padding:calc(48px + 64px) 0 96px;background-image:none;overflow:hidden;z-index:0;border-radius:36px;background-color:var(--sb-warm);background-clip:padding-box;box-shadow: -16px -16px 36px rgba(255,255,255,.85), 16px 16px 36px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06)}
.hero .container::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(80% 60% at 50% 45%, rgba(255,255,255,.24), rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 75%);z-index:-1}
/* Individual hero image layers for animation & parallax */
.hero .bg-layer{position:absolute;inset:0;--base-scale:1.06;--scroll-y:0px;--scroll-x:0px;transform:scale(var(--base-scale)) translate3d(var(--scroll-x), var(--scroll-y), 0);transform-origin:50% 50%;background-position:center center;background-repeat:no-repeat;background-size:cover;pointer-events:none;opacity:0;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero .bg-layer.bg-0{
  background-image:url('../images/hero-background-layer-0.png');
  background-image:image-set(
    url('../images/hero-background-layer-0.webp') type('image/webp') 1x,
    url('../images/hero-background-layer-0.png') type('image/png') 1x
  );
  z-index:-3;animation:fadeInOpacity .45s ease-out .02s both
}
.hero .bg-layer.bg-1{
  background-image:url('../images/hero-background-layer-1.png');
  background-image:image-set(
    url('../images/hero-background-layer-1.webp') type('image/webp') 1x,
    url('../images/hero-background-layer-1.png') type('image/png') 1x
  );
  z-index:-2;animation:fadeInOpacity .5s ease-out .08s both
}
/* Inline-placed flowers SVG overlay (injected via JS) */
.hero .flowers-layer{position:absolute;inset:0;pointer-events:none;z-index:0;display:block;overflow:hidden;opacity:0;animation:fadeInOpacity .55s ease-out .12s both;will-change:transform,opacity;--scroll-y:0px;--scroll-x:0px;--flower-scale:1.06;transform:scale(var(--flower-scale)) translate3d(var(--scroll-x, 0px), var(--scroll-y), 0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* Match PNG background scaling: width fits container, height auto; overflow hidden clips excess */
.hero .flowers-layer svg{position:absolute;inset:0;transform:none;width:100%;height:100%;display:block}
/* Removed continuous SVG float animation for a calmer hero; parallax remains */
/* Ensure hero content sits above the overlay */
.hero .container > *:not(.flowers-layer):not(.bg-layer){position:relative;z-index:1}
/* Color the flowers via CSS without editing the SVG file */
.hero .flowers-layer svg path,
.hero .flowers-layer svg line,
.hero .flowers-layer svg polyline,
.hero .flowers-layer svg rect,
.hero .flowers-layer svg circle,
.hero .flowers-layer svg ellipse,
.hero .flowers-layer svg polygon{
  stroke: #af9c8817 !important;
  fill: #ffcf51 !important;
  stroke-width: 1px;
}
.hero .lotus{width:72px;height:auto;opacity:.9;margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(154,12,12,.15))}
.tag{color:var(--sb-gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font-size:68px;letter-spacing:.02em;text-transform:none;line-height:1.06;margin:.3rem 0 0.4rem;text-shadow:0 2px 12px rgba(0,0,0,.08)}
.hero p{max-width:920px;font-size:1.1rem;opacity:.9}
.hero .subtitle{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:#6a3e3e;font-style:italic;font-weight:600;letter-spacing:.02em;margin-top:.25rem;margin-bottom:.5rem;font-size:1.35rem}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--sb-red);color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;letter-spacing:.01em;line-height:1;text-decoration:none;border:0;min-height:44px;outline:none;
  box-shadow: -4px -4px 10px rgba(255,255,255,.35), 6px 6px 14px rgba(154,12,12,.28), inset 0 1px 0 rgba(255,255,255,.20);
  transition: box-shadow .2s ease, background-color .18s ease, transform .12s ease, filter .2s ease;
}
.btn:hover{box-shadow: -8px -8px 16px rgba(255,255,255,.45), 10px 10px 22px rgba(154,12,12,.34), inset 0 1px 0 rgba(255,255,255,.24); background-color:#8e0f0f; filter:saturate(115%); text-decoration:none}
/* Smoothly animate into the pressed state (also toggled by JS with .is-pressed) */
.btn:active, .btn.is-pressed{transform:translateY(2px); box-shadow: inset 5px 5px 12px rgba(0,0,0,.22), inset -5px -5px 12px rgba(255,255,255,.24)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 3px rgba(154,12,12,.35)}
.btn.secondary{background:var(--sb-warm);color:var(--sb-red);border:0;box-shadow:-8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.05);transition: box-shadow .22s ease, transform .12s ease, background-color .18s ease}
.btn.secondary:hover{box-shadow:-12px -12px 24px rgba(255,255,255,.92), 12px 12px 24px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.54), inset 0 -1px 0 rgba(0,0,0,.06)}
.btn.secondary:active, .btn.secondary.is-pressed{transform:translateY(2px); box-shadow: inset 6px 6px 14px rgba(0,0,0,.14), inset -6px -6px 14px rgba(255,255,255,.25)}
/* Compact button size variant */
.btn.small{ padding:10px 16px; min-height:40px; font-size:.95rem }
/* Icon inside buttons */
.btn .icon{ width:18px; height:18px; display:block }

/* Minimal white outline button for dark hero */
.btn.ghost-white{ background:transparent; color:#fff; border:2px solid #fff; box-shadow:none }
.btn.ghost-white:hover{ background: rgba(255,255,255,.12); color:#fff; box-shadow:none }
.btn.ghost-white:active{ transform: translateY(2px) }
.btn.ghost-white:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.btn.ghost-white .icon{ width:22px; height:22px; filter: brightness(0) invert(1) }

/* Sections */
.section{padding:72px 0}
.title-hero{ margin-top:24px }
/* Remove top padding for the course title hero so it sits flush under the nav */
.title-hero.section{ padding-top: 0; padding-bottom: 0 }
.section-intro{margin:-8px 0 28px 0;text-align:center}
.section-intro .eyebrow{color:var(--sb-gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;display:block;margin-bottom:.25rem}
.section-intro h2{font-size:40px;line-height:1.1;margin:0 0 .4rem}
.section-intro p{max-width:780px;margin:0 auto;opacity:.9}
/* Course title hierarchy within section-intro */
.section-intro .course-title{font-size:52px;line-height:1.08;margin:0 0 .3rem}
.section-intro .course-kicker{font-size:22px;font-weight:600;letter-spacing:.01em;margin:.05rem 0 .6rem;color:var(--sb-ink);opacity:.95}
/* Left-aligned editorial variant */
.section-intro.align-left{text-align:left}
.section-intro.align-left p{margin-left:0}
.section-intro.align-left h2{position:relative;padding-bottom:8px}
.section-intro.align-left h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;background:var(--sb-gold)}
.lede{font-family:"Playfair Display", Georgia, serif;font-size:1.35rem;line-height:1.6;color:#6a3e3e;opacity:.95}
/* Optional accent image behind section intro */
.section-intro.has-accent{position:relative;isolation:isolate}
.section-intro.has-accent::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-14px;width:min(900px,90%);height:220px;background:url('../images/chaos-order.png') center/cover no-repeat;opacity:.08;pointer-events:none;z-index:-1;background-image:image-set(url('../images/chaos-order.webp') type('image/webp') 1x, url('../images/chaos-order.png') type('image/png') 1x)}
/* Disable accent background for Outcomes section intro only */
.outcomes-section .section-intro.has-accent::after{ content: none !important }

/* Editorial panel */
.panel{display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:"media body";gap:28px;align-items:center;background:var(--sb-warm);border-radius:16px;padding:22px;box-shadow:-10px -10px 24px rgba(255,255,255,.85), 10px 10px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.05)}
.panel.image-right{grid-template-columns:1fr 1.15fr;grid-template-areas:"body media"}
.panel-media{grid-area:media}
.panel-body{grid-area:body}
.panel-media img{display:block;width:100%;height:100%;max-height:440px;object-fit:cover;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.panel-body h2{font-size:36px;line-height:1.1;margin:.25rem 0 .5rem}
.panel-body p{margin:.25rem 0 1rem}
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
/* Editorial features (no cards) */
.features{display:grid;gap:28px}
.features.cols-3{grid-template-columns:repeat(3,1fr)}
.feature{display:flex;flex-direction:column;gap:8px}
.feature .icon{width:28px;height:28px;display:block;opacity:.95}
.feature h3{margin:.15rem 0 .25rem}
.feature p{margin:0}

/* Gallery/Museum style blocking */
.gallery-left-warm{background:linear-gradient(90deg, rgba(246,243,241,.85) 0 68%, rgba(246,243,241,0) 68%)}
.gallery-right-warm{background:linear-gradient(90deg, rgba(246,243,241,0) 0 32%, rgba(246,243,241,.85) 32%)}

/* Editorial feature list */
.feature-list{display:grid;gap:18px}
.feature-list .feature{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
/* Neumorphic feature tiles */
.feature-list .feature, .features .feature{background:var(--sb-warm);border-radius:14px;padding:14px 16px;box-shadow:-8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08)}
.feature-list .feature .icon{width:28px;height:28px;grid-column:1;grid-row:1 / span 2;align-self:start}
.feature-list .feature h3{margin:.1rem 0 .15rem;grid-column:2}
.feature-list .feature p{margin:0;grid-column:2}
.feature-list .feature .btn{grid-column:2}

/* Outcomes cloud (non-card, staggered two-column list with circular badges) */
.outcomes-cloud{display:grid;grid-template-columns:1fr 1fr;gap: clamp(20px, 3vw, 36px);align-items:start}
.outcome{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:start;position:relative}
.outcome-badge{width:60px;height:60px;border-radius:999px;background:var(--sb-warm);display:flex;align-items:center;justify-content:center;box-shadow:-8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06)}
.outcome-badge img, .outcome-badge svg{width:26px;height:26px;display:block;opacity:.95}
.outcome h3{margin:.05rem 0 .15rem;font-size:20px}
.outcome p{margin:0;opacity:.92}
/* Subtle stagger for visual rhythm */
.outcomes-cloud .outcome:nth-child(odd){transform:translateY(6px)}
.outcomes-cloud .outcome:nth-child(even){transform:translateY(-6px)}

/* Course modules: vertical timeline with circular badges */
/* Increase overall spacing for larger modules */
.module-flow{position:relative;display:flex;flex-direction:column;gap:28px;margin-top:12px; --badge-size:120px; --line-width:2px; --line-tail-trim:36px}
/* Vertical connector line centered through badges */
.module-flow::before{content:"";position:absolute;left:calc(var(--badge-size) / 2);top:calc(var(--badge-size) / 2);bottom:calc(var(--badge-size) / 2 + var(--line-tail-trim));width:var(--line-width);background:linear-gradient(180deg, rgba(154,12,12,.18), rgba(154,12,12,.06));z-index:0}
/* Each step aligns text to the right of the badge */
.module-flow .step{position:relative; z-index:1; text-align:left;padding-left:160px;min-height:120px}

.module-flow .badge{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:999px;background:var(--sb-warm);display:flex;align-items:center;justify-content:center;box-shadow:-8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06);z-index:1}
.module-flow .badge svg{width:72px;height:72px;display:block}
.module-flow .badge img{width:72px;height:72px;display:block}
.module-flow .step-num{display:inline-block;color:var(--sb-gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;margin-bottom:6px}
.module-flow h3{font-size:22px;line-height:1.2;margin:.12rem 0 .25rem}
.module-flow p{margin:0;opacity:.9;max-width:54ch;font-size:1rem}

/* Options comparison (card-less, airy columns) */
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start}
.option{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;position:relative}
.option-badge{width:120px;height:120px;border-radius:999px;background:var(--sb-warm);display:flex;align-items:center;justify-content:center;box-shadow:-8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06)}
.option-badge svg{width:72px;height:72px;display:block}
.option-badge img{width:72px;height:72px;display:block}
.option h3{margin:.1rem 0 .25rem;font-size:22px}
.option .price{font-weight:800;font-size:1.35rem;margin:.15rem 0 .35rem}
.option ul{margin:.1rem 0 .35rem;padding-left:18px}
.option ul li{margin:.12rem 0}
.option .cta-row{margin-top:6px}
.option:hover .option-badge{box-shadow:-10px -10px 22px rgba(255,255,255,.9), 10px 10px 22px rgba(0,0,0,.11)}

/* Pricing compare (two-column with dashed divider and labeled cards) */
.options-compare{position:relative;display:grid;grid-template-columns:repeat(2, minmax(280px, 1fr));gap: clamp(20px, 3vw, 36px);align-items:stretch}
.options-compare > div{display:flex}
.options-compare > div > .price-card{height:100%}
.options-compare::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);border-left:2px dashed var(--sb-gold);opacity:.55;pointer-events:none}
.overline-label{letter-spacing:.06em;text-transform:uppercase;color:var(--sb-gold);font-weight:700;font-size:.78rem;margin:0 0 10px 4px}
.price-card{background:var(--sb-warm);border:3px solid var(--sb-gold);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:0;display:flex;flex-direction:column;gap:12px;overflow:hidden;--pc-pad:28px;padding-bottom:var(--pc-pad)}
/* Hover glow removed per request */
.price-card .card-title{font-size:24px;line-height:1.2;margin:.2rem 0 .2rem;color:var(--sb-ink);font-weight:700;font-family:"Walkway", Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif}
.price-card .card-price{font-weight:800;font-size:1.5rem;margin:.2rem 0 .4rem}
.price-card .card-blurb{opacity:.92;margin:.1rem 0 .6rem}
.price-card .cta-row{justify-content:flex-start;margin-top:auto}
/* Left card hero reserved area for emblem */
.card-hero{position:relative;border-radius:0;overflow:hidden;min-height:210px;background:none}
.card-hero .hero-emblem{position:absolute;left:50%;top:46%;transform:translate(-50%, -50%);width:72px;height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.12))}
/* Right card reserved area for coaching icon */
.media-band{position:relative;border-radius:0;overflow:hidden;min-height:210px;background:none}
/* Full-bleed media: images extend to the inner edge of the card border without covering it */
.price-card .card-media{display:block;width:calc(100% + (2 * var(--pc-pad)));max-width:none;height:auto;margin-left:calc(-1 * var(--pc-pad));margin-right:calc(-1 * var(--pc-pad))}
.media-band .media-center{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:96px;height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.12))}
/* Card-specific watercolor backgrounds applied to the entire card */
.price-card.modules{
  background-image:url('../images/greenwatercolorbanner.webp');
  background-repeat:no-repeat;
  background-size:100% auto; /* same width as card, height auto */
  background-position:center -180%; /* move background up 180% */
  background-origin:border-box;
}
.price-card.coaching{
  background-image:url('../images/watercolorcardbanner.webp');
  background-repeat:no-repeat;
  background-size:100% auto; /* same width as card, height auto */
  background-position:center -20%; /* move background up 20% */
  background-origin:border-box;
}
/* Self-guided (modules) card: adjust open book emblem filter */
.price-card.modules .hero-emblem{ filter: brightness(80%) drop-shadow(0 2px 10px rgba(0,0,0,.12)) }
/* Apply side padding to content sections so media touches the inner border without covering it */
.price-card .card-title,
.price-card .card-price,
.price-card .card-blurb,
.price-card .features-plain,
.price-card .features-check,
.price-card .subtle-divider,
.price-card .cta-row{ padding-left: var(--pc-pad); padding-right: var(--pc-pad); }
/* Allow features list to expand to fill remaining space so CTAs align at bottom */
.price-card .features-plain,
.price-card .features-check{ flex:1 1 auto; min-height:0 }
/* Harmonize subsection heights for cross-card alignment */
.price-card .card-title{ min-height: 2.4em }
.price-card.coaching .card-title{ color: var(--sb-gold) }
.price-card .card-price{ min-height: 1.6em }
.price-card .card-blurb{ line-height:1.6; min-height: 3.2em }
/* Feature lists */
.features-plain{list-style:none;padding:0;margin:.1rem 0 .4rem}
.features-plain li{margin:.2rem 0}
.features-check{list-style:none;padding:0;margin:.1rem 0 .4rem}
.features-check li{position:relative;padding-left:28px;margin:.35rem 0}
.features-check li::before{content:"";display:inline-block;position:absolute;left:0;top:.1rem;width:20px;height:20px;background:url('../images/check.svg') center/contain no-repeat}
.subtle-divider{position:relative;margin:.6rem 0}
.subtle-divider::before{content:"";display:block;width:64px;height:1px;margin:0 auto;background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.16), rgba(0,0,0,.06))}

/* Legacy card (kept for testimonials or specific use) */
.card{background:var(--sb-warm);border-radius:16px;padding:22px;box-shadow:-10px -10px 24px rgba(255,255,255,.85), 10px 10px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.05)}
.card h3{margin:.35rem 0 .35rem}
.card img{border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.card .icon{width:28px;height:28px;margin-bottom:6px;display:block;opacity:.9}

/* Footer */
.sb-footer{background:transparent;border-top:1px solid rgba(0,0,0,.04);padding:28px 0;margin-top:56px;box-shadow: inset 0 1px 0 rgba(255,255,255,.65)}

/* Outcomes section background removed per request */

/* Stories/Testimonials band (distinct layout) */
.stories-band{ position:relative }
.stories-band .section-intro{ margin-bottom: 22px }
.stories-band .section-intro h2{ position:relative; padding-bottom:8px; text-align:center; color:#6a3e3e }
.stories-band .section-intro h2::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:56px; height:2px; background: var(--sb-gold) }
.stories-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: end;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
/* Mobile nav controls for stories */
.stories-controls{ display:none }
.stories-nav-btn{
  background:transparent; border:0; color:var(--sb-ink); font-size:22px; line-height:1; padding:8px; border-radius:8px;
  box-shadow:none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, color .18s ease;
}
.stories-nav-btn:hover{ color: var(--sb-red) }
.stories-nav-btn:active{ transform: translateY(1px) }
.stories-nav-btn:focus-visible{ outline:2px solid var(--sb-red); outline-offset:2px; border-radius:8px }
/* Pagination dots (mobile) */
.stories-pagination{ display:none }
.stories-pagination button{ width:28px; height:28px; padding:0; border:0; background:transparent; border-radius:14px; position:relative; cursor:pointer; -webkit-tap-highlight-color: transparent }
.stories-pagination button::before{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; transform:translate(-50%, -50%); border-radius:50%; background: rgba(0,0,0,.28) }
.stories-pagination button[aria-current="true"]::before{ background: var(--sb-red) }
.stories-pagination button:focus-visible{ outline:2px solid var(--sb-red); outline-offset:2px }
/* Stagger placement across two rows for a ribbon feel */
.stories-grid .story:nth-child(1){ grid-row:2 }
.stories-grid .story:nth-child(2){ grid-row:1 }
.stories-grid .story:nth-child(3){ grid-row:2 }
.stories-grid .story:nth-child(4){ grid-row:1 }
.stories-grid .story:nth-child(5){ grid-row:2 }

.story{ position:relative; display:flex; flex-direction:column; gap:10px; align-items:center }
.story-photo-wrap{
  --rot: -3deg;
  position:relative; border-radius:14px; background:#fff;
  padding:10px 10px 28px; /* polaroid frame with thicker bottom */
  box-shadow: -8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.10);
  transform: rotate(var(--rot));
  transition: transform .18s ease, box-shadow .18s ease, filter .2s ease;
  /* match photo/quote block width */
  width: var(--story-quote-w, clamp(22ch, 36vw, 34ch));
}
/* vary rotation for each tile */
.story:nth-child(2) .story-photo-wrap{ --rot: 2deg }
.story:nth-child(3) .story-photo-wrap{ --rot: -1deg }
.story:nth-child(4) .story-photo-wrap{ --rot: 3deg }
.story:nth-child(5) .story-photo-wrap{ --rot: -2deg }
.story:hover .story-photo-wrap{ transform: rotate(calc(var(--rot) + 1deg)) translateY(-2px); box-shadow: -10px -10px 22px rgba(255,255,255,.9), 10px 10px 22px rgba(0,0,0,.12) }
.story-photo{ display:block; width:100%; aspect-ratio: 1 / 1; height:auto; object-fit:cover; object-position: top; border-radius:10px }

/* quote bubble that avoids “formal box” feel */
.stories-grid{ --story-quote-w: clamp(22ch, 36vw, 34ch) }
.story-quote{
  position:relative; margin:8px 0 0; padding:12px 14px; border-radius:16px; width: var(--story-quote-w);
  background: var(--sb-warm); color: var(--sb-ink); line-height:1.5; border:1px solid rgba(0,0,0,.06);
  box-shadow: -6px -6px 14px rgba(255,255,255,.75), 6px 6px 14px rgba(0,0,0,.06);
  font-style: italic;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
}
.story-quote::after{
  content:""; position:absolute; left:18px; top:-6px; width:12px; height:12px; background: var(--sb-warm);
  border-left:1px solid rgba(0,0,0,.06); border-top:1px solid rgba(0,0,0,.06);
  transform: rotate(45deg);
}
.story-meta{ opacity:.85; width: var(--story-quote-w); align-self: center; text-align: left }

/* Mobile: horizontal scroll ribbon with snap */
@media (max-width: 900px){
  .stories-grid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin-left:-24px; margin-right:-24px; padding-left:24px; }
  .stories-grid .story{ flex:0 0 78vw; scroll-snap-align:center }
  .stories-grid{ --story-quote-w: calc(78vw - 20px) }
  .story-photo{ height:auto }
  .stories-controls{ display:flex; justify-content:center; gap:12px; margin-top:8px }
  .stories-pagination{ display:flex; justify-content:center; gap:10px; margin-top:8px }
}

/* Desktop: enforce 2x2 order: TL Paul, TR Sara, BL Shari, BR Ella */
@media (min-width: 901px){
  .stories-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); grid-auto-rows: auto; align-items:start }
  /* Reset any stagger from the ribbon variant */
  .stories-grid .story{ grid-row:auto; grid-column:auto }
  .stories-grid .story:nth-child(1){ grid-row:1; grid-column:1 }
  .stories-grid .story:nth-child(2){ grid-row:1; grid-column:2 }
  .stories-grid .story:nth-child(3){ grid-row:2; grid-column:1 }
  .stories-grid .story:nth-child(4){ grid-row:2; grid-column:2 }
}

/* Book band: polaroid book cover + copy */
.book-band{ position:relative }
.book-band .section-intro{ text-align:center; margin-bottom: 18px }
.book-band .section-intro h2{ position:relative; padding-bottom:8px; color:#6a3e3e }
.book-band .section-intro h2::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:56px; height:2px; background: var(--sb-gold) }
.book-feature{ display:grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: clamp(16px, 3vw, 28px); align-items:center; max-width: 980px; margin: 0 auto }
.book-card{ margin:0 }
.book-card .story-photo-wrap{ --rot: 0deg; width: clamp(220px, 34vw, 320px) }
.book-photo{ display:block; width:100%; height:auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius:10px }
.book-copy .feature-list.bullets{ margin-top: 8px }
@media (max-width: 900px){
  .book-feature{ grid-template-columns: 1fr }
  .book-card{ justify-self:center }
}

/* Responsive */
/* Split layout to pair media with features */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.split .split-media img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
/* Skinny portrait media for side-by-side with timeline */
.split .split-media.skinny{max-width:420px;justify-self:end;align-self:stretch;display:flex;width:100%;min-width:0;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.split .split-media.skinny img{height:100%;object-fit:cover}
/* Book image in panel: preserve transparent background and fit */
.book-band .panel-media img.book-photo{ height:auto !important; max-height:380px; object-fit:contain; object-position:center; background:transparent; box-shadow:none }
/* Book panel: add gold border like Blueprint */
.book-band .panel{ border:2px solid var(--sb-gold) }
/* Book title underline (left-aligned) */
.book-band .panel-body h2{ position:relative; padding-bottom:8px }
.book-band .panel-body h2::after{ content:""; position:absolute; left:0; bottom:0; width:56px; height:2px; background: var(--sb-gold) }
/* Remove text indent from bullets inside book panel */
.book-band .feature-list.bullets{ padding-left:0; list-style-position: inside }
/* Reveal-on-scroll base and visible states */
.reveal-on-scroll{ opacity:0; transform: translateY(12px); will-change: opacity, transform }
.reveal-on-scroll.is-visible{ animation: fadeRiseSharpen .6s ease-out .12s both }
/* Optional stagger: apply to children when parent flagged */
.reveal-stagger > *{ opacity:0; transform: translateY(12px); will-change: opacity, transform }
.reveal-stagger.is-visible > *{ animation: fadeRiseSharpen .6s ease-out 0s both }
.reveal-stagger.is-visible > *:nth-child(1){ animation-delay: .00s }
.reveal-stagger.is-visible > *:nth-child(2){ animation-delay: .06s }
.reveal-stagger.is-visible > *:nth-child(3){ animation-delay: .12s }
.reveal-stagger.is-visible > *:nth-child(4){ animation-delay: .18s }
.reveal-stagger.is-visible > *:nth-child(5){ animation-delay: .24s }
@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll, .reveal-stagger > *{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important }
}
/* Combined fade + rise + sharpen in a single keyframe for reveal */
@keyframes fadeRiseSharpen{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Generic layered parallax stack (reused on course page stones) */
.parallax-stack{position:relative;display:block;width:100%;height:100%;min-height:560px}
.parallax-stack .parallax-layer{position:absolute;inset:0;--base-scale:1.06;--scroll-y:0px;--scroll-x:0px;transform:scale(var(--base-scale)) translate3d(var(--scroll-x), var(--scroll-y), 0);transform-origin:50% 50%;background-position:center center;background-repeat:no-repeat;background-size:cover;pointer-events:none;opacity:1;will-change:transform,opacity,filter}
/* Stones stack specific backgrounds and depth scaling */
.stones-parallax .stones-bg{
  z-index:0;
  /* Fallback for browsers without WebP support */
  background-image:url('../images/stacked-stones.png');
  /* Modern: prefer layered WebP */
  background-image:-webkit-image-set(url('../images/stonestack-background.webp') type('image/webp') 1x);
  background-image:image-set(url('../images/stonestack-background.webp') type('image/webp') 1x);
}
.stones-parallax .stones-mid{
  z-index:1;
  background-image:url('../images/stacked-stones.png');
  background-image:-webkit-image-set(url('../images/stonestack-midground.webp') type('image/webp') 1x);
  background-image:image-set(url('../images/stonestack-midground.webp') type('image/webp') 1x);
}
.stones-parallax .stones-fore{
  z-index:2;
  background-image:url('../images/stacked-stones.png');
  background-image:-webkit-image-set(url('../images/stonestack-foreground.webp') type('image/webp') 1x);
  background-image:image-set(url('../images/stonestack-foreground.webp') type('image/webp') 1x);
}
/* Align stones layers to bottom so they aren't cropped on mobile */
.stones-parallax .parallax-layer{ background-position: left bottom }
/* Smaller subtext variant under the title */
.section-intro .course-kicker.small{font-size:16px; line-height:1.5; opacity:.9; font-weight:400}

@media (max-width: 900px){
  /* Match home page feel and account for notches/safe areas */
  .container{padding-left:calc(24px + env(safe-area-inset-left, 0px)); padding-right:calc(24px + env(safe-area-inset-right, 0px))}
  /* Force course page containers to have side padding even if other CSS competes */
  .page-course .container,.page-course .container-narrow{padding-left:calc(24px + env(safe-area-inset-left, 0px)) !important; padding-right:calc(24px + env(safe-area-inset-right, 0px)) !important}
  /* Mirror homepage behavior for the course title hero on mobile */
  .title-hero{ margin-top:0 }
  .title-hero .title-hero-inner{ border-radius:0 }
  .outcomes-cloud{grid-template-columns:1fr;gap:18px}
  .section-intro .course-title{font-size:38px}
  .section-intro .course-kicker{font-size:18px;margin-bottom:.5rem}
  /* Slight bump for the course title hero on mobile; subheader a touch smaller */
  .title-hero .section-intro .course-title{font-size:40px}
  .title-hero .section-intro .course-kicker{font-size:19px}
  /* Module flow responsive: vertical timeline with slightly smaller badges */
  .module-flow{gap:20px; --badge-size:88px; --line-tail-trim:48px}
  .module-flow .step{padding-left:116px;min-height:88px}
  .module-flow .badge{width:88px;height:88px}
  .module-flow .badge svg{width:56px;height:56px}
  .module-flow .badge img{width:56px;height:56px}
  .module-flow h3{font-size:20px}
  /* Options responsive */
  .options{grid-template-columns:1fr;gap:18px}
  .option{grid-template-columns:112px 1fr}
  .option-badge{width:100px;height:100px}
  .option-badge svg,.option-badge img{width:60px;height:60px}
  /* Pricing compare responsive */
  .options-compare{grid-template-columns:1fr;gap:24px}
  .options-compare::before{content:none}
  .price-card{padding:0; --pc-pad:22px; padding-bottom: var(--pc-pad)}
  /* Ensure watercolor banners remain visible and similarly positioned on mobile */
  .price-card.modules{ background-size:140% auto; background-position:center -130% }
  .price-card.coaching{ background-size:140% auto; background-position:center -10% }
  .brand .logo{ --logo-icon-size:40px }
  .grid.cols-3{grid-template-columns:1fr}
  .features.cols-3{grid-template-columns:1fr}
  .gallery-left-warm,.gallery-right-warm{background:none}
  .hero{margin-top:0}
  .hero .container{min-height:calc(100svh - 64px - 24px);padding:calc(36px + 64px) 0 64px;border-radius:0}
  .hero .bg-layer{--base-scale:1.12}
  .hero .flowers-layer{--flower-scale:1.12}
  .hero h1{font-size:44px}
  .header-inner{gap:8px}
  .nav-toggle{display:block}
  /* Improved mobile nav: larger, friendlier, card-like */
  .nav{
    display:none;
    flex-direction:column;
    gap:16px;
    background:var(--sb-warm);
    position:absolute;
    top:100%;
    left:8px;
    right:8px;
    padding: 32px 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 24px;
    z-index: 100;
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,0.5);
  }
  .nav.open{display:flex}
  .nav-link{
    padding:20px 24px;
    border-bottom:none;
    font-size: 1.4rem;
    font-weight: 700;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
  .nav-link:active, .nav-link:hover{
    background: #fff;
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .section{padding:48px 0}
  .panel{grid-template-columns:1fr;grid-template-areas:"media" "body";gap:16px}
  /* Ensure right-sided panels also stack vertically on mobile (override higher specificity) */
  .panel.image-right{grid-template-columns:1fr;grid-template-areas:"media" "body"}
  .panel-media img{max-height:320px}
  .split{grid-template-columns:1fr}
  .split .split-media.skinny{max-width:none;justify-self:stretch}
  .split .split-media.skinny img{height:auto}
  .parallax-stack{height:auto;min-height:420px}
  /* Course title hero: mirror homepage mobile behavior */
  .title-hero{ margin-top:0 }
  .title-hero .title-hero-inner{ border-radius:0; align-items:flex-start; min-height:calc(100svh - 64px - 24px); padding:calc(36px + 64px) 0 64px }
  /* About page hero: reduced height on mobile */
  .page-about .title-hero .title-hero-inner{
    min-height: 50vh !important;
    align-items: center !important;
    padding-top: 80px !important;
    padding-bottom: 64px !important;
  }
  /* Stones parallax: foreground layer uses intrinsic size on mobile */
  .stones-title-parallax .stones-fore,
  .stones-parallax .stones-fore{ background-size:250% }
}

/* Appear animations */
@keyframes fadeInOpacity{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Removed continuous float keyframes to disable subtle motion */

/* Blur-only keyframes for stones layers (run after fade completes) */
@keyframes blurToSoft{from{filter:blur(0)}to{filter:blur(3px)}}
@keyframes sharpenFromSoft{from{filter:blur(4px)}to{filter:blur(0)}}

/* Staggered content animations */
.hero .lotus{animation:rise .44s ease-out .16s both}
.hero .tag{animation:rise .44s ease-out .20s both}
.hero h1{animation:rise .44s ease-out .24s both}
.hero .subtitle{animation:rise .44s ease-out .30s both}
.hero .cta-row{animation:rise .44s ease-out .36s both}

/* Course title hero: staggered appear animations (match homepage feel) */
.title-hero .course-title{ animation: rise .44s ease-out .24s both }
.title-hero .section-intro.on-parallax .course-kicker{ animation: rise .44s ease-out .30s both }

/* Course title hero with parallax inside container width */
.title-hero .title-hero-inner{ position:relative; min-height:760px; display:flex; align-items:center; overflow:hidden; border-radius:36px; background: var(--sb-warm); max-width:1280px;
  box-shadow: -16px -16px 36px rgba(255,255,255,.85), 16px 16px 36px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06) }
.title-hero .course-title{ color:#fff }
/* Narrow subheader width slightly for improved legibility */
.title-hero .section-intro.on-parallax .course-kicker{ max-width: 52ch; color:#fff; opacity:.95 }
/* Animate CTA row to match title/subheader */
.title-hero .section-intro .cta-row,
.title-hero .section-intro.on-parallax .cta-row{ will-change: opacity, transform, filter }
.title-hero .section-intro.on-parallax .cta-row{ filter: blur(4px); animation: fadeInOpacity .4s ease-out 0s both, rise .44s ease-out .36s both, sharpenFromSoft .45s ease-out .8s both }
/* Align hero CTA left under subheader */
.title-hero .section-intro.on-parallax .cta-row{ justify-content:flex-start }
/* Slightly increase title and subheading sizes within the course title hero */
.title-hero .section-intro .course-title{ font-size:56px }
.title-hero .section-intro .course-kicker{ font-size:22px }
/* Apply fade + rise + post-fade sharpen blur to title and subheader */
.title-hero .section-intro .course-title,
.title-hero .section-intro .course-kicker{ will-change: opacity, transform, filter }
.title-hero .section-intro .course-title{ filter:blur(4px); animation: fadeInOpacity .4s ease-out 0s both, rise .44s ease-out .24s both, sharpenFromSoft .45s ease-out .8s both }
.title-hero .section-intro .course-kicker{ filter:blur(4px); animation: fadeInOpacity .4s ease-out 0s both, rise .44s ease-out .30s both, sharpenFromSoft .45s ease-out .8s both }
/* Ensure the more specific on-parallax variant inherits the full animation chain so blur resolves */
.title-hero .section-intro.on-parallax .course-kicker{ filter:blur(4px); animation: fadeInOpacity .4s ease-out 0s both, rise .44s ease-out .30s both, sharpenFromSoft .45s ease-out .8s both }
.title-hero .title-hero-inner .parallax-stack{ position:absolute; inset:0; height:100%; min-height:0; z-index:0 }
.title-hero .title-hero-inner .section-intro.on-parallax{ position:relative; z-index:1 }
/* Use wide stones images for title background */
.stones-title-parallax .stones-bg{
  background-image:-webkit-image-set(url('../images/stonestackbackground-wide.webp') type('image/webp') 1x);
  background-image:image-set(url('../images/stonestackbackground-wide.webp') type('image/webp') 1x);
  /* Appear animation to match homepage hero */
  /* Overlapped fade windows per request (shifted earlier by 0.1s): BG 0.2s–0.5s */
  opacity:0; animation: fadeInOpacity .3s ease-out .2s both;
}
.stones-title-parallax .stones-mid{
  background-image:-webkit-image-set(url('../images/stonestackmidground-wide.webp') type('image/webp') 1x);
  background-image:image-set(url('../images/stonestackmidground-wide.webp') type('image/webp') 1x);
  /* Fade in midground only; no post-load blur */
  opacity:0;
  animation: fadeInOpacity .3s ease-out .15s both;
}
/* Midground masked blur overlay: reveal a gentle 2px blur from bottom-right toward top-left */
.stones-title-parallax .stones-mid::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Match the same image so the overlay aligns perfectly */
  background-image:-webkit-image-set(url('../images/stonestackmidground-wide.webp') type('image/webp') 1x);
  background-image:image-set(url('../images/stonestackmidground-wide.webp') type('image/webp') 1x);
  background-position: right bottom; background-repeat:no-repeat; background-size: cover;
  /* Start sharp and transparent, then animate to a gentle blur */
  filter: blur(0); opacity:0;
  /* Mask strongest at bottom-right fading toward top-left */
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 90%);
  mask-image: radial-gradient(120% 120% at 100% 100%, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 90%);
  animation: blurMaskIn .35s ease-out .5s both;
}
@keyframes blurMaskIn{ from{ filter:blur(0); opacity:0 } to{ filter:blur(2px); opacity:1 } }
.stones-title-parallax .stones-fore{
  background-image:-webkit-image-set(url('../images/stonestackforeground-wide.webp') type('image/webp') 1x);
  background-image:image-set(url('../images/stonestackforeground-wide.webp') type('image/webp') 1x);
  /* Step 1: fade all layers in together; Step 2: then resolve blur from 4px to 0px */
  opacity:0; filter:blur(4px);
  /* Overlapped fade windows per request: FORE 0.0s–0.3s; blur begins at 0.5s */
  animation: 
    fadeInOpacity .3s ease-out 0s both,
    sharpenFromSoft .45s ease-out .5s both;
}
.stones-title-parallax .stones-bg{ z-index: 0 }
.stones-title-parallax .stones-mid{ z-index: 1 }
.stones-title-parallax .stones-fore{ z-index: 2 }
.stones-title-parallax .parallax-layer{ background-position: right bottom }

/* Make stones parallax layers slightly taller than the container for richer parallax (113% height) */
.stones-title-parallax .parallax-layer,
.stones-parallax .parallax-layer{
  position:absolute; left:0; right:0; bottom:auto; top:-12.5%;
  width:100%; height:113%; aspect-ratio:auto;
}

/* Course page: bordered panel around modules (match homepage Blueprint style) */
.course-panel{ position:relative; border:2px solid var(--sb-gold); border-radius:12px; padding:22px; background: var(--sb-warm);
  box-shadow: -10px -10px 24px rgba(255,255,255,.85), 10px 10px 24px rgba(0,0,0,.10) }

/* Specific modules section bordered panel */
.modules-panel{ position:relative; border:2px solid var(--sb-gold); border-radius:12px; 
  /* Match homepage feature panel inner padding */
  padding: clamp(28px, 5vw, 56px); background: var(--sb-warm);
  box-shadow: -10px -10px 24px rgba(255,255,255,.85), 10px 10px 24px rgba(0,0,0,.10) }

/* Center modules header and match homepage "The Blueprint" styles */
.modules-panel .section-intro{ text-align:center }
.modules-panel .section-intro h2{
  margin:0 0 8px;
  text-align:center;
  color:#6a3e3e;
  font-size: clamp(28px, 4vw, 40px);
  line-height:1.1;
  position:relative;
  padding-bottom:8px;
}
.modules-panel .section-intro h2::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:56px; height:2px; background: var(--sb-gold)
}
.modules-panel .section-intro p{
  margin:0 0 28px; text-align:center; color:#6b5c5c
}

/* Harmonize spacing below header to mirror home panel grid spacing */
.modules-panel .module-flow{ margin-top: 0 }

/* Homepage Feature Panel (replaces Build calm section) */
.feature-panel{ padding: clamp(24px, 4vw, 48px) 24px }
.feature-panel__inner{ position:relative; border:2px solid var(--sb-gold); border-radius:12px; padding: clamp(28px, 5vw, 56px); background: var(--sb-warm); box-shadow: -10px -10px 24px rgba(255,255,255,.85), 10px 10px 24px rgba(0,0,0,.10) }
.feature-panel__title{ margin:0 0 8px; text-align:center; color:#6a3e3e; font-size: clamp(28px, 4vw, 40px); line-height:1.1; position:relative; padding-bottom:8px }
.feature-panel__title::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:56px; height:2px; background: var(--sb-gold) }
.feature-panel__subtitle{ margin:0 0 28px; text-align:center; color:#6b5c5c }
.feature-grid{ display:grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 36px); align-items:stretch; margin-bottom: 28px }
.feature-card{ display:flex; flex-direction:column; gap:10px; background: var(--sb-warm); border-radius:14px; padding:24px; box-shadow: -8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08) }
.feature-icon{ color: var(--sb-gold) }
.feature-card .icon{ width:44px; height:44px; display:block }
.feature-card__title{ margin:6px 0 2px; color:#6a3e3e; font-size:18px }
.feature-list.bullets{ margin:8px 0 0; padding-left:18px; color: var(--sb-ink); line-height:1.6 }
/* Remove extra text indent on Blueprint subcards (lists inside feature-panel) */
.feature-panel .feature-list.bullets{ padding-left:0; list-style-position: inside }
@media (max-width: 980px){ .feature-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){ .feature-grid{ grid-template-columns: 1fr } }

/* Cohort info panel styling (matches panel look with gold border) */
.cohort-panel{ position:relative; border:2px solid var(--sb-gold); border-radius:12px; background: var(--sb-warm); padding: clamp(20px, 3.5vw, 28px); margin-bottom: clamp(18px, 3vw, 28px);
  box-shadow: -10px -10px 24px rgba(255,255,255,.85), 10px 10px 24px rgba(0,0,0,.10) }
.cohort-panel.cohort-panel--grid{ display:grid; grid-template-columns: 1.1fr 1.4fr; gap: clamp(14px, 2.5vw, 22px); align-items:center }
.cohort-panel.cohort-panel--centered{ text-align:center; grid-template-columns:1fr; grid-template-areas:"body" }
.cohort-panel.cohort-panel--centered .panel-body{ width:100%; flex-direction:column; justify-content:center; align-items:center }
.cohort-panel.cohort-panel--centered .panel-body h3::after{ left:50%; transform:translateX(-50%) }
.cohort-panel.cohort-panel--centered .panel-body .btn{ margin-left:0 !important; margin-top:8px }
.cohort-panel .panel-body{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.cohort-panel .panel-body .eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: var(--sb-red); background: rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:4px 8px }
.cohort-panel .panel-body h3{ margin:0; font-size:20px; color:#6a3e3e; position:relative; padding-bottom:6px }
.cohort-panel .panel-body h3::after{ content:""; position:absolute; left:0; bottom:0; width:48px; height:2px; background: var(--sb-gold) }
.cohort-panel .panel-body .details{ opacity:.9 }
.cohort-panel .panel-body .btn{ margin-left:auto }

/* Mini calendar visual for cohort timeframe */
.cohort-calendar{ background: #fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:12px; box-shadow: -6px -6px 14px rgba(255,255,255,.75), 6px 6px 14px rgba(0,0,0,.06) }
.cohort-calendar .cal-header{ font-weight:800; color:#6a3e3e; margin:4px 0 10px; display:flex; align-items:center; gap:8px }
.cohort-calendar .cal-header .dot{ width:8px; height:8px; border-radius:50%; background: var(--sb-gold); display:inline-block }
.cohort-calendar .cal-weeks{ display:grid; grid-template-columns: repeat(5, 1fr); gap:8px }
.cohort-calendar .cal-week{ position:relative; background: var(--sb-warm); border:1px solid rgba(0,0,0,.06); border-radius:10px; padding:8px }
.cohort-calendar .cal-week::before{ content:""; position:absolute; left:8px; right:8px; top:6px; height:6px; border-radius:4px; background: var(--sb-gold); opacity:.9 }
.cohort-calendar .wk-label{ margin-top:12px; font-weight:700; font-size:.8rem; color: var(--sb-ink) }
.cohort-calendar .wk-dates{ font-size:.8rem; opacity:.85 }
.cohort-calendar .cal-foot{ margin-top:10px; font-size:.85rem; opacity:.85 }

@media (max-width: 900px){
  .cohort-panel.cohort-panel--grid{ grid-template-columns: 1fr }
  .cohort-calendar .cal-weeks{ grid-template-columns: repeat(3, 1fr) }
}

/* Laser Coaching Spotlight (cohesive with site theme) */
.laser-spotlight .laser-card{
  position:relative;
  display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;
  background:var(--sb-warm);
  border:3px solid var(--sb-gold);
  border-radius:16px;
  /* Match homepage feature panel inner padding */
  padding: clamp(28px, 5vw, 56px);
  box-shadow:-10px -10px 24px rgba(255,255,255,.85), 10px 10px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.05);
  margin-top:-8px; /* nudge closer to outcomes */
  margin-bottom:-24px; /* visually tuck under pricing */
}
.laser-spotlight .laser-card.banner-coaching{
  background-image:url('../images/watercolorcardbanner.webp');
  background-repeat:no-repeat;
  background-size:100% auto;
  background-position:center -10%;
  background-origin:border-box;
}
/* Removed right-edge accent stripe for simplified variant */
/* Center header like homepage feature panel and add underline */
.laser-spotlight .laser-copy{ text-align:center }
.laser-spotlight h2{ margin:0 0 8px; text-align:center; color:#6a3e3e; font-size: clamp(28px, 4vw, 40px); line-height:1.1; position:relative; padding-bottom:8px; display:inline-block; margin-left:auto; margin-right:auto }
.laser-spotlight h2::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:56px; height:2px; background: var(--sb-gold) }
.laser-spotlight p{ margin:0 0 28px; text-align:center; opacity:.95; color:#6b5c5c }
.laser-spotlight .pillars{ margin-top:10px }
/* Coaching features grid matches homepage feature grid */
.laser-spotlight .feature-list.pillars{ display:grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 36px); align-items:stretch; margin-bottom: 28px; list-style:none; padding:0 }
/* Tile styling mirrors .feature-card on homepage */
.laser-spotlight .feature-list.pillars{ text-align:left }
.laser-spotlight .feature-list.pillars .feature{ display:flex; flex-direction:column; gap:10px; background: var(--sb-warm); border-radius:14px; padding:24px; box-shadow: -8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08); text-align:left }
.laser-spotlight .feature-list.pillars .feature .icon{ width:48px; height:48px; display:block }
.laser-spotlight .feature-list.pillars .feature h3{ margin:6px 0 2px; color:#6a3e3e; font-size:18px }
.laser-spotlight .feature-list.pillars .feature p{ margin:0; color: var(--sb-ink); line-height:1.6; text-align:left }
/* Ensure headings inside tiles are left-aligned even when parent copy is centered */
.laser-spotlight .feature-list.pillars .feature h3{ text-align:left }
@media (max-width: 980px){ .laser-spotlight .feature-list.pillars{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){ .laser-spotlight .feature-list.pillars{ grid-template-columns: 1fr } }

/* Three-step mini process */
.how-steps{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.how-steps li{
  display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start;
  background:var(--sb-warm); border-radius:12px; padding:10px 12px;
  box-shadow:-8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08);
}
.how-steps .num{
  width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:rgba(182,138,90,.15); color:var(--sb-gold); font-weight:800;
}
.how-steps strong{display:block; margin:.05rem 0 .1rem}

/* Testimonial quote block with warm accent */
.quote-small{margin:6px 0 0 0; background:var(--sb-warm); border-left:3px solid var(--sb-gold); border-radius:12px; padding:12px 14px;
  box-shadow:-8px -8px 18px rgba(255,255,255,.85), 8px 8px 18px rgba(0,0,0,.08)}
.quote-small blockquote{margin:0}
.quote-small figcaption{opacity:.85; margin-top:8px}

/* Coach mini card */
.coach-card{display:flex; align-items:center; gap:12px}
.coach-avatar{width:44px; height:44px; border-radius:50%; background:radial-gradient(80% 80% at 30% 30%, rgba(182,138,90,.35), rgba(182,138,90,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35)}

@media (max-width: 900px){
  .laser-spotlight .laser-card{grid-template-columns:1fr; gap:16px; margin-bottom:-16px}
}

/* Distinct dark variant inspired by the original concept */
.laser-spotlight.is-dark .laser-card{
  /* Maroon spotlight: subtler gradient by bringing endpoints closer to midtone */
  background: linear-gradient(135deg, #5f3c3c 0%, #6a3e3e 50%, #5f3c3c 100%);
  color:#ECF2F8;
  border:0;
  /* Neumorphic-style shadows on dark surface */
  box-shadow:
    -12px -12px 24px rgba(255,255,255,.04),
    12px 12px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.22);
  overflow:hidden;
}
.laser-spotlight.is-dark h2{ color:#ECF2F8 }
.laser-spotlight.is-dark p{ color:#ECF2F8; opacity:.9 }
.laser-spotlight.is-dark .overline-label{ color: var(--sb-gold) }
.laser-spotlight .laser-card.edge{ position:relative }
/* Removed .laser-edge element styles */
.laser-spotlight .cta-row{ justify-content:flex-start }
/* Dark pill tiles */
.laser-spotlight.is-dark .feature-list.pillars{ margin-top:8px }
.laser-spotlight.is-dark .feature-list.pillars .feature{
  background: rgba(255,255,255,.06);
  border-radius:14px;
  padding:24px; /* match homepage card padding scale */
  min-height:120px; /* taller */
  display:flex; flex-direction:column; justify-content:center;
  /* Neumorphic tile shadows */
  box-shadow:
    -8px -8px 18px rgba(255,255,255,.04),
    8px 8px 18px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.04);
}
.laser-spotlight.is-dark .feature-list.pillars .feature h3{ color:#F8FAFC }
.laser-spotlight.is-dark .feature-list.pillars .feature p{ color:#ECF2F8; opacity:.9 }
.laser-spotlight.is-dark .feature-list.pillars .feature .icon{ filter:none; opacity:.95; width:48px; height:48px }
/* Dark process list */
.laser-spotlight.is-dark .how-steps li{
  background: rgba(255,255,255,.06);
  box-shadow: none;
}
.laser-spotlight.is-dark .how-steps .num{ background: rgba(182,138,90,.18); color: var(--sb-gold) }
.laser-spotlight.is-dark .quote-small{ background: rgba(255,255,255,.06); border-left-color: var(--sb-gold); box-shadow:none }
.laser-spotlight.is-dark .card.coach-card{ background: rgba(255,255,255,.05); box-shadow:none; border:1px solid rgba(255,255,255,.06) }
.laser-spotlight.is-dark .coach-card strong{ color:#ECF2F8 }
.laser-spotlight.is-dark .coach-avatar{ background: radial-gradient(80% 80% at 30% 30%, rgba(182,138,90,.35), rgba(182,138,90,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) }

/* Animated laser accent (gentle) */
/* Laser edge accent removed for simplified variant */

/* Spacing and layout refinements for readability */
.laser-spotlight .laser-card{ padding: clamp(28px, 5vw, 56px) }
.laser-spotlight .laser-copy{ display:flex; flex-direction:column; gap:10px }
.laser-spotlight .laser-proof{ display:flex; flex-direction:column; gap:12px }
.laser-spotlight .pillars{ margin-top:10px }
/* Coach photo style for dark surface */
.laser-spotlight .coach-photo{ width:44px; height:44px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 1px 0 rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.06) }
@media (max-width: 900px){
  .laser-spotlight.is-dark .feature-list.pillars{ grid-template-columns:1fr }
}

/* Remove legacy left-aligned underline to allow centered underline variant above */

/* Simple variant: just the three pillars */
.laser-spotlight.is-simple .laser-card{ grid-template-columns: 1fr }
.laser-spotlight.is-simple .laser-copy{ gap: 10px }
.laser-spotlight.is-simple .pillars{ margin-top:8px }

/* Desktop: keep title/subheader left edge no farther left than modules panel (container-narrow width) */
@media (min-width: 901px){
  .title-hero .section-intro.on-parallax{
    width: 860px; /* exactly match .container-narrow width so left edges align */
    margin-left: auto;
    margin-right: auto;
  }
}

/* Final mobile overrides placed after base rules to ensure they win the cascade */
@media (max-width: 900px){
  /* Course title hero: remove rounding and push text toward the top */
  .title-hero{ margin-top: 0 !important }
  .title-hero .title-hero-inner{
    border-radius: 0 !important;
    align-items: flex-start !important;
    min-height: calc(100svh - 64px - 24px) !important;
    /* Make text a bit lower and add horizontal padding like the homepage hero */
    padding: calc(44px + 64px) calc(24px + env(safe-area-inset-right, 0px)) 48px calc(24px + env(safe-area-inset-left, 0px)) !important;
  }
  .title-hero .section-intro.on-parallax{ margin-top: 0 }
}

/* About page: scale portrait similar to testimonial photo size */
.page-about .panel-media img{
  width: 100%;            /* allow responsive scaling within container */
  height: auto;           /* override base height:100% */
  max-width: clamp(220px, 36vw, 340px); /* approx story tile width */
  max-height: 360px;      /* smaller than default 440px */
  margin: 0 auto;         /* center in media column */
  display: block;
}