/* ==========================================================================
   STUDY BEE — Design System
   Instrument Serif (display) + Plus Jakarta Sans (ui/body)
   Palette: warm ink, honey yellow, cream, amber glow
   ========================================================================== */

:root{
  /* ---- color tokens ---- */
  --ink:            #16140f;
  --ink-soft:       #2b2620;
  --ink-mute:       #6b6357;
  --cream:          #fffbf2;
  --cream-dim:      #fbf1da;
  --cream-line:     #ece2c8;
  --paper:          #ffffff;
  --honey:          #ffc93c;
  --honey-deep:     #f5a623;
  --honey-text:     #a06306;   /* WCAG AA-compliant amber for TEXT use only
                                   (eyebrows, accent words, labels) — the
                                   brighter --honey-deep fails 4.5:1 against
                                   cream/white as text color (1.96:1) and
                                   stays reserved for buttons/icons/borders,
                                   where it's paired with high-contrast ink
                                   text instead of carrying text itself */
  --honey-pale:     #ffe6a3;
  --amber-glow:     #ffdd8a;
  --berry:          #c65b4e;   /* small warm accent for tags / ratings, used sparingly */
  --line:           rgba(22,20,15,.12);
  --line-soft:      rgba(22,20,15,.07);
  --shadow-soft:    0 20px 60px -25px rgba(22,20,15,.35);
  --shadow-tight:   0 8px 24px -12px rgba(22,20,15,.28);

  /* ---- type ---- */
  --f-display: "Instrument Serif", "Iowan Old Style", serif;
  --f-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- layout ---- */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-s: .35s;
  --dur-m: .6s;
  --dur-l: 1s;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}
body{
  margin:0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Used by the preloader, mobile menu, gallery lightbox and course modal to
   lock background scroll while each is open. */
body.no-scroll{
  overflow: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
svg{ display:block; }

::selection{ background: var(--honey); color: var(--ink); }

:focus-visible{
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.h-display{
  font-size: clamp(2.6rem, 6vw, 5.4rem);
}
.h-xl{
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
}
.h-lg{
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
}
.h-md{
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}
.italic-accent{
  font-style: italic;
  font-weight: 400;
  color: var(--honey-text);
}
.lede{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-mute);
  line-height: 1.65;
  max-width: 46ch;
}
p.body-text{
  color: var(--ink-mute);
  font-size: 1rem;
  max-width: 62ch;
}
.eyebrow{
  display:block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--honey-text);
  margin-bottom: .5em;
}

/* ---------------------------------------------------------------------- */
/* Layout helpers                                                          */
/* ---------------------------------------------------------------------- */
.wrap{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
section{ position:relative; }
.section-pad{ padding-block: clamp(64px, 10vw, 140px); }
.section-pad-sm{ padding-block: clamp(48px, 7vw, 96px); }
.grain{
  position:absolute; inset:0; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-cream-dim{ background: var(--cream-dim); }
.bg-ink{ background: var(--ink); color: var(--cream); }
.bg-ink h1, .bg-ink h2, .bg-ink h3{ color: var(--cream); }
.bg-ink .lede, .bg-ink p.body-text{ color: rgba(255,251,242,.68); }

.honeycomb-field{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.honeycomb-field svg{ position:absolute; opacity:.5; }

/* ---------------------------------------------------------------------- */
/* Doodle system — minimal, hand-drawn accents (replaces the old flying-
   bee motif). Used sparingly: one or two per section, never stacked, never
   competing with the content they sit beside. */
/* ---------------------------------------------------------------------- */
.doodle{
  position:absolute;
  pointer-events:none;
  color: var(--ink);
  opacity:.85;
}
.doodle.doodle-honey{ color: var(--honey-deep); }
.doodle-sparkle{ width:34px; height:34px; }
.doodle-arrow{ width:76px; height:56px; }
.doodle-scribble{ width:120px; height:26px; }
.doodle-dots{ width:90px; height:60px; }
@media (max-width: 640px){
  .doodle{ transform: scale(.78); }
}
/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn{
  --btn-pad-y: .95em;
  --btn-pad-x: 1.7em;
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  border: 1px solid transparent;
  isolation: isolate;
  overflow:hidden;
  white-space: nowrap;
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out), background var(--dur-s);
}
.btn-primary{
  background: linear-gradient(150deg, var(--honey) 0%, var(--honey-deep) 100%);
  color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(245,166,35,.65);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 20px 36px -14px rgba(245,166,35,.8); }
.btn-primary::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn-primary:hover::after{ transform: translateX(120%); }

.btn-dark{
  background: var(--ink);
  color: var(--cream);
}
.btn-dark:hover{ transform: translateY(-3px); box-shadow: var(--shadow-tight); }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover{ border-color: var(--ink); transform: translateY(-3px); }

.btn-ghost.on-dark{ color: var(--cream); border-color: rgba(255,251,242,.3); }
.btn-ghost.on-dark:hover{ border-color: var(--cream); }

.btn-sm{ --btn-pad-y: .65em; --btn-pad-x: 1.3em; font-size:.88rem; }

.btn .arr{
  width: 18px; height: 18px;
  transition: transform var(--dur-s) var(--ease-out);
}
.btn:hover .arr{ transform: translateX(4px); }

/* magnetic wrapper target */
.magnetic{ display:inline-block; }

/* ripple */
.ripple{ position:relative; }
.ripple-dot{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  pointer-events:none;
  animation: ripple-out .65s var(--ease-out) forwards;
}
@keyframes ripple-out{
  to{ transform: scale(1); opacity:0; }
}

/* split-text headline reveal */
[data-split-reveal] .split-word{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom: .22em; /* generous safety margin so descenders (g/y/p/q/j)
                            are never clipped by this reveal mask — sized
                            deliberately generous since Instrument Serif's
                            descenders run deeper than the font it replaced */
}
[data-split-reveal] .split-word > span{
  display:inline-block;
  transform: translateY(110%);
  opacity: 0;
}
[data-split-reveal].split-in .split-word > span{
  transform: translateY(0);
  opacity: 1;
  transition: transform .9s var(--ease-out), opacity .7s ease-out;
}

/* ---------------------------------------------------------------------- */
/* Preloader                                                               */
/* ---------------------------------------------------------------------- */
#preloader{
  position: fixed; inset:0; z-index: 999999;
  background: #fffefb;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* A fixed design-space (560x460) sized via aspect-ratio, not derived from
   the logo's own footprint — this gives the bee generous room to roam on
   its wide loop before landing, matching the reference animation. Every
   child is positioned as a percentage of this same box, so everything
   scales together and stays perfectly aligned at any screen size. */
#preloader .pl-stage{
  position:relative;
  width: min(560px, 88vw);
  aspect-ratio: 560 / 460;
}
#preloader .pl-logo-text{
  position:absolute;
  left: 13.93%; top: 30.43%;
  width: 72.14%; height:auto;
  opacity:0;
}
#preloader .pl-bee-img{
  position:absolute;
  left: 51.6%; top: 46%;
  width: 14.5%; height:auto;
  opacity:0;
  transform-origin:50% 50%;
}
#preloader .pl-trail-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  pointer-events:none;
}
#preloader.done{
  pointer-events:none;
}

