/* Success Stories · generated by our-work-5/_ss.py — edit the sources named below, then re-run it */
/* 2026-09-28 (release fix 4): the phone rules below ended at 700px, so 701-767px -
   landscape phones and small tablets - got the wide-screen tab row, which overflows its
   own box by 22-30px at those widths while the 5-column phone grid fits exactly. The
   boundary is now 767px, the complement of a 768px tablet breakpoint. Nothing at 768px
   and above changed. (The rest of the site switches at 760px; this section keeps 767 so
   the whole of the range the tab row cannot fit is covered.) */

/* ---------------- our-work-5/core.css ---------------- */
/* ==========================================================================
   OUR WORK · five contained showcases — the SHARED layer          2026-09-26
   ==========================================================================
   What every one of the five solutions shares: the tokens, the cards, the
   rails and their position bar, the details (Google Ads result, the
   Mobile/Desktop page viewer, the video player) and the client wall.
   Each solution's own file (s1.css … s5.css) only arranges these parts:
   where the tabs sit, what the container is, where an opened item appears.

   Rails have no left/right arrows (site rule, 2026-08-31): they are swiped,
   dragged, scrolled or keyed, and the position bar under them shows where
   you are — and can be dragged or clicked.
   ========================================================================== */

:root{
  --o-ink:#0B0D12; --o-ink2:#3A414C; --o-ink3:#5B6472; --o-mute:#767E8B;
  --o-act:#0760C6; --o-act2:#064F9F; --o-cob:#004594;
  --o-paper:#FFFFFF; --o-ground:#F4F7FC; --o-tint:#EAF1FB; --o-tint2:#DCE7F7;
  --o-edge:#E5EAF1; --o-edge2:#DCE3EC; --o-hover:#BAC5D4;
  --o-open:#E3ECFA; --o-open-edge:#C3D5F1;
  --o-lane: var(--site-lane, min(1440px, calc(100% - 2 * clamp(24px, 4vw, 72px))));
  --o-barh: var(--barh, 108px);
  --o-gap: 16px;
  --o-card: 300px;
}

/* ---------------------------------------------------------- the section */
.ow5{ position: relative; padding: 46px 0 50px; background: var(--o-paper); overflow-anchor: none;
      scroll-margin-top: calc(var(--o-barh) + 16px); }
