/* ==== services.css · layer 1 of 6 ==== */
/* ==========================================================================
   Our Services · "Filmstrip by service" — LIVE on index.html (2026-09-25).
   Approved preview: [archived] (kit: [archived]). Each service is its own
   block: a fixed colour tile on the left, its cards scrolling beside it; a
   five-tab row pinned on top. The live renderer (inline in index.html) still
   builds the content; core.js reads it and filmstrip.js composes this layout,
   then removes the old composition from the page.
   Every declaration is !important inside ONE layer so it outranks the old
   section's unlayered !important rules (~1150 rules on #svc3).
   Originally generated; edit this file directly.
   ========================================================================== */
@layer svcfilm {

#svc3 .s3-catwrap, #svc3 section.s3-svc > .s3-wrap:not(.s3-head), #svc3 .s3-grid { display: none !important; }

#svc3 {
  --ink: #0E1E35 !important; --ink2: #33425A !important; --mute: #5A6678 !important; --line: #DFE6F0 !important; --plate: #F4F7FB !important;
  --lane: var(--grid-edge, 18px) !important;
}
#svc3 .sv-root { position: relative !important; padding: 0 var(--lane) !important; color: var(--ink) !important; }
#svc3 .sv-root, #svc3 .sv-root * { box-sizing: border-box !important; }
#svc3 .sv-root [style*="--hue"], #svc3 .sv-root .sv-hue {
  --deep: color-mix(in oklab, var(--hue) 78%, #0B1730) !important;
  --tint: color-mix(in oklab, var(--hue) 7%, #fff) !important;
  --wash: color-mix(in oklab, var(--hue) 14%, #fff) !important;
  --edge: color-mix(in oklab, var(--hue) 26%, #fff) !important;
}
#svc3 :where(.sv-root h3, .sv-root h4, .sv-root p, .sv-root dl, .sv-root dd, .sv-root ol, .sv-root ul) { margin: 0 !important; padding: 0 !important; }
#svc3 :where(.sv-root button) { font: inherit !important; color: inherit !important; background: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; text-align: left !important; -webkit-tap-highlight-color: transparent !important; }
#svc3 .sv-root button:focus-visible, #svc3 .sv-root a:focus-visible { outline: 2px solid var(--hue, #0760C6) !important; outline-offset: 2px !important; }


#svc3 .sv-root .s3-mock {
  position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; height: auto !important; container-type: inline-size !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; background: #fff !important;
}


#svc3 .sv-mark { display: inline-grid !important; place-items: center !important; width: 44px !important; height: 44px !important; flex: 0 0 auto !important; background: #fff !important; }
#svc3 .sv-mark svg { width: 24px !important; height: 24px !important; display: block !important; visibility: visible !important; opacity: 1 !important; filter: none !important; }


#svc3 .sv-plats { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#svc3 .sv-plats .s3-chip {
  display: inline-flex !important; align-items: center !important; gap: 7px !important; height: 32px !important; padding: 0 11px !important; border-radius: 6px !important; margin: 0 !important;
  background: #fff !important; border: 1px solid var(--line) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink2) !important; white-space: nowrap !important; box-shadow: none !important;
}
#svc3 .sv-plats .s3-chip svg, #svc3 .sv-plats .s3-lg { width: 16px !important; height: 16px !important; flex: 0 0 auto !important; }
#svc3 .sv-plats .s3-igm { width: 16px !important; height: 16px !important; border-radius: 4px !important; display: grid !important; place-items: center !important; background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF) !important; }
#svc3 .sv-plats .s3-igm svg { width: 11px !important; height: 11px !important; }


#svc3 .sv-explore {
  display: inline-flex !important; align-items: center !important; gap: 12px !important; height: 48px !important; padding: 0 8px 0 20px !important; border-radius: 6px !important; cursor: pointer !important;
  background: var(--hue) !important; color: #fff !important; font-size: 15.5px !important; font-weight: 750 !important; text-decoration: none !important; white-space: nowrap !important;
  transition: background-color .3s ease !important;
}
#svc3 .sv-explore i { width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 4px !important; background: rgba(255, 255, 255, .18) !important; }
#svc3 .sv-explore svg { width: 18px !important; height: 18px !important; transition: transform .35s ease !important; }
#svc3 .sv-explore:hover { background: var(--deep) !important; }
#svc3 .sv-explore:hover svg { transform: translateX(2px) !important; }


#svc3 .sv-specs { display: grid !important; gap: 0 !important; }
#svc3 .sv-spec { display: grid !important; grid-template-columns: 128px minmax(0, 1fr) !important; gap: 16px !important; padding: 12px 0 !important; border-top: 1px solid var(--edge, var(--line)) !important; }
#svc3 .sv-spec dt { font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--deep, var(--ink2)) !important; padding-top: 2px !important; }
#svc3 .sv-spec dd { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--ink2) !important; }