/* ---------------------------------------------------------------------- */
/* Cursor glow (desktop only, decorative)                                  */
/* ---------------------------------------------------------------------- */
#cursor-glow{
  position: fixed; z-index: 40; width:340px; height:340px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,201,60,.16), transparent 68%);
  pointer-events:none;
  transform: translate(-50%,-50%);
  will-change: transform;
  display:none;
}
@media (hover:hover) and (pointer:fine){
  #cursor-glow{ display:block; }
}

/* ---------------------------------------------------------------------- */
/* Navbar                                                                  */
/* ---------------------------------------------------------------------- */
#site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 20px 0;
  background: rgba(255,251,242,.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: padding var(--dur-m) var(--ease-out), background var(--dur-m), box-shadow var(--dur-m), border-color var(--dur-m);
}
#site-nav .nav-inner{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
}
#site-nav.scrolled{
  padding: 12px 0;
  background: rgba(255,251,242,.94);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 20px 40px -30px rgba(22,20,15,.35);
}
.nav-logo{ display:flex; align-items:center; gap:.6em; flex:none; }
.nav-logo img{ height: 34px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap: clamp(18px,2.4vw,34px);
}
.nav-links a{
  position:relative;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-soft);
  padding-bottom: 4px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height: 2px; background: var(--honey-deep);
  transition: right var(--dur-s) var(--ease-out);
  border-radius:2px;
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color: var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-burger{
  display:none;
  width: 44px; height:44px; border-radius:50%;
  border:1px solid var(--line);
  background: var(--paper);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  flex:none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-s), background var(--dur-s);
}
.nav-burger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition: transform .32s var(--ease-out), opacity .2s, width .32s var(--ease-out); }
.nav-burger.open{ background: var(--ink); border-color: var(--ink); }
.nav-burger.open span{ background: var(--cream); }
.nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; width:0; }
.nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

#mobile-menu-overlay{
  position: fixed; inset:0; z-index: 470;
  background: rgba(22,20,15,.42);
  backdrop-filter: blur(2px);
  opacity:0; visibility:hidden;
  transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
}
#mobile-menu-overlay.open{
  opacity:1; visibility:visible;
  transition: opacity .45s var(--ease-out), visibility 0s;
}

#mobile-menu{
  position: fixed; top:0; right:0; bottom:0; z-index: 480;
  width: min(380px, 86vw);
  height: 100dvh;
  background: rgba(255,251,242,.88);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-left: 1px solid rgba(255,251,242,.5);
  box-shadow: -30px 0 70px -30px rgba(22,20,15,.4);
  display:flex; flex-direction:column;
  padding: calc(env(safe-area-inset-top, 0px) + 100px) 30px 36px;
  overflow-y:auto;
  transform: translateX(100%);
  transition: transform .5s var(--ease-out);
}
#mobile-menu.open{ transform: translateX(0); }
.mm-links{ display:flex; flex-direction:column; }
#mobile-menu .mm-links a{
  position:relative;
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight:600;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  opacity:0;
  transform: translateX(28px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color var(--dur-s);
}
#mobile-menu.open .mm-links a{ opacity:1; transform:none; }
#mobile-menu .mm-links a:nth-child(1){ transition-delay: .08s; }
#mobile-menu .mm-links a:nth-child(2){ transition-delay: .13s; }
#mobile-menu .mm-links a:nth-child(3){ transition-delay: .18s; }
#mobile-menu .mm-links a:nth-child(4){ transition-delay: .23s; }
#mobile-menu .mm-links a:nth-child(5){ transition-delay: .28s; }
#mobile-menu .mm-links a:nth-child(6){ transition-delay: .33s; }
#mobile-menu .mm-links a.active{ color: var(--honey-text); }
#mobile-menu .mm-links a.active::before{
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background: var(--honey-deep);
}
#mobile-menu .mm-cta{
  margin-top: 26px; display:flex; gap:12px; flex-wrap:wrap;
  opacity:0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out) .38s, transform .5s var(--ease-out) .38s;
}
#mobile-menu.open .mm-cta{ opacity:1; transform:none; }
#mobile-menu .mm-cta .btn{ flex:1 1 auto; justify-content:center; }
.mm-contact{
  margin-top: auto; padding-top:26px; display:flex; gap:22px;
  border-top:1px solid var(--line);
  opacity:0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out) .43s, transform .5s var(--ease-out) .43s;
}
#mobile-menu.open .mm-contact{ opacity:1; transform:none; }
.mm-contact a{ font-size:.88rem; font-weight:600; color:var(--ink-mute); }
.mm-contact a:hover{ color: var(--ink); }

