/* ==========================================================================
   Google Ads page · the hero (live since 2026-09-20)
   The approved preview gads-hero-label2-f4n/mk03.html, applied to
   google-ads.html: the Home Corridor frame, the message, and the
   blue client sheet standing half inside the frame and half on the page —
   two rows of client cards the reader moves (no auto-run), the sheet's blue
   margins equal on both sides, and the "Our Clients" label as small caps
   (left on desktop, centred on phones).
   This file is the preview's own layers, concatenated in the order the
   preview loads them, so the cascade is the one that was approved. Linked
   LAST on the page. The client cards are built by gads-clients/*.js; the
   rail's behaviour is gads-hero-rail/rail.js.
   ========================================================================== */

/* ---------------------------------------------------------------- x9-base.css */
/* ==========================================================================
   Google Ads page · hero options — shared base (gads-hero-x9m4)
   Tokens are the live homepage's (index.html + home-system/home.css):
   cobalt identity #004594 · action #0760C6 · ink #0E1E35 / #24364F / #505C6C
   · hero ladder #AEC9EF → #C6D9F4 → #DDE9F9 → #EEF4FC → white · ground #F3F7FC
   · selected key white + 2px #5E8FD3 + sky light #1F8FEA.
   Only what every option shares lives here: lane, title stack, actions,
   the preview switcher. Each option's architecture is in its own file.
   Flat surfaces only — no shadow, blur, fade or curve on any container.
   ========================================================================== */

.x9{
  --e: max(clamp(18px, 4vw, 84px), calc((100% - 1440px) / 2));   /* the header's lane edge */
  --cob:#004594; --act:#0760C6; --act-h:#004EA6; --act-p:#003F8A;
  --ink:#0E1E35; --ink2:#24364F; --mute:#505C6C; --quiet:#6B7788;
  --f1:#AEC9EF; --f2:#C6D9F4; --f3:#DDE9F9; --f4:#EEF4FC; --gr:#F3F7FC;
  --sel:#5E8FD3; --sky:#1F8FEA; --hov:#7FA6DC;
  position:relative; display:block; margin:0; padding:0;
  background:#FFFFFF; color:var(--ink); text-align:center;
  font-family:-apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  overflow:clip; isolation:isolate;
}
.x9 *, .x9 *::before, .x9 *::after{ box-sizing:border-box; }
.x9 :where(h1,h2,h3,p,ul,ol,li,figure,dl,dd,dt){ margin:0; padding:0; max-width:none; list-style:none; }
.x9 :where(a){ color:inherit; text-decoration:none; }
.x9 :where(button){ font:inherit; color:inherit; margin:0; }
.x9 svg{ display:block; flex:none; }

