/* Very Yoga Reigate — static rebuild. Brand values from the original Salient theme options;
   typography and buttons follow the sister site verypilatesreigate.com. */
:root {
  --pink: #e5bcd8;
  --pink-dark: #d19cc9;
  --purple: #8a359b;
  --purple-dark: #6f2a7d;
  --red: #e30000;
  --ink: #444444;
  --body: #676767;
  --muted: #777777;
  --bg: #ffffff;
  --soft: #faf5f9;
  --gradient: linear-gradient(to right, var(--red), var(--purple));
  /* page margins measured from the live site: 6% each side, 90px from 1000px wide, content up to 1425px */
  --max: 1425px;
  --gutter: 6vw;
  --serif: "PT Serif", Georgia, serif;
}

@media (min-width: 1000px) { :root { --gutter: 90px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--body); font: 400 14px/26px var(--serif); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); }
a:hover { color: var(--ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 600; margin: 0 0 .6em; color: var(--ink); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6, .page-title h1 { color: #fff; }
/* heading sizes measured from the live site (desktop, then phone below) */
h1 { font-size: 41px; line-height: 45px; }
h2 { font-size: 29px; line-height: 36px; }
h3 { font-size: 19px; line-height: 26px; }
h4 { font-size: 18px; line-height: 28px; }
h5 { font-size: 16px; line-height: 26px; }
h6 { font-size: 14px; line-height: 24px; }
@media (max-width: 690px) {
  h1 { font-size: 36px; line-height: 39px; }
  h2 { font-size: 26px; line-height: 32px; }
  h3 { font-size: 18px; line-height: 24px; }
  h4 { font-size: 17px; line-height: 26px; }
}
b, strong { font-weight: 700; font-family: var(--serif); } /* the live theme resets bold words to PT Serif */
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }

/* header */
/* header sizes measured from the live site: logo 28px from the top, menu 28px below it, 224px in all */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #eee;
  display: flex; flex-direction: column; align-items: center; padding: 28px var(--gutter) 0; }
.logo img { width: 93px; height: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; padding: 28px 0 28px; }
.site-nav a { display: block; padding: 0 10px; line-height: 20px; text-decoration: none; color: #555; font-size: 14px; }
.site-nav > ul > li > a:not(.btn) span, .site-nav > ul > li > a:not(.btn) { position: relative; }
/* pink underline on hover and on the current page, as on the live site */
.site-nav > ul > li > a:not(.btn)::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -3px; height: 2px;
  background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.site-nav > ul > li > a:not(.btn):hover::after, .site-nav > ul > li > a[aria-current="page"]::after,
.site-nav > ul > li.current > a::after { transform: scaleX(1); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #555; }
.site-nav .has-sub { position: relative; }
.site-nav .has-sub > ul { position: absolute; left: 0; top: 100%; min-width: 240px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.1);
  padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; }
.site-nav .has-sub:hover > ul, .site-nav .has-sub:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.site-nav .nav-book a.btn { padding: 5px 18px; margin: -7px 0 -7px 10px; font-size: 14px; font-weight: 400; line-height: 20px;
  background: transparent; color: #555; border: 2px solid rgba(0, 0, 0, .4); }
.site-nav .nav-book a.btn:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
.nav-toggle { display: none; }

@media (max-width: 999px) {
  /* the live site's phone header is a 48px bar with a small logo */
  .site-header { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px var(--gutter); }
  .logo img { width: auto; height: 24px; }
  .logo { display: block; line-height: 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 24px; margin-right: -10px;
    border: 0; background: none; cursor: pointer; }
  .site-nav > ul > li > a:not(.btn)::after { display: none; }
  .nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after {
    display: block; width: 24px; height: 2px; background: var(--ink); position: relative; content: ""; }
  .nav-toggle span:first-child::before { position: absolute; top: -7px; }
  .nav-toggle span:first-child::after { position: absolute; top: 7px; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid #eee;
    max-height: calc(100vh - 80px); overflow-y: auto; }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; padding: 8px 16px 16px; }
  .site-nav a { padding: 10px 4px; font-size: 1rem; }
  .site-nav .has-sub > ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .site-nav .nav-book a.btn { margin: 8px 0 0; text-align: center; }
}

/* buttons */
/* sizes measured from the live site: large (default) 14px text, 50px tall; jumbo 18px, 66px; medium 12px, 40px */
.btn { display: inline-block; white-space: nowrap; padding: 15px 30px; border: 0; border-radius: 0; text-decoration: none; font: 600 14px/20px var(--serif);
  transition: background-color .2s, outline-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(138, 53, 155, .55); }
.btn:active { transform: none; box-shadow: none; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-dark); color: #fff; }
/* outline buttons: the border is drawn inside so they stay the same size as filled ones */
.btn-outline { background: transparent; color: #000; outline: 2px solid rgba(0, 0, 0, .75); outline-offset: -2px; }
.on-dark .btn-outline, .has-col-img .btn-outline, .btn-outline.btn-light { color: #fff; outline-color: rgba(255, 255, 255, .75); }
.btn-outline.btn-custom { outline-color: var(--btn-c); color: #fff; }
.btn-outline:hover { background: var(--purple); outline-color: var(--purple); color: #fff; }
.btn-accent { background: var(--pink); color: #fff; }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--purple); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.btn-dark { background: #333; color: #fff; }
.btn-dark:hover, .btn-red:hover { background: var(--purple); color: #fff; }
.btn-custom:not(.btn-outline) { background: var(--btn-c); color: #fff; }
.btn-custom:not(.btn-outline):hover { background: var(--purple); }
.btn-gradient { background: var(--gradient); color: #fff; }
.btn-gradient-blue { background: linear-gradient(125deg, #32d6ff, #2ac4ea); color: #fff; }
.btn-gradient:hover, .btn-gradient-blue:hover { filter: brightness(1.08); color: #fff; }
.btn-small { padding: 9px 16px; font-size: 12px; line-height: 16px; }
.btn-medium { padding: 12px 22px; font-size: 12px; line-height: 16px; }
.btn-jumbo { padding: 21px 40px; font-size: 18px; line-height: 24px; }
.btn-wrap { margin: 1em 0; }
.cta { margin: 1em 0; }
.cta-link { font-weight: 400; font-size: 14px; text-decoration: none; color: var(--purple); }
.cta-box { display: inline-block; background: var(--pink); color: #fff; font-size: 21.875px; line-height: 1.2; text-decoration: none;
  transition: background-color .2s; }
.cta-box:hover { background: var(--purple); color: #fff; }
.on-dark .cta-link, .has-col-img .cta-link, .cta-link.cta-light { color: #fff; }
.cta { width: 100%; }
.cta-link span { display: inline-block; transition: transform .2s var(--ease); }
.cta-link:hover span { transform: translateX(5px); }
.cta .btn { margin-top: .25em; }

/* page title (pages without a feature row) */
.page-title { position: relative; background: var(--row-bg, var(--pink)) var(--row-img, none) center / cover no-repeat; color: #fff;
  text-align: center; padding: 40px var(--gutter); min-height: clamp(300px, 35vw, 350px);
  display: flex; flex-direction: column; justify-content: center; }
.page-title:not([style]) { background: var(--gradient); }
.page-title.has-img::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.page-title > * { position: relative; max-width: 860px; margin-left: auto; margin-right: auto; }
/* sizes measured from the live site: title 36px (phone) to 44px (desktop), subtitle 16px to 24px */
.page-title h1 { margin: 0 auto; font-weight: 600; font-size: clamp(36px, 30px + 1.4vw, 44px); line-height: 1.2; }
.page-title p { margin: .6em auto 0; max-width: 800px; font-size: clamp(16px, 11.4px + 1.233vw, 24px); line-height: 1.4; }
@media (max-width: 690px) { .page-title { padding: 32px 16px; } .page-title h1 { line-height: 1.1; } .page-title p { line-height: 1.6; } }

/* rows */
.row { position: relative; padding: 0 var(--gutter); background: var(--row-bg, transparent); }
.row-boxed { margin-bottom: 1.5em; }
.row-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 3vw, 40px); }
.row-full { padding: 0; }
.row-full > .row-inner { max-width: none; gap: 0; }
.row.has-bg { background: var(--row-bg, #333) var(--row-img, none) center / cover no-repeat; overflow: hidden; }
.row.row-feature { display: flex; align-items: center; }
.row.row-feature > .row-inner { width: 100%; }
.row-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.row.has-overlay::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--row-overlay); opacity: var(--row-overlay-opacity, .3); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6 { color: #fff; }
.on-dark a:not(.btn) { color: #fff; }
.row.light-wash, .row.light-wash h1, .row.light-wash h2, .row.light-wash h3 { color: var(--ink); }

/* columns */
/* The -0.5px absorbs rounding: 1/6 is written as 0.1667, so sixths can sum to just over 100%, and flexbox
   wraps before it shrinks. */
.col { flex: 0 1 calc(var(--w, 1) * 100% - (1 - var(--w, 1)) * clamp(16px, 3vw, 40px) - .5px); min-width: 0; }
.col.empty { min-height: 0; } /* spacer columns keep their width so content stays centred */
.row-full > .row-inner > .col { flex-basis: calc(var(--w, 1) * 100% - .1px); }
.row-full > .row-inner > .col > .cols { padding: 0 var(--gutter); max-width: var(--max); margin: 0 auto; }
.col.has-col-bg { background: var(--col-bg); padding: clamp(20px, 4vw, 48px); }
.col.has-col-img { position: relative; background: var(--col-img) center / cover no-repeat; min-height: 320px;
  display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 4vw, 48px); }
.col.has-col-img:not(:empty)::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.col.has-col-img > * { position: relative; color: #fff; }
.col.has-col-img h1, .col.has-col-img h2, .col.has-col-img h3, .col.has-col-img h4, .col.has-col-img h5, .col.has-col-img a:not(.btn) { color: #fff; }
.col.padded { padding: var(--pad); }
.col.boxed { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.1); padding: var(--pad, 36px); margin-bottom: clamp(16px, 2vw, 28px); }
.col.boxed h5 { font-size: 16px; font-weight: 700; margin-bottom: .4em; }
.col.center, .center { text-align: center; }
.cols { display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 3vw, 40px); width: 100%; }
.equal > .row-inner { align-items: stretch; }
.row-full > .row-inner > .col:not(.padded) > :is(.text, h1, h2, h3, .btn-wrap, .cta) {
  padding-left: var(--gutter); padding-right: var(--gutter); }
.row-full .col.has-col-bg > * { padding-left: 0; padding-right: 0; }
/* a padded column already has its own spacing; don't add the page margin on top */
.row-full .col.padded > *, .row-full > .row-inner > .col.padded > .cols { padding-left: 0; padding-right: 0; }

@media (max-width: 760px) {
  .col, .row-full > .row-inner > .col { flex-basis: 100%; }
  /* Teacher cards come in rows of three; on phones pour every row into one two-wide grid
     so the cards run 2-2-2 instead of 2-1-2-1. */
  .col:has(> .cols > .col > .team) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0 16px; }
  .col:has(> .cols > .col > .team) > .cols:has(> .col > .team) { display: contents; }
  .col:has(> .cols > .col > .team) > :not(.cols:has(> .col > .team)) { grid-column: 1 / -1; }
  .col:has(> .team) { min-width: 0; }
  .col.empty { display: none; }
}

.text { margin-bottom: 1em; }
.lead { margin-left: auto; margin-right: auto; }
.text > :last-child { margin-bottom: 0; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.gradient-text { background: linear-gradient(to right bottom, var(--red), var(--purple)); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 700; display: inline-block; }
h6.gradient-text { font-size: 14px; line-height: 1.7; margin: 0 0 .8em; }
.gradient-text { display: block; width: fit-content; }
.center .gradient-text, .align-center .gradient-text { margin-left: auto; margin-right: auto; }
.center .strip-title, .align-center .strip-title { margin-left: auto; margin-right: auto; }
.small-line { background: var(--gradient); margin: 15px 0; max-width: 100%; }
.center .small-line, .align-center + .small-line { margin-left: auto; margin-right: auto; }
.strip-title { color: var(--purple); width: fit-content; }
.center .strip-title { margin-left: auto; margin-right: auto; }
.highlight h1, .highlight h2, .highlight h3 { background: linear-gradient(transparent 60%, rgba(229,188,216,.6) 60%); display: inline; }
.icon { font-size: 44px; line-height: 1; margin-bottom: .3em; }
.icon .fa { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.icon-white .fa { background: none; color: #fff; }
.icon-line { margin: 20px 0 4px; line-height: 0; }
.icon-line + .text h3 { margin-bottom: 10px; }
.icon-line + .text { margin-bottom: 0; }
.icon-line + .text + p { margin: 5px 0 20px; }
.icon-line svg { display: block; }
.icon-white { color: #fff; }
.divider { border: 0; border-top: 1px solid #e6e6e6; margin: 24px 0; width: 100%; }
.image { margin: 0 0 1em; display: flex; justify-content: flex-start; }
.image-center { justify-content: center; }
.image-right { justify-content: flex-end; }
.image img, .image a { width: auto; height: auto; flex: none; }
@media (max-width: 690px) { .image img { max-width: 100% !important; } }
/* overlapping image collage (live site's "cascading images"): each image is 52% of the width, centred,
   then nudged by its own offsets; the first one sets the height */
.casc { position: relative; width: 100%; }
.casc-layer { display: flex; align-items: center; }
.casc-layer:first-child { padding: 24%; }
.casc-layer:not(:first-child) { position: absolute; top: 0; bottom: 0; left: 24%; right: 24%; }
.casc-layer img { width: 100%; }
.casc-shadow { box-shadow: 0 50px 100px rgba(0, 0, 0, .3); }

/* team */
/* teacher cards, as on the live site: near-square photos edge to edge, name and role slide up over a
   dark fade on hover (always shown on touch screens, which can't hover) */
.cols:has(> .col > .team) { gap: 0; }
.team { position: relative; display: block; overflow: hidden; text-decoration: none; background: #444; }
.team img { display: block; width: 100%; aspect-ratio: 393 / 400; object-fit: cover; margin: 0; }
.team::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 55%);
  opacity: 0; transition: opacity .35s; }
.team-meta { position: absolute; left: 25px; right: 25px; bottom: 25px; z-index: 1; color: #fff; opacity: 0; transform: translateY(40px);
  transition: opacity .35s, transform .35s var(--ease); }
.team:hover::after, .team:focus-visible::after { opacity: 1; }
.team:hover .team-meta, .team:focus-visible .team-meta { opacity: 1; transform: none; }
@media (hover: none) { .team::after, .team-meta { opacity: 1; transform: none; } }
.team .name { display: block; font: 600 19px/26px var(--serif); color: #fff; }
.team .role { display: block; font-size: 14px; color: rgba(255, 255, 255, .8); }

/* testimonials */
/* testimonials, three styles as on the live site */
.t-stars { color: #d8d8d8; font-size: 14px; letter-spacing: 6px; line-height: 1; margin: 10px 0 0; }
.t-sub { display: block; font-size: 12px; line-height: 18px; color: #999; }
/* 1. one quote at a time, fading between them */
.tslider { width: 100%; text-align: center; }
.tslides { display: grid; }
.tslide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.tslide.active, .tslider:not(.ready) .tslide:first-child { opacity: 1; visibility: visible; }
.t-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 2px solid #ddd;
  border-radius: 50%; font: 700 30px/1 var(--serif); color: #888; padding-top: 12px; margin-bottom: 25px; }
.tslide blockquote { margin: 0; font-size: 22px; line-height: 32px; }
.tslide figcaption { margin-top: 20px; font-size: 22px; line-height: 32px; color: #676767; }
.tdots { display: flex; justify-content: center; gap: 10px; margin-top: 25px; min-height: 10px; }
.tdots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #ddd; cursor: pointer; }
.tdots button.active { background: var(--pink); }
.tdots:has(button:only-child) { display: none; }
/* 2. swipeable speech-bubble cards, the centre one highlighted */
.carousel-center { --card: min(610px, calc(100vw - 60px)); }
.carousel-center .carousel-track { padding: 0 calc(50% - var(--card) / 2); scroll-snap-type: x mandatory; }
.carousel-center .carousel-item { flex: 0 0 var(--card); scroll-snap-align: center; padding: 0 15px; }
.tcard { margin: 0; text-align: center; }
.tcard-bubble { position: relative; display: flex; gap: 30px; text-align: left; padding: 50px 65px 40px 30px; border-radius: 6px;
  background: transparent; color: #ccc; transition: background-color .4s, color .4s; }
.tcard-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px;
  background: inherit; transform: rotate(45deg); }
.tcard blockquote { margin: 0; font-size: 22px; line-height: 33px; }
.tcard .t-mark { font: 700 60px/1 var(--serif); color: #eee; flex: none; margin-top: -4px; }
.tcard .t-stars { color: inherit; opacity: .7; }
.tcard figcaption { margin-top: 30px; font-size: 22px; color: #ccc; transition: color .4s; }
.tcard.is-active .tcard-bubble { background: var(--pink); color: #fff; }
.tcard.is-active .t-mark { color: rgba(138, 53, 155, .25); }
.tcard.is-active figcaption { color: #676767; }
.tmulti .carousel-dots { gap: 10px; margin-top: 60px; }
.tmulti .carousel-dots button { width: 30px; height: 3px; border-radius: 0; background: #ccc; transform: none; }
.tmulti .carousel-dots button.active { background: var(--pink); transform: none; }
@media (max-width: 690px) { .tcard-bubble { padding: 30px 20px 25px; gap: 12px; } .tcard blockquote, .tslide blockquote { font-size: 18px; line-height: 28px; } }
/* 3. a single quote */
.tsingle { margin: 0 0 1em; text-align: left; }
.tsingle .t-mark { display: block; font: 700 50px/40px var(--serif); color: #444; height: 30px; }
.tsingle blockquote { margin: 10px 0 30px; font-size: 22px; line-height: 33px; }
.tsingle figcaption { font-size: 22px; line-height: 30px; color: #676767; }

/* toggles & tabs */
.toggles { width: 100%; }
/* accordions, as on the live site: light grey bars with the question in plain 14px text */
.toggle { margin-bottom: 4px; }
.toggle summary { cursor: pointer; padding: 9px 44px 9px 16px; line-height: 26px; font-weight: 400; color: rgba(0, 0, 0, .65);
  background: rgba(0, 0, 0, .043); list-style: none; position: relative; transition: background-color .2s; }
.toggle summary:hover { background: rgba(0, 0, 0, .07); }
.toggle summary::-webkit-details-marker { display: none; }
.toggle summary::after { content: "+"; position: absolute; right: 16px; top: 9px; font-size: 18px; color: rgba(0, 0, 0, .65); }
.toggle[open] summary::after { content: "–"; }
.toggle-body { padding: 16px; }
/* tabs, as on the live site: small grey buttons, the selected one pink */
.tabs { width: 100%; }
.tab-list { display: flex; flex-wrap: wrap; margin-bottom: 17px; }
.tab-list button { padding: 8px 15px; border: 0; border-radius: 0; font: 400 14px/26px var(--serif); color: #888;
  background: rgba(0, 0, 0, .043); cursor: pointer; transition: background-color .2s, color .2s; }
.tab-list button + button { border-left: 1px solid rgba(0, 0, 0, .06); }
.tab-list button:hover { color: #555; }
.tab-list button[aria-selected="true"] { background: var(--pink); color: #fff; }
.tab-panel { animation: tab-in .4s ease; }
@keyframes tab-in { from { opacity: 0; } to { opacity: 1; } }

/* cards */
/* carousel: columns per width as on the live site (1 phone, 2 tablet/small desktop, 3 from 1300px) */
.carousel { --c-n: var(--c-sm); width: 100%; margin-top: 30px; }
@media (min-width: 690px) { .carousel { --c-n: var(--c-md); } }
@media (min-width: 1000px) { .carousel { --c-n: var(--c-lg); } }
@media (min-width: 1300px) { .carousel { --c-n: var(--c-xl); } }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; cursor: grab; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel-item { flex: 0 0 calc(100% / var(--c-n)); padding: 0 var(--c-pad, 15px); scroll-snap-align: start; }
.carousel-dots { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 20px; margin-top: 40px; }
.carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #e3d5df; cursor: pointer;
  transition: transform .2s, background-color .2s; }
.carousel-dots button.active { background: var(--pink); transform: scale(1.35); }
.carousel-dots:has(button:only-child) { display: none; }

/* flip cards: icon and title on the front, turning over to the description (as on the live site) */
.flip { display: grid; perspective: 1000px; min-height: 300px; color: #fff; text-align: center; cursor: pointer; }
.flip-face { grid-area: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 30px;
  background: #0a0a0a var(--card-img, none) center / cover no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1); }
.flip-face::before { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .6); }
.flip-inner { position: relative; }
.flip-back { transform: rotateY(180deg); }
.flip.flipped .flip-front, .flip:focus-visible .flip-front { transform: rotateY(-180deg); }
.flip.flipped .flip-back, .flip:focus-visible .flip-back { transform: rotateY(0deg); }
@media (hover: hover) {
  .flip:hover .flip-front { transform: rotateY(-180deg); }
  .flip:hover .flip-back { transform: rotateY(0deg); }
}
.flip-icon { display: block; margin: 0 auto 12px; color: var(--pink); }
.flip-front h3 { color: #fff; margin: 0; }
.flip-back p { margin: 0; }
.flip-back p:empty { display: none; }

/* footer */
/* footer measured from the live site: four columns 28px from the edges, grey text, small grey headings */
.site-footer { background: #252525; color: #ccc; padding: 75px 28px 0; font-size: 14px; }
.site-footer h3 { color: #ccc; font-size: 19px; line-height: 26px; margin: 0 0 30px; }
.site-footer h4 { color: #777; font-size: 14px; line-height: 28px; margin: 0 0 20px; }
.site-footer a:not(.btn) { color: #ccc; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 999px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }
@media (max-width: 690px) { .footer-cols { grid-template-columns: 1fr; } }
.social { list-style: none; padding: 0; margin: 0; }
.social li { margin-bottom: 6px; }
.social .fa { width: 24px; font-size: 18px; vertical-align: -2px; color: var(--pink); }
.legal { margin: 50px 0 0; padding: 20px 0; color: #777; font-size: 14px; }
.site-footer .legal a { color: #777; }

/* Entrance animations (mirrors the Salient theme's: fade-in, grow-in, from-bottom/left/right,
   line draw, word reveal). Only active once the inline script adds .js, so no-JS shows everything. */
:root { --ease: cubic-bezier(.215, .61, .355, 1); }
.js [data-anim] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1s var(--ease); will-change: opacity, transform; }
.js [data-anim="grow-in"] { transform: scale(.82); }
.js [data-anim="from-bottom"] { transform: translateY(60px); }
.js [data-anim="from-left"] { transform: translateX(-60px); }
.js [data-anim="from-right"] { transform: translateX(60px); }
.js [data-anim="line"] { opacity: 1; transform: scaleX(0); transition-duration: 1.2s; }
.js [data-anim="strip"] { opacity: 1; position: relative; color: transparent; transition: color 0s linear .5s; }
.js [data-anim="strip"]::after { content: ""; position: absolute; inset: 0; background: var(--purple); transform: scaleX(0); transform-origin: left; }
.js [data-anim="strip"].in { color: var(--purple); }
.js [data-anim="strip"].in::after { animation: strip-sweep 1s var(--ease) forwards; }
@keyframes strip-sweep {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.01% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.js [data-anim="words"] { opacity: 1; }
[data-anim="words"] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
[data-anim="words"] .w > span { display: inline-block; }
.js [data-anim="words"] .w > span { transform: translateY(110%); transition: transform .9s var(--ease) calc(var(--i) * 80ms); }
.js [data-anim].in { opacity: 1; transform: none; }
.js [data-anim="words"].in .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js [data-anim="words"] .w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-anim="strip"] { color: var(--purple) !important; }
  .js [data-anim="strip"]::after { display: none; }
}

/* Mindbody widget breathing room */
healcode-widget { display: block; width: 100%; min-height: 400px; }

/* icon beside text (training and recorded-classes pages) */
.text-icon { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 1.5em; }
.text-icon > .fa { flex: none; width: 40px; font-size: 32px; line-height: 1; color: var(--pink); text-align: center; padding-top: 4px; }
.text-icon-body { flex: 1; min-width: 0; }

/* page spacing as on the live site: 40px above and below the content, none against a full-width band */
main { padding: 40px 0; }
main:has(> .page-title:first-child), main:has(> .row-wide:first-child) { padding-top: 0; }
main:has(> .row-wide:last-child) { padding-bottom: 0; }

/* full-screen-height sections (teacher pages): the photo half fills the screen on phones too, as live */
.row-tall > .row-inner { min-height: calc(100vh - 224px); }
/* on phones the live site stacks text and photo but keeps them the same height (the photo matches the
   text beside it), and full-screen sections still fill at least the screen */
@media (max-width: 760px) {
  .equal > .row-inner:has(> .col.has-col-img) { display: grid; grid-template-columns: 100%; grid-auto-rows: 1fr; }
  .equal > .row-inner > .col.has-col-img { min-height: 0; }
  .equal > .row-inner:has(> .col.has-col-img) > .col:not(.has-col-img) { display: flex; flex-direction: column; justify-content: center; }
  .row-tall > .row-inner { min-height: 100vh; }
}
.col.has-col-fg, .col.has-col-fg :is(h1, h2, h3, h4, h5, h6, p) { color: var(--col-fg); }

.split-heading { font-weight: 400; }
li > p { margin: 0; }
/* price headings sit tight above their "for a month" line, as on the live pricing page */
.gt-h1 { font-family: var(--serif); font-weight: 600; font-size: 41px; margin: 0; line-height: 1.1; }
@media (max-width: 690px) { .gt-h1 { font-size: 36px; } }
.gt-h1 + h6.gradient-text { margin-top: 0; }

/* Section-edge shapes (the wave above the footer, the mountains under page banners), as on live. */
.row.has-shape { overflow: hidden; }
.shape-divider { position: absolute; left: 0; right: 0; bottom: 0; height: var(--shape-h, 150px); z-index: 1; pointer-events: none; }
.shape-divider svg { position: absolute; left: 0; bottom: -1px; width: 100%; height: 100%; }
.shape-waves_opacity_alt path:nth-child(1) { opacity: .15; }
.shape-waves_opacity_alt path:nth-child(2) { opacity: .3; }
.shape-mountains path:nth-child(1) { opacity: .1; }
.shape-mountains path:nth-child(2) { opacity: .12; }
.shape-mountains path:nth-child(3) { opacity: .18; }
.shape-mountains path:nth-child(4) { opacity: .33; }
@media (max-width: 999px) { .shape-divider svg { height: 75%; } }
@media (max-width: 690px) { .shape-divider svg { height: 33%; } }

/* Footer social icons in each platform's own colour. */
.social a[href*="wa.me"] .fa { color: #25d366; }
.social a[href*="instagram.com"] .fa { color: #e4405f; }
.social a[href*="facebook.com"] .fa { color: #1877f2; }

/* Inner rows enlarged in WordPress (live uses a straight scale, at every screen size). */
.cols-scaled { transform: scale(var(--scale, 1)); transform-origin: center; }
/* Collage images grow in one after another as they scroll into view, as on live. */
.js [data-anim="casc-grow"] { opacity: 1; transform: scale(.75); transition: transform .7s cubic-bezier(.3, .95, .3, .95); }
@media (max-width: 999px) { .cols-scaled > .col { flex-basis: 100%; } }
.row-scaled { transform: scale(var(--scale, 1)); }
main { overflow-x: clip; }
/* Live leaves room under the enlarged About Us title (its row margin plus an empty highlight row). */
.cols-scaled { margin-bottom: 66px; }

/* Line icons sit in the middle of centred columns. */
:is(.center, .align-center) > .icon-line svg { margin-inline: auto; }
/* Where a row mixes line icons with font icons (e.g. Pricing's three benefits), give every icon the same
   50px box so the icons and the headings under them line up across the row. */
.cols:has(> .col > .icon-line):has(> .col > .icon:not(.icon-line)) > .col > .icon {
  height: 50px; margin: 0 0 14px; display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* Price cards with a booking button: same top padding so titles line up, button pinned to the same distance from the bottom. */
/* every price card gets the same inner spacing and layout */
.col.boxed { padding: clamp(24px, 4%, 48px); display: flex; flex-direction: column; }
.col.boxed:has(> .btn-wrap) > .spacer { display: none; }
.col.boxed:has(> .btn-wrap) > .btn-wrap { margin: auto 0 0 !important; padding-top: 24px; }

/* A page's main heading promoted from an h2 keeps the h2 look. */
h1.h2-look { font-size: 29px; line-height: 36px; }
@media (max-width: 690px) { h1.h2-look { font-size: 26px; line-height: 32px; } }