/* Success Stories · generated by [archived] — 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.) */

/* ---------------- [archived] ---------------- */
/* ==========================================================================
   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 ([archived] … surface.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: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; }

/* 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; }

/* ------------------------------------------------ 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: 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-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-rail{ cursor: auto; } }

/* ---------------------------------------------- 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; }

/* ---------------- [archived] ---------------- */
/* ==========================================================================
   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 ([archived]). */
.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-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; } }

/* the section's blue surface: clip (not hidden), positioned — as it has been since the 2026-09-28 rail work */
.ox .s2-surface{ position: relative; overflow: clip; }

/* 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; }

/* Owner decision 2026-10-13: no number may tell a visitor how many clients there are — the tabs' counts are not shown. */
.ow5-tab .ow5-tc { display: none; }