@media (max-width: 900px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-burger{ display:flex; }
}

/* ---------------------------------------------------------------------- */
/* Hero (home)                                                             */
/* ---------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-top: clamp(140px, 18vw, 210px);
  padding-bottom: clamp(60px, 8vw, 100px);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 5vw, 60px);
  align-items:center;
}
.hero-copy{ position:relative; }
.hero-copy .h-display{ margin-bottom: .3em; }
.hero-copy .lede{ margin-bottom: 2.1em; }
.hero-actions{ position:relative; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

.hero-visual{ position:relative; }
.hero-image-wrap{ position:relative; }
.hero-image-wrap .blob{
  position:absolute; z-index:0;
  width: 104%; height:104%; top:-2%; left:-2%;
  background: linear-gradient(155deg, var(--honey-pale), var(--honey) 70%);
  border-radius: 44% 56% 62% 38% / 46% 40% 60% 54%;
  filter: blur(.5px);
}
.hero-image-wrap .frame{
  position:relative; z-index:1;
  border-radius: 40% 60% 58% 42% / 48% 42% 58% 52%;
  overflow:hidden;
  aspect-ratio: 1/1.05;
  box-shadow: var(--shadow-soft);
}
.hero-image-wrap .frame img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-out); }
.hero-visual:hover .frame img{ transform: scale(1.04); }
.hero-caption{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  margin-top: 30px; font-size:.88rem; color: var(--ink-mute);
}
.hero-caption .stars{ display:flex; gap:2px; color: var(--honey-text); flex:none; }
.hero-caption .stars svg{ width:13px; height:13px; }

/* ---------------------------------------------------------------------- */
/* Inner page hero (about/courses/gallery/testimonials/contact/legal)      */
/* ---------------------------------------------------------------------- */
.page-hero{
  padding-top: clamp(130px, 16vw, 180px);
  padding-bottom: clamp(50px, 7vw, 84px);
  position:relative;
  overflow:hidden;
}
.page-hero .crumbs{
  display:flex; align-items:center; gap:8px;
  font-size:.85rem; color:var(--ink-mute); margin-bottom:1.4em;
}
.page-hero .crumbs a:hover{ color: var(--ink); }
.page-hero .h-display{ max-width: 16ch; }
.page-hero .lede{ margin-top: 1.1em; }

/* ---------------------------------------------------------------------- */
/* Section headers                                                         */
/* ---------------------------------------------------------------------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 30px; margin-bottom: clamp(36px,5vw,64px);
}
.section-head .h-xl{ max-width: 18ch; }
.section-head .lede{ margin:0; }
@media (max-width: 760px){
  .section-head{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------------- */
/* About — story / timeline                                                */
/* ---------------------------------------------------------------------- */
.story-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,72px); align-items:center;
}
.story-media{ position:relative; }
.story-media img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4/5; object-fit:cover;
}
.story-media .badge-ring{
  position:absolute; bottom:-30px; left:-30px;
  width:120px; height:120px;
  background: var(--ink); color:var(--cream);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--f-display); font-size:.82rem;
  line-height:1.25; padding:10px; box-shadow: var(--shadow-tight);
}
.story-copy p.body-text{ margin-bottom:1.2em; }

.timeline{ margin-top: clamp(50px,7vw,90px); position:relative; }
.timeline::before{
  content:""; position:absolute; left: 19px; top:10px; bottom:10px; width:2px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 8px, transparent 8px 16px);
}
.tl-item{ position:relative; padding-left: 62px; padding-bottom: clamp(30px,5vw,54px); }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background: var(--honey); border:6px solid var(--cream);
  box-shadow: 0 0 0 1px var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-body); font-size:.85rem; font-weight:700; color:var(--ink);
}
.tl-item h4{ font-size:1.25rem; margin-bottom:.3em; }
.tl-item p{ color:var(--ink-mute); max-width:56ch; }

/* ---------------------------------------------------------------------- */
/* Why us — icon grid                                                      */
/* ---------------------------------------------------------------------- */
.why-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 22px;
}
.why-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out), border-color var(--dur-s);
}
.why-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-tight);
  border-color: transparent;
}
.why-ic{
  width:52px; height:52px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background: var(--honey-pale); border-radius: 14px;
  color: var(--honey-deep);
  transition: transform var(--dur-s) var(--ease-out), background var(--dur-s);
}
.why-card:hover .why-ic{ transform: rotate(-8deg) scale(1.08); background: var(--honey); }
.why-ic svg{ width:26px; height:26px; }
.why-card h4{ font-size:1.08rem; margin-bottom:.4em; }
.why-card p{ font-size:.92rem; color:var(--ink-mute); }

