/* ============================================================
   HYVE PILATES, shared styles.
   Every page links this file, so a change here hits the whole site.
   ============================================================ */
:root{
  --ink:#231F20; --ink-soft:#585858; --bone:#F3F2EF; --white:#FFFFFF;
  --line:rgba(35,31,32,.14);
  --honey:#B8874B; --honey-soft:rgba(184,135,75,.1);
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem; --s7:9rem;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Nav logo height; width follows the 1.685 lockup ratio. The lockup is
     two-line, so it needs more height than a wordmark to keep "pilates" legible. */
  --logo-h:52px;
  --nav-h:calc(var(--logo-h) + var(--s2) * 2);   /* for sticky offsets under the bar */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:'Poppins',system-ui,sans-serif;
  font-weight:300;font-size:16px;line-height:1.7;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:200;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.6rem,7vw,4.8rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:300}
p{margin:0 0 var(--s2)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Skip link: off-screen until keyboard-focused, then pinned top-left over the nav. */
.skip{position:fixed;left:var(--s3);top:-100px;z-index:200;background:var(--ink);color:var(--bone);
  padding:.7rem 1.1rem;border-radius:0 0 8px 8px;font-size:.85rem;text-decoration:none;
  transition:top .2s var(--ease)}
.skip:focus{top:0}
/* The skip target receives focus programmatically; suppress the box outline on it
   (the first real control the user Tabs to still shows its own focus ring). */
#main:focus{outline:none}
/* Pins the page behind the open mobile menu. `top` is set inline by site.js to
   the locked scroll offset so the view doesn't jump to the top. */
body.menu-open{position:fixed;width:100%;overflow:hidden}
/* The overlay is full-bleed ink and paints above the bar, so the bar itself must
   go transparent and the logo must sit on top of the overlay in bone, otherwise
   it's either hidden behind it or dark-on-dark. */
body.menu-open .nav{background:transparent;box-shadow:none;backdrop-filter:none}
body.menu-open .nav__logo{color:var(--bone)}
body.menu-open .nav__burger span{background:var(--bone)}

.eyebrow{font-size:.7rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;
  color:var(--honey);display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s3)}
.eyebrow::before{content:'';width:9px;height:10px;background:var(--honey);flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-soft);max-width:58ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;min-height:48px;padding:0 var(--s4);
  border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--bone);
  cursor:pointer;font:inherit;font-size:.74rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:var(--honey);border-color:var(--honey);color:var(--white);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn--light{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--light:hover{background:var(--honey);border-color:var(--honey);color:var(--white)}
.btn span{transition:transform .25s var(--ease)}
.btn:hover span{transform:translateX(4px)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:var(--s2) var(--s4);background:rgba(243,242,239,.9);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line)}
/* The logo is a single-colour silhouette, so it's painted as a mask over
   currentColor rather than shipped as light/dark files. It then inherits every
   nav colour state for free, bone over the hero, ink on the solid bar, bone
   over the open menu. */
.nav__logo{position:relative;z-index:101;display:block;
  width:calc(var(--logo-h) * 1.685);height:var(--logo-h);
  background:currentColor;
  -webkit-mask:url(/assets/logo.png) left center/contain no-repeat;
  mask:url(/assets/logo.png) left center/contain no-repeat;
  transition:color .4s var(--ease)}
.nav__links{display:flex;gap:var(--s4);align-items:center}
.nav__links a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;position:relative;white-space:nowrap;
  padding:.4rem 0;opacity:.85}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--honey);transition:width .3s var(--ease)}
/* Hover-only. On touch, a tap fires :hover and the 300ms underline animation
   gets frozen part-way through as the page navigates, it looked like it was
   underlining half the word. Pointer devices are the only ones that see it. */
@media(hover:hover){
  .nav__links a:hover{opacity:1}
  .nav__links a:hover::after{width:100%}
}
.nav__links a[aria-current="page"]{opacity:1;color:var(--honey)}
/* Two copies of Book Now, because it plays two roles: --bar lives in the nav bar
   itself (centred on desktop, standing in for the logo once you scroll on a
   phone), --menu lives inside the full-screen mobile menu. Only one is ever
   visible at a time. The typography is spelled out here rather than inherited -
   --bar sits outside .nav__links, so the `.nav__links a` rules don't reach it. */
