.flex-case { --flex-coral: #dd7358; --flex-cream: #f4f0e7; --flex-ink: #151a1d; }
.flex-hero { background: var(--flex-coral); }
.flex-case .case-header { color: var(--navy-deep); }
.flex-case .case-hero h1 { color: var(--navy-deep); }
.flex-case .case-hero h1 em { color: var(--paper); }
.flex-case .case-kicker { border-color: rgba(10,28,49,.24); color: rgba(10,28,49,.66); }
.flex-case .company-badge { margin-top: -34px; }
.flex-brand { background: var(--navy-deep); color: white; }
.flex-case .case-summary dl div { border-color: rgba(10,28,49,.25); }
.flex-case .case-summary dt { color: rgba(10,28,49,.58); }

.flex-system-cover { position: relative; min-height: 820px; padding: clamp(80px, 10vw, 150px) var(--pad); overflow: hidden; background: var(--navy-deep); color: white; }
.flex-system-cover::before { content: "FLEX"; position: absolute; right: -2vw; bottom: -10vw; color: rgba(255,255,255,.035); font-family: var(--display); font-size: clamp(220px, 34vw, 560px); font-weight: 600; letter-spacing: -.09em; line-height: 1; }
.system-cover-heading { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.system-cover-heading > span { color: var(--flex-coral); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.system-cover-heading strong { max-width: 780px; font-family: var(--display); font-size: clamp(48px, 6.4vw, 96px); font-weight: 500; letter-spacing: -.06em; line-height: .96; }
.system-route { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: clamp(140px, 19vw, 260px); }
.system-route .route-line { position: absolute; top: 25px; left: 4%; right: 4%; height: 1px; background: rgba(255,255,255,.28); }
.system-route > div { position: relative; display: flex; flex-direction: column; min-height: 160px; padding-top: 68px; }
.system-route > div::before { content: ""; position: absolute; top: 18px; left: 0; width: 15px; height: 15px; border: 7px solid var(--navy-deep); border-radius: 50%; background: var(--flex-coral); box-shadow: 0 0 0 1px rgba(255,255,255,.42); }
.system-route i { color: var(--flex-coral); font-size: .75rem; font-style: normal; }
.system-route b { margin-top: 14px; font-family: var(--display); font-size: clamp(20px, 2vw, 31px); font-weight: 500; }
.system-route small { margin-top: 7px; color: rgba(255,255,255,.48); }

.flex-metrics strong { white-space: nowrap; }
.flex-metrics strong > span { display: inline; margin: 0; color: rgba(255,255,255,.38); font: inherit; }

.flex-system { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(40px, 7vw, 110px); min-height: 820px; padding-top: clamp(100px, 12vw, 170px); padding-bottom: clamp(100px, 12vw, 170px); background: var(--flex-cream); }
.flex-system-menu { align-self: center; border-top: 1px solid var(--line); }
.flex-system-menu button { display: grid; grid-template-columns: 42px 1fr; width: 100%; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--navy); text-align: left; cursor: pointer; }
.flex-system-menu button > span { grid-row: span 2; color: var(--flex-coral); font-size: .75rem; }
.flex-system-menu strong { font-family: var(--display); font-size: 24px; font-weight: 500; transition: color .25s ease, transform .25s ease; }
.flex-system-menu small { margin-top: 3px; color: var(--muted); }
.flex-system-menu button:hover strong, .flex-system-menu button:focus-visible strong, .flex-system-menu button[aria-selected="true"] strong { color: var(--flex-coral); transform: translateX(7px); }
.flex-system-stage { position: relative; align-self: center; min-height: 590px; }
.flex-system-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 5vw, 75px); background: var(--paper); box-shadow: 0 25px 70px rgba(10,28,49,.09); animation: flex-panel-in .55s cubic-bezier(.2,.7,.2,1) both; }
.flex-system-panel[hidden] { display: none; }
.flex-system-panel h3 { max-width: 680px; margin: 25px 0; color: var(--navy); font-family: var(--display); font-size: clamp(42px, 5.2vw, 76px); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.flex-system-panel > p:not(.case-label) { max-width: 680px; color: var(--muted); font-size: 17px; line-height: 1.65; }
@keyframes flex-panel-in { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }

.program-map { display: flex; gap: 5px; align-items: stretch; margin-top: 55px; }
.program-map span { flex: var(--share); min-width: 0; padding: 18px 12px; background: var(--navy); color: white; }
.program-map b, .program-map small { display: block; }
.program-map b { color: var(--flex-coral); font-size: .75rem; }
.program-map small { margin-top: 26px; white-space: nowrap; }
.week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 55px 0 0; padding: 0; list-style: none; }
.week-grid li { min-height: 115px; padding: 15px 12px; background: var(--navy); color: white; }
.week-grid span, .week-grid b { display: block; }
.week-grid span { color: var(--flex-coral); font-size: .75rem; }
.week-grid b { margin-top: 42px; font-family: var(--display); font-size: 15px; font-weight: 500; }
.feedback-loop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 55px; }
.feedback-loop span { padding: 14px 18px; background: var(--navy); color: white; font-size: 12px; }
.feedback-loop i { color: var(--flex-coral); font-style: normal; }
.measurement-card { display: grid; grid-template-columns: 1fr auto; gap: 14px 30px; align-items: end; margin-top: 52px; padding: 26px; background: var(--navy); color: white; }
.measurement-card > span { color: rgba(255,255,255,.58); font-size: 12px; }
.measurement-card strong { grid-row: span 2; color: var(--flex-coral); font-family: var(--display); font-size: clamp(48px, 6vw, 82px); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.measurement-card strong i { padding: 0 7px; color: white; font-style: normal; }
.measurement-card small { color: rgba(255,255,255,.48); }

.format-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(45px, 8vw, 130px); padding-top: clamp(110px, 14vw, 190px); padding-bottom: clamp(110px, 14vw, 190px); background: var(--navy-deep); color: white; }
.format-intro { align-self: center; }
.format-intro h2 { margin: 26px 0; font-family: var(--display); font-size: clamp(46px, 5.7vw, 86px); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.format-intro > p:not(.case-label) { max-width: 520px; color: rgba(255,255,255,.58); }
.format-cards { display: grid; gap: 18px; }
.format-cards article { position: relative; min-height: 360px; padding: clamp(35px, 5vw, 65px); overflow: hidden; }
.format-cards article > span { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.format-cards h3 { margin: 25px 0 18px; font-family: var(--display); font-size: clamp(55px, 8vw, 110px); font-weight: 600; letter-spacing: -.075em; line-height: .85; }
.format-cards p { position: relative; z-index: 1; max-width: 520px; margin: 0; line-height: 1.65; }
.format-build { background: var(--flex-coral); color: var(--navy-deep); }
.format-breathe { background: var(--green); color: white; }
.format-graphic { position: absolute; right: -2%; bottom: -12%; display: flex; gap: 8px; align-items: end; height: 70%; transform: rotate(-8deg); opacity: .17; }
.format-graphic i { width: 23px; height: calc(35% + var(--n, 0) * 12%); background: var(--navy-deep); }
.format-graphic i:nth-child(1) { --n: 1; }.format-graphic i:nth-child(2) { --n: 3; }.format-graphic i:nth-child(3) { --n: 5; }.format-graphic i:nth-child(4) { --n: 2; }.format-graphic i:nth-child(5) { --n: 4; }
.breathe-graphic { position: absolute; right: -3%; bottom: 14%; display: flex; gap: 18px; align-items: center; opacity: .16; }
.breathe-graphic i { width: 14px; height: 14px; border: 4px solid white; border-radius: 50%; }
.breathe-graphic i:nth-child(2), .breathe-graphic i:nth-child(6) { width: 35px; height: 35px; }.breathe-graphic i:nth-child(3), .breathe-graphic i:nth-child(5) { width: 62px; height: 62px; }.breathe-graphic i:nth-child(4) { width: 95px; height: 95px; }
.flex-takeaway { background: var(--paper); }

@media (max-width: 900px) {
  .system-cover-heading { flex-direction: column; }
  .system-route { grid-template-columns: 1fr; margin-top: 95px; }
  .system-route .route-line { top: 0; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .system-route > div { min-height: 120px; padding: 0 0 0 45px; }
  .system-route > div::before { top: 0; }
  .flex-system, .format-section { grid-template-columns: 1fr; }
  .flex-system-stage { min-height: 640px; }
}

@media (max-width: 760px) {
  .flex-system-cover { min-height: 0; }
  .flex-system-stage { min-height: 690px; }
  .flex-system-panel { padding: 35px 24px; }
  .program-map { display: grid; grid-template-columns: 1fr 1fr; }
  .week-grid { grid-template-columns: 1fr; }
  .week-grid li { min-height: 70px; }
  .week-grid b { margin-top: 18px; }
  .measurement-card { grid-template-columns: 1fr; }
  .measurement-card strong { grid-row: auto; }
  .format-cards article { min-height: 330px; }
}

.flex-metrics strong { font-size: clamp(30px,4vw,60px); }

.flex-system-stage { min-height: 0; }
.flex-system-panel { position: relative; inset: auto; min-height: 540px; }