/* Change 2.36: four responsive text sizes, shared by the entire website.
   The logo and graphical controls retain their artwork proportions.
   Important layer outranks the legacy unlayered size overrides. */
@layer typography {
 :root{
  --type-heading:30px;
  --type-subheading:20px;
  --type-number:22px;
  --type-body:16px;
 }
 @media(min-width:701px){
  :root{
   --type-heading:48px;
   --type-subheading:24px;
   --type-number:28px;
   --type-body:18px;
  }
 }
 body,body *:not(:where(.logo,.logo *,.hero-brand,.hero-brand *,
 .trainer-arrow-icon,.dialog-close,.studio-dialog-close,.method-dialog-close)){
  font-size:var(--type-body)!important;
 }
 body :is(h1,h2),body :is(h1,h2) *{
  font-size:var(--type-heading)!important;
  line-height:1.15!important;
 }
 body :is(h3,h4,h5,h6,.trainer-dialog-name),
 body :is(h3,h4,h5,h6,.trainer-dialog-name) *{
  font-size:var(--type-subheading)!important;
  line-height:1.3!important;
 }
 body :is(.price-count,.price-row strong,.hero-age){
  font-size:var(--type-number)!important;
  line-height:1.2!important;
 }
}
@media(max-width:700px){
 .header .nav a{letter-spacing:0;padding-inline:2px}
 #trainers .trainers-heading{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  min-height:0;padding-bottom:0;align-items:start;
 }
 #trainers .trainers-heading>div{display:block}
 #trainers .trainers-heading>p{
  position:static;inset:auto;width:auto;max-width:none;
  margin:0;line-height:1.4;
 }
 #trainers .trainers-heading h2{margin:0;white-space:nowrap}
 #trainers .trainer-summary .trainer-role{line-height:1.3;letter-spacing:0}
 #trainers .trainer-summary h3{line-height:1.3}
 #classes .price-row{grid-template-columns:minmax(0,1fr) 108px}
 #classes .price-group-title h3{line-height:1.3}
 .footer-contacts a[href^="mailto:"]{white-space:normal;overflow-wrap:anywhere}
}
/* Change 2.38: emphasize the method explanation heading without changing its size. */
.method-dialog-content > h2,.method-dialog-scrollbody > h2{font-weight:700}