#svc3 .sv-pager { display: flex !important; align-items: center !important; gap: 8px !important; }
#svc3 .sv-pager button {
  width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; border-radius: 6px !important; text-align: center !important;
  background: #fff !important; border: 1px solid var(--edge, var(--line)) !important; color: var(--deep, var(--ink)) !important; transition: background-color .3s ease, opacity .3s ease !important;
}
#svc3 .sv-pager button svg { width: 18px !important; height: 18px !important; }
#svc3 .sv-pager button:hover:not(:disabled) { background: var(--tint, var(--plate)) !important; }
#svc3 .sv-pager button:disabled { opacity: .35 !important; cursor: default !important; }
#svc3 .sv-count { min-width: 56px !important; text-align: center !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--mute) !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
#svc3 .sv-count b { color: var(--ink) !important; font-weight: 800 !important; }
#svc3 .sv-count i { font-style: normal !important; margin: 0 4px !important; color: #A3AEBD !important; }

@keyframes svIn { from { opacity: 0 !important; } to { opacity: 1 !important; } }
@media (prefers-reduced-motion: reduce) { #svc3 .sv-root * { animation: none !important; transition: none !important; } }


#svc3 .sv-bt { font-size: 18px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.012em !important; color: var(--ink) !important; }
#svc3 .sv-bu { margin-top: 8px !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--ink2) !important; }
#svc3 .sv-bu b { color: var(--deep) !important; }
#svc3 .sv-bd { margin-top: 8px !important; font-size: 14.5px !important; line-height: 1.5 !important; color: var(--mute) !important; }
#svc3 .sv-body .sv-specs { margin-top: 14px !important; }
#svc3 .sv-body .sv-spec { grid-template-columns: 1fr !important; gap: 3px !important; padding: 9px 0 !important; }
#svc3 .sv-body .sv-spec dd { font-size: 13.5px !important; }

#svc3 .sv-prim { font-style: normal !important; display: inline-block !important; vertical-align: .32em !important; margin-left: .45em !important; padding: 3px 8px !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; background: var(--hue) !important; color: #fff !important; line-height: 1.4 !important; }
#svc3 .sv-fr { display: flex !important; gap: 3px !important; flex-wrap: wrap !important; }
#svc3 .sv-fr button { height: 36px !important; padding: 0 14px !important; background: #fff !important; font-size: 13.5px !important; font-weight: 700 !important; color: var(--ink2) !important; text-align: center !important; transition: background-color .3s ease, color .3s ease !important; }
#svc3 .sv-fr button[aria-pressed="true"] { background: var(--hue) !important; color: #fff !important; }
#svc3 .sv-fnote { margin-top: 10px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--mute) !important; }


#svc3 .g4-map { position: sticky !important; top: var(--hdr, 108px) !important; z-index: 20 !important; display: flex !important; gap: 4px !important; height: 56px !important; padding: 10px 0 !important; box-sizing: content-box !important; background: #fff !important; }
#svc3 .g4-seg { position: relative !important; flex: var(--g, 1) 1 0 !important; min-width: 0 !important; overflow: hidden !important; background: var(--plate) !important; }
#svc3 .g4-fill { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 0 !important; background: color-mix(in oklab, var(--hue) 20%, #fff) !important; transition: width .25s linear !important; }
#svc3 .g4-seg[aria-current="true"] { background: var(--tint) !important; }
#svc3 .g4-seg[aria-current="true"] .g4-fill { background: color-mix(in oklab, var(--hue) 38%, #fff) !important; }
#svc3 .g4-sl { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; height: 100% !important; padding: 0 14px !important; white-space: nowrap !important; }
#svc3 .g4-sl .sv-mark { width: 30px !important; height: 30px !important; }
#svc3 .g4-sl .sv-mark svg { width: 18px !important; height: 18px !important; }
#svc3 .g4-sl b { font-size: 15px !important; font-weight: 750 !important; color: var(--ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: color .3s ease !important; }
#svc3 .g4-seg[aria-current="true"] .g4-sl b { color: var(--deep) !important; }

#svc3 .g4-strip {
  display: flex !important; gap: 16px !important; align-items: stretch !important; margin: 0 calc(-1 * var(--lane)) 0 !important; padding: 0 var(--lane) !important;
  overflow-x: auto !important; scroll-snap-type: x mandatory !important; scroll-padding-left: var(--lane) !important; scrollbar-width: none !important; overscroll-behavior-x: contain !important;
}
#svc3 .g4-strip::-webkit-scrollbar { display: none !important; }
#svc3 .g4-strip::after { content: "" !important; flex: 0 0 calc(var(--lane) - 16px) !important; }
#svc3 .g4-chap, #svc3 .g4-card { flex: 0 0 auto !important; scroll-snap-align: start !important; }
#svc3 .g4-card[hidden] { display: none !important; }
#svc3 .g4-chap { width: 360px !important; display: flex !important; flex-direction: column !important; padding: 30px 28px 28px !important; background: var(--hue) !important; color: #fff !important; }
#svc3 .g4-ct { display: flex !important; align-items: center !important; justify-content: space-between !important; }
#svc3 .g4-ct .sv-mark { width: 52px !important; height: 52px !important; }
#svc3 .g4-ct .sv-mark svg { width: 28px !important; height: 28px !important; }
#svc3 .g4-ct span { font-size: 44px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.03em !important; color: rgba(255, 255, 255, .35) !important; font-variant-numeric: tabular-nums !important; }
#svc3 .g4-chap h3 { margin-top: 30px !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.022em !important; color: #fff !important; }
#svc3 .g4-chap p { margin-top: 14px !important; font-size: 16px !important; line-height: 1.55 !important; color: rgba(255, 255, 255, .9) !important; }
#svc3 .g4-chap .sv-plats { margin-top: 20px !important; }
#svc3 .g4-chap .sv-plats .s3-chip { border-color: transparent !important; }
#svc3 .g4-filter { display: flex !important; gap: 3px !important; margin-top: 20px !important; }
#svc3 .g4-filter button { flex: 1 1 auto !important; height: 34px !important; padding: 0 8px !important; background: rgba(255, 255, 255, .16) !important; color: #fff !important; font-size: 12.5px !important; font-weight: 700 !important; text-align: center !important; }
#svc3 .g4-filter button[aria-pressed="true"] { background: #fff !important; color: var(--deep) !important; }
#svc3 .g4-chap .sv-explore { margin-top: auto !important; background: #fff !important; color: var(--deep) !important; align-self: flex-start !important; }
#svc3 .g4-chap .sv-explore i { background: var(--wash) !important; }
#svc3 .g4-chap .sv-explore:hover { background: var(--tint) !important; }
#svc3 .g4-chap .sv-plats + .sv-explore, #svc3 .g4-chap .g4-filter + .sv-explore { margin-top: auto !important; }
#svc3 .g4-chap > .sv-explore { margin-top: max(24px, auto) !important; }