.ow5-in{ width: var(--o-lane); margin-inline: auto; position: relative; }
.ow5-vh{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- tabs */
.ow5-tab{
  font: inherit; cursor: pointer; border: 0; background: transparent; color: #15335C;
  display: inline-flex; align-items: center; gap: 9px; min-width: 0; position: relative;
}
.ow5-ti{ width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.ow5-ti svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ow5-tl{ font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; }
.ow5-tc{ font-size: 12px; font-weight: 600; color: #5E6E86; font-variant-numeric: tabular-nums; }
.ow5-tab:focus-visible{ outline: 2px solid var(--o-act); outline-offset: -2px; }

/* ------------------------------------------------ panels never resize */
.ow5-stack{ display: grid; min-width: 0; }
.ow5-panel{ grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.ow5-panel[data-on="1"]{ visibility: visible; }
.ow5-meta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; min-height: 30px; }
.ow5-meta .ow5-steps{ margin: 0 auto 0 8px; }
.ow5-say{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--o-ink2); }
.ow5-cnt{ margin: 0; flex: none; font-size: 13px; font-weight: 650; color: var(--o-ink3); }
.ow5-steps{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ow5-steps li{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--o-cob); }
.ow5-steps li + li::before{ content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M9 4.5 12.5 8 9 11.5' fill='none' stroke='%237C8DA6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ow5-steps span{ padding: 4px 9px; border-radius: 7px; background: #EEF4FD; }

/* ------------------------------------------------------------- rails */
.ow5-rail{
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: 0; outline: none; position: relative;
  cursor: grab; -webkit-overflow-scrolling: touch;
}
.ow5-rail::-webkit-scrollbar{ display: none; }
.ow5-rail.is-drag{ cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ow5-rail.is-drag *{ pointer-events: none; }
.ow5-rail.is-locked{ overflow-x: hidden; cursor: auto; }
.ow5-rail:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 4px; border-radius: 12px; }
.ow5-track{ display: flex; gap: var(--o-gap); align-items: stretch; width: max-content; margin: 0; padding: 2px 0 4px; list-style: none; }

/* the position bar — where you are in the rail; drag or click it */
.ow5-bar{ position: relative; height: 18px; margin-top: 10px; cursor: pointer; touch-action: none; }
.ow5-bar::before{ content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: #DDE5F0; }
.ow5-bar i{ position: absolute; left: 0; top: 5px; height: 8px; width: 60px; border-radius: 8px; background: var(--o-cob); }
.ow5-bar:hover i{ background: var(--o-act); }
.ow5-bar[hidden]{ display: none; }

/* ------------------------------------------------------------- cards */
.ow5-card{
  position: relative; flex: none; width: var(--o-card); min-width: 0; scroll-snap-align: start;
  background: var(--o-paper); border: 1px solid var(--o-edge2); border-radius: 12px;
  display: flex; flex-direction: column; transition: border-color .15s ease, background-color .15s ease;
}
.ow5-card:hover{ border-color: var(--o-hover); }
.ow5-hit{ position: absolute; inset: 0; z-index: 2; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.ow5-hit:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 2px; }
.ow5-n{ margin: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; color: var(--o-ink); }
.ow5-t{ margin: 3px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--o-ink3); }
.ow5-d{ margin: 6px 0 0; font-size: 12.5px; line-height: 1.3; color: #6B7482; overflow-wrap: break-word; }
.ow5-go{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto;
  padding: 11px 16px; border-top: 1px solid #EDF0F5; font-size: 13.5px; font-weight: 650; color: var(--o-act);
}
.ow5-go i{ width: 24px; height: 24px; flex: none; border-radius: 7px; background: #EEF4FD; display: grid; place-items: center; }
.ow5-go svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ow5-go .c{ display: none; }
.ow5-card.is-open{ background: var(--o-open); border-color: var(--o-open-edge); }
.ow5-card.is-open .ow5-go{ color: var(--o-cob); border-top-color: var(--o-open-edge); }
.ow5-card.is-open .ow5-go i{ background: var(--o-cob); color: #fff; }
.ow5-card.is-open .ow5-go .v{ display: none; }
.ow5-card.is-open .ow5-go .c{ display: inline; }
@keyframes ow5-back{ from{ box-shadow: 0 0 0 3px rgba(7,96,198,.4); } to{ box-shadow: 0 0 0 3px rgba(7,96,198,0); } }
.ow5-card.is-back{ animation: ow5-back 1.1s ease-out 1; }

/* Google Ads */
.ow5-card.is-ga .ow5-top{ padding: 16px 16px 0; }
.ow5-fig{ margin: 14px 16px 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.ow5-fig s{ text-decoration: none; font-size: 28px; font-weight: 700; color: #8A93A1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ow5-fig b{ font-size: 32px; font-weight: 800; color: var(--o-ink); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ow5-fig svg{ width: 18px; height: 18px; stroke: #8A93A1; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; align-self: center; }
.ow5-fig span{ flex-basis: 100%; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--o-ink3); }
.ow5-foc{ margin: 12px 16px 14px; font-size: 13px; line-height: 1.45; color: var(--o-ink2); }
.ow5-foc em{ font-style: normal; color: var(--o-mute); }
/* the Google Ads card's picture: the real top of the page the ads lead to; it takes the room the
   words leave, so every card in the rail ends level whatever it has on record */
.ow5-card.is-ga .ow5-foc{ margin-bottom: 0; }
.ow5-gc{ position: relative; flex: 1 1 auto; min-height: 140px; margin: 14px 16px 16px; overflow: hidden;
         border-radius: 8px; border: 1px solid var(--o-edge); background: #EEF2F7; }
.ow5-gc img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ow5-card.is-lite{ cursor: default; }
.ow5-card.is-lite:hover{ border-color: var(--o-edge2); }
.ow5-card.is-tail{ padding: 14px 16px; background: #F7F9FC; cursor: default; }
.ow5-card.is-tail:hover{ border-color: var(--o-edge2); }
.ow5-card.is-tail h3{ margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--o-ink2); }
.ow5-card.is-tail ul{ list-style: none; margin: 0; padding: 0; }
.ow5-card.is-tail li{ padding: 5px 0 6px; border-bottom: 1px solid var(--o-edge); }
.ow5-card.is-tail li:last-child{ border-bottom: 0; }
.ow5-card.is-tail b{ display: block; font-size: 13.5px; font-weight: 700; color: var(--o-ink); line-height: 1.3; }
.ow5-card.is-tail span{ display: block; font-size: 12.5px; color: var(--o-ink3); line-height: 1.3; }

/* landing pages · websites */
.ow5-th{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 11px 11px 0 0; background: #EEF2F7; border-bottom: 1px solid var(--o-edge); }
.ow5-th img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ow5-th img.m{ display: none; }
.ow5-card.is-shot .ow5-top{ padding: 13px 16px 12px; }

/* videos */
.ow5-vth{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 11px 11px 0 0; background: #0F1B3D; }
.ow5-vth img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ow5-dur{ position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 5px; background: rgba(11,13,18,.82); color: #fff; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ow5-pl{ position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(11,13,18,.25); }
.ow5-pl svg{ width: 22px; height: 22px; fill: var(--o-cob); margin-left: 3px; }
.ow5-card.is-vid .ow5-top{ padding: 12px 16px 12px; }
.ow5-vt{ margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--o-ink);
         display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ow5-vm{ margin: 6px 0 0; font-size: 12.5px; color: var(--o-ink3); }

/* the client wall — a compact sideways list, name + business type only */
.ow5-rail.is-wall{ cursor: grab; }
.ow5-wall{
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--o-rows, 3), auto);
  grid-auto-columns: var(--o-wall-col, 250px); gap: 10px 12px; width: max-content;
}
.ow5-cl{
  scroll-snap-align: start; min-width: 0; background: var(--o-paper); border: 1px solid var(--o-edge2); border-radius: 10px;
  padding: 11px 14px; display: flex; flex-direction: column; justify-content: center; min-height: 62px;
}
.ow5-cl b{ font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; color: var(--o-ink); line-height: 1.3; }
.ow5-cl span{ margin-top: 2px; font-size: 12.5px; color: var(--o-ink3); line-height: 1.3; }

/* ------------------------------------------------------ the foot line */
.ow5-foot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ow5-next{
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid #C9D9EF; background: var(--o-paper); color: var(--o-ink2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ow5-next{ min-width: 214px; justify-content: space-between; }   /* the longest label's width: the foot never re-wraps */
.ow5-next b{ color: var(--o-act); font-weight: 700; margin-right: auto; }
.ow5-next svg, .ow5-cta svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ow5-next svg{ stroke: var(--o-act); }
.ow5-next:hover{ border-color: #9DB9E3; }
.ow5-cta{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 650; color: var(--o-act); text-decoration: none; }
.ow5-cta:hover{ text-decoration: underline; text-underline-offset: 3px; }
.ow5-next:focus-visible, .ow5-cta:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 2px; }

/* ------------------------------------------------------------ details */
.ow5-det{ min-width: 0; background: var(--o-open); border: 1px solid var(--o-open-edge); border-radius: 14px; padding: 20px 22px 18px; position: relative; }
.ow5-det.is-in{ animation: ow5-in .22s ease-out 1; }
@keyframes ow5-in{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
.ow5-dh{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: start; }
.ow5-dh > .is-back{ grid-column: 1; grid-row: 1; }
.ow5-dh > .t{ grid-column: 2; grid-row: 1; min-width: 0; }
.ow5-dh > .is-x{ grid-column: 3; grid-row: 1; }
.ow5-dh h3{ margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.026em; line-height: 1.22; color: var(--o-ink); outline: none; }
html body .ow5-det .ow5-dh h3:focus, html body .ow5-det .ow5-dh h3:focus-visible{ outline: none !important; box-shadow: none !important; }
.ow5-dh p{ margin: 3px 0 0; font-size: 14px; color: var(--o-ink3); }
.ow5-btn{
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--o-open-edge); background: var(--o-paper); color: var(--o-ink2);
  font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ow5-btn svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ow5-btn:hover{ border-color: #9DB9E3; color: var(--o-ink); }
.ow5-btn:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 2px; }
.ow5-btn.is-back{ color: var(--o-cob); }
.ow5-db{ margin-top: 16px; }
.ow5-df{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--o-open-edge); }
.ow5-df .ow5-steps2{ display: flex; flex-wrap: wrap; gap: 8px; }
.ow5-df .ow5-btn span{ max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

/* Google Ads result */
.ow5-gd{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ow5-gd.is-solo{ grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.ow5-pp{ background: var(--o-paper); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.ow5-k{ margin: 0 0 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--o-ink3); }
.ow5-ba{ display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 6px 20px; }
.ow5-ba div span{ display: block; font-size: 12.5px; font-weight: 600; color: var(--o-ink3); }
.ow5-ba div b{ display: block; margin-top: 4px; font-size: 42px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--o-ink); font-variant-numeric: tabular-nums; }
.ow5-ba div.is-b b{ color: #8A93A1; }
.ow5-ba > svg{ width: 24px; height: 24px; stroke: #8A93A1; fill: none; stroke-width: 2; margin-bottom: 8px; stroke-linecap: round; stroke-linejoin: round; }
.ow5-ba p{ grid-column: 1 / -1; margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--o-ink2); }
.ow5-li{ list-style: none; margin: 0; padding: 0; }
.ow5-li li{ padding: 8px 0; border-top: 1px solid #EDF0F5; font-size: 14.5px; color: var(--o-ink); }
.ow5-li li:first-child{ border-top: 0; padding-top: 0; }

/* Google Ads opened: the work, then the landing page built for it — two columns joined by an arrow */
.ow5-gx{ display: grid; grid-template-columns: minmax(260px, 360px) 44px minmax(0, 1fr); align-items: start; }
.ow5-gx.is-lp{ grid-template-columns: minmax(0, 1fr); }
.ow5-gxa{ display: grid; gap: 12px; min-width: 0; }
.ow5-gxa > .ow5-k, .ow5-lph > .ow5-k{ margin: 0; min-height: 42px; display: flex; align-items: center; }
.ow5-to{ justify-self: center; width: 30px; height: 30px; margin-top: 96px; border-radius: 50%; background: var(--o-paper); color: var(--o-cob);
         display: grid; place-items: center; box-shadow: 0 1px 2px rgba(15,27,61,.1); }
.ow5-to svg{ width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ow5-lpx{ min-width: 0; }
.ow5-lph{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-bottom: 12px; }
.ow5-lph .ow5-seg{ margin: 0; }
.ow5-view.is-lpx{ display: block; background: var(--o-paper); border-radius: 12px; padding: 14px; }

/* the page viewer — one stage for Mobile and Desktop, never resizes */
.ow5-view{ display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.ow5-sb{ background: #F1F4F9; border-radius: 12px; padding: 12px 14px 14px; min-width: 0; }
.ow5-seg{ display: flex; justify-content: center; margin-bottom: 12px; }
.ow5-seg div{ display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px; background: #DFE6F0; }
.ow5-seg button{ display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 650; color: #3A4A60; cursor: pointer; }
.ow5-seg button svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ow5-seg button[aria-pressed="true"]{ background: var(--o-paper); color: var(--o-cob); box-shadow: 0 1px 2px rgba(15,27,61,.1); }
.ow5-seg button:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 1px; }
.ow5-stage{ --st-h: var(--o-stage-h, clamp(420px, calc(100svh - var(--o-barh) - 250px), 600px)); height: var(--st-h); display: flex; justify-content: center; gap: 12px; }
.ow5-dev{ position: relative; display: flex; flex-direction: column; min-width: 0; }
.ow5-dev.is-m{ width: min(330px, 100%); padding: 9px; border-radius: 28px; background: #E1E8F1; }
.ow5-dev.is-m .ow5-scr{ border-radius: 20px; }
.ow5-dev.is-d{ width: 100%; border-radius: 10px; background: #E1E8F1; padding: 0 6px 6px; }
.ow5-chr{ display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; flex: none; }
.ow5-chr i{ width: 9px; height: 9px; border-radius: 50%; background: #C3CCD8; flex: none; }
.ow5-chr i + i{ margin-left: -4px; }
.ow5-chr span{ flex: 1; min-width: 0; height: 21px; border-radius: 6px; background: var(--o-paper); margin-left: 6px; font-size: 12px; line-height: 21px; padding: 0 10px; color: #505C6C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow5-scr{ position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #F6F8FB; border-radius: 6px;
          overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9AA8BB #E1E8F1; }
.ow5-scr img{ display: block; width: 100%; height: auto; }
.ow5-scr::-webkit-scrollbar{ width: 8px; }
.ow5-scr::-webkit-scrollbar-track{ background: #E1E8F1; }
.ow5-scr::-webkit-scrollbar-thumb{ background: #9AA8BB; border-radius: 8px; border: 2px solid #E1E8F1; }
.ow5-scr:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 2px; }
.ow5-ld{ position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--o-mute); pointer-events: none; }
/* the scroll cue: small, on the screen itself; shown once the page is in, gone after the first scroll */
.ow5-hint{ position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px;
           padding: 5px 11px 5px 8px; border-radius: 999px; background: rgba(11,13,18,.72); color: #fff; font-size: 12px; font-weight: 600;
           letter-spacing: .01em; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .5s ease;
           -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(11,13,18,.18); }
.ow5-hint svg{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ow5-dev.is-hint .ow5-hint{ opacity: 1; }
.ow5-dev.is-hint .ow5-hint svg{ animation: ow5-nudge 1.8s ease-in-out .6s 3; }
.ow5-dev.is-read .ow5-hint{ opacity: 0; }
@keyframes ow5-nudge{ 0%, 100%{ transform: none; } 50%{ transform: translateY(2.5px); } }

/* data-cue on the section (owner's pick 06 + 08): the frame carries the scroll track, the page's own
   scrollbar steps aside, and an Explore full page button sits under the preview. The frame widens by the
   track, so the page inside keeps its size. */
.ow5[data-cue] .ow5-scr{ scrollbar-width: none; }
.ow5[data-cue] .ow5-scr::-webkit-scrollbar{ display: none; }
.ow5[data-cue] .ow5-dev.is-m{ width: min(345px, 100%); padding-right: 24px; }
.ow5[data-cue] .ow5-dev.is-d{ padding-right: 22px; }
.ow5-trk{ position: absolute; width: 6px; border-radius: 6px; background: #CAD3DF; cursor: pointer; touch-action: none; }
.ow5-dev.is-m .ow5-trk{ right: 9px; top: 44px; bottom: 44px; }
.ow5-dev.is-d .ow5-trk{ right: 8px; top: 40px; bottom: 12px; }
.ow5-trk i{ position: absolute; left: 0; right: 0; top: 0; border-radius: 6px; background: #6F819B; cursor: grab; touch-action: none; }
.ow5-trk:hover i, .ow5-trk i:active{ background: var(--o-cob); }
.ow5-trk i:active{ cursor: grabbing; }
.ow5-more{ display: flex; justify-content: center; margin-top: 12px; }
.ow5-exp{ color: var(--o-cob); }
.ow5-exp svg{ width: 15px; height: 15px; }
.ow5-fx{ background: var(--o-paper); border-radius: 12px; padding: 16px 18px 4px; min-width: 0; }
.ow5-fx dl{ margin: 0; }
.ow5-fx dt{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--o-ink3); }
.ow5-fx dd{ margin: 6px 0 14px; font-size: 14px; line-height: 1.45; color: var(--o-ink); overflow-wrap: break-word; }
.ow5-fx dd + dt{ padding-top: 12px; border-top: 1px solid #EDF0F5; }
.ow5-flow{ list-style: none; margin: 0; padding: 0; }
.ow5-flow li{ position: relative; padding: 3px 0 3px 18px; font-size: 13.5px; line-height: 1.4; }
.ow5-flow li::before{ content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #9DB4D6; }
.ow5-flow li:not(:last-child)::after{ content: ""; position: absolute; left: 5.5px; top: 18px; bottom: -8px; width: 1px; background: #CAD7EA; }

/* the video player — made only when a video is chosen */
.ow5-vid{ position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: var(--o-vid-max, 900px); margin: 0 auto; background: #0B0D12; border-radius: 12px; overflow: hidden; }
.ow5-vid iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ow5-vinfo{ max-width: var(--o-vid-max, 900px); margin: 10px auto 0; font-size: 13px; color: var(--o-ink3); }

/* ------------------------------------------------ the page's close section */
.ow5-close{ padding: 50px 0 54px; background: #EEF4FE; border-top: 1px solid #D6E3F8; scroll-margin-top: calc(var(--o-barh) + 16px); }
.ow5-close .ow5-in{ text-align: center; }
.ow5-kick{ margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--o-ink2); }
.ow5-h2{ margin: 8px 0 0; font-size: 42px; font-weight: 800; letter-spacing: -.034em; line-height: 1.08; color: var(--o-ink); }
.ow5-h2 i{ font-style: normal; color: var(--o-act); }
.ow5-sub{ margin: 12px auto 0; max-width: 580px; font-size: 16.5px; line-height: 1.55; color: #414652; }
.ow5-acts{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.ow5-pbtn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 10px; font-size: 15.2px; font-weight: 650; text-decoration: none; }
.ow5-pbtn.is-p{ background: var(--o-act); color: #fff; }
.ow5-pbtn.is-p:hover{ background: var(--o-act2); }
.ow5-pbtn.is-g{ background: #fff; color: var(--o-act); border: 1px solid #C9D9EF; }
.ow5-pbtn svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ow5-pbtn:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 2px; }

/* the header gains "Our Work" on this page: between 901 and 1090px the site
   header has room for six items, so "Legal Documents" (also in the Menu
   drawer and the footer) steps out there. This preview only. */
@media (min-width: 901px) and (max-width: 1090px){
  html body header.bar #navPrimary#navPrimary a.ptab.ptab[data-label="Legal Documents"]{ display: none !important; }
}

/* ================================================================ widths */
@media (max-width: 960px){
  .ow5-view{ grid-template-columns: minmax(0, 1fr); }
  .ow5-gd{ grid-template-columns: minmax(0, 1fr); }
  .ow5-gx{ grid-template-columns: minmax(0, 1fr); }
  .ow5-to{ margin: 12px 0 0; transform: rotate(90deg); }
}
@media (max-width: 767px){
  :root{ --o-gap: 12px; }
  .ow5{ padding: 30px 0 34px; }
  .ow5-meta{ flex-direction: column; gap: 2px; margin-bottom: 12px; }
  .ow5-say{ font-size: 14px; }
  .ow5-meta .ow5-steps{ margin: 4px 0 2px; }
  .ow5-steps li{ font-size: 12px; }
  .ow5-rows-m{ --o-rows: 4; }
  .ow5-cl{ padding: 10px 12px; min-height: 58px; }
  .ow5-cl b{ font-size: 13.5px; }
  .ow5-cl span{ font-size: 12px; }
  .ow5-foot{ flex-direction: column; align-items: stretch; }
  .ow5-next{ justify-content: center; }
  .ow5-cta{ justify-content: center; }
  .ow5-det{ padding: 14px 12px 12px; border-radius: 12px; }
  .ow5-dh{ grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .ow5-dh > .is-back{ grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .ow5-dh > .t{ grid-column: 1; grid-row: 2; }
  .ow5-dh > .is-x{ grid-column: 2; grid-row: 2; }
  .ow5-dh > .t:first-child{ grid-row: 1; }
  .ow5-dh > .t:first-child + .is-x{ grid-row: 1; }
  .ow5-dh h3{ font-size: 18.5px; }
  .ow5-btn.is-x span{ display: none; }
  .ow5-pp{ padding: 14px; }
  .ow5-ba div b{ font-size: 36px; }
  .ow5-sb{ padding: 10px 8px 12px; }
  .ow5-stage{ --st-h: var(--o-stage-h-m, clamp(400px, calc(100svh - var(--o-barh) - 200px), 560px)); gap: 8px; }
  .ow5-dev.is-m{ width: min(300px, calc(100% - 16px)); padding: 8px; border-radius: 26px; }
  .ow5[data-cue] .ow5-dev.is-m{ width: min(316px, calc(100% - 4px)); padding-right: 24px; }
  .ow5-dev.is-d{ padding: 0 4px 4px; }
  .ow5-chr{ height: 28px; }
  .ow5-fx{ padding: 14px 14px 2px; }
  .ow5-df{ flex-direction: column; align-items: stretch; }
  .ow5-df .ow5-steps2{ display: grid; grid-template-columns: 1fr 1fr; }
  .ow5-df .ow5-btn{ justify-content: center; }
  .ow5-df .ow5-btn span{ max-width: 120px; }
  .ow5-h2{ font-size: 26px; }
  .ow5-sub{ font-size: 15px; }
  .ow5-close{ padding: 34px 0; }
  .ow5-acts .ow5-pbtn{ width: 100%; height: 50px; }
}
@media (hover: none) and (pointer: coarse){ .ow5-scr{ overscroll-behavior: auto; } .ow5-rail{ cursor: auto; } }
@media (prefers-reduced-motion: reduce){ .ow5-det.is-in, .ow5-card.is-back, .ow5-dev.is-hint .ow5-hint svg{ animation: none; } }

/* ---------------------------------------------- how many cards show at once
   (read by core.js; the fraction is the peek of the next card). One density
   for every category, so every category's rail is the same height. */
.ow5-rail{ --o-vis: 4.3; --o-wall-vis: 5.2; }
.ow5-rail.is-wall{ --o-rows: 4; }
@media (max-width: 1100px){ .ow5-rail{ --o-vis: 3.3; --o-wall-vis: 4.2; } }
@media (max-width: 860px){ .ow5-rail{ --o-vis: 2.4; --o-wall-vis: 3.2; } }
@media (max-width: 767px){ .ow5-rail{ --o-vis: 1.25; --o-wall-vis: 2.25; } .ow5-rail.is-wall{ --o-rows: 3; } }

/* ------------------------------------ phones: all five tabs fit, none slides
   (one scroller at a time: the tabs never scroll, only the rail does) */
@media (max-width: 767px){
  .ow5-tabs{ display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ow5-tabs .ow5-tab{ flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px; padding: 9px 2px 8px; min-height: 64px; text-align: center; }
  .ow5-tabs .ow5-tl{ font-size: 11.5px; white-space: normal; line-height: 1.2; letter-spacing: 0; }
  .ow5-tabs .ow5-tc{ display: none; }
}


@media (max-width: 359px){ .ow5-rail{ --o-wall-vis: 1.6; } }

/* landing pages: the four planning steps. On wide screens they sit on the
   category's own line; on phones they become the first card of the rail. */
.ow5-card.is-plan{ display: none; padding: 14px 16px; background: #F3F7FC; cursor: default; }
.ow5-card.is-plan:hover{ border-color: var(--o-edge2); }
.ow5-card.is-plan h3{ margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--o-ink2); }
.ow5-card.is-plan ol{ list-style: none; margin: 0; padding: 0; }
.ow5-card.is-plan li{ position: relative; padding: 0 0 10px 16px; }
.ow5-card.is-plan li::before{ content: ""; position: absolute; left: 1px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--o-cob); }
.ow5-card.is-plan li:not(:last-child)::after{ content: ""; position: absolute; left: 4px; top: 15px; bottom: 1px; width: 1px; background: #C3D3EA; }
.ow5-card.is-plan b{ display: block; font-size: 13.5px; color: var(--o-ink); }
.ow5-card.is-plan span{ display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--o-ink3); }
@media (max-width: 767px){
  .ow5-card.is-plan{ display: block; }
  .ow5-meta .ow5-steps{ display: none; }
}

/* phones: categories differ too much in height to share one; the chosen one
   takes its own height (tabs and rail stay where they are, only what is
   below the showcase moves) — no reserved hole under a short category */
@media (max-width: 767px){ .ow5-panel[data-on="0"]{ display: none; } }

/* ------------------------------------------------ the hero's category cards
   The site's framed hero is built to carry a strip on its lower edge (as on
   About Us). Here it holds the five categories: each one opens that category
   in the showcase below and brings the page down to it. */
.ow5-doors{ background: #C6D9F4; padding: 12px 26px 26px; }
.ow5-doors-grid{ display: grid; grid-template-columns: calc(80% - 2px) minmax(0, 1fr); column-gap: 10px; }
.ow5-doors-g{ min-width: 0; }
.ow5-doors-row{ display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ow5-doors-g.is-b .ow5-doors-row{ grid-template-columns: minmax(0, 1fr); }
.ow5-doors-lab{ margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #34445A; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow5-door{ display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 10px; background: var(--o-paper); color: var(--o-ink); text-decoration: none; min-width: 0; }
.ow5-door-m{ grid-row: 1; margin: 14px 0 0 12px; width: 32px; height: 32px; background: var(--o-cob); display: grid; place-items: center; }
.ow5-door-m svg{ width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ow5-door-w{ grid-row: 1; padding: 12px 0; min-width: 0; }
.ow5-door-w b{ display: block; font-size: 14.5px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.ow5-door-w span{ display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: #505C6C; line-height: 1.3; }
.ow5-door-c{ grid-row: 1; align-self: center; margin-right: 10px; color: var(--o-act); }
.ow5-door-c svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ow5-door-f{ grid-column: 1 / -1; grid-row: 2; padding: 9px 12px 10px; background: #F3F7FC; font-size: 12px; font-weight: 500; line-height: 1.4; color: #505C6C; }
.ow5-door:hover{ box-shadow: inset 0 0 0 1px var(--o-hover); }
.ow5-door:hover .ow5-door-w b{ color: var(--o-act); }
.ow5-door:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 2px; }
@media (max-width: 1180px){
  .ow5-door-f, .ow5-door-w span{ display: none; }
  .ow5-door{ grid-template-rows: auto; }
  .ow5-door-w{ align-self: center; }
  .ow5-door-m{ margin-bottom: 12px; }
  .ow5-doors-lab{ font-size: 9.5px; letter-spacing: .1em; }
}
@media (max-width: 960px){
  .ow5-doors-grid{ grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .ow5-doors-g.is-b .ow5-doors-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .ow5-doors{ padding: 10px 12px 12px; }
  .ow5-doors-row, .ow5-doors-g.is-b .ow5-doors-row{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ow5-doors-grid{ row-gap: 10px; }
  .ow5-door{ grid-template-columns: 42px minmax(0, 1fr) auto; }
  .ow5-door-m{ margin: 11px 0 11px 10px; }
  .ow5-door-w{ padding: 9px 0; align-self: center; }
  .ow5-door-w span{ display: block; }
  .ow5-doors-lab{ font-size: 10.5px; letter-spacing: .14em; }
}

/* Meta Ads (owner 2026-09-28): the creative is the work — shown whole, square on the card, full in the panel */
.ow5-card.is-meta .ow5-th{ aspect-ratio: 1 / 1; }
.ow5-card.is-meta .ow5-th img{ object-position: center; }
.ow5-mt{ display: flex; justify-content: center; }
.ow5-mt img{ display: block; width: auto; max-width: min(460px, 100%); max-height: calc(100svh - var(--o-barh) - 220px); height: auto; border-radius: 12px;
             border: 1px solid var(--o-edge); background: var(--o-paper); object-fit: contain; }

/* ---------------- our-work-5/s2.css ---------------- */
/* ==========================================================================
   SOLUTION 2 · FOLDER SURFACE
   Tabs stand above as folder tabs; the chosen one is the same colour as the
   surface under it and joins it — no border anywhere, one tinted surface.
   An item slides in from the right, replacing the gallery inside the same
   surface; "‹ All …" slides the gallery back exactly where it was.
   ========================================================================== */
.s2{ --s2-sf: #E6EEFA; }
/* The section heading sits outside and above the tabs and surface, and uses
   the same eyebrow → title → supporting line as Talk To Us (core.css). */
.s2-intro{ text-align: center; margin-bottom: 30px; }
.s2-tabs{ display: flex; align-items: flex-end; gap: 4px; }
.s2 .ow5-tab{ min-height: 50px; padding: 0 20px; border-radius: 12px 12px 0 0; color: #3A4A60; }
.s2 .ow5-tab:not([aria-selected="true"]):hover{ background: #F1F5FB; color: var(--o-ink); }
.s2 .ow5-tab[aria-selected="true"]{ background: var(--s2-sf); color: var(--o-cob); }
.s2 .ow5-tab[aria-selected="true"] .ow5-tl{ font-weight: 750; }
.s2-surface{ background: var(--s2-sf); border-radius: 16px; overflow: hidden; transition: height .38s cubic-bezier(.4,0,.2,1); }
.s2:has(.ow5-tab:first-child[aria-selected="true"]) .s2-surface{ border-top-left-radius: 0; }
.s2-track{ display: flex; align-items: flex-start; width: 200%; transition: transform .38s cubic-bezier(.4,0,.2,1); }
.s2-pane{ width: 50%; flex: none; min-width: 0; padding: 22px 24px 20px; }
.s2.is-detail .s2-track{ transform: translateX(-50%); }
.s2 .ow5-card{ border-color: #D3DEEE; }
.s2 .ow5-det{ background: transparent; border: 0; padding: 0; border-radius: 0; }
.s2 .ow5-foot{ margin-top: 18px; }
@media (max-width: 767px){
  .s2-intro{ margin-bottom: 22px; }
  .s2-tabs{ gap: 2px; }
  .s2 .ow5-tab{ border-radius: 10px 10px 0 0; }
  .s2-surface{ border-radius: 14px; }
  .s2-pane{ padding: 16px 12px 14px; }
}
@media (prefers-reduced-motion: reduce){ .s2-track, .s2-surface{ transition: none; } }

/* ---------------- our-work-open/ox.css ---------------- */
/* ==========================================================================
   OUR WORK · opening a Google Ads client — shared by the five previews
   ==========================================================================
   The browsing UI is our-work-s2.html's, untouched. Shared here: the opened
   client's own parts (identity, the work, the call to action) and the states
   every opening needs. Each opening's arrangement and motion is in o1…o5.
   ========================================================================== */

/* content changes in place on these pages: the page must not re-anchor its scroll */
html:has(.ox:not(.sd)){ overflow-anchor: none; }   /* only the in-section openings; a panel from the right swaps nothing in the page */
html.ox-lock, html.ox-lock body{ overflow: hidden; }

/* layers sit inside the blue surface; clip (not hidden) so sticky parts inside still stick */
.ox .s2-surface{ position: relative; overflow: clip; }

/* while a client is open the rail's position bar and the section foot step out */
.ox #ow5-p-ga .ow5-bar, .ox .s2-pane.is-a > .ow5-foot{ transition: opacity .35s ease .12s, visibility 0s; }
.ox.ox-open #ow5-p-ga .ow5-bar, .ox.ox-open .s2-pane.is-a > .ow5-foot{ opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }

/* the chosen card says so in its own foot */
.ox .ow5-card.ox-sel .ow5-go .v{ display: none; }
.ox .ow5-card.ox-sel .ow5-go .c{ display: inline; }
.ox .ow5-card.ox-sel .ow5-go i{ background: var(--o-cob); color: #fff; }
.ox .ow5-card.ox-sel .ow5-go i svg{ transform: rotate(180deg); }

/* ------------------------------------------------ what an opened client shows */
.ox-box{ position: relative; container-type: inline-size; background: var(--o-paper); color: var(--o-ink); }
.ox-hd{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.ox-th{ flex: none; width: 88px; height: 62px; border-radius: 8px; overflow: hidden; border: 1px solid var(--o-edge); background: #EEF2F7; }
.ox-th img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ox-id{ flex: 1; min-width: 0; }
.ox-n{ margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.026em; line-height: 1.22; color: var(--o-ink); outline: none; }
html body .ox-n:focus, html body .ox-n:focus-visible{ outline: none !important; box-shadow: none !important; }
.ox-t{ margin: 3px 0 0; font-size: 14px; line-height: 1.35; color: var(--o-ink3); }
.ox-x{ flex: none; }
.ox-box .ow5-db{ margin-top: 18px; }
.ox-box .ow5-pp, .ox-box .ow5-view.is-lpx{ background: #F3F6FB; }
.ox-box .ow5-to{ background: #E6EDF8; box-shadow: none; }
.ox-ft{ display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--o-edge); }

/* the work reads in one column when its layer is narrow, wherever that layer is */
@container (max-width: 720px){
  .ox-box .ow5-gx, .ox-box .ow5-gd{ grid-template-columns: minmax(0, 1fr); }
  .ox-box .ow5-to{ margin: 12px 0 0; transform: rotate(90deg); }
}
@media (max-width: 767px){
  .ox-n{ font-size: 18.5px; }
  .ox-th{ width: 64px; height: 46px; }
  .ox-box .ow5-db{ margin-top: 14px; }
  .ox-ft{ justify-content: center; }
}

/* a layer that shows the client's identity elsewhere starts straight with the work */
.ox-box > .ow5-det:first-child > .ow5-db{ margin-top: 0; }

/* ---------------- our-work-slide/sd.css ---------------- */
/* OUR WORK · a Google Ads client opens from the right — five simple versions (see sd.js) */

/* the rail's position bar and the section foot stay as they are behind the panel */
.ox.sd.ox-open #ow5-p-ga .ow5-bar, .ox.sd.ox-open .s2-pane.is-a > .ow5-foot{ opacity: 1; visibility: visible; }

/* the page behind, softened (never dark) */
.sd-veil{ position: fixed; left: 0; right: 0; bottom: 0; top: var(--barh, 108px); z-index: 54; background: rgba(15, 27, 61, .22); }

/* the panel: full height under the header, from the right edge, in the section's own blue */
.sd-panel{
  position: fixed; top: var(--barh, 108px); right: 0; bottom: 0; z-index: 55; width: var(--sd-w, 70%);
  background: #E6EEFA; border-left: 1px solid #C9D8EE; box-shadow: -20px 0 48px -26px rgba(15, 27, 61, .38);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #A9B8CC transparent;
}
.sd-panel .ox-box{ background: transparent; padding: 0 30px 30px; }
.sd-panel .ox-hd{
  position: sticky; top: 0; z-index: 3; margin: 0 -30px; padding: 18px 30px 16px;
  background: #E6EEFA; border-bottom: 1px solid #CFDCEF;
}
.sd-panel .ox-box .ow5-db{ margin-top: 22px; }
.sd-panel .ox-box .ow5-pp, .sd-panel .ox-box .ow5-view.is-lpx, .sd-panel .ox-box .ow5-to{ background: var(--o-paper); }
.sd-panel .ox-ft{ border-top-color: #CFDCEF; }

/* the chosen card stays lit above the softened page */
.ow5-card.sd-lit{ position: relative; z-index: 56; }

/* previous and next client */
.sd-steps{ display: flex; gap: 8px; flex: none; }
.sd-st span{ max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.sd-st.is-n svg{ transform: rotate(180deg); }
.sd-st[disabled]{ opacity: .45; cursor: default; }

/* phone: the full width, with Back */
.sd-panel.is-m{ border-left: 0; box-shadow: none; }
.sd-panel.is-m .ox-box{ padding: 0 14px calc(22px + env(safe-area-inset-bottom)); }
.sd-panel.is-m .ox-hd{ margin: 0 -14px; padding: 10px 14px 12px; gap: 10px; }
.sd-back{
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 6px;
  border: 1px solid #C9D8EE; border-radius: 10px; background: var(--o-paper); color: var(--o-cob); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.sd-back svg, .sd-st svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sd-back:focus-visible{ outline: 2px solid var(--o-act); outline-offset: 2px; }
.sd-panel.is-m .sd-st span{ display: none; }
.sd-panel.is-m .sd-st{ padding: 0 10px; }

/* Landing Pages and Websites in the panel: the preview and its facts on white, as in Google Ads */
.sd-panel .ox-box .ow5-sb, .sd-panel .ox-box .ow5-fx{ background: var(--o-paper); }
.sd-panel .ox-box .ow5-vid{ max-width: 100%; }

/* version 5 (owner 2026-09-28): the rails' position bar in a quiet neutral — off-white thumb with a fine soft-grey
   edge on a very light grey track. Same place, size and behaviour; the edge is drawn inside, so nothing moves. */
.ox.sd[data-sd="steps"] .ow5-bar::before{ background: #DCE1E7; }
.ox.sd[data-sd="steps"] .ow5-bar i{ background: #FAFBFC; box-shadow: inset 0 0 0 1px #C9D0D9; }
.ox.sd[data-sd="steps"] .ow5-bar:hover i{ background: #FFFFFF; box-shadow: inset 0 0 0 1px #B8C0CB; }