/* Change 2.39: distinguish subheadings in the method explanation. */
.method-dialog-content .method-dialog-grid h3,.trainer-dialog .dialog-content section h3{font-weight:700;color:#835038;margin-bottom:14px}

/* Change 2.40: sentence case in the header and trainer roles. */
@layer typography {
 .header :is(a,button,small,.logo-copy),.trainer-role{
  text-transform:none!important;
  letter-spacing:normal!important;
 }
}
/* Change 2.41: keep the trainer introduction beside the title. */
@media(max-width:700px){
 body main#top #trainers .trainers-heading{
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  column-gap:12px;align-items:start;min-height:0;
  padding-inline:20px;box-sizing:border-box;
 }
 body main#top #trainers .trainers-heading>div{
  display:block;grid-column:1;grid-row:1;min-width:0;
 }
 body main#top #trainers .trainers-heading h2{
  display:block;max-width:none;margin:0;white-space:nowrap;
 }
 body main#top #trainers .trainers-heading>p{
  display:block;grid-column:2;grid-row:1;position:static;
  inset:auto;width:auto;max-width:none;min-width:0;
  margin:3px 0 0;line-height:1.4;text-align:left;
 }
}
/* Change 2.42: place the mobile trainer introduction below the heading. */
@media(max-width:700px){
 body main#top #trainers .trainers-heading{
  grid-template-columns:minmax(0,1fr);row-gap:10px;
 }
 body main#top #trainers .trainers-heading>p{
  grid-column:1;grid-row:2;margin:0;
 }
}
/* Change 2.43: same profile structure on desktop and mobile. */
.trainer-dialog .trainer-dialog-heading .dialog-close{
 position:absolute;top:12px;right:16px;z-index:102;
 display:grid;place-items:center;width:46px;height:46px;padding:0;
 border:1px solid rgba(38,49,41,.22);border-radius:50%;
 color:var(--ink);background:var(--paper);
 box-shadow:0 3px 14px rgba(15,25,18,.18);
 font:400 28px/1 var(--sans);cursor:pointer;
}
@media(min-width:701px){
 .trainer-dialog[open]{
  display:block;overflow-y:auto;overflow-x:hidden;
  height:90dvh;max-height:90dvh;
 }
 .trainer-dialog .trainer-dialog-heading{
  display:flex;align-items:center;position:sticky;top:0;z-index:101;
  min-height:76px;box-sizing:border-box;
  padding:16px 88px 16px 32px;background:var(--paper);
 }
 .trainer-dialog .dialog-photo{min-height:0;height:min(54vh,520px)}
 .trainer-dialog .dialog-photo img{width:100%;height:100%;object-fit:contain}
 .trainer-dialog .dialog-content{
  overflow:visible;max-width:860px;margin-inline:auto;
  padding:28px 32px 48px;box-sizing:border-box;
 }
 .trainer-dialog .dialog-content>h2{display:none}
 .trainer-dialog .dialog-content section>p{text-indent:1.5em}
}
/* Change 2.44: sticky method title and close control; retain desktop columns. */
.method-dialog-heading{display:contents}
.method-dialog-heading .method-dialog-close{
 position:fixed;top:max(12px,env(safe-area-inset-top));
 right:max(12px,env(safe-area-inset-right));z-index:100;
 display:grid;place-items:center;width:46px;height:46px;padding:0;
 border:1px solid rgba(38,49,41,.22);border-radius:50%;
 color:var(--ink);background:var(--paper);
 box-shadow:0 3px 14px rgba(15,25,18,.18);
 font:400 28px/1 var(--sans);cursor:pointer;
}
@media(min-width:801px){
 .method-dialog{height:90dvh;max-height:90dvh;overflow-y:auto}
 .method-dialog .method-dialog-content{padding-top:0}
 .method-dialog-heading{
  display:block;position:sticky;top:0;z-index:100;
  padding:22px 76px 22px 0;background:var(--paper);
  margin-bottom:28px;
 }
 .method-dialog-heading>h2{margin:0;max-width:none}
 .method-dialog-heading .method-dialog-close{
  position:absolute;top:20px;right:0;
 }
}
/* Change 2.45: consistent paragraph indents and an aligned equipment photo row. */
#method p,.method-dialog .method-dialog-content p{text-indent:1.5em}
.method-dialog .method-equipment-gallery{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 align-items:start;gap:16px;
}
.method-dialog .method-equipment-gallery figure{
 margin:0;width:100%;min-width:0;height:280px;max-height:none;
 aspect-ratio:auto;box-sizing:border-box;
}
.method-dialog .method-equipment-gallery img{
 display:block;width:100%;height:100%;object-fit:cover;
}
@media(max-width:800px){
 .method-dialog .method-equipment-gallery{gap:8px}
 .method-dialog .method-equipment-gallery figure{
  height:clamp(120px,30vw,160px);
 }
}
/* Change 2.46: fill the desktop audience column without top/bottom bands. */
@media(min-width:901px){
 .audience .audience-image{
  position:relative;align-self:stretch;min-height:0;height:auto;
 }
 .audience .audience-image img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
 }
}
/* Change 2.48: compact header with unchanged text sizes. */
@media(min-width:901px){
 body .header{height:72px;min-height:72px;padding-block:0}
}
@media(max-width:900px){
 body .header{height:auto;min-height:0;padding-top:2px;padding-bottom:0;row-gap:0}
 body .header .nav{margin-top:0;padding-top:0;padding-bottom:0;min-height:0}
 body .header .nav>a{padding-top:3px;padding-bottom:3px;min-height:0}
}
/* Change 2.49: a little more glass background beneath header content. */
@media(min-width:901px){
 body .header{height:78px;min-height:78px;padding-bottom:6px}
}
@media(max-width:900px){
 body .header{padding-bottom:6px}
}
/* Change 2.50: reserve equal desktop row space, even without a unit-price note. */
@media(min-width:701px){
 #classes .price-row{
  box-sizing:border-box;min-height:108px;
  padding-block:18px;margin-block:0;align-items:baseline;
 }
 #classes .price-row .price-amount{row-gap:6px}
 #classes .price-row .unit-price{margin-top:0;line-height:1.5}
}
/* Change 2.51: scroll only the method body; desktop trainer arrows use chevrons. */
.method-dialog-scrollbody{display:contents}
@media(min-width:801px){
 .method-dialog[open]{display:block;overflow:hidden}
 .method-dialog .method-dialog-content{
  display:flex;flex-direction:column;height:100%;min-height:0;
  padding:0;overflow:hidden;box-sizing:border-box;
 }
 .method-dialog .method-dialog-heading{
  position:relative;flex:0 0 auto;margin:0;
  padding:22px 100px 22px 24px;z-index:100;
 }
 .method-dialog .method-dialog-heading .method-dialog-close{right:24px}
 .method-dialog-scrollbody{
  display:block;flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:8px 24px 48px;scrollbar-width:none;
 }
 .method-dialog-scrollbody::-webkit-scrollbar{display:none}
}
@media(min-width:701px){
 #trainers .trainer-arrow-icon{
  display:grid;place-items:center;width:20px;min-width:20px;
  height:26px;font-size:0!important;transform:none;
 }
 #trainers .trainer-arrow-icon::before{
  content:"";display:block;width:11px;height:11px;
  border:0;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
 }
 #trainers .trainer-prev .trainer-arrow-icon::before{transform:rotate(225deg)}
}
/* Change 2.52: natural case in the booking form. */
@layer typography{.native-booking,.native-booking *{text-transform:none!important;letter-spacing:normal!important}}