@media (max-width: 1080px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Courses — hex cards                                                     */
/* ---------------------------------------------------------------------- */
.course-tabs{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 40px;
}
.course-tab{
  padding: .6em 1.3em; border-radius:999px; border:1px solid var(--line);
  font-weight:600; font-size:.88rem; background:var(--paper);
  transition: all var(--dur-s);
}
.course-tab.active, .course-tab:hover{ background: var(--ink); color:var(--cream); border-color:var(--ink); }

.course-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.course-card{
  position:relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 34px 28px 30px;
  border: 1px solid var(--line-soft);
  overflow:hidden;
  transition: transform var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease-out);
}
.course-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -24px rgba(245,166,35,.4), var(--shadow-soft);
  border-color: rgba(245,166,35,.35);
}
.course-card .hex-ic{
  width:64px; height:64px; position:relative; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
}
.course-card .hex-ic svg.hex-bg{
  position:absolute; inset:0; width:100%; height:100%;
  color: var(--honey-pale);
  transition: color var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
}
.course-card:hover .hex-ic svg.hex-bg{ color: var(--honey); transform: rotate(18deg); }
.course-card .hex-ic svg.ic{ position:relative; width:28px; height:28px; color:var(--ink); }
.course-card h3{ font-size:1.35rem; margin-bottom:.35em; }
.course-card p{ color:var(--ink-mute); font-size:.93rem; margin-bottom:1.3em; }
.course-card .tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
.course-card .tag{
  font-size:.76rem; font-weight:600; padding:.35em .8em; border-radius:999px;
  background: var(--cream-dim); color: var(--ink-soft);
}
.course-card .card-arrow{
  position:absolute; top:28px; right:28px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition: all var(--dur-s) var(--ease-out);
}
.course-card:hover .card-arrow{ background:var(--ink); border-color:var(--ink); transform: rotate(45deg); }
.course-card:hover .card-arrow svg{ color:var(--cream); }
.course-card .card-arrow svg{ width:16px;height:16px; color:var(--ink); }

@media (max-width: 1080px){ .course-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .course-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Learning options                                                        */
/* ---------------------------------------------------------------------- */
.options-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.option-card{
  border-radius: var(--radius-lg);
  padding: 38px 30px;
  position:relative; overflow:hidden;
  min-height: 300px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color: var(--cream);
  isolation:isolate;
}
.option-card::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background: var(--ink);
}
.option-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(120% 100% at 20% 0%, rgba(255,201,60,.34), transparent 60%);
  opacity:.9; transition: opacity var(--dur-m);
}
.option-card:hover::after{ opacity:1; }
.option-card .opt-num{
  position:absolute; top:26px; right:30px; font-family:var(--f-display); font-style:italic;
  font-size:1rem; color: rgba(255,251,242,.5);
}
.option-card svg.opt-ic{ width:38px; height:38px; margin-bottom:20px; color: var(--honey); transition: transform var(--dur-m) var(--ease-out); }
.option-card:hover svg.opt-ic{ transform: translateY(-6px) rotate(-6deg); }
.option-card h3{ color:var(--cream); font-size:1.5rem; margin-bottom:.3em; }
.option-card p{ color: rgba(255,251,242,.7); font-size:.92rem; }

@media (max-width: 900px){ .options-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Gallery — masonry + lightbox                                           */
/* ---------------------------------------------------------------------- */
.masonry{
  columns: 3 220px; column-gap: 22px;
}
.masonry .m-item{
  break-inside: avoid; margin-bottom: 22px; position:relative;
  border-radius: var(--radius-md); overflow:hidden; cursor: zoom-in;
  box-shadow: var(--shadow-tight);
}
.masonry .m-item img{
  width:100%; display:block;
  transition: transform .7s var(--ease-out);
}
.masonry .m-item:hover img{ transform: scale(1.07); }
.masonry .m-item .m-cap{
  position:absolute; left:0; right:0; bottom:0; padding: 22px 18px 16px;
  background: linear-gradient(to top, rgba(22,20,15,.78), transparent);
  color: var(--cream); font-size:.86rem; font-weight:600;
  opacity:0; transform: translateY(10px);
  transition: all var(--dur-s) var(--ease-out);
}
.masonry .m-item:hover .m-cap{ opacity:1; transform:translateY(0); }

#lightbox{
  position: fixed; inset:0; z-index: 9000;
  background: rgba(22,20,15,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity var(--dur-m) var(--ease-out);
  padding: 40px;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{
  max-width: min(1100px,90vw); max-height:82vh; border-radius: var(--radius-md);
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
  transform: scale(.94); transition: transform var(--dur-m) var(--ease-out);
}
#lightbox.open img{ transform: scale(1); }
#lightbox .lb-close, #lightbox .lb-nav{
  position:absolute; width:52px; height:52px; border-radius:50%;
  background: rgba(255,251,242,.12); border:1px solid rgba(255,251,242,.25);
  color: var(--cream); display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-s);
}
#lightbox .lb-close:hover, #lightbox .lb-nav:hover{ background: rgba(255,251,242,.24); }
#lightbox .lb-close{ top:28px; right:28px; }
#lightbox .lb-nav.prev{ left:28px; top:50%; transform:translateY(-50%); }
#lightbox .lb-nav.next{ right:28px; top:50%; transform:translateY(-50%); }
#lightbox .lb-nav svg, #lightbox .lb-close svg{ width:20px; height:20px; }

@media (max-width: 900px){ .masonry{ columns: 2 180px; } }
@media (max-width: 560px){ .masonry{ columns: 1; } }

