/* ============================================================
   JAWIFIT HOMEPAGE SYSTEM — one source of truth.
   Sections compose these primitives; no section defines its own
   type scale, radius, shadow, surface or action style.
   ============================================================
   Ported from the Claude Design file "JawiFit Home (production)"
   (source/), unchanged except: the theme sits on <html> so it can be
   set before first paint, and the sans stack comes from base.css. */
body { margin: 0; background: #050505; }

:root {
  /* -- colour (semantic, monochrome) -- */
  --canvas: #050505;
  --surface-1: #0D0D0D;
  --surface-2: #141414;
  --text-primary: #F7F7F4;
  --text-secondary: #B7B7B1;
  --text-muted: #7D7D78;
  --border-subtle: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --surface-light: #F2F2EE;
  --text-on-light: #171715;
  --secondary-on-light: #5C5C56;
  --border-on-light: rgba(23,23,21,0.16);

  /* -- spacing scale: 4 8 12 16 24 32 48 64 96 128 -- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

  /* -- container -- */
  --container: 1260px;
  --gutter: 80px;

  /* -- radius -- */
  --radius-sm: 10px; --radius-control: 12px; --radius-medium: 16px;
  --radius-card: 20px; --radius-section: 28px; --radius-full: 999px;

  /* -- elevation -- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.18);
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.24);
  --shadow-md: 0 16px 40px rgba(0,0,0,0.38);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.48);

  /* -- on-image tokens: the hero art is dark in BOTH themes, so copy over it
        keeps a light ramp regardless of the resolved page theme -- */
  --on-image-primary: #F7F7F4;
  --on-image-secondary: rgba(247,247,244,0.88);
  --on-image-muted: rgba(247,247,244,0.72);
  --on-image-border: rgba(247,247,244,0.58);

  --serif: 'Instrument Serif', serif;
  --sans: var(--font-sans);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;

  /* -- floating navigation: one inset token drives the initial and scrolled
        states, the sticky-rail offset and the hero's content start -- */
  --nav-h: 58px;
  --nav-inset-top: var(--s6);
  --nav-offset: calc(var(--nav-inset-top) + var(--nav-h) + var(--s6));

  color: var(--text-primary);
  font-family: var(--sans);
  color-scheme: dark;
}

[data-jawifit-theme="light"] {
  --canvas: #F7F5F0;
  --surface-1: #F2EFE8;
  --surface-2: #EAE6DD;
  --text-primary: #0B0B08;
  --text-secondary: #3A382F;
  --text-muted: #605C53;
  --border-subtle: rgba(11,11,8,0.12);
  --border-strong: rgba(11,11,8,0.28);
  --surface-light: #16150F;
  --text-on-light: #F7F5F0;
  --secondary-on-light: #C9C4BB;
  --border-on-light: rgba(247,245,240,0.22);
  color-scheme: light;
}

/* content sitting on hero photography: remap the semantic ramp, no per-element patches */
.on-image { --canvas: #050505; --text-primary: var(--on-image-primary); --text-secondary: var(--on-image-secondary); --text-muted: var(--on-image-muted); --border-strong: var(--on-image-border); --border-subtle: rgba(247,247,244,0.22); color: var(--on-image-primary); }
.hero { position: relative; isolation: isolate; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; }
/* hero content starts below the capsule: inset + nav height + one interval */
.hero-body { position: relative; z-index: 2; box-sizing: border-box; padding-top: calc(var(--nav-inset-top) + var(--nav-h) + var(--s8)); }

/* ---------------- container + section rhythm ---------------- */
.pgc { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding-block: var(--s32); }
.sec-c { padding-block: var(--s24); }
[data-rhythm="roomy"] .sec { padding-block: 144px; }
[data-rhythm="roomy"] .sec-c { padding-block: 112px; }
.rule-b { border-bottom: 1px solid var(--border-subtle); }
.sec-intro { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s12); }
[id] { scroll-margin-top: 108px; }

/* ---------------- typography ---------------- */
.t-display { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 80px; line-height: 0.98; letter-spacing: -0.025em; color: var(--text-primary); }
.t-section { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-primary); }
.t-feature { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; color: var(--text-primary); }
.t-card { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.16; letter-spacing: -0.01em; color: var(--text-primary); }
.b-lg { margin: 0; font-family: var(--sans); font-size: 19px; line-height: 1.5; color: var(--text-secondary); max-width: 46ch; text-wrap: pretty; }
.b { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--text-secondary); max-width: 44ch; text-wrap: pretty; }
.b-sm { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--text-muted); max-width: 52ch; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.lede { font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.num { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------------- links ---------------- */
a { color: var(--text-primary); text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

/* ---------------- actions ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-control); font-family: var(--sans); font-size: 15px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn-primary { background: var(--text-primary); color: var(--canvas) !important; border-color: var(--text-primary); box-shadow: var(--shadow-xs); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: transparent; color: var(--text-primary) !important; border-color: var(--text-primary); } }
.btn-primary:active { background: #CFCCC5 !important; border-color: #CFCCC5 !important; color: var(--canvas) !important; transform: none !important; }
.btn-secondary { background: transparent; color: var(--text-primary) !important; border-color: var(--border-strong); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn-secondary:hover { background: var(--text-primary); color: var(--canvas) !important; border-color: var(--text-primary); } }
.btn-secondary:active { background: #CFCCC5 !important; color: var(--canvas) !important; }
.btn-tertiary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; text-decoration: none !important; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn-tertiary:hover { border-bottom-color: var(--text-primary); text-decoration: none !important; } }
.btn-icon { width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); cursor: pointer; font-family: inherit; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn-icon:hover { background: var(--text-primary); color: var(--canvas); } }

/* actions on the contained light panel */
.on-light .btn-primary { background: var(--text-on-light); color: var(--surface-light) !important; border-color: var(--text-on-light); }
@media (hover: hover) and (pointer: fine) { .on-light .btn-primary:hover { background: transparent; color: var(--text-on-light) !important; border-color: var(--text-on-light); } }
.on-light .btn-tertiary { color: var(--text-on-light) !important; border-bottom-color: var(--border-on-light); }
@media (hover: hover) and (pointer: fine) { .on-light .btn-tertiary:hover { border-bottom-color: var(--text-on-light); } }
.on-light :where(a, button):focus-visible { outline-color: var(--text-on-light); }

/* ---------------- surfaces + media ---------------- */
.surface-card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); }
.surface-i { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .surface-i:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); } }
.surface-i[data-open="true"] { background: var(--surface-2); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.media { overflow: hidden; border-radius: var(--radius-card); background: var(--surface-2); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: var(--fx, 50%) var(--fy, 50%); }
/* one frame, two graded variants of the same photograph; the review version is a prop */
.media-stack { position: relative; }
.media-stack img { position: absolute; inset: 0; }
.media-stack .tone-a { display: none; }
[data-jf-tone="mixed"] .media-stack .tone-a { display: block; }
[data-jf-tone="mixed"] .media-stack .tone-b { display: none; }
/* coaching-system narratives share one taller frame so full subjects survive the crop */
.media-cs { width: 100%; aspect-ratio: 4 / 3; }
.chip { display: inline-flex; align-items: center; padding: 9px 13px; border-radius: var(--radius-full); background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; cursor: default; }

/* ---------------- status / unavailable ---------------- */
.badge-muted { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--radius-full); background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle); font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: default; white-space: nowrap; }
.notice-off { background: var(--canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); box-shadow: none; padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.notice-off p { color: var(--text-muted); }

/* ---------------- disclosure (services + FAQ share this) ---------------- */
.disc-row { width: 100%; min-height: 44px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--sans); color: var(--text-primary); }
.disc-glyph { width: 40px; height: 40px; min-width: 40px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 300; line-height: 1; color: var(--text-secondary); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  /* Disclosure triggers are buttons, not links: the hover signal is the glyph
     surface, never an underline (that stays reserved for tertiary text links). */
  .disc-row:hover .disc-glyph { background: var(--text-primary); color: var(--canvas); border-color: var(--text-primary); }
}
.disc-row:active .disc-glyph { background: #CFCCC5; color: var(--canvas); }
.disc-row[aria-expanded="true"] .disc-glyph { background: var(--text-primary); color: var(--canvas); border-color: var(--text-primary); }
.disc-panel { animation: discOpen 200ms var(--ease) both; }
/* Motion never holds a hidden from-state: the visible state is the resting
   state, so a frozen or never-started animation still paints correctly. */
@keyframes discOpen { from { transform: translateY(-4px); } to { transform: none; } }

/* answer region — always in flow, grows downward from its own question row.
   Only the grid track height and opacity animate; never the group. */
.disc-a { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.disc-a > .disc-a-clip { overflow: hidden; min-height: 0; }
/* resting geometry is pure state — never the end of a transition, so a closed
   answer is always 0-height and an open one always full-height */
.disc-a[data-open="true"] { grid-template-rows: 1fr; visibility: visible; }
.disc-a[data-open="true"] > .disc-a-clip { animation: discReveal 200ms var(--ease) both; }
@keyframes discReveal { from { transform: translateY(-6px); } to { transform: none; } }

/* ---------------- appearance preference (System / Light / Dark) ---------------- */
.appearance { display: flex; gap: var(--s2); flex-wrap: wrap; }
.appearance-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px; border-radius: var(--radius-full); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.appearance-opt[aria-checked="true"] { border-color: var(--text-primary); color: var(--text-primary); font-weight: 600; }
.appearance-opt .msr { font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .appearance-opt:hover { color: var(--text-primary); border-color: var(--border-strong); } }
.nav-menu .appearance-opt { color: rgba(29,29,31,0.66); border-color: rgba(29,29,31,0.18); }
.nav-menu .appearance-opt[aria-checked="true"] { color: #1D1D1F; border-color: #1D1D1F; }

/* ---------------- sticky narrative ---------------- */
.sn-grid { display: grid; grid-template-columns: 36% 1fr; gap: var(--s16); }
.sn-rail { position: sticky; top: var(--nav-offset); display: flex; flex-direction: column; gap: var(--s4); }
[data-sticky="off"] .sn-rail { position: static; }
.sn-step { display: grid; grid-template-columns: 3px 30px 1fr; gap: var(--s3); align-items: start; width: 100%; text-align: left; padding: 13px 15px; border-radius: var(--radius-control); border: 1px solid transparent; background: transparent; font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--text-muted); cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.sn-step .sn-rule { align-self: stretch; border-radius: 2px; background: transparent; transition: background-color var(--dur) var(--ease); }
.sn-step[data-active="true"] { background: var(--surface-1); border-color: var(--border-strong); color: var(--text-primary); }
.sn-step[data-active="true"] .sn-rule { background: var(--text-primary); }
.sn-step[data-active="true"] .sn-num, .sn-step[data-active="true"] .sn-title { color: var(--text-primary); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .sn-step:hover { color: var(--text-primary); background: var(--surface-1); } }

/* ---------------- floating capsule navigation ---------------- */
/* width resolves from the shared container system, so the logo and Start here
   sit on the same edges as the hero content grid */
.nav-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); width: min(calc(var(--container) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter))); margin: var(--nav-inset-top) auto 0; height: var(--nav-h); padding: 0 10px 0 22px; background: rgba(248,248,246,0.96); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-radius: var(--radius-full); box-shadow: var(--shadow-md), 0 1px 2px rgba(0,0,0,0.12); color: #1D1D1F; }
.nav-link { font-family: var(--sans); font-size: 15px; font-weight: 500; color: #1D1D1F; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: #1D1D1F !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } }
/* menu trigger: the label owns the underline, the chevron sits outside it */
.nav-trigger { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; height: 58px; padding: 0; background: transparent; border: 0; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 500; color: #1D1D1F; text-decoration: none !important; }
/* underline + chevron rotation are pure resting states, never transition ends */
.nav-trigger .nav-label { border-bottom: 2px solid transparent; padding-bottom: 2px; line-height: 1.2; }
.nav-trigger[aria-expanded="true"] .nav-label { border-bottom-color: #1D1D1F; }
@media (hover: hover) and (pointer: fine) { .nav-trigger:hover .nav-label { border-bottom-color: #1D1D1F; } }
.nav-trigger .nav-chev { display: inline-flex; align-items: center; font-size: 10px; opacity: 0.55; }
.nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.nav-icon { width: 40px; height: 40px; min-width: 40px; border-radius: var(--radius-full); border: 1px solid rgba(29,29,31,0.18); background: transparent; color: #1D1D1F; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav-icon:hover { background: #1D1D1F; color: #F8F8F6; } }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border: 1px solid #1D1D1F; border-radius: var(--radius-full); background: #1D1D1F; color: #F8F8F6 !important; font-family: var(--sans); font-size: 15px; font-weight: 600; text-decoration: none !important; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav-cta:hover { background: transparent; color: #1D1D1F !important; text-decoration: none !important; } }
.nav-menu { position: absolute; top: 54px; left: -14px; width: 300px; background: #F8F8F6; border: 1px solid rgba(29,29,31,0.12); border-radius: var(--radius-medium); box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; animation: discOpen 200ms var(--ease) both; }
.nav-menu a { border-radius: var(--radius-sm); padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; color: #1D1D1F; text-decoration: none; transition: background-color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav-menu a:hover { background: rgba(29,29,31,0.07); color: #1D1D1F !important; text-decoration: none !important; } }
.nav-cap :focus-visible, .nav-menu :focus-visible { outline: 2px solid #1D1D1F; outline-offset: 3px; }

/* ---------------- mobile scale ---------------- */
[data-vp="mobile"] { --gutter: 20px; --nav-h: 56px; --nav-inset-top: calc(var(--s4) + env(safe-area-inset-top, 0px)); }
[data-vp="mobile"] .t-display { font-size: 46px; line-height: 0.98; }
[data-vp="mobile"] .t-section { font-size: 34px; line-height: 1.06; }
[data-vp="mobile"] .t-feature { font-size: 30px; line-height: 1.1; }
[data-vp="mobile"] .t-card { font-size: 24px; }
[data-vp="mobile"] .b-lg { font-size: 17px; }
[data-vp="mobile"] .sec { padding-block: var(--s24); }
[data-vp="mobile"] .sec-c { padding-block: 72px; }
[data-vp="mobile"] .sn-rail { position: static; }

.msr { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; }

@keyframes jfFade { from { transform: translateY(12px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


html, body { margin: 0; padding: 0; background: var(--canvas); }
.jf-viewport-mobile { display: none; }
@media (max-width: 900px) {
  .jf-viewport-desktop { display: none; }
  .jf-viewport-mobile { display: block; }
}