/* Change 2.53: the method title scrolls with the body; only close stays pinned. */
@media(min-width:801px){
 .method-dialog .method-dialog-heading{display:contents}
 .method-dialog .method-dialog-heading .method-dialog-close{
  position:absolute;top:20px;right:24px;z-index:110;
 }
 .method-dialog .method-dialog-scrollbody{padding-top:22px}
 .method-dialog .method-dialog-scrollbody>h2{
  position:static;margin:0 0 28px;padding-right:76px;max-width:none;
 }
}
/* Change 2.54: keep mobile photo pixels out of the role and quote areas. */
@media(max-width:700px){
 #trainers .trainer-photo-frame{
  top:var(--trainer-safe-top,240px);
  height:var(--trainer-safe-height,280px);
  aspect-ratio:auto;transform:translateX(-50%);
 }
}
/* Fade only: no moving header text or abrupt scroll-threshold logo swap. */
@layer typography{
 .header>.logo{
  opacity:var(--brand-progress,0)!important;
  visibility:visible!important;transform:none!important;
  transition:opacity .32s ease-out!important;
 }
 .hero .hero-brand{
  opacity:calc(1 - var(--brand-progress,0))!important;
  transform:translateY(calc(var(--brand-progress,0) * -24px)) scale(calc(1 - var(--brand-progress,0) * .12))!important;
  filter:none!important;
  transition:opacity .32s ease-out,transform .45s ease-out!important;
 }
 @media(prefers-reduced-motion:reduce){
  .header>.logo,.hero .hero-brand{transition:none!important}
 }
}
/* Change 2.55: prevent native blue button/tap styling, including iOS WebKit. */
@layer typography{
 #trainers .trainer-arrow{
  -webkit-appearance:none!important;appearance:none!important;
  -webkit-tap-highlight-color:transparent!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
 }
 #trainers .trainer-arrow:is(:hover,:active,:focus,:focus-visible),
 #trainers .trainer-arrow *{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
 }
 #trainers .trainer-arrow-icon::before{border-color:currentColor!important}
 #trainers .trainer-arrow:focus{outline:none!important}
 #trainers .trainer-arrow:focus-visible{
  outline:2px solid #fff!important;outline-offset:4px!important;
 }
 @media(forced-colors:active){
  #trainers .trainer-arrow,#trainers .trainer-arrow:is(:hover,:active,:focus,:focus-visible),
  #trainers .trainer-arrow *{
   color:ButtonText!important;-webkit-text-fill-color:currentColor!important;
  }
  #trainers .trainer-arrow:focus-visible{outline-color:ButtonText!important}
 }
}
/* Change 2.56: trainer controls have no highlight or outline in any state. */
@layer typography{
 #trainers .trainer-arrow,
 #trainers .trainer-arrow:is(:hover,:active,:focus,:focus-visible),
 #trainers .trainer-arrow *{
  background:transparent!important;box-shadow:none!important;
  text-shadow:none!important;filter:none!important;outline:none!important;
  -webkit-tap-highlight-color:transparent!important;
 }
 #trainers .trainer-arrow::before,#trainers .trainer-arrow::after{
  background:transparent!important;box-shadow:none!important;outline:none!important;
 }
}
/* Change 2.57: only a quiet translucent fill marks the selected section. */
@layer typography{
 #navigation>a,#navigation>a:is(.is-active,:hover,:active,:focus,:focus-visible){
  background:transparent!important;box-shadow:none!important;
  text-shadow:none!important;filter:none!important;outline:none!important;
  color:var(--ink)!important;text-decoration:none!important;
  -webkit-tap-highlight-color:transparent!important;
 }
 #navigation>a::before,#navigation>a::after{display:none!important}
}
@layer typography{#navigation>a.is-active,#navigation>a.is-active:hover{background:rgba(255,255,255,.24)!important;box-shadow:none!important}}

/* Change 2.58: caption has a fixed position within the header wordmark. */
.header .logo-copy{
 --caption-top:29px;--caption-left:4px;--caption-line:8px;--wordmark-height:37px;
}
@media(max-width:900px){
 .header .logo-copy{
  --caption-top:22px;--caption-left:0px;--caption-line:8px;--wordmark-height:30px;
 }
}
@layer typography{
 .header .logo-copy{
  position:relative!important;display:block!important;
  flex:0 0 auto!important;height:var(--wordmark-height)!important;
  padding:0!important;white-space:nowrap!important;
  transform:none!important;animation:none!important;transition:none!important;
 }
 .header .logo-copy small{
  position:absolute!important;top:var(--caption-top)!important;
  left:var(--caption-left)!important;right:auto!important;bottom:auto!important;
  display:block!important;width:max-content!important;
  margin:0!important;line-height:var(--caption-line)!important;
  white-space:nowrap!important;transform:none!important;
  animation:none!important;transition:none!important;
 }
}
/* Change 2.59: desktop price text and card backgrounds move as one unit. */
@layer typography{
 @media(min-width:701px){
  #classes .classes-heading,#classes .classes-heading *,
  #classes .price-groups,#classes .price-groups *,
  #classes .price-note,#classes .price-note *{
   transform:none!important;translate:none!important;scale:none!important;
   animation:none!important;transition:none!important;opacity:1!important;
  }
  #classes .price-group,#classes .price-group:hover{
   position:relative!important;filter:none!important;
   backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
   background-attachment:scroll!important;
  }
  #classes .price-row,#classes .price-row:hover{
   background:transparent!important;box-shadow:none!important;filter:none!important;
  }
 }
}
/* Change 2.60: preserve complete trainer portraits in the available mobile area. */
@media(max-width:700px){
 body main#top #trainers .trainers-heading{
  display:block;min-height:0;padding-bottom:0;margin-bottom:16px;
 }
 #trainers .trainer-photo-frame{
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 82%,transparent),
   linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 82%,transparent),
   linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
 }
 #trainers .trainer-photo-frame img{
  top:0;left:var(--trainer-crop-x,50%);
  width:var(--trainer-crop-width,147%);max-width:none;height:100%;
  object-fit:contain;object-position:center;aspect-ratio:auto;transform:translateX(-50%);
  -webkit-mask-image:none;mask-image:none;
 }
}
/* Keep all desktop price content in its own painted card.
   Intermediate desktop/tablet widths use one sufficiently wide column. */
