/* ==== our-work.css · layer 1 of 3 ==== */
/* ==========================================================================
   OUR WORK · our-work.css — the "Strips" design, scoped to <div class="t4" id="ow">: resets scoped, no
   poster head (the site hero carries the title and the four colours), the colour bar sticks under the
   site header. Layers 2 and 3 below are its grade layers.
   ========================================================================== */
/* the shared base, 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 (assets/shared/design/grid-wide.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 assets/shared/design/grid-wide.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 (owner 2026-10-06: the Our Work hero the same as every other inner page's). The 2026-09-28 rule
   that stood the hero's frame on the homepage's left and right lines (8px further in on desktop, 10px on
   phones) was removed, so the shared hero (assets/shared/hero-rail/ + inner-hero/) draws its frame exactly
   as on About Us, Management Team, Careers, Legal and Contact Us. The rest of this page keeps the
   homepage's lines.
   ========================================================================== */

/* 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 [archived], 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) — 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; }
}

/* ==========================================================================
   A CLOSED CLIENT IS A CARD · owner 2026-10-01 (picked "07 · Logo Plate" on [archived], and asked for Video Audits
   to follow it). The row stays horizontal and a strip still opens in place; NOTHING of an opened strip changes — every
   rule here that dresses a strip is written under  .t4-s:not(.is-open) . Before this block a closed strip was the
   client's 800 x 1000 photograph seen through a 160 x 470 slot (43% of its width) with a colour line and no sign that
   it opens.
     · the card: the client's logo on its own header colour, the photograph whole (4:5), name + business, and a
       "View work" bar in ink — no colour line, no category colour on a closed card
     · a video card: the thumbnail whole (16:9) with its play key, the title, and a "Watch audit" bar
     · the row runs from screen edge to screen edge (9px) and shows a whole number of cards, never one cut at the right:
       assets/our-work/showcase.js fit() sets --rw from --rmax (the widest a card may be). 7 clients / 4 videos at 1440.
     · the closed row is only as tall as its cards (--rh); it takes the opened height (470, or --vh for a video) while a
       strip is open
     · under the row (.t4-ft): how many there are, which are on screen, and two keys that move it a screenful
     · phones: the ticket keeps opening downwards in place; closed, it shows the photograph whole (80 x 100), the name,
       "View work", and the logo at the right
   .t4-cd wraps the closed card's parts and is display:contents once the strip opens.
   ========================================================================== */
