/* ==========================================================================
   assets/home/services/chapters.css — homepage Our Services: "Colour Chapters" (2026-11-11)
   Builder: assets/home/services/chapters.js. Edit both files directly. Linked last in <head>.

   Each service is one full-width band in its own homepage colour and the bands touch: the change of
   colour (plus one hairline) is the break between services — no white gap, no frame inside a band.
   Every band has the same space above its heading and below its Explore button.
   The colour pattern is the same in every band:
     band = the service colour (--ml) · logo tile, cards, Explore button = white ·
     picture mats = the paler tone (--mp) · edges = --md · fact labels + Explore text = the service ink (--mi).
   Type — five settled sizes. Phones: heading 21 · card title 17 · sentences + Explore 15 · facts + platforms 14 ·
   labels, notes, filter 13. Desktop one step up: heading 25–30 · card title 19 · sentences + Explore 16 · facts +
   platforms 15 · labels 14. Weights: heading 700, card titles 600, every sentence and fact 400.
   Inside each card the picture and the text start on one edge; the facts follow the sentence.
   Phones (≤760px): no slider controls. 761px up: arrows + count in the bottom row.
   1024px up: identity on the left, cards on the right, Explore + arrows in one bottom row.
   Resets are wrapped in :where() so every component rule outranks them.
   ========================================================================== */
#svc3 #svch-series {
  --ink: #0E1E35; --ink2: #33425A; --mute: #5A6678; --act: #0760C6;
  --t06: #F0F5FC; --t14: #DCE9F7; --t24: #C3D9F1;
  --lane: var(--svch-lane, 18px);
  position: relative; display: block; margin: 20px 0 0; color: var(--ink); text-align: left;
}
/* the homepage's per-service colours (the same values as in services.css) */
#svc3 #svch-series .svch-google-ads    { --ml: #DFE9FB; --mp: #EEF3FD; --md: #C9D9F7; --mi: #1B3E8A; }
#svc3 #svch-series .svch-meta-ads      { --ml: #E9E4FA; --mp: #F4F1FD; --md: #D8CEF5; --mi: #48319A; }
#svc3 #svch-series .svch-social-media  { --ml: #F9E3EA; --mp: #FCF1F4; --md: #F1CDDA; --mi: #8C2150; }
#svc3 #svch-series .svch-landing-pages { --ml: #DFF2E6; --mp: #EFF8F3; --md: #C4E5D2; --mi: #1B6742; }
#svc3 #svch-series .svch-websites      { --ml: #FAE9DC; --mp: #FDF4EC; --md: #F0D5BF; --mi: #7B4419; }

#svc3 #svch-series, #svc3 #svch-series *, #svc3 #svch-series *::before, #svc3 #svch-series *::after { box-sizing: border-box; }
#svc3 #svch-series :where(h3, h4, p, ul, li, dl, dt, dd):where(:not(.s3-mock *)) { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
#svc3 #svch-series :where(ul, li):where(:not(.s3-mock *)) { list-style: none; }
#svc3 #svch-series :where(h3, h4, p, dt, dd):where(:not(.s3-mock *)) { text-wrap: pretty; overflow-wrap: break-word; }
#svc3 #svch-series :where(.svch-st, .svch-pair dd) { text-wrap: balance; }
#svc3 #svch-series :where(button):where(:not(.s3-mock *)) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: center; }
#svc3 #svch-series :where(a):where(:not(.s3-mock *)) { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#svc3 #svch-series :is(a, button, .svch-track):focus-visible { outline: 2px solid var(--act); outline-offset: 3px; }
#svc3 #svch-series :where(svg):where(:not(.s3-mock svg)) { display: block; flex: none; }
#svc3 #svch-series [aria-disabled="true"] { cursor: default; }
#svc3 #svch-series .svch-nw { white-space: nowrap; }
#svc3 #svch-series .svch-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- one chapter: a full-width colour band; bands touch, one hairline between them ---- */
#svc3 #svch-series .svch-panel { padding: 26px 0; background: var(--ml); scroll-margin-top: var(--hdr, 96px); }
#svc3 #svch-series .svch-panel + .svch-panel { border-top: 1px solid var(--md); }
#svc3 #svch-series .svch-in { padding: 0 16px; }

/* ---- identity ---- */
#svc3 #svch-series .svch-head { display: flex; align-items: center; gap: 12px; }
#svc3 #svch-series .svch-tile { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 10.5px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px var(--md); }
#svc3 #svch-series .svch-tile > * { width: 100%; height: 100%; }
#svc3 #svch-series .svch-headtx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
#svc3 #svch-series .svch-title { font-size: 21px; font-weight: 700; line-height: 1.18; letter-spacing: -.018em; color: var(--ink); }
#svc3 #svch-series .svch-intro { margin-top: 10px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink2); }
#svc3 #svch-series .svch-plats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
#svc3 #svch-series .svch-plat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ink2); line-height: 20px; }
#svc3 #svch-series .svch-plat > :first-child { width: 16px; height: 16px; }
#svc3 #svch-series .svch-igm { display: inline-grid; place-items: center; border-radius: 4px; background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
#svc3 #svch-series .svch-igm svg { width: 70%; height: 70%; }