#svc3 .g4-card { width: 330px !important; display: flex !important; flex-direction: column !important; background: var(--tint) !important; }
#svc3 .g4-card .s3-mock { width: calc(100% - 28px) !important; margin: 14px 14px 0 !important; box-shadow: 0 0 0 1px var(--edge) !important; }
#svc3 .g4-cb { padding: 18px 20px 20px !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
#svc3 .g4-cb h4 { font-size: 19px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.012em !important; color: var(--ink) !important; }
#svc3 .g4-cu { margin-top: 8px !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--ink2) !important; }
#svc3 .g4-cu b { color: var(--deep) !important; }
#svc3 .g4-cd { margin-top: 10px !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--mute) !important; }
#svc3 .g4-cb .sv-specs { margin-top: auto !important; padding-top: 16px !important; }
#svc3 .g4-cb .sv-spec { grid-template-columns: 1fr !important; gap: 3px !important; padding: 10px 0 !important; }
#svc3 .g4-cb .sv-spec dd { font-size: 13.5px !important; }

#svc3 .g4-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-top: 20px !important; }
#svc3 .g4-now { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; }
#svc3 .g4-now .sv-mark { width: 36px !important; height: 36px !important; background: var(--wash) !important; }
#svc3 .g4-now b { font-size: 16px !important; font-weight: 750 !important; color: var(--deep) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

