/* ── sections/fixes.css — "HVAC&R in India" + "A platform with multiple features"
   The problems section from an earlier design,
   ported whole and set in the site's type: the statement and the panel
   heading in Newsreader (emphasis in italic), the big market numbers in
   Newsreader, everything else in Manrope, data in JetBrains Mono.
   urbi.ae "How we can help" pattern: a light statement sticks (pure CSS) while a
   rounded navy panel slides up over it; the panel's heading line-reveals, the
   dashboard's four feature cards rise in (round two's feature wording; round
   three puts back the original hover: each art rests on its starting picture and
   plays into the feature on hover, focus or mid-screen on touch, then plays
   back), and a customer-dashboard mock-up rises out of the panel's clipped
   bottom edge with three glass KPI cards.
   Tighter than the original (the owner wants less scroll): a shorter pause before
   the panel, the heading on one line, the dashboard cropped a little, the cards
   side by side on tablets and swiping sideways on phones.
   Hidden entrance states are gated behind html.fx-motion AND .s7f-js (set by
   fixes.js once it has wired everything), so a script failure or reduced
   motion never hides anything. The four cards' starting pictures need only
   .s7f-js: they rest on it under reduced motion too.        */

.s7f-root {
  --stick: clamp(84px, 13.5vh, 124px);
  --p-line: rgba(186, 206, 223, .55);
  --p-dim: rgba(186, 206, 223, .22);
  --p-gold: #F7B744;
  --s7f-edge: clamp(8px, 1.1vw, 16px);                        /* panel to screen edge (as the brain's and S.M.A.R.T's) */
  --s7f-wide: clamp(16px, 3.6vw, 48px);                       /* how far the panel may reach past the 1240px column (as theirs) */
  --s7f-pad: max(16px, var(--s7-gutter) - var(--s7f-edge));   /* the content's side room, so it lines up with the other sections' .s7-wrap */
  background: var(--page); scroll-margin-top: 80px;
}
/* a short top (the industries section above already ends in its own padding: about 80px between them),
   and no bottom: the panel's rounded edge ends the section */
.s7-sec.s7f-root { padding-top: clamp(14px, 1.8vh, 24px); padding-bottom: 0; }

