/* ==== showcase.css · layer 1 of 2 ==== */
/* HOMEPAGE HERO · ALL WORK SHOWCASE — the gallery, the centred lightbox and the Client Wall (originally generated by a script that has since been archived; edit this file directly). */
#hx .aw5-host, #hx .s05-ov, .aw5-host, .s05-ov{ font:15px/1.5 var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; }
#hx .aw5-host *, #hx .aw5-host *::before, #hx .aw5-host *::after, #hx .s05-ov *, #hx .s05-ov *::before, #hx .s05-ov *::after, .aw5-host *, .aw5-host *::before, .aw5-host *::after, .s05-ov *, .s05-ov *::before, .s05-ov *::after{ box-sizing:border-box; }
#hx .aw5-host button, #hx .s05-ov button, .aw5-host button, .s05-ov button{ font:inherit; color:inherit; }
html.aw5-lock, html.aw5-lock body{ overflow:hidden !important; }
#hx .s05-ov, .s05-ov{ z-index:2000 !important; }
#hx .aw5-host, #hx .s05-ov, .aw5-host, .s05-ov{
  --ink:#0B0D12; --ink-2:#3A414C; --ink-3:#767E8B; --ink-4:#A7AEB9;
  --line:#E3E6EB; --line-2:#EFF1F4; --paper:#FFFFFF; --pale:#FCFDFF; --mist:#F6F8FC; --ground:#F4F7FC; --ground-2:#EDF2F9;
  --accent:#1A73E8; --accent-ink:#1663CE; --accent-soft:#EAF1FE; --navy:#0F1B3D; --theme:#004594;
  --sheet:#C6D9F4; --shelf:#E6EFFA; --shelf-edge:#D3DFF0; --tab-rule:#0760C6; --tab-ring:#003F8A; --tab-edge-h:#9DBCE6;
  --star:#F4B400; --good:#188038;
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --hdr:56px;             
  --pad:12px;             
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:900px){#hx .aw5-host, #hx .s05-ov, .aw5-host, .s05-ov{ --hdr:64px; --pad:22px; }}








#hx .lab-ib, .lab-ib{ width:44px; height:44px; flex:none; display:inline-grid; place-items:center; border-radius:50%; border:0; background:#fff; color:var(--ink); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); -webkit-tap-highlight-color:transparent; }
#hx .lab-ib svg, .lab-ib svg{ width:20px; height:20px; }
#hx .lab-ib[disabled], .lab-ib[disabled]{ opacity:.35; cursor:default; }
#hx .lab-ib.ghost, .lab-ib.ghost{ background:transparent; box-shadow:none; }
#hx .lab-ic, .lab-ic{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }


#hx .lab-seg, .lab-seg{ display:inline-flex; padding:3px; border-radius:12px; background:var(--ground-2); gap:2px; }
#hx .lab-seg button, .lab-seg button{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 13px; border:0; border-radius:9px; background:transparent; font-weight:650; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
#hx .lab-seg button svg, .lab-seg button svg{ width:17px; height:17px; }
#hx .lab-seg button[aria-pressed="true"], .lab-seg button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(11,13,18,.08), inset 0 0 0 1px var(--line); }
#hx .lab-mono, .lab-mono{ --mh:210; width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; font:750 13px/1 var(--sans); letter-spacing:.02em; color:hsl(var(--mh) 55% 30%); background:hsl(var(--mh) 60% 93%); }
#hx .lab-mono.sm, .lab-mono.sm{ width:30px; height:30px; border-radius:8px; font-size:11px; }
#hx .lab-mono.lg, .lab-mono.lg{ width:52px; height:52px; border-radius:14px; font-size:16px; }


















#hx .lab-player, .lab-player{ position:relative; aspect-ratio:16/9; background:#0B0D12; border-radius:14px; overflow:hidden; color:#fff; container-type:inline-size; user-select:none; -webkit-user-select:none; }
#hx .lab-player.fs, .lab-player.fs{ position:fixed; inset:0; z-index:1000; border-radius:0; aspect-ratio:auto; }
#hx .lab-player .poster, .lab-player .poster{ position:absolute; inset:0; cursor:pointer; }

#hx .lab-player .stage, .lab-player .stage{ position:absolute; inset:0; background:#F8FAFD; display:none; }
#hx .lab-player.started .stage, .lab-player.started .stage{ display:block; }
#hx .lab-player.started .poster, .lab-player.started .poster{ display:none; }
#hx .lab-player .stage svg, .lab-player .stage svg{ width:100%; height:100%; }
#hx .lab-player .sub, .lab-player .sub{ position:absolute; left:50%; bottom:58px; translate:-50% 0; max-width:88%; text-align:center; font:600 clamp(11px,3.3cqi,16px)/1.3 var(--sans); background:rgba(11,13,18,.78); padding:.4em .7em; border-radius:6px; }
#hx .lab-player .ctl, .lab-player .ctl{ position:absolute; left:0; right:0; bottom:0; padding:22px 10px 6px; background:linear-gradient(transparent, rgba(0,0,0,.55)); display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:4px 6px; opacity:1; transition:opacity .3s; }
#hx .lab-player.started.idle .ctl, .lab-player.started.idle .ctl{ opacity:0; }
#hx .lab-player:not(.started) .ctl, .lab-player:not(.started) .ctl{ display:none; }
#hx .lab-player .bar, .lab-player .bar{ grid-column:1/-1; height:18px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
#hx .lab-player .bar i, .lab-player .bar i{ display:block; height:4px; width:100%; background:rgba(255,255,255,.3); border-radius:2px; position:relative; }
#hx .lab-player .bar b, .lab-player .bar b{ position:absolute; left:0; top:0; bottom:0; background:#E62117; border-radius:2px; }
#hx .lab-player .bar b::after, .lab-player .bar b::after{ content:''; position:absolute; right:-6px; top:-4px; width:12px; height:12px; border-radius:50%; background:#E62117; }
#hx .lab-player .bar u, .lab-player .bar u{ position:absolute; top:-1px; width:3px; height:6px; background:rgba(255,255,255,.9); }
#hx .lab-player .ctl button, .lab-player .ctl button{ width:40px; height:40px; border:0; background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer; border-radius:8px; }
#hx .lab-player .ctl button svg, .lab-player .ctl button svg{ width:22px; height:22px; }

#hx .lab-player .end, .lab-player .end{ position:absolute; inset:0; background:rgba(11,13,18,.86); display:none; place-content:center; justify-items:center; gap:12px; text-align:center; padding:16px; }
#hx .lab-player.ended .end, .lab-player.ended .end{ display:grid; }
#hx .lab-player .end p, .lab-player .end p{ margin:0; font:600 14px/1.35 var(--sans); max-width:30em; }
































































































@keyframes lab-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
#hx .lab-in, .lab-in{ animation:lab-in .32s var(--ease) both; }



#hx .s05 [data-i], .s05 [data-i]{ appearance:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; position:relative; transition:box-shadow .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); }
#hx .s05 [data-i]:focus-visible, .s05 [data-i]:focus-visible{ outline:2px solid var(--tab-ring); outline-offset:2px; }
#hx .s05 [data-i].is-last, .s05 [data-i].is-last{ box-shadow:inset 0 0 0 2px var(--tab-edge-h); }
@media (hover:hover) and (pointer:fine){#hx .s05 [data-i]:hover, .s05 [data-i]:hover{ background:#F7FAFE; box-shadow:inset 0 0 0 1px var(--tab-edge-h); }}
#hx .s05 .s05-thumbs, .s05 .s05-thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#hx .s05 .s05-g, .s05 .s05-g{ display:grid; gap:4px; align-content:start; padding:6px 6px 10px; border-radius:var(--r-md); background:#fff; }

#hx .s05 .s05-g b, .s05 .s05-g b{ padding:0 4px; font-size:13.5px; line-height:1.3; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#hx .s05 .s05-g span, .s05 .s05-g span{ padding:0 4px; font-size:12px; color:var(--ink-3); }
@media (min-width:900px){#hx .s05 .s05-thumbs, .s05 .s05-thumbs{ grid-template-columns:repeat(3,1fr); gap:12px; }
#hx .s05 .s05-g, .s05 .s05-g{ padding:8px 8px 12px; }
#hx .s05 .s05-g b, .s05 .s05-g b{ font-size:15px; }
#hx .s05 .s05-g span, .s05 .s05-g span{ font-size:13px; }}
@media (min-width:1200px){#hx .s05 .s05-thumbs, .s05 .s05-thumbs{ grid-template-columns:repeat(4,1fr); }}











































#hx .s05-ov, .s05-ov{ position:fixed; inset:0; z-index:80; }
#hx .s05-scrim, .s05-scrim{ position:absolute; inset:0; background:rgba(11,13,18,.58); opacity:0; transition:opacity .26s var(--ease); cursor:pointer; }
#hx .s05-ov.in .s05-scrim, .s05-ov.in .s05-scrim{ opacity:1; }
#hx .s05-box, .s05-box{ position:absolute; left:10px; right:10px; top:52px; bottom:10px; display:flex; flex-direction:column; background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 20px 60px rgba(15,27,61,.18); opacity:0; transform:translateY(10px) scale(.985); transition:opacity .26s var(--ease), transform .3s var(--ease); outline:none; }
#hx .s05-ov.in .s05-box, .s05-ov.in .s05-box{ opacity:1; transform:none; }
@media (min-width:900px){#hx .s05-box, .s05-box{ left:50%; right:auto; top:40px; bottom:40px; width:min(1080px, calc(100vw - 80px)); translate:-50% 0; }}
@media (min-width:900px) and (min-height:1000px){#hx .s05-box, .s05-box{ top:50%; bottom:auto; height:920px; translate:-50% -50%; }}
#hx .s05-bar, .s05-bar{ flex:none; display:flex; align-items:center; gap:8px; padding:8px 8px 8px 16px; border-bottom:1px solid var(--line); }
#hx .s05-tt, .s05-tt{ flex:1; min-width:0; }
#hx .s05-tt h3, .s05-tt h3{ margin:0; font-size:15.5px; line-height:1.25; font-weight:750; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (min-width:900px){#hx .s05-tt h3, .s05-tt h3{ display:block; -webkit-line-clamp:unset; white-space:nowrap; text-overflow:ellipsis; }}
#hx .s05-sub, .s05-sub{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; margin-top:2px; }
#hx .s05-sub i, .s05-sub i{ font-style:normal; color:var(--ink-4); }
#hx .s05-tools, .s05-tools{ display:flex; }
#hx .s05-tools:empty, .s05-tools:empty{ display:none; }
@media (min-width:900px){#hx .s05-bar, .s05-bar{ padding:10px 12px 10px 24px; gap:14px; }
#hx .s05-tt h3, .s05-tt h3{ font-size:17px; }
#hx .s05-sub, .s05-sub{ font-size:13px; }}
#hx .s05-stage, .s05-stage{ position:relative; flex:1; min-height:0; display:flex; background:var(--ground); }
#hx .s05-sc, .s05-sc{ flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; }
#hx .s05-box.swipes .s05-sc, .s05-box.swipes .s05-sc{ touch-action:pan-y; }
#hx .s05-in, .s05-in{ margin:auto 0; width:100%; padding:14px 12px 18px; }
#hx .s05-in.from-r, .s05-in.from-r{ animation:s05-r .28s var(--ease) both; }
#hx .s05-in.from-l, .s05-in.from-l{ animation:s05-l .28s var(--ease) both; }
@keyframes s05-r{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes s05-l{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
#hx .s05-side, .s05-side{ display:none; }
@media (min-width:900px){#hx .s05-in, .s05-in{ padding:24px 84px; }
#hx .s05-side, .s05-side{ display:grid; place-items:center; position:absolute; top:50%; translate:0 -50%; z-index:2; width:52px; height:52px; border-radius:50%; border:0; background:#fff; color:var(--ink); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); }
#hx .s05-side svg, .s05-side svg{ width:24px; height:24px; }
#hx .s05-side[disabled], .s05-side[disabled]{ opacity:.35; cursor:default; }
#hx .s05-pv, .s05-pv{ left:16px; }
#hx .s05-nx, .s05-nx{ right:16px; }
@media (hover:hover){#hx .s05-side:not([disabled]):hover, .s05-side:not([disabled]):hover{ background:var(--accent-soft); color:var(--accent-ink); box-shadow:none; }}}
#hx .s05-foot, .s05-foot{ flex:none; display:flex; align-items:center; gap:6px; padding:8px; border-top:1px solid var(--line); background:#fff; }
#hx .s05-film, .s05-film{ flex:1; min-width:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:3px; overscroll-behavior-x:contain; }
#hx .s05-film::-webkit-scrollbar, .s05-film::-webkit-scrollbar{ display:none; }
#hx .s05-fi, .s05-fi{ flex:none; position:relative; width:44px; height:56px; padding:0; border:0; border-radius:8px; overflow:hidden; background:var(--ground-2); cursor:pointer; opacity:.62; transition:opacity .2s var(--ease), box-shadow .2s var(--ease); }
#hx .s05-fi.gap, .s05-fi.gap{ margin-left:10px; }
#hx .s05-fi svg, .s05-fi svg{ width:100%; height:100%; }
#hx .s05-fi.on, .s05-fi.on{ opacity:1; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent); }
@media (hover:hover){#hx .s05-fi:not(.on):hover, .s05-fi:not(.on):hover{ opacity:.9; }}
#hx .s05-fi:focus-visible, .s05-fi:focus-visible{ outline:2px solid var(--tab-ring); outline-offset:2px; }
@media (min-width:900px){#hx .s05-foot, .s05-foot{ padding:10px 16px; }
#hx .s05-bpv, #hx .s05-bnx, .s05-bpv, .s05-bnx{ display:none; }
#hx .s05-film, .s05-film{ gap:8px; justify-content:safe center; }}
#hx .k-audits .s05-fi, .k-audits .s05-fi{ width:78px; height:44px; }

#hx .k-audits .s05-fi .cap, #hx .k-audits .s05-fi .dur, .k-audits .s05-fi .cap, .k-audits .s05-fi .dur{ display:none; }
#hx .k-audits .s05-fi .pl, .k-audits .s05-fi .pl{ right:18%; width:22px; }

#hx .k-reviews .s05-fi, #hx .k-portfolio .s05-fi, .k-reviews .s05-fi, .k-portfolio .s05-fi{ width:44px; height:44px; border-radius:50%; background:transparent; }
#hx .k-reviews .s05-fi .lab-mono, .k-reviews .s05-fi .lab-mono{ width:44px; height:44px; border-radius:50%; font-size:12.5px; }
#hx .k-portfolio .s05-fi, .k-portfolio .s05-fi{ border-radius:10px; background:var(--ground-2); }

#hx .k-portfolio .s05-fi.on, .k-portfolio .s05-fi.on{ background:var(--accent-soft); }

#hx .s05-ov h4, .s05-ov h4{ margin:0 0 8px; font-size:14.5px; font-weight:750; }











@media (min-width:900px){
#hx .k-audits .s05-in, .k-audits .s05-in{ padding:24px 76px; }
}

















@media (min-width:900px){








#hx .k-landing .s05-in, #hx .k-websites .s05-in, .k-landing .s05-in, .k-websites .s05-in{ padding:20px 84px; }}

#hx .s05-ov .s05-chips, .s05-ov .s05-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
#hx .s05-ov .s05-chips button, .s05-ov .s05-chips button{ min-height:44px; padding:0 14px; border:0; border-radius:11px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); font-weight:650; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
#hx .s05-ov .s05-chips button[aria-pressed="true"], .s05-ov .s05-chips button[aria-pressed="true"]{ background:var(--navy); color:#fff; box-shadow:none; }
@media (hover:hover) and (pointer:fine){#hx .s05-ov .s05-chips button[aria-pressed="false"]:hover, .s05-ov .s05-chips button[aria-pressed="false"]:hover{ background:#F7FAFE; box-shadow:inset 0 0 0 1px var(--tab-edge-h); }}

















#hx .s05-ov .lab-player .sub, #hx .s05-ov .lab-player .end p, .s05-ov .lab-player .sub, .s05-ov .lab-player .end p{ display:none; }




#hx .s05 .s05-thumbs, .s05 .s05-thumbs { margin-top:0; }
@media (max-width:899px){#hx .s05-in, .s05-in{ margin:0; }}

#hx .aw5-host *, #hx .s05-ov *, .aw5-host *, .s05-ov *{ scrollbar-width:none; }
#hx .aw5-host *::-webkit-scrollbar, #hx .s05-ov *::-webkit-scrollbar, .aw5-host *::-webkit-scrollbar, .s05-ov *::-webkit-scrollbar{ width:0; height:0; display:none; }

















@keyframes r-wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(4px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }









@keyframes r-breathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }









@keyframes r-nudge{ 0%,100%{ translate:0 0; } 30%{ translate:0 14px; } 55%{ translate:0 0; } 75%{ translate:0 6px; } }




@keyframes r-tap{ 0%,55%,100%{ transform:translateY(0); } 70%{ transform:translateY(-3px); } 85%{ transform:translateY(1px); } }

/* 2026-09-25 (Chat 2 re-test FIX 3) — the empty-state line.
   A tab with no genuine mapped content shows one truthful sentence instead of a blank
   white panel. Sized and coloured as the panel's own supporting text, centred in the
   space a card grid would occupy, so the tab keeps its shape and nothing shifts. */
.s05 .s05-empty{
  margin: 0;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: #5A6B82;
}

/* ==== showcase.css · layer 2 of 2 ==== */
/* ==========================================================================
   home-allwork-05 (LIVE, copied from hero-aw05) · showcase.css — the SIX approved-05 tabs composed into the live
   hero's work region, to the finish of All Work + Google Ads (never touched).
   What those two do, and what every tab here now does too:
     · one fixed-height band under the category line (the card never balloons)
     · items are FILLED PLATES (--card #F1F5FC, 10px, no border; an edge on hover)
     · the row runs out of the card's right edge; round ‹ › (the hero's own
       38px buttons) sit on the band's middle — one direction of travel
     · name [archived]700 ink, category 13 mute — the hero's own type
   Each category keeps its own item shape (shelf / quotes / wall / screens /
   browsers / campaigns). Nothing is added: same content, same lightbox.
   Weight: "#hx .aw5-host …" (1,2+,0) outranks the bundle's "#hx .s05 …".
   ========================================================================== */
#hx .aw5-host { --bh: 180px; --ink: #0E1E35; --mute: #5A6678; --plate: var(--card, #F1F5FC); position: relative; }
#hx .aw5-host .aw5-panel { position: relative; }

/* ---- the band: every category's list becomes ONE horizontal row ---------- */
#hx .aw5-host :is(.s05-thumbs, .s05-wall, .s05-letters, .s05-pages, .s05-camps) {
  display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-template-rows: var(--bh);
  gap: 12px; columns: auto !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 !important;
}
#hx .aw5-host :is(.s05-thumbs, .s05-wall, .s05-letters, .s05-pages, .s05-camps)::-webkit-scrollbar { display: none; }
#hx .aw5-host :is(.s05-g, .s05-rc, .s05-lt, .s05-pg, .s05-camp) {
  scroll-snap-align: start; height: var(--bh); margin: 0 !important; min-width: 0;
  background: var(--plate) !important; border: 1px solid transparent; border-radius: 10px !important; box-shadow: none !important;
  transition: border-color .3s ease, background-color .3s ease; overflow: hidden;
}
#hx .aw5-host :is(.s05-g, .s05-rc, .s05-lt, .s05-pg):hover { border-color: #A9C5EA; }
#hx .aw5-host :is(.s05-g, .s05-rc, .s05-lt, .s05-pg).is-last { border-color: var(--brand, #0760C6); background: #fff !important; }
/* the hero's own type for every name + category line */
#hx .aw5-host :is(.s05-g, .s05-pg) b { font-size: 15px !important; font-weight: 700; color: var(--ink); line-height: 1.25 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; -webkit-line-clamp: unset !important; padding: 0 !important; }
#hx .aw5-host :is(.s05-g, .s05-pg) > span:last-child { font-size: 13px !important; color: var(--mute) !important; line-height: 1.3 !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding: 0 !important; }

/* ---- Google Ads Audits · a video shelf: 16:9 frame, name + category ------ */
#hx .aw5-host .s05-thumbs { grid-auto-columns: 228px; }
#hx .aw5-host .s05-g { display: flex !important; flex-direction: column; gap: 0 !important; padding: 8px 8px 0 !important; text-align: left; }

#hx .aw5-host .s05-g b, #hx .aw5-host .s05-g > span:last-child { padding: 0 4px !important; }

/* ---- Client Reviews · equal quote plates, each in the format it arrived -- */






/* video review: the frame shrinks to a strip so the plate keeps its height */




/* WhatsApp: the chat ground stays, inside the plate's own corners */





/* ---- Client Wall · one continuous brand wall: three rows of client plates, no A–Z grouping ---- */
#hx .aw5-host .aw5-wall {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-columns: 232px;
  height: var(--bh); gap: 10px 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
#hx .aw5-host .aw5-wall::-webkit-scrollbar { display: none; }
#hx .aw5-host .aw5-cl {
  scroll-snap-align: start; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 11px; align-content: center; padding: 0 12px; background: var(--plate); border-radius: 10px;
}
#hx .aw5-host .aw5-cl .lab-mono { grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; border-radius: 7px; font-size: 11px; }
#hx .aw5-host .aw5-cl b { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hx .aw5-host .aw5-cl small { font-size: 12px; color: var(--mute); line-height: 1.25; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Landing Pages · page screens: tall portrait tiles, the label on the screen's foot */
   /* 8 screens fill the lane: never a hole */



#hx .aw5-host .s05-pages:not(.s05-sites) .s05-pg :is(b, span:last-child) { position: absolute; left: 12px; right: 12px; background: #fff; padding: 0 8px !important; }



/* ---- Websites · browser tiles: a slim window bar over a wide frame ------- */







/* ---- Meta Ads · campaign plates: the client, then its three creatives ----- */







#hx .aw5-host .s05-camp:has(.s05-cr.is-last) { background: #fff !important; }


/* ---- ‹ › — the hero's own round buttons, on the band's middle ------------- */
#hx .aw5-host .aw5-nav { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 3; display: flex; justify-content: space-between; pointer-events: none; }
#hx .aw5-host .aw5-nav button {
  pointer-events: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  transform: translate(-8px, -50%); border: 1px solid #C4D6EE; background: #fff; color: var(--brand, #0760C6); transition: opacity .35s ease;
}
#hx .aw5-host .aw5-nav button + button { transform: translate(8px, -50%); }
#hx .aw5-host .aw5-nav svg { width: 16px; height: 16px; }
#hx .aw5-host .aw5-nav button:disabled { opacity: 0; pointer-events: none; }

/* ---- phone: the same band, one item + a peek of the next, no arrows ------- */
@media (max-width: 760px) {
  #hx .aw5-host { --bh: 172px; }
  #hx .aw5-host .aw5-nav { display: none; }
  #hx .aw5-host :is(.s05-thumbs, .s05-wall, .s05-letters, .s05-pages, .s05-camps) { gap: 10px; padding-right: 14px; scroll-padding-left: 0; }
  #hx .aw5-host .s05-thumbs { grid-auto-columns: 204px; }
  
  
  #hx .aw5-host .aw5-wall { grid-auto-columns: min(220px, 64cqw); gap: 8px 10px; padding-right: 14px; }
  
  
  
}
@media (prefers-reduced-motion: reduce) { #hx .aw5-host * { transition: none !important; } }