@media(min-width:701px){
 #classes .price-groups{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 #classes .price-group{
  display:grid;grid-template-rows:auto 1fr;gap:34px;
  min-width:0;min-height:0;height:auto;box-sizing:border-box;
  isolation:isolate;contain:layout paint;
 }
 #classes .price-group>div{min-width:0;width:100%;box-sizing:border-box}
 #classes .price-row{
  width:100%;margin-inline:0;padding-inline:0;
  grid-template-columns:minmax(0,1fr) max-content;
  column-gap:16px;
 }
 #classes .price-row>span:first-child{min-width:0}
 #classes .price-row .unit-price{white-space:normal;max-width:100%}
}
@media(min-width:701px) and (max-width:1000px){
 #classes .price-groups{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
}
/* Section-coloured translucent selection, without glow. */
@layer typography{
 #navigation>a.is-active,#navigation>a.is-active:hover{
  background:color-mix(in srgb,var(--nav-section-line,#8d987b) 48%,transparent)!important;
  box-shadow:none!important;
 }
 .header>.logo{transition:opacity .6s cubic-bezier(.45,0,.55,1)!important}
 .hero .hero-brand{
  transition:opacity .6s cubic-bezier(.45,0,.55,1),transform .6s cubic-bezier(.45,0,.55,1)!important;
 }
 @media(prefers-reduced-motion:reduce){
  .header>.logo,.hero .hero-brand{transition:none!important}
 }
}
/* Change 2.61: align age mark with hero contact baseline; emphasize booking phone. */
.hero .hero-contacts{
 right:5vw;grid-template-columns:auto auto auto;align-items:baseline;
}
.hero .hero-contacts .hero-age{
 position:static;display:block;align-self:baseline;justify-self:end;
 padding:0;margin:0;border:0;border-radius:0;background:transparent;
 color:#fff;pointer-events:none;
}
@media(max-width:760px){
 .hero .hero-contacts{right:22px;left:22px;grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
 .hero .hero-contacts>a{grid-column:1}
 .hero .hero-contacts .hero-age{grid-column:2;grid-row:2}
}
@layer typography{
 body #contacts .contact-inline-phone{
  font-size:var(--type-number)!important;line-height:1.2!important;font-weight:600;
 }
}

/* Change 2.62: stable background and unrestricted menu journeys. */
html{scrollbar-gutter:stable}
html.menu-scrolling{scroll-snap-type:none!important}
@media(max-width:700px){
 html{scroll-snap-type:y proximity}
 main#top>section,body>.footer{scroll-snap-stop:normal}
}
.site-background{transform:scale(1.15)!important;transition:none!important;will-change:auto}
.reveal:not(.hero-copy){transform:none!important;transition-property:opacity!important}

/* Change 2.63: neutral close controls on iOS/Android, with a warm keyboard focus. */
@layer typography{
 :is(.dialog-close,.studio-dialog-close,.method-dialog-close,.callback-close),
 :is(.dialog-close,.studio-dialog-close,.method-dialog-close,.callback-close):is(:hover,:active,:focus,:focus-visible){
  -webkit-appearance:none!important;appearance:none!important;
  -webkit-tap-highlight-color:transparent!important;
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;
  background:var(--paper)!important;
  outline:none!important;filter:none!important;
  box-shadow:0 3px 14px rgba(15,25,18,.18)!important;
 }
 :is(.dialog-close,.studio-dialog-close,.method-dialog-close,.callback-close):focus-visible{
  outline:2px solid #ac967c!important;outline-offset:3px!important;
 }
}
/* Feather the image itself instead of exposing a hard rounded clipping edge. */
@media(max-width:700px){
 #trainers .trainer-photo-frame{
  border-radius:0;
  -webkit-mask-image:
   linear-gradient(180deg,transparent,rgba(0,0,0,.25) 3%,rgba(0,0,0,.7) 6%,#000 10%,#000 70%,rgba(0,0,0,.65) 83%,rgba(0,0,0,.2) 94%,transparent),
   linear-gradient(90deg,transparent,rgba(0,0,0,.2) 4%,rgba(0,0,0,.65) 10%,#000 18%,#000 82%,rgba(0,0,0,.65) 90%,rgba(0,0,0,.2) 96%,transparent);
  mask-image:
   linear-gradient(180deg,transparent,rgba(0,0,0,.25) 3%,rgba(0,0,0,.7) 6%,#000 10%,#000 70%,rgba(0,0,0,.65) 83%,rgba(0,0,0,.2) 94%,transparent),
   linear-gradient(90deg,transparent,rgba(0,0,0,.2) 4%,rgba(0,0,0,.65) 10%,#000 18%,#000 82%,rgba(0,0,0,.65) 90%,rgba(0,0,0,.2) 96%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
 }
}

/* Change 2.65: native section slides with menu navigation kept independent. */
@media(max-width:700px){
 html{scroll-snap-type:y mandatory;scroll-padding-top:var(--header-height,74px)}
 main#top>section,body>.footer{scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:0}
 html.menu-scrolling,html:has(dialog[open]),html:has(.native-booking :is(input,select,textarea):focus){scroll-snap-type:none!important}
}
/* Keep glass compositing and menu glyph geometry constant during scroll. */
.header,.header.is-scrolled{transition:background-color .3s ease,box-shadow .3s ease}
.header::before,.header.is-scrolled::before{
 -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important;
 transition:background-color .3s ease!important;
}
.header .nav{transform:none!important;backface-visibility:visible}
.header .nav>a,.header .nav>a.is-active{font-weight:600}

html{scroll-behavior:smooth;overscroll-behavior-y:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Change 2.66: each mobile slide paints behind the translucent header. */
@media(max-width:700px){
 body .header{position:fixed;top:0;left:0;right:0;width:100%;box-sizing:border-box}
 html{scroll-padding-top:0}
 main#top>section{
  box-sizing:border-box;min-height:100svh;scroll-margin-top:0;
  background-clip:border-box;
 }
 main#top>section:not(.hero){border-top:var(--header-height,74px) solid transparent}
 main#top>.hero{height:100svh;min-height:100svh}
 main#top>#trainers{height:100svh;min-height:100svh}
}

/* Change 2.67: remove the audience block's large vertical insets. */
@media(max-width:700px){
 main#top>section.audience{padding-block:0;align-content:start}
 .audience .audience-copy{padding-top:0;padding-bottom:0}
 .audience .audience-copy>ul{margin-bottom:0}
}

/* Change 2.68: one content column per desktop price card, heading above rows. */
@media(min-width:701px){
 #classes .price-group{
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-auto-flow:row;gap:24px;
 }
 #classes .price-group>.price-group-title{grid-column:1;grid-row:1}
 #classes .price-group>.price-group-title+div{grid-column:1;grid-row:2}
 #classes .price-group-title h3{min-height:0;margin:0}
 #classes .price-group-title p{min-height:0;margin:10px 0 0}
 #classes .price-row{grid-template-columns:minmax(0,1fr) minmax(150px,max-content);column-gap:20px}
 #classes .price-row>span:first-child{white-space:normal;overflow-wrap:normal}
 #classes .price-group-premium .price-row>span:first-child{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 #classes .price-package-line{display:grid;grid-template-columns:calc(var(--type-number) * 1.6) minmax(0,1fr);gap:10px;align-items:baseline;white-space:normal}
 #classes .price-package-line>span{min-width:0;white-space:normal;overflow-wrap:anywhere}
 #classes .price-package-line .price-count{width:auto;margin:0;text-align:right}
}

/* Change 2.69: photograph reaches behind the mobile header; breathing room below it. */
@media(max-width:700px){
 main#top>section.audience:not(.hero){border-top-width:0}
 .audience .audience-image{margin-top:0;padding-top:0}
 .audience .audience-copy{padding-top:24px;padding-bottom:0}
}

/* Change 2.70: taps and dialog autofocus never draw focus rings. */
@layer typography{
 :root :is(.dialog-close,.studio-dialog-close,.method-dialog-close,.callback-close):is(:focus,:focus-visible){
  outline:none!important;outline-offset:0!important;
 }
 :root #trainers .trainer-quote-link,
 :root #trainers .trainer-quote-link:is(:hover,:active,:focus,:focus-visible){
  outline:none!important;box-shadow:none!important;background:transparent!important;
  -webkit-tap-highlight-color:transparent!important;
 }
 :root.keyboard-navigation :is(.dialog-close,.studio-dialog-close,.method-dialog-close,.callback-close):focus-visible{
  outline:2px solid var(--ink)!important;outline-offset:3px!important;
 }
 :root.keyboard-navigation #trainers .trainer-quote-link:focus-visible .trainer-quote-text{
  text-decoration-thickness:3px!important;
 }
}

/* Change 2.71: training counts share a baseline with their labels on desktop. */
@media(min-width:701px){
 #classes .price-group:not(.price-group-premium) .price-row>span:first-child{
  display:flex;align-items:baseline;gap:12px;
 }
 #classes .price-group:not(.price-group-premium) .price-count{
  flex:0 0 2.2ch;width:2.2ch;margin:0;text-align:right;
 }
}
/* Long mobile sections scroll before the outer page advances to another slide. */
@media(max-width:700px){
 html{scroll-snap-type:y proximity}
 main#top>section:not(.hero):not(#trainers){
  height:100svh;min-height:100svh;max-height:100svh;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:auto;
  scrollbar-width:none;scroll-behavior:smooth;
  scroll-padding-top:var(--header-height,74px);
 }
 main#top>section:not(.hero):not(#trainers)::-webkit-scrollbar{display:none}
}