/* ---------------------------------------------------------------------- */
/* Testimonials                                                            */
/* ---------------------------------------------------------------------- */
.testi-head{ text-align:center; max-width:640px; margin-inline:auto; }
.testi-head .lede{ margin-inline:auto; }
.testi-track-wrap{ overflow:hidden; margin-top: 50px; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);}
.testi-track{ display:flex; gap:24px; width:max-content; }
.t-card{
  width: min(380px, 82vw);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-tight);
  transition: transform var(--dur-m) var(--ease-out);
  flex: none;
}
.t-card:hover{ transform: translateY(-6px); }
.t-card .t-quote{ width:30px; height:24px; color: var(--honey-deep); margin-bottom:16px; }
.t-card .t-stars{ display:flex; gap:3px; margin-bottom:14px; }
.t-card .t-stars svg{ width:15px; height:15px; color: var(--honey-text); }
.t-card p{ font-size:.96rem; color: var(--ink-soft); line-height:1.6; margin-bottom:20px; }
.t-card .t-person{ display:flex; align-items:center; gap:12px; }
.t-card .t-avatar{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--honey); color:var(--ink);
  font-family: var(--f-body); font-weight:700; font-size:1rem;
  flex:none;
}
.t-card .t-name{ font-weight:700; font-size:.92rem; color:var(--ink); }
.t-card .t-tag{ font-size:.78rem; color: var(--ink-mute); }

.testi-controls{ display:flex; justify-content:center; gap:14px; margin-top:34px; }
.testi-controls button{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; background:var(--paper);
  transition: all var(--dur-s);
}
.testi-controls button:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.testi-controls button svg{ width:18px;height:18px; }

/* stat strip on testimonials page */
.stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.stat-strip-3{ grid-template-columns: repeat(3,1fr); max-width:760px; margin-inline:auto; }
.stat-box{ text-align:center; padding: 30px 10px; border-radius: var(--radius-md); background:var(--paper); border:1px solid var(--line-soft); }
.stat-box b{ font-family:var(--f-display); font-size:2.4rem; display:block; color:var(--ink); }
.stat-box span{ font-size:.85rem; color:var(--ink-mute); }
@media (max-width:760px){ .stat-strip{ grid-template-columns: repeat(2,1fr);} }

/* ---------------------------------------------------------------------- */
/* CTA band                                                                */
/* ---------------------------------------------------------------------- */
.cta-band{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  padding: clamp(46px,7vw,84px) clamp(28px,6vw,80px);
  background: var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap: 40px; flex-wrap:wrap;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 120% at 85% 20%, rgba(255,201,60,.28), transparent 60%);
}
.cta-band h2{ color:var(--cream); max-width: 14ch; position:relative; }
.cta-band .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; position:relative; }

/* ---------------------------------------------------------------------- */
/* Contact                                                                  */
/* ---------------------------------------------------------------------- */
.contact-grid{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px,5vw,70px);
}
.contact-info-card{
  background: var(--ink); color:var(--cream); border-radius: var(--radius-lg);
  padding: clamp(30px,4vw,44px); position:relative; overflow:hidden;
}
.contact-info-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(90% 60% at 10% 0%, rgba(255,201,60,.25), transparent 60%);
}
.contact-info-card h3{ color:var(--cream); position:relative; }
.contact-line{ display:flex; gap:16px; align-items:flex-start; margin-top: 26px; position:relative; }
.contact-line .ci-ic{
  width:44px; height:44px; border-radius:50%; background: rgba(255,251,242,.1);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-line .ci-ic svg{ width:20px; height:20px; color: var(--honey); }
.contact-line b{ display:block; font-size:.95rem; margin-bottom:2px; }
.contact-line span, .contact-line a{ font-size:.9rem; color: rgba(255,251,242,.68); }
.contact-line a:hover{ color: var(--honey); }
.map-embed{
  margin-top: 28px; border-radius: var(--radius-md); overflow:hidden; position:relative;
  border: 1px solid rgba(255,251,242,.15);
}
.map-embed iframe{ width:100%; height:220px; border:0; filter: grayscale(.25) contrast(1.05); }

.form-card{
  background: var(--paper); border-radius: var(--radius-lg); border:1px solid var(--line-soft);
  padding: clamp(28px,4vw,44px); box-shadow: var(--shadow-tight);
}
.field{ position:relative; margin-bottom: 24px; }
.field label{
  position:absolute; left:18px; top:16px; font-size:1rem; color: var(--ink-mute);
  transition: all var(--dur-s) var(--ease-out); pointer-events:none; background:var(--paper); padding:0 6px;
}
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 18px 8px; font-family:inherit; font-size:1rem; color:var(--ink);
  background: var(--paper); transition: border-color var(--dur-s);
}
.field textarea{ min-height:110px; resize:vertical; padding-top:22px; }
.field select{ padding-top: 16px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23342F26' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 16px center; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--honey-deep);
  box-shadow: 0 0 0 4px rgba(245,166,35,.14), 0 8px 20px -12px rgba(245,166,35,.4);
}
.field{ transition: transform var(--dur-s) var(--ease-out); }
.field:focus-within{ transform: translateY(-2px); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.has-value label{
  top:-9px; left:14px; font-size:.75rem; font-weight:700; color: var(--honey-text);
}
.field select + label{ top:-9px; left:14px; font-size:.75rem; font-weight:700; color: var(--honey-text); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.field .err{ font-size:.78rem; color:#b3392f; margin-top:6px; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#b3392f; }
.field.invalid .err{ display:block; }

#form-msg{
  display:none; align-items:center; gap:12px; padding:16px 18px; border-radius: var(--radius-sm);
  background: var(--honey-pale); color: var(--ink); font-weight:600; margin-top:6px; font-size:.92rem;
  opacity:0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
#form-msg.show{ display:flex; opacity:1; transform:none; }
#form-msg.error{ background:#f6dbd6; color:#7a271e; }
#form-msg .fm-check{
  width:26px; height:26px; border-radius:50%; background: var(--ink); color:var(--honey);
  display:flex; align-items:center; justify-content:center; flex:none;
}
#form-msg.error .fm-check{ background:#7a271e; color:#f6dbd6; }
#form-msg .fm-check svg{ width:14px; height:14px; stroke-dasharray:20; stroke-dashoffset:20; animation: fm-draw .5s ease-out .15s forwards; }
@keyframes fm-draw{ to{ stroke-dashoffset:0; } }

@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* Legal pages                                                             */
/* ---------------------------------------------------------------------- */
.legal-body{ max-width: 760px; }
.legal-body h2{ font-size:1.5rem; margin-top:2.2em; margin-bottom:.6em; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color: var(--ink-mute); margin-bottom:1em; max-width:70ch; }
.legal-body ul{ padding-left:1.2em; list-style:disc; }
.legal-body .updated{ color:var(--ink-mute); font-size:.88rem; margin-bottom:2.4em; }

/* ---------------------------------------------------------------------- */
/* Floating dock                                                           */
/* ---------------------------------------------------------------------- */
#dock{
  position: fixed; right: clamp(16px,3vw,30px); bottom: clamp(16px,3vw,30px); z-index: 600;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
#dock .dock-item{ display:flex; align-items:center; gap:0; }
#dock .dock-label{
  max-width:0; overflow:hidden; white-space:nowrap;
  background: var(--ink); color:var(--cream); font-size:.82rem; font-weight:600;
  padding: 0; border-radius: 999px; opacity:0;
  transition: all var(--dur-s) var(--ease-out);
  margin-right:0;
}
#dock .dock-item:hover .dock-label{ max-width:200px; opacity:1; padding: .6em 1em; margin-right:10px; }
#dock .dock-btn{
  width:54px; height:54px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-tight);
  transition: transform var(--dur-s) var(--ease-out);
}
#dock .dock-btn:hover{ transform: scale(1.08); }
#dock .dock-btn svg{ width:24px; height:24px; }
#dock .dock-btn.wa{ background:#25D366; color:#fff; }
#dock .dock-btn.call{ background: var(--ink); color: var(--honey); }
#dock .dock-btn.mail{ background: var(--honey); color: var(--ink); }
#dock .dock-main{
  width:58px; height:58px; border-radius:50%; background: var(--ink); color:var(--honey);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-soft);
}
#dock .dock-main svg{ width:24px; height:24px; transition: transform .35s var(--ease-out); }
#dock.open .dock-main svg{ transform: rotate(135deg); }
#dock .dock-items{
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
  max-height:0; overflow:hidden; opacity:0;
  transition: all var(--dur-m) var(--ease-out);
}
#dock.open .dock-items{ max-height:300px; opacity:1; }

