/* Version 2, change 1.64: carry the mobile design language onto wide screens.
   Price selectors and price layout are intentionally excluded. */
@media (min-width:701px) {
  body main#top > section:not(#classes) h2 {
    font-weight:600;
    letter-spacing:-.025em !important;
    text-wrap:balance;
    font-size:clamp(32px,3.5vw,56px);
    line-height:1.12;
  }
  main#top > section.audience:not(.trainers),
  .audience .audience-copy { background:#f3e6d7 !important; }
  #contacts .native-booking { background:#f5ebdf; }
  .site-background { transform:scale(1.13); transition:none; will-change:auto; }
  html { scroll-padding-top:var(--header-height,96px); }
  #trainers {
    height:calc(100svh - var(--header-height,96px));
    min-height:600px;
    padding:24px 4vw 20px;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  #trainers::before {
    display:block;
    inset:0;
    transform:none;
    filter:blur(22px) brightness(.58);
  }
  #trainers .trainers-heading {
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
    gap:32px;
    margin:0 0 20px;
    transform:none !important;
    opacity:1;
    transition:none;
  }
  #trainers .trainers-heading > div { flex:0 0 auto; width:auto; min-width:0; }
  body main#top #trainers .trainers-heading h2 {
    font-size:clamp(32px,3.5vw,48px);
    color:#ead4bc;
    margin:0;
  }
  #trainers .trainer-title-last::before { content:''; display:block; }
  #trainers .trainers-heading > p {
    align-self:flex-end;
    flex:0 1 440px;
    width:auto;
    min-width:0;
    max-width:440px;
    margin:0 0 5px;
    font-size:15px;
    line-height:1.5;
    color:rgba(255,255,255,.86);
  }
  #trainers .trainer-carousel {
    flex:1 1 0;
    min-height:0;
    width:100%;
    opacity:1;
    transform:none;
    transition:none;
  }
  #trainers .trainer-track { height:100%; min-height:0; overflow:visible; }
  #trainers .trainer-card { height:100%; min-height:0; }
  #trainers .trainer-photo { inset:0; height:100%; overflow:visible; }
  #trainers .trainer-photo-frame {
    display:block;
    position:absolute;
    inset:0 auto 0 50%;
    width:min(62%,780px);
    height:100%;
    transform:translateX(-50%);
    overflow:hidden;
    border-radius:80px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 12%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  #trainers .trainer-photo-frame img {
    position:static;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    transform:none;
    object-fit:cover;
    object-position:center;
    mask-image:none;
    -webkit-mask-image:none;
    transition:none;
  }
  #trainers .trainer-summary {
    padding:14px 0 20px;
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    column-gap:20px;
    row-gap:10px;
    align-content:stretch;
  }
  #trainers .trainer-summary h3 {
    grid-column:1;
    grid-row:1;
    font-size:clamp(25px,2.3vw,34px);
    line-height:1.2;
    font-weight:400;
    letter-spacing:-.02em;
    max-width:none;
    min-height:0;
  }
  #trainers .trainer-summary h3::before { display:none; }
  #trainers .trainer-summary h3 span { display:inline; }
  #trainers .trainer-role {
    grid-column:1;
    grid-row:2;
    margin:0;
    max-width:none;
    font-size:12px;
    line-height:1.5;
    letter-spacing:.025em;
  }
  #trainers .trainer-quote {
    grid-column:3;
    grid-row:4;
    align-self:end;
    max-width:none;
    padding:0;
    margin:0 0 18px;
    font-size:clamp(16px,1.35vw,21px);
    line-height:1.5;
  }
  #trainers .trainer-quote::before,
  #trainers .trainer-quote::after,
  #trainers .trainer-quote-desktop,
  #trainers .trainer-more { display:none; }
  #trainers .trainer-quote-link {
    display:block;
    color:inherit;
    text-decoration:underline dashed #e0a17b;
    text-decoration-thickness:1.5px;
    text-underline-offset:5px;
  }
  #trainers .trainer-quote-link:focus-visible { outline:2px solid #e0a17b; outline-offset:6px; }
  #trainers .trainer-controls {
    position:absolute;
    inset:50% 0 auto;
    transform:translateY(-50%);
    padding:0;
  }
  #trainers .trainer-arrow {
    width:25%;
    min-width:0;
    max-width:25%;
    padding:0;
    gap:12px;
  }
  #trainers .trainer-prev { justify-content:flex-start; }
  #trainers .trainer-next { justify-content:flex-end; }
  #trainers .trainer-arrow-copy { display:block; width:150px; }
  #trainers .trainer-arrow-copy strong { font-size:14px; line-height:1.3; white-space:pre-line; }
  #trainers .trainer-next .trainer-arrow-copy strong { text-align:right; }
  #trainers .trainer-arrow-icon { font-size:0; width:16px; }
  #trainers .trainer-arrow-icon::before {
    content:'';
    display:block;
    width:14px;
    height:14px;
    border:solid currentColor;
    border-width:2px 2px 0 0;
    transform:rotate(45deg);
  }
  #trainers .trainer-prev .trainer-arrow-icon::before { transform:rotate(225deg); }
}
@media (min-width:701px) and (max-width:1000px) {
  #trainers { min-height:640px; }
  #trainers .trainers-heading { gap:24px; }
  #trainers .trainers-heading > p { max-width:360px; font-size:14px; }
  #trainers .trainer-summary { grid-template-columns:1fr 1.3fr 1fr; }
  #trainers .trainer-photo-frame { width:70%; }
  #trainers .trainer-quote { font-size:16px; }
}
@media (min-width:701px) {
  #trainers::after { display:block; background:linear-gradient(180deg,rgba(15,22,16,.12),transparent 35%,rgba(15,22,16,.16)); }
}

