/* FITRA public site, sixth pass (2026-10-07): the second phone draft.
   Everything from PALETTES to the end of SOFT is the owner's Claude Design canvas, copied unchanged
   (.design/canvas/Main.dc.html), so a later canvas can replace it whole. "Site additions" and "Motion" are this build's own.
   Rebuilt by .design/tools/port_canvas_css_soft_2026-10-07.py. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #EDE6DA; }
body { margin: 0; }
a { color: #1B2A33; }
a:hover { color: #B4582F; }

/* ========== PALETTES: every colour on the page is a variable set on .ft-after; data-palette (the "palette" prop) picks the set ==========
   page = section ground · paper = cards and light bands · ink = text and the footer · grey = secondary text
   accent = italic phrases and small marks · deep = buttons and the full-colour band · soft = accent on the dark footer
   sun / sun-pale = the second accent and its tint for larger fills · ph-a / ph-b = empty photo slots
   To keep one palette: copy its values into the first rule and delete the others. */
.ft-after { --ft-page: #EDE6DA; --ft-paper: #F6F1E7; --ft-paper-rgb: 246,241,231; --ft-ink: #1B2A33; --ft-ink-rgb: 27,42,51; --ft-grey: #55504A; --ft-accent: #C0663A; --ft-accent-rgb: 192,102,58; --ft-deep: #B4582F; --ft-soft: #D98A5E; --ft-soft-rgb: 217,138,94; --ft-sun: #F2C56B; --ft-sun-pale: #F9E6B8; --ft-ph-a: #E6D5BF; --ft-ph-b: #DFC0A4; --ft-shadow-rgb: 58,40,28; }
/* Limestone and sun (above) is the chosen palette. Rose and apricot is kept for comparison only */
.ft-after[data-palette="rose"] { --ft-page: #F3E9E3; --ft-paper: #FBF5F1; --ft-paper-rgb: 251,245,241; --ft-ink: #33242B; --ft-ink-rgb: 51,36,43; --ft-grey: #5A4D52; --ft-accent: #B9575F; --ft-accent-rgb: 185,87,95; --ft-deep: #9E4352; --ft-soft: #E8A3A0; --ft-soft-rgb: 232,163,160; --ft-sun: #F4B183; --ft-sun-pale: #FBE1CC; --ft-ph-a: #EBDCD4; --ft-ph-b: #E4C8BF; --ft-shadow-rgb: 70,40,40; }

/* ---------- base ---------- */
.ft-root { container: ft / inline-size; background: var(--ft-page); color: var(--ft-ink); font-family: 'Mulish', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.ft-root *, .ft-root *::before, .ft-root *::after { box-sizing: border-box; }
.ft-root h1, .ft-root h2, .ft-root h3, .ft-root p, .ft-root ul { margin: 0; }
.ft-root ul { padding: 0; list-style: none; }
.ft-root h1, .ft-root h2, .ft-root h3 { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.ft-root p { text-wrap: pretty; }
.ft-root em { font-style: italic; color: var(--ft-accent); }
.ft-root .ft-on-ink em { color: var(--ft-soft); }
.ft-root .ft-on-terra em { color: var(--ft-sun-pale); }
.ft-root [id] { scroll-margin-top: 92px; }
.ft-root p a { text-decoration-color: var(--ft-accent); text-underline-offset: 4px; }
.ft-on-ink a { color: var(--ft-paper); }
.ft-on-ink a:hover { color: var(--ft-soft); }
.ft-wrap { max-width: 1200px; margin: 0 auto; }
.ft-sec { padding: 72px 20px; }
.ft-sec-top { padding: 56px 20px 0; }
.ft-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the signature shape: clipped corners ---------- */
.ft-cut { --c: 22px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.ft-cut-alt { --c: 22px; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.ft-cut-s { --c: 12px; }
.ft-cut-l { --c: 32px; }
.ft-edge-br { --e: 0px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--e)), calc(100% - var(--e)) 100%, 0 100%); }
.ft-foot-cut { --c: 32px; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); }

/* ---------- wordmark as text ---------- */
.ft-wm { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 22px; letter-spacing: 0.28em; line-height: 1; color: var(--ft-ink); text-decoration: none; white-space: nowrap; }
.ft-wm:hover { color: var(--ft-ink); }
.ft-wm i { font-style: italic; color: var(--ft-accent); }
.ft-wm-ink { font-weight: 300; color: var(--ft-paper); }
.ft-wm-ink i { color: var(--ft-soft); }

/* ---------- buttons, links, pills ---------- */
.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.ft-btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.ft-btn-solid { background: var(--ft-deep); color: var(--ft-paper); }
.ft-btn-solid:hover { background: var(--ft-ink); color: var(--ft-paper); }
.ft-on-ink .ft-btn-solid:hover { background: var(--ft-paper); color: var(--ft-ink); }
.ft-btn-line { border-color: rgba(var(--ft-ink-rgb),.45); color: var(--ft-ink); }
.ft-btn-line:hover { background: var(--ft-ink); border-color: var(--ft-ink); color: var(--ft-paper); }
.ft-btn .ft-ico { width: 18px; height: 18px; transition: transform .4s ease; }
.ft-btn:hover .ft-ico { transform: translateX(3px); }
.ft-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--ft-accent); text-underline-offset: 6px; }
.ft-on-ink .ft-link { text-decoration-color: var(--ft-soft); }
.ft-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border: 1px solid rgba(var(--ft-ink-rgb),.4); border-radius: 999px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; line-height: 1; white-space: nowrap; }
.ft-on-ink .ft-pill { border-color: rgba(var(--ft-paper-rgb),.45); }
.ft-todo { background: rgba(var(--ft-accent-rgb),.15); border-radius: 4px; padding: 1px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ft-on-ink .ft-todo { background: rgba(var(--ft-soft-rgb),.24); }

/* ---------- photo placeholders ---------- */
.ft-ph { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--ft-ph-a); color: var(--ft-ink); }
.ft-ph-mid { background: var(--ft-ph-b); }
.ft-ph-dark { background: #34434B; color: var(--ft-paper); }
.ft-ph-cap { display: flex; align-items: flex-start; gap: 9px; max-width: 320px; padding: 14px 14px 16px; font-size: 13px; line-height: 1.4; }
.ft-ph-cap b { display: block; margin-bottom: 2px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ft-ph-cap .ft-ico { width: 20px; height: 20px; }
.ft-ph-cap { text-align: left; }
.ft-ph-cap-s { gap: 0; padding: 8px 9px 9px; font-size: 11px; line-height: 1.3; }
.ft-ph-cap-s b { margin-bottom: 1px; font-size: 9.5px; }

/* ---------- header ---------- */
.ft-head { position: sticky; top: 0; z-index: 20; background: var(--ft-page); border-bottom: 1px solid rgba(var(--ft-ink-rgb),.12); }
.ft-head-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; max-width: 1360px; margin: 0 auto; padding: 0 20px; }
.ft-nav { display: none; gap: 30px; }
.ft-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; }

/* ---------- hero ---------- */
.ft-hero { position: relative; padding-bottom: 8px; }
.ft-hero-photo { height: 270px; align-items: flex-start; }
.ft-hero-card { position: relative; z-index: 1; margin: -110px 16px 0; padding: 28px 24px 30px; background: var(--ft-paper); color: var(--ft-ink); }

/* ---------- three features in a row ---------- */
.ft-three { display: grid; grid-template-columns: 1fr; gap: 28px; }
.ft-feat { display: flex; align-items: flex-start; gap: 16px; }
.ft-sec-top .ft-feat { align-items: center; }
.ft-prom-photo { flex: none; width: 104px; height: 104px; }