/* Change 2.72: optically center larger counts against smaller training labels. */
@media(min-width:701px){
 #classes .price-group:not(.price-group-premium) .price-row>span:first-child{align-items:center}
 #classes .price-group:not(.price-group-premium) .price-count{line-height:1!important}
 #classes .price-package-line{align-items:center}
 #classes .price-package-line .price-count{line-height:1!important}
}

/* Change 2.72 clarification: continuous page scroll, free to pause between sections. */
@media(max-width:700px){
 html{scroll-snap-type:none!important}
 main#top>section:not(.hero):not(#trainers){
  height:auto;min-height:100svh;max-height:none;
  overflow:visible;scroll-snap-align:none;scroll-snap-stop:normal;
 }
 main#top>.hero,main#top>#trainers,body>.footer{scroll-snap-align:none;scroll-snap-stop:normal}
}

/* Change 2.74: compact hero caption and a continuous audience-to-trainers transition. */
@media(max-width:700px){
 .hero .hero-brand-copy small{font-size:9px;letter-spacing:.12em}
 .audience .audience-copy{padding-top:24px;padding-bottom:24px}
 main#top>#trainers{
  border-top-width:0;
  padding-top:calc(var(--header-height,74px) + 16px);
 }
}

@media(max-width:700px){body main#top>section.audience:not(#trainers){min-height:0}}

/* Change 2.75: balanced mobile section insets and symmetrical navigation gutters. */
@media(max-width:700px){
 body main#top>#trainers{padding-top:calc(var(--header-height,74px) + 24px);padding-bottom:24px}
 #trainers .trainer-summary{padding-bottom:0}
 #trainers .trainer-quote{margin-bottom:0}
 body main#top>#classes{padding-top:24px;padding-bottom:24px}
 #classes .price-note{margin-bottom:0}
 body main#top>#contacts{padding-top:24px;padding-bottom:24px;min-height:0;align-content:start}
 .header #navigation{
  display:flex;justify-content:space-between;gap:4px;
  width:100%;padding-inline:0;margin-inline:0;
 }
 .header #navigation>a{width:auto;flex:0 0 auto;padding-inline:8px}
}

@media(max-width:700px){
 html{scrollbar-gutter:auto;scrollbar-width:none}
 html::-webkit-scrollbar{display:none}
 body .header{padding-left:16px;padding-right:16px}
}

@media(max-width:700px){body main#top>section#contacts:not(#trainers){min-height:0}}

/* Change 2.76: balance complete painted section edges, including header clearance. */
@media(max-width:700px){
 body main#top>#trainers{
  height:calc(100svh + var(--header-height,74px));
  min-height:calc(100svh + var(--header-height,74px));
  padding-bottom:calc(var(--header-height,74px) + 24px);
 }
 body main#top>#classes,
 body main#top>#contacts{padding-bottom:calc(var(--header-height,74px) + 24px)}
}

/* Change 2.77: close both text-to-photo gaps slightly, keeping typography unchanged. */
@media(max-width:700px){
 body main#top>#trainers{
  height:calc(100svh + var(--header-height,74px) - 24px);
  min-height:calc(100svh + var(--header-height,74px) - 24px);
 }
}