/* ---- Social Media filter: pressed-in choice (never grows, no tick) ---- */
#svc3 #svch-series .svch-filter { margin-top: 12px; }
#svc3 #svch-series .svch-fr { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .6); }
#svc3 #svch-series .svch-fr button { flex: 1 1 auto; min-height: 36px; padding: 4px 8px; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1.15; color: var(--ink2); }
#svc3 #svch-series .svch-fr button:hover { background: rgba(255, 255, 255, .6); }
#svc3 #svch-series .svch-fr button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--md), inset 0 -1px 0 var(--md); }
#svc3 #svch-series .svch-fnote { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink2); }

/* ---- the row of cards: native swipe + snap; end spacer instead of end padding (browsers differ) ---- */
#svc3 #svch-series .svch-car { position: relative; margin: 16px -16px 0; --tp: 16px; }
#svc3 #svch-series .svch-track {
  display: flex; align-items: stretch; gap: 12px; padding: 0 0 2px var(--tp, 16px); scroll-padding-inline: var(--tp, 16px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
#svc3 #svch-series .svch-track::-webkit-scrollbar { display: none; }
#svc3 #svch-series .svch-track::after { content: ""; flex: 0 0 var(--te, 24px); }
#svc3 #svch-series .svch-card {
  position: relative; flex: 0 0 auto; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column;
  width: calc(100% - 40px); padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--md);
}
#svc3 #svch-series .svch-card[hidden] { display: none; }
#svc3 #svch-series .svch-art {
  position: relative; container-type: size; aspect-ratio: var(--ar, 1.56); display: grid; place-items: center; overflow: hidden;
  border-radius: 10px; background: var(--mp); box-shadow: 0 0 0 1px var(--md);
}
/* every drawing at its natural proportions (--r measured once by chapters.js), never squashed or cropped */
#svc3 #svch-series .svch-art > .s3-mock {
  position: relative; display: block; margin: 0; width: min(100cqw, 100cqh / var(--r, .6)); height: auto; aspect-ratio: 1 / var(--r, .6);
  border: 0; border-radius: 0; box-shadow: none; background: #fff; overflow: hidden;
}
#svc3 #svch-series .svch-measure .s3-mock.svch-nat { position: relative; display: block; width: 400px; height: auto; aspect-ratio: auto; }
#svc3 #svch-series .svch-measure .svch-nat .s3-mk { position: relative; inset: auto; height: auto; }
#svc3 #svch-series .svch-measure .svch-nat .s3-grow { flex: none; }

#svc3 #svch-series .svch-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 0 2px; }
#svc3 #svch-series .svch-st { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
#svc3 #svch-series .svch-d { margin-top: 4px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink2); }
#svc3 #svch-series .svch-facts { margin-top: 11px; border-top: 1px solid var(--ml); }
#svc3 #svch-series .svch-pair { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 6px 0 0; }
#svc3 #svch-series .svch-pair dt { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--mi); }
#svc3 #svch-series .svch-pair dd { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink); }
#svc3 #svch-series .svch-long .svch-pair { display: block; padding: 8px 0 0; }
#svc3 #svch-series .svch-long .svch-pair dd { margin-top: 1px; color: var(--ink2); }

/* ---- the bottom row: Explore service (white button), arrows + count from 761px ---- */
#svc3 #svch-series .svch-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
#svc3 #svch-series .svch-cta {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 7px 0 16px; border-radius: 12px; white-space: nowrap;
  background: #fff; color: var(--mi); font-size: 15px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 0 0 1px var(--md), 0 1px 2px rgba(14, 30, 53, .06);
}
#svc3 #svch-series .svch-ico { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--ml); color: var(--mi); }
#svc3 #svch-series .svch-ico svg { width: 16px; height: 16px; }
#svc3 #svch-series .svch-cta:hover { background: var(--mp); }

