/* LIVE 2026-10-01 · homepage "Our Services" containers = "One Plane" (owner's pick: option 21 of
   /services-chapters-r3/; its desktop is option 18 "Base Rail" of /services-chapters-r2/).

   What it does, and nothing else:
   · Desktop and tablet (761px and up): each service is one closed block. The panel is its left wall,
     a pale tray in the service's own tint closes the cards at the top, bottom and right, and a base
     rail in the panel's colour runs under the cards and holds the position bar.
   · Phones (760px and down): each service is one plane in one pale tint. Name and description, the
     cards, the position bar, then Explore service as the last thing — a bar in the panel's colour.
     (plane.js moves the panel's own button below the cards on a phone and back on a wide screen.)
   · The section's floor is white, so the tinted services read against it.
   No rule here selects a card or anything inside one. No new colour: only the steps each service
   already has (--hue --mi --md --ml --mp).

   Sits on top of home-services-filmstrip/, -edge/, -runin/, -reveal/ and -grid/, in the same
   `svcfilm` layer, with seven ids so it wins without touching those packages. Every rule waits for
   html.svc-plane, which plane.js sets once its parts exist — if the script does not run, nothing
   here applies and the section looks exactly as before.

   UNDO: delete the <link> and the <script> marked "One Plane" in index.html (and the two
   home-services-plane/ lines in DEPLOY-MANIFEST.txt), or restore the copies in
   home-services-plane/_live-backup/20261001-plane/. */
@layer svcfilm {

/* ---- the floor, and the service row that sits on it ---- */
html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 section.s3-svc { background: #FFFFFF !important; }
html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .fz7-row { background: #FFFFFF !important; }
html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .fz7-cell { box-shadow: inset 0 0 0 1px #E5EAF1 !important; }

/* ---- the position bar (the Success Stories part): shows where the cards are, can be pressed or dragged ---- */
html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-bar { position: relative !important; height: 18px !important; min-width: 0 !important; cursor: pointer !important; touch-action: none !important; }
html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-bar::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 8px !important; height: 2px !important; background: var(--md) !important; }
html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-bar i { position: absolute !important; top: 5px !important; height: 8px !important; min-width: 28px !important; border-radius: 8px !important; background: #FAFBFC !important; box-shadow: inset 0 0 0 1px var(--hue) !important; }
html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-bar.is-full { visibility: hidden !important; }

/* ---- desktop and tablet: panel · tray · base rail ---- */
@media (min-width: 761px) {
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block { grid-template-rows: minmax(0, 1fr) 40px !important; row-gap: 0 !important; background: var(--mp) !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block + .h1-block { margin-top: 32px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap { grid-area: 1 / 1 / 3 / 2 !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-strip { grid-area: 1 / 2 / 2 / 3 !important; margin: 16px 16px 16px 0 !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .pl-base { grid-area: 2 / 2 / 3 / 3 !important; display: flex !important; align-items: center !important; min-width: 0 !important; margin-left: -16px !important; padding: 0 16px !important; background: var(--ml) !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-base > .pl-bar { flex: 1 1 auto !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-base > .pl-cta { display: none !important; }
}

/* ---- phones: one plane — name, cards, position bar, Explore service ---- */
@media (max-width: 760px) {
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block { background: var(--mp) !important; box-shadow: inset 0 3px 0 var(--md) !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block + .h1-block { margin-top: 30px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap { background: transparent !important; padding-bottom: 10px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap > .sv-plats, html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap > .g4-note { margin-bottom: 0 !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap > .g4-flabel { margin-top: 24px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap .g4-filter { background: var(--ml) !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .pl-base { grid-area: 3 / 1 !important; display: block !important; min-width: 0 !important; padding: 0 var(--lane) 24px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-bar i { background: #FFFFFF !important; box-shadow: inset 0 0 0 1px var(--md) !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-base > .pl-cta { display: block !important; margin-top: 16px !important; }
  /* the panel's own button, in its own measurements, as a bar in the panel's colour */
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-cta > .sv-explore { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: auto !important; height: 58px !important; margin: 0 !important; padding: 0 0 0 22px !important; border: 0 !important; border-radius: 6px !important; background: var(--ml) !important; color: #0E1E35 !important; font-size: 16.5px !important; font-weight: 800 !important; line-height: normal !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; cursor: pointer !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-cta > .sv-explore i { display: grid !important; place-items: center !important; flex: none !important; width: 58px !important; height: 58px !important; border-radius: 4px !important; background: var(--md) !important; color: var(--mi) !important; box-shadow: none !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-cta > .sv-explore svg { width: 20px !important; height: 20px !important; transform: none !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-cta > .sv-explore:focus-visible { outline: 2px solid var(--mi) !important; outline-offset: 2px !important; }
}

}
