/* Brand: turquoise blue and white, in the flat Fraunhofer manner —
   white page, one solid colour band, solid caption boxes, flat colour tiles, natural photos.
   Loaded last on every page. */
:root {
  --tq-1: #0b8fa8;   /* solid turquoise — nav band, caption box, primary tiles */
  --tq-2: #1fb3cc;   /* mid turquoise — tiles, highlights */
  --tq-3: #5cc8d6;   /* light turquoise — tiles */
  --tq-text: #2f3a3d;
  --tq-body: #55605f;
  --tq-pale: #eef8fa;
}

body { color: var(--tq-body); }

/* ---- Header: white logo row, solid turquoise navigation band */
@media (min-width: 900px) {
  .site-header .nav-bar {
    background: var(--tq-1) !important;
    border: 0 !important;
  }
  .site-header .nav-bar a {
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
  }
  .site-header .nav-bar a:hover,
  .site-header .nav-bar a[aria-current="page"] { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
  .site-header .nav-util-links a { color: var(--tq-1) !important; }
}

/* ---- Hero: solid caption box, white outline buttons, natural photos */
.home .hero-stage { background: #dfe9eb !important; }
.home .hero-slide .hero-card,
.home .hero-slide--photo .hero-card {
  background: rgba(11, 143, 168, 0.88) !important;
  border: 0 !important;
  clip-path: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.home .hero-slide .hero-card h1,
.home .hero-slide .hero-card h2,
.home .hero-slide .hero-card p,
.home .hero-card .hl { color: #fff !important; }
.home .hero-card .hl::after { filter: brightness(10); opacity: 0.7; }
.home .hero-slide .hero-kicker { color: rgba(255, 255, 255, 0.85) !important; }
.home .hero-slide .hero-kicker hr { border-color: rgba(255, 255, 255, 0.7) !important; background: rgba(255, 255, 255, 0.7) !important; }
.home .hero-proof, .home .hero-proof span { color: rgba(255, 255, 255, 0.85) !important; border-color: rgba(255, 255, 255, 0.3) !important; }
.home .hero-slide .hero-card .hero-cta,
.home .hero-slide .hero-card .btn-line {
  background: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}
.home .hero-slide .hero-card .hero-cta:hover,
.home .hero-slide .hero-card .btn-line:hover { background: #fff !important; color: var(--tq-1) !important; }
.home .hero-slide .hero-card .btn-line--ghost { border-color: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.7) !important; }

.hs-kb img { filter: none !important; }
.hs-photo::after { background: none !important; }
.hs-credit { color: #fff !important; }
.hs-credit span { color: #fff !important; }
.hs-pager { border-top-color: rgba(255, 255, 255, 0.35) !important; }
.hs-count, .hs-count b { color: #fff !important; }
.hs-segs button::before { background: rgba(255, 255, 255, 0.4) !important; }
.hs-segs button i { background: #fff !important; }
.hs-arrows button { border-color: rgba(255, 255, 255, 0.7) !important; color: #fff !important; }
.hs-arrows button:hover { background: #fff !important; color: var(--tq-1) !important; }

/* ---- Type on white: headings in turquoise, body in grey */
.s-title { color: var(--tq-text) !important; }
.s-title .hl, .s--light .s-title .hl {
  color: var(--tq-1) !important;
  -webkit-text-fill-color: currentColor;
  background-image: none !important;
}
.s-eyebrow, .s-eyebrow span { color: var(--tq-1) !important; }
.s-lede { color: var(--tq-body) !important; }
.s-proof__stats b, .scm-scale__stats b { color: var(--tq-1) !important; }

/* ---- Buttons on white: solid turquoise; on turquoise blocks: white outline */
.s-cta {
  background: var(--tq-1) !important;
  border: 1px solid var(--tq-1) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.s-cta:hover { background: #fff !important; color: var(--tq-1) !important; }
.scm-stage .s-cta, .scm-cta .s-cta, .s--dark .s-cta { background: transparent !important; border-color: #fff !important; color: #fff !important; }
.scm-stage .s-cta:hover, .scm-cta .s-cta:hover, .s--dark .s-cta:hover { background: #fff !important; color: var(--tq-1) !important; }
.pp-btn.is-on { background: var(--tq-1) !important; border-color: var(--tq-1) !important; color: #fff !important; }

/* ---- Product-page stage: one flat turquoise field, no glow, no grid */
.scm-stage__bg { background: var(--tq-1) !important; }
.scm-stage .s-title, .scm-stage .s-title .hl, .scm-stage .s-lede, .scm-stage .s-eyebrow, .scm-stage .s-eyebrow span,
.scm-stage .crumbs, .scm-stage .crumbs a, .scm-stage__facts, .scm-stage__facts b, .scm-stage .scm-link { color: #fff !important; }
.scm-stage .s-title .hl::after { filter: brightness(10); }
.pp-scene__frame { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.35) !important; }

/* ---- Flat colour tiles: alternate the three turquoise tones like the reference teaser row */
.sigs > *:nth-child(3n + 1), .dms-alerts > li:nth-child(3n + 1) { --tile: var(--tq-1); }
.sigs > *:nth-child(3n + 2), .dms-alerts > li:nth-child(3n + 2) { --tile: var(--tq-2); }
.sigs > *:nth-child(3n + 3), .dms-alerts > li:nth-child(3n + 3) { --tile: var(--tq-3); }

/* ---- Footer: white, turquoise links */
.site-footer { background: #fff !important; color: var(--tq-body) !important; border-top: 4px solid var(--tq-1) !important; }
.site-footer a { color: var(--tq-1) !important; }
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer strong { color: var(--tq-text) !important; }

.home .hero-slide .hero-collage::after,
.home .hero-mosaic::after { background: none !important; }

/* ---- Photo panels as flat teaser tiles: natural photo on top, solid colour block below */
body.home .sig, body.home .steps li { background: var(--tile, var(--tq-1)) !important; }
body.home .sig:nth-child(4n + 1), body.home .steps li:nth-child(4n + 1) { --tile: var(--tq-1); }
body.home .sig:nth-child(4n + 2), body.home .steps li:nth-child(4n + 2) { --tile: var(--tq-2); }
body.home .sig:nth-child(4n + 3), body.home .steps li:nth-child(4n + 3) { --tile: #3aa6b9; }
body.home .sig:nth-child(4n + 4), body.home .steps li:nth-child(4n + 4) { --tile: var(--tq-3); }
body.home .sig::before, body.home .steps li::before { display: none !important; }
body.home .sig .art-img, body.home .steps li .art-img {
  inset: 0 0 auto 0 !important;
  height: 50% !important;
  filter: none !important;
}
body.home .sig:hover .art-img, body.home .steps li:hover .art-img { filter: none !important; transform: scale(1.04); }
body.home .sig__icon { background: var(--tile) !important; border-color: #fff !important; backdrop-filter: none !important; }
body.home .sig__n, body.home .steps b { color: rgba(255, 255, 255, 0.9) !important; }
body.home .sig p, body.home .steps li p { color: #fff !important; }
body.home .sig::after { background: #fff !important; }

/* ---- Comparison cards: flat tiles — grey for "the usual way", turquoise for Autowhat */
body.home .vs__card { background: #7c8a8d !important; }
body.home .vs__card--aw { background: var(--tq-1) !important; }
body.home .vs__card::before, body.home .vs__card--aw::before { display: none !important; }
body.home .vs__card .art-img { inset: 0 0 auto 0 !important; height: 42% !important; filter: grayscale(1) !important; }
body.home .vs__card--aw .art-img { filter: none !important; }
body.home .vs__card li, body.home .vs__card--aw li, body.home .vs__card .vs__tag, body.home .vs__card--aw .vs__tag { color: #fff !important; }

/* ---- Contact banner: natural photo, solid turquoise form panel */
body.home .s-contact .art-bg img { filter: none !important; }
body.home .vs__card { min-height: 500px !important; }
body.home .vs__card .art-img { height: 165px !important; }
.scm-stage { background: var(--tq-1) !important; }

/* ==========================================================================
   Products — suite tiles + flat teaser tiles (photo on top, solid colour block below)
   ========================================================================== */
.pt-suites {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px !important;
  margin: 8px 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
@media (min-width: 760px) { .pt-suites { grid-template-columns: repeat(5, 1fr); } }
.pt-suites [data-tab] {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 12px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 18px 20px !important;
  text-align: left !important;
  background: var(--c) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.pt-suites [data-tab]::after { display: none !important; }
.pt-suites [data-tab]:hover { opacity: 0.85; }
.pt-suites [data-tab][aria-selected="true"] { opacity: 1; }
/* Selected suite: a white notch pointing down at its products */
.pt-suites [data-tab][aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -1px;
  border: 9px solid transparent;
  border-bottom-color: #fff;
}
.pt-suites [data-tab] b { grid-row: span 2; font: 500 40px/0.9 "Newsreader", Georgia, serif; color: inherit; }
.pt-suites [data-tab] span { font: 600 15px/1.2 "Source Sans 3", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: inherit; }
.pt-suites [data-tab] em { font-style: normal; font-size: 12.5px; line-height: 1.3; color: inherit; opacity: 0.85; }
/* "All" tile: white with a turquoise frame */
.pt-suites [data-tab="all"] { background: #fff !important; color: var(--tq-1) !important; box-shadow: inset 0 0 0 2px var(--tq-1); opacity: 0.7; }
.pt-suites [data-tab="all"][aria-selected="true"] { opacity: 1; }
.pt-suites [data-tab="all"][aria-selected="true"]::before { border-bottom-color: var(--tq-1); }
.pt-suites [data-tab]:focus-visible { outline: 3px solid var(--tq-2); outline-offset: 2px; }

.pt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-top: 16px;
}
@media (min-width: 560px) { .pt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .pt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .pt-grid { grid-template-columns: repeat(4, 1fr); } }
.pt {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none !important;
  background: var(--c);
  animation: pt-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 0.04s);
}
@keyframes pt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pt__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e7f0f2; }
.pt__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pt:hover .pt__img img { transform: scale(1.05); }
.pt__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; color: #fff; }
.pt__code { font: 600 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.pt h3 { margin: 0; font: 500 23px/1.12 "Newsreader", Georgia, serif; color: #fff; }
.pt h3 small { display: block; margin-top: 4px; font: 600 14px/1.3 "Source Sans 3", sans-serif; opacity: 0.9; }
.pt p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.pt__more {
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 14px;
  border: 1px solid #fff;
  font: 600 11px/1 "Source Sans 3", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pt:hover .pt__more, .pt:focus-visible .pt__more { background: #fff; color: var(--c); }
.pt:focus-visible { outline: 3px solid var(--tq-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pt { animation: none; } .pt__img img { transition: none; } }
.pt--custom { background: #fff; box-shadow: inset 0 0 0 2px var(--tq-1); justify-content: center; }
.pt--custom .pt__body { color: var(--tq-1); justify-content: center; padding: 26px 28px; }
.pt--custom h3, .pt--custom h3 small { color: var(--tq-text); }
.pt--custom .pt__more { border-color: var(--tq-1); color: var(--tq-1); margin-top: 8px; }
.pt--custom:hover .pt__more { background: var(--tq-1); color: #fff; }
@media (min-width: 860px) and (max-width: 1179px) { .pt--custom { grid-column: span 2; } }
@media (min-width: 1180px) { .pt--custom { grid-column: span 3; } }

/* ==========================================================================
   Kepler twin — full-bleed screen, clear glass overlays (no turquoise layer)
   ========================================================================== */
body.home .s-twin { overflow: visible !important; }
body.home .s-twin .tw:not(.tw--v2) {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #0d1013 !important;
  --tw-bg: rgba(8, 11, 14, 0.46);
  --tw-line: rgba(255, 255, 255, 0.1);
}
body.home .s-twin .tw__stage { height: clamp(560px, 84vh, 880px) !important; }
body.home .s-twin .tw__scenes {
  background: #0d1013 !important;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.home .s-twin .tw__scenes button { background: transparent !important; color: rgba(255, 255, 255, 0.7) !important; position: relative; }
body.home .s-twin .tw__scenes button[aria-selected="true"] { color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; box-shadow: inset 0 -2px 0 var(--tq-2) !important; }
/* Tour progress on the active scene */
body.home .s-twin .tw.is-touring .tw__scenes button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(var(--tw-dwell, 0) * 100%);
  background: #fff; transition: width 1s linear;
}
body.home .s-twin .tw__scenes button em { color: rgba(255, 255, 255, 0.45) !important; }
/* Overlays: compact, neutral glass, so the animation shows through */
body.home .s-twin .tw__title,
body.home .s-twin .tw__legend,
body.home .s-twin .tw__panel,
body.home .s-twin .tw__bar {
  background: var(--tw-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--tw-line) !important;
}
body.home .s-twin .tw__title { top: 20px; left: max(20px, calc((100vw - 1440px) / 2 + 20px)); max-width: 380px; padding: 14px 16px; }
body.home .s-twin .tw__panel { top: 20px; right: max(20px, calc((100vw - 1440px) / 2 + 20px)); bottom: auto; width: 300px; max-height: calc(100% - 250px); padding: 14px; }
body.home .s-twin .tw__legend { top: auto; bottom: 150px; right: max(20px, calc((100vw - 1440px) / 2 + 20px)); }
body.home .s-twin .tw__bar { left: max(20px, calc((100vw - 1440px) / 2 + 20px)); right: max(20px, calc((100vw - 1440px) / 2 + 20px)); bottom: 20px; }
body.home .s-twin .tw__map .maplibregl-ctrl-attrib { background: rgba(0, 0, 0, 0.45) !important; }
@media (max-width: 899px) {
  body.home .s-twin .tw__panel { display: none; }
  body.home .s-twin .tw__title { right: 20px; max-width: none; }
}

/* ---- Kepler collage: eight live map views at once */
body.home .s-twin .tw--collage { background: #fff !important; }
body.home .s-twin .twc { position: relative; height: auto !important; }
.twc__maps, .twc__deck { position: absolute; inset: 0; }
.twc__map { position: absolute; overflow: hidden; background: #0d1013; }
.twc__map .maplibregl-canvas { outline: none; }
.twc__deck { z-index: 1; }
.twc__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: clamp(660px, 94vh, 980px);
  pointer-events: none;
}
.twc__cell { position: relative; min-width: 0; min-height: 0; }
.twc__cell--trip { grid-column: 1 / 3; grid-row: 1 / 3; }
.twc__cell--arcs { grid-column: 3; grid-row: 1; }
.twc__cell--hex { grid-column: 4; grid-row: 1; }
.twc__cell--quake { grid-column: 3; grid-row: 2; }
.twc__cell--air { grid-column: 4; grid-row: 2; }
.twc__cell--delhi { grid-column: 1; grid-row: 3; }
.twc__cell--blr { grid-column: 2; grid-row: 3; }
.twc__cell--pune { grid-column: 3; grid-row: 3; }
.twc__info { grid-column: 4; grid-row: 3; }
.twc__cap {
  position: absolute;
  left: 12px;
  top: 12px;
  margin: 0;
  display: grid;
  gap: 2px;
  max-width: calc(100% - 24px);
  padding: 8px 11px;
  background: rgba(8, 11, 14, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  pointer-events: none;
}
.twc__cap b { font: 600 13.5px/1.2 "Source Sans 3", sans-serif; }
.twc__cap em { font: 500 9.5px/1.2 "IBM Plex Mono", monospace; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.twc__cap span { margin-top: 4px; font: 500 11.5px/1.35 "IBM Plex Mono", monospace; color: #fff; }
.twc__cell--trip .twc__cap { left: 18px; top: 18px; padding: 12px 14px; }
.twc__cell--trip .twc__cap b { font-size: 17px; }
.twc__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 20px;
  background: var(--tq-1);
  color: #fff;
  pointer-events: auto;
}
.twc__info p { margin: 0; }
.twc__info-k { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.twc__info-k i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: twc-live 1.6s ease-in-out infinite; }
@keyframes twc-live { 50% { opacity: 0.3; } }
.twc__info-t { font: 500 clamp(17px, 1.4vw, 21px)/1.25 "Newsreader", Georgia, serif; }
.twc__info-s { font-size: 13px; opacity: 0.9; }
.twc__info-src { font-size: 10.5px; line-height: 1.4; opacity: 0.75; }

@media (max-width: 899px) {
  .twc__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 340px repeat(3, 210px); height: auto; }
  .twc__cell--trip { grid-column: 1 / 3; grid-row: 1; }
  .twc__cell--arcs { grid-column: 1; grid-row: 2; }
  .twc__cell--hex { grid-column: 2; grid-row: 2; }
  .twc__cell--delhi { grid-column: 1; grid-row: 3; }
  .twc__cell--air { grid-column: 2; grid-row: 3; }
  .twc__cell--quake, .twc__cell--blr, .twc__cell--pune { display: none; }
  .twc__info { grid-column: 1 / 3; grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) { .twc__info-k i { animation: none; } }

/* ==========================================================================
   Industries — photo tiles with a solid colour block (flat, Fraunhofer-style)
   ========================================================================== */
.inds2 { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 3px; }
@media (min-width: 640px) { .inds2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .inds2 { grid-template-columns: repeat(4, 1fr); } }
.ind2 { display: flex; flex-direction: column; background: var(--tile); color: #fff; min-width: 0; }
.ind2__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #dfe9eb; }
.ind2__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ind2:hover .ind2__img img { transform: scale(1.05); }
.ind2__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.ind2__n { font: 600 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; opacity: 0.85; }
.ind2 h3 { margin: 0; font: 500 22px/1.15 "Newsreader", Georgia, serif; }
.ind2 h3 a { color: #fff !important; text-decoration: none; }
.ind2 h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ind2 > .ind2__body > p:not(.ind2__runs) { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.ind2__sigs { display: flex; flex-wrap: wrap; gap: 5px; }
.ind2__sigs i { padding: 3px 8px; border: 1px solid rgba(255, 255, 255, 0.75); font: 600 9.5px/1.3 "IBM Plex Mono", monospace; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.ind2__runs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: auto 0 0 !important; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.3); font-size: 13px; }
.ind2__runs span { width: 100%; font: 600 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.ind2__runs a { color: #fff !important; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px; }
.ind2__runs a:hover { text-decoration-color: #fff; }
/* The two lead sectors: photo beside the colour block */
@media (min-width: 1100px) {
  .ind2--wide { grid-column: span 2; flex-direction: row; }
  .ind2--wide .ind2__img { flex: 0 0 52%; aspect-ratio: auto; }
  .ind2--wide .ind2__body { padding: 24px 26px; }
  .ind2--wide h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .ind2__img img { transition: none; } }

/* Real UI screenshots on product tiles: anchor top-left so the sidebar and main panel show */
.pt__img img[src*="/ui-"] { object-position: left top; }

/* ---- Twin as a slider: one full map, scenes advance when their animation ends */
body.home .s-twin .tw__head { display: flex; align-items: stretch; background: #0d1013; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body.home .s-twin .tw__head .tw__scenes { flex: 1; min-width: 0; border-bottom: 0 !important; justify-content: flex-start; padding-left: max(12px, calc((100vw - 1440px) / 2 + 12px)); }
.tw__nav { display: flex; align-items: center; gap: 6px; padding: 0 max(16px, calc((100vw - 1440px) / 2 + 16px)) 0 14px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.tw__count { min-width: 64px; font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); }
.tw__arrow { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.tw__arrow:hover { background: #fff; color: #0d1013; }
.tw__arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Progress fills under the active scene for the whole slider, not only while "touring" */
body.home .s-twin .tw--slider .tw__scenes button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(var(--tw-dwell, 0) * 100%); background: #fff; transition: width 0.25s linear;
}
/* Slide transition: a dark panel sweeps across while the camera flies to the next scene */
.tw__wipe { position: absolute; inset: 0; z-index: 3; background: #0d1013; transform: translateX(-101%); pointer-events: none; }
.tw__stage.is-wiping .tw__wipe { animation: tw-wipe 0.45s cubic-bezier(0.77, 0, 0.18, 1); }
@keyframes tw-wipe { 0% { transform: translateX(-101%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@media (max-width: 899px) { .tw__count { display: none; } .tw__nav { padding-right: 12px; } }
@media (prefers-reduced-motion: reduce) { .tw__stage.is-wiping .tw__wipe { animation: none; } }

/* ==========================================================================
   Method steps — white line-art illustrations on flat turquoise (no photos)
   ========================================================================== */
body.home .steps li { min-height: 380px !important; justify-content: flex-end; }
body.home .steps li .st-art { position: absolute; inset: 0 0 auto 0; width: 100%; height: 56%; z-index: -1; }
body.home .steps li:hover .st-art { transform: none; }
.st-art text { fill: #fff; }
.st-lane { font: 600 8.5px "IBM Plex Mono", monospace; letter-spacing: 0.14em; fill: rgba(255, 255, 255, 0.75) !important; }
.st-cap { font: 600 9px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-anchor: middle; fill: rgba(255, 255, 255, 0.85) !important; }
.st-sep { stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 3 4; }

/* 1 · Understand */
.st-e { stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.4; }
.st-n { fill: var(--tile); stroke: #fff; stroke-width: 1.5; }
.st-drop { fill: #fff; animation: st-drip 1.8s ease-in infinite; transform-box: fill-box; }
@keyframes st-drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
.st-lens { animation: st-lens 7s ease-in-out infinite; }
.st-lens circle { fill: rgba(255, 255, 255, 0.16); stroke: #fff; stroke-width: 2.4; }
.st-lens line { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
@keyframes st-lens { 0%, 100% { transform: translate(48px, 52px); } 25% { transform: translate(188px, 52px); } 50% { transform: translate(154px, 124px); } 75% { transform: translate(258px, 52px); } }

/* 2 · Find gaps */
.st-work { fill: rgba(255, 255, 255, 0.85); }
.st-gap { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 4 3; animation: st-gap 1.6s ease-in-out var(--d) infinite; }
@keyframes st-gap { 50% { fill: rgba(255, 255, 255, 0.28); } }
.st-axis { stroke: rgba(255, 255, 255, 0.55); }
.st-tag rect { fill: #fff; }
.st-tag text { font: 700 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-anchor: middle; fill: var(--tile) !important; }
.st-lead { stroke: #fff; stroke-dasharray: 2 2; }
.st-watch circle, .st-watch line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.st-hand { animation: st-tick 4s linear infinite; transform-origin: 0 0; }
@keyframes st-tick { to { transform: rotate(360deg); } }

/* 3 · Transform */
.st-tangle { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.4; }
.st-arrowbig { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st-flow { stroke: #fff; stroke-width: 3; stroke-dasharray: 140; stroke-dashoffset: 140; animation: st-draw 3.6s ease-in-out infinite; }
@keyframes st-draw { 0% { stroke-dashoffset: 140; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0.4; } }
.st-step circle { fill: var(--tile); stroke: #fff; stroke-width: 2; }
.st-step path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: st-tickin 3.6s ease var(--d) infinite; }
@keyframes st-tickin { 0%, 10% { opacity: 0; } 25%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* 4 · Apply */
.st-gear { animation: st-spin 6s linear infinite; }
.st-gear rect, .st-gear circle { fill: #fff; }
.st-gear .st-hole { fill: var(--tile); }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-beat { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: st-beat 2.8s linear infinite; }
@keyframes st-beat { to { stroke-dashoffset: 0; } }
.st-log rect { fill: rgba(255, 255, 255, 0.14); stroke: rgba(255, 255, 255, 0.6); }
.st-log path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-log line { stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-linecap: round; }
.st-log { opacity: 0; animation: st-login 2.8s ease var(--d) infinite; }
@keyframes st-login { 0% { opacity: 0; transform: translateX(8px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .st-drop, .st-lens, .st-gap, .st-hand, .st-flow, .st-step path, .st-gear, .st-beat, .st-log { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .st-lens { transform: translate(154px, 124px); }
}
/* Step numbers sit with the text, not on the illustration */
body.home .steps b { position: static !important; display: block; margin: 0 0 6px !important; font: 500 26px/1 "Newsreader", Georgia, serif !important; color: rgba(255, 255, 255, 0.85) !important; }

/* ==========================================================================
   Products v2 — slim suite tabs, icon tiles (one visual language, little text)
   ========================================================================== */
.pt-suites { display: flex !important; flex-wrap: wrap; gap: 0 !important; margin: 4px 0 0 !important; border-bottom: 1px solid #d9e6e8 !important; }
.pt-suites [data-tab] {
  display: inline-flex !important; align-items: baseline; gap: 7px;
  padding: 12px 18px 13px !important; background: transparent !important; color: #55605f !important;
  opacity: 1 !important; box-shadow: none !important; border-bottom: 3px solid transparent !important; margin-bottom: -1px !important;
}
.pt-suites [data-tab]::before { display: none !important; }
.pt-suites [data-tab] em { display: none; }
.pt-suites [data-tab] b { grid-row: auto; order: 2; font: 600 11px/1 "IBM Plex Mono", monospace !important; color: #9aa7a9; }
.pt-suites [data-tab] span { font: 600 14px/1 "Source Sans 3", sans-serif !important; }
.pt-suites [data-tab]:hover { color: #2f3a3d !important; }
.pt-suites [data-tab][aria-selected="true"] { color: #2f3a3d !important; border-bottom-color: var(--c, #0b8fa8) !important; }
.pt-suites [data-tab="all"][aria-selected="true"] { border-bottom-color: #0b8fa8 !important; }
.pt-suites [data-tab][aria-selected="true"] b { color: #0b8fa8; }

.pt-grid { gap: 3px; margin-top: 20px; }
.pt2 {
  position: relative; display: flex; flex-direction: column; min-height: 248px; padding: 22px 22px 20px;
  background: var(--c); color: #fff; text-decoration: none !important; overflow: hidden;
  animation: pt-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 0.035s);
  transition: background-color 0.3s ease;
}
.pt2::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%); pointer-events: none; }
.pt2__suite { font: 600 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.pt2__ic { width: 64px; height: 64px; margin: 22px 0 auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pt2:hover .pt2__ic { transform: translateY(-6px) scale(1.06); }
.pt2__txt { display: grid; gap: 4px; margin-top: 22px; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.pt2 h3 { margin: 0; font: 500 23px/1.12 "Newsreader", Georgia, serif; color: #fff; }
.pt2__line { font-size: 14px; line-height: 1.35; opacity: 0.92; }
.pt2__more { max-height: 0; overflow: hidden; opacity: 0; font-size: 13px; line-height: 1.45; transition: max-height 0.45s ease, opacity 0.35s ease, margin 0.35s ease; }
.pt2:hover .pt2__more, .pt2:focus-visible .pt2__more { max-height: 90px; opacity: 0.9; margin-top: 6px; }
.pt2__go { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; transition: background-color 0.25s ease, transform 0.35s ease; }
.pt2__go svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pt2:hover .pt2__go { background: #fff; transform: rotate(-45deg); }
.pt2:hover .pt2__go svg { stroke: var(--c); }
.pt2:focus-visible { outline: 3px solid #1fb3cc; outline-offset: 2px; }
/* Custom build: white, framed */
.pt2--custom { background: #fff; color: #2f3a3d; box-shadow: inset 0 0 0 2px #0b8fa8; justify-content: center; gap: 14px; }
.pt2--custom::after { display: none; }
.pt2--custom h3 { color: #2f3a3d; font-size: 26px; }
.pt2--custom .pt2__txt { margin-top: 0; }
.pt2__cta { align-self: flex-start; padding: 10px 16px; background: #0b8fa8; color: #fff; font: 600 12px/1 "Source Sans 3", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color 0.2s ease; }
.pt2--custom:hover .pt2__cta { background: #2f3a3d; }
@media (min-width: 860px) and (max-width: 1179px) { .pt2--custom { grid-column: span 2; } }
@media (min-width: 1180px) { .pt2--custom { grid-column: span 3; flex-direction: row; align-items: center; justify-content: space-between; padding: 22px 32px; } }
@media (prefers-reduced-motion: reduce) { .pt2 { animation: none; } .pt2__ic, .pt2__txt, .pt2__go { transition: none; } }
.pt2--custom .pt2__txt, .pt2--custom .pt2__cta { align-self: center; }
@media (min-width: 1180px) { .pt2--custom { min-height: 0; } .pt2--custom h3 { font-size: 30px; } .pt2--custom .pt2__line { font-size: 15px; } }
@media (max-width: 759px) {
  .pt-suites { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .pt-suites::-webkit-scrollbar { display: none; }
  .pt-suites [data-tab] { flex: none; padding: 12px 14px 13px !important; }
}

/* ==========================================================================
   Shelf software vs Autowhat — illustrated split, short points
   ========================================================================== */
.vs2 { position: relative; display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 3px; }
@media (min-width: 900px) { .vs2 { grid-template-columns: 1fr 1fr; } }
.vs2__side { display: flex; flex-direction: column; color: #fff; min-width: 0; }
.vs2__side--shelf { background: #8a979a; }
.vs2__side--aw { background: #0b8fa8; }
.vs2__art { display: block; width: 100%; height: auto; aspect-ratio: 360 / 200; }
.vs2__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 28px 28px; flex: 1; }
.vs2__tag { margin: 0; font: 600 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.vs2 h3 { margin: 0; font: 500 clamp(24px, 2.2vw, 32px)/1.1 "Newsreader", Georgia, serif; color: #fff; }
.vs2__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.vs2__list li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.35; }
.vs2__list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.18) no-repeat center / 11px; }
.vs2__list--no li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E"); }
.vs2__list--yes li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230b8fa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.vs2__cta { align-self: flex-start; margin-top: auto; padding: 12px 18px; border: 1px solid #fff; color: #fff !important; font: 600 12px/1 "Source Sans 3", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease; }
.vs2__cta:hover { background: #fff; color: #0b8fa8 !important; }
.vs2 { container-type: inline-size; }
.vs2__vs { position: absolute; z-index: 2; left: 50%; display: none; place-items: center; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35); font: 500 22px/1 "Newsreader", Georgia, serif; font-style: italic; color: #2f3a3d; }
/* centred on the seam, halfway down the illustrations (art height = half-width × 200/360) */
@media (min-width: 900px) { .vs2__vs { display: grid; top: calc((100cqw - 3px) / 2 * 200 / 360 / 2 - 28px); } }

/* illustrations */
.vs2__art text { fill: #fff; }
.vs2-k { font: 600 9px "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-anchor: middle; fill: rgba(255, 255, 255, 0.8) !important; }
.vs2__side--aw .vs2-k { text-anchor: start; }
.vs2-box { fill: rgba(255, 255, 255, 0.1); stroke: #fff; stroke-width: 2; }
.vs2-grid { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.2; }
.vs2-forced { fill: none; stroke: #fff; stroke-width: 2.4; stroke-dasharray: 6 5; }
.vs2-leak rect, .vs2-leak path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.vs2-leak text { font: 600 10px "Source Sans 3", sans-serif; text-anchor: middle; }
.vs2-leak { animation: vs2-leak 3.3s ease-in-out var(--d) infinite; }
@keyframes vs2-leak { 0% { opacity: 0; transform: translate(0, 6px); } 20%, 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(8px, -10px); } }
.vs2-x circle { fill: #8a979a; stroke: #fff; stroke-width: 2; }
.vs2-x path { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.vs2-flow { stroke: #fff; stroke-width: 2.4; }
.vs2-step circle { fill: #0b8fa8; stroke: #fff; stroke-width: 2; }
.vs2-step text { font: 600 11px "IBM Plex Mono", monospace; text-anchor: middle; }
.vs2-pkt { fill: #fff; }
.vs2-rec > rect { fill: #fff; }
.vs2-rec-k { font: 600 9px "IBM Plex Mono", monospace; letter-spacing: 0.12em; fill: #0b8fa8 !important; }
.vs2-row rect { fill: #e8f6f8; }
.vs2-row path { fill: none; stroke: #0b8fa8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vs2-row text { font: 600 10.5px "Source Sans 3", sans-serif; fill: #2f3a3d !important; }
.vs2-row { animation: vs2-row 3s ease var(--d) infinite; }
@keyframes vs2-row { 0% { opacity: 0.25; } 15%, 85% { opacity: 1; } 100% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .vs2-leak, .vs2-row { animation: none; opacity: 1; } }

/* ==========================================================================
   Method v2 — a connected journey, and a lighter comparison
   ========================================================================== */
body.home .steps li { overflow: visible !important; }
body.home .steps li .st-art { overflow: hidden; }
body.home .steps li:nth-child(1) { --tile: #0a6f83; }
body.home .steps li:nth-child(2) { --tile: #0b8fa8; }
body.home .steps li:nth-child(3) { --tile: #1aa5bf; }
body.home .steps li:nth-child(4) { --tile: #3197a8; }
@media (min-width: 1080px) {
  body.home .steps li:not(:last-child)::after {
    content: ""; position: absolute; z-index: 3; top: 96px; right: -17px; width: 32px; height: 32px; border-radius: 50%;
    background: #fff no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b8fa8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    box-shadow: 0 0 0 3px var(--tile);
    transform: none !important; height: 32px !important; opacity: 1 !important;
  }
}
.st-out { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; margin-top: 14px; padding: 6px 10px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45); font: 600 12px/1 "Source Sans 3", sans-serif; color: #fff; }
.st-out i { font: 600 9px/1 "IBM Plex Mono", monospace; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }

/* Comparison: half the height, art beside the words; shelf side goes quiet */
.vs2 { margin-top: 26px; }
@media (min-width: 900px) {
  .vs2__side { flex-direction: row; align-items: stretch; }
  .vs2__art { width: 46%; flex: none; aspect-ratio: auto; height: auto; }
  .vs2__body { padding: 24px 26px; justify-content: center; }
  .vs2__vs { top: 50% !important; margin-top: -28px; }
}
.vs2 h3 { font-size: clamp(22px, 1.9vw, 28px); }
.vs2__list li { font-size: 14.5px; }
.vs2__side--shelf { background: #f1f4f5; color: #55605f; box-shadow: inset 0 0 0 1px #dfe6e8; }
.vs2__side--shelf h3 { color: #2f3a3d; }
.vs2__side--shelf .vs2__tag { color: #7b8a8c; opacity: 1; }
.vs2__side--shelf .vs2__list--no li::before { background-color: #dfe6e8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237b8a8c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E"); }
.vs2__side--shelf .vs2__art text { fill: #7b8a8c !important; }
.vs2__side--shelf .vs2-box { fill: #fff; stroke: #9aa7a9; }
.vs2__side--shelf .vs2-grid { stroke: #d3dcde; }
.vs2__side--shelf .vs2-forced { stroke: #9aa7a9; }
.vs2__side--shelf .vs2-leak rect, .vs2__side--shelf .vs2-leak path { stroke: #9aa7a9; }
.vs2__side--shelf .vs2-x circle { fill: #f1f4f5; stroke: #b42318; }
.vs2__side--shelf .vs2-x path { stroke: #b42318; }
.vs2__side--shelf pattern circle { fill: rgba(123, 138, 140, 0.18); }
/* earlier steps stack above later ones so each arrow connector sits on top of the seam */
body.home .steps li:nth-child(1) { z-index: 4; } body.home .steps li:nth-child(2) { z-index: 3; }
body.home .steps li:nth-child(3) { z-index: 2; } body.home .steps li:nth-child(4) { z-index: 1; }

/* ==========================================================================
   Method illustrations v3 — isometric depth, soft light, live motion
   ========================================================================== */
body.home .steps li .st3 { height: 54%; }
.st3 text { fill: #fff; }
.st3-k { font: 600 8.5px "IBM Plex Mono", monospace; letter-spacing: 0.14em; fill: rgba(255, 255, 255, 0.8) !important; }
.st3-k--c { text-anchor: middle; }
/* isometric blocks: three white faces at different strengths */
.iso-t { fill: rgba(255, 255, 255, 0.95); }
.iso-l { fill: rgba(255, 255, 255, 0.55); }
.iso-r { fill: rgba(255, 255, 255, 0.32); }
.iso polygon { stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.6; stroke-linejoin: round; }
.iso--s .iso-t { fill: rgba(255, 255, 255, 0.78); }
.u-plane { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.u-plane--s { fill: rgba(255, 255, 255, 0.06); }

/* 1 · Understand */
.u-link { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.3; stroke-dasharray: 3 3; }
.u-pkt { fill: #fff; filter: drop-shadow(0 0 3px #fff); }
.u-beam { animation: u-beam 7s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes u-beam { 0%, 100% { transform: translateX(-110px); } 50% { transform: translateX(110px); } }
.u-drop { fill: #fff; animation: u-drop 2s ease-in infinite; }
@keyframes u-drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(24px); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
.u-ripple { fill: none; stroke: #fff; stroke-width: 1.2; opacity: 0; animation: u-ripple 2s ease-out infinite; animation-delay: 1.6s; transform-box: fill-box; transform-origin: center; }
.u-ripple--2 { animation-delay: 1.9s; }
@keyframes u-ripple { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }

/* 2 · Find gaps */
.g-ghost path { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.g-ghost-f { fill: rgba(255, 255, 255, 0.06); stroke: none !important; animation: g-ghost 1.8s ease-in-out var(--d) infinite; }
@keyframes g-ghost { 50% { fill: rgba(255, 255, 255, 0.34); } }
.g-ghost--x path { stroke-width: 1.8; }
.g-pin { stroke: #fff; stroke-dasharray: 2 2; }
.g-tag { fill: #fff; }
.g-tag-t { font: 700 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-anchor: middle; fill: var(--tile) !important; }
.g-ring { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; }
.g-ring--on { fill: none; stroke: #fff; transform: rotate(-90deg); animation: g-ring 4s linear infinite; }
@keyframes g-ring { to { stroke-dashoffset: 0; } }
.g-hand { stroke: #fff; stroke-width: 2; stroke-linecap: round; animation: st-tick 4s linear infinite; transform-origin: 0 0; }

/* 3 · Transform */
.t-knot { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.3; stroke-dasharray: 160 40; animation: t-knot 3.2s linear var(--d) infinite; }
@keyframes t-knot { to { stroke-dashoffset: -200; } }
.t-prism { fill: rgba(255, 255, 255, 0.12); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.t-flow-glow { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 6; }
.t-flow { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: t-flow 3.6s ease-in-out infinite; }
@keyframes t-flow { 0% { stroke-dashoffset: 220; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0.5; } }
.t-dot { fill: var(--tile); stroke: #fff; stroke-width: 2; }
.t-halo { opacity: 0; animation: t-halo 3.6s ease var(--d) infinite; }
.t-tick { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: t-tick 3.6s ease var(--d) infinite; }
@keyframes t-halo { 0%, 10% { opacity: 0; } 25%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes t-tick { 0%, 12% { opacity: 0; } 25%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* 4 · Apply */
.a-win { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.2; }
.a-bar { fill: rgba(255, 255, 255, 0.16); }
.a-dot { fill: rgba(255, 255, 255, 0.75); }
.a-live { fill: #fff; animation: a-live 1.2s ease-in-out infinite; }
@keyframes a-live { 50% { opacity: 0.25; } }
.a-chart { animation: a-chart 6s linear infinite; }
@keyframes a-chart { to { transform: translate(-198px, 82px); } }
.a-line { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)); }
.a-gear { animation: st-spin 6s linear infinite; }
.a-gear rect, .a-gear circle { fill: #fff; }
.a-gear .a-hole { fill: var(--tile); }
.a-row rect { fill: rgba(255, 255, 255, 0.14); stroke: rgba(255, 255, 255, 0.55); }
.a-row path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.a-row line { stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.6; stroke-linecap: round; }
.a-row text { font: 600 8px "IBM Plex Mono", monospace; text-anchor: end; fill: rgba(255, 255, 255, 0.75) !important; }
.a-row { opacity: 0; animation: a-row 3.2s ease var(--d) infinite; }
@keyframes a-row { 0% { opacity: 0; transform: translateX(10px); } 14%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .u-beam, .u-drop, .u-ripple, .g-ghost-f, .g-ring--on, .g-hand, .t-knot, .t-flow, .t-halo, .t-tick, .a-live, .a-chart, .a-gear, .a-row { animation: none !important; }
  .t-flow { stroke-dashoffset: 0; } .t-tick, .t-halo, .a-row { opacity: 1; }
}

/* ==========================================================================
   Proof stats — each number with a small visual of what it means
   ========================================================================== */
body.home .s-proof__stats.pf { gap: 3px !important; }
body.home .pf .pf-item { display: grid; grid-template-columns: 1fr; align-content: start; gap: 4px; padding: 22px 24px 24px !important; background: #fff; box-shadow: inset 0 0 0 1px #d9e6e8; border: 0 !important; }
body.home .pf .pf-item::before, body.home .pf .pf-item::after { display: none !important; }
.pf-vis { display: block; width: 100%; max-width: 168px; height: 72px; margin-bottom: 10px; overflow: visible; }
body.home .pf b { font: 500 clamp(44px, 4.4vw, 60px)/0.95 "Newsreader", Georgia, serif !important; color: #0b8fa8 !important; -webkit-text-fill-color: #0b8fa8 !important; }
body.home .pf sup { font-size: 0.45em; vertical-align: 0.9em; margin-left: 2px; }
.pf-lab { font: 600 15px/1.25 "Source Sans 3", sans-serif; color: #2f3a3d; }
body.home .pf small { font-size: 13px; line-height: 1.4; color: #7b8a8c; }

/* 50 people */
.pf-u { fill: #c9e3e8; transition: fill 0.4s ease calc(var(--i) * 18ms); }
.pf-item.in .pf-u { fill: #0b8fa8; }
.pf-item.in .pf-u:nth-child(5n + 2) { fill: #1aa5bf; }
.pf-item.in .pf-u:nth-child(7n + 3) { fill: #0a6f83; }
/* 11 pins */
.pf-pin { opacity: 0; transform-box: fill-box; }
.pf-pin line { stroke: #9fc9d1; stroke-width: 1.4; }
.pf-pin circle { fill: #0b8fa8; }
.pf-pin .pf-pin-c { fill: #fff; }
.pf-item.in .pf-pin { animation: pf-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pf-drop { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
/* 13 cells */
.pf-cell { opacity: 0; transform-box: fill-box; transform-origin: center bottom; }
.pf-item.in .pf-cell { animation: pf-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes pf-pop { from { opacity: 0; transform: scaleY(0.2); } to { opacity: 1; transform: none; } }
/* 4 h clock */
.pf-ring { fill: #eef6f7; stroke: #d9e6e8; stroke-width: 6; }
.pf-ring--on { fill: none; stroke: #0b8fa8; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transform: rotate(-90deg); transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.pf-item.in .pf-ring--on { stroke-dashoffset: var(--to); }
.pf-tick { stroke: #9fc9d1; stroke-width: 1.2; }
.pf-hand { stroke: #2f3a3d; stroke-width: 2.4; stroke-linecap: round; transform: rotate(0deg); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.pf-item.in .pf-hand { transform: rotate(120deg); }
.pf-hub { fill: #2f3a3d; }
.pf-note { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; fill: #7b8a8c; }
.pf-note--b { font: 500 15px "Newsreader", Georgia, serif; letter-spacing: 0; text-transform: none; fill: #2f3a3d; }

@media (prefers-reduced-motion: reduce) {
  .pf-pin, .pf-cell { opacity: 1; animation: none !important; }
  .pf-u, .pf-ring--on, .pf-hand { transition: none; }
}
/* the counter span inside the number must inherit the big numeral, not the label style */
body.home .pf b { display: flex !important; align-items: flex-start; gap: 2px; margin: 0 !important; }
body.home .pf b [data-pf-n] { font: inherit !important; color: inherit !important; -webkit-text-fill-color: inherit !important; letter-spacing: -0.01em; text-transform: none !important; margin: 0 !important; display: inline !important; }
body.home .pf b sup { position: static !important; display: inline-block; margin-top: 0.08em; font-size: 0.42em !important; line-height: 1; vertical-align: top; color: #1aa5bf !important; -webkit-text-fill-color: #1aa5bf !important; }
/* Compact: one row per stat — small visual · number · label */
body.home .pf .pf-item { grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 16px 18px !important; }
body.home .pf .pf-vis { grid-row: 1 / span 2; width: 84px; max-width: none; height: 46px; margin: 0; }
body.home .pf b { font-size: 34px !important; line-height: 1 !important; align-self: end; }
body.home .pf .pf-lab { font-size: 13.5px; line-height: 1.2; align-self: start; color: #55605f; }
body.home .pf small { display: none !important; }
body.home .s-proof { padding-top: 14px !important; padding-bottom: 14px !important; }
@media (max-width: 640px) { body.home .pf .pf-item { grid-template-columns: 64px 1fr; } body.home .pf .pf-vis { width: 64px; height: 36px; } body.home .pf b { font-size: 28px !important; } }

/* Products — compact rows: icon · name + line · arrow */
.pt-grid { margin-top: 14px !important; }
.pt2 { display: grid !important; grid-template-columns: 40px 1fr 26px; align-items: center; column-gap: 14px; min-height: 0 !important; padding: 16px 16px 16px 18px !important; }
.pt2__suite, .pt2__more { display: none !important; }
.pt2__ic { width: 40px !important; height: 40px !important; margin: 0 !important; stroke-width: 2.2 !important; }
.pt2:hover .pt2__ic { transform: scale(1.08); }
.pt2__txt { margin: 0 !important; gap: 2px !important; min-width: 0; }
.pt2 h3 { font-size: 17px !important; line-height: 1.15 !important; }
.pt2__line { font-size: 12.5px !important; line-height: 1.3 !important; opacity: 0.88; }
.pt2__go { position: static !important; width: 26px !important; height: 26px !important; }
.pt2__go svg { width: 12px !important; height: 12px !important; }
.pt2::after { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 60%) !important; }
/* custom tile: one slim line */
.pt2--custom { grid-template-columns: 1fr auto !important; padding: 14px 18px !important; }
.pt2--custom h3 { font-size: 18px !important; }
.pt2--custom .pt2__line { font-size: 12.5px !important; }
.pt2__cta { padding: 9px 13px !important; font-size: 11px !important; }
@media (min-width: 1180px) { .pt2--custom { padding: 14px 22px !important; } }

/* Digital twin · business scenes: bars, ranked lists, insight */
.tw-bars, .tw-rank { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.tw-bars li { display: grid; grid-template-columns: 74px 1fr 58px; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(227, 246, 250, 0.82); }
.tw-bars__t { display: block; height: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tw-bars__t > span { display: block; height: 100%; background: linear-gradient(90deg, #3fc9e6, #b9f3ff); box-shadow: 0 0 10px rgba(122, 233, 255, 0.55); animation: tw-bar-in 0.9s ease both; transform-origin: left; }
.tw-bars em { font: 600 11.5px "IBM Plex Mono", monospace; font-style: normal; color: #fff; text-align: right; }
@keyframes tw-bar-in { from { transform: scaleX(0); } }
.tw-rank { counter-reset: r; }
.tw-rank li { counter-increment: r; display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 12.5px; color: rgba(227, 246, 250, 0.86); }
.tw-rank li span::before { content: counter(r) "  "; font: 600 11px "IBM Plex Mono", monospace; color: rgba(227, 246, 250, 0.45); }
.tw-rank b { font: 600 12px "IBM Plex Mono", monospace; color: #fff; white-space: nowrap; }
.tw-rank b.is-bad { color: #f87171; }
.tw-p__insight { margin: 0 0 12px; padding: 10px 12px; border-left: 2px solid #7ae9ff; background: rgba(122, 233, 255, 0.07); font-size: 13px; line-height: 1.5; color: rgba(227, 246, 250, 0.9); }
.tw-p__insight b { color: #fff; }
.tw-p__kpis--info em { display: block; margin: 4px 0 0 !important; }

/* Floating callout cards over the map */
.tw-calls { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.tw-call { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 7px 10px 7px 11px; margin: -6px 0 0 -2px; translate: 0 -100%; white-space: nowrap; background: rgba(9, 14, 18, 0.86); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); border-left: 3px solid var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent), 0 8px 24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); transition: opacity 0.3s ease; will-change: transform; }
.tw-call b { font: 600 13px/1.2 "Source Sans 3", system-ui, sans-serif; color: #fff; }
.tw-call span { font: 500 11.5px/1.3 "IBM Plex Mono", monospace; color: var(--c); }
@media (max-width: 760px) { .tw-call span { display: none; } .tw-call b { font-size: 11.5px; } }

/* ==========================================================================
   Finish: contact section, method steps, comparison, footer
   ========================================================================== */
/* contact — photo dimmed to a deep teal, the form a clean white card */
body.home .s-contact { position: relative; }
body.home .s-contact .art-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 74, 88, 0.94) 0%, rgba(8, 110, 130, 0.86) 48%, rgba(8, 110, 130, 0.55) 100%); }
body.home .s-contact__grid { align-items: center !important; }
body.home .s-contact__meta { margin-top: 28px !important; border: 0 !important; display: grid; gap: 10px; }
body.home .s-contact__meta div { display: grid !important; grid-template-columns: 40px 1fr !important; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 14px !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(6px); }
body.home .s-contact__meta div::before { content: ""; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.14) center / 18px no-repeat; }
body.home .s-contact__meta div:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
body.home .s-contact__meta div:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Cpath d='M5 4h4l2 5-3 2a11 11 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
body.home .s-contact__meta div:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
body.home .s-contact__meta dt { grid-column: 2; margin: 0 !important; font: 600 10px "IBM Plex Mono", monospace !important; letter-spacing: 0.12em !important; color: rgba(255, 255, 255, 0.6) !important; }
body.home .s-contact__meta dd { grid-column: 2; margin: 2px 0 0 !important; font-size: 15.5px !important; color: #fff !important; }
body.home .s-contact__meta a { color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
body.home .s-contact__meta a:hover { border-bottom-color: #fff; }
body.home .s-form { background: #fff !important; border: 0 !important; border-top: 3px solid #1fb3cc !important; padding: 30px 32px 28px !important; box-shadow: 0 30px 60px -24px rgba(0, 30, 40, 0.55) !important; backdrop-filter: none !important; }
body.home .s-form::before { content: "Tell us the bottleneck"; display: block; margin-bottom: 18px; font: 500 24px/1.2 "Newsreader", Georgia, serif; color: #1f2a2e; }
body.home .s-form label > span { color: #55605f !important; font: 600 10.5px "IBM Plex Mono", monospace !important; letter-spacing: 0.08em; }
body.home .s-form input, body.home .s-form select, body.home .s-form textarea { background: #f6f9fa !important; border: 1px solid #d7e3e6 !important; color: #1f2a2e !important; border-radius: 0 !important; }
body.home .s-form input::placeholder, body.home .s-form textarea::placeholder { color: #9aa7ab !important; }
body.home .s-form input:focus, body.home .s-form select:focus, body.home .s-form textarea:focus { background: #fff !important; border-color: #0b8fa8 !important; box-shadow: 0 0 0 3px rgba(11, 143, 168, 0.15) !important; outline: none; }
body.home .s-form .s-cta { background: #0b8fa8 !important; border-color: #0b8fa8 !important; color: #fff !important; }
body.home .s-form .s-cta:hover { background: #0a6f83 !important; border-color: #0a6f83 !important; }
body.home .s-form__actions a { color: #0b8fa8 !important; }
body.home .s-form .form-status { color: #2f3a3d; }

/* method steps — a touch of depth and a clearer deliverable */
body.home .steps > li, body.home .steps .st { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
body.home .steps > li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(6, 74, 88, 0.6); z-index: 5; }

/* comparison — lift the Autowhat side */
body.home .vs2 > :last-child { box-shadow: 0 30px 50px -30px rgba(6, 74, 88, 0.55); }

/* footer — paired contacts, calmer watermark */
.site-footer .foot-people { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.site-footer .foot-people li { display: grid; gap: 2px; }
.site-footer .foot-people span { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #8a979b; }
.site-footer .foot-people a { margin: 0 !important; padding: 0 !important; }
.site-footer .foot-mark { font-size: clamp(44px, 7.5vw, 104px) !important; letter-spacing: 0.14em !important; background: linear-gradient(180deg, rgba(11, 143, 168, 0.14), rgba(11, 143, 168, 0)); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-align: center; }

/* ==========================================================================
   Motion layer support (js/motion-ui.js)
   ========================================================================== */
.has-motion .site-header { transition: box-shadow 0.4s ease, background-color 0.4s ease; }
.has-motion .site-header.is-compact { box-shadow: 0 10px 30px -18px rgba(6, 60, 72, 0.35); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.has-motion .site-header.is-compact .nav-bar, .has-motion .site-header.is-compact .brand { transform: scale(0.96); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.has-motion .pp-scene__frame, .has-motion .ck, .has-motion .ab-win--a { perspective: 1200px; }
.has-motion .pt3, .has-motion .ab-member, .has-motion .ab-office, .has-motion .ind2, .has-motion .pn-card, .has-motion .lab-card, .has-motion .tx-agent, .has-motion .ew-role, .has-motion .aa-con { will-change: transform; }
/* the thread draws in, then the dot lands */
body.home .s[data-num]:not(#network-map) > .s__wrap::before { transform-origin: top; transform: scaleY(0); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
body.home .s[data-num]:not(#network-map) > .s__wrap::after { opacity: 0; transform: scale(0.4); transition: opacity 0.4s ease 0.7s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s; }
body.home .s[data-num] > .s__wrap.is-threaded::before { transform: scaleY(1); }
body.home .s[data-num] > .s__wrap.is-threaded::after { opacity: 1; transform: scale(1); }
html:not(.has-motion) body.home .s[data-num] > .s__wrap::before { transform: none; }
html:not(.has-motion) body.home .s[data-num] > .s__wrap::after { opacity: 1; transform: none; }

/* ==========================================================================
   One hero size on every page — the landing page's stage band.
   Landing: height = 31.1 % of the stage width, clamped 448–538 px (stage-size.css).
   ========================================================================== */
:root { --hero-std: clamp(448px, calc((100vw - 2 * max(0px, calc(var(--page-rail, 80px) - 96px))) * 0.311), 538px); }
@media (min-width: 900px) {
  body.inner { --hero-band-h: var(--hero-std) !important; }
  body.inner .hero-stage { height: var(--hero-std) !important; min-height: var(--hero-std) !important; }

  /* product-style heroes: same band, content tightened to sit inside it */
  body.inner .scm-stage { box-sizing: border-box; height: var(--hero-std) !important; min-height: var(--hero-std) !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex; align-items: center; overflow: hidden; }
  body.inner .scm-stage > .s__wrap, body.inner .scm-stage .scm-stage__grid { width: 100%; }
  body.inner .scm-stage .scm-stage__grid { gap: clamp(28px, 4vw, 64px) !important; align-items: center !important; padding-top: 18px; padding-bottom: 18px; }
  body.inner .scm-stage .crumbs { margin-bottom: 14px !important; }
  body.inner .scm-stage .s-eyebrow { margin-bottom: 10px !important; }
  body.inner .scm-stage h1.s-title, body.inner .scm-stage .s-title { font-size: clamp(30px, 2.75vw, 46px) !important; line-height: 1.06 !important; margin: 0 !important; }
  body.inner .scm-stage .s-lede { font-size: clamp(14.5px, 1.05vw, 16.5px) !important; line-height: 1.5 !important; margin-top: 14px !important; max-width: 60ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  body.inner .scm-stage .scm-stage__actions { margin-top: 20px !important; }
  body.inner .scm-stage .scm-stage__facts { margin-top: 18px !important; padding-top: 14px !important; }
  body.inner .scm-stage .pp-scene { padding: 0 !important; width: min(560px, 100%); }
  body.inner .scm-stage .pp-scene figcaption { display: none; }
  body.inner .scm-stage .pp-scene img, body.inner .scm-stage .pp-scene__frame { max-height: calc(var(--hero-std) - 96px); }
  body.inner .scm-stage .pp-scene img { width: 100%; height: auto; object-fit: contain; object-position: top; }
  body.inner .scm-stage figure:not(.pp-scene), body.inner .scm-stage .cx-collage, body.inner .scm-stage .ab-stack { max-height: calc(var(--hero-std) - 64px); }
  body.inner .scm-stage .cx-collage { aspect-ratio: auto; height: calc(var(--hero-std) - 72px); }
}
/* phones: the landing hero is one card over one picture — keep product heroes to the copy */
@media (max-width: 899px) {
  body.inner .scm-stage .pp-scene, body.inner .scm-stage .cx-collage { display: none; }
  body.inner .scm-stage .s-lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
}
@media (min-width: 900px) {
  body.inner .hero-stage .hero-card { max-height: calc(var(--hero-std) - 24px); overflow: hidden; }
  body.inner .hero-stage .hero-card h1 { font-size: clamp(28px, 2.5vw, 42px) !important; line-height: 1.08 !important; }
  body.inner .hero-stage .hero-card .lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 10px !important; }
  body.inner .hero-stage .hero-card .crumbs { margin-bottom: 10px !important; }
  body.inner .hero-stage .hero-card .kpi-row { margin-top: 14px !important; }
}
/* phones: every hero ≈ the landing hero (≈ 690 px on a 390 px screen) */
@media (max-width: 899px) {
  body.inner .scm-stage .phone-scene, body.inner .scm-stage .ab-stack, body.inner .scm-stage figure { display: none !important; }
  body.inner .scm-stage { min-height: 600px; display: flex; align-items: center; }
  body.inner { --hero-band-h: 600px !important; }
  body.inner .hero-stage { height: 600px !important; min-height: 600px !important; }
}
@media (max-width: 899px) {
  body.inner .hero-stage { height: auto !important; }
  body.inner .page-hero-stage > .hero-slide { position: relative !important; inset: auto !important; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; }
  body.inner .page-hero-stage .hero-card { position: relative !important; inset: auto !important; margin-top: 200px !important; }
}

/* ==========================================================================
   Footer — turquoise call-to-action band (like the hero), then a deep-teal
   footer with socials, contact, the head-office map and the legal line.
   ========================================================================== */
.site-footer.sf { margin: 0 !important; padding: 0 !important; border: 0 !important; background: #07343d !important; color: rgba(255, 255, 255, 0.78) !important; font-family: "Source Sans 3", system-ui, sans-serif; }
.sf .sf-wrap { width: min(1440px, calc(100% - 2 * var(--page-rail, clamp(16px, 5vw, 80px)))); margin: 0 auto; }
.sf a { color: inherit; text-decoration: none; }
.sf h2 { margin: 0 0 16px; font: 600 10.5px "IBM Plex Mono", monospace !important; letter-spacing: 0.18em; text-transform: uppercase; color: #7fd3e0 !important; }

/* CTA band */
.sf-cta { position: relative; overflow: hidden; background: #0b8fa8; color: #fff; padding: clamp(44px, 5vw, 72px) 0; }
.sf-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 90% 0%, rgba(255, 255, 255, 0.14), transparent 60%), radial-gradient(600px 400px at 0% 120%, rgba(4, 73, 87, 0.45), transparent 60%); pointer-events: none; }
.sf-cta::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.sf-cta__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 28px 48px; align-items: end; }
.sf-k { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.sf-k span { display: inline-flex; align-items: center; gap: 12px; }
.sf-k span::after { content: ""; width: 34px; height: 1px; background: rgba(255, 255, 255, 0.6); }
.sf-cta h2 { margin: 0 !important; font: 300 clamp(30px, 3.4vw, 50px)/1.08 "Source Sans 3", system-ui, sans-serif !important; letter-spacing: -0.02em !important; text-transform: none !important; color: #fff !important; }
.sf-cta h2 em { font-style: normal; color: #a8ecf7; }
.sf-cta__lede { margin: 14px 0 0; max-width: 58ch; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.sf-cta__act { display: flex; flex-wrap: wrap; gap: 12px; }
.sf-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 2px; color: #fff !important; font: 600 12.5px "Source Sans 3", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 0.25s, color 0.25s, transform 0.3s; }
.sf-btn svg { width: 16px; height: 16px; }
.sf-btn:hover { background: #fff; color: #0a6f83 !important; }
.sf-btn--solid { background: #fff; color: #0a6f83 !important; border-color: #fff; }
.sf-btn--solid:hover { background: #07343d; color: #fff !important; border-color: #07343d; }
.sf-btn i { font-style: normal; transition: transform 0.3s; }
.sf-btn:hover i { transform: translateX(3px); }

/* main footer */
.sf-main { padding: clamp(48px, 5.5vw, 80px) 0 0; background: linear-gradient(180deg, #07343d, #052a31); }
.sf-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 3vw, 48px); }
.sf-logo img { display: block; width: 168px; height: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.sf-brand p { margin: 18px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.sf-socs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sf-soc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff !important; transition: background-color 0.25s, border-color 0.25s, transform 0.3s; }
.sf-soc svg { width: 18px; height: 18px; }
.sf-soc:hover { background: #0b8fa8; border-color: #0b8fa8; transform: translateY(-2px); }
.sf-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; }
.sf-badges li { padding: 5px 10px; border: 1px solid rgba(127, 211, 224, 0.35); border-radius: 999px; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #a8ecf7; }
.sf-col { display: flex; flex-direction: column; gap: 11px; }
.sf-col > a { width: fit-content; font-size: 15px; color: rgba(255, 255, 255, 0.78) !important; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 0.2s, background-size 0.3s; }
.sf-col > a:hover { color: #fff !important; background-size: 100% 1px; }
.sf-contact > a, .sf-contact > p { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14.5px; color: #fff !important; background: none !important; }
.sf-contact svg, .sf-office address > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #7fd3e0; }
.sf-contact small { display: block; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.sf-contact > a:hover span { color: #a8ecf7; }

/* office + map */
.sf-map { position: relative; display: block; height: 150px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: #0a4652; }
.sf-map iframe { position: absolute; inset: -40px 0 0; width: 100%; height: calc(100% + 80px); border: 0; filter: grayscale(1) invert(0.92) hue-rotate(160deg) saturate(2.2) brightness(0.92) contrast(0.95); pointer-events: none; }
.sf-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 143, 168, 0.12), rgba(5, 42, 49, 0.35)); pointer-events: none; transition: opacity 0.3s; }
.sf-map:hover::after { opacity: 0.4; }
.sf-map__pin { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #0b8fa8; color: #fff; box-shadow: 0 0 0 8px rgba(11, 143, 168, 0.25), 0 0 0 18px rgba(11, 143, 168, 0.12); }
.sf-map__pin svg { width: 18px; height: 18px; }
.sf-office address { display: flex; gap: 10px; margin: 16px 0 0; font-style: normal; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
.sf-office address b { display: block; color: #fff; font-weight: 600; }
.sf-dir { display: inline-flex; gap: 6px; margin: 12px 0 0 28px; font: 600 12px "Source Sans 3", system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #a8ecf7 !important; }
.sf-dir:hover { color: #fff !important; }
.sf-cities { margin: 14px 0 0 28px; font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.sf-cities span { display: block; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 2px; }

/* wordmark + legal line */
.sf-mark { display: none; }
.sf-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.sf-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.sf-bottom a:hover { color: #fff; }
.sf-top { color: #a8ecf7 !important; }

@media (max-width: 1180px) {
  .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0 32px; align-items: start; }
  .sf-brand p { margin-top: 0; }
  .sf-office { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 28px; }
  .sf-office h2 { grid-column: 1 / -1; }
  .sf-office .sf-map { grid-row: span 4; height: 100%; min-height: 180px; }
  .sf-office address { margin-top: 0; }
}
@media (max-width: 760px) {
  .sf-cta__in { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr 1fr; }
  .sf-brand { display: block; }
  .sf-brand p { margin-top: 18px; }
  .sf-contact { grid-column: 1 / -1; }
  .sf-office { display: block; }
  .sf-office .sf-map { height: 170px; }
}
@media (max-width: 480px) {
  .sf-btn { width: 100%; justify-content: center; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
}
/* footer: win over the legacy .site-footer rules (they carry !important at 0,2,1) */
html body .site-footer.sf a, html body .site-footer.sf p { display: revert; margin: 0; font-size: inherit; }
html body .site-footer.sf h2 { color: #7fd3e0 !important; -webkit-text-fill-color: currentColor !important; }
html body .site-footer.sf .sf-cta h2 { color: #fff !important; }
html body .site-footer.sf .sf-cta h2 em { color: #a8ecf7 !important; }
html body .site-footer.sf .sf-k { color: rgba(255, 255, 255, 0.88) !important; margin: 0 0 12px !important; display: flex !important; }
html body .site-footer.sf .sf-cta__lede { color: rgba(255, 255, 255, 0.88) !important; margin: 14px 0 0 !important; font-size: 16.5px !important; display: block !important; }
html body .site-footer.sf .sf-btn { display: inline-flex !important; color: #fff !important; font-size: 12.5px !important; }
html body .site-footer.sf .sf-btn--solid { color: #0a6f83 !important; }
html body .site-footer.sf .sf-btn:hover { color: #0a6f83 !important; }
html body .site-footer.sf .sf-btn--solid:hover { color: #fff !important; }
html body .site-footer.sf .sf-brand p { color: rgba(255, 255, 255, 0.72) !important; margin: 18px 0 0 !important; font-size: 15px !important; display: block !important; }
html body .site-footer.sf .sf-soc { display: grid !important; color: #fff !important; margin: 0 !important; }
html body .site-footer.sf .sf-col > a { display: inline-block !important; color: rgba(255, 255, 255, 0.8) !important; font-size: 15px !important; }
html body .site-footer.sf .sf-col > a:hover { color: #fff !important; }
html body .site-footer.sf .sf-contact > a, html body .site-footer.sf .sf-contact > p { display: flex !important; color: #fff !important; font-size: 14.5px !important; }
html body .site-footer.sf .sf-contact > a:hover { color: #a8ecf7 !important; }
html body .site-footer.sf .sf-map { display: block !important; }
html body .site-footer.sf .sf-dir { display: inline-flex !important; color: #a8ecf7 !important; font-size: 12px !important; }
html body .site-footer.sf .sf-cities { display: block !important; color: rgba(255, 255, 255, 0.72) !important; font-size: 13.5px !important; margin: 14px 0 0 28px !important; }
html body .site-footer.sf .sf-bottom a { display: inline !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 13px !important; }
html body .site-footer.sf .sf-bottom a:hover, html body .site-footer.sf .sf-bottom .sf-top { color: #a8ecf7 !important; }
html body .site-footer.sf .sf-logo { display: inline-block !important; }
html body .site-footer.sf .sf-dir { margin: 12px 0 0 28px !important; }
@media (max-width: 560px) { html body .site-footer.sf .sf-k { flex-wrap: wrap; gap: 4px 10px; letter-spacing: 0.14em; } .sf-k span::after { width: 18px; } }
/* SVG logo: crisp at every size; the footer uses the white lockup, so no filter */
.brand-mark { object-fit: contain; }
.brand-wordmark { height: 23px; width: auto; max-width: none !important; }
@media (max-width: 1023px) { .brand-wordmark { height: 19px; } }
@media (max-width: 639px) { .brand-wordmark { height: 17px; } }
html body .site-footer.sf .sf-logo img { filter: none !important; opacity: 1 !important; width: 168px; height: auto; }
@media (min-width: 1024px) { .brand-mark { width: 42px !important; height: 42px !important; } }
@media (max-width: 1023px) { .brand-mark { width: 36px !important; height: 36px !important; } }


/* ---- Proof strip + customer band: institute style — air, hairlines, no cards (v51) */
body.home .s-proof { padding: 0 !important; background: #fff !important; border-top: 0 !important; }
body.home .s-proof__stats.pf { gap: 0 !important; border: 0; border-radius: 0; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { body.home .s-proof__stats.pf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.home .pf .pf-item { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto auto auto !important; align-content: start; row-gap: 0 !important; min-width: 0; padding: clamp(18px, 2.2vw, 28px) clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 26px) !important; background: transparent; box-shadow: none !important; border: 0 !important; border-right: 1px solid #dfe8ea !important; }
body.home .pf .pf-item:first-child { padding-left: 0 !important; }
body.home .pf .pf-item:last-child { border-right: 0 !important; padding-right: 0 !important; }
body.home .pf .pf-vis { grid-row: auto; width: 88px; max-width: none; height: 40px; margin: 0 0 10px; }
body.home .pf b { font: 500 clamp(30px, 2.8vw, 40px)/0.92 "Newsreader", Georgia, serif !important; letter-spacing: -0.02em; align-self: auto; margin: 0 0 6px !important; }
body.home .pf b sup { font-size: 0.42em !important; margin-top: 0.08em; }
body.home .pf .pf-lab { font: 600 10px/1.35 "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: 0.1em; text-transform: uppercase; color: #0b8fa8; align-self: auto; margin-bottom: 4px; }
body.home .pf small { display: block !important; font: 400 12.5px/1.4 "Source Sans 3", sans-serif; color: #55605f; max-width: 22ch; }
@media (max-width: 899px) {
  body.home .pf .pf-item { padding: 16px 14px 14px !important; }
  body.home .pf .pf-item:nth-child(odd) { padding-left: 0 !important; }
  body.home .pf .pf-item:nth-child(2) { border-right: 0 !important; padding-right: 0 !important; }
  body.home .pf .pf-item:nth-child(-n + 2) { border-bottom: 1px solid #dfe8ea !important; }
  body.home .pf .pf-item:nth-child(3) { border-right: 1px solid #dfe8ea !important; }
  body.home .pf .pf-vis { width: 72px; height: 34px; margin-bottom: 8px; }
  body.home .pf b { font-size: 26px !important; margin-bottom: 6px !important; }
  body.home .pf small { font-size: 11.5px; line-height: 1.35; }
}
body.home .s-logos { background: #fff !important; border-top: 1px solid #dfe8ea !important; border-bottom: 0 !important; padding: 0; }
body.home .s-logos > .s__wrap.s-logos__row { width: auto; margin-inline: 0; padding-top: clamp(28px, 3vw, 40px) !important; padding-bottom: clamp(28px, 3vw, 40px) !important; border: 0; border-radius: 0; background: none; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
@media (min-width: 900px) { body.home .s-logos > .s__wrap.s-logos__row { grid-template-columns: 260px 1fr; gap: clamp(32px, 4vw, 72px); } }
body.home .s-logos__lead { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0 !important; font: 400 17px/1.35 "Newsreader", Georgia, serif; letter-spacing: 0; text-transform: none; color: #1f2a2e; }
body.home .s-logos__lead span { font: 600 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #0b8fa8; }
body.home .s-logos__marquee { padding: 0; align-self: center; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
body.home .s-logos__track { gap: 0; animation-duration: 64s; }
body.home .s-logos__cell { flex: 0 0 auto; display: grid; place-items: center; width: clamp(170px, 14vw, 210px); height: 64px; }
body.home .s-logos__track img { height: 36px; max-width: 148px; opacity: 1; filter: none; transition: transform 0.25s ease; }
body.home .s-logos__track img[src*="apml"], body.home .s-logos__track img[src*="sarc"], body.home .s-logos__track img[src*="yf"], body.home .s-logos__track img[src*="henkel"] { height: 50px; }
body.home .s-logos__track img[src*="nsdl"], body.home .s-logos__track img[src*="ecavo"], body.home .s-logos__track img[src*="podar"], body.home .s-logos__track img[src*="nlp"] { height: 42px; }
body.home .s-logos__track img[src*="metnmat"] { height: 26px; }
body.home .s-logos__cell:hover img { opacity: 1; filter: none; transform: scale(1.05); }
body.home .s-logos__track:hover { animation-play-state: paused; }
@keyframes s-marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) { body.home .s-logos__cell { width: 150px; height: 52px; } body.home .s-logos__track img { height: 28px; max-width: 118px; } body.home .s-logos__track img[src*="apml"], body.home .s-logos__track img[src*="sarc"], body.home .s-logos__track img[src*="yf"], body.home .s-logos__track img[src*="henkel"] { height: 38px; } body.home .s-logos__lead { font-size: 15.5px; } }

/* ---- Footer sized like the hero stage: same width as the stage, CTA band at the hero's height, photographic (v52) */
body.home .site-footer.sf, body.scm-page .site-footer.sf { margin-left: var(--stage-inset, 0px) !important; margin-right: var(--stage-inset, 0px) !important; border-left: 0 !important; border-right: 0 !important; }
.site-footer.sf .sf-cta { box-sizing: border-box; min-height: var(--hero-band-h, var(--hero-std, 480px)); display: flex; align-items: center; padding: clamp(40px, 4.6vw, 64px) 0 !important; background: #07343d url("../img/hero/control.webp?v=g1") 70% 50% / cover no-repeat !important; }
.site-footer.sf .sf-cta::before { background: linear-gradient(90deg, rgba(11, 143, 168, 0.97) 0, rgba(11, 143, 168, 0.94) 38%, rgba(11, 143, 168, 0.62) 58%, rgba(7, 52, 61, 0.35) 100%), linear-gradient(0deg, rgba(7, 52, 61, 0.35), transparent 40%) !important; }
.site-footer.sf .sf-cta::after { mask-image: linear-gradient(90deg, transparent 20%, #000 70%) !important; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%) !important; }
.site-footer.sf .sf-cta .sf-wrap { width: min(1440px, calc(100% - 2 * var(--page-rail, clamp(16px, 5vw, 80px)))); }
body.home .site-footer.sf .sf-cta .sf-wrap, body.scm-page .site-footer.sf .sf-cta .sf-wrap { width: calc(100% - 2 * max(var(--frame-pad), calc(var(--page-rail) - var(--stage-inset, 0px)))); }
.site-footer.sf .sf-cta__in { grid-template-columns: minmax(0, 1.25fr) auto; align-items: end; gap: 28px 56px; }
.site-footer.sf .sf-cta h2 { font-size: clamp(34px, 3.9vw, 58px) !important; max-width: 19ch; }
.site-footer.sf .sf-cta__lede { font-size: 17px !important; max-width: 52ch; }
.site-footer.sf .sf-cta__act { padding-bottom: 6px; }
@media (max-width: 899px) { .site-footer.sf .sf-cta { min-height: clamp(440px, 64vh, 560px); align-items: flex-end; background-position: 60% 30% !important; } .site-footer.sf .sf-cta::before { background: linear-gradient(180deg, rgba(7, 52, 61, 0.1) 0, rgba(11, 143, 168, 0.55) 30%, rgba(11, 143, 168, 0.97) 55%) !important; } .site-footer.sf .sf-cta__in { grid-template-columns: 1fr; gap: 22px; } }
.site-footer.sf .sf-main { padding-top: clamp(44px, 5vw, 72px); }

/* ---- Legal pages: meta line and tables */
.article .art-meta { padding: 12px 16px; background: #f4f8f9; border-left: 3px solid #0b8fa8; border-radius: 0 8px 8px 0; font-size: 14px; color: #55605f; }
.article .art-table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 14px; }
.article .art-table th { text-align: left; font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #7b8a8c; padding: 8px 10px; border-bottom: 1px solid #dfe8ea; }
.article .art-table td { padding: 10px; border-bottom: 1px solid #eef3f4; vertical-align: top; color: #2f3a3d; }
.article .art-table code { font: 500 12.5px "IBM Plex Mono", monospace; background: #f4f8f9; padding: 1px 5px; border-radius: 4px; }
@media (max-width: 640px) { .article .art-table { display: block; overflow-x: auto; } }
.article .dsr-form .s-cta { padding: 13px 22px; }

/* ---- FAQ (product + city pages) */
.faq__list { display: grid; gap: 10px; max-width: 980px; }
.faq__item { background: #fff; border: 1px solid #dfe8ea; border-radius: 10px; padding: 0 20px; transition: border-color 0.25s ease; }
.faq__item[open] { border-color: #bfe3ea; }
.faq__item summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 0; font: 500 18px/1.3 "Newsreader", Georgia, serif; color: #1f2a2e; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; border-right: 2px solid #0b8fa8; border-bottom: 2px solid #0b8fa8; transform: translateY(-70%) rotate(45deg); transition: transform 0.3s ease; }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 0 18px; color: #55605f; font-size: 15.5px; line-height: 1.6; max-width: 72ch; }
.faq__a p { margin: 0; }
.s.faq { background: #f4f8f9; }
/* ---- City pages */
.article.city .city-sectors { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 20px; list-style: none; }
.article.city .city-sectors li { padding: 7px 12px; border: 1px solid #dfe8ea; border-radius: 999px; background: #fff; font-size: 14px; color: #2f3a3d; }
.city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 28px; }
.city-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #0a4652; color: #fff; text-decoration: none; isolation: isolate; }
.city-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -1; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.city-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 50, 59, 0.05) 30%, rgba(6, 50, 59, 0.9) 100%); }
.city-card span { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; gap: 2px; }
.city-card b { font: 500 18px/1.15 "Newsreader", Georgia, serif; }
.city-card small { font-size: 12.5px; color: rgba(255, 255, 255, 0.82); }
.city-card:hover img { transform: scale(1.06); }
.article.city .faq__list { margin: 12px 0 28px; }
@media (max-width: 860px) { .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article.city .city-card, .article.city .city-card b, .article.city .city-card:hover { color: #fff; text-decoration: none; }

/* ---- First slide: dense photo mosaic — white gaps, 5 duotone families (teal, pink, amber, indigo, wine) + occasional full colour */
.hero-mosaic.hero-grid { --suite-01: #0b8fa8; --suite-02: #1aa5bf; --suite-03: #3197a8; --suite-04: #0a6f83; --g: 4px;
  position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(var(--cols, 16), var(--cell, 86px)); grid-auto-rows: var(--cell, 86px); gap: var(--g); background: #fff !important; transform: none; overflow: hidden; pointer-events: none; }
.hero-mosaic.hero-grid .tile { position: relative; overflow: hidden; background-size: cover; background-position: 50% 35%; filter: grayscale(1) sepia(1) saturate(1.15); opacity: 0; animation: aw-tile-in 0.9s ease forwards; animation-delay: calc(var(--i) * 9ms); transition: filter 1.1s ease, opacity 0.7s ease; }
.hero-mosaic.hero-grid .tile.is-tint-teal { filter: grayscale(1) sepia(1) hue-rotate(158deg) saturate(1.48) brightness(1.02) contrast(1.03); }
.hero-mosaic.hero-grid .tile.is-tint-pink { filter: grayscale(1) sepia(1) hue-rotate(305deg) saturate(1.62) brightness(0.93) contrast(1.06); }
.hero-mosaic.hero-grid .tile.is-tint-amber { filter: grayscale(1) sepia(1) hue-rotate(22deg) saturate(1.55) brightness(1.04) contrast(1.04); }
.hero-mosaic.hero-grid .tile.is-tint-indigo { filter: grayscale(1) sepia(1) hue-rotate(248deg) saturate(1.42) brightness(0.95) contrast(1.05); }
.hero-mosaic.hero-grid .tile.is-tint-wine { filter: grayscale(1) sepia(1) hue-rotate(328deg) saturate(1.38) brightness(0.9) contrast(1.06); }
@keyframes aw-tile-in { to { opacity: 1; } }
.hero-mosaic.hero-grid .tile::after { content: ""; position: absolute; inset: 0; transition: opacity 1.1s ease; }
.hero-mosaic.hero-grid .tile.is-tint-teal::after { background: linear-gradient(160deg, rgba(11, 143, 168, 0.34), rgba(31, 179, 204, 0.1)); }
.hero-mosaic.hero-grid .tile.is-tint-pink::after { background: linear-gradient(155deg, rgba(150, 38, 88, 0.4), rgba(210, 95, 140, 0.12)); }
.hero-mosaic.hero-grid .tile.is-tint-amber::after { background: linear-gradient(155deg, rgba(180, 95, 28, 0.36), rgba(230, 165, 70, 0.12)); }
.hero-mosaic.hero-grid .tile.is-tint-indigo::after { background: linear-gradient(155deg, rgba(52, 58, 140, 0.38), rgba(110, 120, 210, 0.12)); }
.hero-mosaic.hero-grid .tile.is-tint-wine::after { background: linear-gradient(155deg, rgba(110, 28, 58, 0.42), rgba(160, 70, 95, 0.12)); }
.hero-mosaic.hero-grid .tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(20, 20, 28, 0.12)); transition: opacity 1.1s ease; }
.hero-mosaic.hero-grid .tile.is-lit { filter: saturate(1.14) contrast(1.05) brightness(1.03) !important; }
.hero-mosaic.hero-grid .tile.is-lit::after, .hero-mosaic.hero-grid .tile.is-lit::before { opacity: 0.22 !important; }
.hero-mosaic.hero-grid .tile.is-xl.is-lit { filter: none !important; }
.hero-mosaic.hero-grid .tile.is-xl.is-lit::after, .hero-mosaic.hero-grid .tile.is-xl.is-lit::before { opacity: 0 !important; }
.hero-mosaic.hero-grid .tile.is-swap { opacity: 0; }
.hero-mosaic.hero-grid .tile.is-xl { background-position: 50% 30%; }
.hero-mosaic.hero-grid .tile.is-solid { display: grid; align-content: end; padding: 8px; background: var(--c); filter: none; }
.hero-mosaic.hero-grid .tile.is-solid::before, .hero-mosaic.hero-grid .tile.is-solid::after { display: none; }
.hero-mosaic.hero-grid .tile.is-solid em { font: 600 9.5px/1.2 "IBM Plex Mono", monospace; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
@media (max-width: 899px) { .hero-mosaic.hero-grid .tile.is-solid em { font-size: 7.5px; letter-spacing: 0.08em; } }
@media (prefers-reduced-motion: reduce) { .hero-mosaic.hero-grid .tile { animation: none; opacity: 1; } }

/* real control-room slide: keep the wall sharp, lift the card off the dark lower half */
.hero-slide--room .hs-kb img { filter: saturate(1.05) contrast(1.03); }

/* ==========================================================================
   Bright pass — no navy, no dark turquoise: footer, cards and overlays in white, sky and turquoise
   ========================================================================== */
:root { --sky: #eaf7fa; --sky-2: #d6f0f5; --tq-bright: #1fb3cc; }
/* footer */
html body .site-footer.sf { background: var(--sky) !important; color: #3d4a4e !important; }
html body .site-footer.sf .sf-cta { background: linear-gradient(120deg, #0b8fa8 0%, #1fb3cc 60%, #4cc9de 100%) !important; }
html body .site-footer.sf .sf-cta::before { background: linear-gradient(90deg, rgba(11, 143, 168, 0.92) 0, rgba(31, 179, 204, 0.86) 40%, rgba(31, 179, 204, 0.45) 62%, rgba(76, 201, 222, 0.25) 100%) !important; }
html body .site-footer.sf .sf-main { background: var(--sky) !important; }
html body .site-footer.sf h2 { color: #0b8fa8 !important; }
html body .site-footer.sf .sf-brand p, html body .site-footer.sf .sf-cities, html body .site-footer.sf .sf-office address { color: #3d4a4e !important; }
html body .site-footer.sf .sf-office address b { color: #1f2a2e; }
html body .site-footer.sf .sf-col > a { color: #2f3a3d !important; }
html body .site-footer.sf .sf-col > a:hover { color: #0b8fa8 !important; }
html body .site-footer.sf .sf-contact > a, html body .site-footer.sf .sf-contact > p { color: #1f2a2e !important; }
html body .site-footer.sf .sf-contact small { color: #7b8a8c; }
html body .site-footer.sf .sf-contact svg, html body .site-footer.sf .sf-office address > svg { color: #0b8fa8; }
html body .site-footer.sf .sf-soc { color: #0b8fa8 !important; border-color: #bfe3ea; background: #fff; }
html body .site-footer.sf .sf-soc:hover { background: #0b8fa8; border-color: #0b8fa8; color: #fff !important; }
html body .site-footer.sf .sf-badges li { border-color: #bfe3ea; background: #fff; color: #0b8fa8; }
html body .site-footer.sf .sf-logo img { filter: none !important; }
html body .site-footer.sf .sf-map { border-color: #bfe3ea; background: var(--sky-2); }
html body .site-footer.sf .sf-map iframe { filter: saturate(0.85) !important; }
html body .site-footer.sf .sf-map::after { background: linear-gradient(180deg, rgba(31, 179, 204, 0.08), rgba(11, 143, 168, 0.18)); }
html body .site-footer.sf .sf-dir { color: #0b8fa8 !important; }
html body .site-footer.sf .sf-mark { -webkit-text-stroke: 1px rgba(11, 143, 168, 0.28); color: transparent; }
html body .site-footer.sf .sf-bottom { border-top-color: #cfe6eb; color: #6b7a7f; }
html body .site-footer.sf .sf-bottom a { color: #55605f !important; }
html body .site-footer.sf .sf-bottom a:hover, html body .site-footer.sf .sf-bottom .sf-top { color: #0b8fa8 !important; }
/* products: solid tiles and photo gradients in bright turquoise */
body.home .pt4--solid, body.home .pt4--solid.pt4--tint-pink, body.home .pt4--solid.pt4--tint-amber, body.home .pt4--solid.pt4--tint-indigo, body.home .pt4--solid.pt4--tint-wine, body.home .pt4--solid.pt4--tint-teal { background: linear-gradient(160deg, #1fb3cc, #0b8fa8) !important; --c: #fff; }
body.home .pt4--solid .pt4__ic { stroke: #fff !important; }
body.home .pt4--solid .pt4__k { color: rgba(255, 255, 255, 0.85) !important; }
body.home .pt4--ph { background: #1fb3cc !important; }
body.home .pt4--ph::after { background: linear-gradient(180deg, rgba(11, 143, 168, 0) 0%, rgba(11, 143, 168, 0) 40%, rgba(11, 143, 168, 0.55) 70%, rgba(10, 111, 131, 0.88) 100%) !important; }
body.home .pt4--custom { background: linear-gradient(160deg, #1fb3cc, #0b8fa8) !important; border-color: transparent !important; }
/* first-slide mosaic: suite colours all bright */
.hero-mosaic.hero-grid { --suite-01: #0b8fa8; --suite-02: #1fb3cc; --suite-03: #2cc0d6; --suite-04: #4cc9de; }
/* control-room photo band: turquoise wash instead of black */
body.home .s-field { background: #0b8fa8 !important; }
body.home .s-field::before { background: linear-gradient(180deg, rgba(11, 143, 168, 0.05) 0%, rgba(11, 143, 168, 0.35) 45%, rgba(10, 111, 131, 0.85) 100%), linear-gradient(90deg, rgba(11, 143, 168, 0.5), transparent 60%) !important; }
/* AI brain: answer bar and steps stay light */
.brain__answer { background: #fff; } .brain__steps { background: var(--sky) !important; }

/* FAQ questions are real headings (AEO) but look like the summary line */
.faq__item summary .faq__q { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
html body .faq__item { padding: 0 22px !important; }
html body .faq__item summary { padding: 17px 40px 17px 0 !important; }
html body .faq__a { padding: 0 0 18px !important; }
/* byline + "In short" summary above FAQ lists (E-E-A-T / AI citation passage) */
.faq .byline { margin: 0 0 12px; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #8a979b; }
.faq .byline a { color: #0b8fa8; text-decoration: none; border-bottom: 1px solid rgba(11, 143, 168, 0.35); }
.faq .faq__summary { max-width: 980px; margin: 0 0 20px; padding: 16px 20px; background: #fff; border-left: 3px solid #1fb3cc; border-radius: 0 10px 10px 0; font-size: 15.5px; line-height: 1.65; color: #3d4a4e; }
.faq .faq__summary b { color: #1f2a2e; }