/* Services (services/automation, services/consulting, services/build) and the services overview (solutions/), on the
   section grammar (14 Oct 2026). Loaded after usecase.css, which the industry pages share, so every rule here is scoped
   to main.pg-svc (or to new sv- classes inside it) and overrides usecase.css for these four pages only.
   All three services are REKA's own, so orange; a card about one division's work (Janka, the car, sensing) wears that
   division's tone. Pictures (photos, product screens, placeholders) sit in trays beside cards or in card frames. */

/* ground and measure: paper, and the same 1280 container as About, Work and Careers */
main.pg-svc{background:var(--white)}
main.pg-svc .wrap{width:auto;max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}

/* chapter titles, as About and Work */
main.pg-svc .blk .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
main.pg-svc .chap-head p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand)}
main.pg-svc .chap-head p+p{margin-top:-6px}

/* hero: on paper, the copy and (where the page has one) its picture */
main.pg-svc .sv-hero{padding:184px 0 0}
main.pg-svc .sv-hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
main.pg-svc .sv-hgrid.one{grid-template-columns:minmax(0,1fr)}
main.pg-svc .sv-hero h1{font:600 80px/1 var(--sans);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
main.pg-svc .sv-hero h1.named span{display:block;margin-top:14px;font-size:.62em;line-height:1.05;letter-spacing:-.035em;color:var(--t-ink)}
main.pg-svc .sv-hero p{margin-top:28px;max-width:780px;font-size:21px;line-height:1.55;text-wrap:pretty}
main.pg-svc .sv-hero.center{text-align:center}
main.pg-svc .sv-hero.center p{margin-inline:auto}
main.pg-svc .sv-hero.center .sv-btns{justify-content:center}
main.pg-svc .sv-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
main.pg-svc .sv-btns .btn{margin:0}
main.pg-svc .sv-hpic .ph{width:100%;aspect-ratio:4/5;border-radius:24px}
main.pg-svc .sv-hpic .ph>img{border-radius:0}
main.pg-svc .sv-hshot{margin-top:48px;padding:32px}
main.pg-svc .sv-hshot .ph{border-radius:14px;background:#fff;box-shadow:0 24px 48px -32px rgba(29,29,29,.45)}

/* pictures: placeholders take their brief's shape; product screens are never cropped; photos cover */
main.pg-svc .ph{width:100%;border-radius:20px}
main.pg-svc .ph[data-ratio="4:3"],main.pg-svc .ph.photo{aspect-ratio:4/3}
main.pg-svc .ph[data-ratio="16:9"]{aspect-ratio:16/9}
main.pg-svc .ph[data-ratio="3:4"]{aspect-ratio:3/4}
main.pg-svc .ph:has(>img.ui){aspect-ratio:auto;height:auto;min-height:0;background:#fff}
main.pg-svc .ph>img.ui{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain}
main.pg-svc .ph>img.fit:not(.ui),main.pg-svc .ph>img:not(.ui){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* a picture beside its words, in one tray; .flip puts the picture on the right */
main.pg-svc .sv-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
main.pg-svc .sv-split>.sv-pic{aspect-ratio:auto;height:100%;min-height:360px}
main.pg-svc .sv-split.flip>.sv-pic{order:2}
main.pg-svc .sv-clar{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
main.pg-svc .sv-split>.card{justify-content:center;padding:40px}
main.pg-svc .sv-split>ul{align-content:stretch}

/* card grids */
main.pg-svc .sv-g2,main.pg-svc .sv-g3,main.pg-svc .sv-g4{list-style:none;margin:0;padding:0;display:grid;gap:16px}
main.pg-svc .sv-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
main.pg-svc .sv-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
main.pg-svc .sv-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
main.pg-svc .card .tt{font-size:20px}
main.pg-svc .card p{font-size:15.5px;line-height:23px}
main.pg-svc .card p a,main.pg-svc .card .sub a,main.pg-svc .card dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
main.pg-svc .card p a:hover{color:var(--t-ink,var(--brand-text))}

/* steps: white cards joined by arrows (no numbers) */
main.pg-svc .sv-steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px}
main.pg-svc .sv-steps>li{position:relative;overflow:visible}
main.pg-svc .sv-steps>li:not(:last-child)::after{content:"\2192";position:absolute;top:26px;right:-22px;font:600 18px/1 var(--sans);color:var(--t-ink,var(--brand-text))}
main.pg-svc .sv-steps .tt{font-size:19px}
main.pg-svc .sv-cta{margin-top:32px;text-align:center}

/* one figure, beside its picture */
main.pg-svc .sv-stat b,main.pg-svc .sv-stat .sv-num{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:600 96px/1 var(--sans);letter-spacing:-.04em;color:var(--t-ink);font-variant-numeric:tabular-nums}
main.pg-svc .sv-stat b small,main.pg-svc .sv-stat .sv-num small{font-size:28px;letter-spacing:-.02em;color:var(--ink)}
main.pg-svc .sv-stat p{margin-top:16px;font-size:18px;line-height:27px;color:var(--ink);max-width:44ch}
main.pg-svc .sv-stat .meta{font-size:14px;margin-top:8px}

/* a statement and its link, beside its picture */
main.pg-svc .sv-story h2.tt{font:600 36px/1.1 var(--sans);letter-spacing:-.03em}
main.pg-svc .sv-story p{margin-top:8px;font-size:17px;line-height:26px;color:var(--ink)}

/* Managed AI: the page's one ink tray; the loop in a white card, the screens beside it */
main.pg-svc .sv-ma{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
main.pg-svc .sv-loop{padding:36px}
main.pg-svc .sv-intro{font-size:17px!important;line-height:26px!important;color:var(--ink)!important}
main.pg-svc .sv-loop .loop{margin-top:36px}
main.pg-svc .sv-loop .loop>li{grid-template-columns:120px minmax(0,1fr)}
main.pg-svc .sv-loop .loop p{font-size:15.5px;line-height:23px;color:var(--muted)}
main.pg-svc .sv-loop .loop .back{color:var(--t-ink)}
main.pg-svc .sv-loop .loop>li:not(:last-child)::after{left:calc(28px + 60px)}
main.pg-svc .sv-shots{display:grid;gap:16px}
main.pg-svc .sv-fig{margin:0;padding:12px 12px 16px;gap:0}
main.pg-svc .sv-fig .frame{margin:0 0 12px;padding:10px;border-radius:14px;background:var(--t-bg)}
main.pg-svc .sv-fig .frame img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
main.pg-svc .sv-fig figcaption{padding:0 6px;font-size:14px;line-height:20px;color:var(--muted)}
main.pg-svc .sv-fig figcaption b{font-weight:600;color:var(--t-ink)}
main.pg-svc .sv-inknote{grid-column:1/-1;margin:8px 4px 0;font-size:14.5px;line-height:21px;color:rgba(255,255,255,.72)}
main.pg-svc .sv-inknote a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand)}

/* tabs: the chips sit on oat, white until chosen; the chosen answer is one white card, words beside its picture */
main.pg-svc .sv-tabs .uc-tabs{margin-bottom:24px}
main.pg-svc .sv-tabs .uc-tabs .tab{background:#fff;color:var(--ink)}
main.pg-svc .sv-feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:16px}
main.pg-svc .sv-feat .ftxt{padding:24px}
main.pg-svc .sv-feat h2.tt{font:600 40px/1.1 var(--sans);letter-spacing:-.03em}
main.pg-svc .sv-feat p{margin-top:14px;font-size:17px;line-height:26px;color:var(--ink)}
main.pg-svc .sv-feat .frame{margin:0;padding:16px;min-height:420px;display:grid;place-items:center;border-radius:14px}
main.pg-svc .sv-feat .frame .ph{border-radius:10px}
main.pg-svc .sv-feat .frame .ph:has(>img.ui){box-shadow:0 18px 36px -28px rgba(29,29,29,.45)}

/* spec list: a white card beside its picture */
main.pg-svc .sv-specrow{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
main.pg-svc .sv-spec{padding:12px 32px 28px;justify-content:flex-start}
main.pg-svc .sv-spec .uc-spec{margin:0;padding:0;background:none;border:0;border-radius:0}
main.pg-svc .sv-spec .uc-spec>div{grid-template-columns:170px minmax(0,1fr);gap:20px;padding:16px 0}
main.pg-svc .sv-spec .uc-spec dd{font-size:15.5px;line-height:23px;color:var(--muted)}
main.pg-svc .sv-spec .uc-note{margin-top:12px}
main.pg-svc .uc-note a{color:var(--ink)}

/* the service arc: three linked cards, the current page marked */
main.pg-svc .sv-arc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
main.pg-svc .sv-arc>li{position:relative;display:flex}
main.pg-svc .sv-arc>li:not(:last-child)::after{content:"\2192";position:absolute;top:50%;right:-22px;transform:translateY(-50%);font:600 18px/1 var(--sans);color:var(--muted)}
main.pg-svc .sv-arc .card{flex:1;min-height:170px}
main.pg-svc .sv-arc .tt{font-size:24px}
main.pg-svc .sv-arc .meta{color:var(--muted);font-weight:500}
main.pg-svc .sv-arc .sub{margin-top:4px}
main.pg-svc .sv-arc a[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--t)}
main.pg-svc .sv-arc a[aria-current="page"] .meta::after{content:"\00A0\00B7\00A0this page"}

/* keep exploring: the same gap as every chapter */
main.pg-svc .related{padding:96px 0 0}

@media (max-width:1100px){
  main.pg-svc .sv-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:32px}
  main.pg-svc .sv-steps>li:not(:last-child)::after{content:"\2193";top:auto;right:auto;left:28px;bottom:-26px}
  main.pg-svc .sv-ma,main.pg-svc .sv-feat{grid-template-columns:minmax(0,1fr)}
  main.pg-svc .sv-feat .frame{min-height:0}
  main.pg-svc .sv-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  main.pg-svc .sv-hero{padding-top:136px}
  main.pg-svc .sv-hgrid{grid-template-columns:minmax(0,1fr);gap:32px}
  main.pg-svc .sv-hero h1{font-size:46px;line-height:1.04;letter-spacing:-.035em}
  main.pg-svc .sv-hero p{margin-top:20px;font-size:18px}
  main.pg-svc .sv-hpic .ph{aspect-ratio:4/3}
  main.pg-svc .blk .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-svc .sv-split,main.pg-svc .sv-specrow,main.pg-svc .sv-clar{grid-template-columns:minmax(0,1fr)}
  main.pg-svc .sv-split>.sv-pic{order:0!important;height:auto;min-height:0;aspect-ratio:4/3}
  main.pg-svc .sv-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-svc .sv-arc{grid-template-columns:minmax(0,1fr);gap:32px}
  main.pg-svc .sv-arc>li:not(:last-child)::after{content:"\2193";top:auto;right:auto;left:28px;bottom:-26px;transform:none}
  main.pg-svc .sv-arc .card{min-height:0}
}
@media (max-width:760px){
  main.pg-svc .sv-hshot{margin-top:32px;padding:12px}
  main.pg-svc .sv-hshot .ph{border-radius:10px}
  main.pg-svc .sv-g2,main.pg-svc .sv-g3,main.pg-svc .sv-g4{grid-template-columns:minmax(0,1fr)}
  main.pg-svc .sv-split>.card{padding:24px}
  main.pg-svc .sv-stat b,main.pg-svc .sv-stat .sv-num{font-size:64px}
  main.pg-svc .sv-stat b small,main.pg-svc .sv-stat .sv-num small{font-size:22px}
  main.pg-svc .sv-story h2.tt{font-size:28px}
  main.pg-svc .sv-loop{padding:22px}
  main.pg-svc .sv-loop .loop>li{grid-template-columns:minmax(0,1fr)}
  main.pg-svc .sv-loop .loop>li:not(:last-child)::after{left:calc(24px + 52px)}
  main.pg-svc .sv-feat{padding:12px;gap:8px}
  main.pg-svc .sv-feat .ftxt{padding:12px}
  main.pg-svc .sv-feat h2.tt{font-size:28px}
  main.pg-svc .sv-feat .frame{padding:10px}
  main.pg-svc .sv-spec{padding:8px 20px 20px}
  main.pg-svc .sv-spec .uc-spec>div{grid-template-columns:minmax(0,1fr);gap:4px}
  main.pg-svc .related{padding-top:64px}
}

/* Custom Build: what we've made (Janka large, two builds beside it, each in its division's frame) */
main.pg-svc .sv-made{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
main.pg-svc .sv-janka{grid-row:span 2}
main.pg-svc .sv-made .frame{margin:-12px -12px 14px}
main.pg-svc .sv-made .frame .ph{border-radius:0}
main.pg-svc .sv-janka .frame{padding:16px}
main.pg-svc .sv-janka .frame .ph{border-radius:8px}
main.pg-svc .sv-janka .tt{font-size:32px;letter-spacing:-.03em}
main.pg-svc .sv-janka p{font-size:17px;line-height:26px;color:var(--ink)}
main.pg-svc .sv-janka .sv-btns{margin-top:16px}
main.pg-svc .sv-made+.uc-note{margin-top:20px}

/* Custom Build: the stack, bottom up, as white layer cards beside the picture */
main.pg-svc .sv-stackrow{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
main.pg-svc .sv-stackcol{display:flex;flex-direction:column;justify-content:center;gap:16px}
main.pg-svc .sv-stackcol .uc-note{margin:0 4px}
main.pg-svc .stack{margin:0;gap:24px}
main.pg-svc .stack>li.card{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;align-items:start;border:0;border-radius:20px;padding:20px 24px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-svc .stack>li.card .tt{font-size:18px;line-height:24px}
main.pg-svc .stack>li.card:not(:first-child)::after{left:34px;bottom:-22px;color:var(--muted)}
main.pg-svc .sv-specrow.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}

/* press: the list in a white card beside the picture */
main.pg-svc .sv-pressrow{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
main.pg-svc .sv-press{padding:12px 32px 28px;justify-content:flex-start}
main.pg-svc .sv-press .plist{margin:0;border-top:0}
main.pg-svc .sv-press .plist li:last-child{border-bottom:0}
main.pg-svc .sv-press .plist a{grid-template-columns:minmax(0,1fr) 150px 44px;gap:16px;padding:16px 0}
main.pg-svc .sv-press .plist b{font-size:16.5px;line-height:23px}
main.pg-svc .sv-press .more{align-self:flex-start;margin-top:12px}
@media (max-width:1100px){main.pg-svc .sv-made{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}main.pg-svc .sv-janka{grid-row:auto;grid-column:1/-1}}
@media (max-width:900px){main.pg-svc .sv-specrow.flip,main.pg-svc .sv-stackrow,main.pg-svc .sv-pressrow{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  main.pg-svc .sv-made{grid-template-columns:minmax(0,1fr)}
  main.pg-svc .sv-janka .tt{font-size:26px}
  main.pg-svc .stack>li.card{grid-template-columns:minmax(0,1fr);gap:4px;padding:18px}
  main.pg-svc .sv-press{padding:8px 20px 20px}
  main.pg-svc .sv-press .plist a{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* Services overview (solutions/): the three doors stack as you scroll, in one orange tray (Clay's stacked cards) */
main.pg-svc .sv-doors{display:flex;flex-direction:column;gap:48px}
main.pg-svc .sv-door{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding:16px 16px 16px 40px}
main.pg-svc .sv-door.flip{padding:16px 40px 16px 16px}
main.pg-svc .sv-door.flip .ftxt{order:2}
main.pg-svc .sv-door .ftxt{padding:24px 0}
main.pg-svc .sv-door h2.tt{font:600 44px/1.05 var(--sans);letter-spacing:-.035em;color:var(--ink)}
main.pg-svc .sv-door .situ{margin-top:12px;font:500 21px/29px var(--sans)!important;letter-spacing:-.2px;color:var(--t-ink)}
main.pg-svc .sv-door p{margin-top:12px;font-size:16px;line-height:24px;color:var(--ink)}
main.pg-svc .sv-door .when{color:var(--muted)}
main.pg-svc .sv-door .sv-btns{margin-top:24px}
main.pg-svc .sv-door .frame{margin:0;padding:16px;min-height:420px;display:grid;place-items:center;border-radius:14px}
main.pg-svc .sv-door .frame .ph{border-radius:10px}
main.pg-svc .sv-door .frame .ph:has(>img.ui){box-shadow:0 18px 36px -28px rgba(29,29,29,.45)}
main.pg-svc .sv-door .frame .ph.photo{aspect-ratio:4/3}
@media (min-width:1101px) and (min-height:760px){
  main.pg-svc .sv-door{position:sticky;top:128px;min-height:520px;box-shadow:inset 0 0 0 1px var(--line),0 -16px 40px -28px rgba(29,29,29,.35)}
}

/* the journey: four steps as chips joined by arrows; the chosen one is ink, as every tab on the site */
main.pg-svc .mflow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin:0;padding:0}
main.pg-svc .mflow>li{position:relative}
main.pg-svc .mflow>li:not(:last-child)::after{content:"\2192";position:absolute;top:50%;right:-27px;transform:translateY(-50%);font:600 18px/1 var(--sans);color:var(--muted)}
main.pg-svc .mstep{width:100%;height:100%;display:flex;flex-direction:column;gap:2px;text-align:left;background:#fff;border:0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:16px 20px;cursor:pointer;font:inherit;color:var(--ink);transition:background .2s,color .2s,box-shadow .2s}
main.pg-svc .mstep b{font:600 22px/26px var(--sans);letter-spacing:-.44px}
main.pg-svc .mstep em{font-style:normal;font-size:14.5px;line-height:21px;color:var(--muted)}
main.pg-svc .mstep:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
main.pg-svc .mstep[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 var(--brand)}
main.pg-svc .mstep[aria-selected="true"] em{color:rgba(255,255,255,.72)}
main.pg-svc .mstep:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
main.pg-svc .opanel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-top:16px}
main.pg-svc .opanel .cardt{min-height:0;padding:32px;border:0;justify-content:flex-start;background:#fff}
main.pg-svc .opanel .cardt h3.tt{font:600 32px/1.1 var(--sans);letter-spacing:-.03em;margin-bottom:8px}
main.pg-svc .opanel .cardt>p{font-size:17px;line-height:26px;color:var(--ink)}
main.pg-svc .opanel .cardt h4{font:600 16px/22px var(--sans);margin-bottom:4px;color:var(--t-ink)}
main.pg-svc .opanel .cardt ul{margin:0;padding-left:18px;font-size:15.5px;line-height:24px}
main.pg-svc .opanel .cardt li{margin-bottom:4px}
main.pg-svc .flag{margin-top:16px;border-radius:12px;padding:12px 14px;background:var(--oat);font-size:14px!important;line-height:20px!important;color:var(--ink)!important}
main.pg-svc .flag b{color:var(--t-ink)}
main.pg-svc .flag.no b{color:var(--ink)}
main.pg-svc .sv-jnote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:stretch}
main.pg-svc .sv-jnote>.sv-pic{aspect-ratio:16/9}
main.pg-svc .sv-jnote>.card{justify-content:center;padding:32px}
main.pg-svc .loopnote{font-size:18px!important;line-height:27px!important;color:var(--ink)!important}
main.pg-svc .loopnote b{color:var(--t-ink)}

/* the comparison table beside its picture; the header is white with the service's colour in its words */
main.pg-svc .sv-cmprow{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
main.pg-svc .sv-cmprow .cmp{margin:0;border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-svc .cmp thead th{background:#fff}
main.pg-svc .cmp thead th[data-tone]{background:#fff;color:var(--t-ink)}
main.pg-svc .cmp td,main.pg-svc .cmp th{font-size:15.5px;line-height:23px}

/* the products, in the page's one ink tray */
main.pg-svc .tray.ink .sv-g3{align-items:start}
@media (max-width:1100px){
  main.pg-svc .sv-door,main.pg-svc .sv-door.flip{grid-template-columns:minmax(0,1fr);padding:16px}
  main.pg-svc .sv-door.flip .ftxt{order:0}
  main.pg-svc .sv-door .ftxt{padding:16px 16px 0}
  main.pg-svc .sv-door .frame{min-height:0}
  main.pg-svc .mflow{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-svc .mflow>li:nth-child(2)::after{display:none}
  main.pg-svc .opanel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){main.pg-svc .sv-jnote,main.pg-svc .sv-cmprow{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  main.pg-svc .sv-doors{gap:16px}
  main.pg-svc .sv-door{padding:12px}
  main.pg-svc .sv-door .ftxt{padding:12px 12px 0}
  main.pg-svc .sv-door h2.tt{font-size:32px}
  main.pg-svc .sv-door .situ{font-size:18px!important;line-height:25px!important}
  main.pg-svc .sv-door .frame{padding:10px}
  main.pg-svc .mflow{grid-template-columns:minmax(0,1fr);gap:28px}
  main.pg-svc .mflow>li:not(:last-child)::after,main.pg-svc .mflow>li:nth-child(2)::after{display:block;content:"\2193";top:auto;right:auto;left:24px;bottom:-24px;transform:none}
  main.pg-svc .opanel .cardt{padding:22px}
  main.pg-svc .opanel .cardt h3.tt{font-size:26px}
  main.pg-svc .sv-jnote>.card{padding:22px}
}
/* phones: long button labels wrap inside the card instead of running past it; the one-column table stays one column */
main.pg-svc .sv-btns .btn{max-width:100%}
@media (max-width:767px){
  main.pg-svc .sv-btns .btn .bt{white-space:normal;text-align:left}
  main.pg-svc .cmp thead tr,main.pg-svc .cmp tbody tr{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){main.pg-svc .mstep{transition:none}}
/* mid widths (laptops, tablets in landscape): the picture column gives way and the headline scales, so the copy column
   never squeezes the headline into a narrow stack (seen at 1024 before this) */
@media (min-width:901px) and (max-width:1240px){
  main.pg-svc .sv-hgrid:not(.one){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px}
  main.pg-svc .sv-hero h1{font-size:clamp(52px,5.6vw,80px)}
  main.pg-svc .sv-hero p{font-size:19px}
}

/* phones (owner, 14 Oct: "fix the phone gaps too"). One column stacks every card, so long runs of words open up
   between pictures. On one column: a split marked .sv-mend puts its picture after its words, where it breaks the run
   that follows; Managed AI shows its two screens before the loop. On phones: the steps tray and the service arc
   tighten (the arc's arrow moves into the card's top corner), so the end of each service page is not a long column. */
@media (max-width:900px){
  main.pg-svc .sv-split.sv-mend>.sv-pic{order:2!important}
  main.pg-svc .sv-ma>.sv-shots{order:-1}
}
@media (max-width:760px){
  main.pg-svc .tray:has(>.sv-steps){padding:16px}
  main.pg-svc .sv-steps{gap:20px}
  main.pg-svc .sv-steps>li:not(:last-child)::after{bottom:-19px;left:24px;font-size:16px}
  main.pg-svc .sv-steps .tt{font-size:18px}
  main.pg-svc .sv-steps p{font-size:15px;line-height:22px}
  main.pg-svc .sv-cta{margin-top:20px}
  main.pg-svc .tray:has(>.sv-arc){padding:16px}
  main.pg-svc .sv-arc{gap:26px}
  main.pg-svc .sv-arc>li:not(:last-child)::after{bottom:-22px;left:24px}
  main.pg-svc .sv-arc .card{padding:16px 64px 16px 18px;gap:4px}
  main.pg-svc .sv-arc .tt{font-size:20px;line-height:1.2}
  main.pg-svc .sv-arc .card-foot{position:absolute;top:12px;right:12px;padding:0;margin:0}
  main.pg-svc .sv-steps>li.card{padding:16px 16px 18px;gap:4px}
  main.pg-svc .tray.sv-ma{padding:16px}
  main.pg-svc .sv-ma .sv-fig{padding:8px 8px 14px}
  main.pg-svc .sv-ma .sv-fig .frame{padding:8px;margin-bottom:10px}
  /* the spec list and the press list: tighter rows; a clipping's paper and year share one line */
  main.pg-svc .sv-spec .uc-spec>div{padding:11px 0;gap:2px}
  main.pg-svc .sv-spec .uc-spec dd{font-size:15px;line-height:22px}
  main.pg-svc .sv-press .plist a{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0}
  main.pg-svc .sv-press .plist a b{grid-column:1/-1}
}
/* Custom Build's press list on phones: three clippings, then "Show all" (a real button the page script adds) */
main.pg-svc .sv-press .sv-more{display:none}
@media (max-width:760px){
  main.pg-svc .sv-press .plist.is-short>li:nth-child(n+4){display:none}
  main.pg-svc .sv-press .plist.is-short>li:nth-child(3){border-bottom:0}
  main.pg-svc .sv-press .sv-more{display:inline-flex;align-self:flex-start;margin-top:8px}
}
/* services overview on phones: the combinations tray and the products tray tighten, as the steps do */
@media (max-width:760px){
  main.pg-svc .tray:has(>.sv-g4){padding:16px}
  main.pg-svc .sv-g4{gap:12px}
  main.pg-svc .sv-g4>.card{padding:18px;gap:4px}
  main.pg-svc .sv-g4 p{font-size:15px;line-height:22px}
  main.pg-svc .tray.ink:has(>.sv-g3){padding:16px}
  main.pg-svc .sv-g3>.sv-fig{padding:8px 8px 14px}
  main.pg-svc .sv-g3>.sv-fig .frame{padding:8px;margin-bottom:10px}
}