/* ---- title stack ------------------------------------------------------- */
.x9 .x9-lab{ font-size:15px; line-height:20px; font-weight:600; color:#1F1F1F; letter-spacing:0; text-transform:none; }
.x9 .x9-t{
  margin:18px auto 0; max-width:none; width:auto;
  font-size:clamp(30px, 3.7vw, 58px); line-height:1.07; font-weight:800; letter-spacing:-.04em;
  color:var(--ink); text-wrap:balance;
}
.x9 .x9-t em{
  font-style:normal; color:#005BBF;
  background:linear-gradient(90deg, #0760C6 0%, #4989E2 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  padding-right:.03em;
}
.x9 .x9-lede{
  margin:16px auto 0; max-width:660px;
  font-size:clamp(16px, 1.25vw, 18px); line-height:1.6; font-weight:400; color:var(--mute); text-wrap:pretty;
}

/* ---- actions ----------------------------------------------------------- */
.x9 .x9-acts{ margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 30px; }
.x9 a.x9-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:54px; padding:0 28px; border-radius:6px; border:0;
  background:var(--act); color:#FFFFFF; font-size:16px; font-weight:800; letter-spacing:-.005em; white-space:nowrap;
  box-shadow:none; text-decoration:none; transition:background-color .15s;
}
.x9 a.x9-btn:hover{ background:var(--act-h); }
.x9 a.x9-btn:active{ background:var(--act-p); }
.x9 a.x9-lnk{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  color:var(--act); font-size:16px; font-weight:700; white-space:nowrap; text-decoration:none;
}
.x9 a.x9-lnk:hover{ color:var(--act-h); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.x9 :is(a.x9-btn, a.x9-lnk, a, button):focus-visible{ outline:2px solid var(--act-p); outline-offset:3px; }
.x9 .x9-ar{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---- the quiet company line ------------------------------------------ */
.x9 .x9-micro{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; font-size:15px; line-height:20px; color:var(--mute); }
.x9 .x9-micro b{ color:var(--ink); font-weight:750; }
.x9 .x9-micro i{ font-style:normal; color:#A3AFBF; margin:0 10px; }
.x9 .x9-micro span{ white-space:nowrap; }

/* ---- short desktop screens (e.g. 1280×720) ---------------------------- */
@media (min-width:761px) and (max-height:800px){
  .x9 .x9-t{ margin-top:14px; }
  .x9 .x9-lede{ margin-top:12px; }
  .x9 .x9-acts{ margin-top:22px; }
  .x9 a.x9-btn{ height:50px; }
  .x9 .x9-micro{ margin-top:14px; }
}

/* ---- phone ------------------------------------------------------------- */
@media (max-width:760px){
  .x9 .x9-lab{ font-size:13px; line-height:17px; }
  .x9 .x9-t{ margin-top:14px; font-size:clamp(28px, 8.2vw, 34px); line-height:1.1; letter-spacing:-.035em; }
  .x9 .x9-lede{ margin-top:12px; font-size:15.5px; line-height:1.55; }
  .x9 .x9-acts{ margin-top:22px; flex-direction:column; gap:6px; }
  .x9 a.x9-btn{ width:100%; height:52px; }
  .x9 .x9-micro{ font-size:13.5px; margin-top:14px; }
  .x9 .x9-micro{ gap:2px 14px; }
  .x9 .x9-micro i{ display:none; }
}

/* ==========================================================================
   Preview switcher — NOT part of any design. Neutral greys only, below the
   hero, so the hero is judged alone.
   ========================================================================== */
.x9pv{ background:#FFFFFF; border-top:1px solid #E4E4E4; padding:34px clamp(18px,4vw,84px) 60px; font-family:-apple-system,"system-ui","Helvetica Neue","Segoe UI",Arial,sans-serif; color:#333; }
.x9pv-in{ max-width:1440px; margin:0 auto; }
.x9pv-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; margin:0 0 14px; }
.x9pv-h b{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#555; font-weight:700; }
.x9pv-h a{ font-size:14px; color:#333; text-decoration:underline; text-underline-offset:3px; }
.x9pv ul{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.x9pv li a{ display:flex; gap:10px; align-items:baseline; padding:10px 12px; border:1px solid #DDDDDD; color:#333; text-decoration:none; font-size:14px; line-height:1.3; min-height:44px; }
.x9pv li a span{ font-variant-numeric:tabular-nums; color:#888; font-size:12.5px; }
.x9pv li a:hover{ border-color:#999; }
.x9pv li a[aria-current]{ border-color:#222; background:#F4F4F4; font-weight:650; }
.x9pv p{ margin:14px 0 0; font-size:13px; color:#777; line-height:1.5; }
@media (max-width:900px){ .x9pv ul{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---------------------------------------------------------------- k5-base.css */
/* ==========================================================================
   Google Ads hero · Corridor + Clients (gads-hero-corridor-k5v2) — shared frame
   The shortlisted Corridor Floor: the hero ground #C6D9F4, two flat steps
   (#DDE9F9, #EEF4FC) parted by 1px white seams, then the white title panel.
   The title stack's type and actions come from x9-base.css. Each version
   file decides where the client box lives and how it joins the frame.
   ========================================================================== */
.k5 .k5-cor{ background:#C6D9F4; padding:clamp(16px, 2.6vh, 26px) var(--e); }
.k5 .k5-pan{ position:relative; background:#FFFFFF; margin:23px;
  box-shadow:0 0 0 1px #FFFFFF, 0 0 0 11px #EEF4FC, 0 0 0 12px #FFFFFF, 0 0 0 22px #DDE9F9, 0 0 0 23px #FFFFFF; }
.k5 .k5-say{ padding:clamp(34px, 5.2vh, 54px) 32px clamp(28px, 4vh, 40px); }

@media (max-width:760px){
  .k5 .k5-cor{ padding:10px 10px; }
  .k5 .k5-pan{ margin:9px; box-shadow:0 0 0 1px #FFFFFF, 0 0 0 5px #EEF4FC, 0 0 0 6px #FFFFFF, 0 0 0 9px #DDE9F9, 0 0 0 10px #FFFFFF; }
  .k5 .k5-say{ padding:26px 12px 22px; }
}
@media (min-width:761px) and (max-height:800px){
  .k5 .k5-say{ padding-top:26px; padding-bottom:22px; }
}

/* ---------------------------------------------------------------- k5-clients.css */
/* ==========================================================================
   The live Google Ads client section (#q7), dressed in the homepage theme.
   Markup, data and behaviour are the live page's own — gads-clients/*.js
   builds them unchanged: 18 businesses, two rows that slide together on a
   desktop, one tap opens that business's detail directly under the rows,
   the same business again (or All businesses / Back to all / Esc) closes it.
   This file changes appearance only. Every rule is scoped to .k5 #q7.
   Homepage roles: card edge #C6D9F4 · hover #7FA6DC · chosen 2px #5E8FD3 ·
   action #0760C6 · ink #0E1E35 / #505C6C · square containers, no shadows.
   ========================================================================== */

.k5 #q7.cc{
  --gut:0px; --k5g:10px; --rz-act:#0760C6; --line-b:#C6D9F4; --line-2:#DDE9F9;
  --ink:#0E1E35; --ink-2:#24364F; --ink-3:#505C6C; --ink-4:#6B7788; --paper:#FFFFFF;
  /* tokens the homepage's own #q7 rules (its Google Ads tab) read — given the homepage values here */
  --v5-sel:#5E8FD3; --v5-edge-2:#C6D9F4; --v5-edge-h:#7FA6DC; --pl-ring:#7FA6DC; --pl-ring-2:#5E8FD3;
  --ac-bg:#FFFFFF; --ac-edge:#5E8FD3; --ac-hov:#FFFFFF; --rz-line:#C6D9F4; --rz-line-h:#7FA6DC;
  display:block; margin:0; padding:0; background:transparent; border:0; text-align:left;
  font-family:-apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}
.k5 #q7.cc .mp{ width:100%; max-width:none; margin:0; padding:0; background:transparent; border:0; }

/* ---- the head: the live words, set at a size that stays under the H1 ---- */
.k5 #q7.cc .mp-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0; padding:0; }
.k5 #q7.cc .mp-head::after{ display:none; }
.k5 #q7.cc .q7h-eye{ flex:0 0 100%; margin:0; font-family:inherit; font-size:14px; line-height:20px; font-weight:600;
  letter-spacing:0; text-transform:none; color:#1F1F1F; }
.k5 #q7.cc .mp-t{ position:static; width:auto; height:auto; clip:auto; overflow:visible; margin:0;
  font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.k5 #q7.cc .mp-t i{ font-style:normal; color:#0760C6; }
.k5 #q7.cc .q7h-sub{ order:0; flex:0 1 auto; margin:0; max-width:none; font-size:15px; line-height:1.45; color:var(--ink-3); }

/* ---- the rows ------------------------------------------------------------ */
.k5 #q7.cc .mp-wrap{ position:relative; margin:14px 0 0; }
.k5 #q7.cc .mp-row{ margin:0; padding:0; gap:var(--k5g); scrollbar-width:none; }
.k5 #q7.cc .mp-row::-webkit-scrollbar{ display:none; }
@media (min-width:861px){
  /* two rows that slide together — the live D5 rail. The columns are a share
     of the box, so four whole cards and a clear part of the fifth always
     show: the cut is the cue that the rows continue. */
  .k5 #q7.cc .mp-row{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2, auto);
    grid-auto-columns:calc((100% - 4 * var(--k5g)) / 4.42); overflow-x:auto; overflow-y:hidden;
    overscroll-behavior-x:contain; scroll-behavior:smooth; }
  .k5 #q7.cc .mp-i{ width:auto; flex:none; }
}
@media (min-width:861px) and (max-width:1199px){
  .k5 #q7.cc .mp-row{ grid-auto-columns:calc((100% - 3 * var(--k5g)) / 3.42); }
}

/* ---- a business ---------------------------------------------------------- */
.k5 #q7.cc .mp-i{
  display:flex; align-items:center; gap:12px; min-height:58px; margin:0; padding:9px 10px 9px 9px;
  background:#FFFFFF; border:1px solid #C6D9F4; border-radius:0; box-shadow:none; outline:0;
  color:var(--ink); text-align:left; cursor:pointer; transition:border-color .15s, background-color .15s;
}
.k5 #q7#q7.cc .mp-i:hover{ border-color:#7FA6DC; background:#FFFFFF; box-shadow:none; transform:none; }
.k5 #q7.cc .mp-i:focus-visible{ outline:2px solid #003F8A; outline-offset:2px; }
.k5 #q7#q7.cc .mp-i.is-sel, .k5 #q7#q7.cc .mp-i.is-sel:hover{ background:#FFFFFF; border-color:#5E8FD3; box-shadow:inset 0 0 0 1px #5E8FD3; }
.k5 #q7.cc .mp-m{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:0;
  background:var(--k); color:#FFFFFF; font-size:12.5px; font-weight:800; letter-spacing:.02em; box-shadow:none; }
.k5 #q7.cc .mp-m .mp-v{ display:none; }
.k5 #q7.cc .mp-w{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.k5 #q7.cc .mp-i .cc-nm{ display:block; font-size:14.5px; line-height:1.2; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:none; }
.k5 #q7.cc .mp-i.is-sel .cc-nm{ color:#004594; }
.k5 #q7.cc .mp-i .mp-s{ display:block; font-style:normal; font-size:12.5px; line-height:1.25; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* the result cue: the homepage's small arrow key; its words stay for screen readers */
.k5 #q7.cc .cc-cue{ flex:none; display:grid; place-items:center; width:30px; height:30px; margin:0; padding:0;
  background:#FFFFFF; border:1px solid #C6D9F4; border-radius:0; color:#0760C6; box-shadow:none; }
.k5 #q7.cc .cc-tx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.k5 #q7.cc .cc-ar{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.k5 #q7.cc .mp-i:hover .cc-cue{ border-color:#7FA6DC; }
.k5 #q7.cc .mp-i.is-sel .cc-cue{ background:#EEF4FC; border-color:#5E8FD3; color:#004594; }
.k5 #q7.cc .mp-i.is-sel .cc-ar{ rotate:90deg; transform:none; }

/* ---- the open business: one box that grows down under the rows ---------- */
.k5 #q7.cc .mp-panel{ position:relative; margin:14px 0 0; padding:0; background:transparent; border:0; box-shadow:none; }
.k5 #q7.cc.is-open .mp-panel::before{ content:""; position:absolute; z-index:2; top:-6px; left:var(--rz-notch, 50%);
  width:12px; height:12px; transform:translateX(-50%) rotate(45deg); border-radius:0;
  background:#F3F7FC; border-left:1px solid #5E8FD3; border-top:1px solid #5E8FD3; }
.k5 #q7.cc .mp-in{ padding:0; }
.k5 #q7.cc .mp-card{ margin:0; background:#FFFFFF; border:1px solid #5E8FD3; border-radius:0; box-shadow:none; overflow:clip; }
.k5 #q7.cc .mp-crumb{ display:flex; align-items:center; gap:10px; margin:0; padding:0 20px; min-height:46px;
  background:#F3F7FC; border-bottom:1px solid #DDE9F9; font-size:14px; color:var(--ink-3); }
.k5 #q7.cc .mp-crumb button{ min-height:44px; padding:0; border:0; background:none; color:#0760C6; font:inherit; font-weight:650; cursor:pointer; }
.k5 #q7.cc .mp-crumb button:hover{ text-decoration:underline; text-underline-offset:3px; }
.k5 #q7.cc .mp-crumb i{ font-style:normal; color:#9DB0C9; }
.k5 #q7.cc .mp-crumb b{ color:var(--ink); font-weight:700; }
.k5 #q7.cc .mp-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0, 330px); gap:26px; padding:22px 22px 22px; }
.k5 #q7.cc .mp-who{ display:flex; align-items:center; gap:14px; margin:0 0 16px; }
.k5 #q7.cc .mp-wm{ display:grid; place-items:center; width:46px; height:46px; border-radius:0; background:var(--k); color:#FFFFFF; font-size:15px; font-weight:800; }
.k5 #q7.cc .mp-who h3{ margin:0; font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.k5 #q7.cc .mp-trade{ font-size:14px; color:var(--ink-3); }
.k5 #q7.cc .mp-strip{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:0; margin:0; border:1px solid #DDE9F9; border-radius:0; background:#FFFFFF; }
.k5 #q7.cc .mp-strip .mp-s{ display:flex; flex-direction:column; gap:4px; padding:13px 16px 14px; border:0; border-left:1px solid #DDE9F9; border-radius:0; background:transparent; font-size:inherit; white-space:normal; }
.k5 #q7.cc .mp-strip .mp-s:first-child{ border-left:0; }
.k5 #q7.cc .mp-strip .mp-s em{ font-style:normal; font-size:13px; font-weight:600; color:var(--ink-3); }
.k5 #q7.cc .mp-strip .mp-s b{ font-size:26px; line-height:1.1; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.k5 #q7.cc .mp-strip .mp-s.is-txt b{ font-size:15.5px; line-height:1.35; font-weight:700; letter-spacing:0; }
.k5 #q7.cc .mp-strip .mp-s i{ font-style:normal; font-size:13px; color:var(--ink-3); }
.k5 #q7.cc .mp-strip .mp-s.is-now{ background:#EEF4FC; }
.k5 #q7.cc .mp-strip .mp-s.is-now b{ color:#004594; }
.k5 #q7.cc .mp-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:16px; }
.k5 #q7.cc .q7-story{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#0760C6; font-size:15px; font-weight:700; text-decoration:none; }
.k5 #q7.cc .q7-story svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.k5 #q7.cc .q7-story:hover{ text-decoration:underline; text-underline-offset:4px; }
.k5 #q7.cc .mp-x{ min-height:42px; padding:0 18px; border:1px solid #C6D9F4; border-radius:6px; background:#FFFFFF; color:var(--ink-2); font:inherit; font-size:14.5px; font-weight:650; cursor:pointer; box-shadow:none; }
.k5 #q7.cc .mp-x:hover{ border-color:#7FA6DC; color:#004594; }
.k5 #q7.cc .q7-shot{ margin:0; border-radius:0; box-shadow:none; border:1px solid #DDE9F9; }

/* ---- phone ---------------------------------------------------------------- */
@media (max-width:860px){
  .k5 #q7.cc{ padding:0; }
  .k5 #q7.cc .mp-t{ font-size:19px; }
  .k5 #q7.cc .q7h-sub{ font-size:13.5px; }
  .k5 #q7.cc .q7h-eye{ font-size:13px; line-height:18px; }
  .k5 #q7.cc .mp-wrap{ margin-top:12px; }
  .k5 #q7.cc .mp-row{ margin:0; padding:0; scroll-padding-inline:0; gap:8px; }
  .k5 #q7.cc .mp-i{ min-height:54px; padding:7px 10px 7px 7px; gap:10px; border-radius:0; }
  .k5 #q7.cc .mp-m{ width:34px; height:34px; font-size:11.5px; }
  .k5 #q7.cc .mp-i .cc-nm{ font-size:14px; }
  .k5 #q7.cc .mp-i .mp-s{ font-size:12px; }
  .k5 #q7.cc .cc-cue{ width:28px; height:28px; }
  .k5 #q7.cc .mp-body{ grid-template-columns:minmax(0,1fr); gap:14px; padding:14px; }
  .k5 #q7.cc .mp-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .k5 #q7.cc .mp-strip .mp-s.is-txt{ grid-column:1 / -1; border-bottom:1px solid #DDE9F9; }
  .k5 #q7.cc .mp-strip .mp-s:nth-child(2){ border-left:0; }
  .k5 #q7.cc .mp-strip .mp-s b{ font-size:22px; }
  .k5 #q7.cc .mp-crumb{ padding:0 14px; }
  .k5 #q7.cc .mp-who h3{ font-size:19px; }
  .k5 #q7.cc .mp-wm{ width:40px; height:40px; }

  /* one row (the live phone rail): each card as wide as its full name */
  .k5.k5-m1 #q7.cc .mp-row{ display:flex; grid-template-columns:none; }
  .k5.k5-m1 #q7.cc .mp-i{ --rz-cw:auto; flex:0 0 auto; width:auto; min-width:0; max-width:none; }
  .k5.k5-m1 #q7.cc .mp-i .cc-nm, .k5.k5-m1 #q7.cc .mp-i .mp-s{ overflow:visible; text-overflow:clip; }
  .k5.k5-m1 #q7.cc .mp-i .q7-nS{ display:none; }
  .k5.k5-m1 #q7.cc .mp-i .q7-nF{ display:inline; }

  /* two rows that swipe together: a column is a fixed share of the box, so a
     clear part of the next column always shows */
  .k5.k5-m2 #q7.cc .mp-row{ display:grid; grid-auto-flow:column; grid-template-columns:none; grid-template-rows:repeat(2, auto);
    grid-auto-columns:74%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    }
  .k5.k5-m2 #q7.cc .mp-i{ --rz-cw:auto; width:auto; min-width:0; max-width:none; }
  .k5.k5-m2 #q7.cc .mp-i .q7-nS{ display:none; }
  .k5.k5-m2 #q7.cc .mp-i .q7-nF{ display:inline; }
}
/* tablet: two rows keep two whole columns and a part of the third */
@media (min-width:561px) and (max-width:860px){
  .k5.k5-m2 #q7.cc .mp-row{ grid-auto-columns:42%; }
}

/* ---------------------------------------------------------------- cl-base.css */
/* ==========================================================================
   Google Ads hero · border and container clarity (gads-hero-clarity-m6r)
   Base: straddle r3n8 option 03 "Cobalt Lift" (Corridor hero + the live
   client box crossing its lower edge). This layer takes out what every one of
   the ten options agreed is wrong, before any option adds its own treatment:

   · no dark surface anywhere: the cobalt head bar goes
   · no outline inside an outline: the client cards lose their 1px frame and
     the arrow key inside each card loses its box (the card is the button)
   · the opened detail never draws a second frame inside the client box: no
     card edge, no rule under the path line, no table lines round the figures,
     no edge on the site picture or the Back to all button, no notch
   · the box lines up with the white panel above it (on phones it missed the
     panel by 2px and stood inside the frame's steps: five lines in 11px)

   Each option file (cNN.css) then decides, and names, the few lines it keeps.
   Every rule is scoped to #overview.cl, so it outranks k5-clients.css.
   ========================================================================== */

.cl{ --bx:calc(var(--e) + 23px); --ink:#0E1E35; --mute:#505C6C; }
@media (max-width:760px){ .cl{ --bx:19px; } }

.cl .r3-box{ background:transparent; border:0; }

/* ---- head: the live words, no bar ---------------------------------------- */
#overview.cl #q7#q7.cc .mp-head{ background:none; }
#overview.cl #q7#q7.cc .q7h-eye{ display:none; }
#overview.cl #q7#q7.cc .mp-t{ color:var(--ink); }
#overview.cl #q7#q7.cc .mp-t i{ color:#0760C6; }
#overview.cl #q7#q7.cc .q7h-sub{ color:var(--mute); }

/* ---- a client: the card is the button, so nothing inside it is boxed ------ */
#overview.cl #q7#q7.cc .mp-i{ position:relative; background:transparent; border:0; box-shadow:none; }
#overview.cl #q7#q7.cc .mp-i:hover{ background:transparent; border:0; box-shadow:none; }
#overview.cl #q7#q7.cc .mp-i.is-sel,
#overview.cl #q7#q7.cc .mp-i.is-sel:hover{ border:0; box-shadow:none; }
#overview.cl #q7#q7.cc .cc-cue,
#overview.cl #q7#q7.cc .mp-i:hover .cc-cue,
#overview.cl #q7#q7.cc .mp-i.is-sel .cc-cue{ width:24px; height:24px; background:none; border:0; color:#0760C6; }
#overview.cl #q7#q7.cc .cc-ar{ transition:translate .15s; }
#overview.cl #q7#q7.cc .mp-i:hover:not(.is-sel) .cc-ar{ translate:2px 0; }
#overview.cl #q7#q7.cc .mp-i.is-sel .cc-nm{ color:#004594; }

/* the site's own "this one is chosen" light (header keys, All Work tabs);
   !important because v06-fix.css empties every card ::after with it */
#overview.cl #q7#q7.cc .mp-i.is-sel::after{ content:"" !important; position:absolute; top:7px; right:7px; width:7px; height:7px;
  left:auto; bottom:auto; opacity:1; transition:none; border-radius:50%; background:#1F8FEA; }

/* ---- the opened client: one surface, never a frame in a frame ------------- */
#overview.cl #q7#q7.cc.is-open .mp-panel::before{ display:none; }
#overview.cl #q7#q7.cc .mp-card{ background:transparent; border:0; }
#overview.cl #q7#q7.cc .mp-crumb{ background:none; border:0; }
#overview.cl #q7#q7.cc .mp-strip{ border:0; background:none; gap:8px; }
#overview.cl #q7#q7.cc .mp-strip .mp-s,
#overview.cl #q7#q7.cc .mp-strip .mp-s.is-txt{ border:0; }
#overview.cl #q7#q7.cc .mp-strip .mp-s.is-now b{ color:#004594; }
#overview.cl #q7#q7.cc .q7-shot{ border:0; }
#overview.cl #q7#q7.cc .mp-x{ border:0; background:#EEF4FC; color:#24364F; }
#overview.cl #q7#q7.cc .mp-x:hover{ background:#DDE9F9; color:#004594; }

@media (max-width:860px){
  #overview.cl #q7#q7.cc .mp-strip{ gap:8px; }
}

/* Preview switcher (not part of any design): ten entries, two rows of five on
   a desktop; the base keeps two columns below 900px */
@media (min-width:901px){ .x9pv ul{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* ---------------------------------------------------------------- sl-base.css */
/* ==========================================================================
   Google Ads hero · Our Clients as a running slider (gads-hero-slider-s6k)
   From bluefit b2 "Open on Blue" with the unbox u01 cover, which the user
   approved. What all five versions share:

   · the cover: u01's Home Corridor frame, 16px from the screen's edge (8px
     on phones): a band of the ground, a 12px #DDE9F9 step, a 12px #EEF4FC
     step, 1px white seams, then the white panel
   · one blue (#C6D9F4) behind the hero AND the clients, ending below them
   · the client area keeps the frame's outer edge at every width
   · the clients run: sl.js moves them and loops them without clones; each
     slN.css decides rows, head and container. At rest (step / page / roll)
     only whole cards show; no arrows, no edge fades, no counters, no
     "Show all" button — a phone slides too
   · 36 businesses (10 real + 26 placeholders, see sl-demo.js)
   Every #q7 rule is scoped #overview.sl #q7#q7.cc so it outranks the
   client kit (k5-clients.css, cl-base.css and gads-clients/*.css).
   ========================================================================== */

.sl{ --g:#C6D9F4; --s1:#DDE9F9; --s2:#EEF4FC; --kg:10px; --ink:#0E1E35; --ink2:#34445A; background:#FFFFFF; }

/* ---- the ground and the cover ------------------------------------------- */
#overview.sl .k5-cor{ --o:16px; --st:12px; display:flex; flex-direction:column; background:var(--g);
  padding:var(--o) var(--o) clamp(26px, 3.6vh, 40px); }
#overview.sl .k5-pan{ margin:calc(2 * var(--st) + 3px);
  box-shadow:0 0 0 1px #FFFFFF, 0 0 0 calc(var(--st) + 1px) var(--s2), 0 0 0 calc(var(--st) + 2px) #FFFFFF,
    0 0 0 calc(2 * var(--st) + 2px) var(--s1), 0 0 0 calc(2 * var(--st) + 3px) #FFFFFF; }
@media (max-width:760px){ #overview.sl .k5-cor{ --o:8px; --st:5px; padding-bottom:16px; } }
/* phone: the message gives back about 24px of air (nothing removed), so the
   cover, the message and two rows of clients share one 390×844 screen */
@media (max-width:760px){
  #overview.sl .k5-say{ padding:20px 12px 16px; }
  #overview.sl .x9-acts{ margin-top:18px; gap:2px; }
  #overview.sl .x9-micro{ margin-top:10px; }
}

/* ---- the client area: the frame's outer edge ------------------------------ */
.sl .sl-cl{ position:relative; margin-top:var(--slg, 26px); min-width:0; text-align:left; }
@media (max-width:760px){ .sl .sl-cl{ margin-top:var(--slg-m, 16px); } }

/* ---- the head: title and line are one unit -------------------------------- */
#overview.sl #q7#q7.cc .mp-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:4px 24px; padding:0; }
#overview.sl #q7#q7.cc .mp-head > .mp-t, #overview.sl #q7#q7.cc .mp-head > .q7h-sub{ grid-column:1; }
#overview.sl #q7#q7.cc .mp-head > .sl-ctl{ grid-column:2; grid-row:1 / span 2; }
#overview.sl #q7#q7.cc .mp-t{ font-size:24px; line-height:1.15; letter-spacing:-.025em; color:var(--ink); }
#overview.sl #q7#q7.cc .q7h-sub{ font-size:15px; line-height:1.45; color:var(--ink2); }
@media (max-width:860px){
  #overview.sl #q7#q7.cc .mp-t{ font-size:20px; }
  #overview.sl #q7#q7.cc .q7h-sub{ font-size:14px; line-height:1.4; }
}

/* ---- the window and the track --------------------------------------------- */
#overview.sl #q7#q7.cc .mp-wrap{ position:relative; margin:14px 0 0; overflow:clip; touch-action:pan-y;
  -webkit-user-select:none; user-select:none; }
#overview.sl #q7#q7.cc .mp-row{ display:grid; grid-auto-flow:column; grid-template-columns:none;
  grid-template-rows:repeat(var(--rows, 2), auto); grid-auto-columns:var(--cw, 220px); gap:var(--kg);
  width:max-content; max-width:none; margin:0; padding:0; overflow:visible; scroll-snap-type:none; scroll-behavior:auto; }
#overview.sl.sl-live #q7#q7.cc .mp-row{ will-change:transform; }
#overview.sl #q7#q7.cc .mp-wrap.is-drag{ cursor:grabbing; }
/* lanes (drift): each row moves on its own */
#overview.sl[data-motion="drift"] #q7#q7.cc .mp-row{ display:flex; flex-direction:column; width:auto; gap:var(--kg); will-change:auto; }
#overview.sl #q7#q7.cc .sl-lane{ overflow:clip; }
#overview.sl #q7#q7.cc .sl-lt{ display:grid; grid-auto-flow:column; grid-auto-columns:var(--cw, 220px); gap:var(--kg);
  width:max-content; will-change:transform; }
/* roll: whole rows move upward in a window of --rows rows */
#overview.sl[data-motion="roll"] #q7#q7.cc .mp-wrap{ height:var(--wh, auto); }
#overview.sl[data-motion="roll"] #q7#q7.cc .mp-row{ grid-auto-flow:row; grid-template-rows:none;
  grid-template-columns:repeat(var(--vc, 6), minmax(0,1fr)); grid-auto-columns:auto; width:auto; }

/* ---- a business (b2's white card, now always one line of each) ------------ */
#overview.sl #q7#q7.cc .mp-i{ flex:none; width:auto; min-width:0; min-height:58px; gap:9px; padding:9px 8px 9px 9px;
  background:#FFFFFF; scroll-snap-align:none; }
#overview.sl #q7#q7.cc .mp-i:hover{ background:#F7FAFE; }
#overview.sl #q7#q7.cc .mp-i:focus-visible{ outline:2px solid #003F8A; outline-offset:-3px; }
#overview.sl #q7#q7.cc .mp-i.is-sel,
#overview.sl #q7#q7.cc .mp-i.is-sel:hover{ background:#FFFFFF; box-shadow:inset 0 0 0 2px #5E8FD3; }
#overview.sl #q7#q7.cc .mp-m{ width:32px; height:32px; font-size:11px; }
#overview.sl #q7#q7.cc .mp-i .cc-nm{ font-size:14px; }
#overview.sl #q7#q7.cc .mp-i .mp-s{ font-size:12px; }
#overview.sl #q7#q7.cc .mp-i .cc-nm, #overview.sl #q7#q7.cc .mp-i .mp-s{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#overview.sl #q7#q7.cc .mp-i .q7-nS{ display:inline; }
#overview.sl #q7#q7.cc .mp-i .q7-nF{ display:none; }
#overview.sl #q7#q7.cc .cc-cue{ width:14px; height:24px; }
#overview.sl #q7#q7.cc .cc-ar{ width:14px; height:14px; }
@media (max-width:860px){
  #overview.sl #q7#q7.cc .mp-wrap{ margin-top:12px; }
  #overview.sl #q7#q7.cc .mp-row, #overview.sl #q7#q7.cc .sl-lt{ --kg:8px; }
  #overview.sl[data-motion="drift"] #q7#q7.cc .mp-row{ --kg:8px; }
  #overview.sl #q7#q7.cc .mp-i{ min-height:54px; gap:9px; padding:7px 8px; }
  #overview.sl #q7#q7.cc .mp-m{ width:30px; height:30px; font-size:10.5px; }
  #overview.sl #q7#q7.cc .mp-i .cc-nm{ font-size:13.5px; }
  #overview.sl #q7#q7.cc .cc-cue{ display:none; }
}
/* a phone card under 173px (sl.js sets .sl-tight): the longest trade,
   "Facility Management", still fits on one line */
@media (max-width:860px){
  #overview.sl.sl-tight #q7#q7.cc .mp-i{ gap:7px; padding:7px 6px; }
  #overview.sl.sl-tight #q7#q7.cc .mp-m{ width:28px; height:28px; font-size:10px; }
  #overview.sl.sl-tight #q7#q7.cc .mp-i .cc-nm{ font-size:13px; }
  #overview.sl.sl-tight #q7#q7.cc .mp-i .mp-s{ font-size:11px; }
}

/* ---- the opened business (b2) --------------------------------------------- */
#overview.sl #q7#q7.cc .mp-panel{ margin:12px 0 0; }
#overview.sl #q7#q7.cc .mp-card{ background:#FFFFFF; }
#overview.sl #q7#q7.cc .mp-crumb{ padding:0 22px; min-height:50px; }
#overview.sl #q7#q7.cc .mp-body{ padding:2px 22px 22px; }
#overview.sl #q7#q7.cc .mp-strip .mp-s{ background:#F3F7FC; }
#overview.sl #q7#q7.cc .mp-strip .mp-s.is-now{ background:#E3EDFA; }
#overview.sl #q7#q7.cc .mp-side{ background:#F3F7FC; padding:12px; align-self:start; }
@media (max-width:860px){
  #overview.sl #q7#q7.cc .mp-panel{ margin:10px 0 0; }
  #overview.sl #q7#q7.cc .mp-crumb{ padding:0 14px; }
  #overview.sl #q7#q7.cc .mp-body{ padding:2px 14px 14px; }
  #overview.sl #q7#q7.cc .mp-side{ padding:8px; }
}

/* ---- the controls: where it is, and pause / play --------------------------- */
.sl .sl-ctl{ display:flex; align-items:center; gap:12px; }
.sl.sl-fit .sl-ctl, .sl.sl-fit .sl-vbar{ display:none; }
.sl .sl-bar{ position:relative; display:block; flex:1 1 auto; min-width:60px; height:4px; background:#FFFFFF; overflow:hidden; }
.sl .sl-bar i, .sl .sl-vbar i{ position:absolute; display:block; background:#4F84CF; }
.sl .sl-bar i{ top:0; bottom:0; }
.sl .sl-vbar{ position:absolute; top:0; right:0; bottom:0; width:5px; background:#FFFFFF; overflow:hidden; }
.sl .sl-vbar i{ left:0; right:0; }
.sl .sl-dots{ display:flex; align-items:center; gap:2px; }
.sl .sl-dots button{ position:relative; width:22px; height:32px; padding:0; border:0; background:none; cursor:pointer; }
.sl .sl-dots button::before{ content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; translate:-50% -50%;
  background:#FFFFFF; transition:width .2s, background-color .2s; }
.sl .sl-dots button:hover::before{ background:#9DBCE6; }
.sl .sl-dots button.on::before{ width:18px; background:#4F84CF; }
.sl .sl-dots button:focus-visible{ outline:2px solid #003F8A; outline-offset:-2px; }
.sl .sl-pp{ flex:none; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:0;
  background:#FFFFFF; color:#0760C6; cursor:pointer; }
.sl .sl-pp:hover{ background:#F3F7FC; color:#004594; }
.sl .sl-pp:focus-visible{ outline:2px solid #003F8A; outline-offset:2px; }
.sl .sl-pp svg{ width:14px; height:14px; fill:currentColor; }
.sl .sl-pp .sl-pl, .sl .sl-pp.is-paused .sl-pa{ display:none; }
.sl .sl-pp.is-paused .sl-pl{ display:block; }
@media (max-width:860px){
  .sl .sl-pp{ width:36px; height:36px; }
  .sl .sl-dots button{ width:18px; height:36px; }
}

/* Preview switcher (not part of any design): five entries */
@media (min-width:901px){ .x9pv ul{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* ---------------------------------------------------------------- sh.css */
/* ==========================================================================
   Option 2 · half inside, half outside (the user's reference:
   gads-hero-unbox-w5r/u01-c1-head-band.html), with the running slider.

   The hero: the Home Corridor frame of u01, drawn on .k5-cor — a #C6D9F4
   band (::before) and, --o inside it, the white panel with its two steps
   and white seams (::after). Both stop at --cut, which sl.js measures: the
   middle of the gap between the first two rows of clients (phones too).
   Below --cut the page is white.

   The clients: ONE white sheet (C1 Head Band) standing 32px inside the
   panel (10px on a phone), capped at 1326px wide. The frame's lower edge
   passes behind it between the two rows, so its top half is inside the
   hero and its bottom half is on the page, and the frame shows on both
   sides of the top half. Edge: 1px #C6D9F4 and one soft lift from above.
   Head: the pale #EEF4FC band with a #DDE9F9 rule under it, title and line
   stacked; the slider's position and pause sit on the band's right.
   Inside: pale tiles, the chosen one white with the 2px ring.
   Loaded after sl-base.css; every rule is scoped #overview.sl.sh.
   ========================================================================== */

#overview.sl.sh{ background:#FFFFFF; }
#overview.sl.sh .k5-cor{ --o:16px; --st:12px; --side:calc(var(--o) + 2 * var(--st) + 3px);
  position:relative; display:flex; flex-direction:column; background:#FFFFFF;
  padding:0 max(calc(var(--side) + 32px), calc((100% - 1326px) / 2)) clamp(44px, 6.4vh, 68px); }
#overview.sl.sh .k5-cor::before, #overview.sl.sh .k5-cor::after{ content:""; position:absolute; z-index:0; pointer-events:none; }
#overview.sl.sh .k5-cor::before{ top:0; left:0; right:0; height:var(--cut, 78%); background:#C6D9F4; }
#overview.sl.sh .k5-cor::after{ top:var(--o); left:var(--o); right:var(--o); height:calc(var(--cut, 78%) - 2 * var(--o)); background:#FFFFFF;
  box-shadow:inset 0 0 0 1px #FFFFFF, inset 0 0 0 calc(var(--st) + 1px) #DDE9F9, inset 0 0 0 calc(var(--st) + 2px) #FFFFFF,
    inset 0 0 0 calc(2 * var(--st) + 2px) #EEF4FC, inset 0 0 0 calc(2 * var(--st) + 3px) #FFFFFF; }
#overview.sl.sh .k5-pan{ position:relative; z-index:1; margin:0; padding:0; background:transparent; box-shadow:none; }
#overview.sl.sh .k5-say{ padding:calc(var(--side) + clamp(26px, 4.4vh, 46px)) 0 clamp(36px, 5vh, 52px); }
#overview.sl.sh .sl-cl{ z-index:1; margin-top:0; }

/* ---- the sheet ------------------------------------------------------------ */
#overview.sh #q7#q7.cc .mp{ background:#FFFFFF; padding:0 26px 24px;
  box-shadow:0 0 0 1px #C6D9F4, 0 24px 44px -30px rgba(18, 62, 130, .28); }
#overview.sh #q7#q7.cc .mp-head{ align-items:center; margin:0 -26px; padding:17px 26px 16px; background:#EEF4FC; box-shadow:inset 0 -1px 0 #DDE9F9; }
#overview.sh #q7#q7.cc .mp-t{ font-size:22px; line-height:1.2; }
#overview.sh #q7#q7.cc .q7h-sub{ font-size:15px; line-height:1.45; color:#505C6C; }
#overview.sh #q7#q7.cc .mp-wrap{ margin-top:20px; }
#overview.sh #q7#q7.cc .mp-i{ background:#F3F7FC; }
#overview.sh #q7#q7.cc .mp-i:hover{ background:#EAF1FA; }
#overview.sh #q7#q7.cc .mp-i.is-sel, #overview.sh #q7#q7.cc .mp-i.is-sel:hover{ background:#FFFFFF; }
#overview.sh[data-motion="roll"] #q7#q7.cc .mp-wrap{ padding-right:17px; }

/* the controls on the pale band */
#overview.sh .sl-bar, #overview.sh .sl-vbar{ background:#DDE9F9; }
#overview.sh .sl-dots button::before{ background:#C6D9F4; }
#overview.sh .sl-dots button:hover::before{ background:#9DBCE6; }
#overview.sh .sl-dots button.on::before{ background:#4F84CF; }
#overview.sh #q7#q7.cc .mp-head .sl-ctl{ min-width:236px; justify-content:flex-end; }
#overview.sh[data-pos="dots"] #q7#q7.cc .mp-head .sl-ctl,
#overview.sh[data-pos="none"] #q7#q7.cc .mp-head .sl-ctl,
#overview.sh[data-pos="vbar"] #q7#q7.cc .mp-head .sl-ctl{ min-width:0; }

/* the opened business fills the sheet below the rows */
#overview.sh #q7#q7.cc .mp-panel{ margin:16px 0 0; }
#overview.sh #q7#q7.cc .mp-card{ background:#F3F7FC; }
#overview.sh #q7#q7.cc .mp-strip .mp-s{ background:#FFFFFF; }
#overview.sh #q7#q7.cc .mp-strip .mp-s.is-now{ background:#E3EDFA; }
#overview.sh #q7#q7.cc .mp-side{ background:#FFFFFF; }

/* ---- phone ------------------------------------------------------------------ */
@media (max-width:760px){
  #overview.sl.sh .k5-cor{ --o:8px; --st:5px; padding:0 calc(var(--side) + 10px) 28px; }
  #overview.sl.sh .k5-say{ padding:calc(var(--side) + 18px) 0 22px; }
}
@media (max-width:860px){
  #overview.sh #q7#q7.cc .mp{ padding:0 10px 12px; }
  #overview.sh #q7#q7.cc .mp-head{ margin:0 -10px; padding:11px 10px 10px; }
  #overview.sh #q7#q7.cc .mp-t{ font-size:20px; }
  #overview.sh #q7#q7.cc .q7h-sub{ font-size:14px; line-height:1.4; }
  #overview.sh #q7#q7.cc .mp-wrap{ margin-top:10px; }
  #overview.sh[data-motion="roll"] #q7#q7.cc .mp-wrap{ padding-right:12px; }
  #overview.sh .sl-ctl{ justify-content:space-between; margin-top:10px; }
  #overview.sh .sl-pp{ background:#EEF4FC; }
  #overview.sh .sl-pp:hover{ background:#DDE9F9; }
  #overview.sh #q7#q7.cc .mp-head .sl-ctl{ margin-top:0; min-width:0; align-self:start; }
  #overview.sh #q7#q7.cc .mp-head .sl-pp{ background:#FFFFFF; }
  #overview.sh #q7#q7.cc .mp-panel{ margin-top:10px; }
}

/* ---------------------------------------------------------------- h1-blue.css */
/* ==========================================================================
   H1 · Half Step, in S1's colours (s1-step-rail.html) — h1-half-step.html only
   The user: S1's theme gives the stronger impression; put it on H1.
   H1's layout stays exactly as it is — the frame to --cut, the one sheet
   standing half inside the hero and half on the page, the head with the bar
   and pause on its right, the stepping rows. Only colour changes, and every
   value below is the one S1 shows (sl-base.css):
   · the sheet is S1's blue field, #C6D9F4 — not white with a pale head band,
     a hairline edge and a soft shadow. It is flat, like S1; the blue draws
     its edge against the white panel above the cut and the white page below
   · the head sits straight on the blue (no #EEF4FC band, no rule under it);
     the line is #34445A, as on S1's blue
   · the businesses are S1's white cards (hover #F7FAFE), not pale tiles
   · the slider bar and pause are white on the blue, the bar's fill #4F84CF
   · the opened business is S1's white card with #F3F7FC figures
   Loaded after sh.css; every rule is scoped #overview.sh.h1.
   ========================================================================== */

/* the sheet: S1's blue field, flat */
#overview.sh.h1 #q7#q7.cc .mp{ background:#C6D9F4; box-shadow:none; }

/* the head straight on the blue */
#overview.sh.h1 #q7#q7.cc .mp-head{ background:transparent; box-shadow:none; }
#overview.sh.h1 #q7#q7.cc .q7h-sub{ color:#34445A; }

/* the businesses: white cards on the blue */
#overview.sh.h1 #q7#q7.cc .mp-i{ background:#FFFFFF; }
#overview.sh.h1 #q7#q7.cc .mp-i:hover{ background:#F7FAFE; }
#overview.sh.h1 #q7#q7.cc .mp-i.is-sel,
#overview.sh.h1 #q7#q7.cc .mp-i.is-sel:hover{ background:#FFFFFF; }

/* the controls: white on the blue */
#overview.sh.h1 .sl-bar, #overview.sh.h1 .sl-vbar{ background:#FFFFFF; }
#overview.sh.h1 .sl-dots button::before{ background:#FFFFFF; }
#overview.sh.h1 .sl-dots button:hover::before{ background:#9DBCE6; }
#overview.sh.h1 .sl-dots button.on::before{ background:#4F84CF; }

/* the opened business: S1's white card */
#overview.sh.h1 #q7#q7.cc .mp-card{ background:#FFFFFF; }
#overview.sh.h1 #q7#q7.cc .mp-strip .mp-s{ background:#F3F7FC; }
#overview.sh.h1 #q7#q7.cc .mp-strip .mp-s.is-now{ background:#E3EDFA; }
#overview.sh.h1 #q7#q7.cc .mp-side{ background:#F3F7FC; }

@media (max-width:860px){
  #overview.sh.h1 .sl-pp,
  #overview.sh.h1 #q7#q7.cc .mp-head .sl-pp{ background:#FFFFFF; }
  #overview.sh.h1 .sl-pp:hover{ background:#F3F7FC; }
}

/* ---------------------------------------------------------------- rl-base.css */
/* ==========================================================================
   Google Ads hero · Our Clients as a horizontal rail (gads-hero-rail-m4v)
   Base: h1-half-step in S1's colours (sh.css + h1-blue.css), unchanged —
   the blue sheet standing half inside the hero frame and half on the page.
   What all five options share:
   · no motion of its own: no auto-slide, no running, no position bar, no
     pause (the user, 2026-09-19). Horizontal on every width.
   · a real scroller the reader drives — swipe, trackpad, mouse drag (rl.js),
     the arrow keys — that snaps to clean positions
   · the rail runs to the sheet's own edges, so it slides under a hard edge
     (no fades), and its first card starts on the head's line
   · the next column peeks with its coloured mark showing: the only cue that
     there is more (no arrows, no dots: site rules)
   · phones: the sheet stands flush with the hero panel instead of 10px
     inside it — 20px more for the rail, the frame still shows beside it
   Every rule is scoped #overview.rl and loads after h1-blue.css.
   ========================================================================== */

/* ---- phones: the sheet flush with the panel --------------------------------- */
@media (max-width:760px){
  #overview.sl.sh.rl .k5-cor{ padding-left:var(--side); padding-right:var(--side); }
}

/* ---- the rail ---------------------------------------------------------------- */
#overview.rl #q7#q7.cc{ --pad:26px; --gap:10px; --peek:56px; }
@media (max-width:860px){
  #overview.rl #q7#q7.cc{ --pad:12px; --gap:8px; --peek:44px; }
  #overview.sh.rl #q7#q7.cc .mp{ padding:0 var(--pad) 14px; }
  #overview.sh.rl #q7#q7.cc .mp-head{ margin:0 calc(-1 * var(--pad)); padding:13px var(--pad) 0; }
}
#overview.rl #q7#q7.cc .mp-head{ grid-template-columns:minmax(0,1fr); }

#overview.rl #q7#q7.cc .mp-wrap{ overflow:visible; margin:18px calc(-1 * var(--pad)) 0; touch-action:auto;
  -webkit-user-select:none; user-select:none; }
#overview.rl #q7#q7.cc .mp-row{ width:auto; max-width:none; margin:0; padding:0 var(--pad);
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-padding-inline:var(--pad); scroll-snap-type:x mandatory; scroll-behavior:auto;
  scrollbar-width:none; gap:var(--gap); will-change:auto; }
#overview.rl #q7#q7.cc .mp-row::-webkit-scrollbar{ display:none; }
#overview.rl #q7#q7.cc .mp-row.is-drag{ scroll-snap-type:none; cursor:grabbing; }
#overview.rl #q7#q7.cc .mp-row.is-drag .mp-i{ cursor:grabbing; }
#overview.rl #q7#q7.cc .mp-i{ scroll-snap-align:start; scroll-snap-stop:normal; }
@media (max-width:860px){ #overview.rl #q7#q7.cc .mp-wrap{ margin-top:12px; } }

/* columns (data-mode="cols"): rl.js sets --rows and --cw */
#overview.rl[data-mode="cols"] #q7#q7.cc .mp-row{ display:grid; grid-auto-flow:column; grid-template-columns:none;
  grid-template-rows:repeat(var(--rows, 2), auto); grid-auto-columns:var(--cw, 220px); }

/* strips (data-mode="strips"): lines of chips as wide as their words */
#overview.rl[data-mode="strips"] #q7#q7.cc .mp-row{ display:flex; flex-direction:column; align-items:flex-start;
  scroll-snap-type:none; }
#overview.rl #q7#q7.cc .rl-strip{ display:flex; flex-wrap:nowrap; gap:var(--gap); width:max-content; }

/* the opened business sits under the rail inside the sheet */
#overview.sh.rl #q7#q7.cc .mp-panel{ margin-top:14px; }
@media (max-width:860px){ #overview.sh.rl #q7#q7.cc .mp-panel{ margin-top:10px; } }

/* screen-reader words inside a card */
#overview.rl .rl-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Preview switcher (not part of any design): five entries */
@media (min-width:901px){ .x9pv ul{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* ---------------------------------------------------------------- rl1.css */
/* 01 · Peek Rail — two rows of cards that move together, a column at a time.
   The direct upgrade of H1: the same white cards on the blue sheet, now a
   rail the reader drives. Every rest position shows whole columns and, at
   the sheet's edge, the next column's coloured marks — so the eye reads
   "there is more this way" without an arrow or a bar.
   Desktop 1440: five columns (10 businesses) + the peek. Phone: one column
   of two wide cards + the peek; names and trades never cut. */
#overview.rl1 #q7#q7.cc{ --peek:48px; }            /* the next column's mark and a little blank card: no cut letters */
#overview.rl1 #q7#q7.cc .mp-i{ min-height:60px; }
@media (max-width:860px){
  #overview.rl1 #q7#q7.cc .mp-i{ min-height:58px; padding:9px 10px 9px 9px; gap:10px; }
  #overview.rl1 #q7#q7.cc .mp-m{ width:32px; height:32px; font-size:11px; }
  #overview.rl1 #q7#q7.cc .mp-i .cc-nm{ font-size:14.5px; }
  #overview.rl1 #q7#q7.cc .mp-i .mp-s{ font-size:12.5px; }
  #overview.rl1 #q7#q7.cc .cc-cue{ display:grid; width:14px; }
}

/* ---------------------------------------------------------------- pr-base.css */
/* ==========================================================================
   Google Ads hero · R1 Peek Rail, upgraded in place (gads-hero-r1-up-h2v)
   R1's STRUCTURE IS UNCHANGED, desktop and phone: the frame, the blue sheet
   in the same place and width (flush with the hero panel on phones, as in
   R1), the frame's edge passing BETWEEN the two rows, two rows of white
   cards, the rail. rl-base.css and rl1.css are R1's own files, byte for
   byte. This layer only upgrades what sits inside that structure:
   · phone cards sized to their words (~206px) instead of 280px with an
     empty middle; the next card shows about a third — its mark and the
     start of its name — so the peek reads as a card
   · the head, short and small; the full old sentence stays in the page for
     screen readers. Each prN.css settles it a different way.
   ========================================================================== */

/* ---- the head, small and tight ---------------------------------------------- */
#overview.pr #q7#q7.cc .mp-head{ padding:16px 26px 0; }
#overview.pr #q7#q7.cc .mp-t{ font-size:20px; line-height:1.2; letter-spacing:-.02em; }
#overview.pr #q7#q7.cc .pr-line{ margin:0; font-size:14.5px; line-height:1.4; color:#34445A; }
#overview.pr #q7#q7.cc .mp-wrap{ margin-top:12px; }
#overview.pr #q7#q7.cc .pr-sr{ position:absolute !important; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#overview.pr #q7#q7.cc .mp{ padding-bottom:22px; }

/* ---- phones: the head's spacing inside the sheet ---------------------------------- */
@media (max-width:860px){
  #overview.sh.pr #q7#q7.cc .mp{ padding:0 12px 14px; }
  #overview.sh.pr #q7#q7.cc .mp-head{ margin:0 -12px; padding:13px 12px 0; }
  #overview.pr #q7#q7.cc .mp-t{ font-size:18px; }
  #overview.pr #q7#q7.cc .pr-line{ font-size:13.5px; }
  #overview.pr #q7#q7.cc .mp-wrap{ margin-top:10px; }
}

/* ---- phone cards: sized to their words ------------------------------------------ */
@media (max-width:860px){
  #overview.pr #q7#q7.cc .mp-i{ min-height:58px; padding:9px 10px 9px 9px; gap:10px; }
  #overview.pr #q7#q7.cc .mp-m{ width:32px; height:32px; font-size:11px; }
  #overview.pr #q7#q7.cc .mp-i .cc-nm{ font-size:14px; }
  #overview.pr #q7#q7.cc .mp-i .mp-s{ font-size:12px; }
  #overview.pr #q7#q7.cc .cc-cue{ display:grid; width:14px; margin-left:auto; }
  /* never cut a word: on the narrowest phones a long name takes a second line */
  #overview.pr #q7#q7.cc .mp-i .cc-nm, #overview.pr #q7#q7.cc .mp-i .mp-s{ white-space:normal; overflow:visible; text-overflow:clip; }
}

/* Preview switcher (not part of any design) */
@media (min-width:901px){ .x9pv ul{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* ---------------------------------------------------------------- pr1.css */
/* 01 · Title Only — the shortest head: "Our Clients." and nothing else.
   Set at 20px (18 on phones) on the sheet's top-left, 12px above the first
   card: it names the section and gets out of the way. The long line stays
   for screen readers only. */
#overview.pr.pr1 #q7#q7.cc .mp-head{ display:block; }

/* ---------------------------------------------------------------- mk-base.css */
/* ==========================================================================
   Google Ads hero · "Our Clients." — ten micro entry treatments (gads-hero-label2-f4n)
   On R1 upgraded (structure unchanged) with the symmetric rail. The previous
   ten (gads-hero-label-t8w) were rejected as oversized shapes; here every
   treatment keeps one budget:
   · the label lives in the blue's own top margin — 12px of blue above it,
     10px below it to the cards (desktop; 10/8 on phones). The sheet is
     SHORTER than before, and no treatment adds height.
   · the label is 13px (12.5 on phones), never a heading
   · one micro detail at most: a 1px line, a tiny mark, a tone
   ========================================================================== */

/* symmetric rail: the sheet's padding on both sides, no bleed */
#overview.sh.pr.mk #q7#q7.cc{ --pad:0px; --sp:26px; --lt:12px; --lg:10px; --lh:16px; }
@media (max-width:860px){ #overview.sh.pr.mk #q7#q7.cc{ --sp:12px; --lt:10px; --lg:8px; --lh:15px; } }
#overview.sh.pr.mk #q7#q7.cc .mp{ position:relative; padding:var(--lt) var(--sp) var(--sp); }
#overview.sh.pr.mk #q7#q7.cc .mp-wrap{ margin:var(--lg) 0 0; }

/* the label */
#overview.sh.pr.mk #q7#q7.cc .mp-head{ display:flex; align-items:center; gap:0; min-height:var(--lh); margin:0; padding:0; background:none; box-shadow:none; }
#overview.sh.pr.mk #q7#q7.cc .mp-t{ font-size:13px; line-height:var(--lh); font-weight:700; letter-spacing:0; color:#0E1E35; white-space:nowrap; }
@media (max-width:860px){ #overview.sh.pr.mk #q7#q7.cc .mp-t{ font-size:12.5px; } }

/* Preview switcher (not part of any design) */
@media (min-width:901px){ .x9pv ul{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* ---------------------------------------------------------------- mk3.css */
/* 03 · Small Caps — the label as a tracked micro-caps marker. */
#overview.sh.pr.mk.mk3 #q7#q7.cc .mp-t{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#34445A; }
#overview.sh.pr.mk.mk3 #q7#q7.cc .mp-t i{ display:none; }
@media (max-width:860px){ #overview.sh.pr.mk.mk3 #q7#q7.cc .mp-t{ font-size:10.5px; } }

/* phones: the label centred over the rail (the user, 2026-09-19); desktop keeps it on the cards' left line */
@media (max-width:860px){ #overview.sh.pr.mk.mk3 #q7#q7.cc .mp-head{ justify-content:center; } }