@media (min-width:701px) {
  .header,
  .header.is-scrolled {
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    transform:translateZ(0);
  }
  .header::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:rgba(242,240,233,.92);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  .header.is-scrolled::before {
    background:rgba(242,240,233,.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.08);
    backdrop-filter:blur(20px) saturate(1.08);
  }
  .header .nav a { transition:color .3s ease,background-color .3s ease; }
  .audience .audience-image {
    position:relative;
    align-self:center;
    min-height:0;
    height:auto;
  }
  .audience .audience-image img {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    object-fit:contain;
  }
  html { scroll-snap-type:y proximity; }
  main#top > section:not(#classes),
  body > .footer { scroll-snap-align:start; }
  html:has(dialog[open]),
  html:has(.native-booking :is(input,select,textarea):focus) { scroll-snap-type:none; }
}@media (min-width:701px) {
  #trainers .trainer-summary { min-height:0; }
  #trainers .trainer-photo { background:transparent; }
  #trainers .trainer-card::before,
  #trainers .trainer-card::after,
  #trainers .trainer-summary::before,
  #trainers .trainer-summary::after,
  #trainers .trainer-photo::before,
  #trainers .trainer-photo::after { display:none; }
}
/* Version 2, change 1.65: restore complete desktop arrows and the earlier right-hand quote placement. */
@media (min-width:701px) {
  #trainers .trainer-arrow-icon { font-size:1.45rem; width:auto; }
  #trainers .trainer-arrow-icon::before { display:none; }
  #trainers .trainer-quote {
    position:absolute;
    right:0;
    top:23%;
    width:26%;
    max-width:455px;
    margin:0;
    font-size:clamp(1.12rem,1.38vw,1.42rem);
    line-height:1.58;
  }
}
@media (min-width:701px) {
  #trainers .trainer-quote { grid-area:auto; bottom:auto; left:auto; }
}
@media (min-width:701px) and (max-width:1300px) {
  #trainers .trainer-quote { top:12%; width:30%; }
}
@media (min-width:701px) and (max-width:1000px) {
  #trainers .trainer-quote { top:8%; font-size:16px; }
}/* Version 2, change 1.66: larger one-line desktop trainers heading. */
@media (min-width:701px) {
  body main#top #trainers .trainers-heading h2 {
    font-size:clamp(38px,4.5vw,72px);
    white-space:nowrap;
  }
  #trainers .trainer-title-last::before { display:none; }
  #trainers .trainers-heading > p { flex:0 1 440px; }
}
@media (min-width:701px) and (max-width:1000px) {
  #trainers .trainers-heading { gap:24px; }
  #trainers .trainers-heading > p { font-size:13px; }
}
/* Version 2, change 1.67: anchor desktop quotes near the bottom of each card. */
@media (min-width:701px) {
  #trainers .trainer-quote {
    top:auto;
    bottom:28px;
    right:0;
    width:30%;
  }
}
/* Change 2.18: use the same four-item glowing menu on desktop. */
@media (min-width:701px) {
  .header {
    --nav-section-fill:#cbcbbd;
    --nav-section-ink:#343d31;
    --nav-section-line:#727b65;
  }
  .header[data-nav-theme="studio"] { --nav-section-fill:#cbcbbd; --nav-section-line:#727b65; }
  .header[data-nav-theme="method"] { --nav-section-fill:#d6d3c4; --nav-section-line:#7a806e; }
  .header[data-nav-theme="audience"] { --nav-section-fill:#f3e6d7; --nav-section-line:#ac967c; }
  .header[data-nav-theme="trainers"] { --nav-section-fill:#454d3e; --nav-section-line:#8d987b; }
  .header[data-nav-theme="classes"] { --nav-section-fill:#f3e6d7; --nav-section-line:#ac967c; }
  .header[data-nav-theme="contacts"] { --nav-section-fill:#f5ebdf; --nav-section-line:#b5a38c; }
  .header .nav > a[href="#contacts"] { display:none; }
  .header .nav > a.is-active,
  .header .nav > a.is-active:hover {
    background:color-mix(in srgb,var(--nav-section-fill) 42%,transparent);
    color:#343d31;
    box-shadow:0 0 14px color-mix(in srgb,var(--nav-section-line) 55%,transparent),
      inset 0 0 10px rgba(255,255,255,.55);
  }
  .header .nav > a.is-active::after { display:none; }
}
@media (min-width:701px) {
  #trainers .trainer-quote-link { text-decoration:none; }
  #trainers .trainer-quote-link .trainer-quote-text { text-underline-offset:5px; }
}
/* Change 2.21: align desktop age mark with the contact row and content edge. */
@media (min-width:901px) {
  .hero > .hero-age { right:5vw; bottom:30px; }
  .hero .hero-contacts { right:calc(5vw + 48px); }
}
/* Change 2.22: larger desktop training counts and aligned title blocks. */
@media (min-width:701px) {
  #classes .price-group-title {
    display:block;
    width:100%;
  }
  #classes .price-group-title > div { width:100%; }
  #classes .price-group h3 {
    max-width:none;
    min-height:2.4em;
    margin:0;
    text-align:left;
    font-size:clamp(26px,2.4vw,36px);
    line-height:1.2;
  }
  #classes .price-group-title p {
    max-width:none;
    min-height:3em;
    margin:10px 0 0;
    text-align:left;
    font-size:16px;
    line-height:1.5;
  }
  #classes .price-count {
    display:inline-block;
    width:2.2ch;
    margin-right:8px;
    color:var(--ink);
    font:600 28px/1.2 var(--sans);
    font-variant-numeric:tabular-nums;
    vertical-align:baseline;
  }
}
/* Change 2.23: anchor desktop price headings within their cards and unify three type styles. */
@media (min-width:701px) {
  #classes .price-group,
  #classes .price-group:hover { transform:none !important; }
  #classes .price-group-title {
    position:relative;
    inset:auto;
    transform:none;
    width:100%;
    margin:0;
    padding:0;
    align-self:start;
  }
  #classes .price-group-title > div { width:100%; margin:0; }
  #classes .price-group h3 {
    position:static;
    transform:none;
    width:100%;
    max-width:none;
    min-height:2.7em;
    margin:0;
    font:600 24px/1.35 var(--sans);
    letter-spacing:0;
    text-align:left;
  }
  #classes .price-group-title p,
  #classes .price-row > span:first-child,
  #classes .price-package-line,
  #classes .price-row small,
  #classes .price-row .unit-price,
  #classes .price-note {
    font:400 18px/1.5 var(--sans);
    letter-spacing:0;
  }
  #classes .price-group-title p {
    min-height:3em;
    margin:8px 0 0;
    text-align:left;
  }
  #classes .price-count,
  #classes .price-row strong {
    font:600 28px/1.2 var(--sans);
    letter-spacing:0;
    font-variant-numeric:tabular-nums;
  }
}
/* Change 2.24: center desktop price headings and descriptions within each card. */
@media (min-width:701px) {
  #classes .price-group h3,
  #classes .price-group-title p { text-align:center; }
}
/* Change 2.25: keep the approved desktop price text anchored to its card background. */
@media (min-width:701px) {
  #classes .price-group,
  #classes .price-group:hover,
  #classes .price-group-title,
  #classes .price-group-title h3,
  #classes .price-group-title p {
    transform:none !important;
    animation:none !important;
    transition:none !important;
    opacity:1;
  }
}