/* ===========================================================================
   Core Pilates — shared site chrome (nav, hero, newsletter, footer, layout)
   Page section styles live inline within each page (ported from the originals).
   Palette + type match the brand: Cormorant Garamond + Mulish.
   ========================================================================= */
:root{
  --cream:#f4efe7; --card:#fffdf9; --ink:#1a1611; --muted:#7a7163;
  --line:#e7ddcd; --gold:#c6a467; --gold2:#b08d4f; --page:#fdfcfa;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Mulish',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --nav-h:74px;        /* solid / scrolled nav height */
  --nav-h-hero:104px;  /* taller nav while sitting over a hero */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- Buttons (shared) ---------- */
.btn-gold{
  display:inline-block;text-decoration:none;font-family:var(--font-sans);
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#1a1611;background:linear-gradient(135deg,var(--gold),#d8bd8c);
  padding:15px 34px;border-radius:40px;border:0;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 12px 30px -12px rgba(176,141,79,.7);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(176,141,79,.9);}
.btn-ghost{
  display:inline-block;text-decoration:none;font-family:var(--font-sans);
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:transparent;border:1px solid rgba(255,255,255,.6);
  padding:14px 32px;border-radius:40px;transition:all .25s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-3px);}

/* ===========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(253,252,250,.96);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.nav-inner{
  max-width:1280px;margin:0 auto;height:var(--nav-h);padding:0 26px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  transition:height .35s ease;
}
.nav-left,.nav-right{display:flex;align-items:center;gap:26px;}
.nav-right{justify-content:flex-end;}
.nav a,.nav-dd-t{
  font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--font-sans);
  display:inline-flex;align-items:center;gap:5px;padding:6px 0;transition:color .2s ease;
}
.nav a:hover,.nav-dd-t:hover{color:var(--gold2);}
.nav-cta{
  border:1px solid var(--gold2);border-radius:30px;padding:9px 20px !important;
  color:var(--gold2) !important;font-weight:700 !important;letter-spacing:.04em;
}
.nav-cta:hover{background:var(--gold2);color:#fff !important;}
.nav-logo{justify-self:center;}
.nav-logo img{height:34px;width:auto;transition:filter .3s ease,height .35s ease;}

/* dropdowns */
.nav-dd{position:relative;}
.nav-dd-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:10px;min-width:218px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 22px 50px -22px rgba(80,60,30,.35);
  opacity:0;visibility:hidden;
  /* delay before closing so a quick/diagonal move from the trigger to the
     menu doesn't get read as "left the dropdown" and snap it shut early */
  transition:opacity .18s ease .3s,transform .18s ease .3s,visibility 0s linear .48s;
}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear;
}
.nav-dd-menu a{font-weight:500;padding:9px 12px;border-radius:9px;}
.nav-dd-menu a:hover{background:var(--cream);color:var(--gold2);}
.nav-dd-t svg{transition:transform .25s ease;}
.nav-dd:hover .nav-dd-t svg{transform:rotate(180deg);}

/* Tall nav + large logo at the TOP of ANY page; shrinks to the compact nav on
   scroll. Driven by .at-top so inner pages get the size effect too (no hero
   needed). */
.nav.at-top .nav-inner{height:var(--nav-h-hero);}
.nav.at-top .nav-logo img{height:60px;}

/* Transparent nav + white links over a hero (home only). backdrop-filter is
   turned off here so the hero photo and logo stay crisp — no blur halo. */
