/* ========================================================= EcoSense — Project 3 case study (rebuilt) White board · teal accent · navy text · horizontal scroll ========================================================= */
:root { --p3-bg: #ffffff; --p3-ink: #0f1f2c; --p3-ink-soft: #4b5b6a; --p3-mute: #8896a4; --p3-line: #e6edf1; --p3-card: #f7fafa; --p3-card-2: #f1f5f9; --p3-teal: #16a085; --p3-teal-strong: #0e8e72; --p3-teal-soft: #c4ebe1; --p3-teal-tint: #e8f6f1; --p3-navy: #1c3447; --p3-warn: #f3a623; --p3-err: #e2604f; --p3-radius: 16px; --p3-radius-sm: 10px; --p3-radius-lg: 22px; --p3-shadow: 0 6px 22px -10px rgba(15, 31, 44, 0.18); --p3-shadow-soft: 0 2px 8px -3px rgba(15, 31, 44, 0.08); --p3-nav-h: 64px; }
* { box-sizing: border-box; }
/* Body is the ONLY scroll container. A prior `html { overflow-x: clip }` forced
   html into a second, nested scroll container (overflow-x:non-visible makes
   overflow-y compute to auto). Nested scroll containers are the classic reason
   Android needs two fingers to scroll a page. Ryujin/Tasty scroll fine with just
   body overflow-x:hidden, so match that. */
html, body { margin: 0; padding: 0; }
body.p3 { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif; background: var(--p3-bg); color: var(--p3-ink); font-size: 15px; line-height: 1.4; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.p3 a { color: inherit; text-decoration: none; }
.p3 ul, .p3 ol { margin: 0; padding: 0; list-style: none; }
.p3 button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
.p3 input, .p3 select { font: inherit; color: inherit; }
/* ========================================================= TOP NAV ========================================================= */
/* ========================================================= TRACK + PANEL SHELL ========================================================= */
.p3-track { display: flex; flex-wrap: nowrap; width: max-content; min-height: 100vh; }
.p3-panel { flex: 0 0 auto; width: 100vw; height: calc(100vh - var(--p3-nav-h)); min-height: calc(100vh - var(--p3-nav-h)); display: flex; align-items: center; justify-content: center; padding: 0; background: #F0F4F8; }
/* All sections share the same 100vw panel width — same screen position when active */
.p3-panel.f3 { width: 100vw; }
.p3-panel.f4 { width: 170vw; }
.p3-panel.f5 { width: 200vw; }
/* Unified background across all sections — no per-section break */
.f1, .f2, .f3, .f4, .f5 { background: transparent !important; }
.p3-track { position: relative; --p3-bg-x: 0px; background: radial-gradient(ellipse 38vw 32vh at calc(8% + var(--p3-bg-x) * 1.2) 28%, rgba(32,201,176,0.12), transparent 65%), radial-gradient(ellipse 30vw 26vh at calc(16% + var(--p3-bg-x) * -0.9) 78%, rgba(242,97,129,0.08), transparent 65%), radial-gradient(ellipse 28vw 24vh at calc(28% + var(--p3-bg-x) * 1.4) 38%, rgba(32,201,176,0.09), transparent 65%), radial-gradient(ellipse 42vw 36vh at calc(38% + var(--p3-bg-x) * -1.1) 22%, rgba(32,201,176,0.09), transparent 65%), radial-gradient(ellipse 36vw 30vh at calc(50% + var(--p3-bg-x) * 1.0) 72%, rgba(242,97,129,0.07), transparent 65%), radial-gradient(ellipse 26vw 22vh at calc(62% + var(--p3-bg-x) * -1.3) 32%, rgba(32,201,176,0.10), transparent 65%), radial-gradient(ellipse 44vw 38vh at calc(75% + var(--p3-bg-x) * 0.9) 30%, rgba(32,201,176,0.11), transparent 65%), radial-gradient(ellipse 32vw 28vh at calc(84% + var(--p3-bg-x) * -1.2) 75%, rgba(242,97,129,0.08), transparent 65%), radial-gradient(ellipse 30vw 26vh at calc(95% + var(--p3-bg-x) * 1.1) 35%, rgba(32,201,176,0.09), transparent 65%), linear-gradient(180deg, #F6FAFC 0%, #EEF2F7 55%, #E8EEF3 100%); }
/* Dot grid pattern — drifts slowly */
.p3-track::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(14,31,55,0.08) 1px, transparent 1.4px); background-size: 24px 24px; opacity: 0.4; mix-blend-mode: multiply; z-index: 0; animation: p3-dots-drift 22s linear infinite; will-change: background-position; }
@keyframes p3-dots-drift {
  0% { background-position: 0 0; }
  100% { background-position: 48px 24px; }
}
/* Panels stack above the decorative layers */
.p3-panel { position: relative; z-index: 1; }
/* Later panels stack above earlier ones so parallax-drifting content never gets hidden by the previous section's overflow. */
.p3-panel.f2 { z-index: 2; justify-content: flex-start; }
/* hug §2 content to its left edge so it meets §1 sooner (closes the §1->§2 gap on wide screens) */
.p3-panel.f3 { z-index: 3; }
.p3-panel.f4 { z-index: 4; }
.p3-panel.f5 { z-index: 5; }
/* ========================================================= ICONS — pure CSS line glyphs (rounded, teal) ========================================================= */
/* ========================================================= PHONE MOCKUP COMPONENT (pure CSS) ========================================================= */
/* Phone tilt presets */
/* Mini = the inside-screen content (tight padding, scaled UI) */
/* Mini line chart inside phone */
/* Tooltip on the big chart */
/* Mini area chart inside phone */
/* Mini cards in row */
/* Buttons */
/* Tab bar at bottom of phone */
/* Radial / donut */
/* ========================================================= PANEL 01 — HERO ========================================================= */
/* ========================================================= PANEL 02 — CONTEXT & PROCESS ========================================================= */
/* ========================================================= PANEL 03 — RESEARCH INSIGHTS ========================================================= */
/* ========================================================= PANEL 04 — PERSONAS ========================================================= */
/* ========================================================= PANEL 05 — USER FLOW ========================================================= */
/* ========================================================= PANEL 06 — WIREFRAMES ========================================================= */
/* ========================================================= PANEL 07 — VISUAL IDENTITY ========================================================= */
/* ========================================================= PANEL 08 — DESIGN SYSTEM ========================================================= */
/* ========================================================= PANEL 09 — DATA VIZ ========================================================= */
/* ========================================================= PANEL 10 — ILLUSTRATION SYSTEM ========================================================= */
/* ========================================================= PANEL 11 — SCREEN SHOWCASE ========================================================= */
/* ========================================================= PANEL 12 — FEATURE BREAKDOWN ========================================================= */
/* ========================================================= PANEL 13 — PROTOTYPE & TESTING ========================================================= */
/* ========================================================= PANEL 14 — FINAL SCREENS ========================================================= */
/* ========================================================= PANEL 15 — LESSONS ========================================================= */
/* ========================================================= PANEL 16 — CLOSING ========================================================= */
/* ========================================================= DESKTOP SCALING — fill the panel like a presentation board ========================================================= */
@media (min-width: 901px) {
  /* Layout shell: each panel owns the top-bar offset. Track no longer adds any. */
  .p3-track { padding-top: 0; }
  .p3-panel { height: 100vh; min-height: 0; padding: var(--p3-nav-h) 4vw 0; align-items: center; justify-content: center; }
  /* Section header */
  /* HERO */
  /* PHONE COMPONENT — bigger across the board */
  /* CONTEXT & PROCESS */
  /* RESEARCH INSIGHTS */
  /* PERSONAS */
  /* USER FLOW */
  /* WIREFRAMES */
  /* VISUAL IDENTITY */
  /* DESIGN SYSTEM */
  /* DATA VIZ */
  /* ILLUSTRATION */
  /* SHOWCASE */
  /* FEATURE BREAKDOWN */
  /* PROTOTYPE */
  /* FINAL SCREENS */
  /* LESSONS */
  /* CLOSING */
}
/* ========================================================= MOBILE — vertical stack ========================================================= */
@media (max-width: 900px) {
  .p3-track { flex-direction: column; width: 100%; }
  .p3-panel { flex: none; width: 100%; height: auto; min-height: auto; padding: 60px 24px; }
}
/* ========================================================= FITNESS HERO — Section 01 (reference-matched) ========================================================= */
:root { --f1-bg: #EEF2F7; --f1-board: #F0F4F8; --f1-ink: #0E1F37; --f1-ink-2: #33486A; --f1-muted: #6B7C92; --f1-muted-2: #94A2B6; --f1-border: #E5EBF3; --f1-border-2: #EEF2F7; --f1-surface: #FFFFFF; --f1-surface-2: #F6F8FB; --f1-teal: #20C9B0; --f1-teal-2: #13B9A0; --f1-teal-soft: #E2F5F2; --f1-pink: #F26181; --f1-pink-soft: #FCE5EA; --f1-shadow: 0 30px 60px -36px rgba(14,31,55,.18), 0 10px 26px -18px rgba(14,31,55,.10); --f1-shadow-sm: 0 10px 28px -18px rgba(14,31,55,.14); }
/* --- Fitness nav overrides (top bar) --- */
/* =========== Hero panel shell =========== */
.f1 { position: relative; background: var(--f1-board); overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: center; }
.f1__bg { position: absolute; inset: 0; background: var(--f1-board); z-index: 0; }
/* left vertical guide line + pink dot marker */
/* vertical FITNESS / 2025 side label */
/* Inner grid */
.f1__inner { position: relative; z-index: 2; width: 100%; max-width: 1680px; padding: 0 clamp(50px, 5vw, 100px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 4.5vw, 90px); align-items: center; }
/* =========== LEFT COLUMN =========== */
.f1__title { margin: 0; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(54px, 6.2vw, 120px); line-height: 1.02; letter-spacing: -.025em; color: var(--f1-ink); }
.f1__title em { font-style: italic; font-weight: 400; color: var(--f1-teal-2); }
.f1__title .f1__dot { color: var(--f1-pink); font-style: normal; }
.f1__lede { margin: clamp(20px, 2.4vw, 36px) 0 0; font-size: clamp(14px, 1.15vw, 20px); line-height: 1.65; color: var(--f1-muted); max-width: clamp(380px, 32vw, 580px); font-weight: 400; }
.f1__feats { margin-top: clamp(28px, 3vw, 52px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.2vw, 40px); max-width: clamp(420px, 34vw, 620px); }
.f1__feat { display: flex; gap: clamp(10px, 1vw, 18px); align-items: flex-start; }
.f1__featic { width: clamp(36px, 3.2vw, 54px); height: clamp(36px, 3.2vw, 54px); border-radius: clamp(10px, 0.9vw, 14px); background: var(--f1-teal-soft); display: grid; place-items: center; flex-shrink: 0; }
.f1__featic svg { width: clamp(18px, 1.5vw, 26px); height: clamp(18px, 1.5vw, 26px); color: var(--f1-teal-2); stroke-width: 2; }
.f1__feat h5 { margin: clamp(2px, 0.4vw, 6px) 0 clamp(4px, 0.5vw, 8px); font-size: clamp(13px, 1.05vw, 17px); font-weight: 600; color: var(--f1-ink); letter-spacing: -.01em; }
.f1__feat p { margin: 0; font-size: clamp(11.5px, 0.9vw, 15px); line-height: 1.55; color: var(--f1-muted); }
.f1__meta { margin-top: clamp(28px, 3vw, 52px); display: inline-flex; gap: clamp(28px, 3vw, 60px); padding: clamp(14px, 1.4vw, 22px) clamp(20px, 2vw, 34px); background: var(--f1-surface); border: 1px solid var(--f1-border); border-radius: clamp(12px, 1vw, 18px); box-shadow: var(--f1-shadow-sm); }
/* =========== RIGHT COLUMN =========== */
.f1__right { position: relative; height: 720px; }
/* Only on wide screens (where the max-width-centred content leaves a big empty right on §1) push the 2-phone pair toward §1's right edge to close the §1->§2 gap. Skipped below 1700px so it never clips the phones at laptop widths. */
@media (min-width: 1700px) {
  .f1__right { transform: translateX(13vw); }
}
/* phone shells */
.f1ph { position: absolute; background: #0E1F37; border-radius: 42px; padding: 8px; box-shadow: var(--f1-shadow); overflow: hidden; border: 1px solid rgba(14,31,55,.08); }
.f1ph__screen { width: 100%; height: 100%; background: #fff; border-radius: 34px; overflow: hidden; position: relative; }
.f1ph__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 92px; height: 20px; background: #0E1F37; border-radius: 12px; z-index: 3; }
.f1ph--left { width: 248px; height: 520px; left: 0; top: 80px; transform: rotate(-2deg); z-index: 1; }
.f1ph--center { width: 296px; height: 620px; left: 220px; top: 0; z-index: 3; }
.f1ph--right { width: 270px; height: 560px; right: 0; top: 60px; transform: rotate(2deg); z-index: 2; }
/* ===== Screenshot mode — SVG mockup as the screen content (frame stays) ===== Each SVG has a different inner phone-screen mask + shadow padding around it, so each img is scaled + offset so the SVG's inner screen exactly fills our dark phone's screen (.f1ph__screen). Numbers derived from each SVG's mask: ss1: 278×502 viewBox, mask 253×493 at (16, 3) -> phone 248×520, screen 232×504 ss2: 330×587 viewBox, mask 261×499 at (37, 39) -> phone 296×620, screen 280×604 ss3: 330×574 viewBox, mask 261×499 at (37, 26) -> phone 270×560, screen 254×544 */
.f1ph--shot .f1ph__screen { background: #fff; overflow: hidden; position: relative; }
.f1ph--shot .f1ph__shot-img { position: absolute; display: block; max-width: none; }
/* Raster screen image (direct PNG/WebP instead of the SVG mockup). The SVG wrapper rasterised the embedded screenshot at its tiny viewBox resolution and scaled it up = blurry; a direct raster renders at full device resolution. It simply fills the dark phone's screen; the frame/notch/radius are CSS. */
.f1ph--shot .f1ph__shot-img--raster { position: absolute; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center top; }
/* Center phone uses the f1.png crop, which is wider than the tall phone screen. Cover so it fills like a real screenshot, but with a small inner margin (padding) so the content isn't glued to the top/bottom edges — back arrow and tab bar get breathing room. box-sizing makes object-fit honour the padding; the margin shows the white screen behind, and a smaller box also trims the sides less. */
.f1ph--center .f1ph__shot-img--raster, .f1ph--right .f1ph__shot-img--raster { box-sizing: border-box; padding: 11% 0 5%; object-fit: cover; object-position: center; }
/* ss1 — scale 1.045 (slightly oversized to cover full screen after upward shift) */
.f1ph--left.f1ph--shot .f1ph__shot-img { width: 291px; height: 525px; left: -33px; top: -11px; }
/* ss2 — scale 1.210 (height-driven cover) */
.f1ph--center.f1ph--shot .f1ph__shot-img { width: 399px; height: 710px; left: -63px; top: -47px; }
/* ss3 — scale 1.090 (height-driven cover) */
.f1ph--right.f1ph--shot .f1ph__shot-img { width: 360px; height: 626px; left: -66px; top: -28px; }
/* ----- PHONE 1: Workouts ----- */
/* ----- PHONE 2: Hello Alex / Activity ----- */
/* ----- PHONE 3: Progress ----- */
/* =========== FLOATING TAGS =========== */
.f1fl { background: #fff; border: 1px solid var(--f1-border); border-radius: 18px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--f1-shadow); min-width: 200px; }
/* =========== Initialize lucide icons inside hero =========== */
.f1 [data-lucide] { display: inline-flex; }
/* =========== Responsive tightening =========== */
@media (max-width: 1400px) {
  .f1__inner { max-width: 100%; padding: 0 60px 0 130px; gap: 40px; }
  .f1__title { font-size: 68px; }
  .f1__right { height: 660px; }
  .f1ph--center { width: 280px; height: 580px; left: 200px; }
  .f1ph--left { width: 232px; height: 488px; }
  .f1ph--right { width: 254px; height: 526px; }
}
@media (max-width: 1100px) {
  .f1__title { font-size: 56px; }
  .f1__feats { grid-template-columns: 1fr; gap: 18px; max-width: 420px; }
  .f1__meta { gap: 28px; padding: 14px 22px; }
  .f1__right { height: 600px; }
}
/* ========================================================= FITNESS SECTION 02 — Overview · Problem · Solution · Process ========================================================= */
.f2 { position: relative; background: var(--f1-board); overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: flex-end; }
/* Hide the global fixed top navbar — each panel has its own top label */
.p3-track { padding-top: 0; }
.f2::after { content: ""; position: absolute; width: 760px; height: 760px; border-radius: 50%; right: -220px; top: 48%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(32,201,176,.07), rgba(32,201,176,0) 70%); pointer-events: none; }
/* Side guide + label (shared with section 01 visually) */
/* Inner grid */
.f2__inner { position: relative; z-index: 2; width: 100%; max-width: 1680px; padding: 0 clamp(50px, 5vw, 100px); display: grid; grid-template-rows: 1fr auto; gap: 28px; align-self: center; }
/* ============ TOP ROW ============ */
.f2__toprow { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: center; }
/* LEFT */
.f2__title { margin: 0; font-family: 'Fraunces', serif; font-weight: 400; font-size: 54px; line-height: 1.04; letter-spacing: -.025em; color: var(--f1-ink); }
.f2__title em { font-style: italic; font-weight: 400; color: var(--f1-teal-2); }
.f2__title .f2__dot { color: var(--f1-pink); font-style: normal; }
.f2__lede { margin: 30px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--f1-muted); max-width: 420px; font-weight: 400; }
/* RIGHT — 3 cards */
.f2__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.f2card { background: var(--f1-surface); border: 1px solid var(--f1-border); border-radius: 22px; padding: 22px 20px 22px; box-shadow: var(--f1-shadow-sm); display: flex; flex-direction: column; gap: 14px; }
.f2card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.f2card__cic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.f2card__cic svg { width: 20px; height: 20px; stroke-width: 2; }
.f2card__cic.teal { color: var(--f1-teal-2); }
.f2card__cic.pink { color: var(--f1-pink); }
.f2card__ct { font-size: 18px; font-weight: 600; color: var(--f1-ink); letter-spacing: -.01em; }
/* ==== OVERVIEW ==== */
.f2ov__rows { display: flex; flex-direction: column; gap: 10px; }
.f2ov__row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; }
.f2ov__row .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--f1-muted); font-weight: 600; }
.f2ov__row .v { font-size: 12.5px; color: var(--f1-ink); font-weight: 500; white-space: nowrap; }
.f2ov__sec { padding-top: 12px; border-top: 1px solid var(--f1-border-2); display: flex; flex-direction: column; gap: 10px; }
.f2ov__sec .k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--f1-muted); font-weight: 600; }
.f2tools { display: flex; gap: 10px; align-items: center; }
.f2tool { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.02em; overflow: hidden; box-shadow: 0 4px 12px -6px rgba(14,31,55,.18); border: 1px solid transparent; }
.f2tool.figma { background: #1E1E1E; padding: 8px; }
.f2tool.figma svg { width: 100%; height: 100%; display: block; }
.f2tool.ps { background: #001E36; color: #31A8FF; border-color: #31A8FF; }
.f2tool.ae { background: #00005B; color: #D8A8FF; border-color: #D8A8FF; }
.f2tool.nx { background: #FFFFFF; color: #0F1115; border-color: var(--f1-border); font-size: 18px; }
.f2avatars { display: flex; align-items: center; }
.f2avatars .f2av { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background-size: cover; background-position: center; box-shadow: 0 2px 6px -2px rgba(14,31,55,.18); margin-left: -10px; }
.f2avatars .f2av:first-child { margin-left: 0; }
.f2avatars .f2av.a1 { background-image: url('https://i.pravatar.cc/120?img=12'); }
.f2avatars .f2av.a2 { background-image: url('https://i.pravatar.cc/120?img=33'); }
.f2avatars .f2av.a3 { background-image: url('https://i.pravatar.cc/120?img=15'); }
.f2avatars .f2av.a4 { background-image: url('https://i.pravatar.cc/120?img=47'); }
.f2ov__desc { font-size: 12px; color: var(--f1-muted); line-height: 1.55; margin: 4px 0 0; }
/* ==== PROBLEM ==== */
.f2text { font-size: 13px; color: var(--f1-ink-2); line-height: 1.6; margin: 0; }
.f2plist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.f2plist li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--f1-ink); font-weight: 500; }
.f2plist li .pdt { width: 6px; height: 6px; border-radius: 50%; background: var(--f1-pink); flex-shrink: 0; }
/* Card footer — meaningful closing statement instead of decorative graphics */
.f2card__footer { margin-top: auto; padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px); border-radius: clamp(10px, 0.9vw, 14px); border: 1px solid; display: flex; flex-direction: column; gap: 4px; }
.f2card__footer.pink { background: var(--f1-pink-soft); border-color: rgba(242, 97, 129, 0.18); }
.f2card__footer.teal { background: var(--f1-teal-soft); border-color: rgba(20, 184, 166, 0.22); }
.f2card__footer-label { font-size: clamp(9.5px, 0.72vw, 11px); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.f2card__footer.pink .f2card__footer-label { color: var(--f1-pink); }
.f2card__footer.teal .f2card__footer-label { color: var(--f1-teal-2); }
.f2card__footer p { margin: 0; font-size: clamp(12px, 0.92vw, 14px); line-height: 1.5; color: var(--f1-ink); font-weight: 500; }
/* ==== SOLUTION ==== */
.f2slist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.f2slist li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--f1-ink); font-weight: 500; }
.f2slist li .ck { width: 16px; height: 16px; border-radius: 50%; background: var(--f1-teal); display: grid; place-items: center; flex-shrink: 0; }
.f2slist li .ck svg { width: 10px; height: 10px; color: #fff; stroke-width: 3; }
/* ============ DESIGN PROCESS ============ */
.f2process { background: var(--f1-surface); border: 1px solid var(--f1-border); border-radius: 24px; padding: 24px 32px 26px; box-shadow: var(--f1-shadow-sm); position: relative; }
.f2process__title { font-size: 14px; font-weight: 600; color: var(--f1-ink); letter-spacing: -.01em; margin-bottom: 18px; }
.f2steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; position: relative; }
.f2step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; z-index: 1; }
.f2step__ic { width: 64px; height: 64px; border-radius: 16px; background: var(--f1-teal-tint); display: grid; place-items: center; color: var(--f1-teal-2); }
.f2step__ic svg { width: 24px; height: 24px; stroke-width: 2; }
.f2step__body .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.f2step__body .n { font-size: 13px; font-weight: 600; color: var(--f1-muted); letter-spacing: .02em; }
.f2step__body .nm { font-size: 15px; font-weight: 600; color: var(--f1-ink); letter-spacing: -.01em; }
.f2step__body p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--f1-muted); max-width: 220px; }
/* Teal tint var (used by f2 steps and section 02 visual) */
:root { --f1-teal-tint: #F2FBF8; }
/* Responsive tightening */
@media (max-width: 1400px) {
  .f2__inner { max-width: 100%; padding: 0 60px 0 130px; gap: 24px; }
  .f2__toprow { grid-template-columns: 380px 1fr; gap: 32px; }
  .f2__title { font-size: 54px; }
  .f2card { padding: 20px 18px 22px; }
}
@media (max-width: 1100px) {
  .f2__title { font-size: 44px; }
  .f2__toprow { grid-template-columns: 1fr; gap: 24px; }
  .f2card { min-height: 0; }
}
/* ========================================================= FITNESS SECTION 03 — Research · Personas · User Flow ========================================================= */
.f3 { position: relative; background: var(--f1-board); overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; }
.f3::after { content: ""; position: absolute; width: 740px; height: 740px; border-radius: 50%; right: -220px; top: 55%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(32,201,176,.06), rgba(32,201,176,0) 70%); pointer-events: none; }
/* Guide + side label */
/* Inner grid — 2 independent columns (flex inside) */
.f3__inner { position: relative; z-index: 2; width: 100%; max-width: 1680px; padding: clamp(96px, 11.5vh, 134px) clamp(50px, 5vw, 100px) 0; display: grid; grid-template-columns: 1.25fr 1fr; column-gap: clamp(28px, 3vw, 56px); align-self: start; align-items: stretch; }
.f3__col--right .f3flow__diagram { width: 100%; height: auto; max-height: clamp(280px, 42vh, 480px); object-fit: contain; }
.f3__col { display: flex; flex-direction: column; min-width: 0; }
.f3__col--left { gap: clamp(20px, 2.2vw, 36px); }
.f3__col--right { gap: clamp(18px, 2vw, 32px); justify-content: space-between; height: 100%; }
/* Eyebrow */
.f3__eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--f1-muted); font-weight: 600; margin-bottom: 14px; }
/* ============ HEADLINE ============ */
.f3__headline { align-self: start; }
.f3__title { margin: 0; font-family: 'Fraunces', serif; font-weight: 400; font-size: 60px; line-height: 1.06; letter-spacing: -.02em; color: var(--f1-ink); }
.f3__title em { font-style: italic; font-weight: 400; color: var(--f1-teal-2); }
.f3__title .f3__dot { color: var(--f1-pink); font-style: normal; }
.f3__lede { margin: 26px 0 0; font-size: 14px; line-height: 1.7; color: var(--f1-muted); max-width: 560px; font-weight: 400; }
/* ============ RESEARCH INSIGHTS ============ */
.f3__ri { align-self: start; }
.f3ri__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.f3ri__card { background: var(--f1-surface); border: 1px solid var(--f1-border); border-radius: 18px; padding: 18px 14px; box-shadow: var(--f1-shadow-sm); display: flex; align-items: flex-start; gap: 10px; min-height: 0; }
.f3ri__ring { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; position: relative; }
.f3ri__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.f3ri__ring .pct { position: relative; font-size: 14px; font-weight: 600; color: var(--f1-ink); letter-spacing: -.01em; z-index: 1; }
.f3ri__body { flex: 1; min-width: 0; padding-top: 0; }
.f3ri__body .t { font-size: 12.5px; font-weight: 600; color: var(--f1-ink); line-height: 1.3; letter-spacing: -.01em; }
.f3ri__body .s { font-size: 11px; color: var(--f1-muted); line-height: 1.5; margin-top: 6px; }
/* ============ PERSONAS ============ */
.f3__personas { display: flex; flex-direction: column; min-height: 0; }
.f3pers__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; }
.f3pers__card { background: var(--f1-surface); border: 1px solid var(--f1-border); border-radius: clamp(14px, 1.1vw, 20px); padding: clamp(14px, 1.2vw, 22px); box-shadow: var(--f1-shadow-sm); display: flex; flex-direction: column; gap: clamp(8px, 0.9vh, 14px); min-width: 0; }
.f3pers__head { display: flex; align-items: center; gap: clamp(10px, 1vw, 14px); }
.f3pers__avatar { width: clamp(48px, 4vw, 70px); height: clamp(48px, 4vw, 70px); border-radius: 50%; flex-shrink: 0; background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: 0 6px 14px -8px rgba(14,31,55,.25); }
.f3pers__name { flex: 1; min-width: 0; }
.f3pers__name h4 { margin: 0; font-size: clamp(13px, 1.1vw, 17px); font-weight: 600; color: var(--f1-ink); letter-spacing: -.01em; }
.f3pers__name .meta { font-size: clamp(10.5px, 0.85vw, 13px); color: var(--f1-muted); margin-top: 2px; font-weight: 500; }
.f3pers__name .loc { display: flex; align-items: center; gap: 4px; font-size: clamp(10px, 0.8vw, 12px); color: var(--f1-muted); margin-top: 2px; }
.f3pers__name .loc svg { width: 11px; height: 11px; color: var(--f1-muted-2); }
.f3pers__bio { font-size: clamp(11px, 0.9vw, 13px); color: var(--f1-ink-2); line-height: 1.55; margin: 0; padding-top: clamp(8px, 0.9vh, 12px); border-top: 1px solid var(--f1-border-2); }
.f3pers__sec { display: flex; flex-direction: column; gap: 4px; }
.f3pers__sec .label { font-size: clamp(10.5px, 0.85vw, 12.5px); font-weight: 600; letter-spacing: -.01em; }
.f3pers__sec.goals .label { color: var(--f1-teal-2); }
.f3pers__sec.pain .label { color: #E2604F; }
.f3pers__sec.moti .label { color: var(--f1-teal-2); }
.f3pers__sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.f3pers__sec li { font-size: clamp(10.5px, 0.85vw, 12px); color: var(--f1-ink-2); line-height: 1.45; padding-left: 12px; position: relative; }
.f3pers__sec li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--f1-ink); }
.f3pers__sec.pain li::before { background: #E2604F; }
/* ============ USER FLOW (sitemap diagram) ============ */
.f3__flow { position: relative; gap: 14px; }
.f3flow__desc { font-size: 12.5px; line-height: 1.6; color: var(--f1-muted); margin: 0 0 4px; max-width: 640px; }
.f3flow__diagram { display: block; width: 100%; height: auto; max-height: clamp(380px, 60vh, 760px); object-fit: contain; }
.f3__flow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.f3__col--right .f3__flow { display: flex; flex-direction: column; }
/* Decorative dashed pink trail bottom-right */
.f3 [data-lucide] { display: inline-flex; }
/* Responsive tightening */
@media (max-width: 1400px) {
  .f3__inner { max-width: 100%; padding: 0 50px 0 130px; column-gap: 36px; row-gap: 24px; }
  .f3__title { font-size: 52px; }
  .f3ri__card { min-height: 170px; padding: 18px 14px; }
  .f3pers__card { padding: 18px 18px 20px; }
}
@media (max-width: 1100px) {
  .f3__title { font-size: 42px; }
  .f3__inner { grid-template-columns: 1fr; }
}
/* ========================================================= FITNESS SECTION 04 — Design System (Wireframes + DS Board) ========================================================= */
.f4 { position: relative; background: var(--f1-board); overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.f4::after { content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%; right: -200px; top: 55%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(32,201,176,.05), rgba(32,201,176,0) 70%); pointer-events: none; }
/* Inner grid */
.f4__inner { position: relative; z-index: 2; width: 100%; max-width: none; padding: clamp(56px, 6.4vh, 96px) clamp(50px, 4vw, 100px) clamp(44px, 4.8vh, 78px); display: grid; grid-template-columns: 0.9fr 0.9fr 1.5fr; column-gap: clamp(60px, 6vw, 130px); align-self: center; align-items: stretch; height: 100%; }
.f4__col { display: flex; flex-direction: column; gap: clamp(18px, 2vh, 32px); min-width: 0; justify-content: center; }
.f4__col--1 { justify-content: flex-start; gap: clamp(20px, 2.5vh, 40px); }
.f4__col--2 { justify-content: flex-start; }
.f4__col--3 { justify-content: flex-start; }
.f4__col--3 .f4__board--full { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; column-gap: clamp(40px, 4vw, 80px); row-gap: clamp(10px, 1.2vh, 18px); min-width: 0; align-content: center; height: 100%; }
.f4__col--3 .f4__board--full .f4ds__header { grid-column: 1 / -1; grid-row: 1; }
.f4__col--3 .f4__board--full .f4ds__row { display: contents; }
.f4__col--3 .f4__board--full .f4ds__sec { min-width: 0; align-self: start; }
/* COL 1: Palette on top, Typography below */
.f4__col--3 .f4__board--full .f4ds__row.top .f4ds__sec:first-child { grid-column: 1; grid-row: 2; }
/* Palette */
.f4__col--3 .f4__board--full .f4ds__sec--type { grid-column: 1; grid-row: 3 / 5; }
/* Typography */
/* COL 2 stack: Iconography on top, Buttons immediately below — pinned to top, ignoring row heights */
.f4__col--3 .f4__board--full .f4__col2-stack { grid-column: 2; grid-row: 2 / 5; align-self: start; display: flex; flex-direction: column; gap: clamp(56px, 7vh, 110px); min-width: 0; }
.f4__col--3 .f4__board--full .f4__col2-stack .f4ds__sec { align-self: stretch; }
/* COL 3 stack: Metrics on top, Illustrations below — pinned to top */
.f4__col--3 .f4__board--full .f4__col3-stack { grid-column: 3; grid-row: 2 / 5; align-self: start; display: flex; flex-direction: column; gap: clamp(14px, 1.6vh, 24px); min-width: 0; }
.f4__col--3 .f4__board--full .f4__col3-stack .f4ds__sec { align-self: stretch; }
/* Tighten the right-side sections so they fit in narrow columns */
.f4__col--3 .f4icons--ref { gap: 6px; flex-wrap: wrap; }
.f4__col--3 .f4icons--ref .ic { flex: 1 1 0; width: auto; min-width: 0; aspect-ratio: 1; height: auto; max-width: 56px; background: transparent; border: none; box-shadow: none; }
.f4__col--3 .f4icons--ref .ic img { width: 60%; height: 60%; }
/* Strip of additional icons (image 22.svg) — sized so each icon matches the .ic icons */
.f4__col--3 .f4icons--strip { margin-top: clamp(6px, 0.8vh, 12px); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.f4__col--3 .f4icons--strip img { display: block; width: 100%; height: auto; max-height: 36px; object-fit: contain; }
/* ===== Custom button gallery — match ref image exactly ===== */
.f4btns--custom { display: flex; flex-direction: column; gap: 22px; }
.fbtn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fbtn { border: none; font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .01em; cursor: default; display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 999px; white-space: nowrap; line-height: 1; box-shadow: none; height: 40px; }
/* Exact colors from the ref */
.fbtn--teal { background: #00A896 !important; color: #fff !important; }
.fbtn--white { background: #fff !important; color: #02264A !important; box-shadow: 0 4px 10px -4px rgba(14,31,55,.18); }
.fbtn--navy { background: #001E47 !important; color: #fff !important; }
.fbtn--frtxt { color: #001E47; }
/* Perfect circles, larger than before */
.fbtn--circle { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 22px; font-weight: 500; flex-shrink: 0; }
.fbtn--circle.fbtn--white { color: #02264A; }
.fbtn--circle.fbtn--teal { color: #fff; }
.fbtn--circle svg, .fbtn--circle [data-lucide] { width: 18px; height: 18px; stroke-width: 2.4; }
/* Top row — uniform wide teal pills */
.fbtn-row--pills { gap: 10px; }
.fbtn-row--pills .fbtn { padding: 14px 32px; font-size: 14px; height: 44px; min-width: 100px; }
/* Bottom row — Français / Anglais smaller pills */
.fbtn-row--mix .fbtn--pill { padding: 12px 24px; font-size: 14px; height: 42px; }
.fbtn-row--mix .fbtn--navy { padding: 12px 28px; }
.f4__col--3 .f4metrics--row { grid-template-columns: repeat(3, 1fr); }
.f4__col--3 .f4illus--row { grid-template-columns: repeat(3, 1fr); }
/* Remove grey container backgrounds on Typography, Iconography, Illustrations */
.f4__col--3 .f4ds__sec--type { background: transparent; border: none; padding: 0; }
.f4__col--3 .f4icons--ref { background: transparent; border: none; padding: 0; }
.f4__col--3 .f4icons--strip { background: transparent; border: none; padding: 0; }
.f4__col--3 .f4illus { background: transparent; border: none; padding: 0; }
.f4__col--3 .f4metrics { background: transparent; border: none; padding: 0; }
/* Match illustration tile size to metrics — square aspect, same look */
.f4__col--3 .f4illus .il { height: auto; aspect-ratio: 1; padding: 4px; }
.f4__col--3 .f4illus .il img { width: 100%; height: 100%; object-fit: contain; }
/* "→ style guide" lead-in under the right-side wireframes */
.f4__leadto { display: flex; align-items: flex-start; justify-content: center; gap: clamp(14px, 1.4vw, 22px); margin-top: clamp(28px, 4vh, 56px); }
.f4__leadto-text { font-family: 'Fraunces', serif; font-size: clamp(22px, 2.1vw, 34px); font-weight: 400; color: var(--f1-ink); letter-spacing: -.015em; line-height: 1.25; text-align: right; }
.f4__leadto-text em { font-style: italic; color: var(--f1-teal-2); }
.f4__leadto-dot { color: var(--f1-pink); }
.f4__leadto-swirl { width: clamp(130px, 11vw, 200px); height: clamp(90px, 7.5vw, 130px); background-color: var(--f1-teal-2); -webkit-mask: url("assets/fitness/swirl.svg") no-repeat center / contain; mask: url("assets/fitness/swirl.svg") no-repeat center / contain; display: block; flex-shrink: 0; margin-top: clamp(24px, 3.5vh, 50px); transform-origin: center; }
.f4__col .f4__wires { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1vw, 18px); align-items: stretch; margin: 0; }
.f4__col .f4wf { width: 100%; }
.f4__col .f4wf__phone { width: 100%; max-width: none; aspect-ratio: 9 / 17; align-items: center; }
.f4__col .f4wf__phone img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.f4__left { display: flex; flex-direction: column; gap: clamp(14px, 1.6vh, 26px); align-self: center; }
.f4__wires { align-self: center; }
.f4__board { align-self: center; }
/* ============ LEFT: headline + wireframes ============ */
.f4__title { margin: 0; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(40px, 4.2vw, 76px); line-height: 1.04; letter-spacing: -.025em; color: var(--f1-ink); }
.f4__title em { font-style: italic; font-weight: 400; color: var(--f1-teal-2); }
.f4__title .f4__dot { color: var(--f1-pink); font-style: normal; }
.f4__lede { margin: 0; font-size: clamp(13px, 1vw, 18px); line-height: 1.65; color: var(--f1-muted); max-width: clamp(380px, 32vw, 560px); }
.f4__wires { margin-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.2vw, 22px); justify-items: center; }
/* ---- Wireframe phone shell ---- */
.f4wf { border-radius: 22px; position: relative; flex-direction: column; }
/* ============ CONNECTOR ============ */
/* ============ RIGHT BOARD ============ */
.f4__board { background: #fff; border: 1px solid var(--f1-border); border-radius: clamp(16px, 1.4vw, 26px); box-shadow: var(--f1-shadow); padding: clamp(14px, 1.6vh, 24px) clamp(16px, 1.5vw, 26px); display: flex; flex-direction: column; gap: clamp(10px, 1.4vh, 20px); min-height: 0; }
.f4ds__title { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--f1-muted); font-weight: 600; margin-bottom: 12px; }
.f4ds__sec { display: flex; flex-direction: column; min-width: 0; }
.f4ds__sec.full { flex: 1; }
/* ---- TOP row: palette + typography ---- */
.f4ds__row.top { display: grid; grid-template-columns: 1.85fr 1.15fr; gap: 24px; }
.f4ds__row.bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.f4ds__row.btnsmetrics { display: grid; grid-template-columns: 0.55fr 1fr; gap: 16px; }
.f4palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 14px; }
.f4palette .sw { display: flex; flex-direction: column; gap: 6px; }
.f4palette .sw .c { width: 100%; height: 56px; border-radius: 10px; display: block; }
.f4palette .sw b { font-size: 10.5px; font-weight: 600; color: var(--f1-ink); letter-spacing: -.01em; }
.f4palette .sw i { font-size: 9.5px; color: var(--f1-muted); font-style: normal; font-weight: 500; letter-spacing: -.01em; }
.f4type { display: flex; gap: 16px; align-items: flex-start; }
.f4type .aa { font-family: 'Fraunces', serif; font-weight: 500; font-size: 72px; line-height: 1; color: var(--f1-ink); letter-spacing: -.04em; }
/* ---- MAIN: 3 columns ---- */
/* BUTTONS */
.f4btns { display: flex; flex-direction: column; gap: 10px; }
.f4btns .row { display: flex; flex-direction: column; gap: 4px; }
.f4btns .b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 9px; font-size: 12px; font-weight: 600; border: none; cursor: default; }
.f4btns .b.out { background: transparent; color: #0CB39C; border: 1.5px solid #0CB39C; }
.f4btns .b.txt { background: none; color: #0CB39C; padding: 0; }
.f4btns .b svg { width: 13px; height: 13px; }
/* INPUTS */
/* CARDS */
/* ICONS */
.f4icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; background: var(--f1-surface-2); border: 1px solid var(--f1-border-2); border-radius: 12px; padding: 12px; }
.f4icons .ic { aspect-ratio: 1; display: grid; place-items: center; color: var(--f1-ink); }
.f4icons .ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
/* COMPONENTS */
/* FITNESS UI ELEMENTS column */
/* ============ BANNER ============ */
/* lucide icons inside the section */
.f4 [data-lucide] { display: inline-flex; }
/* ============ STYLE GUIDE REF (wireframe images + new palette + nav.svg) ============ */
/* Wireframe cards now host SVG mockups inside a phone mockup */
.f4wf { background: transparent; border: none; box-shadow: none; padding: 0; height: auto; display: flex; align-items: center; justify-content: center; overflow: visible; }
.f4wf__phone { background: #FFFFFF; border: 1px solid var(--f1-border); border-radius: clamp(18px, 1.6vw, 26px); padding: clamp(20px, 2vw, 32px) clamp(8px, 0.8vw, 14px) clamp(12px, 1.2vw, 18px); box-shadow: 0 14px 30px -16px rgba(14,31,55,.18), 0 4px 10px -6px rgba(14,31,55,.08); width: 100%; max-width: clamp(160px, 14vw, 220px); display: flex; align-items: flex-start; justify-content: center; position: relative; overflow: hidden; }
.f4wf__phone img { display: block; width: 100%; height: auto; max-height: clamp(220px, 26vh, 320px); object-fit: contain; }
/* Style Guide header */
.f4ds__header { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--f1-border); margin-bottom: 6px; }
.f4ds__heading { margin: 0; font-size: 22px; font-weight: 700; color: var(--f1-teal-2); letter-spacing: .08em; text-transform: uppercase; position: relative; display: inline-block; width: max-content; padding-bottom: 6px; }
.f4ds__heading::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--f1-teal); border-radius: 2px; }
.f4ds__intro { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--f1-muted); max-width: 720px; }
/* Color palette — 2 cols × 3 rows */
.f4palette--ref { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.f4palette--ref .sw { flex-direction: column; align-items: stretch; gap: 0; }
.f4palette--ref .sw .c { height: 64px; border-radius: 8px 8px 0 0; }
.f4palette--ref .sw i { background: #fff; border: 1px solid var(--f1-border); border-top: none; border-radius: 0 0 8px 8px; padding: 8px 12px; font-size: 11px; letter-spacing: .04em; color: var(--f1-muted); text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; box-shadow: 0 6px 14px -10px rgba(14,31,55,.12); }
/* Typography — fonts left, Aa right (compact, no wrap) */
.f4ds__sec--type { background: var(--f1-surface-2); border-radius: 18px; padding: 16px 18px; border: 1px solid var(--f1-border); }
.f4type--ref { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.f4type--ref .f4type__left { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-shrink: 0; }
.f4type--ref .f4type__left .font { font-size: 13.5px; font-weight: 700; color: #0E5A75; letter-spacing: -.01em; margin: 0; white-space: nowrap; }
.f4type--ref .f4type__left .font + .weights { margin-bottom: 10px; }
.f4type--ref .f4type__left .weights { font-size: 11.5px; color: var(--f1-muted); font-weight: 400; white-space: nowrap; }
.f4type--ref .aa { font-family: 'Arial Rounded MT Bold', 'Arial Rounded MT', 'Inter', sans-serif; font-weight: 700; font-size: 72px; line-height: 1; color: #0E5A75; letter-spacing: -.04em; flex-shrink: 0; }
/* Type scale demo (fills bottom of typography card) */
.f4type__scale { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--f1-border-2); display: flex; flex-direction: column; gap: 8px; }
.f4type__scale .r { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; }
.f4type__scale .r .size { font-size: 10px; color: var(--f1-muted-2); font-weight: 600; letter-spacing: .04em; text-align: right; font-variant-numeric: tabular-nums; }
.f4type__scale .r .sample { color: var(--f1-ink); letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Iconography — 3 large icon tiles */
.f4icons--ref { display: flex; gap: 14px; background: var(--f1-surface-2); border: 1px solid var(--f1-border-2); border-radius: 14px; padding: 16px; align-items: center; justify-content: center; }
.f4icons--ref .ic { width: 64px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid var(--f1-border); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 10px -6px rgba(14,31,55,.12); }
.f4icons--ref .ic img { width: 28px; height: 28px; object-fit: contain; }
/* Navigation bar component using nav.svg */
/* Buttons grid — 2 cols × 2 rows, very compact */
/* Metrics grid — 2 cols × 2 rows */
.f4metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; background: var(--f1-surface-2); border: 1px solid var(--f1-border-2); border-radius: 10px; }
.f4metrics--row { grid-template-columns: repeat(4, 1fr); }
.f4metrics .m { background: #fff; border: 1px solid var(--f1-border); border-radius: 8px; padding: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px -4px rgba(14,31,55,.10); aspect-ratio: 1; }
.f4metrics .m img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Illustrations — compact horizontal strip */
.f4illus { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; background: var(--f1-surface-2); border: 1px solid var(--f1-border-2); border-radius: 10px; }
.f4illus--row { grid-template-columns: repeat(4, 1fr); }
.f4illus .il { background: #fff; border: 1px solid var(--f1-border); border-radius: 8px; padding: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px -4px rgba(14,31,55,.10); height: 70px; }
.f4illus .il img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Responsive */
@media (max-width: 1500px) {
  .f4__inner { grid-template-columns: 560px 1fr; column-gap: 32px; max-width: 100%; padding: 0 40px 0 130px; }
  .f4__title { font-size: 44px; }
  .f4wf img { max-height: 240px; }
}
@media (max-width: 1200px) {
  .f4__inner { grid-template-columns: 1fr; }
}
/* ========================================================= FITNESS SECTION 05 — Final Showcase / Outcome ========================================================= */
.f5 { position: relative; background: var(--f1-board); overflow: visible; padding: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Inner grid */
.f5__inner { position: relative; z-index: 2; width: 100%; max-width: 1620px; padding: 0 60px 0 160px; display: grid; grid-template-columns: 660px 1fr; gap: 48px; align-self: center; align-items: start; }
/* ============ LEFT ============ */
.f5__title em { font-weight: 400; }
.f5 [data-lucide] { display: inline-flex; }
/* ============ SECTION 05 — Screens Showcase (matches portfolio design system) ============ */
.f5--screens { background: var(--f1-board); }
.f5__inner--screens { display: grid; grid-template-columns: 0.4fr 2.4fr; column-gap: clamp(16px, 1.5vw, 32px); max-width: none; padding: 0 clamp(50px, 4vw, 100px); align-self: center; align-items: center; width: 100%; }
.f5__hero { align-self: center; }
.f5__title { margin: 0; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(34px, 3.4vw, 56px); line-height: 1.05; letter-spacing: -.02em; color: var(--f1-ink); }
.f5__title em { font-style: italic; color: var(--f1-teal-2); }
.f5__title .f5__dot { color: var(--f1-pink); font-style: normal; }
.f5__intro-lede { margin: clamp(18px, 2vh, 28px) 0 0; font-size: clamp(13px, 1vw, 16px); line-height: 1.6; color: var(--f1-muted); max-width: 360px; }
.f5__flow { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 28px); min-width: 0; }
.f5__flow .f5__row { flex: 0 0 auto; }
/* Embedded raster content inside the SVG assets. Render the SVGs natively at device resolution — NO crisp-edges (nearest-neighbour, reads rough) and, importantly, NO CSS filter / translateZ / backface layer hints. Those hints promote an <img src=*.svg> to a composited layer that gets rasterised once at layout size and then GPU-scaled, which blurs it on high-DPI screens and inside the transformed phone mockups — the file is crisp on its own, the blur only appeared once it was layer-promoted here. */
.p3-panel img, .p3-panel .f4wf__phone img, .p3-panel .f5__shot img, .p3-panel .f4icons--ref img, .p3-panel .f4icons--strip img, .p3-panel .f4metrics img, .p3-panel .f4illus img { image-rendering: auto; }
.f5__arrow { flex: 0 0 auto; width: clamp(80px, 6vw, 120px); height: clamp(80px, 6vw, 120px); display: block; align-self: center; background-color: var(--f1-teal-2); -webkit-mask: url("assets/fitness/arrow.svg") no-repeat center / contain; mask: url("assets/fitness/arrow.svg") no-repeat center / contain; }
.f5__arrow--2 { transform: scaleY(-1); }
.f5__intro { align-self: center; }
/* Intro line at top */
.f5__intro { display: flex; align-items: center; gap: 14px; }
.f5__intro::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f1-pink); flex-shrink: 0; }
.f5__intro p { margin: 0; font-size: 13.5px; color: var(--f1-muted); line-height: 1.55; font-weight: 400; }
/* Row layout */
.f5__row { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 26px); align-items: stretch; min-height: 0; }
.f5__row--reverse { flex-direction: column; }
.f5__row--reverse .f5__caption { order: 0; }
.f5__row--reverse .f5__shots { order: 1; }
/* Caption — serif title + pink dot + soft card */
.f5__caption h3 { margin: 0 0 clamp(8px, 1vw, 16px); font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(24px, 2.8vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: var(--f1-ink); }
.f5__caption h3::after { content: "."; color: var(--f1-pink); font-style: normal; }
.f5__caption p { margin: 0; font-size: clamp(11.5px, 0.85vw, 14px); line-height: 1.55; color: var(--f1-ink-2); background: var(--f1-surface); border: 1px solid var(--f1-border); border-radius: clamp(12px, 1vw, 18px); padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px); box-shadow: var(--f1-shadow-sm); max-width: 100%; }
/* Screens — clean white phone mockup frames */
.f5__shots { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 26px); position: relative; }
.f5__shot { background: #FFFFFF; border: 1px solid var(--f1-border); border-radius: clamp(18px, 1.6vw, 26px); padding: clamp(20px, 2vw, 32px) clamp(8px, 0.8vw, 14px) clamp(12px, 1.2vw, 18px); box-shadow: 0 14px 30px -16px rgba(14,31,55,.18), 0 4px 10px -6px rgba(14,31,55,.08); display: flex; align-items: center; justify-content: center; width: clamp(170px, 14.5vw, 240px); aspect-ratio: 9 / 17; height: auto; flex-shrink: 0; }
.f5__shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Responsive tightening */
@media (max-width: 1400px) {
  .f5__inner--screens { padding: 0 60px 0 130px; gap: 20px; }
  .f5__caption h3 { font-size: 32px; }
  .f5__shot img { height: 190px; }
}
/* Responsive */
@media (max-width: 1500px) {
  .f5__inner { padding: 0 40px 0 130px; gap: 32px; grid-template-columns: 580px 1fr; max-width: 100%; }
  .f5__title { font-size: 50px; }
}
@media (max-width: 1200px) {
  .f5__inner { grid-template-columns: 1fr; }
}
/* ========================================================= TOP NAV — Odidact/Ryujin-style bar in Fitness teal/navy ========================================================= */
.p3 .ftop { position: fixed; inset: 0 0 auto 0; z-index: 200; display: grid; grid-template-columns: 1fr auto; align-items: center; height: var(--p3-nav-h, 64px); padding: 0 clamp(22px, 3.4vw, 48px); font-family: "Roboto", sans-serif; pointer-events: none; }
.p3 .ftop::before { content: ""; position: absolute; inset: 0 0 -22px 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0.62), rgba(255,255,255,0.32) 55%, rgba(255,255,255,0)); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.p3 .ftop > * { pointer-events: auto; }
.p3 .ftop__star { justify-self: start; color: var(--f1-teal); font-size: 28px; font-weight: 900; line-height: 1; margin-top: -4px; text-decoration: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.p3 .ftop__star:hover { transform: rotate(90deg) scale(1.1); }
.p3 .ftop__links { justify-self: end; display: inline-flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.p3 .ftop__links a { position: relative; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--f1-ink); text-decoration: none; transition: color 0.25s; }
.p3 .ftop__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; background: var(--f1-teal); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.p3 .ftop__links a:hover { color: var(--f1-teal-2); }
.p3 .ftop__links a:hover::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .p3 .ftop { height: 56px; padding: 0 18px; }
  .p3 .ftop__star { font-size: 25px; }
  .p3 .ftop__links { gap: 16px; }
  .p3 .ftop__links a { font-size: 12.5px; }
}
/* ========================================================= MOBILE FIX (rebuilt f1–f5 structure) — supersedes the old block that targeted dead .p3-hero__* / .p3-grid-context names ========================================================= */
@media (max-width: 900px) {
  .p3-panel { padding: 64px 22px 52px !important; height: auto !important; min-height: 0 !important; }
  /* stack each section's primary layout into one column */
  .f1__inner, .f2__inner, .f2__toprow, .f3__inner, .f4__inner, .f5__inner, .f5__inner--screens { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; gap: clamp(26px, 6vw, 40px) !important; padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  /* titles down to mobile scale */
  .f1__title { font-size: clamp(34px, 9.4vw, 58px) !important; line-height: 1.05 !important; }
  .f2__title, .f3__title, .f4__title, .f5__title { font-size: clamp(28px, 8vw, 46px) !important; line-height: 1.08 !important; }
  /* style-guide section labels stay small (they're labels, not headings) */
  .f4ds__title { font-size: 12px !important; line-height: 1.3 !important; }
  .f1__lede, .f2__lede { max-width: 100% !important; }
  .f1__feats { grid-template-columns: minmax(0, 1fr) !important; max-width: 100% !important; gap: 16px !important; }
  /* hero phone fan -> single centred phone */
  .f1__right { justify-content: center !important; }
  /* generic: any inner card/persona/wireframe rows -> 1 column */
  .f2__cards, .f3ri__cards, .f3pers__row, .f4__left, .f4type__right { grid-template-columns: minmax(0, 1fr) !important; }
}
/* mobile structural fixes — stop dense panels expanding past the viewport */
@media (max-width: 900px) {
  .p3-panel { min-width: 0 !important; }
  .f1__inner, .f2__inner, .f2__toprow, .f3__inner, .f4__inner, .f5__inner, .f5__inner--screens { width: 100% !important; height: auto !important; min-width: 0 !important; }
  .f4__inner { row-gap: 42px !important; }
  .f4__col, .f4__col--1, .f4__col--2, .f4__col--3, .f4__left, .f4__board, .f4__board--full { min-width: 0 !important; width: 100% !important; }
  .f4__wires { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .f5__row, .f5__row--reverse { grid-template-columns: minmax(0, 1fr) !important; flex-direction: column !important; }
  .fbtn-row, .fbtn-row--pills, .fbtn-row--mix, .f4metrics--row, .f4illus--row { flex-wrap: wrap !important; }
}
/* f3/f4/f5 panels are extra-wide for the desktop track — collapse them on mobile */
@media (max-width: 900px) {
  .p3-panel.f3, .p3-panel.f4, .p3-panel.f5 { width: 100% !important; }
}
/* f4 Style-Guide board: flatten the 3-column grid-poster into one stacked column on mobile */
@media (max-width: 900px) {
  .f4__col--3 .f4__board--full { display: flex !important; flex-direction: column !important; gap: 30px !important; height: auto !important; }
  .f4__col--3 .f4__board--full .f4ds__row { display: flex !important; flex-direction: column !important; gap: 30px !important; }
  .f4__col--3 .f4__board--full .f4ds__header, .f4__col--3 .f4__board--full .f4ds__sec, .f4__col--3 .f4__board--full .f4__col2-stack, .f4__col--3 .f4__board--full .f4__col3-stack { grid-column: auto !important; grid-row: auto !important; width: 100% !important; }
}
/* f5 screens: stack the horizontal "scroll across" flow into a vertical sequence */
@media (max-width: 900px) {
  .f5__inner--screens { grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; row-gap: 30px !important; }
  .f5__hero { align-self: start !important; }
  .f5__intro-lede { max-width: 100% !important; }
  .f5__flow { flex-direction: column !important; align-items: stretch !important; gap: 26px !important; }
  .f5__flow .f5__row { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; width: 100% !important; }
  .f5__flow .f5__row--reverse { flex-direction: column-reverse !important; }
  .f5__caption { max-width: 100% !important; }
  .f5__shots { justify-content: center !important; }
  .f5__arrow { width: 40px !important; height: 40px !important; transform: rotate(90deg) !important; margin: 2px auto !important; align-self: center !important; }
  .f5__arrow--2 { transform: rotate(90deg) scaleY(-1) !important; }
}
/* f2 design-process steps: 4-up grid -> single column on mobile */
@media (max-width: 900px) {
  .f2steps { grid-template-columns: 1fr !important; gap: 20px !important; }
  .f2process { padding: 22px 20px 24px !important; }
}
/* Next-project corner sign-off (fitness teal) — matches the other case studies */
.p3 .f-next { position: absolute; right: clamp(50px, 4vw, 96px); bottom: clamp(40px, 5vh, 66px); display: grid; grid-template-columns: auto auto; grid-template-areas: "label arrow" "name arrow"; align-items: center; column-gap: 18px; row-gap: 2px; z-index: 6; text-decoration: none; }
.p3 .f-next span { grid-area: label; }
.p3 .f-next strong { grid-area: name; }
.p3 .f-next i { grid-area: arrow; }
.p3 .f-next span { display: block; color: var(--f1-teal-2); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.p3 .f-next strong { display: block; color: var(--f1-ink); font-family: 'Fraunces', serif; font-size: 30px; font-weight: 400; transition: color .3s ease; }
.p3 .f-next i { position: relative; grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--f1-teal-2); color: var(--f1-teal-2); font-style: normal; font-size: 0; line-height: 0; transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.p3 .f-next i::before, .p3 .f-next i::after { content: ""; position: absolute; left: 50%; top: 50%; display: block; }
.p3 .f-next i::before { width: 15px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); }
.p3 .f-next i::after { width: 7px; height: 7px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: translate(calc(-50% + 5px), -50%) rotate(45deg); }
.p3 .f-next:hover i { background: var(--f1-teal-2); color: #fff; transform: translateX(3px); }
.p3 .f-next:hover strong { color: var(--f1-teal-2); }
@media (max-width: 900px) {
  .p3 .f-next { position: static; margin-top: clamp(52px, 7vh, 64px); }
}
/* mobile: the f5 panel now has 2 children (inner + next-project link) — stack them */
@media (max-width: 900px) {
  .p3-panel.f5--screens { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; }
  .p3 .f-next { justify-content: flex-start; }
}
/* First paint guard: the existing GSAP intro owns these elements, so keep them quiet until the motion setup has applied its initial states. */
.p3:not(.is-motion-ready) .f1__title, .p3:not(.is-motion-ready) .f1__lede, .p3:not(.is-motion-ready) .f1__feat, .p3:not(.is-motion-ready) .f1__meta, .p3:not(.is-motion-ready) .f1ph { opacity: 0; }
@media (max-width: 900px) {
  .f1__inner { gap: clamp(24px, 7vw, 36px) !important; }
  .f1__right { --f1-center-w: min(210px, 55vw); position: relative !important; display: block !important; width: min(calc(100vw - 44px), 332px) !important; height: clamp(452px, 122vw, 548px) !important; margin: 4px auto 0 !important; }
  .f1ph { padding: 7px !important; border-radius: 34px !important; }
  .f1ph__screen { border-radius: 28px !important; }
  /* Two-phone duo (the 3rd phone was removed): a balanced, group-centred pair.
     The detailed Dashboard sits front and slightly right; the Workouts splash
     tucks behind to the left. Mirrored tilts so it reads as an intentional pair
     rather than one phone with a leftover slab beside it. */
  .f1ph--left { display: block !important; position: absolute !important; }
  .f1ph--center { position: absolute !important; left: 50% !important; top: 30px !important; width: var(--f1-center-w) !important; height: auto !important; aspect-ratio: 296 / 620 !important; margin-left: calc(var(--f1-center-w) / -2 + 22px) !important; transform: rotate(2.5deg) !important; z-index: 3 !important; }
  .f1ph--left { left: 50% !important; top: 18px !important; width: min(170px, 45vw) !important; height: auto !important; aspect-ratio: 248 / 520 !important; margin-left: calc(min(170px, 45vw) / -2 - 60px) !important; transform: rotate(-11deg) !important; z-index: 1 !important; opacity: 1; }
  .f1ph__notch { top: 12px !important; width: 70px !important; height: 16px !important; }
  .f1ph--left.f1ph--shot .f1ph__shot-img { width: 125.5% !important; height: 104.5% !important; left: -14.2% !important; top: -2.2% !important; }
  .f1ph--center.f1ph--shot .f1ph__shot-img { width: 142.5% !important; height: 117.5% !important; left: -22.5% !important; top: -7.8% !important; }
  .f1ph--right.f1ph--shot .f1ph__shot-img { width: 141.8% !important; height: 115.2% !important; left: -26% !important; top: -5.2% !important; }
}
/* Final mobile continuity pass. Keep this at the end so later hero-specific mobile rules cannot reintroduce hard breaks between sections. */
@media (max-width: 900px) {
  body.p3 { background: #F0F4F8; }
  .p3-track { padding-top: 56px !important; overflow: hidden; background: radial-gradient(ellipse 78vw 34vh at 92% 7%, rgba(32,201,176,0.13), transparent 68%), radial-gradient(ellipse 82vw 36vh at -14% 24%, rgba(242,97,129,0.075), transparent 70%), radial-gradient(ellipse 78vw 36vh at 98% 48%, rgba(32,201,176,0.10), transparent 68%), radial-gradient(ellipse 84vw 38vh at -18% 72%, rgba(242,97,129,0.065), transparent 70%), linear-gradient(180deg, #F0F4F8 0%, #F5F8FB 34%, #EEF5F6 66%, #F1F5F8 100%) !important; }
  .p3-track::before { opacity: 0.22; }
  .p3-panel { position: relative; isolation: isolate; background: transparent !important; padding-top: clamp(34px, 8vw, 52px) !important; padding-bottom: clamp(34px, 8vw, 52px) !important; margin: 0 !important; overflow: visible; }
  .p3-panel::before, .p3-panel::after { display: none; }
  .p3-panel > * { position: relative; z-index: 3; }
  .p3-panel.f1 { padding-bottom: clamp(34px, 8vw, 52px) !important; }
  .p3-panel + .p3-panel { margin-top: 0 !important; padding-top: clamp(34px, 8vw, 52px) !important; }
  .f2process, .f2card, .f3ri__card, .f3pers__card, .f4__board, .f4wf, .f5__shot { box-shadow: 0 22px 46px -34px rgba(14, 31, 55, 0.28), 0 0 42px rgba(240, 244, 248, 0.58) !important; }
  .f1__bg { background: transparent !important; }
  .f2__inner, .f3__inner, .f4__inner, .f5__inner, .f5__inner--screens { position: relative; z-index: 1; }
}
/* Final desktop continuity pass. This must stay after the section-specific Fitness rules because f3/f4/f5 set their own height later in the file. */
@media (min-width: 901px) {
  .p3-panel { --p3-edge-feather: clamp(54px, 5.8vw, 96px); -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 var(--p3-edge-feather), #000 calc(100% - var(--p3-edge-feather)), transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0, #000 var(--p3-edge-feather), #000 calc(100% - var(--p3-edge-feather)), transparent 100% ); }
  .p3-panel.f1, .p3-panel.f2, .p3-panel.f3, .p3-panel.f4, .p3-panel.f5 { overflow: hidden !important; }
  .f1__bg { background: transparent !important; }
  .p3-panel.f3, .p3-panel.f4, .p3-panel.f5 { height: 100vh !important; min-height: 0 !important; max-height: 100vh !important; }
  .p3-panel.f2, .p3-panel.f3, .p3-panel.f4, .p3-panel.f5 { margin-left: 0 !important; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .f2__inner, .f3__inner, .f4__inner { padding-top: calc(var(--p3-nav-h) + 8px) !important; }
  .f2__inner { padding-bottom: 24px !important; }
  .f3__inner { padding-bottom: 18px !important; row-gap: 16px !important; }
  .f3__title { font-size: clamp(42px, 3.8vw, 50px) !important; }
  .f3__lede { margin-top: 14px !important; font-size: 12.5px !important; line-height: 1.52 !important; }
  .f3__col--left, .f3__col--right { gap: 16px !important; }
  .f3ri__card { min-height: 138px !important; padding: 14px 12px !important; }
  .f3ri__ring { width: 50px !important; height: 50px !important; }
  .f4__inner { padding-bottom: 28px !important; }
  .f4__title { font-size: clamp(36px, 3.4vw, 44px) !important; }
  .f4__lede { font-size: 12.5px !important; line-height: 1.52 !important; }
  .f4__col { gap: 14px !important; }
  .f4wf img { max-height: 200px !important; }
  .f4__col--3 .f4__board--full { row-gap: 8px !important; column-gap: 32px !important; }
}