/* ---------- the idea ---------- */
.ft-idea { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
.ft-name { display: flex; flex-direction: column; gap: 22px; padding: 28px 26px 30px; background: var(--ft-paper); }
.ft-split { display: grid; grid-template-columns: 1fr; margin-top: 64px; }
.ft-split-photo { aspect-ratio: 4 / 5; }
.ft-split-panel { position: relative; z-index: 1; margin: -88px 0 0 32px; padding: 32px 28px 36px; background: var(--ft-deep); color: var(--ft-paper); }

/* ---------- the room ---------- */
.ft-room { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.ft-room > * { min-height: 170px; }
.ft-room .ft-room-a { grid-column: 1 / 3; min-height: 260px; }
.ft-room .ft-room-d { grid-column: 1 / 3; min-height: 200px; }
.ft-privacy { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 12px; padding: 28px 24px; background: var(--ft-page); }
.ft-list { display: flex; flex-direction: column; gap: 12px; }
.ft-li { display: flex; align-items: flex-start; gap: 12px; }
.ft-li .ft-ico { width: 20px; height: 20px; margin-top: 3px; color: var(--ft-deep); }

/* ---------- classes, pricing ---------- */
.ft-two { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
.ft-panel { display: flex; flex-direction: column; gap: 22px; padding: 16px 16px 30px; }
.ft-panel-photo { aspect-ratio: 16 / 10; }
.ft-panel-body { display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; gap: 14px; padding: 0 10px; }
.ft-tile { display: flex; flex-direction: column; gap: 22px; padding: 32px 28px 34px; background: var(--ft-paper); color: var(--ft-ink); }

/* ---------- questions ---------- */
.ft-qa { display: grid; grid-template-columns: 1fr; gap: 36px; }
.ft-faqs { display: flex; flex-direction: column; gap: 10px; }
.ft-qa-photo { margin-top: 20px; aspect-ratio: 16 / 9; }
.ft-faq { background: var(--ft-paper); }
.ft-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 14px 22px; cursor: pointer; list-style: none; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; }
.ft-faq summary::-webkit-details-marker { display: none; }
.ft-faq summary .ft-ico { color: var(--ft-deep); transition: transform .4s ease; }
.ft-faq[open] summary .ft-ico { transform: rotate(45deg); }
.ft-faq p { max-width: 60ch; padding: 0 22px 22px; color: var(--ft-grey); }

/* ---------- visit ---------- */
.ft-visit { display: grid; grid-template-columns: 1fr; gap: 28px; }
.ft-visit-map { align-items: flex-start; aspect-ratio: 4 / 3; }
.ft-visit .ft-visit-facts { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ft-visit-book { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ---------- footer ---------- */
.ft-foot { padding: 56px 20px 32px; background: var(--ft-ink); color: var(--ft-paper); }
.ft-foot-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(var(--ft-paper-rgb),.18); }
.ft-foot-nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 18px; }
.ft-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; }
.ft-chan { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }

/* ---------- tablet ---------- */
@container ft (min-width: 720px) {
  .ft-sec { padding: 104px 48px; }
  .ft-sec-top { padding: 80px 48px 0; }
  .ft-cut, .ft-cut-alt { --c: 30px; }
  .ft-cut-s { --c: 14px; }
  .ft-cut-l { --c: 48px; }
  .ft-edge-br { --e: 48px; }
  .ft-foot-cut { --c: 48px; }
  .ft-head-in { height: 76px; padding: 0 48px; }
  .ft-hero-photo { height: 460px; }
  .ft-hero-card { width: 560px; margin: -240px 0 0 48px; padding: 44px 44px 46px; }
  .ft-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .ft-feat { flex-direction: column; gap: 18px; }
  .ft-sec-top .ft-feat { align-items: stretch; }
  .ft-prom-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .ft-idea { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 48px; }
  .ft-split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; margin-top: 96px; padding-bottom: 40px; }
  .ft-split-photo { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 3 / 2; }
  .ft-split-panel { grid-column: 7 / 13; grid-row: 1; margin: 0 0 -40px; padding: 48px 44px 52px; }
  .ft-room { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 20px; margin-top: 56px; }
  .ft-room > * { min-height: 0; }
  .ft-room .ft-room-a { grid-column: 1; grid-row: 1 / 3; min-height: 0; }
  .ft-room .ft-room-d { grid-column: 2 / 4; grid-row: 2; min-height: 0; }
  .ft-privacy { grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: center; margin-top: 20px; padding: 40px 44px; }
  .ft-two { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
  .ft-qa-photo { margin-top: 24px; aspect-ratio: 21 / 9; }
  .ft-visit { grid-template-columns: 1fr auto; gap: 40px; }
  .ft-visit-head { grid-column: 1; grid-row: 1; }
  .ft-visit-book { grid-column: 2; grid-row: 1; align-self: end; align-items: flex-end; max-width: 280px; text-align: right; }
  .ft-visit-map { grid-column: 1 / 3; grid-row: 2; aspect-ratio: 21 / 9; }
  .ft-visit .ft-visit-facts { grid-column: 1 / 3; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .ft-foot { padding: 72px 48px 40px; }
  .ft-foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- desktop ---------- */
@container ft (min-width: 1080px) {
  .ft-sec { padding: 136px 80px; }
  .ft-sec-top { padding: 112px 80px 0; }
  .ft-cut-l { --c: 64px; }
  .ft-edge-br { --e: 72px; }
  .ft-foot-cut { --c: 64px; }
  .ft-head-in { padding: 0 80px; }
  .ft-nav { display: flex; }
  .ft-hero { padding-bottom: 72px; }
  .ft-hero-photo { height: 680px; justify-content: flex-end; }
  .ft-hero-card { position: absolute; left: max(80px, calc((100cqi - 1200px) / 2)); bottom: 0; width: 600px; margin: 0; padding: 56px 56px 60px; }
  .ft-idea { grid-template-columns: 5fr 6fr; gap: 96px; margin-top: 64px; }
  .ft-name { padding: 44px 44px 48px; }
  .ft-split { padding-bottom: 56px; }
  .ft-split-panel { margin-bottom: -56px; padding: 64px 60px 68px; }
  .ft-room { grid-template-rows: 320px 320px; gap: 24px; }
  .ft-privacy { padding: 48px 56px; }
  .ft-panel { gap: 32px; padding: 24px 24px 44px; }
  .ft-panel-body { padding: 0 20px; }
  .ft-tile { padding: 48px 48px 52px; }
  .ft-qa { grid-template-columns: 4fr 7fr; gap: 96px; align-items: start; }
  .ft-qa-photo { margin-top: 32px; aspect-ratio: 4 / 5; }
  .ft-visit { gap: 48px; }
  .ft-visit-map { aspect-ratio: 5 / 2; }
  .ft-foot { padding: 88px 80px 48px; }
}

/* ========== NEW: opening marker (strip above the header) ========== */
.ft-open { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; padding: 6px 20px; background: var(--ft-sun); font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.3; text-align: center; }
.ft-open-dot { flex: none; width: 8px; height: 8px; background: var(--ft-deep); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }

/* ========== NEW: class types and "suggest a class" (inside Two ways to train) ========== */
.ft-types-block { margin-top: 56px; }
.ft-types { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 20px; }
.ft-type { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 18px; }
.ft-type-photo { width: 104px; height: 104px; }
.ft-type-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ft-type h3 { font-size: 20px; }
.ft-type p { color: var(--ft-grey); }
.ft-suggest { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; padding: 28px 24px 30px; background: var(--ft-paper); color: var(--ft-ink); }
.ft-suggest-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ft-suggest-field { display: flex; flex: 1 1 220px; flex-direction: column; gap: 8px; }
.ft-suggest-field label { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; }
.ft-suggest .ft-btn { cursor: pointer; }
.ft-suggest-photo { aspect-ratio: 3 / 2; }
.ft-input { width: 100%; min-height: 48px; padding: 0 20px; background: transparent; border: 1px solid rgba(var(--ft-ink-rgb),.45); border-radius: 999px; color: var(--ft-ink); font-family: 'Mulish', Helvetica, Arial, sans-serif; font-size: 16px; }
.ft-input:focus { outline: 2px solid var(--ft-deep); outline-offset: 2px; }
@container ft (min-width: 720px) {
  .ft-types-block { margin-top: 72px; }
  .ft-types { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px; margin-top: 40px; }
  .ft-type { grid-column: span 2; grid-template-columns: 1fr; justify-items: center; gap: 14px; text-align: center; }
  .ft-type:nth-child(4) { grid-column: 2 / 4; }
  .ft-type:nth-child(5) { grid-column: 4 / 6; }
  .ft-type-photo { width: 148px; height: 148px; }
  .ft-type-text { align-items: center; }
  .ft-suggest { grid-template-columns: 160px 1fr 1.2fr; align-items: center; gap: 32px; padding: 36px 44px; }
  .ft-suggest-photo { aspect-ratio: 4 / 3; }
}
@container ft (min-width: 1080px) {
  .ft-types { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
  .ft-type, .ft-type:nth-child(4), .ft-type:nth-child(5) { grid-column: auto; }
  .ft-type-photo { width: 168px; height: 168px; }
  .ft-suggest { grid-template-columns: 200px 1fr 1.2fr; gap: 48px; padding: 40px 56px; }
}

/* ========== NEW: class size (nine women to a coach; no box) ========== */
/* the illustration carries the count: it is never cropped, so every mat stays in view */
.ft-nine { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ft-nine-art { display: block; width: 100%; height: auto; aspect-ratio: 1444 / 933; object-fit: cover; }
.ft-nine-text { display: flex; flex-direction: column; align-items: flex-start; max-width: 560px; }
@container ft (min-width: 720px) {
  .ft-nine { gap: 36px; }
}
@container ft (min-width: 1080px) {
  .ft-nine { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 72px; }
}

/* ========== NEW: coaches ========== */
.ft-coach-photo { margin-top: 28px; aspect-ratio: 16 / 9; }
.ft-coaches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.ft-coach { padding: 24px 22px 26px; background: var(--ft-paper); }
.ft-coach-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ft-coach-body h3 { font-size: 20px; }
.ft-coach-body p { font-size: 15px; color: var(--ft-grey); }
.ft-coach .ft-pill { height: auto; min-height: 30px; padding: 5px 13px; line-height: 1.3; white-space: normal; }
@container ft (min-width: 720px) {
  .ft-coach-photo { margin-top: 40px; aspect-ratio: 21 / 9; }
  .ft-coaches { gap: 24px; margin-top: 24px; }
  .ft-coach { padding: 30px 28px 34px; }
  .ft-coach-body { gap: 10px; }
}
@container ft (min-width: 1080px) {
  .ft-coach-photo { margin-top: 48px; aspect-ratio: 3 / 1; }
  .ft-coach { padding: 40px 40px 44px; }
}

/* ========== NEW: open house (inside Coaches) ========== */
.ft-oh { display: grid; grid-template-columns: 1fr; margin-top: 56px; }
.ft-oh-photo { align-items: flex-start; aspect-ratio: 4 / 3; }
.ft-oh-panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; margin: -72px 28px 0 0; padding: 30px 26px 34px; background: var(--ft-sun-pale); color: var(--ft-ink); }
.ft-oh-panel .ft-slots { display: flex; flex-direction: column; align-self: stretch; gap: 10px; margin-top: 22px; }
.ft-slot { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 18px; background: var(--ft-paper); border: 1px solid rgba(var(--ft-ink-rgb),.28); border-radius: 999px; font-size: 15px; line-height: 1.35; }
.ft-slot .ft-ico { width: 20px; height: 20px; color: var(--ft-deep); }
.ft-oh-panel p a { text-decoration-color: var(--ft-deep); }
@container ft (min-width: 720px) {
  .ft-oh { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; margin-top: 80px; }
  .ft-oh-photo { grid-column: 6 / 13; grid-row: 1; align-self: stretch; justify-content: flex-end; aspect-ratio: auto; min-height: 480px; }
  .ft-oh-panel { grid-column: 1 / 8; grid-row: 1; margin: 40px 0; padding: 44px 44px 48px; }
}
@container ft (min-width: 1080px) {
  .ft-oh { margin-top: 104px; }
  .ft-oh-photo { min-height: 560px; }
  .ft-oh-panel { grid-column: 1 / 7; padding: 60px 60px 64px; }
}

/* ========== NEW: photo slots placed in existing sections (start here row, pricing tiles). These replaced the object renders ========== */
.ft-feat-photo { flex: none; width: 88px; height: 88px; }
.ft-start-line { align-self: center; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.35; }
.ft-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ft-tile-photo { aspect-ratio: 16 / 9; }
@container ft (min-width: 720px) {
  .ft-feat-photo { width: 120px; height: 120px; }
  .ft-start .ft-feat { align-items: center; text-align: center; }
}
@container ft (min-width: 1080px) {
  .ft-tile-photo { aspect-ratio: 2 / 1; }
}

/* ========== NEW: what women say ========== */
.ft-say { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-say-crest { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ft-say-photo { align-self: stretch; aspect-ratio: 16 / 9; margin-bottom: 28px; }
.ft-say-title { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ft-say-stage { display: grid; width: 100%; max-width: 860px; margin-top: 36px; }
.ft-say-pane { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.ft-say-pane.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.ft-say-pane blockquote { margin: 0; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: clamp(24px, 3.2cqi, 44px); line-height: 1.22; }
.ft-say-pane figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.ft-say-meta { color: var(--ft-grey); }
.ft-say-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.ft-say-dots { display: flex; }
.ft-say-dot { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.ft-say-dot::before { content: ""; width: 11px; height: 11px; background: rgba(var(--ft-ink-rgb),.28); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); transition: background-color .4s ease, transform .4s ease; }
.ft-say-dot.is-on::before { background: var(--ft-accent); transform: scale(1.3); }
.ft-say-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgba(var(--ft-ink-rgb),.4); border-radius: 999px; color: var(--ft-ink); cursor: pointer; transition: background-color .4s ease, color .4s ease; }
.ft-say-arrow:hover { background: var(--ft-ink); color: var(--ft-paper); }
.ft-say-arrow .ft-ico { width: 20px; height: 20px; }
@container ft (min-width: 720px) {
  .ft-say-crest { gap: 28px; }
  .ft-say-photo { aspect-ratio: 21 / 9; margin-bottom: 48px; }
  .ft-say-stage { margin-top: 48px; }
}
@container ft (min-width: 1080px) {
  .ft-say-photo { aspect-ratio: 3 / 1; margin-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-say-pane, .ft-say-pane.is-on { transition: none; }
}

/* ========== NEW: getting in (inside Visit) ========== */
.ft-way { margin-top: 72px; }
.ft-route { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
.ft-step { display: flex; flex-direction: column; gap: 12px; }
.ft-step-head { display: flex; align-items: center; gap: 12px; }
.ft-step-head .ft-ico { width: 20px; height: 20px; }
.ft-step-num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--ft-sun); border-radius: 999px; color: var(--ft-ink); font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1; }
.ft-step-line { flex-grow: 1; height: 1px; background: rgba(var(--ft-ink-rgb),.3); }
.ft-step-photo { aspect-ratio: 16 / 9; border-radius: 8px; }
.ft-way .ft-door { display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding: 22px 24px; background: var(--ft-sun-pale); color: var(--ft-ink); font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 19px; line-height: 1.35; }
.ft-way .ft-door .ft-ico { margin-top: 1px; color: var(--ft-deep); }
@container ft (min-width: 720px) {
  .ft-way { margin-top: 96px; }
  .ft-route { grid-template-columns: 1fr 1fr; gap: 36px 24px; margin-top: 40px; }
  .ft-way .ft-door { margin-top: 36px; padding: 28px 36px; font-size: 22px; }
}
@container ft (min-width: 1080px) {
  .ft-way { margin-top: 120px; }
  .ft-route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .ft-step-photo { aspect-ratio: 4 / 3; }
}

/* ========== AFTER: the six finish changes. Apply only inside a .ft-after wrapper; delete this block to drop them ========== */

/* 1. a soft, warm shadow only where a panel overlaps a photo (the shape moves to ::before so the shadow can follow the cut corners) */
.ft-after .ft-hero-card, .ft-after .ft-split-panel, .ft-after .ft-oh-panel { background: none; clip-path: none; filter: drop-shadow(0 20px 26px rgba(var(--ft-shadow-rgb),.26)) drop-shadow(0 2px 5px rgba(var(--ft-shadow-rgb),.16)); }
.ft-after .ft-hero-card::before, .ft-after .ft-split-panel::before, .ft-after .ft-oh-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.ft-after .ft-hero-card::before { background: var(--ft-paper); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.ft-after .ft-split-panel::before { background: var(--ft-deep); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.ft-after .ft-oh-panel::before { background: var(--ft-sun-pale); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }

/* 2. boxes that sit flat on the page keep no shadow: nothing to add */

/* 3. paper grain over every surface instead of gloss */
.ft-after .ft-root { position: relative; }
.ft-after .ft-root::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; background-image: url(img/art/grain.png); background-size: 200px 200px; }

/* 4. retired: the object renders that broke out of the pricing tiles are now photo slots inside the tiles */

/* 5. a terracotta hairline keyline inside the light panels (hero card, coached classes, open house), following the cut corners */
.ft-after .ft-hero-card, .ft-after .ft-oh-panel, .ft-after .ft-panel.ft-on-sun { --k: calc(var(--c) - 4px); }
.ft-after .ft-panel.ft-on-sun { position: relative; }
.ft-after .ft-hero-card::after, .ft-after .ft-oh-panel::after, .ft-after .ft-panel.ft-on-sun::after { content: ""; position: absolute; inset: 7px; pointer-events: none; background: rgba(var(--ft-accent-rgb),.5); }
.ft-after .ft-hero-card::after, .ft-after .ft-panel.ft-on-sun::after { clip-path: polygon(evenodd, var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k), var(--k) 0, calc(var(--k) + .4px) 1px, 1px calc(var(--k) + .4px), 1px calc(100% - 1px), calc(100% - var(--k) - .4px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--k) - .4px), calc(100% - 1px) 1px, calc(var(--k) + .4px) 1px); }
.ft-after .ft-oh-panel::after { clip-path: polygon(evenodd, 0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 0, 1px 1px, 1px calc(100% - var(--k) - .4px), calc(var(--k) + .4px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(var(--k) + .4px), calc(100% - var(--k) - .4px) 1px, 1px 1px); }

/* 6. two shapes: photos and overlapping panels keep the cut corner; text-only boxes take a small radius */
.ft-after .ft-faq, .ft-after .ft-tile, .ft-after .ft-coach, .ft-after .ft-privacy, .ft-after .ft-name, .ft-after .ft-door, .ft-after .ft-idea .ft-cut-s { clip-path: none; border-radius: 8px; }
.ft-after .ft-paper-chip { border-radius: 8px; }

/* ========== PHONE: compaction below 720px. Tablet and desktop are untouched; delete this block to undo ========== */
@container ft (max-width: 719.98px) {
  /* less air between sections */
  .ft-root .ft-sec { padding-top: 52px; padding-bottom: 52px; }
  .ft-root .ft-sec-top { padding-top: 40px; }
  .ft-root .ft-three { gap: 20px; }

  /* swipe rows for things you browse: room photos, class types, coaches, the way in */
  .ft-root .ft-room, .ft-root .ft-types, .ft-root .ft-coaches, .ft-root .ft-route { display: flex; gap: 12px; margin-left: -20px; margin-right: -20px; padding: 0 20px 2px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .ft-root .ft-room::-webkit-scrollbar, .ft-root .ft-types::-webkit-scrollbar, .ft-root .ft-coaches::-webkit-scrollbar, .ft-root .ft-route::-webkit-scrollbar { display: none; }
  .ft-root .ft-room > *, .ft-root .ft-types > *, .ft-root .ft-coaches > *, .ft-root .ft-route > * { scroll-snap-align: start; }
  .ft-root .ft-room { margin-top: 28px; }
  .ft-root .ft-room > * { flex: 0 0 78%; min-height: 0; aspect-ratio: 1 / 1; }
  .ft-root .ft-type { flex: 0 0 43%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .ft-root .ft-type-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .ft-root .ft-type h3 { font-size: 18px; }
  .ft-root .ft-type p { font-size: 15px; line-height: 1.45; }
  .ft-root .ft-coaches { margin-top: 12px; }
  .ft-root .ft-coach { flex: 0 0 78%; }
  .ft-root .ft-route { margin-top: 24px; }
  .ft-root .ft-step { flex: 0 0 76%; }

  /* the two ways to train: both stay visible, each with a shorter photo */
  .ft-root #classes .ft-two { gap: 12px; margin-top: 28px; }
  .ft-root #classes .ft-panel { gap: 18px; padding: 16px 16px 28px; }
  .ft-root #classes .ft-panel-photo { aspect-ratio: 16 / 9; }

  /* suggest a class: the photo becomes a thumbnail beside the heading */
  .ft-root .ft-types-block { margin-top: 40px; }
  .ft-root .ft-suggest { grid-template-columns: 84px 1fr; align-items: center; gap: 16px; padding: 22px 20px 24px; }
  .ft-root .ft-suggest-photo { aspect-ratio: 1 / 1; }
  .ft-root .ft-suggest-form { grid-column: 1 / 3; }

  /* start here: three across */
  .ft-root .ft-start { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ft-root .ft-start .ft-feat { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
  .ft-root .ft-feat-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .ft-root .ft-start-line { font-size: 14px; }

  /* the idea: the definition without the logo, and a shorter photo */
  .ft-root .ft-idea { gap: 24px; margin-top: 28px; }
  .ft-root .ft-name { padding: 20px 20px 22px; }
  .ft-root .ft-name > img, .ft-root .ft-name > div:first-of-type { display: none; }
  .ft-root .ft-split { margin-top: 40px; }
  .ft-root .ft-split-photo { aspect-ratio: 4 / 3; }
  .ft-root .ft-split-panel { margin-top: -56px; padding: 26px 24px 28px; }

  /* class size: the illustration sits above the text */
  .ft-root .ft-nine { gap: 22px; }

  /* open house and visit: shorter photos */
  .ft-root .ft-oh { margin-top: 40px; }
  .ft-root .ft-oh-photo, .ft-root .ft-visit-map { aspect-ratio: 16 / 9; }
  .ft-root .ft-oh-panel { margin-top: -44px; padding: 26px 22px 28px; }
  .ft-root .ft-way { margin-top: 52px; }

  /* pricing, questions, footer: tighter */
  .ft-root .ft-tile { gap: 16px; padding: 26px 22px; }
  .ft-root .ft-faq summary { min-height: 60px; padding: 12px 18px; font-size: 17px; }
  .ft-root .ft-faq p { padding: 0 18px 18px; }
  .ft-root .ft-foot { padding-top: 44px; }
}

/* ========== PHONE NAVIGATION: two options, chosen by data-nav on .ft-after (the "nav" prop) ==========
   bar  = option A. Six short views (home, idea, classes, coaches, pricing, visit) and a bar fixed to the bottom of the screen.
          Each section names its view (or views) in data-pg. The current view is data-view on .ft-after; the script changes it when a link is followed.
   menu = option B. One scrolling page, with a sticky row of section chips under the header.
   Tablet always shows the chip row. Desktop keeps the links in the header.
   To drop option A, delete the "option A" rules below with nav.ft-bar, nav.ft-next and section.ft-cards-end. To drop option B on phones, delete the "option B" rules. */
.ft-menu, .ft-bar, .ft-next, .ft-cards-end { display: none; }

/* the chip row (option B, and tablet) */
.ft-menu { gap: 8px; padding: 2px 20px 12px; overflow-x: auto; scrollbar-width: none; }
.ft-menu::-webkit-scrollbar { display: none; }
.ft-chip { position: relative; flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; background: var(--ft-paper); border: 1px solid rgba(var(--ft-ink-rgb),.4); border-radius: 999px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; color: var(--ft-ink); text-decoration: none; white-space: nowrap; transition: background-color .3s ease, border-color .3s ease; }
.ft-chip::after { content: ""; position: absolute; inset: -6px -2px; }
.ft-chip:hover { border-color: var(--ft-ink); color: var(--ft-ink); }
.ft-chip.is-on { background: var(--ft-sun); border-color: var(--ft-sun); }

/* the bottom bar (option A): an icon and a label for each view */
.ft-bar { position: sticky; bottom: 0; z-index: 25; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--ft-paper); border-top: 1px solid rgba(var(--ft-ink-rgb),.14); box-shadow: 0 -8px 20px rgba(var(--ft-shadow-rgb),.1); }
.ft-bar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.1; color: var(--ft-grey); text-decoration: none; white-space: nowrap; }
.ft-bar-item:hover { color: var(--ft-ink); }
.ft-bar-ico { display: grid; place-items: center; width: 44px; height: 28px; border-radius: 999px; transition: background-color .3s ease; }
.ft-bar-ico .ft-ico { width: 22px; height: 22px; }
.ft-bar-item[aria-current="page"] { color: var(--ft-ink); font-weight: 600; }
.ft-bar-item[aria-current="page"] .ft-bar-ico { background: var(--ft-sun); }

@container ft (max-width: 719.98px) {
  /* both options: a shorter header bar */
  .ft-root .ft-head-in { height: 56px; }
  .ft-root [id] { scroll-margin-top: 72px; }

  /* option B: the chip row under the header */
  .ft-after[data-nav="menu"] .ft-menu { display: flex; }
  .ft-after[data-nav="menu"] [id] { scroll-margin-top: 124px; }

  /* option A: one view at a time */
  .ft-after[data-nav="bar"][data-view="home"] [data-pg]:not([data-pg~="home"]),
  .ft-after[data-nav="bar"][data-view="idea"] [data-pg]:not([data-pg~="idea"]),
  .ft-after[data-nav="bar"][data-view="classes"] [data-pg]:not([data-pg~="classes"]),
  .ft-after[data-nav="bar"][data-view="coaches"] [data-pg]:not([data-pg~="coaches"]),
  .ft-after[data-nav="bar"][data-view="pricing"] [data-pg]:not([data-pg~="pricing"]),
  .ft-after[data-nav="bar"][data-view="visit"] [data-pg]:not([data-pg~="visit"]) { display: none; }

  /* option A: a section that now opens a view takes its top padding back (the long page sets it to 0 inline) */
  .ft-after[data-nav="bar"] #coaches, .ft-after[data-nav="bar"] #visit, .ft-after[data-nav="bar"][data-view="home"] #class-size { padding-top: 52px !important; }

  /* option A: the bar, and the cards that close the Home view (the same cards sit higher on the long page) */
  .ft-after[data-nav="bar"] .ft-bar { display: grid; }
  .ft-after[data-nav="bar"] .ft-cards-top { display: none; }
  .ft-after[data-nav="bar"] .ft-cards-end { display: block; padding: 0 20px 52px; }

  /* option A: one link to the next view, above the footer */
  .ft-after[data-nav="bar"] .ft-next { display: block; }
  .ft-next a { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 20px; padding: 22px 0 40px; border-top: 1px solid rgba(var(--ft-ink-rgb),.16); text-decoration: none; }
  .ft-next a.ft-next-plain { padding-top: 34px; border-top: 0; }
  .ft-next-text { display: flex; flex-direction: column; gap: 2px; }
  .ft-next-label { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.4; color: var(--ft-grey); }
  .ft-next-title { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 28px; line-height: 1.15; }
  .ft-next-go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(var(--ft-ink-rgb),.4); border-radius: 999px; transition: background-color .4s ease, color .4s ease; }
  .ft-next a:hover .ft-next-go { background: var(--ft-ink); color: var(--ft-paper); }
  .ft-next-go .ft-ico { width: 20px; height: 20px; }
}
@container ft (min-width: 720px) {
  .ft-root .ft-menu { display: flex; padding: 0 48px 14px; }
  .ft-root [id] { scroll-margin-top: 140px; }
}
@container ft (min-width: 1080px) {
  .ft-root .ft-menu { display: none; }
  .ft-root [id] { scroll-margin-top: 92px; }
}

/* ========== NEW: home cards (large links to the other sections). section.ft-cards-top sits after the three promises on the long page; section.ft-cards-end closes the Home view in option A ========== */
.ft-cards { padding: 52px 20px 0; }
.ft-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ft-card { display: flex; flex-direction: column; background: var(--ft-paper); color: var(--ft-ink); text-decoration: none; }
.ft-card:hover { color: var(--ft-ink); }
.ft-card:first-child { grid-column: 1 / -1; }
.ft-card-photo { aspect-ratio: 4 / 3; }
.ft-card:first-child .ft-card-photo { aspect-ratio: 16 / 9; }
.ft-card-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 12px 16px; }
.ft-card-title { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 24px; line-height: 1.1; }
.ft-card-strip .ft-ico { width: 22px; height: 22px; color: var(--ft-deep); transition: transform .4s ease; }
.ft-card:hover .ft-card-strip .ft-ico { transform: translateX(4px); }
.ft-card-terra { background: var(--ft-deep); color: var(--ft-paper); }
.ft-card-terra:hover { color: var(--ft-paper); }
.ft-card-terra .ft-card-strip .ft-ico { color: var(--ft-sun-pale); }
.ft-card-sun { background: var(--ft-sun); }
.ft-card-sun .ft-card-strip .ft-ico { color: var(--ft-ink); }
@container ft (min-width: 720px) {
  .ft-cards { padding: 80px 48px 0; }
  .ft-cards-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .ft-card, .ft-card:first-child { grid-column: span 2; }
  .ft-card:nth-child(n+4) { grid-column: span 3; }
  .ft-card-photo, .ft-card:first-child .ft-card-photo { aspect-ratio: auto; height: 180px; }
  .ft-card-strip { min-height: 68px; padding: 14px 20px; }
}
@container ft (min-width: 1080px) {
  .ft-cards { padding: 112px 80px 0; }
  .ft-cards-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ft-card, .ft-card:first-child, .ft-card:nth-child(n+4) { grid-column: auto; }
  .ft-card-photo, .ft-card:first-child .ft-card-photo { height: 200px; }
}

/* ========== WARM: the lighter, sunnier finish ==========
   Sun var(--ft-sun) is the second accent; Sun pale var(--ft-sun-pale) is its tint for larger fills. Ink is kept for text and the footer only.
   Colour swaps were made in place in the blocks above (opening marker, hero card, coached classes, suggest a class, open house, pricing, getting in, photo slots, footer size). What is new sits here. */
.ft-root h1 em, .ft-root h2 em { box-shadow: inset 0 -0.2em 0 var(--ft-sun); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ft-root .ft-on-sun em { color: var(--ft-deep); }
.ft-root .ft-on-terra em, .ft-root .ft-on-sun em { box-shadow: none; }
.ft-on-terra .ft-pill { background: var(--ft-paper); border-color: var(--ft-paper); color: var(--ft-ink); }
.ft-on-terra .ft-todo { background: var(--ft-paper); color: var(--ft-ink); }
.ft-paper-chip { display: inline-block; padding: 8px 16px; background: var(--ft-paper); border-radius: 8px; color: var(--ft-ink); }

/* ========== SOFT (phone only): the second draft after the design review, switched on by data-look="soft" (the "look" prop) ==========
   About 70% soft: photos, panels, cards and lists are rounded. About 30% geometric: the hero card, the terracotta quote panel,
   the pricing band, the footer edge and the small square marks keep their clipped corners.
   Hierarchy: one size up on type, larger photos, one spacing rhythm, fewer boxes and fewer beige blocks.
   The first draft is untouched when the prop is not set. Delete this block to drop the second draft. */
@container ft (max-width: 719.98px) {
  /* type, one size up. Body text stays 16px: a 17px rule once sat here on .ft-root, but .ft-root is the container this query measures, so it never applied */
  .ft-after[data-look="soft"] .ft-root h1 { font-size: 40px !important; line-height: 1.05; }
  .ft-after[data-look="soft"] .ft-root h2 { font-size: 34px !important; line-height: 1.08; }
  .ft-after[data-look="soft"] .ft-pill { height: 32px; padding: 0 14px; font-size: 14px; }
  .ft-after[data-look="soft"] .ft-open { font-size: 14px; }
  .ft-after[data-look="soft"] .ft-ph-cap-s { padding: 12px 14px 14px; font-size: 13px; }
  .ft-after[data-look="soft"] .ft-ph-cap-s b { font-size: 10.5px; }

  /* one spacing rhythm */
  .ft-after[data-look="soft"] .ft-root .ft-sec { padding-top: 64px; padding-bottom: 64px; }
  .ft-after[data-look="soft"] .ft-root .ft-sec-top { padding-top: 48px; }

  /* shapes: rounded by default; the geometric few are restored or never touched */
  .ft-after[data-look="soft"] .ft-cut, .ft-after[data-look="soft"] .ft-cut-alt { clip-path: none; border-radius: 20px; }
  .ft-after[data-look="soft"] .ft-cut-s { border-radius: 14px; }
  .ft-after[data-look="soft"] #pricing { border-radius: 0; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  .ft-after[data-look="soft"] .ft-oh-panel::before { clip-path: none; border-radius: 24px; }
  .ft-after[data-look="soft"] .ft-oh-panel::after, .ft-after[data-look="soft"] .ft-panel::after { display: none; }

  /* fewer beige blocks: the room and the quotes sit on the page, not on Paper bands */
  .ft-after[data-look="soft"] #room, .ft-after[data-look="soft"] #voices { background: transparent !important; }
  .ft-after[data-look="soft"] .ft-privacy { background: var(--ft-paper); }

  /* hero: a taller photo */
  .ft-after[data-look="soft"] .ft-hero-photo { height: 440px; }
  .ft-after[data-look="soft"] .ft-hero-card { margin-top: -132px; }

  /* three promises: one large photo each, text below */
  .ft-after[data-look="soft"] .ft-sec-top .ft-three { gap: 40px; }
  .ft-after[data-look="soft"] .ft-sec-top .ft-feat { flex-direction: column; align-items: stretch; gap: 16px; }
  .ft-after[data-look="soft"] .ft-prom-photo { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .ft-after[data-look="soft"] .ft-sec-top h3 { font-size: 24px !important; }

  /* home cards: the photo is the card, with the label on a Paper pill */
  .ft-after[data-look="soft"] .ft-cards { padding-top: 64px; }
  .ft-after[data-look="soft"] .ft-cards-grid { grid-template-columns: 1fr; gap: 14px; }
  .ft-after[data-look="soft"] .ft-card { position: relative; grid-column: auto; background: var(--ft-ph-a); }
  .ft-after[data-look="soft"] .ft-card-photo { height: 200px; aspect-ratio: auto; align-items: flex-start; }
  .ft-after[data-look="soft"] .ft-card-strip { position: absolute; left: 12px; bottom: 12px; gap: 14px; min-height: 52px; padding: 0 16px 0 20px; background: var(--ft-paper); border-radius: 999px; color: var(--ft-ink); }
  .ft-after[data-look="soft"] .ft-card-strip .ft-ico { color: var(--ft-deep); }

  /* the idea: a larger photo under the quote panel */
  .ft-after[data-look="soft"] .ft-split-photo { aspect-ratio: 4 / 5; }
  .ft-after[data-look="soft"] .ft-split-panel { margin-top: -72px; margin-left: 24px; }

  /* the room: larger photos in the swipe row */
  .ft-after[data-look="soft"] .ft-room > * { flex-basis: 86%; aspect-ratio: 4 / 5; }

  /* classes: larger class photos, the start-here row as a plain list */
  .ft-after[data-look="soft"] .ft-type { flex-basis: 70%; gap: 10px; }
  .ft-after[data-look="soft"] .ft-type h3 { font-size: 21px; }
  .ft-after[data-look="soft"] .ft-type p { font-size: 16px; }
  .ft-after[data-look="soft"] .ft-start { grid-template-columns: 1fr; gap: 16px; }
  .ft-after[data-look="soft"] .ft-start .ft-feat { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
  .ft-after[data-look="soft"] .ft-feat-photo { flex: none; width: 96px; height: 96px; aspect-ratio: auto; }
  .ft-after[data-look="soft"] .ft-start-line { font-size: 19px; }

  /* coaches, open house, quotes, map: larger photos */
  .ft-after[data-look="soft"] .ft-coach-photo, .ft-after[data-look="soft"] .ft-oh-photo, .ft-after[data-look="soft"] .ft-say-photo, .ft-after[data-look="soft"] .ft-visit-map { aspect-ratio: 4 / 3; }

  /* coaches: a plain list, no boxes */
  .ft-after[data-look="soft"] .ft-coaches { display: grid; gap: 0; margin: 24px 0 0; padding: 0; overflow: visible; }
  .ft-after[data-look="soft"] .ft-coach { padding: 20px 0; background: transparent; border-top: 1px solid rgba(var(--ft-ink-rgb),.16); border-radius: 0; }
  .ft-after[data-look="soft"] .ft-coach-body p { font-size: 16px; }

  /* open house */
  .ft-after[data-look="soft"] .ft-oh-panel { margin-top: -56px; }
  .ft-after[data-look="soft"] .ft-slot { font-size: 16px; }

  /* questions: a plain list, no boxes */
  .ft-after[data-look="soft"] .ft-faqs { gap: 0; border-bottom: 1px solid rgba(var(--ft-ink-rgb),.16); }
  .ft-after[data-look="soft"] .ft-faq { background: transparent; border-top: 1px solid rgba(var(--ft-ink-rgb),.16); border-radius: 0; }
  .ft-after[data-look="soft"] .ft-faq summary { min-height: 64px; padding: 16px 0; font-size: 19px; }
  .ft-after[data-look="soft"] .ft-faq p { padding: 0 0 20px; font-size: 17px; }

  /* getting in: larger step photos */
  .ft-after[data-look="soft"] .ft-step { flex-basis: 86%; }
}

/* ========== NEW: swipe cue (phone only). Under each swipe row: a hairline whose terracotta mark follows the scroll, a count and an arrow.
   Each row also slides a little and settles back, once, when it first comes into view.
   To undo: delete this block, the .ft-swipe lines in the markup, and startSwipe / swipeSync in the script ========== */
.ft-swipe { display: none; }
@container ft (max-width: 719.98px) {
  .ft-root .ft-swipe { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
  .ft-swipe-track { position: relative; flex: 1; height: 1px; background: rgba(var(--ft-ink-rgb),.22); }
  .ft-swipe-thumb { position: absolute; top: -1px; left: 0; width: 30%; height: 3px; background: var(--ft-accent); border-radius: 2px; }
  .ft-swipe-count { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--ft-grey); }
  .ft-swipe-count b { font-weight: 600; color: var(--ft-ink); }
  .ft-swipe-arrow { width: 22px; height: 22px; color: var(--ft-accent); transition: opacity .3s ease; }
  .ft-swipe.is-end .ft-swipe-arrow { opacity: .3; }
  /* the second draft lists the coaches, so there is nothing to swipe */
  .ft-after[data-look="soft"] .ft-coaches + .ft-swipe { display: none; }
  .ft-root .is-nudge > * { animation: ft-nudge 1.1s cubic-bezier(.5,0,.2,1) .5s 1; }
}
@keyframes ft-nudge { 0%, 100% { translate: 0 0; } 42% { translate: -48px 0; } }
@media (prefers-reduced-motion: reduce) {
  .ft-root .is-nudge > * { animation: none; }
}

/* ========== V2 (phone only): the review of the second draft, everything except type sizes ==========
   Switched on by the "version" prop (v2 or v3). It sets data-v2="on" on .ft-after and always runs on top of the second draft (data-look="soft").
   1 hero · 3 bottom bar and the Account view · 4 home cards · 5 pricing · 6 footer. Item 2 (one photographic treatment) is a note for the shoot, in HANDOFF.md.
   Markup that only v2 shows carries one of three classes: ft-v2 (the plans, the guide to choosing, the short footer), ft-acct (the Account view) or ft-bar-acct (its bar item).
   In the plans, $44 for four classes comes from the review; everything in square brackets is still to confirm.
   With the prop unset nothing here applies. Delete this block and that markup to drop it. */
.ft-v2, .ft-acct, .ft-bar-acct { display: none; }
@container ft (max-width: 719.98px) {
  .ft-after[data-v2="on"] .ft-v2 { display: block; }

  /* 1. hero: the statement sits on the photograph, after the Calmio reference. One flat warm-brown wash keeps it readable (no gradient);
     lighten --ft-wash once the real photo is in. The photo wants its subject top right and a calm wall bottom left, where the words sit */
  .ft-after[data-v2="on"] .ft-hero { --ft-wash: .62; padding-bottom: 0; }
  .ft-after[data-v2="on"] .ft-hero-photo { --e: 44px; height: 580px; }
  .ft-after[data-v2="on"] .ft-hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(var(--ft-shadow-rgb), var(--ft-wash)); }
  .ft-after[data-v2="on"] .ft-hero-card .ft-btn-solid { background: var(--ft-paper); color: var(--ft-ink); }
  /* bar option, Home view: the header sits clear over the photo, wordmark set as text in the on-photo colours, until the hero has scrolled away (the script then adds .is-solid) */
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-hero { margin-top: -57px; }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-hero-photo { height: 640px; padding-top: 60px; }
  .ft-after[data-v2="on"] .ft-head, .ft-after[data-v2="on"] .ft-head .ft-wm, .ft-after[data-v2="on"] .ft-head .ft-wm i { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-root:not(.is-solid) .ft-head { background: transparent; border-bottom-color: transparent; }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-root:not(.is-solid) .ft-head .ft-wm { font-weight: 300; color: var(--ft-paper); }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-root:not(.is-solid) .ft-head .ft-wm i { color: var(--ft-soft); }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-root:not(.is-solid) .ft-head .ft-btn-solid { background: transparent; border-color: rgba(var(--ft-paper-rgb),.75); color: var(--ft-paper); }
  .ft-after[data-v2="on"] .ft-hero-photo .ft-ph-cap { position: relative; z-index: 1; color: var(--ft-paper); }
  .ft-after[data-v2="on"] .ft-hero-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 0 20px 40px; color: var(--ft-paper); filter: none; }
  .ft-after[data-v2="on"] .ft-hero-card::before, .ft-after[data-v2="on"] .ft-hero-card::after { display: none; }
  .ft-after[data-v2="on"] .ft-hero-card h1 em { color: var(--ft-sun); box-shadow: none; }
  .ft-after[data-v2="on"] .ft-hero-card p { color: var(--ft-paper) !important; }
  .ft-after[data-v2="on"] .ft-hero-card .ft-link, .ft-after[data-v2="on"] .ft-hero-card .ft-link:hover { color: var(--ft-paper); text-decoration-color: var(--ft-sun); }
  .ft-after[data-v2="on"] .ft-hero-card .ft-btn-solid:hover { background: var(--ft-sun); color: var(--ft-ink); }

  /* 3. bottom bar: five destinations with larger icons and labels. The idea and Coaches are reached from the Home cards and from "More" in the footer */
  .ft-after[data-v2="on"] .ft-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .ft-after[data-v2="on"] .ft-bar-item { gap: 4px; min-height: 56px; font-size: 12px; }
  .ft-after[data-v2="on"] .ft-bar-ico { width: 56px; height: 32px; }
  .ft-after[data-v2="on"] .ft-bar-ico .ft-ico { width: 24px; height: 24px; }
  .ft-after[data-v2="on"] .ft-bar-old { display: none; }
  .ft-after[data-v2="on"] .ft-bar-acct { display: flex; }
  /* the Account view: a holding page until the booking system exists */
  .ft-after[data-nav="bar"][data-view="account"] [data-pg]:not([data-pg~="account"]) { display: none; }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="account"] .ft-acct { display: block; }
  .ft-root .ft-acct-hold { margin: 28px 0; padding: 20px 22px; background: rgba(var(--ft-accent-rgb),.13); border-radius: 14px; }

  /* 4. home cards: one featured card (Classes), two small ones (The idea, Coaches), two compact rows (Pricing, Visit). The order is visual only; the markup order is unchanged */
  .ft-after[data-v2="on"] .ft-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ft-after[data-v2="on"] .ft-card { overflow: hidden; }
  .ft-after[data-v2="on"] .ft-card[href="#classes"] { order: 1; grid-column: 1 / -1; }
  .ft-after[data-v2="on"] .ft-card[href="#idea"] { order: 2; }
  .ft-after[data-v2="on"] .ft-card[href="#coaches"] { order: 3; }
  .ft-after[data-v2="on"] .ft-card[href="#pricing"] { order: 4; }
  .ft-after[data-v2="on"] .ft-card[href="#visit"] { order: 5; }
  .ft-after[data-v2="on"] .ft-card[href="#classes"] .ft-card-photo { height: 250px; }
  .ft-after[data-v2="on"] .ft-card[href="#idea"] .ft-card-photo, .ft-after[data-v2="on"] .ft-card[href="#coaches"] .ft-card-photo { height: 168px; }
  .ft-after[data-v2="on"] .ft-card[href="#idea"] .ft-card-strip, .ft-after[data-v2="on"] .ft-card[href="#coaches"] .ft-card-strip { left: 8px; right: 8px; bottom: 8px; gap: 8px; min-height: 46px; padding: 0 12px 0 16px; }
  .ft-after[data-v2="on"] .ft-card[href="#idea"] .ft-card-title, .ft-after[data-v2="on"] .ft-card[href="#coaches"] .ft-card-title { font-size: 20px; }
  .ft-after[data-v2="on"] .ft-card[href="#pricing"], .ft-after[data-v2="on"] .ft-card[href="#visit"] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; min-height: 84px; padding: 10px 18px 10px 10px; background: var(--ft-paper); }
  .ft-after[data-v2="on"] .ft-card[href="#pricing"] .ft-card-photo, .ft-after[data-v2="on"] .ft-card[href="#visit"] .ft-card-photo { flex: none; width: 96px; height: 64px; border-radius: 12px; }
  .ft-after[data-v2="on"] .ft-card[href="#pricing"] .ft-ph-cap, .ft-after[data-v2="on"] .ft-card[href="#visit"] .ft-ph-cap { display: none; }
  .ft-after[data-v2="on"] .ft-card[href="#pricing"] .ft-card-strip, .ft-after[data-v2="on"] .ft-card[href="#visit"] .ft-card-strip { position: static; flex: 1; min-height: 0; padding: 0; background: none; border-radius: 0; }

  /* 5. pricing: grouped by kind of commitment. Paying for one class is a slim row; a membership is a full card with the same two lines in each, so they can be compared; a short guide to choosing sits below */
  .ft-after[data-v2="on"] #pricing .ft-two { display: none; }
  .ft-after[data-v2="on"] .ft-plans { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; }
  .ft-root .ft-plan-kind { align-self: flex-start; background: var(--ft-paper); border-color: var(--ft-paper); color: var(--ft-ink); }
  .ft-root .ft-plan-kind ~ .ft-plan-kind { margin-top: 20px; }
  .ft-root .ft-plan { display: flex; flex-direction: column; background: var(--ft-paper); border-radius: 20px; color: var(--ft-ink); overflow: hidden; }
  .ft-root .ft-plan h3 { font-size: 24px; }
  .ft-root .ft-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--ft-grey); }
  .ft-root .ft-plan-price b, .ft-root .ft-plan-price .ft-todo { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 500; line-height: 1.15; color: var(--ft-ink); }
  .ft-root .ft-plan-once { gap: 4px; padding: 20px 22px 10px; }
  .ft-root .ft-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .ft-root .ft-plan-top p { margin-top: 4px; color: var(--ft-grey); }
  .ft-root .ft-plan-once .ft-plan-price { flex: none; flex-direction: column; align-items: flex-end; gap: 0; margin-top: 0; }
  .ft-root .ft-plan-once .ft-plan-price .ft-todo { font-size: 24px; }
  .ft-root .ft-plan-once .ft-link { align-self: flex-start; }
  .ft-root .ft-plan-head { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; background: var(--ft-sun-pale); }
  .ft-root .ft-plan-note { font-weight: 600; }
  .ft-root .ft-plan-spec { margin: 0; padding: 4px 22px 0; }
  .ft-root .ft-plan-spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(var(--ft-ink-rgb),.14); }
  .ft-root .ft-plan-spec dt { flex: none; color: var(--ft-grey); }
  .ft-root .ft-plan-spec dd { margin: 0; font-weight: 600; text-align: right; }
  .ft-root .ft-plan-member .ft-btn { align-self: flex-start; margin: 20px 22px 24px; }
  .ft-after[data-v2="on"] .ft-fit { margin-top: 28px; padding: 24px 22px 8px; background: var(--ft-paper); border-radius: 20px; color: var(--ft-ink); }
  .ft-root .ft-fit h3 { font-size: 24px; }
  .ft-root .ft-fit ul { margin-top: 14px; }
  .ft-root .ft-fit li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(var(--ft-ink-rgb),.14); }
  .ft-root .ft-fit li > span { color: var(--ft-grey); }
  .ft-root .ft-fit li > b { flex: none; max-width: 50%; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-weight: 600; text-align: right; }

  /* 6. footer: the message, the action, the email and Instagram stay in view; the section links and the other channels fold under "More" */
  .ft-after[data-v2="on"] .ft-root .ft-foot { padding: 40px 20px 22px; }
  .ft-after[data-v2="on"] .ft-foot-grid { display: none; }
  .ft-after[data-v2="on"] .ft-foot-lite { margin-top: 28px; padding-top: 10px; border-top: 1px solid rgba(var(--ft-paper-rgb),.18); }
  .ft-root .ft-more { margin-top: 6px; border-top: 1px solid rgba(var(--ft-paper-rgb),.18); border-bottom: 1px solid rgba(var(--ft-paper-rgb),.18); }
  .ft-root .ft-more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; list-style: none; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; }
  .ft-root .ft-more summary::-webkit-details-marker { display: none; }
  .ft-root .ft-more summary .ft-ico { width: 20px; height: 20px; color: var(--ft-soft); transition: transform .4s ease; }
  .ft-root .ft-more[open] summary .ft-ico { transform: rotate(45deg); }
  .ft-root .ft-more .ft-foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 0; }
  .ft-root .ft-more ul { padding-bottom: 10px; }
  .ft-after[data-v2="on"] .ft-root .ft-foot-legal { margin-top: 16px !important; }
}

/* ========== V3 (phone only): v2 plus the type scale from the review. data-v3="on" (the "version" prop set to v3) ==========
   Main heading 38 · section headings 30 · sub-headings 24 · item titles 20 · body 16 · supporting 13 to 14 · buttons 15 to 16 · tap targets 44 or more.
   Spacing opens up where small elements sat close together. Delete this block to drop it; v2 is unaffected. */
@container ft (max-width: 719.98px) {
  /* the scale. Body text is already 16px in every version */
  .ft-after[data-v3="on"] .ft-root h1 { font-size: 38px !important; line-height: 1.06; }
  .ft-after[data-v3="on"] .ft-root h2 { font-size: 30px !important; line-height: 1.1; }
  .ft-after[data-v3="on"] .ft-root h3 { font-size: 24px !important; line-height: 1.15; }
  .ft-after[data-v3="on"] .ft-root .ft-sec-top h3, .ft-after[data-v3="on"] .ft-root .ft-type h3, .ft-after[data-v3="on"] .ft-root .ft-coach-body h3 { font-size: 20px !important; }
  .ft-after[data-v3="on"] .ft-root .ft-foot .ft-wrap > p:first-child { font-size: 24px !important; }
  .ft-after[data-v3="on"] .ft-root .ft-start-line, .ft-after[data-v3="on"] .ft-root .ft-way .ft-door, .ft-after[data-v3="on"] .ft-root .ft-faq summary { font-size: 18px; }
  .ft-after[data-v3="on"] .ft-root .ft-faq p, .ft-after[data-v3="on"] .ft-root .ft-type p, .ft-after[data-v3="on"] .ft-root .ft-coach-body p, .ft-after[data-v3="on"] .ft-root .ft-slot { font-size: 16px; }
  .ft-after[data-v3="on"] .ft-root .ft-plan-price b, .ft-after[data-v3="on"] .ft-root .ft-plan-member .ft-plan-price .ft-todo { font-size: 36px; }
  .ft-after[data-v3="on"] .ft-root .ft-bar-item { font-size: 13px; }
  .ft-after[data-v3="on"] .ft-root .ft-next-label { font-size: 14px; }

  /* tap targets */
  .ft-after[data-v3="on"] .ft-head .ft-wm { display: inline-flex; align-items: center; min-height: 44px; }
  .ft-after[data-v3="on"] .ft-say-dot { width: 36px; }
  .ft-after[data-v3="on"] .ft-root .ft-chan { min-height: 48px; }

  /* spacing: more air between sections, and inside the blocks that packed small elements together */
  .ft-after[data-v3="on"] .ft-root .ft-sec { padding-top: 72px; padding-bottom: 72px; }
  .ft-after[data-v3="on"] .ft-root .ft-sec-top { padding-top: 56px; }
  .ft-after[data-v3="on"][data-nav="bar"] #coaches, .ft-after[data-v3="on"][data-nav="bar"] #visit, .ft-after[data-v3="on"][data-nav="bar"][data-view="home"] #class-size { padding-top: 72px !important; }
  .ft-after[data-v3="on"] .ft-root .ft-cards { padding-top: 72px; }
  .ft-after[data-v3="on"] .ft-sec-top .ft-three { gap: 48px; }
  .ft-after[data-v3="on"] .ft-root #classes .ft-two { gap: 16px; margin-top: 36px; }
  .ft-after[data-v3="on"] .ft-root .ft-types-block { margin-top: 56px; }
  .ft-after[data-v3="on"] .ft-root .ft-types { margin-top: 24px; }
  .ft-after[data-v3="on"] .ft-root .ft-suggest { margin-top: 28px; gap: 20px; padding: 26px 22px 28px; }
  .ft-after[data-v3="on"] .ft-root .ft-start { gap: 22px; }
  .ft-after[data-v3="on"] .ft-root .ft-list { gap: 16px; }
  .ft-after[data-v3="on"] .ft-root .ft-privacy { gap: 26px; margin-top: 20px; padding: 30px 24px; }
  .ft-after[data-v3="on"] .ft-root .ft-oh { margin-top: 56px; }
  .ft-after[data-v3="on"] .ft-root .ft-oh-panel .ft-slots { gap: 12px; margin-top: 26px; }
  .ft-after[data-v3="on"] .ft-root .ft-way { margin-top: 64px; }
  .ft-after[data-v3="on"] .ft-root .ft-plans { gap: 16px; margin-top: 36px; }
  .ft-after[data-v3="on"] .ft-root .ft-fit { margin-top: 32px; }
}

/* ========== Site additions (not in the canvas) ========== */
.ft-root { interpolate-size: allow-keywords; }
.ft-ph-cap { position: relative; }
/* a slot can hold a second photo for tablet and desktop, where the one long page would otherwise repeat a picture */
.ft-ph-img.ft-wide-only { display: none; }
@container ft (min-width: 720px) { .ft-ph-img.ft-narrow-only { display: none; } .ft-ph-img.ft-wide-only { display: block; } }
/* the "getting to FITRA" video: vertical, phone sized, centred above the four steps */
.ft-map-credit { position: absolute; right: 10px; bottom: 6px; z-index: 1; padding: 1px 6px; border-radius: 8px; background: rgba(27,42,51,.6); font-size: 10px; line-height: 1.4; color: #F6F1E7; }
.ft-map-credit a { color: inherit; text-decoration: none; }
/* five Getting in steps: 4:3 photos at every width, five across on desktop */
.ft-root .ft-step-photo { aspect-ratio: 4 / 3; }
@container ft (min-width: 1080px) { .ft-root .ft-route { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
/* before opening: the line that stands where a booking button will be */
.ft-root .ft-soon { align-self: flex-start; margin-top: auto; padding: 9px 14px; background: rgba(var(--ft-accent-rgb),.13); border-radius: 10px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ft-ink); }
.ft-root .ft-plan-member .ft-soon { margin: 20px 22px 24px; }
.ft-root .ft-plan-once .ft-soon { margin: 10px 0 12px; }
.ft-way-video { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 9 / 16; margin: 28px auto 0; border-radius: 20px; background: #1B2A33; object-fit: cover; }
.ft-head { border-bottom-color: transparent; transition: border-color .5s ease, box-shadow .5s ease; }
.ft-head.is-scrolled { border-bottom-color: rgba(27,42,51,.12); box-shadow: 0 10px 30px -22px rgba(27,42,51,.55); }
.ft-on-terra.ft-head-block p { color: inherit; }
.ft-terms .ft-paper-chip { display: block; }
/* the canvas zeroes list and paragraph margins with a stronger selector, so these need the root in front */
.ft-root .ft-say-figs { margin-top: 36px; }
.ft-root .ft-terms { margin-top: 28px; }
@container ft (min-width: 1080px) {
  .ft-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* class size: on phones and tablets the picture sits directly under the "Class size" pill (owner, 2026-10-07).
   The text block dissolves into the grid so the picture can be ordered between the pill and the heading. */
.ft-nine-art-b { display: none; }
.ft-root .ft-nine-art { aspect-ratio: 3 / 2; }  /* the new drawings are 3:2; never crop them */
@container ft (max-width: 1079.98px) {
  .ft-root .ft-nine { gap: 0; }
  .ft-root .ft-nine-text { display: contents; }
  .ft-root .ft-nine-text > .ft-pill { order: -2; justify-self: start; }
  .ft-root .ft-nine-art { order: -1; margin-top: 18px; }
  .ft-root .ft-nine-text > h2 { margin-top: 24px !important; }
}
/* phones: the Classes view shows the second picture, every other view the first */
@container ft (max-width: 719.98px) {
  .ft-after[data-nav="bar"][data-view="classes"] .ft-nine-art-b { display: block; }
}

/* v3 on phones */
@container ft (max-width: 719.98px) {
  /* the hero never grows taller than the screen allows, so the button stays above the fold on short phones */
  .ft-after[data-v2="on"] .ft-hero-photo { height: min(580px, max(430px, calc(100svh - 200px))); }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-hero-photo { height: min(640px, max(470px, calc(100svh - 150px))); }
  /* while the header is clear over the hero photo it carries no shadow and no progress line */
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-root:not(.is-solid) .ft-head.is-scrolled { box-shadow: none; }
  .ft-after[data-v2="on"][data-nav="bar"][data-view="home"] .ft-root:not(.is-solid) .ft-progress { opacity: 0; }
  .ft-progress { transition: opacity .35s ease; }
  .ft-after[data-v2="on"] .ft-hero-card h1 em { box-shadow: none; }
  /* the Account view, and the short footer's address */
  .ft-root .ft-acct-hold p { color: var(--ft-ink); }
  .ft-root .ft-foot-lite .ft-foot-addr { margin-top: 14px; }
  .ft-root .ft-read .ft-foot-nav a { min-height: 44px; }
  /* pricing: the terms sit under the guide */
  .ft-root .ft-plan-once .ft-plan-price b { font-size: 28px; }
}

/* kept from the last version at the owner's request: the three promise icons, and the object renders,
   which now sit inside the canvas's photo slots */
.ft-feat-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: #F6F1E7; color: #B4582F; }
.ft-ph-art { position: absolute; inset: 0; width: 100%; height: 100%; padding: 7%; object-fit: contain; }
.ft-tile-photo .ft-ph-art { padding: 3%; }

/* carried over from the fifth pass */
.ft-root :focus-visible { outline: 2px solid #B4582F; outline-offset: 3px; }
.ft-root .ft-on-ink :focus-visible { outline-color: #F6F1E7; }
.ft-display { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; }
.ft-skip { position: absolute; left: 12px; top: -80px; z-index: 30; padding: 12px 18px; background: #1B2A33; color: #F6F1E7; border-radius: 999px; }
.ft-skip:focus { top: 12px; color: #F6F1E7; }
.ft-head-block { max-width: 760px; }
.ft-head-block h2 { margin-top: 18px; font-size: clamp(30px, 4cqi, 56px); }
.ft-head-block p { margin-top: 16px; font-size: clamp(17px, 1.4cqi, 19px); color: #55504A; }
.ft-on-ink.ft-head-block p { color: rgba(246,241,231,.86); }
.ft-pill-accent { border-color: transparent; background: rgba(192,102,58,.16); }
.ft-ph-img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.ft-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; }
.ft-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: #C0663A; transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.22,.61,.21,1); }
.ft-nav a:hover::after, .ft-nav a[aria-current="true"]::after { transform: scaleX(1); }
.ft-nav a[aria-current="true"] { color: #1B2A33; }
.ft-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #C0663A; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.ft-feat h3 { font-size: 21px; }
.ft-feat h3 + p { margin-top: 6px; color: #55504A; }
.ft-name-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: -22px auto; }
.ft-name-rule { height: 1px; background: rgba(27,42,51,.14); }
.ft-idea-text { display: flex; flex-direction: column; gap: 22px; }
.ft-idea-lede { font-size: clamp(18px, 1.5cqi, 21px); line-height: 1.6; }
.ft-read { background: rgba(192,102,58,.13); }
.ft-read summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 22px; cursor: pointer; list-style: none; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; }
.ft-read summary::-webkit-details-marker { display: none; }
.ft-read summary .ft-ico { color: #B4582F; transition: transform .5s cubic-bezier(.22,.61,.21,1); }
.ft-read[open] summary .ft-ico { transform: rotate(45deg); }
.ft-read p { max-width: 62ch; padding: 0 22px 18px; color: #3F4A50; }
.ft-split-panel p { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: clamp(26px, 3cqi, 42px); line-height: 1.18; }
.ft-privacy h3 { font-size: 24px; }
.ft-privacy h3 + p { margin-top: 8px; color: #55504A; }
.ft-li strong { font-weight: 600; }
.ft-tile-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.ft-tile h3 { font-size: 24px; }
.ft-tile h3 + p { margin-top: 4px; color: #55504A; }
.ft-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ft-price-num { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: clamp(40px, 4.2cqi, 54px); font-weight: 300; line-height: 1.1; }
.ft-price-per { color: #55504A; }
.ft-tile .ft-btn { align-self: flex-start; margin-top: auto; }
.ft-terms { max-width: 70ch; margin-top: 28px; font-size: 15px; color: rgba(246,241,231,.86); }
.ft-faq summary .ft-ico { color: #B4582F; transition: transform .5s cubic-bezier(.22,.61,.21,1); }
.ft-foot-say { max-width: 24ch; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: clamp(26px, 3.2cqi, 46px); line-height: 1.15; }
.ft-foot-nav a, .ft-foot-more a { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; }
.ft-foot-addr { margin-top: 14px; font-style: normal; font-size: 15px; line-height: 1.6; color: rgba(246,241,231,.8); }
.ft-foot-label { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246,241,231,.7); }
.ft-chans, .ft-foot-more { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ft-copy { margin-top: 40px; font-size: 14px; color: rgba(246,241,231,.8); }

/* survey figures, shown in "What women told us" until there are members to quote */
.ft-say-figs { display: grid; grid-template-columns: 1fr; gap: 28px; width: 100%; max-width: 860px; margin-top: 36px; }
.ft-say-figs li { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 30ch; margin: 0 auto; color: #55504A; }
.ft-say-num { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-size: clamp(72px, 9cqi, 124px); font-style: italic; font-weight: 300; line-height: .9; letter-spacing: -0.03em; color: #C0663A; }
.ft-say > .ft-link { margin-top: 24px; }
@container ft (min-width: 720px) {
  .ft-say-figs { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
}

/* a real photo inside a route step keeps the step's small radius */
.ft-step-photo { overflow: hidden; }

/* the suggest box is a real form */
.ft-suggest-form { margin: 0; }
.ft-suggest-note { flex-basis: 100%; font-size: 14px; color: var(--ft-grey); }

/* ==========================================================
   Motion. Slow, eased, once. Nothing here runs without JavaScript,
   and none of it runs when the visitor asks for reduced motion.
   site.js adds .is-in when a block scrolls into view.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* blocks: fade up, or in from a side */
  .js .ft-reveal { opacity: 0; transform: translateY(26px); }
  .js .ft-reveal.ft-from-left { transform: translateX(-32px); }
  .js .ft-reveal.ft-from-right { transform: translateX(32px); }
  .js .ft-reveal.ft-zoom { transform: scale(1.035); }
  .js .ft-reveal.is-in { opacity: 1; transform: none; transition: opacity 1.2s cubic-bezier(.22,.61,.21,1) var(--d, 0s), transform 1.2s cubic-bezier(.22,.61,.21,1) var(--d, 0s); }

  /* photos: the frame opens from its left edge and the clipped corners arrive with it */
  .js .ft-wipe.ft-cut { clip-path: polygon(0 0, 0 0, 0 calc(100% - var(--c)), 0 100%, 0 100%, 0 var(--c)); }
  .js .ft-wipe.ft-cut-alt { clip-path: polygon(0 0, 0 0, 0 var(--c), 0 100%, 0 100%, 0 calc(100% - var(--c))); }
  .js .ft-wipe.ft-cut.is-in { clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: clip-path 1.5s cubic-bezier(.6,.04,.2,1) var(--d, 0s); }
  .js .ft-wipe.ft-cut-alt.is-in { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); transition: clip-path 1.5s cubic-bezier(.6,.04,.2,1) var(--d, 0s); }
  /* phones, soft look: photo frames are rounded, so they open as a rounded box, not a clipped one */
  @container ft (max-width: 719.98px) {
    .js .ft-after[data-look="soft"] .ft-wipe.ft-cut, .js .ft-after[data-look="soft"] .ft-wipe.ft-cut-alt { clip-path: inset(0 100% 0 0 round 20px); }
    .js .ft-after[data-look="soft"] .ft-wipe.ft-cut.is-in, .js .ft-after[data-look="soft"] .ft-wipe.ft-cut-alt.is-in { clip-path: inset(0 0 0 0 round 20px); }
  }
  .js .ft-wipe .ft-ph-cap { opacity: 0; transform: translateY(10px); }
  .js .ft-wipe.is-in .ft-ph-cap { opacity: 1; transform: none; transition: opacity .9s ease calc(var(--d, 0s) + .7s), transform .9s cubic-bezier(.22,.61,.21,1) calc(var(--d, 0s) + .7s); }

  /* headings: each word rises out of its own line */
  .js .ft-rise { opacity: 0; }
  .js .ft-rise.is-ready { opacity: 1; }
  .ft-w { display: inline-block; clip-path: inset(-0.16em -0.3em -0.2em -0.3em); vertical-align: top; }
  .ft-wi { display: inline-block; transform: translateY(135%); }
  .ft-rise.is-in .ft-wi { transform: none; transition: transform 1.15s cubic-bezier(.19,.82,.2,1) calc(var(--i, 0) * 60ms + var(--d, 0s)); }

  /* lists and rows: children follow one another */
  .js .ft-seq > * { opacity: 0; transform: translateY(18px); }
  .js .ft-seq.is-in > * { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.22,.61,.21,1) calc(var(--n, 0) * 90ms), transform 1s cubic-bezier(.22,.61,.21,1) calc(var(--n, 0) * 90ms); }

  /* delays, read by every transition above */
  .ft-d1 { --d: .14s; }
  .ft-d2 { --d: .28s; }
  .ft-d3 { --d: .42s; }

  /* scroll-linked drift is written by site.js into the `translate` property, so it never fights the reveal transform */
  [data-drift], .ft-ph-img { will-change: translate; }

  /* answers open and close smoothly where the browser can do it */
  .ft-faq::details-content, .ft-read::details-content { height: 0; overflow: clip; transition: height .55s cubic-bezier(.22,.61,.21,1), content-visibility .55s allow-discrete; }
  .ft-faq[open]::details-content, .ft-read[open]::details-content { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ft-progress { display: none; }
  .ft-head, .ft-head-in { transition: none; }
}


/* ---------- Why FITRA (owner, 2026-10-12): four slogans, class size, group classes. Written by why_fitra.py ---------- */
.ft-why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 36px; }
.ft-why-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; }
.ft-why-obj { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--ft-sun-pale); }
.ft-why-obj img { display: block; width: 86%; height: auto; filter: drop-shadow(0 8px 10px rgba(var(--ft-shadow-rgb), .22)); }
.ft-why-text { display: flex; flex-direction: column; gap: 6px; }
.ft-root .ft-why-text h3 { font-size: 22px; line-height: 1.08; }
.ft-why-text p { color: var(--ft-grey); font-size: 15px; line-height: 1.6; }
.ft-root .ft-why .ft-why-nine { margin-top: 80px; }
.ft-why-num { color: var(--ft-accent); }
.ft-why-price { position: relative; margin-top: 88px; padding: 40px 24px 36px; background: var(--ft-paper); }
.ft-why-ticket { position: absolute; right: 10px; top: -46px; z-index: 2; width: 128px; height: auto; transform: rotate(-8deg); }
.ft-why-price-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ft-root .ft-why-price-text h2 { font-size: clamp(30px, 4cqi, 50px); }
.ft-why-price-text p { color: var(--ft-grey); font-size: 17px; }
.ft-root .ft-why-rates { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 28px; border-top: 1px solid rgba(var(--ft-ink-rgb), .16); }
.ft-why-rate { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(var(--ft-ink-rgb), .16); }
.ft-why-rate-n { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 46px; line-height: 1; letter-spacing: -0.02em; }
.ft-why-rate-n small { font-size: .5em; font-weight: 400; vertical-align: .7em; margin-right: 1px; }
.ft-why-rate-early .ft-why-rate-n { color: var(--ft-deep); }
.ft-why-rate-l { display: flex; flex-direction: column; gap: 2px; }
.ft-why-rate-l b { font-family: 'Bai Jamjuree', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.3; }
.ft-why-rate-l span { color: var(--ft-grey); font-size: 15px; line-height: 1.5; }
.ft-why-price-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.ft-why-price-foot p { flex-basis: 100%; color: var(--ft-grey); font-size: 15px; }
@container ft (min-width: 720px) {
  .ft-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 48px; }
  .ft-root .ft-why .ft-why-nine { margin-top: 104px; }
  .ft-why-price { margin-top: 112px; padding: 52px 48px 48px; }
  .ft-why-ticket { right: 40px; top: -60px; width: 160px; }
  .ft-why-price-text p { max-width: 560px; }
  .ft-root .ft-why-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 0; }
  .ft-why-rate { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0 0; border-bottom: 0; border-top: 1px solid rgba(var(--ft-ink-rgb), .16); }
  .ft-why-rate-n { font-size: 64px; }
  .ft-why-price-foot p { flex-basis: auto; }
}
@container ft (min-width: 1080px) {
  .ft-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
  .ft-why-item { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ft-why-obj img { width: 70%; }
  .ft-root .ft-why-text h3 { font-size: 25px; }
  .ft-why-text p { font-size: 16px; }
  .ft-root .ft-why .ft-why-nine { margin-top: 136px; }
  .ft-why-price { margin-top: 140px; padding: 64px 64px 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 64px; align-items: end; }
  .ft-why-ticket { right: 64px; top: -78px; width: 190px; }
  .ft-root .ft-why-rates { margin-top: 0; }
  .ft-why-rate-n { font-size: 76px; }
  .ft-why-price-foot { grid-column: 1 / -1; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(var(--ft-ink-rgb), .16); }
}