/* ---------------------------------------------------------------------- */
/* Course detail modal / bottom sheet                                      */
/* ---------------------------------------------------------------------- */
.course-card{ cursor:pointer; }
.card-arrow{
  cursor:pointer;
  background: var(--paper);
  font: inherit;
}
.card-arrow:focus-visible{ outline: 2.5px solid var(--ink); outline-offset: 2px; }

#course-modal-overlay{
  position: fixed; inset:0; z-index: 800;
  background: rgba(22,20,15,.5);
  backdrop-filter: blur(6px);
  opacity:0; visibility:hidden;
  transition: opacity .4s var(--ease-out), visibility 0s linear .4s;
}
#course-modal-overlay.open{
  opacity:1; visibility:visible;
  transition: opacity .4s var(--ease-out), visibility 0s;
}

#course-modal{
  position: fixed; z-index: 810;
  left:50%; top:50%;
  width: min(560px, 90vw);
  max-height: 84vh;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 100px -20px rgba(22,20,15,.5);
  display: flex;
  flex-direction: column;
  transform: translate(-50%,-50%) scale(.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .4s;
}
#course-modal.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translate(-50%,-50%) scale(1);
  transition: opacity .4s var(--ease-out), transform .45s var(--ease-out), visibility 0s;
}
#course-modal .cm-handle{ display:none; flex:none; }
#course-modal #cm-close{
  position: absolute; top:18px; right:18px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background: rgba(22,20,15,.06);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-s), transform var(--dur-s);
  flex: none;
}
#course-modal #cm-close:hover{ background: var(--ink); color: var(--cream); transform: rotate(90deg); }
#course-modal #cm-close svg{ width:18px; height:18px; }

.cm-content{
  padding: 52px 40px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0; /* lets this flex child actually shrink and scroll instead
                    of forcing the whole modal to grow past its max-height */
}
.cm-ic{
  width:60px; height:60px; position:relative; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
}
.cm-ic svg.hex-bg{ position:absolute; inset:0; width:100%; height:100%; color: var(--honey); }
.cm-ic svg.ic{ position:relative; width:26px; height:26px; color:var(--ink); }
.cm-category{
  display:block; font-weight:700; font-size:.82rem; letter-spacing:.02em;
  color: var(--honey-text); margin-bottom:.5em;
}
.cm-title{ font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom:.5em; }
.cm-desc{ color: var(--ink-mute); font-size:1rem; line-height:1.65; margin-bottom:1.4em; max-width:52ch; }
.cm-bullets{ margin-bottom: 2em; }
.cm-bullets li{
  position:relative; padding-left:28px; margin-bottom:.7em;
  color: var(--ink-soft); font-size:.96rem; line-height:1.5;
}
.cm-bullets li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:16px; height:16px; border-radius:50%;
  background: var(--honey-pale);
  box-shadow: inset 0 0 0 1px rgba(245,166,35,.3);
}
.cm-bullets li::after{
  content:""; position:absolute; left:5px; top:.72em;
  width:6px; height:6px; border-radius:50%;
  background: var(--honey-deep);
}
.cm-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.cm-actions .btn-ghost{ display:inline-flex; align-items:center; gap:.5em; }

