/* FM-200 course (/services/fire-suppression/how-it-works).
   Same ink / paper / Playfair + Space Grotesk language as the service pages (main.css "v8"). */

/* the hero runs straight into the navy player section: no closing rule between them */
.fmt-hero { padding-bottom: 40px !important; border-bottom: 0 !important; }
.fmt-nowrap { white-space: nowrap; }
.fmt-hero p { color: rgba(231,237,244,0.6); font-size: 17px; max-width: 600px; line-height: 1.7; }
/* two lines, "How an FM-200 system / puts out a fire", instead of three with "fire" left alone */
.services-hero.fmt-hero h1 { max-width: 22ch !important; text-wrap: balance; font-size: clamp(40px, 5.6vw, 84px) !important; }

.fmt-stage-wrap { background: #0E2A47; padding: 0 0 clamp(56px, 7vw, 96px); }

.fmt {
  --fmt-ink: #0E2A47;
  --fmt-bar: #0A1E33;
  --fmt-line: rgba(231,237,244,0.1);
  --fmt-text: #F4F2EC;
  --fmt-muted: rgba(231,237,244,0.58);
  --fmt-accent: #7FA8D8;
  --fmt-fire: #E0442B;
  --fmt-yellow: #F2C230;
  --fmt-ease: cubic-bezier(.22,1,.36,1);
  border-radius: 20px; overflow: hidden;
  background: var(--fmt-bar);
  border: 1px solid var(--fmt-line);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6);
  /* the whole player fits one screen under the site header: controls on top, then the 3D view */
  display: flex; flex-direction: column;
  height: min(calc(100svh - 104px), 900px); min-height: 520px;
  scroll-margin-top: 92px;
}

/* ── Top bar: scenarios on the left, step count and transport on the right ── */
.fmt-top {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--fmt-line); flex: 0 0 auto;
}
.fmt-controls { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.fmt-count { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.1; }
.fmt-num { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--fmt-text); font-variant-numeric: tabular-nums; }
.fmt-phase { font-family: var(--f-display); font-size: 11.5px; font-weight: 500; color: var(--fmt-fire); }

/* ── Scenario tabs ── */
.fmt-scenarios {
  display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.fmt-scenarios::-webkit-scrollbar { display: none; }
@media (max-width: 1199px) {
  .fmt-scenarios {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    padding-inline-end: 28px;
  }
  html[dir="rtl"] .fmt-scenarios {
    -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(270deg, #000 calc(100% - 36px), transparent);
  }
}
.fmt-scn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; scroll-snap-align: start;
  padding: 8px 14px 8px 8px; border-radius: 100px; border: 1px solid transparent;
  background: transparent; color: var(--fmt-muted); cursor: pointer;
  font-family: var(--f-display); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .3s var(--fmt-ease), color .3s, border-color .3s;
}
.fmt-scn:hover { color: var(--fmt-text); background: rgba(127,168,216,0.08); }
.fmt-scn[aria-selected="true"] { color: var(--fmt-text); background: rgba(127,168,216,0.14); border-color: rgba(127,168,216,0.35); }
.fmt-scn-n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; background: rgba(231,237,244,0.1); color: var(--fmt-text);
}
.fmt-scn[aria-selected="true"] .fmt-scn-n { background: var(--fmt-text); color: var(--fmt-ink); }
.fmt-scn-done { display: none; width: 16px; height: 16px; fill: none; stroke: #5BC08A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fmt-scn.is-done .fmt-scn-done { display: block; }
.fmt-scn.is-done .fmt-scn-n { background: #2F8F5E; color: #fff; }
.fmt-course-progress {
  margin-inline-start: auto; padding-inline: 10px; flex: 0 0 auto;
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.06em; color: rgba(231,237,244,0.45); white-space: nowrap;
}

/* ── Stage ── */
.fmt-view { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fmt-stage {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  /* black stage, as the scene's own background, so the player never flashes another colour while it loads */
  background: #000;
  overflow: hidden; touch-action: pan-y;
}
/* alarm: the backdrop warms to red while the bell or sounder runs (--fmt-alarm set by the scene, 0 to 1) */
.fmt-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--fmt-alarm, 0);
  background: radial-gradient(110% 80% at 50% 0%, rgba(224,68,43,0.22), rgba(224,68,43,0.06) 60%, rgba(224,68,43,0) 100%);
}
.fmt[data-explore="true"] .fmt-stage { touch-action: none; }
.fmt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.fmt-stage.is-cut .fmt-canvas { animation: fmt-cut .45s ease-out; }
@keyframes fmt-cut { from { opacity: 0; } }
.fmt-stage.is-pointer .fmt-canvas { cursor: pointer; }

.fmt-loading {
  position: absolute; inset: 0; display: flex; gap: 12px; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 14px; color: #A9BCD0; transition: opacity .5s;
}
.fmt:not([data-state="loading"]) .fmt-loading { opacity: 0; pointer-events: none; }
.fmt-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(231,237,244,0.18); border-top-color: var(--fmt-text);
  animation: fmt-spin 0.9s linear infinite;
}
@keyframes fmt-spin { to { transform: rotate(360deg); } }
.fmt-nogl {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; font-family: var(--f-display); color: #A9BCD0;
}
.fmt[data-state="nogl"] { height: auto; }
.fmt[data-state="nogl"] .fmt-stage { flex: 0 0 auto; min-height: 160px; }