.nav.over-hero{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.nav.over-hero .nav-left>a,.nav.over-hero .nav-right>a,.nav.over-hero .nav-dd-t{color:#fff;}
.nav.over-hero .nav-logo img{filter:brightness(0) invert(1);}
.nav.over-hero .nav-cta{border-color:rgba(255,255,255,.7);color:#fff !important;}
.nav.over-hero .nav-cta:hover{background:#fff;color:var(--ink) !important;}
.nav.over-hero .nav-toggle span{background:#fff;}

/* Mobile menu open: the header itself becomes part of the full-screen
   takeover (solid background, dark close-icon) instead of staying
   transparent over the hero photo above the menu panel. The logo is
   hidden on mobile regardless (see the 1024px breakpoint below). */
.nav.menu-open{background:var(--page);border-color:var(--line);box-shadow:none;}
.nav.menu-open .nav-inner{height:64px;}
.nav.menu-open .nav-toggle span{background:var(--ink);}

/* mobile toggle */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile menu panel */
.nav-mobile{
  display:none;position:fixed;inset:var(--nav-h) 0 0;z-index:999;
  background:var(--page);padding:18px 0 36px;overflow-y:auto;
  transform:translateX(100%);transition:transform .32s ease;
}
/* header sits at its taller --nav-h-hero size at the top of any page (or
   permanently transparent over the home hero) — match the panel to it so
   the page behind can't peek through the gap while the header is tall */
.nav.at-top ~ .nav-mobile{top:var(--nav-h-hero);}
/* menu open: pull the panel up under the close button instead of the full
   header height, so the menu starts higher (logo is already hidden on
   mobile at all times, see the 1024px breakpoint below) */
.nav.menu-open ~ .nav-mobile{top:64px;}
.nav-mobile.open{transform:translateX(0);}
/* padding lives on each row (not the panel) so the divider lines and tap
   targets run edge-to-edge across the full width of the screen */
.nav-mobile a{display:block;text-decoration:none;color:var(--ink);font-size:15.5px;padding:8px 22px;border-bottom:1px solid var(--line);}
.nav-mobile .grp-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);font-weight:700;margin:12px 22px 2px;}
.nav-mobile .m-cta{margin-top:18px;padding:0 22px;text-align:center;}

/* ===========================================================================
   HERO (home)
   ========================================================================= */
.hero{position:relative;min-height:58vh;display:flex;align-items:center;overflow:hidden;padding-top:calc(var(--nav-h-hero) + 12px);}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 72%;transform:scale(1.04);}
.hero-ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,17,13,.72) 0%,rgba(20,17,13,.42) 42%,rgba(20,17,13,.12) 100%);}
.hero-in{position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:0 30px;color:#f4efe7;}
.hero-eyebrow{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#e0c594;font-weight:600;margin:0 0 18px;}
.hero-title{font-family:var(--font-display);font-weight:600;font-size:clamp(54px,9vw,118px);line-height:.98;letter-spacing:.5px;margin:0 0 20px;}
.hero-sub{font-size:clamp(16px,2vw,20px);line-height:1.6;max-width:520px;color:rgba(244,239,231,.9);margin:0 0 34px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* ===========================================================================
   SUBHERO — page header banner for inner pages (matches home, shorter)
   ========================================================================= */
.subhero{position:relative;min-height:54vh;display:flex;align-items:center;overflow:hidden;}
.subhero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);}
.subhero-ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,17,13,.8) 0%,rgba(20,17,13,.52) 52%,rgba(20,17,13,.24) 100%);}
.subhero-in{position:relative;z-index:2;max-width:1140px;width:100%;margin:0 auto;padding:104px 30px 56px;color:#f4efe7;text-align:center;}
.subhero-eyebrow{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#e0c594;font-weight:600;margin:0 0 16px;}
.subhero-title{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,6.5vw,76px);line-height:1.02;letter-spacing:.5px;margin:0 0 16px;}
.subhero-sub{font-size:clamp(15px,1.8vw,18px);line-height:1.62;max-width:600px;margin:0 auto;color:rgba(244,239,231,.9);}

/* ===========================================================================
   MAIN page layout — frames are centered self-contained panels
   ========================================================================= */
main.page{
  display:flex;flex-direction:column;gap:30px;
  padding:calc(var(--nav-h) + 44px) 20px 64px;
}
main.page.has-hero{padding-top:64px;}     /* hero already clears the nav */
main.page > *{max-width:1140px;width:100%;margin-inline:auto;}

/* ===========================================================================
   NEWSLETTER (home)
   ========================================================================= */
.news{position:relative;overflow:hidden;}
.news-bg{position:absolute;inset:0;background-size:cover;background-position:center right;}
.news-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,13,.86) 0%,rgba(20,17,13,.6) 55%,rgba(20,17,13,.25) 100%);}
.news-in{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:84px 30px;color:#f4efe7;}
.news-title{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5vw,52px);margin:0 0 14px;}
.news-sub{font-size:15.5px;line-height:1.7;max-width:520px;color:rgba(244,239,231,.85);margin:0 0 26px;}
.news-form{display:flex;gap:12px;max-width:480px;flex-wrap:wrap;}
.news-form input{
  flex:1 1 240px;font-family:var(--font-sans);font-size:15px;
  padding:15px 18px;border-radius:40px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.95);color:var(--ink);
}
.news-form input:focus{outline:2px solid var(--gold2);}
.news-note{margin:16px 0 0;font-size:13px;color:#e0c594;min-height:18px;}

/* ===========================================================================
   FOOTER wrapper (dark band behind the rounded cpf panel)
   ========================================================================= */
.site-footer{background:#0e0c0a;padding:30px 20px 40px;}
.site-footer .cpf{max-width:1140px;}

/* ===========================================================================
   EVENT SIGN-UPS (events page footer + registration modal)
   ========================================================================= */
.cpev-foot{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.cpev-signup{font-family:var(--font-sans);cursor:pointer;border:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1a1611;background:linear-gradient(135deg,var(--gold),#d8bd8c);padding:11px 26px;border-radius:30px;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 10px 26px -12px rgba(176,141,79,.7);}
.cpev-signup:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(176,141,79,.9);}
.cpev-spots{font-size:12.5px;font-weight:600;color:var(--gold2);letter-spacing:.02em;}
.cpev-full{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9a8467;background:rgba(154,132,103,.14);border:1px solid var(--line);padding:9px 18px;border-radius:30px;}
.cpev-waitlist-btn{font-family:var(--font-sans);cursor:pointer;border:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:#fff;padding:9px 20px;border-radius:30px;transition:border-color .2s ease;}
.cpev-waitlist-btn:hover{border-color:var(--gold2);}
.cpsu-bg{position:fixed;inset:0;z-index:2000;background:rgba(20,17,13,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;}
.cpsu{background:var(--card);border:1px solid var(--line);border-radius:20px;max-width:440px;width:100%;padding:30px 30px 26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);font-family:var(--font-sans);}
.cpsu h3{font-family:var(--font-display);font-size:27px;font-weight:600;margin:0 0 4px;color:var(--ink);}
.cpsu .sub{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 20px;}
.cpsu label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
.cpsu input{display:block;width:100%;margin-top:6px;font-family:var(--font-sans);font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);}
.cpsu input:focus{outline:2px solid var(--gold2);}
.cpsu-row{display:flex;gap:12px;justify-content:flex-end;margin-top:8px;}
.cpsu-paypal{max-width:340px;margin:14px auto 0;padding-top:18px;min-height:48px;border-top:1px solid var(--line);transition:opacity .2s ease;}
/* small centered eyebrow above the PayPal/Venmo/card buttons */
.cpsu-paypal::before{content:"Pay securely";display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 14px;}
.cpsu-paypal-loading{font-size:13px;color:var(--muted);text-align:center;margin:10px 0;}
.cpsu-msg{font-size:13px;margin:0 0 12px;min-height:14px;}
.cpsu-msg:empty{margin:0;min-height:0;}
.cpsu-msg.err{color:#b3402e;}
.cpsu-secure{font-size:11.5px;color:var(--muted);text-align:center;margin:14px 0 0;}
.cpsu-ok{text-align:center;padding:8px 0 2px;}
.cpsu-ok svg{stroke:var(--gold2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 10px;}

/* forced line break, mobile only (hidden/inert on desktop+tablet) */
.m-br{display:none;}

/* ===========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1024px){
  .nav-left,.nav-right{display:none;}
  .nav-inner{grid-template-columns:1fr;padding:0 14px;}
  /* the footer already carries the "CORE PILATES" wordmark, so the header
     logo is dropped entirely on mobile rather than duplicating it */
  .nav .nav-logo{display:none;}
  .nav-toggle{display:flex;justify-self:end;grid-column:1;margin-top:6px;}
  .nav-mobile{display:block;}
  /* the large-logo "shrinks on scroll" effect is desktop-only noise on
     mobile — keep the header at its compact size the whole time */
  .nav.at-top .nav-inner{height:var(--nav-h);}
  .nav.at-top ~ .nav-mobile{top:var(--nav-h);}
  /* re-assert after the at-top overrides above (same specificity, later
     wins) so the open menu still gets its own tighter, pulled-up sizing
     even when at-top is also present (i.e. menu opened before scrolling) */
  .nav.menu-open .nav-inner{height:64px;}
  .nav.menu-open ~ .nav-mobile{top:64px;}
}
@media (max-width:760px){
  .m-br{display:inline;}
  .hero{min-height:62vh;padding-top:0;}
  /* the fixed transparent header sits at its tall --nav-h-hero (104px) size
     on load; without this the vertically-centered hero content can render
     high enough to collide with the header/logo on short mobile screens.
     Bottom padding + a taller min-height keep the last CTA button from
     landing flush against the hero's bottom edge. */
  .hero-in{padding:130px 30px 48px;}
  .subhero{min-height:44vh;}
  .subhero-in{padding:92px 22px 44px;}
  .news-in{padding:64px 24px;}
  main.page{padding-left:14px;padding-right:14px;}
}