@media (max-width: 1000px) { #svc3 .g4-sl b { font-size: 13px !important; } #svc3 .g4-sl .sv-mark { display: none !important; } }

@media (max-width: 760px) {
  #svc3 .g4-map { height: 44px !important; gap: 3px !important; }
  #svc3 .g4-seg { flex: 1 1 0 !important; }
  #svc3 .g4-sl { justify-content: center !important; padding: 0 !important; }
  #svc3 .g4-sl .sv-mark { display: inline-grid !important; width: 26px !important; height: 26px !important; }
  #svc3 .g4-sl b { display: none !important; }
  #svc3 .g4-strip { gap: 10px !important; margin-top: 12px !important; }
  #svc3 .g4-chap { width: 82vw !important; padding: 24px 20px 22px !important; }
  #svc3 .g4-chap h3 { font-size: 26px !important; margin-top: 22px !important; }
  #svc3 .g4-card { width: 82vw !important; }
  #svc3 .g4-now b { font-size: 14.5px !important; }
}


#svc3 .h1-block { margin-top: 30px !important; scroll-margin-top: calc(var(--hdr, 108px) + 90px) !important; }
#svc3 .h1-block + .h1-block { margin-top: 56px !important; }
#svc3 .h1-block .g4-foot { margin-top: 18px !important; }
@media (max-width: 760px) {
  #svc3 .g4-map { padding: 8px 0 !important; }
  #svc3 .h1-block { margin-top: 20px !important; }
  #svc3 .h1-block + .h1-block { margin-top: 40px !important; }
  #svc3 .h1-block .g4-foot { margin-top: 12px !important; }
  #svc3 .h1-block .g4-now { display: none !important; }
  #svc3 .h1-block .g4-foot { justify-content: flex-end !important; }
}


#svc3 .g4-cb .sv-specs { margin-top: auto !important; padding-top: 16px !important; }
#svc3 .g4-cb .sv-spec { grid-template-columns: 1fr !important; gap: 3px !important; padding: 10px 0 !important; border-top-color: var(--edge) !important; }
#svc3 .g4-cb .sv-spec dd { font-size: 13.5px !important; }
#svc3 .g4-note { margin-top: 12px !important; font-size: 13.5px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, .88) !important; }
#svc3 .g4-chap > .sv-explore { margin-top: auto !important; }
#svc3 .g4-chap > p + .sv-plats, #svc3 .g4-chap .g4-note { margin-bottom: 24px !important; }
#svc3 .g4-chap .sv-prim { background: #fff !important; color: var(--deep) !important; }


#svc3 .h1-block { display: grid !important; grid-template-columns: 360px minmax(0, 1fr) !important; column-gap: 16px !important; align-items: stretch !important; }
#svc3 .h1-block > .g4-chap { grid-column: 1 !important; grid-row: 1 !important; }
#svc3 .h1-block > .g4-strip { grid-column: 2 !important; grid-row: 1 !important; margin: 0 calc(-1 * var(--lane)) 0 0 !important; padding: 0 var(--lane) 0 0 !important; scroll-padding-left: 0 !important; }
#svc3 .h1-block > .g4-strip::after { flex: 0 0 calc(var(--lane) - 16px) !important; }
@media (max-width: 1240px) { #svc3 .h1-block { grid-template-columns: 320px minmax(0, 1fr) !important; } #svc3 .h1-block > .g4-chap { width: 320px !important; } }

@media (max-width: 760px) {
  #svc3 .h1-block { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; }
  #svc3 .h1-block > .g4-chap { grid-column: 1 !important; grid-row: 1 !important; width: auto !important; }
  #svc3 .h1-block > .g4-strip { grid-column: 1 !important; grid-row: 2 !important; margin: 0 calc(-1 * var(--lane)) !important; padding: 0 var(--lane) !important; scroll-padding-left: var(--lane) !important; }
  #svc3 .h1-block > .g4-strip::after { flex: 0 0 calc(var(--lane) - 10px) !important; }
}


#svc3 .g4-card.no-desc .g4-cb .sv-specs { margin-top: 0 !important; }


#svc3 .g4-map { margin-left: calc(-1 * var(--bleed-l, 0px)) !important; margin-right: calc(-1 * var(--bleed-r, 0px)) !important; }
#svc3 .g4-seg { flex: 1 1 0 !important; }

#svc3 .g4-seg[aria-current="true"] { background: color-mix(in oklab, var(--hue) 17%, #fff) !important; }


#svc3 .g4-cb { padding: 16px 18px 16px !important; }
#svc3 .g4-cb h4 { margin: 0 !important; }
#svc3 .g4-cb .g4-cu { margin: 10px 0 0 !important; }
#svc3 .g4-cb .g4-cd { margin: 10px 0 0 !important; }
#svc3 .g4-card.no-desc .g4-cb .sv-specs { margin-top: 0 !important; padding-top: 10px !important; }
#svc3 .g4-cb .sv-specs { padding-top: 12px !important; }
#svc3 .g4-cb .sv-spec { padding: 8px 0 !important; }
#svc3 .g4-cb .sv-spec:last-child { padding-bottom: 0 !important; }

#svc3 #h1-social-media .g4-cb .sv-specs { margin-top: 0 !important; }

#svc3 .g4-chap .g4-ct > span:not(.sv-mark) { display: none !important; }

#svc3 .g4-chap > p + .sv-plats { margin-bottom: 20px !important; }
#svc3 .g4-chap .g4-filter {
  margin-top: 0 !important; padding: 14px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .28) !important;
  display: flex !important; gap: 0 !important;
}
#svc3 .g4-chap .g4-filter {
  --trk: rgba(255, 255, 255, .16) !important;
}
#svc3 .g4-chap .g4-filter button {
  flex: 1 1 auto !important; height: 34px !important; padding: 0 10px !important; margin: 0 !important; background: transparent !important; color: rgba(255, 255, 255, .92) !important;
  font-size: 12.5px !important; font-weight: 650 !important; text-align: center !important; white-space: nowrap !important; transition: background-color .3s ease, color .3s ease !important;
}
#svc3 .g4-chap .g4-filter button:hover { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
#svc3 .g4-chap .g4-filter button[aria-pressed="true"] { background: #fff !important; color: var(--deep) !important; font-weight: 800 !important; }
#svc3 .g4-chap .g4-filter button:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }

#svc3 .g4-chap .g4-filter { background: linear-gradient(var(--trk), var(--trk)) 0 14px / 100% calc(100% - 14px) no-repeat !important; box-shadow: none !important; }
#svc3 .g4-chap .g4-filter button { border: 4px solid transparent !important; height: 42px !important; background-clip: padding-box !important; }
#svc3 .g4-chap .g4-note { margin-top: 8px !important; margin-bottom: 24px !important; }
#svc3 .g4-chap .g4-filter button { flex: 1 1 auto !important; min-width: 0 !important; padding: 0 7px !important; border-width: 3px !important; height: 40px !important; }
#svc3 .g4-chap .g4-filter { background-size: 100% calc(100% - 14px) !important; }
#svc3 .g4-chap .g4-filter button { white-space: normal !important; line-height: 1.15 !important; overflow-wrap: normal !important; }