/* ── the sticky statement ─────────────────────────────────────────────── */
.s7f-root .s7f-intro {
  position: sticky; top: var(--stick); z-index: 1;
  margin-bottom: clamp(28px, 3.8vh, 44px);
  text-align: center; transform-origin: 50% 0;
}
.s7f-root.no-stick .s7f-intro { position: relative; top: auto; margin-bottom: clamp(28px, 4vh, 40px); }
.s7f-root .s7f-intro .s7-eyebrow { margin-bottom: 14px; }
.s7f-root .s7f-stmt {
  font: 400 clamp(29px, 3.6vw, 54px)/1.1 var(--display); letter-spacing: -.02em;
  color: var(--navy); max-width: 21em; margin: 0 auto; text-wrap: balance;
}
.s7f-root .s7f-stmt strong { font-weight: 400; font-style: italic; color: var(--navy); }
.s7f-root .s7f-stmt mark {
  color: var(--navy); font-weight: 500; background-color: transparent;
  background-image: linear-gradient(90deg, rgba(247, 183, 68, .66), rgba(247, 183, 68, .52));
  background-repeat: no-repeat; background-size: 100% .38em; background-position: 0 84%;
  padding: 0 .06em; margin: 0 -.02em; border-radius: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.s7f-root .s7f-sub { font: 500 clamp(15px, 1.2vw, 18px)/1.5 var(--font); color: var(--muted); margin: 12px auto 0; }

.s7f-root .s7f-stats {
  list-style: none; margin: clamp(16px, 2.2vh, 24px) auto 0; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-navy); border-bottom: 1px solid var(--line-navy);
}
.s7f-root .s7f-stats li { padding: 12px 16px 11px; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.s7f-root .s7f-stats li + li { border-left: 1px solid var(--line-navy); }
.s7f-root .s7f-stats strong {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 400 clamp(28px, 2.5vw, 36px)/1 var(--display); letter-spacing: -.02em; color: var(--navy);
  font-variant-numeric: lining-nums tabular-nums;
}
.s7f-root .s7f-stats span { font: 500 13.5px/1.35 var(--font); color: var(--muted); }
.s7f-root .s7f-chip { font: 600 11px/1 var(--mono); letter-spacing: .02em; font-style: normal; color: var(--navy); background: var(--gold); border-radius: 999px; padding: 6px 9px 5px; white-space: nowrap; }
.s7f-root .s7f-src { font: 500 11.5px/1.5 var(--font); color: var(--muted); margin: 10px auto 0; max-width: 92ch; }

/* ── the navy panel ──────────────────────────────────────────────────────
   Inset from the screen edge exactly like the brain's and S.M.A.R.T's panels (same width rule, same
   radius, same top padding), with its content on the page's 1240px column. overflow: clip, not hidden:
   a hidden box can still be scrolled by the browser (find-in-page on a clipped dashboard row, or
   scrollIntoView), which would shift the whole panel's content up.                                  */
.s7f-root .s7f-panel {
  position: relative; z-index: 2; overflow: hidden; overflow: clip; isolation: isolate;
  width: min(var(--s7-max) + 2 * var(--s7f-wide), 100% - 2 * var(--s7f-edge)); margin-inline: auto;
  border-radius: var(--r-panel);
  padding-top: clamp(36px, 5.6vh, 60px);
  background:
    radial-gradient(55% 60% at 96% 30%, rgba(10, 74, 133, .95) 0%, rgba(10, 74, 133, 0) 72%),
    radial-gradient(50% 45% at 4% 100%, rgba(0, 57, 108, .95) 0%, rgba(0, 57, 108, 0) 70%),
    radial-gradient(38% 30% at 50% 100%, rgba(247, 183, 68, .10) 0%, rgba(247, 183, 68, 0) 70%),
    var(--navy-deep);
  color: #D5E1EE;
}
/* the #dashboard link (the brain's Dashboard part) parks the panel's rounded top just under the nav */
.s7f-root .s7f-panel { scroll-margin-top: calc(var(--s7-clear, 88px) - 12px); }
.s7f-root .s7f-panel::before {   /* blueprint grid, faded toward the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(186, 206, 223, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 206, 223, .055) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 80%);
}
.s7f-root .s7f-in { width: min(var(--s7-max), 100% - 2 * var(--s7f-pad)); }
.s7f-root .s7f-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.s7f-root .s7f-head .s7-eyebrow { margin-bottom: 12px; }
.s7f-root .s7f-h2 { color: #fff; }
.s7f-root .s7f-h2 em { color: var(--gold-60); }
/* each half of the heading is its own mask for the line reveal; inline, so they share a line when there is room */
.s7f-root .s7f-ln { display: inline-block; vertical-align: top; overflow: hidden; padding: 0 .08em .14em 0; margin-bottom: -.14em; }
.s7f-root .s7f-ln > span { display: inline-block; }
.s7f-root .s7f-hint { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #A9BDD1; }
.s7f-root .s7f-hint .tp { display: none; }
.s7f-root .s7f-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(247, 183, 68, .18); }
@media (hover: none) { .s7f-root .s7f-hint { display: none; } }

/* ── the four feature cards ──────────────────────────────────────────────
   At rest each art shows its
   STARTING picture (the calls and paper, the scattered providers, the wandering route, the fog);
   hovering plays it into the FEATURE and leaving plays it back. 800 ms in (each part after its own
   --dl), 600 ms out.
     ON  = .s7f-card:is(.is-hov, .is-fix, :focus-visible)
           .is-hov: a mouse or pen over the card (fixes.js; not CSS :hover, which sticks after a tap)
           .is-fix: touch screens, the card sitting mid-screen (and, in the phone carousel, swiped
                    into view), or a tap to toggle it (fixes.js)
           :focus-visible: keyboard focus (fixes.js makes the cards focusable)
     PRE = .s7f-js .s7f-card:not(ON), the starting picture, under motion AND reduced motion,
           so the cards never rest on the finished feature; reduced motion cross-fades.
   Every rule below without a PRE in it is the finished feature, which is all that a script
   failure shows (.s7f-js is only set once fixes.js has wired the cards). */
.s7f-root .s7f-grid { list-style: none; margin: var(--s7-head-gap) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.s7f-root .s7f-card { position: relative; display: flex; flex-direction: column; gap: 0; outline: none; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.s7f-root .s7f-card:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 6px; }
.s7f-root .s7f-card h3 { font: 700 clamp(17px, 1.35vw, 20px)/1.2 var(--font); letter-spacing: -.012em; color: #fff; margin: 14px 0 6px; text-wrap: balance; }
.s7f-root .s7f-card .ds { font: 500 14.5px/1.5 var(--font); color: rgba(213, 225, 238, .78); margin: 0; text-wrap: pretty; }
.s7f-root .s7f-dots { display: none; }

.s7f-root .s7f-art {
  position: relative; aspect-ratio: 320 / 200; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  background:
    linear-gradient(rgba(186, 206, 223, .06) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(186, 206, 223, .06) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  transition: border-color .6s var(--ease-std), box-shadow .6s var(--ease-std);
}
.s7f-root .s7f-card:is(.is-hov, .is-fix, :focus-visible) .s7f-art { border-color: rgba(247, 183, 68, .42); box-shadow: 0 0 0 1px rgba(247, 183, 68, .12), 0 24px 50px -30px rgba(247, 183, 68, .45); }
.s7f-root .s7f-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the feature's number and name, top-left of the art */
.s7f-root .s7f-tag {
  position: absolute; top: 11px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #D5E1EE;
  background: rgba(0, 42, 80, .72); border: 1px solid rgba(186, 206, 223, .2); border-radius: 999px; padding: 5px 9px 5px 5px;
}
.s7f-root .s7f-tag b { font-weight: 700; letter-spacing: .04em; color: var(--navy); background: var(--gold); border-radius: 999px; padding: 3px 6px 2px; }

/* the morph: back to the start in .6s all together; into the feature in .8s, each part after its own --dl */
.s7f-root .s7f-art .m {
  transform-box: fill-box; transform-origin: center;
  transition: transform .6s var(--ease-std), opacity .6s var(--ease-std), stroke-dashoffset .6s var(--ease-std), fill .6s var(--ease-std), stroke .6s var(--ease-std);
}
.s7f-root .s7f-card:is(.is-hov, .is-fix, :focus-visible) .s7f-art .m { transition-duration: .8s; transition-timing-function: var(--ease); transition-delay: var(--dl, 0s); }
/* .is-reset: fixes.js sets the starting picture on load without animating there */
.s7f-root .s7f-card.is-reset * { transition: none !important; animation: none !important; }
/* reduced motion: the same swap on hover, focus or tap, as a quick
   cross-fade. Nothing travels: transforms and line draws change at once, only colour and opacity fade. */
html.fx-reduce .s7f-root .s7f-card:not(.is-reset) .s7f-art :is(.m, .spk path, .vo, .vi) { transition: opacity .25s linear, fill .25s linear, stroke .25s linear !important; transition-delay: 0s !important; }

/* shared strokes and text inside the art */
.s7f-root .s7f-art .ln { fill: none; stroke: var(--p-line); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.s7f-root .s7f-art .ln.dim, .s7f-root .s7f-art .dim .ln, .s7f-root .s7f-art g.dim { stroke: var(--p-dim); }
.s7f-root .s7f-art g.ln.dim path { fill: none; }
.s7f-root .s7f-art .dt { fill: var(--p-line); }
.s7f-root .s7f-art text { font-family: var(--font); }
.s7f-root .s7f-art .mono { font: 500 10px var(--mono); letter-spacing: .04em; fill: #BACEDF; }

/* 1 · every job, live: the calls, paper and chats fold into one digital job */
.s7f-root .a1 .glow { opacity: 1; }
.s7f-root .a1 .pp { fill: rgba(255, 255, 255, .035); stroke: rgba(186, 206, 223, .32); stroke-width: 1.2; }
.s7f-root .a1 .sc { fill: none; stroke: rgba(186, 206, 223, .48); stroke-width: 1.3; stroke-linecap: round; }
.s7f-root .a1 .p2 { opacity: 0; transform: translate(40px, -4px) scale(.9); }
.s7f-root .a1 .ph { opacity: 0; transform: translate(-96px, 46px) scale(.3); }
.s7f-root .a1 .cb { opacity: 0; transform: translate(-92px, -36px) scale(.3); --dl: .05s; }
.s7f-root .a1 .tkf { fill: rgba(0, 42, 80, .92); stroke: rgba(247, 183, 68, .75); stroke-width: 1.3; }
.s7f-root .a1 .fold { fill: none; stroke: rgba(186, 206, 223, .55); stroke-width: 1.3; stroke-linejoin: round; opacity: 0; }
.s7f-root .a1 .tk > .sc { opacity: 0; }
.s7f-root .a1 .rows { --dl: .12s; }
.s7f-root .a1 .rows .mono { fill: rgba(213, 225, 238, .7); }
.s7f-root .a1 .rows .t { fill: #BACEDF; font-size: 9.5px; }
.s7f-root .a1 .live { font: 700 8px var(--mono); letter-spacing: .08em; fill: var(--navy); }
.s7f-root .a1 .lab { font: 600 11px var(--font); fill: #fff; }
.s7f-root .a1 .prog { fill: none; stroke: var(--p-gold); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; --dl: .15s; }
.s7f-root .a1 .sd { fill: var(--p-gold); stroke: var(--p-gold); stroke-width: 1.5; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 .glow { opacity: 0; transform: scale(.7); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 .p2 { opacity: 1; transform: rotate(9deg); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 :is(.ph, .cb) { opacity: 1; transform: none; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 .tk { transform: translate(-40px, -2px) rotate(-8deg); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 .tkf { fill: rgba(255, 255, 255, .05); stroke: rgba(186, 206, 223, .55); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 :is(.fold, .tk > .sc) { opacity: 1; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 .rows { opacity: 0; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 .prog { stroke-dashoffset: 1; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a1 .sd { fill: var(--navy-deep); }

/* 2 · one contract: scattered providers join one network around Airdoot */
.s7f-root .a2 .ring { fill: none; stroke: rgba(186, 206, 223, .3); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.s7f-root .a2 .spk path { fill: none; stroke: rgba(247, 183, 68, .6); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-std); }
.s7f-root .s7f-card:is(.is-hov, .is-fix, :focus-visible) .a2 .spk path { transition: stroke-dashoffset .55s var(--ease) var(--dl, 0s); }
.s7f-root .a2 .brk { fill: none; stroke: rgba(186, 206, 223, .32); stroke-width: 1.1; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0; }
.s7f-root .a2 .vo { fill: var(--navy-deep); stroke: var(--p-gold); stroke-width: 1.3; }
.s7f-root .a2 .vi { fill: #fff; }
.s7f-root .a2 .bld { opacity: 0; transform: scale(.6); }
.s7f-root .a2 .hub { --dl: .08s; }
.s7f-root .a2 .halo { fill: rgba(247, 183, 68, .08); stroke: rgba(247, 183, 68, .35); stroke-width: 1; }
.s7f-root .a2 .core { fill: var(--navy); stroke: var(--p-gold); stroke-width: 1.6; }
.s7f-root .a2 .cap { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: var(--p-gold); --dl: .2s; }
.s7f-root .a2 :is(.vo, .vi) { transition: fill .6s var(--ease-std), stroke .6s var(--ease-std); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 :is(.ring, .spk path) { stroke-dashoffset: 1; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 .brk { opacity: 1; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 .v { transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 .vo { fill: rgba(186, 206, 223, .16); stroke: rgba(186, 206, 223, .6); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 .vi { fill: rgba(186, 206, 223, .6); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 .bld { opacity: 1; transform: none; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 .hub { opacity: 0; transform: scale(.6); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a2 .cap { opacity: 0; }

/* 3 · SLA clocks and signed reports: a timed route, check-ins, SIGNED, the SLA gauge at 6–24 h */
.s7f-root .a3 .wand { fill: none; stroke: rgba(186, 206, 223, .5); stroke-width: 1.3; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0; }
.s7f-root .a3 .route { fill: none; stroke: var(--p-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.s7f-root .a3 .st { fill: var(--navy-deep); stroke: #fff; stroke-width: 1.8; }
.s7f-root .a3 .ci circle { fill: var(--p-gold); stroke: var(--navy-deep); stroke-width: 2; }
.s7f-root .a3 .ci .t { fill: #fff; font-size: 9.5px; }
.s7f-root .a3 .bldg .ln { stroke: rgba(186, 206, 223, .6); }
.s7f-root .a3 .sig rect { fill: rgba(247, 183, 68, .14); stroke: rgba(247, 183, 68, .7); stroke-width: 1; }
.s7f-root .a3 .sig .tick { fill: none; stroke: var(--p-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s7f-root .a3 .sig text { fill: var(--p-gold); font-size: 9px; font-weight: 600; letter-spacing: .1em; }
.s7f-root .a3 .sla { font-size: 9px; letter-spacing: .16em; fill: rgba(186, 206, 223, .7); }
.s7f-root .a3 .gtr { fill: rgba(255, 255, 255, .03); stroke: rgba(186, 206, 223, .16); stroke-width: 5; }
.s7f-root .a3 .gauge { fill: none; stroke: var(--p-gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 74; transform: rotate(-90deg); }
.s7f-root .a3 .gv { font-size: 10.5px; font-weight: 600; letter-spacing: 0; fill: var(--p-gold); --dl: .25s; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a3 .wand { opacity: 1; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a3 .route { stroke-dashoffset: 1; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a3 .ci { opacity: 0; transform: translateY(4px); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a3 .sig { opacity: 0; transform: translateX(-8px); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a3 .gauge { stroke: rgba(186, 206, 223, .62); stroke-dashoffset: 100; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a3 .gv { opacity: 0; }

/* 4 · every asset in one view: the map clears, the technician is tracked, the asset's history shows */
.s7f-root .a4 .blk rect { fill: rgba(255, 255, 255, .045); stroke: rgba(186, 206, 223, .12); stroke-width: 1; }
.s7f-root .a4 .rd { fill: none; stroke: rgba(186, 206, 223, .28); stroke-width: 1.1; }
.s7f-root .a4 .ax { fill: rgba(255, 255, 255, .9); stroke: #fff; stroke-width: 1.2; }
.s7f-root .a4 .ax.warn { fill: var(--p-gold); stroke: var(--p-gold); }
.s7f-root .a4 .fog { opacity: 0; transform: scale(1.25); }
.s7f-root .a4 .trail { fill: none; stroke: var(--p-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .8; --dl: .1s; }
.s7f-root .a4 .tech { --dl: .1s; }
.s7f-root .a4 .tech circle { fill: var(--p-gold); stroke: var(--navy-deep); stroke-width: 2.5; }
.s7f-root .a4 .tech .in { fill: var(--navy-deep); stroke: none; }
.s7f-root .a4 .pulse { fill: none; stroke: var(--p-gold); stroke-width: 1.2; opacity: .7; --dl: .3s; }
.s7f-root .a4 .hist { --dl: .35s; }
.s7f-root .a4 .hist rect { fill: #fff; }
.s7f-root .a4 .hist .h { font: 700 11px var(--font); fill: var(--navy); }
.s7f-root .a4 .hist .s { font-size: 8.5px; fill: var(--slate); letter-spacing: .02em; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a4 .map { opacity: .5; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a4 .fog { opacity: 1; transform: none; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a4 .ax { fill: rgba(186, 206, 223, .12); stroke: rgba(186, 206, 223, .4); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a4 .trail { stroke-dashoffset: 1; }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a4 .tech { opacity: 0; transform: translateX(-150px); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a4 .pulse { opacity: 0; transform: scale(.4); }
.s7f-root.s7f-js .s7f-card:not(.is-hov, .is-fix, :focus-visible) .a4 .hist { opacity: 0; transform: translateY(8px); }
/* the live ping around the flagged unit, while the card is on */
html.fx-motion .s7f-root .s7f-card:is(.is-hov, .is-fix, :focus-visible) .a4 .pulse { animation: s7f-pulse 1.8s var(--ease-std) 1s infinite; }
@keyframes s7f-pulse { 0% { opacity: .7; transform: scale(1); } 70% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; transform: scale(1.9); } }

/* ── the dashboard mock-up ─────────────────────────────────────────────
   Sized in em, where 1em = the device width / 96, so it scales like a
   screenshot at every width. The panel's rounded bottom clips it: 41.8em of
   the device shows, which still keeps the KPIs, three
   complaints and all of "Upcoming services" in view.
   The gap under the cards is the stage's own margin. Inside the stage, the
   device's top margin (in its em) is the finished lift less f3's top, so in the
   finished frame the top glass card starts exactly on the stage's top edge at
   every width. That edge is where the header turns navy (data-tone="light").  */
.s7f-root .s7f-stage { position: relative; container-type: inline-size; margin-top: clamp(14px, 1.4vw, 20px); }
.s7f-root .s7f-device {
  --dw: min(907px, 70cqw);
  --lift: 7.62em;   /* the FINISHED rise (= the scroll animation's end, -72px at 907 wide) */
  --f3y: 3.1em;     /* f3's top, in this box's em */
  position: relative; width: var(--dw); margin: calc(var(--lift) - var(--f3y)) auto 0; font-size: calc(var(--dw) / 96);
  height: 41.8em; padding-top: 8em; box-sizing: border-box; will-change: transform;
  /* the finished position, so reduced motion, ?static=1 and a script failure all show the same frame */
  transform: translateY(calc(-1 * var(--lift)));
}
.s7f-root .s7f-device .i2 { width: 1em; height: 1em; display: block; }
.s7f-root .s7f-scr {
  height: 62em; border-radius: 1.8em; overflow: hidden; background: var(--page);
  display: grid; grid-template-columns: 7.2em 1fr;
  box-shadow: 0 0 0 .9em rgba(255, 255, 255, .07), 0 0 0 calc(.9em + 1px) rgba(255, 255, 255, .16), 0 3em 7em -2em rgba(0, 10, 25, .55);
  color: var(--text); text-align: left;
}
.s7f-root .s7f-rail { background: var(--navy); display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding: 2em 0; }
.s7f-root .s7f-rail .mk { width: 3.2em; height: 2.8em; margin-bottom: 1.4em; }
.s7f-root .s7f-rail i { width: 4.2em; height: 4.2em; border-radius: 1.1em; display: grid; place-items: center; color: #BACEDF; font-size: 1em; --acc: #BACEDF; }
.s7f-root .s7f-rail i .i2 { width: 2.2em; height: 2.2em; }
.s7f-root .s7f-rail i.on { background: rgba(247, 183, 68, .18); color: #fff; --acc: var(--gold); }
.s7f-root .s7f-main { padding: 2.4em 2.8em; min-width: 0; }
.s7f-root .s7f-top { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.s7f-root .s7f-top .t b { display: block; font: 700 2.3em/1.1 var(--font); color: var(--ink); letter-spacing: -.02em; }
.s7f-root .s7f-top .t .tt { display: flex; align-items: center; gap: 1.2em; }
.s7f-root .s7f-top .t .sb { display: block; margin-top: .45em; font: 500 1.25em/1 var(--font); color: var(--muted); }
.s7f-root .s7f-top .r { display: flex; align-items: center; gap: 1em; }
/* the honesty label: beside the title, where no glass card ever covers it, and never smaller than 9px */
.s7f-root .s7f-sample { font: 600 max(1.05em, 9px)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-30); border-radius: 99em; padding: .7em 1em .6em; white-space: nowrap; }
.s7f-root .s7f-top .srch { font: 500 1.2em/1 var(--font); color: #8A99AB; background: #fff; border: 1px solid var(--line); border-radius: .9em; padding: .85em 1.1em; width: 17em; white-space: nowrap; overflow: hidden; }
.s7f-root .s7f-top .av { width: 3.4em; height: 3.4em; border-radius: 50%; background: linear-gradient(135deg, var(--navy-2), var(--navy)); box-shadow: inset 0 0 0 .25em var(--gold-30); }
.s7f-root .s7f-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3em; margin-top: 2.2em; }
.s7f-root .s7f-kpis > div { background: #fff; border: 1px solid var(--line); border-radius: 1.4em; padding: 1.3em 1.6em 1.2em; }
.s7f-root .s7f-kpis .l { display: flex; align-items: center; gap: .6em; font: 600 1.15em/1.1 var(--font); color: var(--muted); white-space: nowrap; }
.s7f-root .s7f-kpis .l .i2 { width: 1.5em; height: 1.5em; color: var(--navy); --acc: var(--gold); }
.s7f-root .s7f-kpis b { display: block; font: 700 3.1em/1 var(--font); color: var(--ink); letter-spacing: -.03em; margin: .4em 0 .25em; font-variant-numeric: tabular-nums; }
.s7f-root .s7f-kpis .d { font: 500 1.05em/1 var(--mono); color: var(--slate); }
.s7f-root .s7f-kpis .bar { display: block; height: .55em; border-radius: 1em; background: var(--grey); overflow: hidden; margin-top: .45em; }
.s7f-root .s7f-kpis .bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.s7f-root .s7f-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.3em; margin-top: 1.1em; }
.s7f-root .s7f-box { background: #fff; border: 1px solid var(--line); border-radius: 1.4em; padding: 1.4em 1.7em .6em; min-width: 0; }
.s7f-root .s7f-box .h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7em; }
.s7f-root .s7f-box .h b { font: 700 1.4em/1 var(--font); color: var(--ink); }
.s7f-root .s7f-box .h span { font: 500 1.05em/1 var(--mono); color: var(--slate); }
.s7f-root .s7f-box .cr, .s7f-root .s7f-box .up { display: grid; grid-template-columns: 3.6em 1fr auto auto; align-items: center; gap: 1.2em; padding: .9em 0; border-top: 1px solid var(--line); }
.s7f-root .s7f-box .up { grid-template-columns: 3.6em 1fr; }
.s7f-root .s7f-box .cr > i { width: 3.6em; height: 3.6em; border-radius: 1em; background: var(--page); display: grid; place-items: center; color: var(--navy); --acc: var(--gold); }
.s7f-root .s7f-box .cr > i .i2 { width: 1.8em; height: 1.8em; }
.s7f-root .s7f-box p { margin: 0; min-width: 0; }
.s7f-root .s7f-box p b { display: block; font: 600 1.2em/1.2 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s7f-root .s7f-box p span { display: block; font: 500 1.05em/1.2 var(--font); color: var(--muted); margin-top: .3em; white-space: nowrap; }
.s7f-root .s7f-box .c { font: 600 1em/1 var(--font); font-style: normal; padding: .6em .9em; border-radius: 99em; white-space: nowrap; }
.s7f-root .s7f-box .c.g { background: var(--gold-30); color: var(--gold-ink); }
.s7f-root .s7f-box .c.n { background: rgba(0, 57, 108, .1); color: var(--navy); }
.s7f-root .s7f-box .c.s { background: var(--navy); color: #fff; }
.s7f-root .s7f-box .tm { font: 500 1.05em/1 var(--mono); color: var(--slate); white-space: nowrap; min-width: 5.6em; text-align: right; }
.s7f-root .s7f-box .dd { width: 3.6em; height: 3.6em; border-radius: 1em; border: 1px solid var(--line-navy); display: grid; place-content: center; text-align: center; font: 600 .8em/1 var(--mono); letter-spacing: .08em; color: var(--slate); }
.s7f-root .s7f-box .dd b { display: block; font: 700 1.9em/1 var(--font); color: var(--navy); letter-spacing: -.02em; margin-bottom: .1em; }

/* the three glass KPI cards */
.s7f-root .s7f-float {
  position: absolute; z-index: 2; box-sizing: border-box; padding: 1.2em 1.7em 1.3em; border-radius: 1.7em;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 4em 4em -1.5em rgba(0, 18, 40, .38), 0 .3em .8em rgba(0, 18, 40, .1);
  color: var(--navy); text-align: left; will-change: transform, opacity;
}
.s7f-root .s7f-float .k { display: flex; align-items: center; gap: .7em; font: 600 1.2em/1.2 var(--font); color: var(--muted); white-space: nowrap; }
.s7f-root .s7f-float .ico { width: 2.4em; height: 2.4em; border-radius: .8em; display: grid; place-items: center; background: var(--navy); color: #fff; --acc: var(--gold); flex: none; }
.s7f-root .s7f-float .ico .i2 { width: 1.5em; height: 1.5em; }
.s7f-root .s7f-float > b { display: block; font: 700 3em/1 var(--font); color: var(--ink); letter-spacing: -.03em; margin: .5em 0 .45em; }
.s7f-root .s7f-float > b.sm { font-size: 1.7em; letter-spacing: -.015em; margin: .55em 0 .25em; }
.s7f-root .s7f-float.f1 { left: -15.5em; top: 15em; width: 24em; }
/* f2 sits over the complaints list only: it ends on a row line (rows 1-2 covered whole, the
   "Fixed · signed" row it describes stays in view) and in the gap before "Upcoming services" */
.s7f-root .s7f-float.f2 { left: 35em; top: 29.6em; width: 26em; -webkit-backdrop-filter: blur(7px) saturate(140%); backdrop-filter: blur(7px) saturate(140%); }
/* f3 ends just above the KPI row; its top is the device's --f3y (which also sets the gap above it) */
.s7f-root .s7f-float.f3 { right: 1.5em; top: var(--f3y); width: 27em; }
.s7f-root .s7f-float .rt { display: block; width: 100%; height: 2.4em; }
.s7f-root .s7f-float .rt .bs { stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 6; }
.s7f-root .s7f-float .rt .dn { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.s7f-root .s7f-float .rt .a { fill: var(--navy); }
.s7f-root .s7f-float .rt .v { fill: var(--gold); stroke: #fff; stroke-width: 3; }
.s7f-root .s7f-float .rt .e { fill: #fff; stroke: var(--navy); stroke-width: 2.5; }
.s7f-root .s7f-float .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.s7f-root .s7f-float .steps i { height: .6em; border-radius: 1em; background: var(--gold); }
.s7f-root .s7f-float .sl { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .7em; font: 500 .95em/1 var(--mono); color: var(--slate); }
.s7f-root .s7f-float .sg { display: block; width: 100%; height: 4em; }
.s7f-root .s7f-float .sg path { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s7f-root .s7f-float .sg .ln2 { stroke: var(--line); stroke-width: 1.5; }
.s7f-root .s7f-float .sg circle { fill: var(--gold); }
.s7f-root .s7f-float .sg .tk { stroke: var(--navy); stroke-width: 2.4; }

/* ── entrances (motion only) ───────────────────────────────────────────── */
html.fx-motion .s7f-root.s7f-js .s7f-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
html.fx-motion .s7f-root.s7f-js .s7f-intro.is-in .s7f-rv { opacity: 1; transform: none; }
html.fx-motion .s7f-root.s7f-js .s7f-stmt mark { background-size: 0% .38em; transition: background-size 1.1s var(--ease) calc(.55s + var(--m) * .2s); }
html.fx-motion .s7f-root.s7f-js .s7f-intro.is-in .s7f-stmt mark { background-size: 100% .38em; }
html.fx-motion .s7f-root.s7f-js .s7f-ln > span { transform: translateY(120%); transition: transform 1.9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.2s + var(--l, 0) * .05s); }
html.fx-motion .s7f-root.s7f-js .s7f-h2.is-in .s7f-ln > span { transform: none; }
html.fx-motion .s7f-root.s7f-js .s7f-panel .s7-eyebrow,
html.fx-motion .s7f-root.s7f-js .s7f-hint { opacity: 0; transition: opacity 1s var(--ease) .5s; }
html.fx-motion .s7f-root.s7f-js .s7f-head.is-in .s7-eyebrow,
html.fx-motion .s7f-root.s7f-js .s7f-head.is-in .s7f-hint { opacity: 1; }
html.fx-motion .s7f-root.s7f-js .s7f-card { opacity: 0; transform: translateY(61px); transition: opacity 1s cubic-bezier(.215, .61, .355, 1), transform 1s cubic-bezier(.215, .61, .355, 1); transition-delay: calc(.35s + var(--i) * .1s); }
html.fx-motion .s7f-root.s7f-js .s7f-grid.is-in .s7f-card { opacity: 1; transform: none; }
html.fx-motion .s7f-root.s7f-js .s7f-float { opacity: 0; }

/* ── widths ─────────────────────────────────────────────────────────────── */
/* tablets and small laptops: two columns, each card with its art beside its words (stacking
   them nearly doubled the height here) */
@media (max-width: 1180px) {
  .s7f-root .s7f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(22px, 2.6vw, 32px); }
  .s7f-root .s7f-card { display: grid; grid-template-columns: 54% minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; align-items: start; }
  .s7f-root .s7f-art { grid-row: 1 / 4; grid-column: 1; }
  .s7f-root .s7f-card > :not(.s7f-art) { grid-column: 2; }
  .s7f-root .s7f-card h3 { margin-top: 2px; }
  .s7f-root .s7f-card .ds { font-size: 14px; }
}
/* small laptops / landscape tablets: a larger dashboard (the side cards still clear the screen edge) */
@container (max-width: 1100px) { .s7f-root .s7f-device { --dw: 78cqw; } }
@container (max-width: 900px) {
  /* f3 a little higher than on laptops (at -1.4em it met the cards above) */
  .s7f-root .s7f-device { --dw: 88cqw; --f3y: 1.7em; }
  /* no room beside the screen: two cards on the diagonal (f1 over the complaint names, ending on a
     row line, f3 top-right), so the title, the Sample data label and the KPIs stay in view */
  .s7f-root .s7f-float.f1 { left: -3em; top: 29.6em; width: 25em; }
  .s7f-root .s7f-float.f2 { display: none; }
}
@container (max-width: 560px) { .s7f-root .s7f-device { --dw: 100cqw; } }
/* portrait tablets: back to stacked cards, two to a row */
@media (max-width: 900px) {
  .s7f-root .s7f-card { display: flex; align-items: stretch; }
  .s7f-root .s7f-art { aspect-ratio: 320 / 184; }
  .s7f-root .s7f-card h3 { margin-top: 14px; }
}
@media (max-width: 760px) {
  .s7f-root .s7f-stats { grid-template-columns: 1fr; border-bottom: 0; max-width: 420px; }
  .s7f-root .s7f-stats li { flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line-navy); text-align: left; }
  .s7f-root .s7f-stats li + li { border-left: 0; }
  .s7f-root .s7f-stats li:last-child { flex-wrap: wrap; }
  .s7f-root .s7f-stats span { text-align: right; }
  .s7f-root .s7f-stats strong { font-size: 28px; }
}
/* phones: the four cards swipe sideways (one in view, the next peeking) instead of a four-card stack */
@media (max-width: 620px) {
  .s7f-root .s7f-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(320px, 84%); gap: 14px;
    margin-inline: calc(-1 * var(--s7-gutter)); padding: 6px var(--s7-gutter) 8px; scroll-padding-inline: var(--s7-gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .s7f-root .s7f-grid::-webkit-scrollbar { display: none; }
  .s7f-root .s7f-card { scroll-snap-align: start; }
  .s7f-root .s7f-card:focus-visible { outline-offset: 2px; }   /* the scroller clips past its 6px top padding */
  .s7f-root .s7f-art { aspect-ratio: 320 / 190; }
  .s7f-root .s7f-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .s7f-root .s7f-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(186, 206, 223, .35); transition: width .3s var(--ease), background .3s ease; }
  .s7f-root .s7f-dots i.on { width: 20px; background: var(--gold); }
  /* the stack's rise would be clipped by the scroller: the cards slide in from the side instead */
  html.fx-motion .s7f-root.s7f-js .s7f-card { transform: translateX(48px); }
  .s7f-root .s7f-float.f2 { display: none; }
  /* phones: the two glass cards at 1.75x the screen's scale so their text stays readable,
     one top-right, one bottom-left (over the complaint names), leaving title, label and KPIs clear.
     --f3y stays in the device's em, so f3's own top divides it back by its 1.75x. */
  .s7f-root .s7f-float { font-size: 1.75em; }
  .s7f-root .s7f-float.f1 { width: 24em; left: -.4em; top: 17.27em; }
  .s7f-root .s7f-float.f3 { width: 26em; right: -.4em; top: calc(var(--f3y) / 1.75); }
  .s7f-root .s7f-device { padding-top: 9em; height: 48.2em; --f3y: 2.99em; }
}
@media (max-width: 420px) {
  .s7f-root .s7f-stats li:last-child strong { flex-wrap: wrap; row-gap: 8px; }
}
/* the hint: "hover to see it in action" needs a mouse (it cross-fades under reduced motion); phones get "swipe for all four" */
@media (max-width: 620px) and (hover: none) { html:is(.fx-motion, .fx-reduce) .s7f-root .s7f-hint { display: inline-flex; } .s7f-root .s7f-hint .hv { display: none; } .s7f-root .s7f-hint .tp { display: inline; } }

/* calm (app/fx.js): the statement, the heading's lines and the four cards fade in where they are (after the widths above,
   so the phones' side-slide goes too); the highlighter still draws. fixes.js holds the dashboard where this file puts
   it and only fades its glass cards in. A card's art still swaps on hover, focus or tap, as a fade: its parts do not
   travel, their colours, opacity and line draws change. */
html.fx-calm .s7f-root.s7f-js :is(.s7f-rv, .s7f-card) { transform: none; }
html.fx-calm .s7f-root.s7f-js .s7f-ln > span { transform: none; opacity: 0; transition: opacity 1.2s var(--ease); transition-delay: calc(.2s + var(--l, 0) * .05s); }
html.fx-calm .s7f-root.s7f-js .s7f-h2.is-in .s7f-ln > span { opacity: 1; }
html.fx-calm .s7f-root .s7f-card:not(.is-reset) .s7f-art :is(.m, .spk path, .vo, .vi) { transition-property: opacity, fill, stroke, stroke-dashoffset !important; }