@media (max-width: 700px){
  #course-modal{
    left:0; right:0; top:auto; bottom:0; width:100%;
    max-height: 88dvh;
    border-radius: 28px 28px 0 0;
    transform: translateY(100%);
  }
  #course-modal.open{ transform: translateY(0); }
  #course-modal .cm-handle{
    display:block; flex:none;
    width:44px; height:5px; border-radius:999px;
    background: var(--line); margin: 10px auto 0;
  }
  #course-modal #cm-close{
    top:16px; right:16px;
    width:44px; height:44px;
  }
  .cm-content{ padding: 22px 24px 36px; }
  .cm-actions .btn{ flex:1 1 auto; justify-content:center; }
}


/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
footer{
  background: var(--ink); color: rgba(255,251,242,.7);
  padding-top: clamp(56px,7vw,90px);
  position:relative; overflow:hidden;
}
.footer-top{
  display:grid; grid-template-columns: 1.3fr repeat(3, .8fr); gap: 40px;
  padding-bottom: 60px; border-bottom: 1px solid rgba(255,251,242,.12);
}
.footer-brand img{ height:32px; margin-bottom:18px; }
.footer-brand p{ font-size:.9rem; max-width:32ch; line-height:1.6; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,251,242,.2);
  display:flex; align-items:center; justify-content:center; transition: all var(--dur-s);
}
.footer-social a:hover{ background: var(--honey); border-color:var(--honey); color:var(--ink); }
.footer-social svg{ width:16px;height:16px; }
.footer-col h5{ color:var(--cream); font-family:var(--f-body); font-weight:700; font-size:.85rem; letter-spacing:.02em; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ font-size:.9rem; transition: color var(--dur-s); }
.footer-col a:hover{ color: var(--honey); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding: 22px 0 26px; font-size:.82rem;
}
.footer-bottom a{ color: var(--ink-mute); }
.credit a{ color: #7fb3ff !important; font-weight:600; }
.credit a:hover{ text-decoration: underline; }

@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Scroll reveal utility (driven by JS: adds .in class)                    */
/* ---------------------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-scale]{ opacity:0; transform: scale(.92); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal-scale].in{ opacity:1; transform:none; }

/* generic scale-in for stagger children handled via inline delay */

/* ---------------------------------------------------------------------- */
/* Responsive — hero & story stacks                                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; max-width:420px; margin-inline:auto; }
  .story-grid{ grid-template-columns: 1fr; }
  .story-media{ max-width:420px; margin-inline:auto; }
}

@media (max-width: 700px){
  .section-pad{ padding-block: 64px; }
  .cta-band{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ==========================================================================
   MOBILE EXPERIENCE OVERHAUL
   Everything below this line is scoped to max-width media queries only —
   desktop styles above are untouched. Threshold of 900px matches the
   existing nav-burger breakpoint; 480px/380px add extra care for the
   smallest phones (320–390px wide).
   ========================================================================== */

@media (hover:none) and (pointer:coarse){
  a, button, .btn, .course-card, .why-card, .option-card, .m-item, .t-card{
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- Hero: full-height, centered, stacked ---------- */
@media (max-width: 900px){
  .hero{
    min-height: 100svh;
    display:flex;
    align-items:center;
    padding-top: clamp(110px, 24vw, 150px);
    padding-bottom: 56px;
  }
  .hero-grid{ width:100%; }
  .hero-copy{ text-align:center; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-actions{
    justify-content:center;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-top: 8px;
  }
  .hero-actions .btn{ width:100%; padding-top:1.05em; padding-bottom:1.05em; }
  .hero-visual{ max-width: 360px; }
  .hero-caption{ justify-content:center; text-align:left; }
  /* the arrow doodle is hand-tuned to point at the desktop side-by-side
     buttons — on mobile the buttons stack full-width, so the fixed offset
     no longer lands anywhere meaningful; hide it rather than show a
     stray mark. The sparkle and dotted-path doodles still read fine at
     any width, just scaled down via the base .doodle rule. */
  .doodle-arrow-hero{ display:none; }
}
@media (max-width: 480px){
  .h-display{ font-size: clamp(2.15rem, 9vw, 2.6rem); }
  .page-hero .h-display{ max-width: none; }
}

/* ---------- Typography breathing room ---------- */
@media (max-width: 900px){
  .lede{ max-width: 44ch; }
  p.body-text{ max-width: none; }
  .section-head{ margin-bottom: 32px; gap:14px; }
  .section-head .lede{ margin-top:2px; }
  h2.h-xl{ font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .why-card h4, .course-card h3{ font-size:1.15rem; }
  .eyebrow{ font-size:.98rem; }
}
@media (max-width: 380px){
  :root{ --gutter: 18px; }
  .h-display{ font-size: 2rem; }
}

/* ---------- Cards: single column, breathing room, tap feedback ---------- */
@media (max-width: 900px){
  .why-grid{ gap:16px; }
  .why-card{ padding: 26px 22px; }
  .why-ic{ width:56px; height:56px; }
  .why-ic svg{ width:28px; height:28px; }

  .options-grid{ gap:18px; }
  .option-card{ min-height:230px; padding:30px 26px; }

  .course-card:active, .why-card:active, .option-card:active{
    transform: scale(.975);
    transition: transform .15s var(--ease-out);
  }
  .course-tabs{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .course-tabs::-webkit-scrollbar{ display:none; }
  .course-tab{ flex:none; }
}
/* course cards get their roomier single-column treatment once the grid
   actually drops to one column (see the 640px breakpoint in the base
   .course-grid rules) — sizing them up any earlier would cramp the
   2-column tablet layout between 640–900px */
@media (max-width: 640px){
  .course-grid{ gap:20px; }
  .course-card{ padding: 30px 24px 26px; }
  .course-card .hex-ic{ width:72px; height:72px; }
  .course-card .hex-ic svg.ic{ width:32px; height:32px; }
  .course-card h3{ font-size:1.3rem; }
}

/* ---------- Story / timeline ---------- */
@media (max-width: 900px){
  .story-copy{ text-align:left; }
  .badge-ring{ width:100px; height:100px; font-size:.74rem; }
  .tl-item{ padding-left:54px; }
}
@media (max-width: 420px){
  /* On the narrowest phones the badge's -30px bleed can push it past the
     viewport edge (clipped invisibly by the overflow-x:hidden safety net
     rather than causing a scrollbar, but still worth tightening up). */
  .badge-ring{ width:84px; height:84px; bottom:-14px; left:-14px; font-size:.68rem; padding:8px; }
}

/* ---------- Gallery: rounded, spaced, always-visible captions ---------- */
@media (max-width: 900px){
  .masonry{ column-gap:16px; }
  .masonry .m-item{ margin-bottom:16px; border-radius: var(--radius-lg); }
  .masonry .m-item .m-cap{
    opacity:1; transform:none;
    position:static;
    background:none;
    color: var(--ink-mute);
    font-size:.86rem; font-weight:600;
    padding: 12px 2px 0;
  }
  .masonry .m-item:active img{ transform: scale(1.03); }
}
@media (max-width: 640px){
  #lightbox{ padding: 18px; }
  #lightbox .lb-close{ top:16px; right:16px; width:44px; height:44px; }
  #lightbox .lb-nav{ width:44px; height:44px; }
  #lightbox .lb-nav.prev{ left:10px; }
  #lightbox .lb-nav.next{ right:10px; }
}

/* ---------- Testimonials: swipeable, larger type, glass ---------- */
@media (max-width: 900px){
  .testi-head{ text-align:center; padding-inline: 4px; }
  .testi-track-wrap{ margin-top:32px; cursor: grab; }
  .testi-track-wrap.dragging{ cursor: grabbing; }
  .t-card{
    width: min(340px, 84vw);
    padding: 28px 24px;
    background: rgba(255,251,242,.7);
    backdrop-filter: blur(10px);
  }
  .t-card .t-quote{ width:36px; height:28px; }
  .t-card p{ font-size:1.02rem; }
  .t-card .t-name{ font-size:.96rem; }
  .t-card .t-tag{ font-size:.82rem; }
  .testi-controls{ margin-top:24px; }
  #testi-grid{ display:flex !important; flex-direction:column; gap:18px; }
  #testi-grid .t-card{ width:100%; }
}

/* ---------- Contact form: larger touch targets ---------- */
@media (max-width: 900px){
  .contact-info-card{ padding: 28px 24px; }
  .contact-line{ margin-top:22px; }
  .form-card{ padding: 26px 20px; }
  .field input, .field select, .field textarea{
    padding: 20px 18px 10px;
    font-size: 1rem;
    border-radius: var(--radius-md);
    min-height: 58px;
  }
  .field textarea{ min-height:120px; }
  .field label{ font-size:1.02rem; top:19px; }
  .field input:focus + label, .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
  .field select + label, .field.has-value label{ top:-9px; font-size:.76rem; }
  .field-row{ gap:16px; }
  #contact-form .btn{ padding-top:1.1em; padding-bottom:1.1em; font-size:1.02rem; }
}

/* ---------- Floating dock: safe spacing + entrance + subtle bounce ---------- */
@media (max-width: 900px){
  #dock{ right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  #dock .dock-btn{ width:50px; height:50px; }
  #dock .dock-main{ width:54px; height:54px; }
  #dock{
    opacity:0; transform: translateY(30px) scale(.9);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  }
  #dock.dock-visible{ opacity:1; transform:none; }
}
@media (hover:none) and (pointer:coarse){
  #dock.dock-visible .dock-main{ animation: dock-bounce 4.5s ease-in-out infinite; }
  @keyframes dock-bounce{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-5px); }
  }
}

/* ---------- Footer: centered, spaced ---------- */
@media (max-width: 900px){
  footer{ text-align:center; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
  .footer-brand p{ max-width:38ch; }
  .footer-social{ justify-content:center; }
  .footer-col{ display:flex; flex-direction:column; align-items:center; }
  .footer-top{ gap: 40px 24px; padding-bottom:44px; }
  .footer-bottom{ flex-direction:column; text-align:center; padding: 24px 0; }
  .footer-bottom span{ justify-content:center; }
}

/* ---------- Buttons: never let long labels or larger phone font-scale
   clip against the button's own overflow:hidden — let them wrap instead ---------- */
@media (max-width: 900px){
  .btn{
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    min-width: 0;
  }
  .hero-actions, .cta-actions, .mm-cta{ min-width: 0; }
  .hero-actions .btn, .cta-actions .btn{ flex: 1 1 auto; }
}
@media (max-width: 900px){
  html, body{ max-width:100%; overflow-x:hidden; }
  /* Any long unbroken string (an email address, a URL) can force
     horizontal overflow on a narrow phone even when everything else is
     sized correctly — let those wrap instead of pushing the layout wide. */
  p, a, span, li, .contact-line, .footer-col, .footer-brand p{
    overflow-wrap: break-word;
    word-break: break-word;
  }
}