/* ==========================================================================
   ow-strips · st.css — Direction 4 "Strips" exactly as given (../ow-five/core.css + t4.css),
   scoped to <div class="t4" id="ow">. Changes: resets scoped; the poster head removed (the site hero
   carries the title and the four colours); the colour bar sticks under the site header.
   The grade layers (2, 3) follow in g.css.
   ========================================================================== */
/* ow-strips · 4.html's shared base (../ow-five/core.css), scoped to the Strips wrapper so the site header, hero and footer are untouched.
   Every direction sets its own tokens; the frames read --f-* so each theme dresses them its own way. */

.t4, .t4 *, .t4 *::before, .t4 *::after{ box-sizing:border-box; }
.t4 :where(img){ display:block; max-width:100%; }
.t4 :where(button){ font:inherit; color:inherit; }
.t4 :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){ margin:0; padding:0; }
.t4 :where(ul,ol){ list-style:none; }
.t4 [hidden]{ display:none!important; }
.t4 .vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .t4 *{ transition-duration:0s!important; animation-duration:0s!important; } }

/* ---------------------------------------------------------------- the page preview frames */
.ow-pv{ min-width:0; }
.ow-phone{ width:100%; max-width:var(--f-w, 330px); margin:0 auto; border:var(--f-bezel-w, 8px) solid var(--f-bezel, #111); border-radius:var(--f-r, 34px);
  background:var(--f-bezel, #111); overflow:hidden; }
.ow-scr{ height:var(--f-h, 560px); overflow-y:auto; overscroll-behavior-y:auto; background:var(--f-sunk, #EEF0F3); border-radius:calc(var(--f-r, 34px) - var(--f-bezel-w, 8px));
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.ow-scr img{ width:100%; height:auto; background:var(--f-sunk, #EEF0F3); }
.ow-scr:focus-visible{ outline:2px solid var(--f-focus, #111); outline-offset:3px; }
.ow-brw{ border:1px solid var(--f-line, #D5D9E0); border-radius:var(--f-br, 12px); overflow:hidden; background:var(--f-sunk, #EEF0F3); }
.ow-brw .ow-scr{ border-radius:0; height:var(--f-bh, 520px); }
.ow-bar{ display:flex; align-items:center; gap:10px; height:34px; padding:0 12px; background:var(--f-bar, #F1F3F6); border-bottom:1px solid var(--f-line, #D5D9E0); }
.ow-dots{ display:flex; gap:5px; } .ow-dots i{ width:9px; height:9px; border-radius:50%; background:var(--f-dot, #CDD3DC); }
.ow-url{ flex:1; max-width:320px; height:22px; border-radius:6px; background:var(--f-url, #fff); font:400 11.5px/22px system-ui,sans-serif; color:#667085; padding:0 10px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ow-nocap{ border-radius:var(--f-br, 12px); overflow:hidden; aspect-ratio:16 / 10; background:var(--f-sunk, #EEF0F3); }
.ow-nocap img{ width:100%; height:100%; object-fit:cover; }
.ow-seg{ display:inline-flex; padding:3px; gap:2px; border-radius:var(--seg-r, 10px); background:var(--seg-bg, #EEF0F3); margin-bottom:12px; }
.ow-seg button{ border:0; background:transparent; height:32px; padding:0 14px; border-radius:calc(var(--seg-r, 10px) - 2px); font-size:13px; font-weight:600;
  color:var(--seg-ink, #667085); cursor:pointer; }
.ow-seg button[aria-pressed="true"]{ background:var(--seg-on, #fff); color:var(--seg-ink-on, #111); box-shadow:0 1px 2px rgba(16,24,40,.12); }

/* a picture flying between two places */
.ow-ghost{ position:fixed; z-index:90; object-fit:cover; pointer-events:none; margin:0; }

/* a row a mouse is dragging */
.is-drag{ cursor:grabbing!important; user-select:none; }
.is-drag *{ pointer-events:none; }


/* DIRECTION 4 · STRIPS — concrete, a condensed cut, four solid service colours.
   Wide screens: a row of tall strips; the chosen one widens in place. Phones: tickets that open downwards. */

.t4{
  --bg:#ECEBE7; --card:#FFFFFF; --ink:#111111; --ink-2:#3B3B3B; --ink-3:#6B6B6B; --line:#D6D4CE;
  --gut:18px; --max:1512px;   /* the homepage's grid (site/grid-105.css): 18px on phones, content capped at 1512px */
  --cond:"Archivo", "Arial Narrow", sans-serif;
  --f-bezel:#111111; --f-sunk:#E6E4DF; --f-line:#111111; --f-bar:#F3F2EF; --f-r:28px; --f-bezel-w:7px; --f-w:272px; --f-h:min(460px, 58svh); --f-bh:380px; --f-br:3px;
  --seg-bg:rgba(255,255,255,.18); --seg-on:#FFFFFF; --seg-ink:#FFFFFF; --seg-ink-on:#111111; --seg-r:3px;
  background:var(--bg); color:var(--ink); font:400 15px/1.5 var(--cond); font-stretch:100%;
}
.t4 [data-s="ga"]{ --c:#1E3FD6; --cw:min(940px, calc(100vw - 2 * var(--gut) - 48px)); }
.t4 [data-s="lp"]{ --c:#E24A1F; --cw:760px; }
.t4 [data-s="web"]{ --c:#0B7A5C; --cw:940px; }
.t4 [data-s="meta"]{ --c:#6A35DB; --cw:680px; }
/* owner 2026-09-28: every lane — titles, strip rows, tickets, the sticky colour bar — on the homepage's own left and right
   lines: the header's formula as site/grid-105.css declares it, max(24px, 1.7vw) above 760px (24.5 @1440, 204 @1920) */
@media (min-width:761px){ .t4{ --gut:clamp(24px, 1.7vw, 72px); } }
.t4 :focus-visible{ outline:3px solid var(--c, #111); outline-offset:2px; }
.t4-w{ max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }

/* the colour bar */
.t4-bar{ position:sticky; top:var(--barh, 0px); z-index:30; background:var(--bg); padding:5px 0; }
.t4-bar ul{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }
.t4-bar a{ display:flex; align-items:center; justify-content:center; height:38px; padding:0 6px; background:var(--card); color:var(--c); text-decoration:none; white-space:nowrap;
  font:800 12.5px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.02em; box-shadow:inset 0 -3px 0 0 var(--c); transition:background-color .25s, color .25s; }
.t4-bar a:hover{ background:#F6F5F2; }
.t4-bar a[aria-current="true"]{ background:var(--c); color:#fff; }
@media (max-width:519px){ .t4-bar ul{ gap:3px; } .t4-bar a{ font-size:12px; font-stretch:62%; letter-spacing:0; padding:0 2px; } }
/* five keys on a phone: a long name takes two short lines rather than being cut */
@media (max-width:519px){ .t4-bar ul:has(> li:nth-child(5)) a{ white-space:normal; text-align:center; line-height:.95; font-size:11.5px; } }
.t4 [data-s="oc"]{ --c:#0F1B3D; }   /* Our Clients: the site header's navy — a controlled blue, apart from the Google Ads blue */
@media (min-width:900px){ .t4-bar a{ height:40px; font-size:14px; } }

/* ---------------------------------------------------------------- a service row */
.t4-sec{ padding:44px 0 38px; scroll-margin-top:calc(var(--barh, 0px) + 16px); }   /* lands where the header's section row lands it */
.t4-sh{ display:grid; gap:6px; margin-bottom:16px; }
/* owner 2026-09-28: the service title bold but settled — 64px at most, 38px on phones (was 108 / 51) */
.t4-sh h2{ font:900 clamp(38px, 9vw, 64px)/.9 var(--cond); font-stretch:62%; text-transform:uppercase; color:var(--c); letter-spacing:-.005em; }
.t4-sh p{ font-size:15px; color:var(--ink-2); max-width:380px; font-stretch:100%; }
@media (min-width:900px){ .t4-sec{ padding:56px 0 64px; } .t4-sh{ grid-template-columns:minmax(0,1fr) minmax(0,380px); align-items:end; gap:32px; margin-bottom:22px; } .t4-sh p{ font-size:16px; padding-bottom:4px; } }

/* ---- phones: tickets */
.t4-row{ display:grid; gap:8px; max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }
.t4-s{ position:relative; background:var(--card); overflow:clip; }
.t4-hd{ display:grid; grid-template-columns:42% minmax(0,1fr); width:100%; height:88px; padding:0; border:0; background:var(--card); text-align:left; cursor:pointer; color:var(--ink); }
.t4-hd .pic{ display:block; height:100%; overflow:hidden; background:var(--f-sunk); }
.t4-hd .pic img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,.7,.2,1); }
.t4-hd .lab{ display:flex; flex-direction:column; justify-content:center; gap:3px; padding:8px 12px; min-width:0; box-shadow:inset 4px 0 0 var(--c); }
.t4-hd .nm{ font:800 18.5px/1 var(--cond); font-stretch:70%; text-transform:uppercase; letter-spacing:.005em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.t4-hd .ty{ font-size:12.5px; color:var(--ink-3); line-height:1.3; font-stretch:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t4-s.is-open .t4-hd .lab{ background:var(--c); color:#fff; box-shadow:none; }
.t4-s.is-open .t4-hd .ty{ color:rgba(255,255,255,.85); }
.t4-x{ display:none; }
.t4-s.is-open .t4-x{ display:block; }
.t4-more{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:46px; margin-top:8px; border:2px solid var(--ink); background:transparent;
  font:800 14px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; }
.t4-more svg{ width:18px; height:18px; }
.t4-more:hover{ background:var(--ink); color:#fff; }

/* an open ticket / strip */
.t4-in{ display:grid; }
.t4-stand{ background:var(--c); padding:18px 14px; display:grid; place-items:center; min-width:0; }
.t4-stand .ow-pv{ width:100%; }
.t4-stand.is-pic{ padding:0; aspect-ratio:4 / 5; }
.t4-stand.is-pic img{ width:100%; height:100%; object-fit:cover; }
.t4-stand .ow-seg{ display:flex; width:max-content; margin:0 auto 12px; }
.t4-tx{ padding:16px 14px 14px; min-width:0; }
.t4-tag{ display:inline-block; padding:5px 8px 4px; background:var(--c); color:#fff; font:800 11px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.06em; }
.t4-tx h3{ margin-top:10px; font:900 clamp(30px, 8vw, 44px)/.9 var(--cond); font-stretch:65%; text-transform:uppercase; outline:none; }
.t4-tx .ty{ margin-top:6px; font-size:15.5px; color:var(--ink-2); font-stretch:100%; }
.t4-tx .dm{ margin-top:2px; font-size:12.5px; color:var(--ink-3); word-break:break-word; font-stretch:100%; }
.t4-lbl{ display:none; }
.t4-facts{ margin-top:16px; display:grid; gap:13px; }
.t4-facts dt{ font:800 12px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.06em; color:var(--c); margin-bottom:7px; }
.t4-facts dd{ margin:0; font-size:14px; font-stretch:100%; }
.t4-facts ul{ display:grid; gap:0; border-top:2px solid var(--ink); }
.t4-facts li{ padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; font-stretch:100%; line-height:1.35; }
.t4-rel{ margin-top:14px; }
.t4-rel > p{ font:800 12px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:7px; }
.t4-rel div{ display:flex; flex-wrap:wrap; gap:6px; }
.t4-rel button{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:2px solid var(--ink); background:transparent; cursor:pointer;
  font:800 13px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.03em; }
.t4-rel button .sq{ width:10px; height:10px; background:var(--c); }
.t4-rel button[data-s="ga"] .sq{ background:#1E3FD6; } .t4-rel button[data-s="lp"] .sq{ background:#E24A1F; } .t4-rel button[data-s="web"] .sq{ background:#0B7A5C; } .t4-rel button[data-s="meta"] .sq{ background:#6A35DB; }
.t4-rel button:hover{ background:var(--ink); color:#fff; }
.t4-nav{ margin-top:16px; display:grid; grid-template-columns:1fr auto 1fr; gap:6px; }
.t4-nav button{ display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; min-height:46px; padding:7px 11px; border:0; background:#F1F0EC; cursor:pointer; text-align:left; }
.t4-nav .nx{ text-align:right; align-items:flex-end; }
/* close: the same light key as Previous and Next, a fine X (owner 2026-09-28: "clear but subtle, not dominant") */
.t4-nav .cl{ width:46px; align-items:center; background:#F1F0EC; color:var(--ink-2); transition:background-color .2s, color .2s; }
.t4-nav .cl svg{ width:16px; height:16px; stroke-width:1.8; }
.t4-nav .cl:hover{ background:#E4E2DB; color:var(--ink); }
.t4-nav small{ font:800 10.5px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.t4-nav span{ max-width:100%; font:800 14px/1.05 var(--cond); font-stretch:75%; text-transform:uppercase; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }   /* the whole name, on two lines when it needs them */
.t4-nav button:disabled{ opacity:.35; cursor:default; }
.t4-nav button:not(:disabled):not(.cl):hover{ background:var(--c); color:#fff; } .t4-nav button:not(:disabled):not(.cl):hover small{ color:#fff; }

/* ---- wide screens: tall strips on one row that runs off the right edge */
@media (min-width:900px){
  .t4-row{ display:flex; gap:9px; height:470px; max-width:none; margin:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab;
    padding:0 max(var(--gut), calc((100% - var(--max)) / 2)); scroll-padding-inline:max(var(--gut), calc((100% - var(--max)) / 2)); }
  .t4-row::-webkit-scrollbar{ display:none; }
  .t4-s{ flex:0 0 160px; height:100%; transition:flex-basis .55s cubic-bezier(.22,.7,.2,1), flex-grow .55s cubic-bezier(.22,.7,.2,1); background:#111; }
  .t4-row.is-few .t4-s{ flex:1 1 0; min-width:160px; }
  .t4-s.is-open, .t4-row.is-few .t4-s.is-open{ flex:0 0 var(--cw); }
  .t4-hd{ position:absolute; inset:0 auto 0 0; width:100%; height:auto; display:block; transition:width .55s cubic-bezier(.22,.7,.2,1); background:#111; }
  .t4-hd .pic{ position:absolute; inset:0; }
  .t4-hd .lab{ position:absolute; left:0; right:0; bottom:0; padding:12px 12px 14px; background:var(--card); box-shadow:inset 0 4px 0 var(--c); transition:opacity .3s; }
  .t4-hd .nm{ font-size:19px; -webkit-line-clamp:3; }
  .t4-hd .ty{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .t4-s:not(.is-open) .t4-hd:hover .pic img{ transform:scale(1.05); }
  .t4-s.is-open .t4-hd{ width:76px; }
  .t4-s.is-open .t4-hd .lab{ opacity:0; pointer-events:none; }
  .t4-x, .t4-s.is-open .t4-x{ display:block; position:absolute; top:0; bottom:0; left:76px; width:calc(var(--cw) - 76px); visibility:hidden; background:var(--card); }
  .t4-s.is-open .t4-x{ visibility:visible; }
  .t4-in{ height:100%; grid-template-columns:auto minmax(0,1fr); }
  .t4-stand{ width:310px; height:100%; padding:18px; }
  .t4-sec[data-s="web"] .t4-stand{ width:520px; }
  .t4-stand.is-pic{ width:260px; aspect-ratio:auto; }
  .t4-tx{ height:100%; padding:0; display:flex; flex-direction:column; min-height:0; }
  .t4-txs{ flex:1; min-height:0; overflow-y:auto; padding:22px 22px 10px; scrollbar-width:thin; }
  .t4-tx h3{ font-size:40px; }
  .t4-facts li{ padding:6px 0; }
  .t4-nav{ flex:none; margin:0; padding:10px 22px 16px; border-top:1px solid var(--line); }
  .t4{ --f-h:410px; --f-bh:340px; --f-w:250px; }
  /* a stand with the Desktop / Mobile switch: the phone is sized to fit under the switch */
  .t4-stand .ow-pv.is-web .ow-phone{ max-width:230px; }
  .t4-stand .ow-pv.is-web .ow-phone .ow-scr{ height:360px; }
  .t4-more{ display:none; }
  .t4-row.has-open .t4-s:not(.is-open) .t4-hd .pic img{ opacity:.55; }
}


/* ==========================================================================
   GOOGLE ADS · THE LANDING PAGE INSIDE THE CLIENT (owner 2026-09-28)
   A client whose landing page we created shows it right here — with Desktop and Mobile icons over it, the
   way Websites switches — and says so plainly; it is never sent to the Landing Pages section.
   ========================================================================== */
.ow-seg-ic button{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  font:800 12.5px/1 var(--cond); font-stretch:75%; letter-spacing:.06em; text-transform:uppercase; }
.ow-seg-ic svg{ width:17px; height:17px; flex:none; }
.t4-lpn{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:9px 12px 9px 9px; border:2px solid var(--ink); background:var(--card); }
.t4-lpn .ic{ flex:none; display:grid; place-items:center; width:36px; height:36px; background:#E24A1F; color:#fff; }
.t4-lpn .ic svg{ width:19px; height:19px; }
.t4-lpn .tx{ min-width:0; }
.t4-lpn b{ display:block; text-wrap:balance; font:800 14.5px/1.05 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); }
.t4-lpn .tx > span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.3; color:var(--ink-3); font-stretch:100%; word-break:break-word; }
@media (min-width:900px){
  .t4-sec[data-s="ga"] .t4-stand.is-lp{ width:clamp(300px, calc(var(--cw) - 76px - 330px), 520px); }
  .t4-sec[data-s="ga"] .t4-s.is-nopage{ --cw:640px; }
}

/* ==========================================================================
   THE SCROLL HINT (owner 2026-09-28: "a clear but subtle scroll hint so users immediately understand that this
   client area is scrollable"). A small black "Scroll" chip at the foot of every page preview — and of the words
   when they run past their column — that leaves for good once the visitor scrolls.
   ========================================================================== */
.ow-phone, .ow-brw{ position:relative; }
.ow-hint{ position:absolute; left:50%; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px 0 8px;
  transform:translateX(-50%); background:#111; color:#fff; pointer-events:none; box-shadow:0 6px 16px rgba(0,0,0,.28);
  font:800 11px/1 var(--cond, "Archivo", sans-serif); font-stretch:75%; letter-spacing:.12em; text-transform:uppercase;
  animation:owHintIn .45s cubic-bezier(.22,.7,.2,1) .75s backwards; transition:opacity .35s, transform .35s; }
.ow-hint b{ font:inherit; }
.ow-hint svg{ width:14px; height:14px; animation:owHintBob 1.5s ease-in-out 1.3s infinite; }
.ow-hint.is-off{ opacity:0; transform:translate(-50%, 6px); }
.ow-hint.is-txt{ position:sticky; left:auto; bottom:8px; display:flex; width:max-content; margin:12px auto 0; transform:none; animation-name:owHintUp; }
.ow-hint.is-txt.is-off{ transform:translateY(6px); }
@keyframes owHintIn{ from{ opacity:0; transform:translate(-50%, 8px); } to{ opacity:1; transform:translate(-50%, 0); } }
@keyframes owHintUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes owHintBob{ 0%, 100%{ transform:translateY(-1px); } 50%{ transform:translateY(2px); } }


/* ==========================================================================
   THE HERO ON THE HOMEPAGE'S LINES (owner 2026-09-28: "the exact same left and right page alignment as my
   original homepage for the entire page"). The inner-page hero draws its white keyline frame 16px from the
   screen edge (gads-hero-rail/hero-rail.css:541); here the frame's outer edge stands on the homepage's own
   left and right lines — site/grid-105.css: max(24px, 1.7vw) capped at 1512px, 18px on phones — and the
   words and the card sheet keep the same inset inside the frame they have on every other page.
   Scoped to these pages (body[data-g]); the shared hero sheets are not edited.
   ========================================================================== */
body[data-g] #overview.sl.sh .k5-cor{
  --wx: max(clamp(24px, 1.7vw, 72px), calc((100% - 1512px) / 2));
  padding-left: max(calc(var(--wx) + 2 * var(--st) + 3px + 32px), calc((100% - 1326px) / 2));
  padding-right: max(calc(var(--wx) + 2 * var(--st) + 3px + 32px), calc((100% - 1326px) / 2));
}
body[data-g] #overview.sl.sh .k5-cor::after{ left: var(--wx); right: var(--wx); }
@media (max-width: 760px){
  body[data-g] #overview.sl.sh .k5-cor,
  body[data-g] #overview.sl.sh.rl .k5-cor{ --wx: 18px; padding-left: calc(var(--wx) + 2 * var(--st) + 3px); padding-right: calc(var(--wx) + 2 * var(--st) + 3px); }
}

/* the client name is focused (tabindex=-1) when a client opens, for screen readers — never outlined (the site draws a
   blue box around any [tabindex]:focus-visible) */
.t4 [tabindex="-1"]:focus, .t4 [tabindex="-1"]:focus-visible{ outline:none !important; box-shadow:none !important; }

/* ==========================================================================
   EVERY PAGE PREVIEW SHOWS IT SCROLLS · owner 2026-09-28 (picks 06 + 08 from lp-scroll-20.html, as on our-work-slide-5)
   The frame carries its own scroll track — on the phone a groove in the black bezel, on the browser a gutter
   beside the page — and an "Explore full page" key sits under the preview. They take the place of the black
   "Scroll" chip on page previews (words that overflow keep their chip). Every page preview has Desktop / Mobile.
   The frame widens by the track, so the page inside keeps its size.
   ========================================================================== */
.has-trk .ow-scr{ scrollbar-width:none; }
.has-trk .ow-scr::-webkit-scrollbar{ display:none; }
.ow-phone.has-trk{ max-width:calc(var(--f-w, 330px) + 12px); }
.ow-phone.has-trk .ow-scr{ margin-right:12px; }
.ow-brw.has-trk{ background:var(--f-bar, #F1F3F6); }
.ow-brw.has-trk .ow-scr{ margin-right:14px; border-right:1px solid var(--f-line, #D5D9E0); }
.ow-trk{ position:absolute; z-index:3; border-radius:4px; cursor:pointer; touch-action:none; }
.ow-phone .ow-trk{ right:3px; top:34px; bottom:34px; width:5px; background:rgba(255,255,255,.2); }
.ow-phone .ow-trk i{ background:#fff; }
.ow-brw .ow-trk{ right:4px; top:42px; bottom:8px; width:6px; background:#DDDAD3; }
.ow-brw .ow-trk i{ background:var(--ink, #111); }
.ow-trk i{ position:absolute; left:0; right:0; top:0; border-radius:4px; cursor:grab; touch-action:none; }
.ow-trk i:active{ cursor:grabbing; }
.ow-brw .ow-trk:hover i{ background:var(--c, #111); }
.ow-more{ display:flex; justify-content:center; margin-top:12px; }
.ow-exp{ display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border:0; background:#F1F0EC; color:var(--ink, #111); cursor:pointer;
  font:800 12.5px/1 var(--cond, "Archivo", sans-serif); font-stretch:75%; letter-spacing:.06em; text-transform:uppercase; transition:background-color .2s, color .2s; }
.ow-exp svg{ width:14px; height:14px; flex:none; }
.ow-exp:hover{ background:var(--c, #111); color:#fff; }
.ow-exp:focus-visible{ outline:2px solid var(--ink, #111); outline-offset:2px; }
@media (min-width:900px){
  /* the open strip is 470px tall: the frame gives the Explore key its row */
  .t4-stand .ow-pv.is-web .ow-phone.has-trk{ max-width:242px; }
  .t4-stand .ow-pv.has-more .ow-phone .ow-scr{ height:326px; }
  .t4-stand .ow-pv.has-more .ow-brw .ow-scr{ height:304px; }
  .t4-stand .ow-pv.has-more .ow-more{ margin-top:8px; }
  .t4-stand .ow-pv.has-more .ow-exp{ min-height:34px; }
  /* Landing Pages and Meta Ads previews now switch to Desktop too: their strip opens as wide as Google Ads' */
  .t4-sec[data-s="lp"] .t4-s:has(.ow-pv.is-web), .t4-sec[data-s="meta"] .t4-s:has(.ow-pv.is-web){ --cw:min(940px, calc(100vw - 2 * var(--gut) - 48px)); }
  .t4-sec[data-s="lp"] .t4-stand:has(.ow-pv.is-web), .t4-sec[data-s="meta"] .t4-stand:has(.ow-pv.is-web){ width:clamp(300px, calc(var(--cw) - 76px - 330px), 520px); }
}


/* ==========================================================================
   VIDEO AUDITS (owner 2026-09-28, relayed by session doctor-c9) — the 12 Google Ads audit videos from the owner's
   YouTube channel, as a row of strips right after Google Ads. The strips are wider and lower than a client's so the
   16:9 thumbnail shows whole above its title; a chosen strip widens where it stands and the video plays on the
   service colour beside its title. No website, no domain.
   ========================================================================== */
.t4 [data-s="vid"]{ --c:#B3261E; --cw:min(1000px, calc(100vw - 2 * var(--gut) - 48px)); --vh:330px; }
.t4-sec[data-s="vid"] .t4-hd .pic{ position:relative; }
.t4-sec[data-s="vid"] .t4-hd .pic::after{ content:""; position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%;
  background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 20px no-repeat;
  box-shadow:0 6px 16px rgba(0,0,0,.3); transition:transform .3s cubic-bezier(.22,.7,.2,1), background-color .3s; }
.t4-sec[data-s="vid"] .t4-hd:hover .pic::after{ transform:scale(1.08); background-color:var(--c); }
.t4-sec[data-s="vid"] .t4-s.is-open .t4-hd .pic::after{ opacity:0; }
.t4-sec[data-s="vid"] .t4-hd .nm{ font-size:16.5px; line-height:1.02; }
/* the opened video */
.t4-stand.is-vid{ display:grid; place-items:center; }
.ow-vid{ width:100%; aspect-ratio:16 / 9; background:#000; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); }
.ow-vid iframe{ display:block; width:100%; height:100%; border:0; }
.t4-sec[data-s="vid"] .t4-tx h3{ font-size:clamp(24px, 6.4vw, 30px); line-height:.98; }
.t4-vm{ margin-top:10px; font-size:13.5px; line-height:1.4; color:var(--ink-3); font-stretch:100%; }
@media (min-width:900px){
  .t4-sec[data-s="vid"] .t4-row{ height:var(--vh); }
  .t4-sec[data-s="vid"] .t4-s{ flex:0 0 430px; }      /* 430 × 242 above the title = the thumbnail's own 16:9 */
  .t4-sec[data-s="vid"] .t4-row.is-few .t4-s{ flex:1 1 0; min-width:430px; }
  .t4-sec[data-s="vid"] .t4-s.is-open, .t4-sec[data-s="vid"] .t4-row.is-few .t4-s.is-open{ flex:0 0 var(--cw); }
  .t4-sec[data-s="vid"] .t4-hd .pic{ position:absolute; inset:0 0 88px 0; height:auto; }   /* the phone rule's height:100% would beat the bottom inset */
  .t4-sec[data-s="vid"] .t4-hd .lab{ height:88px; }
  .t4-sec[data-s="vid"] .t4-hd .nm{ -webkit-line-clamp:2; }
  .t4-sec[data-s="vid"] .t4-hd .ty{ -webkit-line-clamp:1; }
  .t4-sec[data-s="vid"] .t4-stand.is-vid{ width:calc(var(--cw) - 76px - 380px); padding:18px; }
  .t4-sec[data-s="vid"] .ow-vid{ width:min(100%, calc((var(--vh) - 36px) * 16 / 9)); }
  .t4-sec[data-s="vid"] .t4-tx h3{ font-size:22px; line-height:1; }
  .t4-sec[data-s="vid"] .t4-txs{ padding:20px 22px 8px; }
  .t4-sec[data-s="vid"] .t4-vm{ margin-top:6px; }
}