:root {
    --deep: #285260;
    --teal: #548C92;
    --aqua: #B4D7D8;
    --cream: #E0D7CF;
    --tan:  #AB9072;
    --ink:  #1c343d;
    --paper: #EEF2F0;
    --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;

    --glass-light: rgba(255,255,255,0.55);
    --glass-light-brd: rgba(255,255,255,0.6);
    --glass-dark: rgba(255,255,255,0.08);
    --glass-dark-brd: rgba(255,255,255,0.18);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }

  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    cursor: none;
  }
  @media (hover: none) { body { cursor: auto; } }

  h1,h2,h3,h4 { font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; }
  strong, b { font-weight: 600; }

  /* ---------- Cursor ---------- */
  .cursor,.cursor-ring{position:fixed;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:9999;mix-blend-mode:difference;}
  .cursor{width:7px;height:7px;background:#fff;transition:width .3s,height .3s;}
  .cursor-ring{width:34px;height:34px;border:1px solid #fff;z-index:9998;transition:width .4s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1),opacity .3s;}
  .cursor.hover{width:12px;height:12px;}
  .cursor-ring.hover{width:56px;height:56px;opacity:.5;}
  @media (hover:none){.cursor,.cursor-ring{display:none;}}

  .progress{position:fixed;top:0;left:0;height:2px;background:var(--deep);z-index:300;transform-origin:left;transform:scaleX(0);}

  /* ---------- Loader ---------- */
  .loader{position:fixed;inset:0;background:var(--deep);z-index:10000;display:grid;place-items:center;color:var(--paper);}
  .loader-text{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:300;overflow:hidden;letter-spacing:.01em;}
  .loader-text span{display:inline-block;transform:translateY(110%);}

  /* ---------- Layout ---------- */
  /* Base page margin: 28px — matches hero-stage-wrap padding so all sections feel inset equally */
  :root { --page-gap: 28px; --card-radius: 28px; }
  .wrap{max-width:1320px;margin:0 auto;padding:0 var(--page-gap);}
  section{position:relative;padding:6rem 0;}
  @media (max-width:760px){
    :root { --page-gap: 16px; }
    section{padding:4rem 0;}
  }

  .eyebrow{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.7rem;color:var(--teal);margin-bottom:1.1rem;font-weight:500;}
  .eyebrow::before{content:'';width:22px;height:1px;background:currentColor;}
  .eyebrow.light{color:var(--aqua);}

  .h-display{font-family:var(--serif);font-weight:300;font-style:italic;letter-spacing:-.01em;line-height:1;}
  .h-xl{font-size:clamp(2.4rem,6vw,4.6rem);}
  .h-lg{font-size:clamp(2rem,4.6vw,3.4rem);}
  .h-md{font-size:clamp(1.4rem,2.8vw,1.9rem);}

  em.acc{font-family:var(--serif);font-style:italic;color:var(--teal);font-weight:300;}
  em.acc.lite{color:var(--aqua);}

  .glass{
    background:var(--glass-light);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid var(--glass-light-brd);
    border-radius:var(--card-radius);
    box-shadow:0 24px 60px -32px rgba(28,52,61,.45),inset 0 1px 0 rgba(255,255,255,.6);
  }
  .glass.dark{
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(224,215,207,0.18);
    box-shadow:
      0 8px 32px rgba(0,0,0,.25),
      0 2px 8px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(224,215,207,.22),
      inset 0 -1px 0 rgba(0,0,0,.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .mist{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;z-index:0;}

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:100px;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s;font-family:inherit;white-space:nowrap;}
  .btn:hover{transform:scale(1.04);}
  .btn-primary{background:var(--deep);color:var(--paper);}
  .btn-primary:hover{background:var(--ink);}
  .btn-light{background:var(--aqua);color:var(--deep);}
  .btn-light:hover{background:#fff;}
  .btn-dark{background:var(--ink);color:var(--paper);}
  .btn-dark:hover{background:#000;}
  .btn-ghost{background:transparent;border:1px solid currentColor;color:inherit;}
  .btn .arrow{display:inline-grid;place-items:center;width:24px;height:24px;background:var(--paper);color:var(--deep);border-radius:50%;}
  .btn-light .arrow{background:var(--deep);color:var(--aqua);}

  /* ---------- Read more ---------- */
  .more-wrap{position:relative;}
  .more-content{overflow:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1);}
  .more-btn{margin-top:.8rem;background:none;border:none;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--deep);display:inline-flex;align-items:center;gap:.5rem;padding:0;}
  .more-btn::after{content:'+';font-size:1rem;line-height:1;transition:transform .3s;}
  .more-btn.open::after{content:'−';transform:rotate(0);}
  .more-content[data-open="false"]{max-height:0;}
  .dark .more-btn{color:var(--aqua);}

  /* =====================================================
     NAV — single fixed bar, always visible
     Glass style over hero → dark teal when scrolled past hero
     ===================================================== */
  .nav-fixed-wrap{
    position:fixed;top:0;left:0;right:0;z-index:300;
    padding:var(--page-gap) 0 0;
    pointer-events:auto;
  }
  .nav-fixed-wrap .wrap{padding:0 var(--page-gap);}
  .nav{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
    padding:.55rem .55rem .55rem 1.6rem;
    background:rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:var(--card-radius);
    color:#fff;
    transition:background .4s,border-color .4s;
  }
  /* Scrolled past hero — solid dark */
  .nav-fixed-wrap.scrolled .nav{
    background:rgba(22,46,56,.95);
    border-color:rgba(255,255,255,.12);
  }
  .nav-links{display:flex;gap:1.6rem;list-style:none;font-size:.82rem;letter-spacing:.02em;}
  .nav-links a{color:inherit;text-decoration:none;opacity:.85;position:relative;padding:.3rem 0;}
  .nav-links a:hover{opacity:1;}
  .nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.3,1);}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
  .nav-brand{display:flex;align-items:center;gap:.55rem;justify-content:center;text-decoration:none;color:inherit;font-size:.96rem;font-weight:600;letter-spacing:.005em;}
  .nav-brand svg{width:22px;height:22px;flex-shrink:0;}
  .nav-brand small{font-family:var(--serif);font-style:italic;font-weight:300;opacity:.85;margin-left:.15rem;letter-spacing:.01em;}
  .nav-right{display:flex;justify-content:flex-end;}
  .nav-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .55rem .55rem 1.2rem;background:#fff;color:var(--deep);border-radius:100px;text-decoration:none;font-size:.82rem;font-weight:600;transition:transform .3s;}
  .nav-cta:hover{transform:scale(1.04);}
  .nav-cta .arrow{display:inline-grid;place-items:center;width:26px;height:26px;background:var(--deep);color:#fff;border-radius:50%;}
  @media (max-width:860px){
    .nav{grid-template-columns:auto 1fr auto;padding-left:1rem;}
    .nav-links{display:none;}
    .nav-brand{justify-content:flex-start;}
  }
  @media (max-width:600px){
    .nav{padding:.5rem .5rem .5rem .9rem;gap:.5rem;}
    .nav-brand{font-size:.82rem;}
    .nav-brand svg{width:18px;height:18px;}
    .nav-cta{padding:.45rem .45rem .45rem .9rem;font-size:.75rem;}
    .nav-cta .arrow{width:22px;height:22px;}
  }

  /* =====================================================
     HERO
     ===================================================== */
  #hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
  .hero-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,52,61,.25) 0%,rgba(28,52,61,0) 40%,rgba(28,52,61,.55) 100%);}

  /* Body just needs top padding equal to the page gap so hero card has its white border */
  body{padding-top:var(--page-gap);}

  /* Fixed nav overlays the very top of the hero card, inset by page-gap on all sides */
  .nav-fixed-wrap{
    position:fixed;top:var(--page-gap);left:0;right:0;z-index:300;
    padding:0;
    pointer-events:auto;
  }
  .nav-fixed-wrap .wrap{padding:0 var(--page-gap);}

  .hero{padding-top:0;padding-bottom:4rem;}
  .hero-stage-wrap{padding:0;}
  .hero-stage{position:relative;border-radius:var(--card-radius);overflow:hidden;height:min(92vh,860px);min-height:580px;}
  /* Hero content starts below the nav bar height */
  

  /* hero content — title bottom-left, sub+cta bottom-right */
  .hero-content{
    position:absolute;inset:0;z-index:5;
    /* top padding clears nav bar: nav height ~52px + page-gap spacing */
    padding:calc(52px + var(--page-gap) * 1.5) calc(var(--page-gap) + .4rem) calc(var(--page-gap) + 1rem);
    display:flex;flex-direction:column;justify-content:space-between;
    color:#fff;pointer-events:none;
  }
  .hero-content > *{pointer-events:auto;}
  .hero-welcome{align-self:flex-end;font-size:1.15rem;font-weight:300;letter-spacing:.01em;opacity:0;font-family:var(--serif);font-style:italic;text-align:right;}
  /* bottom row: title left, sub+cta right */
  .hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;}
  @media (max-width:820px){.hero-bottom{flex-direction:column;align-items:flex-start;gap:1.4rem;}}

  /* Title — "Intelligent\nMovement\nfor Lifelong Wellbeing." stacked lines */
  .hero-title{
    font-family:var(--sans);font-weight:300;
    line-height:1.08;letter-spacing:-.02em;color:#fff;
    /* No overflow:hidden so last line is never clipped */
  }
  .hero-title .line{display:block;overflow:hidden;padding-bottom:.08em;/* small buffer so descenders aren't clipped */}
  .hero-title .line span{display:inline-block;transform:translateY(110%);}
  .hero-title .hero-line1{font-size:clamp(2.4rem,6.5vw,6rem);font-weight:300;}
  .hero-title .hero-line2{font-size:clamp(2.4rem,6.5vw,6rem);font-weight:300;}
  .hero-title .hero-line2 .acc-italic{font-family:var(--serif);font-style:italic;font-weight:300;color:rgba(180,215,216,.82);}

  /* sub + cta — pushed to bottom-right */
  .hero-right{max-width:22rem;flex-shrink:0;text-align:left;margin-bottom:.2rem;}
  .hero-sub{font-size:.95rem;line-height:1.55;opacity:0;margin-bottom:1.4rem;}
  .hero-actions{opacity:0;}

  @media (max-width:820px){
    .hero-right{max-width:100%;}
  }
  @media (max-width:600px){
    .hero-content{padding:4.5rem 1.4rem 2rem;}
    .hero-stage{border-radius:calc(var(--card-radius) + 8px);}
    .hero-title .hero-line1,.hero-title .hero-line2{font-size:clamp(1.9rem,7.5vw,3.4rem);}
  }

  /* =====================================================
     EDITORIAL BANNER (Moss-style)
     ===================================================== */
  /* =====================================================
     BANNER — editorial statement
     Equal top / bottom whitespace, mixed serif + sans
     ===================================================== */
  .banner{
    padding:10rem 0 16rem;
    background:var(--paper);
    position:relative;
    overflow:hidden;
  }
  .banner .wrap{max-width:900px;}
  .banner-statement{
    text-align:center;
    color:var(--deep);
    line-height:1.22;
    letter-spacing:-.01em;
  }
  .banner-statement p{
    font-family:var(--sans);
    font-size:clamp(1.45rem,3.4vw,2.6rem);
    font-weight:300;
    color:var(--deep);
    margin:0;
    display:block;
  }
  .banner-statement p + p{margin-top:.18em;}
  /* Serif italic spans — 'Serenity' and 'a lifelong practice' */
  .banner-statement .serif-ital{
    font-family:var(--serif);
    font-style:italic;
    font-weight:300;
    font-size:1.08em;
    letter-spacing:-.015em;
    line-height:inherit;
  }
  @media(max-width:700px){
    .banner{padding:6.5rem 0 10rem;}
    .banner-statement p{font-size:clamp(1.2rem,5.5vw,1.75rem);}
  }

  /* =====================================================
     WHY SERENITY — redesigned principle cards
     ===================================================== */

  /* Section background: warm tan/camel */
  .why{
    background: #AB9072;
    overflow: hidden;
    position: relative;
  }
  /* Subtle noise/warmth texture overlay */
  .why::before{
    content:'';
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse at 10% 0%, rgba(224,215,207,.18) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 100%, rgba(28,52,61,.12) 0%, transparent 55%);
    pointer-events:none;z-index:0;
  }

  /* Header */
  .why .wrap{position:relative;z-index:1;}
  .why-head{
    display:grid;grid-template-columns:1fr 1fr;
    gap:3rem;align-items:end;
    margin-bottom:4rem;max-width:1240px;
  }
  @media (max-width:820px){.why-head{grid-template-columns:1fr;gap:1.2rem;margin-bottom:2.8rem;}}
  .why-head p{
    color:var(--cream);
    opacity:.82;
    max-width:30rem;
    font-size:1rem;
    line-height:1.6;
  }
  .why-title{
    font-family:var(--serif);font-style:italic;font-weight:300;
    letter-spacing:-.015em;
    font-size:clamp(2.6rem,5.4vw,4rem);
    line-height:1;
    color:var(--cream);
  }
  .why-title b{
    font-family:var(--sans);font-style:normal;font-weight:500;
    font-size:.88em;letter-spacing:-.01em;
    color:var(--cream);
  }
  .why .eyebrow{color:rgba(224,215,207,.7);}
  .why .eyebrow::before{background:rgba(224,215,207,.5);}

  /* Cards grid — horizontal scroll on mobile */
  /* Desktop + tablet: 4-col row */
  .folders{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.4rem;
    position:relative;z-index:1;
    align-items:stretch;
  }
  /* Tablet narrow: 2x2 */
  @media (max-width:860px){
    .folders{
      grid-template-columns:repeat(2,1fr);
    }
  }
  /* Mobile: single column vertical stack */
  @media (max-width:500px){
    .folders{
      grid-template-columns:1fr;
      gap:1rem;
    }
  }

  /* Individual card */
  .folder{
    border-radius:22px;
    position:relative;
    overflow:hidden;
    display:flex;flex-direction:column;
    min-height:300px;
    cursor:default;
    transition: transform .45s cubic-bezier(.22,.68,0,1.2), box-shadow .45s ease;
    will-change:transform;
  }
  /* Mobile: full width vertical */
  @media (max-width:500px){
    .folder{min-height:220px;}
  }

  /* Hover lift */
  .folder:hover{
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 24px 60px rgba(28,52,61,.22), 0 4px 16px rgba(28,52,61,.1);
  }

  /* Card 1 — cream/sand */
  .folder:nth-child(1){
    background: #E0D7CF;
  }
  .folder:nth-child(1) .fnum{color:var(--tan);}
  .folder:nth-child(1) h3{color:var(--deep);opacity:1;}
  .folder:nth-child(1) .blurb{color:var(--deep);opacity:.6;}

  /* Card 2 — cream/sand */
  .folder:nth-child(2){
    background: #E0D7CF;
  }
  .folder:nth-child(2) .fnum{color:var(--tan);}
  .folder:nth-child(2) h3{color:var(--deep);opacity:1;}
  .folder:nth-child(2) .blurb{color:var(--deep);opacity:.6;}

  /* Card 3 — photo background (silhouette) */
  .folder:nth-child(3){
    background: var(--deep);
    color:var(--cream);
  }
  .folder:nth-child(3) .card-photo{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center 20%;
    display:block;
    transition: transform .6s cubic-bezier(.22,.68,0,1.2);
  }
  .folder:nth-child(3):hover .card-photo{
    transform: scale(1.06);
  }
  .folder:nth-child(3)::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top, rgba(10,30,36,.92) 0%, rgba(10,30,36,.6) 45%, rgba(10,30,36,.25) 100%);
    z-index:1;
  }
  .folder:nth-child(3) .card-inner{position:relative;z-index:2;}
  .folder:nth-child(3) .fnum{color:#C4A882;}
  .folder:nth-child(3) h3{color:var(--cream);}
  .folder:nth-child(3) .blurb{color:var(--cream);opacity:.82;}

  /* Card 4 — cream/sand #E0D7CF */
  .folder:nth-child(4){
    background: #E0D7CF;
  }
  .folder:nth-child(4) .fnum{color:var(--tan);}
  .folder:nth-child(4) h3{color:var(--deep);opacity:1;}
  .folder:nth-child(4) .blurb{color:var(--deep);opacity:.6;}

  /* Card inner padding (shared) */
  .card-inner{
    padding:1.6rem 1.6rem 1.8rem;
    display:flex;flex-direction:column;
    justify-content:flex-start;
    flex:1;
    height:100%;
    box-sizing:border-box;
    hyphens:none;
    -webkit-hyphens:none;
  }

  .folder .fnum{
    font-size:.6rem;letter-spacing:.25em;
    font-weight:600;margin-bottom:.6rem;
    text-transform:uppercase;
    opacity:.7;
  }
  .folder h3{
    font-family:var(--serif);font-style:italic;font-weight:300;
    font-size:1.7rem;line-height:1.15;
    letter-spacing:-.02em;
    margin-bottom:.9rem;
    min-height:3.8rem;
    display:flex;align-items:flex-start;
  }
  /* Tan hairline above title — adds rhythm between label and title */
  .folder:nth-child(1) .card-inner,
  .folder:nth-child(2) .card-inner,
  .folder:nth-child(4) .card-inner{
    border-top:2px solid var(--tan);
    padding-top:1.6rem;
  }
  /* Photo card — cream hairline */
  .folder:nth-child(3) .card-inner{
    border-top:2px solid rgba(224,215,207,.45);
    padding-top:1.6rem;
  }
  .folder .blurb{
    font-size:.85rem;line-height:1.65;
    flex:1;
    hyphens:none;
    -webkit-hyphens:none;
    word-break:normal;
  }

  /* Scroll-reveal stagger — progressive enhancement */
  /* Cards visible by default; .why.js-ready hides them until observed */
  .why.js-ready .folder{opacity:0;transform:translateY(32px);}
  .why.js-ready .folder.visible{
    opacity:1;transform:translateY(0);
    transition:opacity .65s ease, transform .65s cubic-bezier(.22,.68,0,1.2), box-shadow .45s ease;
  }
  .why.js-ready .folder.visible:nth-child(1){transition-delay:.05s;}
  .why.js-ready .folder.visible:nth-child(2){transition-delay:.15s;}
  .why.js-ready .folder.visible:nth-child(3){transition-delay:.25s;}
  .why.js-ready .folder.visible:nth-child(4){transition-delay:.35s;}

  /* =====================================================
     REFORMER explainer — short hook + 3 quick points
     ===================================================== */
  .reformer{background:radial-gradient(circle at 80% 0%,rgba(180,215,216,.5),transparent 45%),var(--paper);overflow:hidden;}
  .reformer-grid{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;}
  @media (max-width:880px){.reformer-grid{grid-template-columns:1fr;gap:2.4rem;}}
  .reformer-hook{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:300;line-height:1.25;color:var(--deep);margin:1.2rem auto 2.2rem;max-width:40rem;}
  .reformer-desc{max-width:44rem;margin:0 auto 2.4rem;}
  .reformer-desc p{font-size:1.02rem;line-height:1.95;color:var(--deep);}
  .reformer-desc .kw{font-family:var(--serif);font-style:italic;color:var(--teal);font-weight:400;}
  .reformer-reveal .word{will-change:opacity;}

  /* Who is it for — chips */
  .who-for{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;}
  .who-for span{font-size:.76rem;padding:.45rem .85rem;border-radius:100px;background:rgba(84,140,146,.12);color:var(--deep);border:1px solid rgba(84,140,146,.22);}
  @media (max-width:880px){
    .reformer-grid{grid-template-columns:1fr;gap:2.4rem;}
  }

  /* =====================================================
     METHOD steps
     ===================================================== */
  .method{
    background:
      radial-gradient(ellipse at 15% 50%, rgba(84,140,146,.55) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 10%, rgba(180,215,216,.22) 0%, transparent 45%),
      radial-gradient(ellipse at 60% 90%, rgba(28,52,61,.8) 0%, transparent 50%),
      linear-gradient(145deg, #2a5f66 0%, var(--deep) 50%, #1a3a42 100%);
    color:var(--paper);
    overflow:hidden;
    position:relative;
  }
  .method-head{max-width:42rem;margin-bottom:2.8rem;}
  .method-head p{opacity:.82;margin-top:.8rem;font-size:.96rem;}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative;z-index:1;}
  @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.steps{grid-template-columns:1fr;}}
  .step{padding:1.7rem 1.5rem 1.9rem;color:var(--paper);position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column;}
  .step .snum{font-family:var(--serif);font-style:italic;font-size:3.2rem;font-weight:300;line-height:1;color:rgba(180,215,216,.55);margin-bottom:auto;}
  .step h4{font-size:1.1rem;margin-bottom:.45rem;font-weight:500;}
  .step p{font-size:.82rem;opacity:.8;line-height:1.5;}
  .step{
    transition: transform .38s cubic-bezier(.22,.68,0,1.2),
                box-shadow .38s ease,
                border-color .38s ease;
  }
  .step:hover{
    transform: translateY(-6px);
    border-color: rgba(180,215,216,.45) !important;
    box-shadow:
      0 20px 50px rgba(0,0,0,.3),
      0 4px 12px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(224,215,207,.35),
      inset 0 -1px 0 rgba(0,0,0,.12);
  }

  /* =====================================================
     EQUIPMENT — sticky-stack cards (CSS-only scroll)
     ===================================================== */
  .equip{
    background: var(--cream);
    padding-bottom: 4rem;
  }

  /* Each card is a sticky block — stacks as you scroll */
  .equip-cards{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .eq-card{
    position: sticky;
    top: calc(50vh - 233px);       /* vertically centred in viewport */
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    margin-bottom: calc(50vh - 233px + 60px); /* scroll room for next card */
    /* Each subsequent card sits on top due to z-index */
  }
  .eq-card:nth-child(1){ z-index:1; }
  .eq-card:nth-child(2){ z-index:2; }
  .eq-card:nth-child(3){ z-index:3; margin-bottom: calc(50vh - 233px + 60px); }

  /* Colour themes */
  .eq-card:nth-child(1){ background: var(--deep); }
  .eq-card:nth-child(2){ background: var(--teal); }
  .eq-card:nth-child(3){ background: #fff; }

  /* Photo side */
  .eq-photo{
    position: relative;
    overflow: hidden;
  }
  .eq-photo svg{
    width:100%;height:100%;
    position:absolute;inset:0;
    display:block;
  }

  /* Content side */
  .eq-body{
    padding: 3rem 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .eq-num{
    font-size: .6rem; letter-spacing: .24em; font-weight: 700;
    text-transform: uppercase; margin-bottom: 1rem;
    display: flex; align-items: center; gap: .6rem;
  }
  .eq-num::before{
    content:''; width: 20px; height: 1.5px; background: var(--tan);
  }
  .eq-body h4{
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(1.7rem,2.8vw,2.3rem); line-height: 1.1;
    letter-spacing: -.02em; margin-bottom: 1rem;
  }
  .eq-body p{
    font-size: .98rem; line-height: 1.7; max-width: 26rem;
  }
  .eq-tags{
    display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem;
  }
  .eq-tag{
    font-size: .72rem; font-weight: 600; letter-spacing: .05em;
    padding: .35rem .9rem; border-radius: 999px;
    border: 1px solid currentColor; cursor: default;
  }

  /* Card 1 — deep teal */
  .eq-card:nth-child(1) .eq-num{ color: var(--tan); }
  .eq-card:nth-child(1) h4{ color: var(--cream); }
  .eq-card:nth-child(1) p{ color: rgba(224,215,207,.82); }
  .eq-card:nth-child(1) .eq-tag{ color: var(--aqua); border-color: rgba(180,215,216,.4); }

  /* Card 2 — mid teal */
  .eq-card:nth-child(2) .eq-num{ color: var(--cream); }
  .eq-card:nth-child(2) h4{ color: #fff; }
  .eq-card:nth-child(2) p{ color: rgba(255,255,255,.82); }
  .eq-card:nth-child(2) .eq-tag{ color: var(--cream); border-color: rgba(224,215,207,.4); }

  /* Card 3 — white */
  .eq-card:nth-child(3) .eq-num{ color: var(--teal); }
  .eq-card:nth-child(3) .eq-num::before{ background: var(--teal); }
  .eq-card:nth-child(3) h4{ color: var(--deep); }
  .eq-card:nth-child(3) p{ color: var(--deep); opacity: .78; }
  .eq-card:nth-child(3) .eq-tag{ color: var(--deep); border-color: rgba(40,82,96,.25); }

  @media(max-width:760px){
    .eq-card{ grid-template-columns:1fr; min-height:480px; top: 80px; margin-bottom: 1.5rem; }
    .eq-card:nth-child(3){ margin-bottom: 1.5rem; }
    .eq-photo{ min-height: 220px; }
    .eq-body{ padding: 1.8rem 1.4rem; }
  }

  /* =====================================================
     CLASSES — image-led, big ghosted bg text
     ===================================================== */
  .classes{background:linear-gradient(180deg,var(--deep),#1f424d);color:var(--paper);overflow:hidden;position:relative;}
  .classes .mist{z-index:0;}
  /* Big ghosted background type */
  .ghost-text{
    position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:120%;text-align:center;
    font-family:var(--sans);
    font-size:clamp(5rem,14vw,14rem);
    font-weight:800;
    letter-spacing:-.04em;
    line-height:.9;
    color:rgba(180,215,216,.06);
    pointer-events:none;
    white-space:nowrap;
    z-index:0;
    user-select:none;
  }

  .classes .wrap{position:relative;z-index:1;}
  .classes-head{max-width:42rem;margin-bottom:2.6rem;}
  .classes-head p{opacity:.82;margin-top:.8rem;font-size:.96rem;}
  .subhead{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--aqua);margin:3rem 0 1.2rem;display:flex;align-items:center;gap:.7rem;font-weight:600;}
  .subhead::after{content:'';flex:1;height:1px;background:rgba(180,215,216,.25);}

  /* Image-led class format cards */
  .format-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
  @media (max-width:760px){
    .format-grid{grid-template-columns:1fr;}
  }
  .fcard{
    position:relative;
    border-radius:var(--card-radius);overflow:hidden;
    aspect-ratio:5/3.4;
    min-height:300px;
    color:#fff;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:1.6rem;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  /* Mobile override must come AFTER the base .fcard rule to win on source order */
  @media (max-width:760px){
    .fcard{aspect-ratio:auto;min-width:0;min-height:260px;}
  }
  .fcard:hover{transform:translateY(-4px);}
  .fcard .fbg{position:absolute;inset:0;z-index:0;}
  .fcard.f1 .fbg{background:url("/images/serenity/img-01.jpg") center/cover no-repeat;}
  .fcard.f2 .fbg{background:url("/images/serenity/img-02.jpg") center/cover no-repeat;}
  .fcard .fbg::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.30),transparent 35%,transparent 58%,rgba(0,0,0,.18));
  }
  .fcard .fbg::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:60%;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
  }
  .fcard > *{position:relative;z-index:1;}
  .fcard .ftop{display:flex;justify-content:space-between;align-items:flex-start;}
  .fcard .ftag{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aqua);padding:.4rem .8rem;border:1px solid rgba(180,215,216,.4);border-radius:100px;background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
  .fcard .fphoto-chip{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);opacity:.7;padding:.32rem .65rem;border:1px solid rgba(255,255,255,.3);border-radius:100px;}
  .fcard .fbody h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2rem,4vw,2.8rem);line-height:1;margin-bottom:.5rem;}
  .fcard .fmeta{display:flex;gap:1.4rem;font-size:.78rem;opacity:.85;margin-top:.6rem;flex-wrap:wrap;}
  .fcard .fmeta div span{display:block;}
  .fcard .fmeta div span:first-child{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:.15rem;}

  /* Pricing — clean */
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
  @media (max-width:820px){.price-grid{grid-template-columns:1fr;max-width:440px;}}
  .price{padding:1.8rem;color:var(--paper);position:relative;display:flex;flex-direction:column;}
  .price.featured{background:var(--aqua);color:var(--deep);border-color:var(--aqua);box-shadow:0 30px 70px -30px rgba(180,215,216,.55);}
  .price .badge{position:absolute;top:-11px;left:1.8rem;background:var(--deep);color:var(--aqua);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:.35rem .8rem;border-radius:100px;font-weight:600;}
  .price .pname{font-size:1rem;font-weight:600;margin-bottom:.25rem;}
  .price .psub{font-size:.7rem;letter-spacing:.06em;opacity:.7;text-transform:uppercase;margin-bottom:1.2rem;}
  .price .pamt{font-family:var(--serif);font-style:italic;font-weight:300;font-size:2.4rem;line-height:1;margin-bottom:1.2rem;}
  .price .pamt.tba{font-size:1.5rem;}
  .price ul{list-style:none;margin-bottom:1.6rem;font-size:.84rem;}
  .price li{padding:.35rem 0;display:flex;gap:.55rem;align-items:flex-start;opacity:.9;}
  .price li::before{content:'✓';color:var(--teal);font-weight:700;}
  .price.featured li::before{color:var(--deep);}
  .price .btn{margin-top:auto;justify-content:center;}

  /* Intro + booking */
  .intro-offer{margin-top:2rem;padding:1.8rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;}
  .intro-offer h4{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.4rem;margin-bottom:.3rem;line-height:1.15;color:var(--paper);}
  .intro-offer .pop{color:var(--aqua);}
  .intro-offer p{font-size:.82rem;opacity:.8;max-width:32rem;}

  .booking-section{background:var(--paper);overflow:hidden;position:relative;}
  .booking.glass.dark{background:linear-gradient(180deg,var(--deep),#1f424d);color:var(--paper);}
  .booking{margin-top:2rem;padding:2.4rem;text-align:center;}
  .booking h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:.6rem;}
  .booking p{opacity:.82;margin-bottom:1.4rem;max-width:32rem;margin-left:auto;margin-right:auto;font-size:.92rem;}
  .booking .actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}
  .pay-note{margin-top:1.2rem;font-size:.7rem;letter-spacing:.04em;opacity:.55;}

  /* =====================================================
     INSTRUCTORS — bigger portraits, short bio + read more
     ===================================================== */
  .instructors{background:radial-gradient(circle at 85% 15%,rgba(180,215,216,.5),transparent 45%),radial-gradient(circle at 5% 90%,rgba(224,215,207,.55),transparent 50%),var(--paper);overflow:hidden;}
  .inst-head{max-width:30rem;margin-bottom:2.6rem;}
  .inst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
  @media (max-width:1024px){.inst-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:640px){.inst-grid{grid-template-columns:1fr;}}
  .inst-card{padding:1.4rem;}
  .inst-photo{aspect-ratio:4/3.2;border-radius:calc(var(--card-radius) - 4px);overflow:hidden;position:relative;margin-bottom:1.4rem;background:linear-gradient(160deg,var(--cream),var(--tan));}
  .inst-card:nth-child(2) .inst-photo{background:linear-gradient(160deg,var(--aqua),var(--teal));}
  .inst-photo .sil{position:absolute;inset:0;display:grid;place-items:end center;}
  .inst-photo .sil svg{width:38%;height:auto;}
  .inst-photo .pc{position:absolute;top:.7rem;left:.7rem;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.8;padding:.35rem .65rem;border:1px solid rgba(255,255,255,.4);border-radius:100px;}
  .inst-photo .ntag{position:absolute;left:1rem;bottom:1rem;color:#fff;font-family:var(--serif);font-style:italic;font-size:1.3rem;font-weight:300;line-height:1;}
  .inst-photo .ntag small{display:block;font-family:var(--sans);font-style:normal;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin-top:.35rem;font-weight:500;}
  .inst-role{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tan);margin-bottom:.35rem;font-weight:600;}
  .inst-name{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.7rem;color:var(--deep);margin-bottom:.7rem;}
  .inst-blurb{font-size:.92rem;opacity:.82;line-height:1.55;}
  .inst-blurb-full{font-size:.9rem;opacity:.82;line-height:1.6;}
  .inst-blurb-full p{padding-top:.7rem;}
  .creds{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem;}
  .creds span{font-size:.68rem;padding:.32rem .65rem;border-radius:100px;background:rgba(40,82,96,.08);border:1px solid rgba(40,82,96,.14);}

  /* =====================================================
     TESTIMONIALS
     ===================================================== */
  .testi{background:var(--tan);color:var(--deep);overflow:hidden;}
  .testi .wrap{text-align:center;}
  .testi .eyebrow{color:var(--cream);justify-content:center;}
  .testi-track{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.8rem;align-items:stretch;}
  @media (max-width:1080px){.testi-track{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:620px){.testi-track{grid-template-columns:1fr;}}
  .tcard{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.9rem 1.7rem;color:var(--deep);background:var(--cream);border:1px solid rgba(40,82,96,.22);border-radius:var(--card-radius);}
  .tcard blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:.95rem;line-height:1.6;margin:0;color:rgba(28,52,61,.78);}
  .tcard .tmeta{display:flex;flex-direction:column;align-items:center;gap:.65rem;margin-top:1.5rem;}
  .tcard .av{width:46px;height:46px;border-radius:50%;background:var(--deep);color:var(--cream);display:grid;place-items:center;font-weight:600;font-size:1rem;flex:none;}
  .tcard .tmeta strong{display:block;font-weight:500;font-size:.88rem;color:var(--deep);}
  .testi-note{margin-top:1.4rem;font-size:.7rem;opacity:.6;letter-spacing:.04em;color:var(--deep);}

  /* =====================================================
     FAQ
     ===================================================== */
  .faq{background:var(--paper);}
  .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start;}
  @media (max-width:880px){.faq-grid{grid-template-columns:1fr;gap:2rem;}}
  .faq-list{display:flex;flex-direction:column;gap:.85rem;}
  .faq-item{overflow:hidden;border-radius:calc(var(--card-radius) - 8px);background:var(--deep);color:var(--paper);border:none;box-shadow:0 18px 40px -30px rgba(28,52,61,.55);}
  .faq-q{width:100%;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.2rem 1.4rem;text-align:left;font-size:1rem;font-weight:500;}
  .faq-q .plus{width:18px;height:18px;position:relative;flex-shrink:0;}
  .faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--paper);top:50%;left:50%;transform:translate(-50%,-50%);}
  .faq-q .plus::before{width:13px;height:1.5px;}
  .faq-q .plus::after{width:1.5px;height:13px;transition:transform .4s;}
  .faq-item.open .plus::after{transform:translate(-50%,-50%) scaleY(0);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1);}
  .faq-a-inner{padding:0 1.4rem 1.2rem;font-size:.9rem;opacity:.84;line-height:1.6;max-width:40rem;}

  /* =====================================================
     CTA
     ===================================================== */
  .cta{overflow:hidden;}
  .cta-stage{position:relative;border-radius:var(--card-radius);overflow:hidden;padding:5rem 2rem;text-align:center;background:linear-gradient(160deg,var(--teal),var(--deep));color:var(--paper);}
  .cta-stage .mist{z-index:0;}
  .cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;}
  .cta-inner h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:.9rem;line-height:1;}
  .cta-inner h2 b{font-family:var(--sans);font-style:normal;font-weight:500;letter-spacing:-.01em;}
  .cta-inner p{opacity:.85;margin-bottom:1.8rem;font-size:.98rem;}
  .cta-inner .actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}

  /* =====================================================
     FOOTER
     ===================================================== */
  footer{background:var(--ink);color:var(--paper);padding:4rem 0 1.8rem;}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2.4rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.14);}
  @media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem;}}
  @media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
  .foot-brand .fb-logo{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;}
  .foot-brand .fb-logo .txt{font-size:1.05rem;font-weight:600;}
  .foot-brand .fb-logo .txt small{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:.78rem;opacity:.7;letter-spacing:.01em;}
  .foot-brand p{opacity:.7;font-size:.88rem;line-height:1.55;max-width:24rem;}
  .foot-col h4{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5;margin-bottom:1rem;font-weight:600;}
  .foot-col ul{list-style:none;}
  .foot-col li{font-size:.88rem;opacity:.85;margin-bottom:.5rem;line-height:1.45;}
  .foot-col a{color:inherit;text-decoration:none;transition:opacity .3s;}
  .foot-col a:hover{opacity:.55;}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;font-size:.72rem;opacity:.5;letter-spacing:.04em;}

  /* reveal */
  .r-up{opacity:0;transform:translateY(32px);}
  .r-fade{opacity:0;}