#svc3 .g4-chap > p + .sv-plats { margin-bottom: 14px !important; }
#svc3 .g4-chap .g4-flabel { margin: 0 0 6px !important; font-size: 12px !important; line-height: 14px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, .88) !important; }
#svc3 .g4-chap .g4-filter { border-top: 0 !important; padding: 3px !important; gap: 3px !important; background: rgba(255, 255, 255, .2) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }
#svc3 .g4-chap .g4-filter button { border: 0 !important; height: 34px !important; padding: 0 8px !important; background: transparent !important; color: #fff !important; font-weight: 700 !important; }
#svc3 .g4-chap .g4-filter button:hover { background: rgba(255, 255, 255, .16) !important; }
#svc3 .g4-chap .g4-filter button[aria-pressed="true"] { background: #fff !important; color: var(--deep) !important; font-weight: 800 !important; }
#svc3 .g4-chap .g4-note { margin-top: 8px !important; }

@media (max-width: 760px) {
  #svc3 .h1-block { row-gap: 0 !important; margin-left: calc(-1 * var(--lane)) !important; margin-right: calc(-1 * var(--lane)) !important; background: color-mix(in oklab, var(--hue) 9%, #fff) !important; }
  
  #svc3 .h1-block > .g4-chap { padding: 22px 16px 18px !important; }
  #svc3 .h1-block > .g4-strip { margin: 0 !important; padding: 12px 0 16px 16px !important; gap: 8px !important; scroll-padding-left: 16px !important; }
  #svc3 .h1-block > .g4-strip::after { flex: 0 0 8px !important; }
  #svc3 .h1-block .g4-card { width: calc(100% - 16px - 30px) !important; flex: 0 0 calc(100% - 16px - 30px) !important; background: #fff !important; }
}

@media (max-width: 760px) {
  #svc3 .g4-map { top: calc(var(--hdr-x, var(--hdr, 104px)) - 1px) !important; padding-top: 9px !important; margin-top: -1px !important; }
}


@media (min-width: 761px) {
  #svc3 .g4-map { top: calc(var(--hdr-x, var(--hdr, 108px)) - 1px) !important; padding-top: 11px !important; margin-top: -1px !important; }
}

}

/* ==== services.css · layer 2 of 6 ==== */
/* LIVE 2026-09-26 · homepage "Our Services" = 06 Edge to Edge (✦✦ Triple surprise of round 4, [archived]).
   Copied from [archived] with the preview class `html.d4-master` replaced by `html:not(.svc-edge-off)`,
   the same specificity, so the live cascade matches the preview exactly. Sits on top of [archived].
   Undo: delete the <link> + <script> lines marked "Edge to Edge" in index.html, or restore
   [archived]. */
/* h4-svc · master — generated; scoped to html:not(.svc-edge-off), inside the live svcfilm layer.
   06 · Triple surprise · Edge to Edge — the master composition: each service's colour enters from the page's
   left edge as a soft chapter plate and its drawings run to the page's right edge on large white cards; one strict
   heavy/light type hierarchy; tabs as a soft colour index; a sky, lavender, blush, mint and peach mood. */