.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;
  padding:.6rem 1.4rem!important;opacity:1!important;
}
.nav__cta::after{display:none!important}
.nav__cta:hover{background:var(--honey);border-color:var(--honey);color:var(--white)!important}

@media(min-width:1101px){
  /* Book Now centred in the bar. A three-column grid, NOT absolute centring:
     with left:50% the pill overlapped the nav links from ~1024px down, because
     the links grow toward the middle as the bar narrows. 1fr auto 1fr can't
     overlap, the centre column is whatever the pill needs and the two 1fr
     columns split the rest evenly, which is what actually centres it. */
  .nav{display:grid;grid-template-columns:1fr auto 1fr}
  .nav__logo{justify-self:start}
  /* 15% bigger than the nav links it used to sit among, type and padding both,
     so the pill scales as a whole rather than just gaining air. */
  .nav__cta--bar{justify-self:center;font-size:.828rem;padding:.69rem 1.61rem!important}
  .nav__links{justify-self:end}
  .nav__cta--menu{display:none}
}
/* The pill only stays centred while the links fit inside their 1fr column;
   past that the links column grows and shoves it left (was 69px adrift at 1024
   once Contact made five links). Tightening the gap buys back the room. */
@media(min-width:1101px) and (max-width:1240px){
  .nav__links{gap:var(--s3)}
}
.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;min-height:44px}
.nav__burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:5px 0}

/* ---------- Page heading ----------
   Oversized lowercase display type, left-aligned, with a honey period and a
   rule that draws itself in under the title. The honeycomb is a background
   image so no page needs extra markup for it. */
.phead{position:relative;padding:var(--s6) 0 var(--s4);margin-bottom:var(--s4);overflow:hidden}
/* One header height for every page, so the honeycomb's clearance matches.
   The comb is centred in .phead, so its gap is exactly (height - 300) / 2, and
   each page's header was a different height (pricing 319, schedule 351, faq and
   contact 362, because the copy differs), which is why one identically-sized
   comb sat 9px off the rule on pricing and 31px on faq. 351 is schedule's own
   height, so schedule is untouched and the rest come to meet it. Sizing the comb
   per page would equalise the gap too, but it makes the comb a different size on
   every page, don't go back to that.
   Headroom: the tallest copy currently reaches 306px, and text is clipped past
   ~351. That's room for about one more line of lede, if a heading's copy ever
   grows beyond that, raise this number rather than letting it cut off. */
@media(min-width:901px){ .phead{height:351px} }

/* ---------- Honeycomb watermark (injected by site.js) ----------
   Real SVG rather than a background image, so the cells can fill and the bees
   can fly. Sits behind the title and never takes pointer events. */
.comb{
  position:absolute;right:-3%;top:50%;transform:translateY(-50%);
  width:min(44%,400px);aspect-ratio:200/180;pointer-events:none;z-index:1;
}
/* Fill and outline are separate paths: the ooze clips the fill only, so the
   hexagon's edge stays drawn the whole time. */
.comb__fill{fill:var(--honey);fill-opacity:.17;stroke:none}
.comb__outline{
  fill:none;stroke:var(--honey);stroke-opacity:.45;stroke-width:1;
  pointer-events:all;cursor:pointer;              /* the secret: cells are clickable */
  transition:stroke-opacity .3s var(--ease);
}
.comb__outline:hover{stroke-opacity:.95}

.comb__wing{
  transform-box:fill-box;transform-origin:100% 50%;
  animation:beeWing .14s ease-in-out infinite alternate;
}
@keyframes beeWing{from{transform:scaleY(1)}to{transform:scaleY(.45)}}

@media(prefers-reduced-motion:reduce){
  /* site.js skips the bees and freezes the ooze at full. */
  .comb__wing{animation:none}
}
.phead::after{                        /* rule that draws in under the title */
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--honey);
  animation:rule 1.1s var(--ease) .25s forwards;
}
@keyframes rule{to{width:100%}}
/* :not(.comb) matters, the honeycomb is a direct child too, and this rule
   comes later at equal specificity, so it was overriding its position:absolute
   and dropping it into the layout flow above the title. */
