/* =====================================================================================================
   t-services.css (hand-written, 21 Oct 2026): template "services", "the fieldwork line".
   Pages: /en-xx/solutions/programming-and-hosting/ and /en-xx/solutions/reporting-and-delivery/ (us, gb, in).
   Built by site-src/wine_templates/services.py. Class prefix se-. Loaded after wine-chrome.css and wine-base.css.
   Desktop 1440 first. Motion: wine-motion.js (pinned line, reveals, tilt, parallax); every state below reads in order
   without it (html:not(.wm-on): every station lit, every station card shown in turn).
   ===================================================================================================== */

body.t-services { --se-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --se-paper-line: #f1e7eb; --se-mut: #6e6269; --se-bar: #e08aa5; --se-b: #4a1238; --se-t: #e9a55a; }
/* in-page anchors (#se-proc: the stage link and station 5; #se-shelf: the reporting hero button): land below the fixed
   header (poll bar + nav pill end at about 134 px). The sections have 112 px top padding, so 60 px puts the kicker at
   about 172 px and the h2 at about 206 px, where the pinned #se-line lands too. */
body.t-services #se-proc, body.t-services #se-shelf { scroll-margin-top: 60px; }
/* the template's own lists: no markers, no browser indent (zero specificity, so every se- rule below still wins) */
:where(ol, ul):where([class*="se-"]) { list-style: none; margin: 0; padding: 0; }

/* ---------- shared bits: bars, keys, paper panels ---------- */
.se-hb { display: flex; flex-direction: column; gap: 10px; }
.se-hb li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.se-bl { font: 500 13px/17px var(--text); color: var(--ink); }
.se-bar { position: relative; display: block; height: 10px; border-radius: 999px; background: #f3eaee; overflow: hidden; }
.se-bar i { display: block; height: 100%; border-radius: inherit; background: var(--se-bar); transform-origin: 0 50%;
  transform: scaleX(var(--v, 1)); transition: transform 1.1s var(--wn-ease-out); }
.se-hb li.is-hi .se-bar i, .se-hb--q li.is-full .se-bar i { background: var(--wn-btn); }
.se-bar--b i { background: var(--se-b); }
.se-bar--t i { background: var(--se-t); }
.se-hb b { font: 600 13px/1 var(--text); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.se-hb b em { margin-left: 6px; font-style: normal; font-weight: 600; color: var(--se-mut); }
.se-hb--dual li { grid-template-columns: 84px minmax(0, 1fr) 76px; }
.se-dual { display: flex; flex-direction: column; gap: 4px; }
.se-dual .se-bar { height: 8px; }
.se-dual .se-bar:first-child i { background: var(--wn-btn); }
.se-key { display: flex; gap: 16px; margin-top: 12px; font: 600 12px/1 var(--text); color: var(--se-mut); }
.se-key span { display: inline-flex; align-items: center; gap: 6px; }
.se-key i { width: 10px; height: 10px; border-radius: 3px; }
.se-key__a { background: var(--wn-btn); }
.se-key__b { background: var(--se-b); }
.se-key__t { background: var(--se-t); }

.se-pp { background: #fff; border-radius: 20px; padding: 18px 20px 20px; color: var(--ink);
  box-shadow: 0 26px 56px rgba(10, 2, 8, .38); }
.se-pp__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.se-pp__h b { font: 600 15px/20px var(--text); color: var(--ink); }
.se-pp__h span { font: 500 12.5px/16px var(--text); color: var(--se-mut); text-align: right; }
.se-pp__f { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 12.5px/17px var(--text); color: var(--blue); }
.se-pp__f svg { flex: none; }
.se-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.se-chips li { padding: 5px 10px; border-radius: 999px; background: var(--wn-rose-10); font: 600 12px/16px var(--text); color: var(--wn-deep); }

/* device glyphs */
.se-dev { position: relative; display: inline-block; flex: none; border: 1.6px solid currentColor; border-radius: 3px; }
.se-dev--phone { width: 11px; height: 18px; border-radius: 3px; }
.se-dev--tablet { width: 15px; height: 19px; }
.se-dev--laptop { width: 20px; height: 13px; margin-bottom: 3px; border-radius: 2px; }
.se-dev--laptop::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -5px; height: 2px; border-radius: 2px; background: currentColor; }

/* ---------- 1. hero ---------- */
.se-hero { padding-bottom: 72px; }
.se-hero__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%, rgba(0,0,0,0) 100%); }
.se-hero__grid { align-items: center; }
.se-h1 { font-size: 58px; line-height: 64px; }
.se-h1__b { display: block; margin-top: 12px; font-size: 40px; line-height: 48px; letter-spacing: -.6px; color: var(--mint); }
.se-hero__p2 { max-width: 620px; font: 400 16px/25px var(--text); color: rgba(255, 255, 255, .78); }
.se-hero__vis { min-height: 480px; }

/* programming: a script with routing, and the same question on a phone */
.se-hv { position: relative; height: 470px; }
.se-script { position: absolute; left: 0; top: 0; width: 356px; padding-bottom: 16px; border-radius: 22px;
  background: rgba(26, 6, 22, .68); border: 1px solid rgba(255, 179, 199, .26); box-shadow: var(--wn-shadow-dark);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; }
.se-script__bar { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 18px; border-bottom: 1px solid rgba(255, 179, 199, .16); }
.se-script__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 179, 199, .42); }
.se-script__bar span { margin-left: 8px; font: 600 13.5px/1 var(--text); color: #fff; white-space: nowrap; }
.se-script__bar em { margin-left: auto; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 179, 199, .38);
  font: 600 12px/1 var(--text); font-style: normal; color: var(--mint); white-space: nowrap; }
.se-script__rows { padding: 10px 10px 2px; }
.se-script__rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; column-gap: 8px; row-gap: 6px;
  padding: 9px 10px; border-radius: 12px; }
.se-script__rows li + li { margin-top: 2px; }
.se-script__rows li.is-on { background: rgba(214, 51, 94, .24); box-shadow: inset 0 0 0 1px rgba(255, 179, 199, .32); }
.se-script__rows code { padding-top: 3px; font: 600 12.5px/1 var(--se-mono); color: var(--mint); }
.se-script__rows b { font: 500 14px/19px var(--text); color: #fff; }
.se-tg { grid-column: 2; justify-self: start; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .09);
  font: 600 12px/1 var(--text); color: rgba(255, 255, 255, .86); white-space: nowrap; }