@layer svcfilm {

html:not(.svc-edge-off) body #svc3#svc3#svc3 *, html:not(.svc-edge-off) body #svc3#svc3#svc3 *::before, html:not(.svc-edge-off) body #svc3#svc3#svc3 *::after {transition:none !important; animation:none !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-strip {scroll-behavior:auto !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .sv-explore:hover svg {transform:none !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-fill {display:none !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .sv-explore i {box-shadow:none !important}

html:not(.svc-edge-off) body #svc3#svc3#svc3 #h1-google-ads, html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg:nth-child(1) {--ml:#DFE9FB !important; --mp:#EEF3FD !important; --md:#C9D9F7 !important; --mi:#1B3E8A !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 #h1-meta-ads, html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg:nth-child(2) {--ml:#E9E4FA !important; --mp:#F4F1FD !important; --md:#D8CEF5 !important; --mi:#48319A !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 #h1-social-media, html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg:nth-child(3) {--ml:#F9E3EA !important; --mp:#FCF1F4 !important; --md:#F1CDDA !important; --mi:#8C2150 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 #h1-landing-pages, html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg:nth-child(4) {--ml:#DFF2E6 !important; --mp:#EFF8F3 !important; --md:#C4E5D2 !important; --mi:#1B6742 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 #h1-websites, html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg:nth-child(5) {--ml:#FAE9DC !important; --mp:#FDF4EC !important; --md:#F0D5BF !important; --mi:#7B4419 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 section.s3-svc {background:#F6F8FB !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .s3-head .s3-eyebrow {font-family:inherit !important; font-size:14px !important; font-weight:650 !important; letter-spacing:.01em !important; text-transform:none !important; color:#5A6678 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 #svcTitle {font-size:48px !important; font-weight:800 !important; letter-spacing:-.042em !important; line-height:1.04 !important; color:#0E1E35 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 #svcTitle i {color:#A9BCEB !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .s3-head .s3-sub {font-size:18px !important; font-weight:300 !important; line-height:1.55 !important; color:#33425A !important; max-width:600px !important}


html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-map {background:#F6F8FB !important; gap:4px !important; height:60px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg {background:var(--mp) !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-sl {padding:0 18px !important; gap:12px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-sl .sv-mark {background:transparent !important; width:24px !important; height:24px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-sl .sv-mark svg {width:21px !important; height:21px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-sl b {font-size:15.5px !important; font-weight:400 !important; color:#33425A !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg[aria-current="true"] {background:var(--md) !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg[aria-current="true"] .g4-sl b {color:var(--mi) !important; font-weight:800 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-seg:hover:not([aria-current="true"]) {background:var(--ml) !important}


html:not(.svc-edge-off) body #svc3#svc3#svc3 .h1-block > .g4-chap {width:auto !important; margin-left:calc(-1 * var(--lane)) !important; padding:34px 28px 28px calc(var(--lane) + 28px) !important; background:var(--ml) !important; color:#0E1E35 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-ct .sv-mark {width:50px !important; height:50px !important; background:transparent !important; justify-items:start !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-ct .sv-mark svg {width:46px !important; height:46px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap h3.g4-title {margin-top:34px !important; font-size:33px !important; font-weight:800 !important; line-height:1.07 !important; letter-spacing:-.034em !important; color:#0E1E35 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-prim {background:#fff !important; color:var(--mi) !important; letter-spacing:.12em !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap > p:not(.g4-flabel):not(.g4-note) {margin-top:16px !important; font-size:17px !important; font-weight:300 !important; line-height:1.55 !important; color:#1D2B42 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-plats {gap:6px !important; margin-top:22px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-plats .s3-chip {height:36px !important; padding:0 13px !important; background:#fff !important; border:0 !important; gap:10px !important; font-size:14px !important; font-weight:650 !important; color:#1D2B42 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-plats .s3-chip svg, html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-plats .s3-lg {width:18px !important; height:18px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap > p + .sv-plats {margin-bottom:20px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .g4-flabel {color:var(--mi) !important; letter-spacing:.14em !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .g4-filter {background:var(--mp) !important; box-shadow:none !important; padding:4px !important; gap:4px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .g4-filter button {color:#33425A !important; font-weight:400 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .g4-filter button:hover {background:#fff !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .g4-filter button[aria-pressed="true"] {background:#fff !important; color:var(--mi) !important; font-weight:800 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .g4-filter button:focus-visible {outline-color:var(--mi) !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .g4-note {color:#33425A !important; font-weight:300 !important; font-size:16px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-explore {align-self:stretch !important; justify-content:space-between !important; height:58px !important; padding:0 0 0 22px !important; background:#fff !important; color:#0E1E35 !important; font-size:16.5px !important; font-weight:800 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-explore i {background:var(--md) !important; width:58px !important; height:58px !important; color:var(--mi) !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-explore svg {width:20px !important; height:20px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-explore:hover {background:var(--mp) !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap .sv-explore:focus-visible {outline:2px solid var(--mi) !important; outline-offset:-4px !important}


html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-card {width:420px !important; background:#fff !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-card .s3-mock {margin:26px 26px 0 !important; width:calc(100% - 52px) !important; box-shadow:0 0 0 26px var(--ml) !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb {padding:50px 26px 28px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb h4 {font-size:23px !important; font-weight:800 !important; letter-spacing:-.026em !important; line-height:1.18 !important; color:#0E1E35 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .g4-cu {margin-top:12px !important; font-size:16px !important; font-weight:750 !important; line-height:1.35 !important; color:#0E1E35 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .g4-cu b {display:block !important; margin-bottom:2px !important; font-size:14px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--mi) !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .g4-cd {margin-top:12px !important; font-size:15.5px !important; font-weight:300 !important; line-height:1.55 !important; color:#1D2B42 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .sv-specs {padding-top:18px !important; gap:12px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .sv-spec {grid-template-columns:122px minmax(0,1fr) !important; gap:12px !important; padding:0 !important; border-top:0 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .sv-spec:last-child {padding-bottom:0 !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .sv-spec dt {font-size:11.5px !important; letter-spacing:.07em !important; line-height:1.5 !important; color:var(--mi) !important; padding-top:2px !important}
html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .sv-spec dd {font-size:14.5px !important; font-weight:650 !important; line-height:1.45 !important; color:#0E1E35 !important}

@media (max-width:1240px) {
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .h1-block > .g4-chap {width:auto !important}
}
@media (max-width:760px) {
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-map {height:52px !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .h1-block {background:var(--mp) !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .h1-block > .g4-chap {margin-left:0 !important; padding:28px 16px 22px !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-ct .sv-mark {width:44px !important; height:44px !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-ct .sv-mark svg {width:40px !important; height:40px !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-chap h3.g4-title {margin-top:22px !important; font-size:28px !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .h1-block > .g4-strip {padding-top:14px !important; padding-bottom:18px !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .h1-block .g4-card {background:#fff !important; width:calc(100% - 46px) !important; flex:0 0 calc(100% - 46px) !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-card .s3-mock {margin:14px 14px 0 !important; width:calc(100% - 28px) !important; box-shadow:0 0 0 14px var(--ml) !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb {padding:34px 18px 22px !important}
  html:not(.svc-edge-off) body #svc3#svc3#svc3 .g4-cb .sv-spec {grid-template-columns:minmax(0,1fr) !important; gap:2px !important}
}

}

/* ==== services.css · layer 3 of 6 ==== */
/* LIVE 2026-09-26 · homepage "Our Services" card content = 05 "Run-in" (approved preview
   [archived], compared at [archived]).
   Only the card's information block: Best for / description / Purpose · Special Features · Benefits
   (Platforms · Service Focus). Sits on top of [archived] and [archived], in the
   same `svcfilm` layer. Undo: delete the <link> + <script> lines marked "Run-in" in index.html, or
   restore [archived]. Regenerate with [archived]. */
@layer svcfilm {

body #svc3#svc3#svc3#svc3 .g4-cb .sv-specs {margin-top: 0 !important; padding-top: 0 !important; gap: 0 !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec {padding: 0 !important; border-top: 0 !important; gap: 0 !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec:last-child {padding-bottom: 0 !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec dt {padding-top: 0 !important; margin: 0 !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec dd {margin: 0 !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .g4-cu, body #svc3#svc3#svc3#svc3 .g4-cb .g4-cd {min-height: 0 !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .g4-cu {align-content: start !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .g4-cu, body #svc3#svc3#svc3#svc3 .g4-cb .g4-cd, body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec, body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec dd {text-wrap: pretty !important;}
body #svc3#svc3#svc3#svc3 .g4-cb h4 {display: flex !important; flex-direction: column !important; justify-content: flex-end !important;}
@media (max-width: 760px) {
  body #svc3#svc3#svc3#svc3 .g4-cb h4, body #svc3#svc3#svc3#svc3 .g4-cb .g4-cu, body #svc3#svc3#svc3#svc3 .g4-cb .g4-cd {min-height: 0 !important;}
}
body #svc3#svc3#svc3#svc3 .g4-cb .g4-cd {order: 1 !important; margin: 10px 0 0 !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .g4-cu {order: 2 !important; margin: 18px 0 0 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; color: #0E1E35 !important;}
body #svc3#svc3#svc3#svc3 .g4-card.no-desc .g4-cb .g4-cu {margin-top: 16px !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .g4-cu b {display: inline !important; margin: 0 .2em 0 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 800 !important; line-height: inherit !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mi) !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-specs {order: 3 !important; display: grid !important; row-gap: 10px !important; margin-top: 10px !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec {display: block !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec dt {display: inline-block !important; margin: 0 .45em 0 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: lowercase !important; color: var(--mi) !important; white-space: nowrap !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec dt::first-letter {text-transform: uppercase !important;}
body #svc3#svc3#svc3#svc3 .g4-cb .sv-spec dd {display: inline !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #1D2B42 !important;}

}

/* ==== services.css · layer 4 of 6 ==== */
/* LIVE 2026-10-01 · homepage "Our Services": the five-service bar is REMOVED, on phones and on desktop
   (owner: "this bar is making confusion … it is not required … remove from mobile and desktop both").

   How it was removed: index.html no longer loads [archived] and [archived]
   ("Intent Reveal"), so the bar (.fz7-row) is never built. Nothing in that folder was edited or deleted.
   This sheet says the two things that then need saying, and nothing else:
   · the OLDER five-tab map (.g4-map, built by assets/home/services/filmstrip.js) stays hidden.
     Intent Reveal's sheet used to hide it; without that rule it would come back as a second bar.
   · the first service keeps a deliberate distance from the section heading, now that no bar sits
     between them (Intent Reveal's sheet used to set this margin against the bar).
   No rule here selects a card, a panel or anything inside a service.

   Sits in the same `svcfilm` layer as the other Services packages, at eight ids so it wins without
   touching them.

   UNDO: in index.html put back the two "Intent Reveal" lines (the <link> in <head> and the <script>
   after the Services section) and delete the "No bar" <link>; or restore the copies in
   [archived] (index.html, DEPLOY-MANIFEST.txt). */
@layer svcfilm {

body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-map,
body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .fz7-row,
body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .fz7-sense { display: none !important; }

body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block:first-of-type { margin-top: 32px !important; }
@media (max-width: 760px) {
  body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block:first-of-type { margin-top: 24px !important; }
}

}

/* ==== services.css · layer 5 of 6 ==== */
/* LIVE 2026-09-27 (with assets/shared/design/grid-wide.css, the approved master-grid Option 3) · homepage "Our Services" on the master grid — left/right alignment only.
   Sits on top of [archived], -edge/, -runin/ and -reveal/, in the same `svcfilm` layer, with a higher
   specificity (6 ids) so it wins without touching those packages. Undo: delete the <link> marked "master grid".

   What it corrects: the section's lane `--lane` is `--grid-edge`, which contains a 100%. Inside a service block
   that 100% is the block's width, not the page's, so the colour tile's left bleed and the card strip's right bleed
   land on a private edge — 168px at 1920 (page grid 240), the screen edge at 1440 (page grid 57.6).
   Desktop/tablet: the tile and the strip now start and end on the page grid (the header's own lines); the tile keeps
   its 28px inner padding, so its text does not move or rewrap. Phones: the full-width colour band stays, and the
   tile, cards and service row now start on the page gutter (18px, like every other section), not 16px. */
@layer svcfilm {

@media (min-width: 761px) {
  body #svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap { margin-left: 0 !important; padding-left: 28px !important; }
  /* 1px of end room: with none, at 761–820px (a 420px card wider than the strip, fractional strip width) the
     snap settles on the last card's start and its right side can never be scrolled into view */
  body #svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-strip { margin-right: 0 !important; padding-right: 1px !important; }
  body #svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-strip::after { display: none !important; }
}

@media (max-width: 760px) {
  body #svc3#svc3#svc3#svc3#svc3#svc3 .fz7-row { padding-left: var(--lane) !important; padding-right: var(--lane) !important; }
  body #svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap { padding-left: var(--lane) !important; padding-right: var(--lane) !important; }
  body #svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-strip { padding-left: var(--lane) !important; scroll-padding-left: var(--lane) !important; }
  /* same card width as before (it was 100% - 46px of a strip inset 16px) */
  body #svc3#svc3#svc3#svc3#svc3#svc3 .h1-block .g4-card { width: calc(100% - 62px + var(--lane)) !important; flex: 0 0 calc(100% - 62px + var(--lane)) !important; }
}

}

/* ==== services.css · layer 6 of 6 ==== */
/* LIVE 2026-10-01 · homepage "Our Services" containers = "One Plane" (owner's pick: option 21 of
   [archived]; its desktop is option 18 "Base Rail" of [archived]).

   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 [archived], -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
   [archived] lines in DEPLOY-MANIFEST.txt), or restore the copies in
   [archived]. */
@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; }
}

}

/* ==== services.css · addition, 2026-10-05 ==== */
/* LIVE 2026-10-05 · homepage "Our Services" spacing = Option 2 "Spacing based on relationships" (owner's pick of
   ten options compared in the Our Services compact lab, kept outside this package).

   What it does, and nothing else: the gaps inside a service shrink and the gap between services grows, so
   distance says what belongs together and each service reads as one block. Gaps used (≤760px / ≥761px):
     tight pairs — card title → its text, spec rows, title → description: 6–8px / 6–10px
     one group — service mark → title, text → "Best for", description → chips, bar → button: 10–14px / 14–20px
     the groups of one service — intro → cards, drawing → card title, cards → bar: 14–16px / 16px
     between services: 48px / 56px (was 30px / 32px)
   Measured on the real page: phone section 5,646 → 5,286px at 390 (−360; each service 84–94px shorter),
   desktop 3,864 → 3,830px at 1440; no sideways scroll, no clipped or overlapping text, no smaller text
   or touch targets at 320–1920px.
   No size, colour, order, wording or link changes — gap values only. Every rule waits for html.svc-plane
   (set by plane.js), like the One Plane rules above, so without the script nothing here applies.
   Nine ids: one more than the highest rule above (eight), so it wins without editing the layers above.

   UNDO: delete from the blank line above the "addition, 2026-10-05" line to the end of this file;
   that restores the file byte for byte (then refresh the deploy freeze). */
@layer svcfilm {

/* ---- 760px and narrower (phones and portrait tablets) ---- */
@media (max-width: 760px) {
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block + .h1-block { margin-top: 48px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap { padding-top: 20px !important; padding-bottom: 0 !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-chap h3.g4-title { margin-top: 12px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-chap > p:not(.g4-flabel):not(.g4-note) { margin-top: 8px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-chap .sv-plats { margin-top: 14px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap > .g4-flabel { margin-top: 16px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-chap .g4-note { margin-top: 6px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-strip { padding-top: 16px !important; padding-bottom: 14px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb { padding-top: 30px !important; padding-bottom: 16px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb .g4-cd { margin-top: 6px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb .g4-cu { margin-top: 12px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-card.no-desc .g4-cb .g4-cu { margin-top: 8px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb .sv-specs { margin-top: 6px !important; row-gap: 6px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .pl-base { padding-bottom: 20px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .pl-base > .pl-cta { margin-top: 10px !important; }
}

/* ---- 761px and wider: the same tiers ---- */
@media (min-width: 761px) {
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block + .h1-block { margin-top: 56px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .h1-block > .g4-chap { padding-top: 28px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-chap h3.g4-title { margin-top: 20px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-chap > p:not(.g4-flabel):not(.g4-note) { margin-top: 10px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-chap .sv-plats { margin-top: 16px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb { padding-top: 42px !important; padding-bottom: 22px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb .g4-cd { margin-top: 8px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb .g4-cu { margin-top: 14px !important; }
  html.svc-plane body #svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3#svc3 .g4-cb .sv-specs { margin-top: 8px !important; row-gap: 6px !important; }
}

}