.t4-cd{ display:contents; }
.t4-lg, .t4-go, .t4-ft{ display:none; }
.t4-go svg, .t4-ft svg{ display:block; flex:none; width:16px; height:16px; }
.t4-lg img{ display:block; width:auto; height:var(--lh); max-width:78%; max-height:80%; object-fit:contain; }
/* optical balance, as in Our Clients: a square or tall logo is drawn taller than a wide one */
.t4-lg.is-sq img{ height:calc(var(--lh) * 1.45); }
.t4-lg.is-md img{ height:calc(var(--lh) * 1.18); }
.t4-lg.is-ini{ background:#F2F1ED; }
.t4-lg.is-ini b{ font:900 calc(var(--lh) * .62)/1 var(--cond); font-stretch:70%; letter-spacing:.03em; color:var(--ink); }

@media (min-width:900px){
  .t4-row{ --rg:9px; --rp:9px; --rmax:200px; --rw:200px; --lh:30px; --rh:calc(var(--rw) * 1.25 + 216px);
    gap:var(--rg); padding:0 var(--rp); scroll-padding-inline:var(--rp); height:min(470px, var(--rh)); transition:height .45s cubic-bezier(.22,.7,.2,1); }
  .t4-row.has-open{ height:470px; }
  .t4-row:not(.has-open):not(.is-drag){ scroll-snap-type:x proximity; }
  .t4-sec[data-s="vid"] .t4-row{ --rmax:352px; --rh:calc(var(--rw) * .5625 + 150px); height:var(--rh); }
  .t4-sec[data-s="vid"] .t4-row.has-open{ height:var(--vh); }

  .t4-s{ scroll-snap-align:start; }
  .t4-s:not(.is-open), .t4-row.is-few .t4-s:not(.is-open),
  .t4-sec[data-s="vid"] .t4-s:not(.is-open), .t4-sec[data-s="vid"] .t4-row.is-few .t4-s:not(.is-open){ flex:0 0 var(--rw); min-width:0; background:transparent; border-radius:6px; }
  .t4-hd{ overflow:hidden; }
  .t4-s:not(.is-open) .t4-hd{ background:transparent; text-align:left; }
  .t4-s:not(.is-open) .t4-cd{ display:flex; flex-direction:column; position:relative; width:var(--rw); height:100%; overflow:hidden; background:var(--card); color:var(--ink); }
  .t4-s:not(.is-open) .t4-lg{ display:grid; place-items:center; flex:none; height:70px; background:var(--lb, #FFFFFF); border-bottom:1px solid var(--line); overflow:hidden; }
  .t4-s:not(.is-open) .t4-hd .pic{ position:relative; inset:auto; flex:none; width:100%; height:auto; aspect-ratio:4 / 5; }
  .t4-sec[data-s="vid"] .t4-s:not(.is-open) .t4-hd .pic{ aspect-ratio:16 / 9; }
  .t4-s:not(.is-open) .t4-hd .lab{ position:static; display:block; height:auto; padding:14px 12px 0; background:none; box-shadow:none; }
  .t4-s:not(.is-open) .t4-hd .nm{ font-size:18px; line-height:1.02; -webkit-line-clamp:2; }
  .t4-s:not(.is-open) .t4-hd .ty{ margin-top:5px; -webkit-line-clamp:2; }
  .t4-sec[data-s="vid"] .t4-s:not(.is-open) .t4-hd .nm{ font-size:16.5px; -webkit-line-clamp:3; }
  .t4-sec[data-s="vid"] .t4-s:not(.is-open) .t4-hd .ty{ -webkit-line-clamp:1; }
  /* the open signal: words, in ink, in the same place on every card */
  .t4-s:not(.is-open) .t4-go{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; margin-top:auto; height:46px; padding:0 12px;
    border-top:1px solid var(--line); font:700 12.5px/1 var(--cond); font-stretch:100%; letter-spacing:.06em; text-transform:uppercase;
    transition:background-color .2s, color .2s, border-color .2s; }
  .t4-s:not(.is-open) .t4-go svg{ transition:transform .25s; }
  .t4-s:not(.is-open) .t4-hd:hover .t4-go{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .t4-s:not(.is-open) .t4-hd:hover .t4-go svg{ transform:translateX(3px); }

  .t4-ft{ display:flex; align-items:center; gap:14px; max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding:12px var(--gut) 0; font-size:13.5px; line-height:1; color:var(--ink-3); }
  .t4-ft b{ font-weight:700; color:var(--ink); }
  .t4-ft .at{ margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; }
  .t4-ft button{ display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; background:var(--card); color:var(--ink); cursor:pointer; transition:background-color .2s, color .2s; }
  .t4-ft button:hover{ background:var(--ink); color:#fff; }
  .t4-ft button:disabled{ opacity:.4; cursor:default; background:var(--card); color:var(--ink); }
  .t4-ft button + button{ margin-left:-10px; }
}

@media (max-width:899px){
  .t4-row{ --lh:24px; }
  .t4-s:not(.is-open) .t4-hd{ display:block; height:auto; background:transparent; text-align:left; }
  .t4-s:not(.is-open) .t4-cd{ display:grid; grid-template-columns:80px minmax(0,1fr) 92px; grid-template-rows:1fr auto; min-height:100px; background:var(--card); color:var(--ink); }
  .t4-s:not(.is-open) .t4-hd .pic{ grid-column:1; grid-row:1 / 3; width:80px; height:100px; }
  .t4-s:not(.is-open) .t4-hd .lab{ grid-column:2; grid-row:1; justify-content:flex-end; padding:10px 12px 0; background:none; box-shadow:none; }
  .t4-s:not(.is-open) .t4-go{ display:flex; align-items:center; gap:7px; grid-column:2; grid-row:2; padding:8px 12px 12px; font:700 12px/1 var(--cond); font-stretch:100%; letter-spacing:.06em; text-transform:uppercase; }
  .t4-s:not(.is-open) .t4-lg{ display:grid; place-items:center; grid-column:3; grid-row:1 / 3; background:var(--lb, #FFFFFF); border-left:1px solid var(--line); overflow:hidden; }
  .t4-sec[data-s="vid"] .t4-s:not(.is-open) .t4-cd{ grid-template-columns:150px minmax(0,1fr); }
  .t4-sec[data-s="vid"] .t4-s:not(.is-open) .t4-hd .pic{ width:150px; height:100%; min-height:100px; }
}

/* ==== our-work.css · layer 2 of 3 ==== */
/* ==========================================================================
   OUR CLIENTS · shared atoms for options A, B, C (inside <div class="t4 oc …">, so the Strips tokens apply:
   concrete ground, white cards, Archivo condensed, ink #111, one controlled blue accent).
   A card holds three things only — the logo, the name, the business type. No link, no domain, no text beyond.
   ========================================================================== */
.oc{ --oc-blue:#1E3FD6; --oc-key:#FFFFFF; --lh:44px; }
.oc .oc-card{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--card); color:var(--ink); }
/* the logo stands on its own site's header colour; a client without a logo shows its initials */
.oc .oc-logo{ display:grid; place-items:center; flex:none; background:var(--lb, #FFFFFF); overflow:hidden; }
.oc .oc-logo img{ display:block; width:auto; height:var(--lh); max-width:82%; max-height:86%; object-fit:contain; }
/* optical balance: a square or tall logo is drawn taller than a wide one, so every logo reads at the same weight */
.oc .oc-logo.is-sq img{ height:calc(var(--lh) * 1.45); }
.oc .oc-logo.is-md img{ height:calc(var(--lh) * 1.18); }
.oc .oc-logo.is-ini{ background:#F2F1ED; }
.oc .oc-logo.is-ini b{ font:900 calc(var(--lh) * .5)/1 var(--cond); font-stretch:70%; letter-spacing:.03em; color:var(--ink); }
.oc .oc-tx{ display:block; min-width:0; }
.oc .oc-nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font:800 15.5px/1.05 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
.oc .oc-ty{ display:block; margin-top:4px; font-size:12.5px; line-height:1.3; color:var(--ink-3); font-stretch:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* the keys every option uses to choose an industry: the Strips key, the page's blue when chosen */
.oc .oc-key, .oc .ocb-tab{ flex:none; height:36px; padding:0 14px; border:0; background:var(--oc-key); color:var(--ink); cursor:pointer;
  font:800 13px/1 var(--cond); font-stretch:75%; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  transition:background-color .2s, color .2s; }
.oc .oc-key:hover, .oc .ocb-tab:hover{ background:#F6F5F2; }
.oc .oc-key[aria-pressed="true"], .oc .ocb-tab[aria-pressed="true"]{ background:var(--oc-blue); color:#FFFFFF; }
.oc :focus-visible{ outline:3px solid var(--oc-blue); outline-offset:2px; }

/* a sideways row of keys on a phone: it scrolls, the next key cut at the screen edge */
@media (max-width:560px){
  .oc .oc-keyrow{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut);
    scroll-padding-inline:var(--gut); }
  .oc .oc-keyrow::-webkit-scrollbar{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .oc *{ transition-duration:0s!important; } }

/* ==== our-work.css · layer 3 of 3 ==== */
/* ==========================================================================
   OUR CLIENTS · A · GRID
   One compact grid of every client — tile cards, the logo on its plate above the name and the business type.
   Industry keys above filter the grid in place; three rows show first and the rest on request.
   Phones: two tiles to a row, the keys scroll sideways.
   ========================================================================== */
.oc-a .oca-keys{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.oc-a .oca-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:10px; }
.oc-a .oc-c.is-hid{ display:none; }
.oc-a .oca-grid .oc-card{ transition:transform .3s cubic-bezier(.22,.7,.2,1), box-shadow .3s; }
.oc-a .oca-grid .oc-logo{ height:88px; --lh:42px; border-bottom:1px solid #EDEBE6; }
.oc-a .oca-grid .oc-tx{ padding:12px 14px 14px; }
@media (hover:hover){
  .oc-a .oca-grid .oc-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(17,17,17,.4); }
}
.oc-a .oca-morew{ display:flex; justify-content:center; }
.oc .oc-a .oca-more, .oc-a .oca-more{ display:flex; width:auto; min-width:260px; padding:0 22px; margin-top:14px; }
.oc-a .oca-more[hidden]{ display:none; }

@media (max-width:560px){
  .oc-a .oca-keys{ flex-wrap:nowrap; margin-bottom:12px; }
  .oc-a .oca-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .oc-a .oca-grid .oc-logo{ height:72px; --lh:34px; }
  .oc-a .oca-grid .oc-tx{ padding:10px 11px 12px; }
  .oc-a .oc-nm{ font-size:14.5px; }
  .oc-a .oc-ty{ font-size:12px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .oc-a .oca-more{ width:100%; }
}

/* ==========================================================================
   PRINT · the hero's card row (2026-10-06, as on About Us)
   The hero cards are links whose cue label (.cc-tx) is visually hidden; in
   Chrome's print layout those labels widen the page, which then prints
   shrunk to ~67%. The label adds nothing on paper, so it is not printed.
   ========================================================================== */
@media print{
  #overview.ih #q7 .cc-tx{ display: none; }
}