/* HUD: zone tags (like the presentation video) and system status chips */
.fmt-hud { position: absolute; top: 16px; inset-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.fmt-zone {
  font-family: var(--f-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 32px); line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.fmt-zone .z1 { color: #4D7CFF; }
.fmt-zone .z2 { color: #FF4D4D; margin-inline-start: 18px; }
.fmt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 100px;
  font-family: var(--f-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(10,30,51,0.72); color: var(--fmt-text); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(231,237,244,0.14); animation: fmt-in .45s var(--fmt-ease);
}
.fmt-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fmt-chip.is-auto { color: #6FD39C; }
.fmt-chip.is-manual { color: #FFC24A; }
.fmt-chip.is-battery { color: #FFC24A; }
.fmt-chip.is-fault { color: #FF6A55; }
@keyframes fmt-in { from { opacity: 0; transform: translateY(6px); } }

/* Panel mirror: the EP203's LCD and only the lamps that are lit, large enough to read in any shot */
.fmt-mirror {
  width: 224px; padding: 10px 12px 12px; border-radius: 12px;
  background: rgba(236,238,234,0.94); color: #1C2B3A; box-shadow: 0 14px 30px -14px rgba(0,0,0,0.6);
  animation: fmt-in .4s var(--fmt-ease);
}
.fmt-mirror-name { display: block; font-family: var(--f-display); font-size: 11px; font-weight: 600; color: #3E6FB0; margin-bottom: 6px; }
.fmt-mirror-lcd {
  display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; background: #5ea8e8; color: #0a2440;
  font-family: "Courier New", ui-monospace, monospace; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 3px #20282e;
}
.fmt-mirror[data-tone="alarm"] .fmt-mirror-lcd { background: #7cc0ff; }
.fmt-mirror-lcd span:first-child { font-size: 15px; }
.fmt-mirror-lcd span:last-child { font-size: 13px; min-height: 1.15em; }
.fmt-mirror-leds { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.fmt-mirror-leds li { display: none; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 12px; font-weight: 500; color: #26323a; }
.fmt-mirror-leds li.is-on, .fmt-mirror-leds li.is-flash { display: flex; }
.fmt-mirror-leds li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--c); box-shadow: 0 0 6px var(--c); }
.fmt-mirror-leds li[data-c="red"] { --c: #ff2a20; }
.fmt-mirror-leds li[data-c="yellow"] { --c: #f5a400; }
.fmt-mirror-leds li[data-c="green"] { --c: #2fd06a; }
.fmt-mirror-leds li.is-flash::before { animation: fmt-led 0.9s steps(2, jump-none) infinite; }
@keyframes fmt-led { 50% { opacity: 0.2; box-shadow: none; } }

/* Countdown LCD, like the EP203 delay display enlarged in the video */
.fmt-lcd {
  position: absolute; top: 16px; inset-inline-end: 16px;
  background: linear-gradient(180deg, #A8C255 0%, #8EAA3C 100%);
  border: 3px solid #E9ECE4; border-radius: 10px;
  padding: 4px 18px; min-width: 96px; text-align: center;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.25), 0 10px 30px -10px rgba(0,0,0,0.6);
}
.fmt-lcd-num {
  font-family: "Courier New", ui-monospace, monospace; font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; color: #26320F; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.fmt-lcd.is-held { animation: fmt-blink 0.8s steps(2, jump-none) infinite; }
.fmt-lcd.is-tick { animation: fmt-tick 0.25s ease-out; }
@keyframes fmt-blink { 50% { opacity: 0.45; } }
@keyframes fmt-tick { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }

.fmt-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 70% at 50% 20%, rgba(255,40,30,0.28), rgba(255,40,30,0) 70%);
}

/* "Your move": the learner's action (hold-off, manual release, key switch, lever…) */
.fmt-move {
  position: absolute; bottom: 28px; inset-inline-end: 20px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  animation: fmt-in .5s var(--fmt-ease);
}
.fmt-move-label {
  font-family: var(--f-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fmt-yellow); text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.fmt-act {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px; border-radius: 100px; border: 0;
  background: var(--fmt-yellow); color: #1C1A12;
  font-family: var(--f-display); font-weight: 600; font-size: 15px; white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.6);
  user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer;
  transition: transform .2s var(--fmt-ease), background .2s;
}
.fmt-act:hover { background: #FFD24F; }
.fmt-act:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fmt-act-ring {
  width: 34px; height: 34px; border-radius: 50%; background: #F7D64A;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25), 0 0 0 4px rgba(255,255,255,0.65);
  animation: fmt-pulse 1.4s ease-in-out infinite;
}
.fmt-act[data-kind="release"] .fmt-act-ring { background: #1C1C1C; box-shadow: inset 0 0 0 9px #fff, 0 0 0 4px rgba(255,255,255,0.65); }
.fmt-act[data-kind="lever"] .fmt-act-ring { background: #C9A043; }
.fmt-act[data-kind="key"] .fmt-act-ring { background: #9AA3AD; }
.fmt-act[data-kind="abort"] .fmt-act-ring { background: #E0442B; }
.fmt-act[data-kind="spray"] .fmt-act-ring { background: #C3161C; }
.fmt-act.is-down { transform: scale(0.94); background: #FFD54A; }
.fmt-act.is-down .fmt-act-ring { animation: none; box-shadow: inset 0 3px 4px rgba(0,0,0,0.35), 0 0 0 4px #fff; }
@keyframes fmt-pulse { 50% { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25), 0 0 0 10px rgba(255,255,255,0.12); } }

/* Tools: full screen, sound, free view. They sit in the control bar so nothing covers the room */
.fmt-tools {
  display: flex; align-items: center; gap: 2px;
  padding-inline-end: 12px; border-inline-end: 1px solid var(--fmt-line);
}
.fmt-tool {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent;
  background: transparent; color: var(--fmt-muted); display: grid; place-items: center; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.fmt-tool:hover { background: rgba(127,168,216,0.12); color: var(--fmt-text); }
.fmt-tool:focus-visible, .fmt-btn:focus-visible, .fmt-scn:focus-visible { outline: 2px solid var(--fmt-accent); outline-offset: 2px; }
.fmt-tool[aria-pressed="true"] { background: var(--fmt-accent); border-color: var(--fmt-accent); color: #0E2A47; }
.fmt-tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmt-tool[data-act="sound"] .fmt-wave { display: none; }
.fmt-tool[data-act="sound"][aria-pressed="true"] .fmt-wave { display: inline; }
.fmt-tool[data-act="sound"][aria-pressed="true"] .fmt-mute { display: none; }
.fmt-tool .fmt-fs-out { display: none; }
.fmt-tool[aria-pressed="true"] .fmt-fs-in { display: none; }
.fmt-tool[aria-pressed="true"] .fmt-fs-out { display: inline; }

/* Part card (tap a 3D part) */
.fmt-card {
  position: absolute; left: 16px; top: 64px; z-index: 4;
  display: flex; gap: 14px; align-items: flex-start;
  width: min(380px, calc(100% - 32px)); padding: 14px 40px 14px 14px;
  background: rgba(244,242,236,0.97); color: #1C2B3A; border-radius: 16px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6);
  animation: fmt-card-in .45s var(--fmt-ease);
}
html[dir="rtl"] .fmt-card { left: auto; right: 16px; padding: 14px 14px 14px 40px; }
@keyframes fmt-card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.fmt-card-img { width: 84px; height: 84px; object-fit: contain; background: #fff; border-radius: 12px; flex-shrink: 0; }
.fmt-card-model { font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #3E6FB0; }
.fmt-card-name { font-family: var(--f-serif); font-weight: 500; font-size: 20px; margin: 2px 0 4px; color: #14365A; }
.fmt-card-role { font-size: 13.5px; line-height: 1.5; margin: 0 0 8px; color: #5A6675; }
.fmt-card-link { font-family: var(--f-display); font-size: 13px; font-weight: 600; color: #3E6FB0; text-decoration: none; }
.fmt-card-link:hover { color: #14365A; }
html[dir="rtl"] .fmt-card-link span { display: inline-block; transform: scaleX(-1); }
.fmt-card-close {
  position: absolute; top: 6px; inset-inline-end: 8px; width: 30px; height: 30px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: #6E7C8C; cursor: pointer; border-radius: 50%;
}
.fmt-card-close:hover { background: rgba(28,43,58,0.08); }

/* End of scenario: one quick question, then the three things to remember */
.fmt-end {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px;
  background: rgba(8,22,38,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fmt-fade .4s ease-out;
}
@keyframes fmt-fade { from { opacity: 0; } }
.fmt-end-box {
  width: min(520px, 100%); max-height: 100%; overflow: auto;
  background: #F4F2EC; color: #1C2B3A; border-radius: 20px; padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7); animation: fmt-card-in .5s var(--fmt-ease);
}
.fmt-end-title { margin: 0 0 6px; font-family: var(--f-display); font-size: 13.5px; font-weight: 600; color: #2F8F5E; }
.fmt-end-q { margin: 0 0 18px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; color: #14365A; text-wrap: balance; }
.fmt-end-opts { display: grid; gap: 10px; }
.fmt-end-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; text-align: start;
  padding: 10px 16px 10px 10px; border-radius: 14px; border: 1.5px solid rgba(28,43,58,0.14); background: #fff;
  font-family: var(--f-display); font-size: 16px; font-weight: 500; color: #1C2B3A; cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s var(--fmt-ease);
}
.fmt-end-letter {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: #E8EEF5; color: #3E6FB0; font-size: 14px; font-weight: 700;
}
.fmt-end-opt:hover:not(:disabled) { border-color: #3E6FB0; transform: translateY(-1px); }
.fmt-end-opt:focus-visible { outline: 3px solid #3E6FB0; outline-offset: 2px; }
.fmt-end-opt:disabled { cursor: default; opacity: 0.55; }
.fmt-end-opt.is-right { opacity: 1; border-color: #2F8F5E; background: #E5F4EC; }
.fmt-end-opt.is-right .fmt-end-letter { background: #2F8F5E; color: #fff; }
.fmt-end-opt.is-wrong { opacity: 1; border-color: #D9442B; background: #FBE9E5; }
.fmt-end-opt.is-wrong .fmt-end-letter { background: #D9442B; color: #fff; }
.fmt-end-result { margin-top: 16px; animation: fmt-in .4s var(--fmt-ease); }
.fmt-end-fb { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #44515F; }
.fmt-end-fb strong { color: #2F8F5E; }
.fmt-end-fb[data-right="false"] strong { color: #C2381F; }
.fmt-end-label { display: block; margin-bottom: 6px; font-family: var(--f-display); font-size: 13px; font-weight: 600; color: #3E6FB0; }
.fmt-end-take { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fmt-end-take li { position: relative; padding-inline-start: 22px; font-size: 14.5px; line-height: 1.45; color: #1C2B3A; }
.fmt-end-take li::before {
  content: ''; position: absolute; inset-inline-start: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: #3E6FB0;
}
.fmt-end-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.fmt-end-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; border-radius: 100px; border: 1px solid rgba(28,43,58,0.2); background: transparent; color: #14365A;
  font-family: var(--f-display); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .25s, color .25s;
}
.fmt-end-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fmt-end-btn:hover { background: rgba(62,111,176,0.08); }
.fmt-end[data-answered="false"] .fmt-end-next { opacity: 0.6; }
.fmt-end-next { background: #0E2A47; border-color: #0E2A47; color: #F4F2EC; }
.fmt-end-next:hover { background: #14365A; }
html[dir="rtl"] .fmt-end-next svg { transform: scaleX(-1); }

.fmt-hint {
  position: absolute; bottom: 18px; inset-inline-end: 16px; margin: 0; pointer-events: none;
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.04em; color: rgba(14,42,71,0.6);
  opacity: 0; transition: opacity .4s;
}
.fmt[data-step="layout"]:not([data-explore="true"]) .fmt-hint { opacity: 1; }

/* Free view: how to move, and the way back, under the caption (never over the room) */
.fmt-explore-note {
  display: none; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--fmt-line);
  font-family: var(--f-display); font-size: 12.5px; color: var(--fmt-muted);
}
.fmt[data-explore="true"] .fmt-explore-note { display: flex; }
.fmt-explore-exit {
  flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 100px;
  border: 1px solid rgba(127,168,216,0.45); background: rgba(127,168,216,0.12); color: var(--fmt-text);
  font-family: var(--f-display); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .25s;
}
.fmt-explore-exit:hover { background: rgba(127,168,216,0.24); }
.fmt-explore-exit:focus-visible { outline: 2px solid var(--fmt-accent); outline-offset: 2px; }

/* ── Caption: a lower third on the 3D view, like the reference video ── */
.fmt-caption {
  position: absolute; inset-inline-start: 18px; bottom: 26px; z-index: 2;
  width: min(480px, calc(100% - 36px));
  padding: 14px 18px 12px; border-radius: 14px;
  background: rgba(8,22,38,0.8); border: 1px solid rgba(231,237,244,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
}
.fmt-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; color: var(--fmt-text); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.fmt-sub { font-family: var(--f-body); font-size: 15px; line-height: 1.45; color: rgba(231,237,244,0.82); margin: 4px 0 0; }
.fmt-why {
  margin-top: 6px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--f-display); font-size: 13px; font-weight: 600; color: var(--fmt-accent);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.fmt-why[aria-expanded="true"] { color: var(--fmt-muted); }
.fmt-why:focus-visible { outline: 2px solid var(--fmt-accent); outline-offset: 2px; border-radius: 4px; }
.fmt-body { font-family: var(--f-body); font-size: 14px; line-height: 1.55; color: var(--fmt-muted); margin: 4px 0 2px; }
.fmt-caption.is-swap > * { animation: fmt-cap .5s var(--fmt-ease); }
@keyframes fmt-cap { from { opacity: 0; transform: translateY(6px); } }

/* Progress: one thin segment per step along the bottom edge of the view; each is a button */
.fmt-dots {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 14px;
  list-style: none; display: flex; gap: 2px; margin: 0; padding: 0 2px;
}
.fmt-dots li { flex: 1; min-width: 0; display: flex; }
.fmt-dots button { flex: 1; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.fmt-dots button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px 2px 0 0;
  background: rgba(231,237,244,0.22); transition: height .25s var(--fmt-ease), background .25s;
}
.fmt-dots li.is-done button::after { background: rgba(224,68,43,0.75); }
.fmt-dots li.is-current button::after { background: var(--fmt-fire); height: 6px; }
.fmt-dots button:hover::after { height: 8px; background: rgba(231,237,244,0.55); }
.fmt-dots button:focus-visible { outline: 2px solid var(--fmt-accent); outline-offset: -2px; }

.fmt-buttons { display: flex; gap: 8px; }
.fmt-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(231,237,244,0.2);
  background: transparent; color: var(--fmt-text); display: grid; place-items: center; cursor: pointer;
  transition: background .25s, transform .2s var(--fmt-ease), border-color .25s;
}
.fmt-btn:hover { background: rgba(127,168,216,0.16); border-color: rgba(127,168,216,0.5); }
.fmt-btn:active { transform: scale(0.94); }
.fmt-btn:disabled { opacity: 0.35; cursor: default; }
.fmt-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .fmt-btn[data-act="prev"] svg, html[dir="rtl"] .fmt-btn[data-act="next"] svg { transform: scaleX(-1); }
.fmt-btn-play { width: 44px; height: 44px; background: var(--fmt-text); color: var(--fmt-ink); border-color: var(--fmt-text); }
.fmt-btn-play:hover { background: #fff; border-color: #fff; }
.fmt-btn-play svg { fill: currentColor; stroke: currentColor; }
.fmt-i-pause { display: none; }
.fmt[data-playing="true"] .fmt-i-play { display: none; }
.fmt[data-playing="true"] .fmt-i-pause { display: block; }

.fmt-steps-text { color: var(--fmt-muted); font-size: 14px; line-height: 1.7; padding: 4px 22px 22px; }
.fmt-steps-text h3 { font-family: var(--f-display); font-size: 16px; color: var(--fmt-text); margin: 16px 0 6px; }
.fmt-steps-text strong { color: var(--fmt-text); font-weight: 600; }

.fmt-disclaimer {
  margin: 16px auto 0; max-width: 780px; text-align: center;
  font-family: var(--f-body); font-size: 12.5px; line-height: 1.6; color: rgba(231,237,244,0.45);
}

/* ── Full screen (native, or a fixed overlay where the API is missing, e.g. iPhone) ── */
.fmt:fullscreen, .fmt.is-fs {
  width: 100%; height: 100%; max-width: none; border-radius: 0; border: 0;
  display: flex; flex-direction: column;
}
.fmt.is-fs { position: fixed; inset: 0; z-index: 2147483000; height: 100dvh; }
.fmt:fullscreen, .fmt.is-fs { max-height: none; min-height: 0; }
.fmt:fullscreen .fmt-steps-text, .fmt.is-fs .fmt-steps-text { display: none; }
html.fmt-lock, html.fmt-lock body { overflow: hidden !important; }

/* ── Equipment: photo beside the text, 3 x 3 on desktop, a list on phones ── */
.fmt-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.fmt-kit-item {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  column-gap: 18px; row-gap: 2px; align-content: start;
  padding: 16px 20px 16px 16px; text-decoration: none;
  background: #fff; border: 1px solid rgba(28,43,58,0.08); border-radius: 16px;
  transition: transform .4s var(--fmt-ease, cubic-bezier(.22,1,.36,1)), border-color .4s, box-shadow .4s;
}
.fmt-kit-item:hover { transform: translateY(-3px); border-color: rgba(62,111,176,0.3); box-shadow: 0 20px 40px -24px rgba(14,42,71,0.35); }
.fmt-kit-item:focus-visible { outline: 2px solid #3E6FB0; outline-offset: 3px; }
.fmt-kit-img {
  grid-row: 1 / -1; display: grid; place-items: center; aspect-ratio: 1; align-self: center;
  background: #F6F5F1; border-radius: 12px; padding: 10px;
}
.fmt-kit-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fmt-kit-model { margin-top: 2px; font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #3E6FB0; }
.fmt-kit-name { font-family: var(--f-display); font-size: 16px; font-weight: 600; line-height: 1.3; color: #14365A; }
.fmt-kit-role { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: #5A6675; }

@media (max-width: 1199px) { .fmt-kit-item { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; } }
@media (max-width: 1499px) { .fmt-course-progress { display: none; } }
@media (max-width: 991px) {
  .fmt-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* nine parts in two columns: the last one takes the full row instead of leaving a hole */
  .fmt-kit-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .fmt { border-radius: 16px; }
  /* phones: scenarios, then controls, then the view, then the caption under it (never over the room) */
  .fmt { height: auto; min-height: 0; }
  .fmt-top { flex-wrap: wrap; padding: 8px; gap: 8px; }
  .fmt-scenarios { flex: 1 1 100%; }
  .fmt-controls { flex: 1 1 100%; justify-content: space-between; gap: 8px; padding: 0 4px; }
  .fmt-count { margin-inline-end: auto; }
  .fmt-tools { padding-inline-end: 6px; gap: 0; }
  .fmt-tool { width: 38px; height: 38px; }
  .fmt-count { align-items: flex-start; }
  .fmt-stage { flex: 0 0 auto; height: 56svh; min-height: 320px; }
  .fmt-caption {
    position: static; width: auto; border-radius: 0; border: 0; border-top: 1px solid var(--fmt-line);
    background: var(--fmt-bar); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 14px 16px 16px;
  }
  .fmt-move { inset-inline-end: 50%; transform: translateX(50%); align-items: center; bottom: 22px; }
  html[dir="rtl"] .fmt-move { transform: translateX(-50%); }
  .fmt:fullscreen .fmt-stage, .fmt.is-fs .fmt-stage { flex: 1 1 auto; height: auto; }
  .fmt-lcd { inset-inline-end: 12px; top: 12px; padding: 2px 12px; min-width: 72px; }
  .fmt-hint { display: none; }
  /* phones: LCD plus a row of lit lamps, without their labels, so the room stays visible */
  .fmt-mirror { width: 150px; padding: 7px 8px 8px; }
  .fmt-mirror-name { display: none; }
  .fmt-mirror-lcd span:first-child { font-size: 12px; }
  .fmt-mirror-lcd span:last-child { font-size: 11px; }
  .fmt-mirror-leds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .fmt-mirror-leds li { font-size: 0; gap: 0; }
  .fmt-card { left: 10px; top: 56px; width: calc(100% - 20px); }
  html[dir="rtl"] .fmt-card { right: 10px; }
  .fmt-act { font-size: 14px; padding: 8px 18px 8px 8px; }
  .fmt-disclaimer { padding: 0 16px; }
  .fmt-kit { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
  .fmt-kit-item { grid-template-columns: 76px minmax(0, 1fr); padding: 12px 14px 12px 12px; }
  .fmt-kit-img { padding: 6px; }
  .fmt-kit-name { font-size: 15px; }
  .fmt-kit-role { font-size: 13px; }

}

@media (max-width: 575px) {
  /* main.css pins .container padding with !important on phones */
  .fmt-stage-wrap > .container { padding-left: 0 !important; padding-right: 0 !important; }
  .fmt-disclaimer { padding: 0 20px; }
  .fmt { border-radius: 0; border: 0; box-shadow: none; }
  .services-hero.fmt-hero h1 { font-size: clamp(34px, 9.4vw, 44px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fmt-spinner, .fmt-act-ring, .fmt-mirror-leds li.is-flash::before, .fmt-lcd.is-held, .fmt-lcd.is-tick, .fmt-caption.is-swap > *,
  .fmt-card, .fmt-chip, .fmt-move, .fmt-end, .fmt-end-box { animation: none; }
}