.phead > *:not(.comb){position:relative;z-index:2}
.phead h1{
  font-size:clamp(3.2rem,12vw,8rem);line-height:.86;letter-spacing:-.055em;
  font-weight:200;text-transform:lowercase;
}
.phead h1 em{font-style:normal;color:var(--honey)}
.phead .lede{margin-top:var(--s3)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--bone);padding:var(--s6) 0 var(--s4);margin-top:var(--s7)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5)}
.footer__logo{display:block;width:132px;height:78px;margin-bottom:var(--s3);
  background:var(--bone);
  -webkit-mask:url(/assets/logo.png) left center/contain no-repeat;
  mask:url(/assets/logo.png) left center/contain no-repeat}
.footer p{font-size:.88rem;opacity:.6;max-width:34ch}
.footer h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  margin:0 0 var(--s2);color:var(--honey)}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer li a{font-size:.88rem;opacity:.65;transition:opacity .2s var(--ease),color .2s var(--ease)}
.footer li a:hover{opacity:1;color:var(--honey)}
/* Social marks, sized and spaced like the app links in the base row. */
.footer__social{display:flex;gap:.2rem;margin-top:var(--s2);margin-left:-10px}
.footer__social a{display:inline-grid;place-items:center;width:44px;height:44px;
  color:var(--bone);opacity:.65;transition:opacity .2s var(--ease),color .2s var(--ease)}
.footer__social svg{width:17px;height:17px;fill:currentColor;transition:transform .2s var(--ease)}
.footer__social a:hover{opacity:1;color:var(--honey)}
.footer__social a:hover svg{transform:translateY(-2px)}

.footer__base{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(243,242,239,.14);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-size:.72rem}
.footer__base > span{opacity:.45}
/* App links live here rather than in a column, they're a footnote, but they
   still need to be clickable, so they can't inherit the dimmed opacity. */
.footer__apps{display:flex;align-items:center;gap:.2rem;opacity:.75}
.footer__apps span{margin-right:.4rem}
/* 44px hit area around a 17px mark: the icon stays a footnote visually while
   still being a real tap target on a phone. */
.footer__apps a{
  display:inline-grid;place-items:center;width:44px;height:44px;
  color:inherit;transition:color .2s var(--ease);
}
.footer__apps svg{width:17px;height:17px;fill:currentColor;transition:transform .2s var(--ease)}
.footer__apps a:hover{color:var(--honey)}
.footer__apps a:hover svg{transform:translateY(-2px)}

@media(max-width:640px){
  /* On a phone the title fills the width, so the honeycomb lands on top of the
     words instead of behind them. The title is the flourish at this size. */
  .phead::before{display:none}
  .phead{padding-top:var(--s5)}
}
/* ---------- Nav: burger below 1000 ----------
   Its own breakpoint, deliberately not the layout's 900. Six links plus a
   centred Book Now stop fitting around 1100: "Gift Cards" wrapped to two lines,
   and once nowrap fixed that the pill was shoved ~50px off centre instead.
   Above this it's the desktop grid. */
@media(max-width:1100px){
  /* Scrolled, the logo hands its spot to Book Now, otherwise Book Now is
     buried behind the burger and there's no visible way to book until you reach
     a class card. The bar is flex here, so with the logo out and Book Now in,
     space-between still puts it left and the burger right. Menu open drops
     .nav--stuck (site.js), bringing the logo back, the overlay carries its own
     Book Now and two would be redundant. */
  .nav__cta--bar{display:none;min-height:44px}   /* 44px: a thumb target here, not a pointer one */
  .nav--stuck .nav__logo{display:none}
  .nav--stuck .nav__cta--bar{display:inline-flex}
  .nav__links{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;
    gap:var(--s4);transform:translateX(100%);transition:transform .45s var(--ease)}
  .nav__links.open{transform:none}
  .nav__links a{font-size:1rem;color:var(--bone)!important;opacity:1;white-space:normal}
  .nav__burger{display:block;z-index:101}
}

@media(max-width:900px){
  :root{--s7:5rem;--s6:3.5rem;--s5:2.5rem;--logo-h:44px}
  .nav{padding:var(--s2) var(--s3)}
  .footer__grid{grid-template-columns:1fr;gap:var(--s4)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .head__ring ellipse{stroke-dashoffset:0}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}