#svc3 #svch-series .svch-pager { display: none; align-items: center; gap: 4px; }
#svc3 #svch-series .svch-prev, #svc3 #svch-series .svch-next {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--md);
}
#svc3 #svch-series :is(.svch-prev, .svch-next) svg { width: 18px; height: 18px; }
#svc3 #svch-series :is(.svch-prev, .svch-next):hover:not([aria-disabled="true"]) { background: var(--t06); }
#svc3 #svch-series :is(.svch-prev, .svch-next)[aria-disabled="true"] { color: #A3AEBD; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px var(--ml); }
#svc3 #svch-series .svch-count { min-width: 54px; text-align: center; font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
#svc3 #svch-series .svch-count b { font-weight: 600; color: var(--ink); }
@media (min-width: 761px) { #svc3 #svch-series .svch-pager { display: flex; } }

/* ---- narrow phones: spacing only ---- */
@media (max-width: 389px) {
  #svc3 #svch-series .svch-panel { padding: 22px 0; }
  #svc3 #svch-series .svch-in { padding: 0 14px; }
  #svc3 #svch-series .svch-tile { width: 42px; height: 42px; padding: 9.5px; }
  #svc3 #svch-series .svch-title { font-size: 20px; }
  #svc3 #svch-series .svch-car { margin: 14px -14px 0; --tp: 14px; }
  #svc3 #svch-series .svch-card { width: calc(100% - 36px); padding: 10px; }
  #svc3 #svch-series .svch-art { --ar: 1.62; }
  #svc3 #svch-series .svch-pair { grid-template-columns: 86px minmax(0, 1fr); }
  #svc3 #svch-series .svch-foot { margin-top: 14px; }
  #svc3 #svch-series .svch-plats { gap: 6px 11px; }
  #svc3 #svch-series .svch-plat { font-size: 13px; gap: 5px; }
  #svc3 #svch-series .svch-fr button { padding: 4px 6px; }
}

/* ---- 641–1023: two cards ---- */
@media (min-width: 641px) and (max-width: 1023px) {
  #svc3 #svch-series .svch-panel { padding: 32px 0; }
  #svc3 #svch-series .svch-in { padding: 0 var(--lane); }
  #svc3 #svch-series .svch-car { margin: 18px calc(-1 * var(--lane)) 0; --tp: var(--lane); }
  #svc3 #svch-series .svch-track { gap: 16px; --te: var(--lane); }
  #svc3 #svch-series .svch-card { width: calc((100% - var(--lane) - 16px - 44px) / 2); }
  #svc3 #svch-series .svch-intro, #svc3 #svch-series .svch-filter { max-width: 580px; }
  #svc3 #svch-series .svch-foot { margin-top: 18px; }
}

/* ---- 1024+: identity on the left, cards on the right, one bottom row ---- */
@media (min-width: 1024px) {
  #svc3 #svch-series { margin-top: 30px; }
  #svc3 #svch-series .svch-panel { padding: 40px 0; }
  #svc3 #svch-series .svch-in {
    display: grid; grid-template-columns: clamp(260px, 24vw, 330px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto;
    column-gap: 36px; padding: 0 var(--lane);
  }
  #svc3 #svch-series .svch-head { grid-area: 1 / 1; flex-direction: column; align-items: flex-start; gap: 16px; }
  #svc3 #svch-series .svch-tile { width: 54px; height: 54px; padding: 12.5px; border-radius: 15px; }
  #svc3 #svch-series .svch-headtx { gap: 6px; }
  #svc3 #svch-series .svch-title { font-size: clamp(25px, 2.1vw, 30px); line-height: 1.1; }
  #svc3 #svch-series .svch-intro { grid-area: 2 / 1; margin-top: 14px; font-size: 16px; }
  #svc3 #svch-series .svch-plats { grid-area: 3 / 1; flex-direction: column; gap: 10px; margin-top: 18px; }
  #svc3 #svch-series .svch-plat { font-size: 15px; gap: 10px; }
  #svc3 #svch-series .svch-plat > :first-child { width: 18px; height: 18px; }
  #svc3 #svch-series .svch-filter { grid-area: 4 / 1; margin-top: 18px; }
  #svc3 #svch-series .svch-fr { flex-direction: column; }
  #svc3 #svch-series .svch-fr button { text-align: left; padding: 6px 12px; }
  #svc3 #svch-series .svch-car { grid-area: 1 / 2 / 5 / 3; margin: 0; --tp: 0px; }
  #svc3 #svch-series .svch-track { --cw: clamp(290px, 26vw, 390px); gap: 18px; padding: 1px 0 3px 1px; --te: 2px; }
  #svc3 #svch-series .svch-card { width: var(--cw); padding: 14px; }
  #svc3 #svch-series .svch-art { --ar: 1.6; }
  #svc3 #svch-series .svch-body { padding-top: 14px; }
  #svc3 #svch-series .svch-st { font-size: 19px; }
  #svc3 #svch-series .svch-d { font-size: 16px; }
  #svc3 #svch-series .svch-pair { grid-template-columns: 104px minmax(0, 1fr); }
  #svc3 #svch-series .svch-pair dt { font-size: 14px; }
  #svc3 #svch-series .svch-pair dd { font-size: 15px; }
  #svc3 #svch-series .svch-fnote { font-size: 14px; }
  #svc3 #svch-series .svch-long .svch-pair { display: block; }
  #svc3 #svch-series .svch-foot { grid-area: 5 / 1 / 6 / 3; margin-top: 24px; }
  #svc3 #svch-series .svch-cta { height: 44px; font-size: 16px; padding: 0 8px 0 18px; }
  #svc3 #svch-series .svch-ico { width: 30px; height: 30px; }
}

@media (forced-colors: active) {
  html body #svc3 #svch-series :is(.svch-card, .svch-prev, .svch-next, .svch-cta, .svch-fr button, .svch-art, .svch-tile) { outline: 1px solid transparent; outline-offset: -1px; }
  html body #svc3 #svch-series [aria-disabled="true"] { color: GrayText; }
}