.se-tg--out { background: rgba(255, 138, 122, .16); color: #ffc9bd; }
.se-tg--on { background: rgba(255, 179, 199, .2); color: #fff; }
.se-script__ends { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 18px 0; }
.se-script__to { flex: 1 1 100%; font: 600 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.se-end { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 179, 199, .24); font: 600 12.5px/1 var(--text); color: #fff; }
.se-end.is-ok { background: var(--wn-btn); border-color: transparent; }
.se-phone-w { position: absolute; right: 0; top: 30px; z-index: 2; }
.se-phone { position: relative; display: flex; flex-direction: column; gap: 12px; width: 192px; height: 324px; padding: 34px 13px 14px;
  border-radius: 36px; background: #fff; border: 8px solid #2a0b22; box-shadow: 0 34px 70px rgba(10, 2, 8, .55), 0 0 0 1px rgba(255, 179, 199, .25); }
.se-phone__notch { position: absolute; top: 8px; left: 50%; width: 66px; height: 16px; margin-left: -33px; border-radius: 10px; background: #2a0b22; }
.se-phone__bar { height: 5px; border-radius: 5px; background: #f1e9ec; overflow: hidden; }
.se-phone__bar i { display: block; height: 100%; background: var(--wn-btn); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.se-phone__q { font: 600 14px/19px var(--text); color: var(--ink); }
.se-phone__q span { display: block; margin-bottom: 4px; font: 700 12px/1 var(--text); letter-spacing: .06em; color: var(--blue); }
.se-phone__sc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.se-phone__sc i { height: 28px; border-radius: 8px; border: 1px solid #e3d5db; font: 600 12px/26px var(--text); font-style: normal;
  text-align: center; color: var(--ink); }
.se-phone__sc i.is-sel { background: var(--wn-btn); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(214, 51, 94, .35); }
.se-phone__ax { display: flex; justify-content: space-between; gap: 10px; font: 500 12px/15px var(--text); color: var(--se-mut); }
.se-phone__ax span:last-child { text-align: right; }
.se-phone__btn { margin-top: auto; display: grid; place-items: center; height: 40px; border-radius: 999px; background: var(--wn-btn);
  font: 600 14px/1 var(--text); color: #fff; }
.se-hv__devs { position: absolute; right: 0; top: 376px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: 10px; width: 192px; padding: 12px 12px; border-radius: 18px; background: rgba(26, 6, 22, .6); border: 1px solid rgba(255, 179, 199, .24);
  color: var(--mint); font: 600 12.5px/17px var(--text); text-align: center; }
.se-hv__devs span:last-child { flex: 1 1 100%; color: #fff; }

/* reporting: dataset -> chart -> findings */
.se-hv--rep { height: 470px; }
.se-l3 { position: absolute; border-radius: 20px; padding: 16px 18px 18px; }
.se-l3__h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.se-l3__k { font: 700 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.se-l3__h b { font: 600 15px/20px var(--text); }
.se-l3--a { left: 0; top: 0; width: 266px; background: rgba(26, 6, 22, .7); border: 1px solid rgba(255, 179, 199, .26);
  box-shadow: var(--wn-shadow-dark); color: #fff; transform: rotate(-2.5deg); }
.se-l3--a .se-l3__k { color: var(--mint); }
.se-ds { font: 500 12.5px/1 var(--se-mono); }
.se-ds__r { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); padding: 6px 0; border-bottom: 1px solid rgba(255, 179, 199, .14);
  color: rgba(255, 255, 255, .84); }
.se-ds__h { color: var(--mint); font-weight: 700; }
.se-l3--b { right: 0; top: 112px; z-index: 2; width: 282px; background: #fff; color: var(--ink); box-shadow: 0 30px 64px rgba(10, 2, 8, .5);
  transform: rotate(1.5deg); }
.se-l3--b .se-l3__k { color: var(--blue); }
.se-l3--b .se-hb li { grid-template-columns: 70px minmax(0, 1fr) 40px; }
.se-l3--c { left: 30px; bottom: 0; z-index: 3; width: 330px; background: linear-gradient(150deg, #c42a57 0%, #8e1a47 70%, #6e1a4c 100%);
  color: #fff; box-shadow: 0 30px 64px rgba(10, 2, 8, .5); transform: rotate(-1deg); }
.se-l3--c .se-l3__k { color: #fff; }   /* white: #ffd6e0 was 4.4:1 on the card's lightest stop (#c42a57), white is 5.5:1 */
.se-finds li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; font: 500 14px/20px var(--text); color: #fff; }
.se-finds li + li { margin-top: 9px; }
.se-finds svg { margin-top: 3px; color: var(--wn-gold); }

/* where it sits in a project: a chain of arrow segments */
.se-stages { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 76px; }
.se-stages__k { font: 700 12px/17px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.se-stages__row { display: flex; }
.se-stg { position: relative; flex: 1 1 0; min-width: 0; margin-left: -14px; }
.se-stg:first-child { margin-left: 0; }
.se-stg__in { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 118px; padding: 18px 30px 18px 36px;
  background: rgba(255, 255, 255, .075); color: #fff; transition: background-color .25s ease;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); }
.se-stg:first-child .se-stg__in { padding-left: 22px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
.se-stg:last-child .se-stg__in { padding-right: 20px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%); }
a.se-stg__in:hover { background: rgba(255, 255, 255, .15); }
a.se-stg__in:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }
.se-stg.is-here .se-stg__in { background: linear-gradient(120deg, #c42a57 0%, #8e1a47 100%); }
.se-stg.is-here a.se-stg__in:hover { background: linear-gradient(120deg, #b4235a 0%, #7a163d 100%); }
.se-stg__n { font: 600 12px/1 var(--display); letter-spacing: .06em; color: var(--mint); }
.se-stg__in b { font: 500 16px/21px var(--display); letter-spacing: -.1px; color: #fff; }
.se-stg__d { font: 400 13px/18px var(--text); color: rgba(255, 255, 255, .78); }
.se-stg.is-here .se-stg__n, .se-stg.is-here .se-stg__d { color: #fff; }
.se-stg__here { align-self: flex-start; margin-top: auto; padding: 4px 9px; border-radius: 999px; background: rgba(26, 6, 22, .42);
  font: 700 12px/1 var(--text); font-style: normal; letter-spacing: .04em; color: #fff; }

/* ---------- 2. the fieldwork line (pinned) ---------- */
.se-line { position: relative; color: #fff;
  background: radial-gradient(46% 60% at 88% 18%, rgba(176, 32, 92, .38) 0%, rgba(176, 32, 92, 0) 72%),
              radial-gradient(40% 52% at 0% 100%, rgba(74, 18, 56, .95) 0%, rgba(74, 18, 56, 0) 78%), var(--wn-ink);
  --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86); --wn-mut: rgba(255, 255, 255, .74); }
.se-line .wm-pin__sticky { position: relative; padding: 112px 0; }
html.wm-on .se-line .wm-pin__sticky { display: flex; align-items: center; align-items: safe center; padding: 136px 0 26px; box-sizing: border-box; }
body.t-services :is(.wn-h1, .wn-h2, .se-card__t) { text-wrap: balance; }
.se-line__glow { position: absolute; left: 50%; top: 46%; width: 1100px; height: 420px; margin-left: -550px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .16), rgba(232, 70, 111, 0)); }
.se-line__in { position: relative; display: flex; flex-direction: column; gap: 26px; width: 100%; }
.se-line__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.se-line__ht { display: flex; flex-direction: column; gap: 12px; }
.se-line__head .wn-h2 { font-size: 44px; line-height: 52px; }
.se-line__ht { flex: 1 1 auto; min-width: 0; }
.se-line__lede { flex: 0 0 auto; max-width: 360px; margin-bottom: 4px; font: 400 16px/24px var(--text); color: rgba(255, 255, 255, .78); }

/* the rail: five stations on a production line */
.se-rail { position: relative; }
.se-rail__track { position: absolute; z-index: 0; left: 10%; right: 10%; top: 32px; height: 4px; margin-top: -2px; border-radius: 4px; }
.se-rail__dash { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.se-rail__dash i { display: block; width: calc(100% + 440px); height: 100%;
  background: repeating-linear-gradient(90deg, rgba(255, 179, 199, .34) 0 12px, rgba(255, 179, 199, 0) 12px 22px); }
.se-rail__fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, #d6335e 0%, #e8466f 55%, #ffb3c7 100%); box-shadow: 0 0 18px rgba(232, 70, 111, .55); }
.se-rail__pw { position: absolute; z-index: 1; left: 10%; right: 10%; top: 32px; height: 0; pointer-events: none; }
.se-rail__pk { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 5px rgba(232, 70, 111, .45), 0 0 28px 8px rgba(255, 179, 199, .7); }
.se-rail__st { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.se-st { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.se-st__node { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #3a0f2c;
  border: 1.5px solid var(--mint); color: var(--mint); box-shadow: 0 10px 24px rgba(10, 2, 8, .45);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .45s var(--wn-ease-out); }
.se-st__n { font: 600 12px/1 var(--text); letter-spacing: .1em; color: var(--mint); }
.se-st__t { max-width: 210px; font: 500 16px/21px var(--display); color: #fff; }
.se-st__n, .se-st__t { transition: opacity .35s ease; }
/* moving: the belt runs, the fill and the spark follow the scroll; the stations light up in turn */
html.wm-on .se-rail__dash i { transform: translate3d(calc(var(--wm-pin, 0) * -440px), 0, 0); }
html.wm-on .se-rail__fill { transform: scaleX(clamp(0, calc(var(--wm-pin, 0) * 1.25), 1)); }
html.wm-on .se-rail__pw { transform: translate3d(calc(clamp(0, calc(var(--wm-pin, 0) * 1.25), 1) * 100%), 0, 0); }
html:not(.wm-on) .se-rail__pw { display: none; }
html.wm-on .se-line .se-st__node { background: #26091f; border-color: rgba(255, 179, 199, .3); color: rgba(255, 179, 199, .62); box-shadow: none; }
/* upcoming stations: the titles dim; the small numbers keep 4.5:1 on the wine (a lighter rose, not opacity) */
html.wm-on .se-line .se-st__t { opacity: .55; }
html.wm-on .se-line .se-st__n { color: rgba(255, 179, 199, .78); }
html.wm-on .se-line[data-active="0"] .se-st:nth-child(-n+1) .se-st__node, html.wm-on .se-line[data-active="1"] .se-st:nth-child(-n+2) .se-st__node,
html.wm-on .se-line[data-active="2"] .se-st:nth-child(-n+3) .se-st__node, html.wm-on .se-line[data-active="3"] .se-st:nth-child(-n+4) .se-st__node,
html.wm-on .se-line[data-active="4"] .se-st:nth-child(-n+5) .se-st__node {
  background: #3a0f2c; border-color: var(--mint); color: var(--mint); }
html.wm-on .se-line[data-active="0"] .se-st:nth-child(-n+1) :is(.se-st__n, .se-st__t), html.wm-on .se-line[data-active="1"] .se-st:nth-child(-n+2) :is(.se-st__n, .se-st__t),
html.wm-on .se-line[data-active="2"] .se-st:nth-child(-n+3) :is(.se-st__n, .se-st__t), html.wm-on .se-line[data-active="3"] .se-st:nth-child(-n+4) :is(.se-st__n, .se-st__t),
html.wm-on .se-line[data-active="4"] .se-st:nth-child(-n+5) :is(.se-st__n, .se-st__t) { opacity: 1; }
html.wm-on .se-line[data-active="0"] .se-st:nth-child(-n+1) .se-st__n, html.wm-on .se-line[data-active="1"] .se-st:nth-child(-n+2) .se-st__n,
html.wm-on .se-line[data-active="2"] .se-st:nth-child(-n+3) .se-st__n, html.wm-on .se-line[data-active="3"] .se-st:nth-child(-n+4) .se-st__n,
html.wm-on .se-line[data-active="4"] .se-st:nth-child(-n+5) .se-st__n { color: var(--mint); }
html.wm-on .se-line[data-active="0"] .se-st:nth-child(1) .se-st__node, html.wm-on .se-line[data-active="1"] .se-st:nth-child(2) .se-st__node,
html.wm-on .se-line[data-active="2"] .se-st:nth-child(3) .se-st__node, html.wm-on .se-line[data-active="3"] .se-st:nth-child(4) .se-st__node,
html.wm-on .se-line[data-active="4"] .se-st:nth-child(5) .se-st__node {
  background: var(--wn-btn); border-color: transparent; color: #fff; transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(214, 51, 94, .22), 0 0 44px rgba(232, 70, 111, .65); }

/* the station cards (pinned layers; without motion they follow one another) */
.se-line__layers { position: relative; }
.se-card { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 40px; align-items: center; padding: 28px 32px;
  border-radius: 28px; background: rgba(42, 11, 34, .74); border: 1px solid rgba(255, 179, 199, .22);
  box-shadow: 0 30px 70px rgba(10, 2, 8, .45); }
.se-card + .se-card { margin-top: 20px; }
html.wm-on .se-card + .se-card { margin-top: 0; }
/* keyboard: a card whose link has focus takes the stage at once (t-services.js then scrolls the pinned section to
   that station, so wine-motion.js makes it the active one); the active card steps back while another holds focus */
html.wm-on .se-line .se-line__layers > .se-card[data-step]:focus-within { opacity: 1; transform: none; pointer-events: auto; z-index: 3; }
html.wm-on .se-line:focus-within .se-line__layers > .se-card[data-step].is-active:not(:focus-within) { opacity: 0; pointer-events: none; }
html.wm-on .se-line .se-line__layers > .se-card[data-step]:focus-within .se-bar i { transform: scaleX(var(--v, 1)); }
.se-card__txt { min-width: 0; }
.se-card__n { font: 600 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.se-card__n span { color: rgba(255, 255, 255, .62); }
.se-card__t { margin-top: 12px; font: 500 30px/36px var(--display); letter-spacing: -.5px; color: #fff; }
.se-card__x { max-width: 640px; margin-top: 12px; font: 400 16.5px/26px var(--text); color: rgba(255, 255, 255, .86); }
.se-card__more { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; max-width: 640px; margin-top: 16px; padding: 12px 14px;
  border-radius: 14px; background: rgba(255, 179, 199, .08); border: 1px solid rgba(255, 179, 199, .2);
  font: 400 14px/21px var(--text); color: rgba(255, 255, 255, .86); }
.se-card__more svg { margin-top: 2px; color: var(--mint); }
.se-card__more a { margin-left: 4px; font-weight: 600; color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.se-card__more a:hover { color: #fff; }
.se-card__links { margin-top: 18px; }
.se-card__links p { font: 700 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.se-card__links ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.se-card__links a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 179, 199, .42); font: 600 13.5px/1 var(--text); color: #fff; transition: background-color .2s ease, border-color .2s ease; }
.se-card__links a:hover { background: rgba(255, 179, 199, .14); border-color: var(--mint); }
.se-card__links a svg { color: var(--mint); }
.se-card__go { margin-top: 16px; }
.se-card__go .tlink { color: var(--mint); }
.se-card__go .tlink:hover { color: #fff; }
.se-card__vis { min-width: 0; }
/* the drawn output grows when its station takes the stage */
html.wm-on .se-line .se-card:not(.is-active) .se-bar i { transform: scaleX(0); }
.se-line .se-card li:nth-child(2) .se-bar i { transition-delay: .1s; }
.se-line .se-card li:nth-child(3) .se-bar i { transition-delay: .2s; }
.se-line .se-card li:nth-child(4) .se-bar i { transition-delay: .3s; }
.se-line .se-card li:nth-child(5) .se-bar i { transition-delay: .4s; }
.se-line .se-card .se-bar--b i, .se-line .se-card .se-cl + .se-cl .se-bar i { transition-delay: .25s; }

/* station drawings: programming */
.se-plan { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 16px; }
.se-plan::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 13px; height: 2px;
  background: linear-gradient(90deg, var(--blue) 0 58%, #e8dfe3 58% 100%); }
.se-plan li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.se-plan i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #e3d5db; color: #fff; }
.se-plan .is-done i { background: var(--blue); border-color: var(--blue); }
.se-plan .is-now i { border-color: var(--wn-btn); box-shadow: 0 0 0 5px rgba(214, 51, 94, .18); }
.se-plan b { font: 600 12.5px/16px var(--text); color: var(--ink); }
.se-own li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--se-paper-line); }
.se-own__i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--wn-rose-10); color: var(--blue); }
.se-own b { font: 600 13.5px/18px var(--text); color: var(--ink); }
.se-own em { padding: 5px 10px; border-radius: 999px; background: var(--wn-rose-10); font: 600 12px/1 var(--text); font-style: normal; color: var(--blue); }
.se-hb--q li { grid-template-columns: 84px minmax(0, 1fr) 70px; }
.se-chk li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: #fbf6f8; }
.se-chk li + li { margin-top: 8px; }
.se-ok { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; }
.se-chk b { font: 600 14px/18px var(--text); color: var(--ink); }
.se-chk em { padding: 5px 10px; border-radius: 999px; background: var(--wn-rose-10); font: 600 12px/1 var(--text); font-style: normal; color: var(--blue); }
.se-devs { display: flex; gap: 10px; margin-top: 14px; }
.se-devs li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; height: 74px;
  padding-bottom: 10px; border: 1px dashed #e0cdd5; border-radius: 14px; color: var(--wn-deep); }
.se-devs li span:last-child { font: 600 12.5px/1 var(--text); color: var(--ink); }
.se-devs .se-dev--phone { width: 15px; height: 25px; border-radius: 4px; }
.se-devs .se-dev--tablet { width: 22px; height: 28px; border-radius: 4px; }
.se-devs .se-dev--laptop { width: 30px; height: 19px; margin-bottom: 6px; }
.se-resp li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.se-resp li + li { margin-top: 4px; }
.se-resp code { font: 600 12.5px/1 var(--se-mono); color: var(--se-mut); }
.se-resp span { font: 500 13px/17px var(--text); color: var(--ink); }
.se-resp em { padding: 4px 9px; border-radius: 999px; font: 600 12px/1 var(--text); font-style: normal; background: #f1e9ec; color: #4f3a46; }
.se-resp .is-flag { background: var(--wn-rose-10); }
.se-resp .is-flag em { background: var(--blue); color: #fff; }
.se-xt { font: 500 12.5px/1 var(--text); color: var(--ink); }
.se-xt__r { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); align-items: center; padding: 7px 6px; border-bottom: 1px solid var(--se-paper-line); }
.se-xt__r span { padding: 3px 4px; text-align: right; font-variant-numeric: tabular-nums; }
.se-xt__r span:first-child { text-align: left; }
.se-xt__h span { font-weight: 700; font-size: 12px; color: var(--wn-deep); }
.se-xt span.is-hi { border-radius: 6px; background: var(--wn-btn); color: #fff; font-weight: 700; }
.se-fts { display: flex; gap: 8px; margin-top: 14px; }
.se-ft { padding: 6px 10px; border-radius: 8px; font: 700 12px/1 var(--se-mono); color: #fff; }
.se-ft--xlsx { background: var(--se-b); }
.se-ft--csv { background: var(--wn-ink); }
.se-ft--pptx { background: var(--blue); }

/* station drawings: reporting */
.se-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.se-idea { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 14px; border-radius: 14px; border: 1px solid #ecdfe4; }
.se-idea.is-hi { border-color: var(--wn-btn); box-shadow: 0 0 0 3px rgba(214, 51, 94, .12); }
.se-idea.is-hi .se-bar i { background: var(--wn-btn); }
.se-idea__k { font: 700 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.se-idea b { min-height: 36px; font: 600 13.5px/18px var(--text); color: var(--ink); }
.se-idea em { font: 600 12.5px/16px var(--text); font-style: normal; color: var(--ink); }
.se-hb--trend li { grid-template-columns: 84px minmax(0, 1fr) 40px 84px; }
.se-trend { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--text); font-style: normal; color: var(--se-mut); }
.se-trend--growing { color: var(--blue); }
.se-claims li { padding: 10px 0; border-top: 1px solid var(--se-paper-line); }
.se-claims li:first-child { padding-top: 0; border-top: 0; }
.se-claims q { display: block; quotes: none; font: 600 13.5px/18px var(--text); color: var(--ink); }
.se-claims q::before, .se-claims q::after { content: none; }
.se-cl { display: grid; grid-template-columns: 74px minmax(0, 1fr) 38px; align-items: center; gap: 8px; margin-top: 6px; }
.se-cl > span:first-child { font: 500 12px/1 var(--text); color: var(--se-mut); }
.se-cl b { font: 600 12.5px/1 var(--text); color: var(--ink); text-align: right; }
.se-claims .se-bar { height: 8px; }

/* ---------- 3a. programming: the six data processing services ---------- */
.se-proc__head { display: flex; flex-direction: column; gap: 16px; max-width: 1040px; margin-bottom: 40px; }
.se-proc__head .wn-sub { font: 400 20px/30px var(--text); color: var(--wn-mut, var(--grey70)); max-width: 720px; }
.se-proc__head--c { align-items: center; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 56px; }
.se-man { position: relative; height: 64px; }
.se-man i { position: absolute; display: block; background: var(--wn-btn); }
.se-man__stem { left: 50%; top: 0; width: 2px; height: 32px; margin-left: -1px; background: linear-gradient(180deg, rgba(214, 51, 94, 0), var(--wn-btn)); transform-origin: 50% 0; }
.se-man__bar { left: calc((100% - 48px) / 6); right: calc((100% - 48px) / 6); top: 31px; height: 2px; }
.se-man__d { top: 31px; width: 2px; height: 33px; transform-origin: 50% 0; }
.se-man__d::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--wn-btn);
  box-shadow: 0 0 0 4px rgba(214, 51, 94, .18); }
.se-man__d--1 { left: calc((100% - 48px) / 6 - 1px); }
.se-man__d--2 { left: calc(50% - 1px); }
.se-man__d--3 { right: calc((100% - 48px) / 6 - 1px); }
html.wm-on .se-man i { transition: transform .6s var(--wn-ease-out); }
html.wm-on .se-man__bar { transition-delay: .35s !important; transition-duration: .7s !important; }
html.wm-on .se-man__d { transition-delay: .9s !important; }
html.wm-on .se-man:not(.is-in) .se-man__stem, html.wm-on .se-man:not(.is-in) .se-man__d { transform: scaleY(0); }
html.wm-on .se-man:not(.is-in) .se-man__bar { transform: scaleX(0); }
.se-proc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 14px; }
.se-pc { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--wn-r); background: #fff; border: 1px solid var(--wn-line);
  transition: box-shadow .4s ease, transform .5s var(--wn-ease-out); }
html.wm-on .se-proc__grid.is-in .se-pc:hover { transform: translateY(-6px); box-shadow: var(--wn-shadow); }
.se-pc__vis { display: flex; flex-direction: column; justify-content: center; height: 188px; padding: 20px 24px;
  background: linear-gradient(160deg, #fbe6ec 0%, #fdf4f6 55%, #fff 100%); border-bottom: 1px solid var(--wn-line); }
.se-pc__txt { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 28px; }
.se-pc__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wn-rose-10); color: var(--blue); }
.se-pc__txt p { font: 400 15.5px/24px var(--text); color: var(--grey70); }
.se-xt--sm .se-xt__r { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); padding: 6px 4px; background: rgba(255, 255, 255, .7); }
.se-xt--sm { border-radius: 12px; overflow: hidden; border: 1px solid #f0e2e7; }
.se-recode li { display: grid; grid-template-columns: 62px 20px minmax(0, 1fr); align-items: center; gap: 8px; }
.se-recode li + li { margin-top: 9px; }
.se-recode code { padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid #eadbe1; font: 600 13px/1 var(--se-mono); text-align: center; color: var(--ink); }
.se-recode svg { color: var(--blue); }
.se-recode b { padding: 6px 10px; border-radius: 8px; background: var(--se-b); font: 600 13px/1 var(--text); color: #fff; justify-self: start; }
.se-hb--sm li { grid-template-columns: 58px minmax(0, 1fr) 72px; }
.se-pc .se-key { margin-top: 10px; }
.se-flags li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #f0e2e7; }
.se-flags li + li { margin-top: 7px; }
.se-flags svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue); color: #fff; }
.se-flags b { font: 600 13.5px/1 var(--text); color: var(--ink); }
.se-flags em { margin-left: auto; font: 600 12px/1 var(--text); font-style: normal; color: var(--blue); }
.se-code { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 10px; }
.se-code__q li { padding: 6px 9px; border-radius: 10px 10px 10px 3px; background: #fff; border: 1px solid #f0e2e7; font: 500 12.5px/16px var(--text); color: var(--ink); }
.se-code__q li + li, .se-code__c li + li { margin-top: 7px; }
.se-code__ar { color: var(--blue); }
.se-code__c li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 11px; border-radius: 999px; background: var(--blue); font: 600 12.5px/1 var(--text); color: #fff; }
.se-mk { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 10px; }
.se-mk ul { display: flex; flex-direction: column; gap: 7px; }
.se-mk li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid #f0e2e7;
  font: 600 13px/1 var(--text); color: var(--ink); }
.se-mk li svg { color: var(--blue); }
.se-mk__j { height: 84px; border: 2px solid var(--wn-btn); border-left: 0; border-radius: 0 12px 12px 0; }
.se-mk p { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 14px; background: var(--se-b);
  font: 600 12.5px/17px var(--text); text-align: center; color: #fff; }
.se-mk p svg { color: var(--mint); }
.se-stats { margin-top: 72px; }

/* ---------- 3b. reporting: from results to the file your team needs ---------- */
.se-ds4 { position: relative; }
.se-ds4__line { position: absolute; left: 31px; right: calc((100% - 72px) / 4 - 31px); top: 30px; height: 2px;
  background: linear-gradient(90deg, var(--wn-btn), #ffb3c7); transform-origin: 0 50%; }
html.wm-on .se-ds4__line { transition: transform 1.6s var(--wn-ease-out), opacity .6s ease; }
html.wm-on .se-ds4__line:not(.is-in) { transform: scaleX(0); }
.se-ds4__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.se-ds4__i { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.se-ds4__node { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 2px solid var(--wn-btn);
  color: var(--blue); box-shadow: 0 0 0 8px #fff; }
.se-ds4__n { margin-top: 8px; font: 600 13px/1 var(--text); letter-spacing: .1em; color: var(--blue); }
.se-ds4__i p { font: 400 15.5px/24px var(--text); color: var(--grey70); }

/* ---------- 4. the shelf of deliverables ---------- */
.se-shelf-sec { overflow: hidden; background: radial-gradient(60% 70% at 50% 0%, rgba(255, 179, 199, .38) 0%, rgba(255, 179, 199, 0) 70%), var(--wn-rose-10); }
.se-shelf-sec__glow { position: absolute; left: 50%; top: 34%; width: 1000px; height: 520px; margin-left: -500px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .14), rgba(232, 70, 111, 0)); }
.se-shelf { position: relative; }
.se-shelf__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
/* the ledge: a light top face and a wine front edge, at the foot of the objects (y 250) */
.se-shelf__ledge { position: absolute; z-index: 0; left: -24px; right: -24px; top: 246px; height: 18px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #fbe3ea 0%, #efc0cf 100%); box-shadow: 0 2px 0 rgba(255, 255, 255, .8) inset; transform-origin: 50% 50%; }
.se-shelf__ledge::after { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 16px; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #5a1644 0%, #33102c 100%); box-shadow: 0 26px 40px rgba(74, 18, 56, .28); }
html.wm-on .se-shelf__ledge { transition: opacity .8s ease, transform 1.2s var(--wn-ease-out); }
html.wm-on .se-shelf__ledge:not(.is-in) { transform: scaleX(.3); }
.se-file { display: flex; flex-direction: column; align-items: center; text-align: center; }
.se-file__stand { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 256px; }
.se-file__obj { position: relative; z-index: 1; }
.se-file__shadow { position: absolute; z-index: 0; left: 50%; bottom: -5px; width: 160px; height: 16px; margin-left: -80px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 18, 56, .3), rgba(74, 18, 56, 0)); }
.se-file__ext { position: absolute; z-index: 2; top: -12px; right: -14px; padding: 7px 10px; border-radius: 9px; font: 700 13px/1 var(--se-mono);
  color: #fff; box-shadow: 0 10px 20px rgba(30, 10, 26, .22); }
.se-file--pptx .se-file__ext { background: var(--blue); }
.se-file--xlsx .se-file__ext { background: var(--se-b); }
.se-file--csv .se-file__ext { background: var(--wn-ink); }
.se-file--png .se-file__ext { background: var(--wn-gold); color: var(--ink); }
.se-file--html .se-file__ext { background: var(--wn-deep); }
.se-file__t { margin-top: 46px; font: 600 19px/25px var(--text); color: var(--ink); }
.se-file p { max-width: 230px; margin-top: 8px; font: 400 14.5px/22px var(--text); color: var(--grey70); }
.se-obj { position: relative; box-shadow: 0 22px 40px rgba(74, 18, 56, .2); border-radius: 10px; }
/* deck: a stack of slides */
.se-obj--deck { width: 196px; height: 140px; box-shadow: none; }
.se-obj__s { position: absolute; inset: 0; border-radius: 10px; background: #fff; border: 1px solid #ecdfe4; }
.se-obj__s--3 { transform: translate(-16px, -16px); opacity: .55; }
.se-obj__s--2 { transform: translate(-8px, -8px); opacity: .85; }
.se-obj__slide { position: absolute; inset: 0; padding: 16px 18px; border-radius: 10px; background: #fff; border: 1px solid #ecdfe4;
  box-shadow: 0 22px 40px rgba(74, 18, 56, .2); }
.se-obj__slide b { display: block; width: 62%; height: 9px; border-radius: 4px; background: #2a0b22; }
.se-obj__slide u { display: block; width: 40%; height: 6px; margin-top: 7px; border-radius: 3px; background: #e8dfe3; }
.se-cols { display: flex; align-items: flex-end; gap: 9px; height: 62px; margin-top: 14px; }
.se-cols i { flex: 1 1 0; height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: var(--wn-btn); }
.se-cols i:nth-child(even) { background: var(--se-b); }
/* workbook */
.se-obj--xlsx { width: 172px; height: 204px; background: #fff; overflow: hidden; border: 1px solid #e6d8de; }
.se-sheet { position: absolute; inset: 0 0 24px 0; }
.se-sheet__h { display: block; height: 24px; background: var(--se-b); }
.se-sheet__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.se-sheet__g i { height: 26px; border-right: 1px solid #f0e4e9; border-bottom: 1px solid #f0e4e9; }
.se-sheet__g i:nth-child(4n+1) { background: #fbf3f6; }
.se-sheet__g i:nth-child(10), .se-sheet__g i:nth-child(15), .se-sheet__g i:nth-child(19) { background: rgba(214, 51, 94, .2); }
.se-sheet__tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; height: 24px; padding: 0 8px; background: #f3eaee; }
.se-sheet__tabs i { width: 34px; height: 14px; border-radius: 0 0 5px 5px; background: #fff; }
.se-sheet__tabs i:first-child { background: var(--se-b); }
/* csv: the raw text */
.se-obj--csv { width: 164px; height: 212px; padding: 28px 14px 14px; background: #fff; border: 1px solid #e6d8de; }
.se-obj--csv pre { margin: 0; font: 600 12px/19px var(--se-mono); color: #3a1a30; text-align: left; white-space: pre; overflow: hidden; }
.se-obj__fold { position: absolute; top: -1px; right: -1px; width: 28px; height: 28px; border-radius: 0 10px 0 8px;
  background: linear-gradient(225deg, var(--wn-rose-10) 50%, #e6cfd8 50%); }
/* png: a framed chart image */
.se-obj--png { width: 196px; height: 152px; padding: 8px; background: #fff; border: 1px solid #e6d8de; }
.se-img { height: 100%; padding: 14px; border-radius: 6px; background: linear-gradient(180deg, #fdf1f4, #fff); }
.se-img__t { display: block; width: 48%; height: 8px; border-radius: 3px; background: #2a0b22; }
.se-cols--img { height: 80px; margin-top: 16px; }
.se-cols--img i { background: var(--wn-bright); }
.se-cols--img i:nth-child(even) { background: var(--se-t); }
/* html: the AI report in a browser window */
.se-obj--html { width: 204px; height: 176px; }
.se-win { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid #e6d8de; }
.se-win__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #2a0b22; }
.se-win__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 179, 199, .6); }
.se-win__bar u { display: block; flex: 1 1 auto; height: 10px; margin-left: 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.se-win__h { display: flex; align-items: center; gap: 6px; margin: 14px 14px 10px; color: var(--blue); }
.se-win__h::after { content: ""; display: block; width: 58%; height: 9px; border-radius: 4px; background: #2a0b22; }
.se-win__l { display: block; height: 7px; margin: 0 14px 8px; border-radius: 4px; background: #eadde3; }
.se-win__l--s { width: 52%; }
.se-win__q { display: block; height: 34px; margin: 10px 14px 0; border-radius: 8px; background: var(--wn-rose-10); border-left: 3px solid var(--wn-btn); }
html.wm-on .se-shelf__row.is-in .se-file__obj { transition: transform .5s var(--wm-ease, ease); }
/* also in the report */
.se-also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 76px; }
.se-also li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 20px 22px; border-radius: 18px;
  background: #fff; border: 1px solid var(--wn-line); align-content: start; align-items: start; }   /* the text sits under its title in every card, whatever the card's height */
.se-also svg { grid-row: span 2; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--wn-rose-10); color: var(--blue); }
.se-also b { font: 600 16px/22px var(--text); color: var(--ink); }
.se-also span { font: 400 14.5px/22px var(--text); color: var(--grey70); }

/* ---------- 5. related ---------- */
.se-rcard--svc { background: linear-gradient(160deg, #fff 0%, var(--wn-rose-10) 100%); }

/* ---------- smaller screens (desktop is the target; these keep the page whole) ---------- */
@media (max-width: 1279.98px) {
  .se-card { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
  .se-stages { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .se-hv { transform: scale(.92); transform-origin: 0 0; }
}
@media (max-width: 1023.98px) {
  .se-hero__vis { min-height: 0; }
  .se-hv { transform: none; height: auto; display: flex; flex-direction: column; gap: 18px; }
  .se-script, .se-phone-w, .se-hv__devs, .se-l3 { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; transform: none; }
  .se-phone-w { align-self: center; }
  .se-hv__devs { align-self: flex-start; }
  .se-stages__row { flex-wrap: wrap; gap: 8px; }
  .se-stg { flex: 1 1 30%; margin-left: 0; }
  .se-stg__in, .se-stg:first-child .se-stg__in, .se-stg:last-child .se-stg__in { clip-path: none; border-radius: 14px; padding: 16px 18px; min-height: 0; }
  .se-line__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .se-card { grid-template-columns: minmax(0, 1fr); }
  .se-proc__grid, .se-also { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-shelf__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .se-shelf__ledge { display: none; }
  .se-file__t { margin-top: 22px; }
  .se-ds4__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .se-ds4__line { display: none; }
}
@media (max-width: 767.98px) {
  .se-rail__st { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .se-st__t { font-size: 13px; line-height: 17px; }
  .se-st__node { width: 48px; height: 48px; border-radius: 14px; }
  .se-rail__track { top: 24px; }
  .se-proc__grid, .se-also, .se-shelf__row, .se-ds4__row { grid-template-columns: minmax(0, 1fr); }
  .se-stg { flex: 1 1 100%; }
  .se-card { padding: 22px 20px; }
  .se-line__head .wn-h2 { font-size: 32px; line-height: 38px; }
}

/* ---------- the pinned line on short laptop screens (1366x768, 1280x800, 1280x720): the head stays below the
   floating menu (its bottom is at about 134px) and the active card stays inside the screen ---------- */
@media (max-height: 860px) {
  html.wm-on .se-line .wm-pin__sticky { padding: 150px 0 16px; }
  html.wm-on .se-line__in { gap: 20px; }
  html.wm-on .se-line__head .wn-h2 { font-size: 34px; line-height: 40px; }
  html.wm-on .se-line__lede { display: none; }
  html.wm-on .se-line .se-st { gap: 7px; }
  html.wm-on .se-line .se-st__node { width: 50px; height: 50px; border-radius: 16px; }
  html.wm-on .se-line .se-st__node svg { width: 22px; height: 22px; }
  html.wm-on .se-rail__track, html.wm-on .se-rail__pw { top: 25px; }
  html.wm-on .se-line .se-st__t { font-size: 14.5px; line-height: 19px; }
  html.wm-on .se-line .se-card { padding: 20px 28px; }
  html.wm-on .se-line .se-card__t { margin-top: 10px; font-size: 26px; line-height: 32px; }
  html.wm-on .se-line .se-card__x { margin-top: 10px; font-size: 15.5px; line-height: 24px; }
  html.wm-on .se-line .se-card__more { margin-top: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 20px; }
  html.wm-on .se-line .se-card__links { margin-top: 14px; }
  html.wm-on .se-line .se-card__links ul { margin-top: 8px; }
  html.wm-on .se-line .se-card__links a { height: 32px; }
  html.wm-on .se-line .se-card__go { margin-top: 12px; }
}
@media (max-height: 740px) {
  html.wm-on .se-line .wm-pin__sticky { padding: 146px 0 12px; }
  html.wm-on .se-line__in { gap: 16px; }
  html.wm-on .se-line__ht .wn-kicker { display: none; }
  html.wm-on .se-line__head .wn-h2 { font-size: 30px; line-height: 36px; }
  html.wm-on .se-line .se-st__t { font-size: 13.5px; line-height: 17px; }
  html.wm-on .se-line .se-card__x { font-size: 15px; line-height: 23px; }
}
@media (max-height: 680px) {
  html.wm-on .se-line .se-st__t { display: none; }
}

/* =====================================================================================================
   RESPONSIVE (21 Oct 2026), on top of the smaller-screen rules above: breakpoints and header clearance as the RESPONSIVE
   block at the top of wine-base.css (max-width 1199.98 / 1023.98 / 767.98 / 479.98px; touch = (hover: none) and
   (pointer: coarse)); nothing here applies from 1200px up. Below 1024px and on touch screens wine-motion.js runs
   html.wm-lite: the fieldwork line is not pinned, every station is lit and the five station cards follow one another.
   ===================================================================================================== */
@media (max-width: 1199.98px) {
  .se-h1 { font-size: clamp(34px, 2.8vw + 24.5px, 58px); line-height: 1.1; letter-spacing: -.022em; }
  .se-h1__b { font-size: clamp(24px, 1.8vw + 17.5px, 40px); line-height: 1.2; letter-spacing: -.015em; }
  .se-line__head .wn-h2 { font-size: clamp(28px, 1.85vw + 23px, 44px); line-height: 1.18; }
  .se-card__t { font-size: clamp(22px, .9vw + 19.5px, 30px); line-height: 1.2; }
}
@media (max-width: 1023.98px) {
  .se-hero { padding-top: var(--wn-hdr-clear, 96px); }
  .se-line .wm-pin__sticky { padding: 96px 0; }
  .se-stages { margin-top: 56px; }
  .se-card { padding: 26px 26px; gap: 24px; }
  .se-proc__head .wn-sub { font-size: 18px; line-height: 28px; }
  .se-proc__head--c { margin-bottom: 40px; }
  .se-stats { margin-top: 56px; }
  .se-also { margin-top: 56px; }
  /* the reporting hero: dataset, chart and findings one under another, without the tilt */
  .se-hv--rep { gap: 16px; }
  .se-l3 { width: 100%; max-width: 560px; }
}
@media (max-width: 767.98px) {
  .se-hero { padding-top: var(--wn-hdr-clear-m, 88px); padding-bottom: 56px; }
  .se-hero__p2 { font-size: 16px; line-height: 25px; }
  .se-line .wm-pin__sticky { padding: 72px 0; }
  .se-line__in { gap: 28px; }
  .se-line__lede { max-width: none; font-size: 17px; line-height: 26px; }
  /* the five stations: a vertical line, one station per row (number and name beside the icon) */
  .se-rail__track { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; margin: 0; }
  .se-rail__dash i { width: 100%; height: 100%; background: repeating-linear-gradient(180deg, rgba(255, 179, 199, .34) 0 12px, rgba(255, 179, 199, 0) 12px 22px); }
  .se-rail__fill { background: linear-gradient(180deg, #d6335e 0%, #e8466f 55%, #ffb3c7 100%); }
  .se-rail__st { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .se-st { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; text-align: left; }
  .se-st__node { grid-row: 1 / 3; }
  .se-st__node svg { width: 22px; height: 22px; }
  .se-st__n { align-self: end; }
  .se-st__t { max-width: none; align-self: start; font-size: 17px; line-height: 22px; }
  /* station cards */
  .se-card { padding: 22px 18px; border-radius: 22px; }
  .se-card + .se-card { margin-top: 16px; }
  .se-card__t { margin-top: 10px; }
  .se-card__x { font-size: 16px; line-height: 25px; }
  .se-card__more { font-size: 15px; line-height: 22px; }
  .se-pp { padding: 16px 14px 18px; border-radius: 18px; }
  .se-pp__h { flex-wrap: wrap; row-gap: 2px; }
  .se-pp__h span { text-align: left; }
  .se-pp__f { font-size: 13px; }
  .se-hb--trend li { grid-template-columns: 84px minmax(0, 1fr) 40px; row-gap: 4px; }
  .se-hb--trend li > :nth-child(4) { grid-column: 2 / -1; }
  .se-xt { overflow-x: auto; }
  /* reading text at 16px */
  .se-pc__txt p, .se-ds4__i p { font-size: 16px; line-height: 25px; }
  .se-file p { font-size: 16px; line-height: 24px; }
  .se-also span { font-size: 16px; line-height: 24px; }
  .se-finds li { font-size: 15px; line-height: 21px; }
  /* processing services and the method chain */
  .se-pc__vis { height: auto; min-height: 168px; padding: 18px 18px; }
  .se-pc__txt { padding: 20px 20px 24px; }
  .se-man { display: none; }
  .se-ds4__row { row-gap: 28px; }
  /* the shelf: one file per row, a shorter stand */
  .se-shelf__row { row-gap: 40px; }
  .se-file__stand { height: 228px; }
  .se-file__t { margin-top: 18px; }
  .se-file p { max-width: 320px; }
  .se-also { gap: 14px; margin-top: 44px; }
  .se-also li { padding: 18px 18px; }
}
@media (max-width: 479.98px) {
  .se-hv { gap: 14px; }
  .se-script__bar { padding: 0 14px; }
  .se-script__bar span { white-space: normal; line-height: 17px; }
  .se-stg__in, .se-stg:first-child .se-stg__in, .se-stg:last-child .se-stg__in { padding: 14px 16px; }
  .se-plan b { font-size: 12.5px; text-align: center; }
  .se-own li { grid-template-columns: 30px minmax(0, 1fr); row-gap: 6px; }
  .se-own em { grid-column: 2; justify-self: start; }
  .se-chk li { grid-template-columns: 24px minmax(0, 1fr); row-gap: 4px; }
  .se-chk em { grid-column: 2; justify-self: start; }
  .se-resp li { grid-template-columns: 58px minmax(0, 1fr); row-gap: 4px; }
  .se-resp em { grid-column: 2; justify-self: start; }
  .se-ideas { grid-template-columns: minmax(0, 1fr); }
  .se-idea b { min-height: 0; }
  .se-code { grid-template-columns: minmax(0, 1fr); }
  .se-code__ar { justify-self: center; transform: rotate(90deg); }
  .se-mk { grid-template-columns: minmax(0, 1fr); }
  .se-mk__j { display: none; }
}
/* touch screens and small screens: 44px tap targets */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .se-card__links a { height: 44px; }
  .se-card__links ul { gap: 10px; }
}
@media (hover: none) and (pointer: coarse) {
  html.wm-on .se-proc__grid.is-in .se-pc:hover { transform: none; box-shadow: none; }
}