/* ==== all-work.css · layer 1 of 5 ==== */
/* ==========================================================================
   home-allwork-tabs · THE ALL WORK BAND IN THE "OUR CLIENTS" GRAMMAR
   LIVE on index.html since 2026-09-22 (built and approved as the preview [archived]). A verbatim copy of [archived]
   (the All Work UI the user approved), loaded by
   index.html together with all-work.css and tabs.css, which puts the
   Google Ads hero frame round the hero and stands this band on its bottom
   edge.

   The reference is the live Google Ads page's client section
   (google-ads.html → #q7, dressed by assets/shared/hero-rail/hero-rail.css).
   Its values, read from the rendered page at 1440 and 390, are the only
   vocabulary used here:

     sheet     #C6D9F4, flat, square, no edge, no shadow, 12 / 26 / 26 padding
     card      #FFFFFF, square, no edge, no shadow, 60px (58 on phones)
     mark      32px square in the business's own colour, [archived]800 initials
     name      [archived]700 #0E1E35 · line [archived]500 #505C6C, 6px apart
     action    a 14px #0760C6 arrow; its words stay for screen readers
     hover     #F7FAFE and the arrow steps 2px
     chosen    2px #5E8FD3 inset ring, #004594 name, the 7px #1F8FEA light
     rail      two rows that move together; whole columns and the next
               column's mark at the edge (band.js sizes the columns)

   The tab row is the band's own and keeps its six tabs, icons, words and
   behaviour. It sits in the sheet's top margin, where "Our Clients" sits,
   and follows the header's state rules: the selected tab is the one filled
   surface in the row, a hover is a line, focus is a ring.

   Nothing here changes what the band holds or does: the same doors, the same
   18-card rails, the same Google Ads detail panel, the same tab switching,
   hero pin and fade. Every selector starts at the band and carries eight ids
   through :has(#lane…), which outranks the page's heaviest layer on this band
   (a six-id !important rule on the selected tab).
   ========================================================================== */

/* ---- 0 · tokens ------------------------------------------------------------ */
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  --bw-ground:#FFFFFF;
  --bw-sheet:#C6D9F4;
  --bw-card:#FFFFFF;     --bw-card-h:#F7FAFE;
  --bw-ink:#0E1E35;      --bw-ink-2:#24364F;   --bw-ink-3:#505C6C;
  --bw-act:#0760C6;      --bw-on:#004594;      --bw-ring:#5E8FD3;
  --bw-dot:#1F8FEA;      --bw-focus:#003F8A;   --bw-plate:#E3EDFA;
  --bw-rule:#5E7596;     --bw-ink-h:#00285E;
  --bw-lane:var(--grid-edge, 18px);
  --bw-top:12px;  --bw-sp:26px;  --bw-gap:10px;  --bw-ch:60px;  --bw-tabs:44px;  --bw-under:14px;
  --bw-font:-apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}
@media (max-width:900px){
  html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
    --bw-top:10px; --bw-sp:12px; --bw-gap:8px; --bw-ch:58px; --bw-under:10px;
  }
}
@media (max-width:760px){
  html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){ --bw-lane:18px; }
}

/* ---- 1 · the ground and the sheet --------------------------------------------
   The white plate (.stage::before) and the pale ground go. The band is now
   one closed blue sheet on the header's lane, on white, like the Google Ads
   page below its hero. The sheet hugs what it holds, so the rails, the doors
   and an opened business all end on the same 26px of blue. */
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  background:var(--bw-ground) !important;
  background-color:var(--bw-ground) !important;
  box-shadow:none !important;
  padding:0 0 var(--r9-base, 36px) !important;
}
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage{
  position:relative !important; isolation:isolate;
  display:flex !important; flex-direction:column !important; flex-grow:0 !important;
  gap:0 !important;
  margin:16px var(--bw-lane) 0 !important;
  padding:var(--bw-top) var(--bw-sp) var(--bw-sp) !important;
  background:var(--bw-sheet) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--bw-font);
}
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage::before,
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage::after{
  content:none !important; display:none !important;
}
@media (max-width:900px){
  html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage{ margin-top:12px !important; }
}

/* ---- 2 · the tab row, in the sheet's top margin -------------------------------
   Inactive: ink on the blue. Selected: the one white surface, #004594, and
   the site's "this one" light. Hover: a 2px line under the words. Focus: a
   ring. The Google Ads tab's two lines stack like a card's name and line. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs{
  display:flex !important; flex-wrap:nowrap !important;
  justify-content:space-between !important; align-items:stretch !important;
  gap:6px !important;
  width:auto !important; max-width:none !important; min-height:var(--bw-tabs) !important;
  margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scrollbar-width:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs::-webkit-scrollbar{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs::after{ content:none !important; display:none !important; }

html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:first-child{
  position:relative !important;
  flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:10px !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  height:var(--bw-tabs) !important; min-height:var(--bw-tabs) !important;
  margin:0 !important; padding:0 14px 0 12px !important;
  background:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0;
  color:var(--bw-ink-2) !important;
  font-family:var(--bw-font) !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:650 !important; letter-spacing:-.01em !important; white-space:nowrap !important;
  text-align:left !important; transform:none !important; opacity:1 !important;
  cursor:pointer; transition:color .15s ease, background-color .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button svg{
  flex:none !important; width:18px !important; height:18px !important; margin:0 !important;
  fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round; stroke-linejoin:round;
  color:var(--bw-act) !important; opacity:1 !important; transform:none !important;
}
/* the Google Ads mark keeps its own three colours */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button svg:has([fill]){ stroke:none !important; }

/* the two-line tab: "Google Ads" over "Success Stories" */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button .gah-tabw{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:1px !important; margin:0 !important; padding:0 !important; line-height:1 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button .gah-tabname{
  display:block !important; font:inherit !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:650 !important; color:inherit !important; letter-spacing:-.01em !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button .gah-tabsub{
  display:block !important; margin:0 !important; font-style:normal !important;
  font-size:11.5px !important; line-height:14px !important; font-weight:500 !important; letter-spacing:0 !important;
  color:var(--bw-ink-3) !important; opacity:1 !important;
}

/* selected: the one filled surface in the row */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button[aria-selected="true"],
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button[aria-selected="true"]:hover{
  background:var(--bw-card) !important;
  background-image:radial-gradient(circle 3.5px at calc(100% - 10.5px) 10.5px, var(--bw-dot) 0 3.5px, rgba(0,0,0,0) 3.6px) !important;
  color:var(--bw-on) !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button[aria-selected="true"] :is(.gah-tabname){ color:var(--bw-on) !important; }

/* hover: a line under the words, never a second box */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button::before{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button::after{
  content:"" !important; display:block !important; position:absolute !important;
  left:12px !important; right:14px !important; top:auto !important; bottom:6px !important;
  width:auto !important; height:2px !important; border-radius:2px !important;
  background:var(--bw-rule) !important; opacity:0 !important; transform:none !important;
  transition:opacity .15s ease; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:not([aria-selected="true"]):hover{
    color:var(--bw-ink-h) !important; background:transparent !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:not([aria-selected="true"]):hover::after{ opacity:1 !important; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:active:not([aria-selected="true"]){
  background:transparent !important; transform:none !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:focus-visible{
  outline:2px solid var(--bw-focus) !important; outline-offset:-2px !important; box-shadow:none !important;
}

/* ---- 3 · the drawer ------------------------------------------------------------
   One view at a time, 14px under the tabs. The floor measure() computes for
   the old cards is not needed: every view here is the same two-row height. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .drawer{
  display:block !important;
  width:auto !important; min-height:0 !important;
  margin:var(--bw-under) 0 0 !important; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .drawer > .head{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .drawer.wk-anim{ overflow:clip !important; clip-path:none !important; }

/* ---- 4 · All Work: the five doors -----------------------------------------------
   An Our Clients card two rows tall: the category's mark, its name and line,
   the arrow; the sentence underneath. Five whole cards, never a rail. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important; grid-auto-flow:row !important;
  grid-template-rows:none !important; grid-auto-columns:auto !important;
  gap:var(--bw-gap) !important;
  width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  overflow:visible !important; background:none !important;
}
/* the lane is hidden (the [hidden] attribute) whenever a rail tab is open */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[hidden]{ display:none !important; }
/* where five whole doors no longer fit at 200px (phones, and desktops under
   about 1180px) band.js marks the lane and the doors become a rail of their
   own: whole cards and the next one's mark, like every other tab */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[data-bw="rail"]{
  grid-template-columns:none !important; grid-auto-flow:column !important; grid-auto-columns:var(--cw, 214px) !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[data-bw="rail"]::-webkit-scrollbar{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[data-bw="rail"] > .card.door{ scroll-snap-align:start; }

/* ---- 4b · THE FIRST FRAME IS ALREADY THE RAIL (2026-09-23) ----------------
   The three rules above are what band.js turns on by setting data-bw="rail",
   and until that script has run the lane paints as the five-column grid in
   rule 4 — which on a phone is five doors deep instead of one card tall. The
   band was therefore ~160px deeper in the first frame than in the settled one,
   and because .hero is the flexible child of .screen, everything above it (the
   label, the headline, the audit field) sat ~80px high and then dropped. That
   was the page's worst load jump, and it is not something script order can
   fix: the browser paints partway through the first screen whatever we do
   (rel="expect" is released ~110ms before #svc3 is parsed, measured).

   band.js's choice is a pure function of the lane's own width — a rail as soon
   as five 200px doors plus their four 10px gaps no longer fit, i.e. a lane
   under 1040px, which is this page's lane at a 1242px viewport — so the same
   choice is made here, in CSS, where it costs no script. band.js still sets
   the attribute a moment later; the declarations are identical, so nothing
   moves, and it still owns the switch on resize and rotation.
   If band.js's `5 * 200 + 4 * 10` ever changes, change this breakpoint too. */
@media (max-width: 1241px){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane{
    grid-template-columns:none !important; grid-auto-flow:column !important; grid-auto-columns:var(--cw, 214px) !important;
    overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane::-webkit-scrollbar{ display:none !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door{ scroll-snap-align:start; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door{
  position:relative !important;
  display:grid !important;
  grid-template-columns:32px minmax(0, 1fr) 14px !important;
  grid-template-rows:auto 1fr !important;
  column-gap:10px !important; row-gap:12px !important;
  align-items:center !important; align-content:start !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  height:auto !important; min-height:calc(2 * var(--bw-ch) + var(--bw-gap)) !important;
  margin:0 !important; padding:14px 12px 14px 12px !important;
  background:var(--bw-card) !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0;
  color:var(--bw-ink) !important; text-align:left !important; transform:none !important;
  font-family:var(--bw-font) !important;
  cursor:pointer; transition:background-color .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .ic{
  grid-column:1 !important; grid-row:1 !important;
  display:grid !important; place-items:center !important;
  width:32px !important; height:32px !important; margin:0 !important; padding:0 !important;
  background-color:var(--bw-plate) !important;   /* only the plate: the page paints four of these icons as coloured images */
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:var(--bw-act) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .ic svg{
  width:18px !important; height:18px !important; margin:0 !important;
  fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round; stroke-linejoin:round;
  color:var(--bw-act) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .ic svg:has([fill]){ stroke:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door h3{
  grid-column:2 !important; grid-row:1 !important;
  display:block !important; margin:0 !important; padding:0 !important; min-width:0;
  font-family:var(--bw-font) !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:700 !important; letter-spacing:-.03em !important; color:var(--bw-ink) !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door h3 > span{
  display:block !important; margin:6px 0 0 !important;
  font-size:12px !important; line-height:15px !important; font-weight:500 !important;
  letter-spacing:-.005em !important; color:var(--bw-ink-3) !important; text-transform:none !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .say{
  grid-column:1 / -1 !important; grid-row:2 !important; align-self:start !important;
  display:block !important; margin:0 !important; padding:4px 0 0 !important; border:0 !important;
  font-family:var(--bw-font) !important; font-size:13px !important; line-height:19px !important;
  font-weight:500 !important; letter-spacing:-.005em !important; color:var(--bw-ink-3) !important;
  white-space:normal !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .go{
  grid-column:3 !important; grid-row:1 !important; justify-self:end !important;
  display:grid !important; place-items:center !important;
  width:14px !important; height:24px !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:var(--bw-act) !important; font-family:var(--bw-font) !important;
  font-size:15px !important; line-height:1 !important; font-weight:700 !important;
  transition:translate .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .go svg{
  width:14px !important; height:14px !important; fill:none; stroke:currentColor; stroke-width:2;
}
@media (hover:hover) and (pointer:fine){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door:hover{
    background:var(--bw-card-h) !important; box-shadow:none !important; transform:none !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door:hover .go{ translate:2px 0; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door:focus-visible{
  outline:2px solid var(--bw-focus) !important; outline-offset:2px !important; box-shadow:none !important;
}

/* ---- 5 · the five rails: Google Ads, Client Wall, Landing Pages, Websites, Meta Ads ---- */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah{
  margin:0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah > section.cc{
  display:block !important; width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--bw-font) !important; color:var(--bw-ink);
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah > section.cc::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah > section.cc::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp{
  width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-head{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wrap{
  position:relative !important; overflow:visible !important;
  margin:0 !important; padding:0 !important; background:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
/* no fades and no arrows at the ends: the next column's mark is the cue */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wrap::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wrap::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .dk-btn{ display:none !important; }

html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row{
  display:grid !important; grid-auto-flow:column !important;
  grid-template-columns:none !important; grid-template-rows:repeat(2, auto) !important;
  grid-auto-columns:var(--cw, 228px) !important;
  gap:var(--bw-gap) !important;
  width:auto !important; max-width:none !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:0 !important; scroll-behavior:smooth;
  scrollbar-width:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  background:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row::-webkit-scrollbar{ display:none !important; }

/* ---- 6 · the card ------------------------------------------------------------------
   One object for every rail: .mp-i (the Google Ads buttons) and the four
   tabs' .card (static, as they are live — so no arrow and no hover). */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card){
  position:relative !important;
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
  gap:9px !important;
  flex:none !important; width:auto !important; min-width:0 !important; max-width:none !important;
  height:auto !important; min-height:var(--bw-ch) !important;
  margin:0 !important; padding:9px 8px 9px 9px !important;
  background:var(--bw-card) !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0;
  color:var(--bw-ink) !important; text-align:left !important;
  transform:none !important; opacity:1 !important;
  scroll-snap-align:start; scroll-snap-stop:normal;
  font-family:var(--bw-font) !important;
  transition:background-color .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .card{ cursor:default; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card)::before{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card):not(.is-sel)::after{ content:none !important; display:none !important; }

/* the mark: the business's own colour (--k), its initials */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.mp-m, .chip, .bw-m){
  position:relative !important;
  flex:none !important; display:grid !important; place-items:center !important;
  width:32px !important; height:32px !important; margin:0 !important; padding:0 !important;
  background:var(--k, #0E7C86) !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:#FFFFFF !important; font-family:var(--bw-font) !important;
  font-size:11px !important; line-height:normal !important; font-weight:800 !important; letter-spacing:.02em !important;
  font-style:normal !important; text-transform:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * .mp-m .mp-v{ display:none !important; }

/* the words */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.mp-w, .txt, .cap){
  flex:1 1 auto !important; min-width:0 !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:3px !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; position:static !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.cc-nm, .txt > b, .cap > b){
  display:block !important; margin:0 !important; padding:0 !important; max-width:none !important;
  font-family:var(--bw-font) !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:700 !important; letter-spacing:-.03em !important; color:var(--bw-ink) !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.mp-w > .mp-s, .txt > i, .cap > i){
  display:block !important; margin:3px 0 0 !important; padding:0 !important;
  font-family:var(--bw-font) !important; font-style:normal !important;
  font-size:12px !important; line-height:15px !important; font-weight:500 !important;
  letter-spacing:-.005em !important; color:var(--bw-ink-3) !important; text-transform:none !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
/* Meta Ads: the result on its own line, in the "after" blue */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * .cap > i > b{
  display:block !important; margin:2px 0 0 !important;
  font-size:12px !important; line-height:15px !important; font-weight:700 !important;
  letter-spacing:-.005em !important; color:var(--bw-on) !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .bw-sep{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}
/* the picture placeholders (grey wireframes) carry no information: the mark does their job */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * .win{ display:none !important; }

/* the action: an arrow, its words for screen readers */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .cc-cue{
  position:static !important; flex:none !important;
  display:grid !important; place-items:center !important;
  width:14px !important; height:24px !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:var(--bw-act) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .cc-tx{
  position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .cc-ar{
  display:block !important; width:14px !important; height:14px !important; margin:0 !important;
  fill:none !important; stroke:currentColor !important; stroke-width:2 !important;
  stroke-linecap:round; stroke-linejoin:round;
  transform:none !important; rotate:none; translate:none; transition:translate .15s ease, rotate .15s ease;
  color:var(--bw-act) !important;
}

/* states — the Google Ads buttons only; the four static tabs have none */
@media (hover:hover) and (pointer:fine){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:hover{
    background:var(--bw-card-h) !important; box-shadow:none !important; border:0 !important; transform:none !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:hover:not(.is-sel) .cc-ar{ translate:2px 0; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel:hover,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i[aria-expanded="true"]{
  background:var(--bw-card) !important; box-shadow:inset 0 0 0 2px var(--bw-ring) !important; border:0 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel .cc-nm{ color:var(--bw-on) !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel .cc-ar{ rotate:90deg; translate:none; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel::after{
  content:"" !important; display:block !important; position:absolute !important;
  top:7px !important; right:7px !important; left:auto !important; bottom:auto !important;
  width:7px !important; height:7px !important; margin:0 !important;
  border-radius:50% !important; background:var(--bw-dot) !important; border:0 !important; box-shadow:none !important;
  opacity:1 !important; transform:none !important; transition:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:focus-visible{
  outline:2px solid var(--bw-focus) !important; outline-offset:2px !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:active{ transform:none !important; }

/* ---- 7 · an opened business (the Google Ads tab) --------------------------------
   The Google Ads page's detail, value for value: one white card under the
   rows, inside the sheet — no frame in a frame, no notch. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel{
  position:relative !important; margin:14px 0 0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-in{ padding:0 !important; margin:0 !important; background:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-card{
  margin:0 !important; padding:0 !important; background:var(--bw-card) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:clip !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb{
  display:flex !important; align-items:center !important; gap:10px !important;
  min-height:50px !important; margin:0 !important; padding:0 22px !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  font-family:var(--bw-font) !important; font-size:14px !important; font-weight:400 !important; color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb button{
  min-height:44px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important;
  color:var(--bw-act) !important; font-family:var(--bw-font) !important; font-size:14px !important; font-weight:650 !important;
  cursor:pointer;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb button:hover{ text-decoration:underline !important; text-underline-offset:3px; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb i{ font-style:normal !important; color:#9DB0C9 !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb b{ color:var(--bw-ink) !important; font-weight:700 !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-body{
  display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(0, 330px) !important;
  gap:26px !important; align-items:start !important;
  margin:0 !important; padding:2px 22px 22px !important; background:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-who{
  display:flex !important; align-items:center !important; gap:14px !important; margin:0 0 16px !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wm{
  flex:none !important; display:grid !important; place-items:center !important;
  width:46px !important; height:46px !important; margin:2px 0 0 !important;
  border-radius:0 !important; box-shadow:none !important;
  background:var(--k, #0E7C86) !important; color:#FFFFFF !important;
  font-size:15px !important; font-weight:800 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-who h3{
  margin:0 !important; font-family:var(--bw-font) !important;
  font-size:22px !important; line-height:26.4px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:var(--bw-ink) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-meta{ display:block !important; margin:0 !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-trade{
  display:block !important; font-size:14px !important; line-height:18.9px !important; font-weight:400 !important; color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip{
  display:grid !important; grid-template-columns:1.35fr 1fr 1fr !important; gap:8px !important;
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s{
  display:flex !important; flex-direction:column !important; gap:4px !important;
  margin:1px 0 0 !important; padding:13px 16px 14px !important;
  background:#F3F7FC !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  white-space:normal !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s{
  font-family:var(--bw-font) !important; font-size:16px !important; line-height:19.2px !important;
  font-weight:500 !important; letter-spacing:-.01em !important; color:#6B7788 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-now{ background:#E3EDFA !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s em{
  display:block !important; margin:0 !important; font-style:normal !important;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size:13px !important; line-height:15.6px !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s b{
  display:block !important; margin:7px 0 0 !important;
  font-size:26px !important; line-height:28.6px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:var(--bw-ink) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-txt b{
  margin:8px 0 0 !important; font-size:15.5px !important; line-height:20.925px !important; font-weight:700 !important; letter-spacing:normal !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-now b{ color:var(--bw-on) !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s i{
  display:block !important; margin:5px 0 0 !important; font-style:normal !important;
  font-size:13px !important; line-height:15.6px !important; font-weight:500 !important; letter-spacing:-.16px !important;
  color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-foot{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:space-between !important;
  gap:10px 16px !important; margin:16px 0 0 !important; padding:0 !important; border:0 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .q7-story{
  display:inline-flex !important; align-items:center !important; gap:8px !important; min-height:44px !important;
  color:var(--bw-act) !important; font-size:15px !important; font-weight:700 !important; text-decoration:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .q7-story:hover{ text-decoration:underline !important; text-underline-offset:4px; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-x{
  min-height:42px !important; padding:0 18px !important; margin-left:auto !important;
  border:0 !important; border-radius:6px !important; box-shadow:none !important;
  background:#EEF4FC !important; color:var(--bw-ink-2) !important;
  font-family:var(--bw-font) !important; font-size:14.5px !important; font-weight:650 !important; cursor:pointer;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-x:hover{ background:#DDE9F9 !important; color:var(--bw-on) !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-side{
  margin:0 !important; padding:12px !important; background:#F3F7FC !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .q7-shot{ margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }

/* ---- 8 · phones and tablets --------------------------------------------------------
   The Google Ads page's phone values: 58px cards, 8px gaps, 12px of sheet;
   the tab row and every rail swipe; nothing is cut — a long name or line
   takes a second line instead. */
@media (max-width:900px){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs{ justify-content:flex-start !important; gap:4px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button,
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:first-child{ padding:0 12px 0 10px !important; gap:8px !important; font-size:13.5px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button::after{ left:10px !important; right:12px !important; }

  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door{ padding:12px 10px 12px 10px !important; row-gap:10px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .say{ padding-top:2px !important; font-size:12.5px !important; line-height:18px !important; }

  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card){ padding:9px 10px 9px 9px !important; gap:10px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.cc-nm, .txt > b, .cap > b, .mp-w > .mp-s, .txt > i, .cap > i, .cap > i > b){
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .q7-nS{ display:none !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .q7-nF{ display:inline !important; }

  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel{ margin-top:10px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb{ padding:0 14px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-body{ grid-template-columns:minmax(0, 1fr) !important; gap:14px !important; padding:2px 14px 14px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-side{ order:-1 !important; padding:8px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wm{ width:40px !important; height:40px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-who h3{ font-size:19px !important; line-height:22.8px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-txt{ grid-column:1 / -1 !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s:not(.is-txt) b{ font-size:22px !important; line-height:24.2px !important; }
}

/* ==== all-work.css · layer 2 of 5 ==== */
/* ==========================================================================
   home-allwork-tabs · all-work.css — THE GOOGLE ADS HERO FRAME + THE BAND ON IT
   LIVE on index.html since 2026-09-22 (built and approved as the preview [archived]). Loaded after all-work.css by index.html.

   all-work.css gives the All Work band the Google Ads "Our Clients" UI (the
   approved v4n preview, unchanged). This file does the rest of what the
   Google Ads page does with that sheet:

   1 · THE FRAME. The homepage corridor (gradient frames on main.hero) goes;
       the Google Ads frame takes its place, value for value
       (assets/shared/hero-rail/hero-rail.css, "[archived]"): a #C6D9F4 ground and, 16px
       inside it (8px on phones), a white panel whose edge steps #DDE9F9 →
       #EEF4FC in two 12px bands (5px on phones) with white seams. It starts
       under the section row and wraps the hero on all sides.

   2 · THE SHEET ON THE FRAME'S EDGE. The frame and its ground stop at --cut,
       which frame.js sets the way the Google Ads rail.js does: in the middle
       of the gap between the first two rows of cards. So the sheet's top part
       (the tabs and the first row) is inside the hero frame and the rest
       stands on the white page. The sheet is placed where Our Clients is:
       max(side + 32px, (100% − 1326px) / 2) from each edge — 75px at 1440 —
       and flush with the frame's panel on phones (21px).
   ========================================================================== */

/* ---- 0 · the Google Ads frame's numbers ------------------------------------ */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  --hf-o:16px;                                   /* ground → panel            */
  --hf-st:12px;                                  /* each step                 */
  --hf-side:calc(var(--hf-o) + 2 * var(--hf-st) + 3px);          /* 43px     */
  position:relative !important;
  isolation:isolate;
  background:#FFFFFF !important;
}
@media (max-width:760px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane){ --hf-o:8px; --hf-st:5px; }   /* side 21px */
}

/* ---- 1 · the frame, drawn once for the hero and the sheet's top ------------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::before,
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::after{
  content:"" !important; display:block !important;
  position:absolute !important; z-index:0 !important; pointer-events:none;
  border:0 !important; border-radius:0 !important; opacity:1 !important; transform:none !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::before{
  top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
  width:auto !important; height:var(--cut, 78%) !important;
  background:#C6D9F4 !important; box-shadow:none !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::after{
  top:var(--hf-o) !important; left:var(--hf-o) !important; right:var(--hf-o) !important; bottom:auto !important;
  width:auto !important; height:calc(var(--cut, 78%) - 2 * var(--hf-o)) !important;
  background:#FFFFFF !important;
  box-shadow:inset 0 0 0 1px #FFFFFF,
             inset 0 0 0 calc(var(--hf-st) + 1px) #DDE9F9,
             inset 0 0 0 calc(var(--hf-st) + 2px) #FFFFFF,
             inset 0 0 0 calc(2 * var(--hf-st) + 2px) #EEF4FC,
             inset 0 0 0 calc(2 * var(--hf-st) + 3px) #FFFFFF !important;
}

/* ---- 2 · the hero: the corridor goes, the copy stays ------------------------
   Centred inside the new panel: the top padding is the frame's own depth. */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > main.hero{
  position:relative !important; z-index:1 !important;
  background:none !important; background-color:transparent !important; background-image:none !important;
  box-shadow:none !important;
  padding-top:var(--hf-side) !important;
}

/* ---- 3 · the sheet where Our Clients stands -------------------------------
   all-work.css paints the band's ground white and puts the sheet on the header
   lane; here the ground is clear (the frame shows beside the sheet's top part,
   white page below the cut) and the sheet takes the client sheet's inset. */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  --bw-ground:transparent;
  --bw-lane:max(calc(var(--hf-side) + 32px), calc((100% - 1326px) / 2));
  position:relative !important; z-index:1 !important;
}
@media (max-width:760px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
    --bw-lane:var(--hf-side);                    /* flush with the frame's panel */
  }
}

/* ==== all-work.css · layer 3 of 5 ==== */
/* ==========================================================================
   home-allwork-tabs · tabs.css — THE TAB ROW, REBUILT (LIVE on index.html since 2026-09-22)
   Loaded last, after all-work.css and all-work.css.

   THE IDEA
   The tabs stop being words on the blue sheet and become the sheet's own
   index tabs. They stand in a row on the white hero panel, directly on the
   sheet's top edge, and the selected one is made of the sheet itself: the same
   #C6D9F4, running down without a seam into the cards it opened, with a 3px
   #0760C6 rule across its top. The eye reads "this tab opened this sheet",
   which a dot or a fill colour never said.

   THE ROW
   · Every tab has the same width, and it is the card column's width: the rule
     band.js uses for the rails (220px or more, a 48px peek on a desktop; one
     tab and about half the next on a phone), so at rest the tabs stand over
     the card columns and the next tab shows its icon at the edge — the only
     "there is more" cue, as on the Google Ads rail (no arrows, no fades).
   · 1440: five whole tabs + the sixth's icon. 1280: four. Phones: one and a half.
   · Two lines: the name at [archived]700, the second line at [archived]500 in the
     muted ink. Nothing is truncated; every tab is wide enough for its words.
   · Manual only: swipe, trackpad, mouse drag (tabs.js) and the page's own
     arrow keys; nothing slides by itself.

   STATES
   · Unselected: a white tab with a soft 1px #D3DFF0 edge, standing 8px above
     the sheet (6px on phones).
   · Hover: the edge and the name darken, the tab tints #F7FAFE — a lighter
     object than the selected one, never a second "open" tab.
   · Selected: the sheet's blue, full height down into the sheet, the top
     rule, the name in #004594. The old dot and white tile go.
   · Focus: a 2px #003F8A ring inside the tab.

   Selectors carry eleven ids (8 through :has, #tabs ×3) to outrank all-work.css
   and the page's six-id selected-tab rule.
   ========================================================================== */

html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{
  --tb-h:56px;        /* the tab                                  */
  --tb-join:8px;      /* the gap a selected tab fills             */
  --tb-gap:10px;      /* = the card rail's gap                     */
  --tb-edge:#D3DFF0;  --tb-edge-h:#9DBCE6;  --tb-rule:#0760C6;  --tb-ring:#003F8A;
  padding:0 !important;
  background:transparent !important; background-color:transparent !important;
}
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{
    --tb-h:54px; --tb-join:6px; --tb-gap:8px;
  }
}

/* ---- the sheet is now the drawer: the tabs stand on its top edge -------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage > .drawer.drawer{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:18px var(--bw-sp) var(--bw-sp) !important;
  background:var(--bw-sheet) !important; background-color:var(--bw-sheet) !important;
}
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage > .drawer.drawer{ padding-top:12px !important; }
}

/* ---- the row ------------------------------------------------------------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs{
  display:flex !important; flex-wrap:nowrap !important;
  justify-content:flex-start !important; align-items:stretch !important;
  gap:var(--tb-gap) !important;
  width:auto !important; max-width:none !important;
  height:calc(var(--tb-h) + var(--tb-join)) !important; min-height:0 !important;
  margin:0 var(--bw-sp) !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scrollbar-width:none !important; -webkit-mask-image:none !important; mask-image:none !important;
  -webkit-user-select:none; user-select:none;
}
/* the row always comes to rest on whole tabs: selecting a far tab (the page
   centres it) or letting go of a swipe settles on a tab's left edge, so no
   empty sliver of a tab is ever left at the start of the row */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs{
  scroll-snap-type:x mandatory !important; scroll-padding-inline:0 !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button{ scroll-snap-align:start; scroll-snap-stop:normal; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:last-child{ scroll-snap-align:end; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs.is-drag{ scroll-snap-type:none !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs::-webkit-scrollbar{ display:none !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs.is-drag{ cursor:grabbing; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs.is-drag > button{ cursor:grabbing; }

/* ---- a tab ------------------------------------------------------------------ */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button{
  position:relative !important; isolation:isolate;
  flex:0 0 var(--tw, 228px) !important;
  width:var(--tw, 228px) !important; min-width:0 !important; max-width:none !important;
  height:100% !important; min-height:0 !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:12px !important;
  margin:0 !important; padding:0 14px var(--tb-join) 16px !important;
  background:transparent !important; background-color:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0 !important;
  color:var(--bw-ink) !important; text-align:left !important; white-space:nowrap !important;
  transform:none !important; opacity:1 !important; cursor:pointer;
}
/* the tab's surface: white with a soft edge, standing clear of the sheet */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button::before{
  content:"" !important; display:block !important;
  position:absolute !important; z-index:-1 !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:var(--tb-join) !important;
  width:auto !important; height:auto !important; margin:0 !important;
  background:#FFFFFF !important; border:0 !important; border-radius:0 !important;
  box-shadow:inset 0 0 0 1px var(--tb-edge) !important;
  opacity:1 !important; transform:none !important;
  transition:background-color .22s ease, box-shadow .22s ease, bottom .22s ease;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button::after{ content:none !important; display:none !important; }

/* icon */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button svg{
  flex:none !important; width:20px !important; height:20px !important; margin:0 !important;
}

/* the two lines */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabw{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:2px !important; min-width:0 !important; margin:0 !important; padding:0 !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabname{
  display:block !important; margin:0 !important;
  font-family:var(--bw-font) !important; font-size:14.5px !important; line-height:18px !important;
  font-weight:700 !important; letter-spacing:-.015em !important; color:var(--bw-ink) !important;
  transition:color .22s ease;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabsub{
  display:block !important; margin:0 !important; font-style:normal !important;
  font-family:var(--bw-font) !important; font-size:12px !important; line-height:15px !important;
  font-weight:500 !important; letter-spacing:0 !important; color:var(--bw-ink-3) !important; opacity:1 !important;
}

/* ---- selected: the sheet itself, opened into its cards -------------------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"]::before{
  bottom:0 !important;
  background:var(--bw-sheet) !important;
  box-shadow:inset 0 3px 0 var(--tb-rule) !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"] .gah-tabname{ color:var(--bw-on) !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"] .gah-tabsub{ color:var(--bw-ink-2) !important; }

/* ---- hover / pressed / focus ---------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:not([aria-selected="true"]):hover::before{
    background:#F7FAFE !important; box-shadow:inset 0 0 0 1px var(--tb-edge-h) !important;
  }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:not([aria-selected="true"]):hover .gah-tabname{ color:var(--bw-on) !important; }
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:not([aria-selected="true"]):active::before{ background:#EEF4FC !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:focus-visible::before{
  box-shadow:inset 0 0 0 2px var(--tb-ring) !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"]:focus-visible::before{
  box-shadow:inset 0 3px 0 var(--tb-rule), inset 0 0 0 2px var(--tb-ring) !important;
}

/* ---- phones ------------------------------------------------------------------ */
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button{
    gap:10px !important; padding:0 12px var(--tb-join) 12px !important;
  }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button svg{ width:18px !important; height:18px !important; }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabname{ font-size:14px !important; line-height:17px !important; }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabsub{ font-size:11.5px !important; line-height:14px !important; }
}

@media (prefers-reduced-motion:reduce){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button::before,
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabname{ transition:none !important; }
}

/* ==== all-work.css · layer 4 of 5 ==== */
/* ==========================================================================
   home-allwork-tabs · shelf.css — TAB SHELF
   LIVE on index.html since 2026-09-22. The user's pick: option 4 of the
   preview [archived]?v=4 (source file
   [archived]), applied exactly as reviewed. Loaded after
   tabs.css.

   One object with two zones: the tab row gets its own pale shelf (#E6EFFA,
   a 1px #D3DFF0 edge) the full width of the sheet, so navigation and content
   read as one component — the tab keys on top, the work below. White keys sit
   on the shelf; the selected one is the sheet's blue cutting through the shelf
   into the sheet, with its #0760C6 top rule.
   ========================================================================== */


/* the shelf: the band's top zone, painted on the band itself */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{
  padding-top:10px !important;
  background:linear-gradient(#E6EFFA, #E6EFFA) 0 0 / 100% calc(10px + var(--tb-h) + var(--tb-join)) no-repeat !important;
  box-shadow:inset 0 0 0 1px #D3DFF0 !important;
}
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{ padding-top:8px !important;
    background:linear-gradient(#E6EFFA, #E6EFFA) 0 0 / 100% calc(8px + var(--tb-h) + var(--tb-join)) no-repeat !important; }
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage > #tabs#tabs#tabs#tabs > button::before{ background:#FFFFFF !important; box-shadow:inset 0 0 0 1px #D3DFF0 !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage > #tabs#tabs#tabs#tabs > button[aria-selected="true"]::before{ background:var(--bw-sheet) !important; box-shadow:inset 0 3px 0 #0760C6 !important; }
@media (hover:hover) and (pointer:fine){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage > #tabs#tabs#tabs#tabs > button:not([aria-selected="true"]):hover::before{ background:#F7FAFE !important; box-shadow:inset 0 0 0 1px #9DBCE6 !important; }
}

/* ==== all-work.css · layer 5 of 5 ==== */
/* ==========================================================================
   home-allwork-work · all-work.css — LIVE
   The All Work content area of the homepage first screen.
   Loaded by index.html through ONE line, with work.js.

   · the tab row is smaller, so on a wide desktop all EIGHT tabs fit and the row
     does not slide; on a phone a tab is a third of the row, so three sit whole
     and the fourth is cut — which is how you can see that it slides;
   · the content area is one strip of the seven areas, a photograph each, the
     link under its own picture; on a phone it is a contact sheet of three to a
     screen that slides on its own and leaves the tab row alone;
   · no fade, no blur and no chevron over any card.
   To undo all of it, delete the one line in index.html that loads this folder.
   ========================================================================== */

/* ==========================================================================
   home-allwork-five-p7c · [archived] — the best five, each a different answer
   The law all five obey:
   · a link sits under its own image, inside its own panel, and WRAPS rather
     than crossing out of it — no link can reach another panel's link;
   · a desktop shows all eight tabs and all eight panels; nothing slides;
   · a phone slides the content itself: it starts on Google Ads, snaps panel by
     panel, the next one always peeks, and the tab row follows it tab for tab;
   · the All Work place is an open anchor on the sheet, never a card.
   ========================================================================== */
.cv.fv{ --ff:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-family:var(--ff); height:100%; position:relative; }
.fv *{ box-sizing:border-box; }
.p5-rail{ height:100%; overflow:hidden; }
.p5-track{ display:flex; gap:var(--tb-gap, 8px); height:100%; width:max-content; }
.p5-c{ position:relative; flex:0 0 var(--tw, 148px); width:var(--tw, 148px); height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:7px; padding:0 12px; border-radius:10px;
  cursor:pointer; outline:0; background:#EEF4FC; box-shadow:inset 0 0 0 1px #DDE9F9;
  transition:background-color .22s ease, box-shadow .22s ease; }
.p5-c:hover{ background:#F7FAFE; box-shadow:inset 0 0 0 1px #9DBCE6; }
.p5-c:focus-visible{ box-shadow:inset 0 0 0 2px #003F8A; }
.p5-body{ display:block; min-width:0; }
.p5-cta{ display:block; min-width:0; max-width:100%; min-height:30px; }   /* two lines are reserved, so every panel stays level */
.p5-c--all{ background:transparent; box-shadow:none; cursor:default; padding-left:2px; }
.p5-c--all:hover{ background:transparent; box-shadow:none; }
/* the drawing is only as wide as itself, so its identity chip stays pinned to it */
.p5-art{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:56px; width:max-content; max-width:100%; }
.p5-mk{ width:44px; height:44px; display:block; }
.p5-art--w .p5-mk{ width:40px; height:40px; }
.p5-chip{ position:absolute; right:-9px; bottom:-5px; width:22px; height:22px; }
.p5-chip--w{ position:static; display:block; width:52px; height:22px; margin:5px 0 -5px 1px; }
.p5-all{ display:grid; grid-template-columns:repeat(4, 12px); gap:4px; }
.p5-all i{ width:12px; height:12px; border-radius:3px; background:#FFFFFF; box-shadow:inset 0 0 0 1px #AFC8EC; }
.p5-all i:nth-child(n+5){ background:#DCE8FA; }

/* the link · inline, so it wraps inside its own panel and can never cross out of it */
.cta{ display:inline; font:650 11.5px/15px var(--ff); color:#0760C6; text-decoration:none; }
.cta-end{ white-space:nowrap; }                       /* the arrow never leaves the last word */
.cta-a{ width:13px; height:13px; margin-left:4px; vertical-align:-2px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.cta:hover{ color:#004594; } .cta:hover .cta-a{ transform:translateX(2px); }

/* NO right-edge fade and no chevron: the peek of the next card is the only
   "there is more" signal this band needs, and a gradient over the last link
   reads as a blur. (Removed 2026-09-23 at the user's request.) */
.p5-audit{ display:none; }



/* ==========================================================================
   PHONES · the content is the slider, and it starts on Google Ads
   ========================================================================== */
@container lane (max-width:700px){
  .cv.fv .p5-rail{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .cv.fv .p5-rail::-webkit-scrollbar{ display:none; }
  .cv.fv .p5-track{ width:max-content; transform:none !important; gap:8px; padding-right:8px; }
  .cv.fv .p5-c{ flex:0 0 78cqw; width:78cqw; scroll-snap-align:start; padding:0 14px; gap:8px; }
  .cv.fv .p5-c--all{ display:none; }                    /* its ask becomes the last panel of the story */
  .cv.fv .p5-audit{ display:flex; flex-direction:column; justify-content:center; gap:8px; flex:0 0 78cqw; width:78cqw;
    scroll-snap-align:start; padding:0 14px; border-radius:10px; background:#DCE8FA; box-shadow:inset 0 0 0 1px #BFD3EF; }
  .cv.fv .p5-audit .p5-all{ grid-template-columns:repeat(7, 11px); }
  .cv.fv .p5-audit .cta{ font-size:12.5px; line-height:16px; }
  .cv.fv .p5-mk{ width:40px; height:40px; }
  .cv.fv .p5-art{ height:52px; }
}
/* ---- fv1 · One Sheet ---- */
.fv1 .p5-track{ background:#FFFFFF; border-radius:10px; gap:0; }
.fv1 .p5-c{ background:transparent; box-shadow:none; border-radius:0;
  flex:0 0 calc(var(--tw, 148px) + var(--tb-gap, 8px)); width:calc(var(--tw, 148px) + var(--tb-gap, 8px)); }
.fv1 .p5-c + .p5-c::before{ content:""; position:absolute; left:0; top:15px; bottom:15px; width:1px; background:#E3EBF6; }
.fv1 .p5-c:hover{ background:#F7FAFE; box-shadow:none; }
.fv1 .p5-c--all{ z-index:3; background:linear-gradient(90deg, #C6D9F4 78%, rgba(198,217,244,0)); padding-right:22px; }
.fv1 .p5-c--all + .p5-c::before{ display:none; }
@container lane (max-width:700px){
  .cv.fv1 .p5-track{ background:transparent; gap:8px; }
  .cv.fv1 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; border-radius:10px; flex:0 0 78cqw; width:78cqw; }
  .cv.fv1 .p5-c::before{ display:none; }
}

/* ---- fv2 · What Is Inside ---- */
.fv2 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; padding:0 10px; gap:5px; }
.fv2 .p5-c--all{ background:transparent; box-shadow:none; padding-left:2px; }
.fv2 .p5-body{ width:100%; }
.fv2 .p5-pv{ display:block; width:100%; height:64px; }
@container lane (max-width:700px){ .cv.fv2 .p5-pv{ height:74px; } }

/* ---- fv3 · Real Photographs ---- */
.fv3 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; padding:9px 9px 0; gap:6px; justify-content:center; }
.fv3 .p5-c--all{ background:transparent; box-shadow:none; padding:0 0 0 2px; justify-content:center; }
.fv3 .p5-body{ width:100%; }
.fv3 .p5-ph{ position:relative; display:block; width:100%; height:74px; border-radius:7px; overflow:hidden;
  background:#DDE9F9 center 40% / cover no-repeat; }
.fv3 .p5-bd{ position:absolute; left:6px; bottom:6px; height:26px; padding:0 5px; border-radius:7px; background:#FFFFFF;
  display:flex; align-items:center; box-shadow:0 1px 3px rgba(14,30,53,.22); }
.fv3 .p5-bd svg{ width:16px; height:16px; }
.fv3 .p5-bd--w svg{ width:38px; height:16px; }
.fv3 .p5-cta{ padding:0 4px 0; }
@container lane (max-width:700px){ .cv.fv3 .p5-ph{ height:76px; } }

/* ---- fv4 · Four Fields ---- */
.fv4 .p5-g{ position:relative; flex:0 0 calc(var(--n) * var(--tw, 148px) + (var(--n) - 1) * var(--tb-gap, 8px));
  display:flex; align-items:center; gap:10px; padding:17px 12px 0; border-radius:10px;
  background:#EEF4FC; box-shadow:inset 0 0 0 1px #DDE9F9; }
.fv4 .p5-gl{ position:absolute; left:13px; top:9px; font:700 9.5px/12px var(--ff); letter-spacing:.09em;
  text-transform:uppercase; color:#5B7398; }
.fv4 .p5-g .p5-c{ flex:1 1 0; width:auto; background:transparent; box-shadow:none; padding:0; gap:6px; border-radius:6px; }
.fv4 .p5-g .p5-c:hover{ background:transparent; box-shadow:none; }
.fv4 .p5-g .p5-c:hover .cta{ color:#004594; }
.fv4 .p5-mk{ width:38px; height:38px; } .fv4 .p5-art{ height:48px; }
.fv4 .p5-art--w .p5-mk{ width:34px; height:34px; }
@container lane (max-width:700px){
  .cv.fv4 .p5-g{ flex:0 0 86cqw; width:86cqw; scroll-snap-align:start; padding:19px 14px 0; gap:14px; }
  .cv.fv4 .p5-g .p5-c{ flex:1 1 0; width:auto; padding:0; }
  .cv.fv4 .p5-mk{ width:34px; height:34px; } .cv.fv4 .p5-art{ height:44px; }
}

/* ---- fv5 · Numbered Index ---- */
.fv5 .p5-track{ background:#FFFFFF; border-radius:10px; gap:0; }
.fv5 .p5-c{ background:transparent; box-shadow:none; border-radius:0; justify-content:center; padding:0 14px; gap:0;
  flex:0 0 calc(var(--tw, 148px) + var(--tb-gap, 8px)); width:calc(var(--tw, 148px) + var(--tb-gap, 8px)); }
.fv5 .p5-body{ width:100%; padding-bottom:9px; border-bottom:1px solid #D6E2F2; margin-bottom:10px; }
.fv5 .p5-c + .p5-c::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:#EFF3F9; }
.fv5 .p5-c:hover{ background:#F8FAFE; }
.fv5 .p5-n{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:32px; }
.fv5 .p5-num{ font:600 19px/23px "Cormorant Garamond", Georgia, serif; font-style:italic; color:#12325F; }
/* here the identity chip sits BESIDE the drawing, never on top of it */
.fv5 .p5-art{ flex-direction:row; align-items:center; justify-content:flex-end; gap:5px; height:32px; }
.fv5 .p5-mk{ width:30px; height:30px; }
.fv5 .p5-chip{ position:static; width:16px; height:16px; }
.fv5 .p5-art--w{ gap:0; } .fv5 .p5-art--w .p5-mk{ display:none; }
.fv5 .p5-chip--w{ width:46px; height:20px; margin:0; }
.fv5 .p5-c--all{ background:#C6D9F4; }
.fv5 .p5-c--all .p5-body{ border-bottom:0; padding-bottom:0; margin-bottom:8px; }
@container lane (max-width:700px){
  .cv.fv5 .p5-track{ background:transparent; gap:8px; }
  .cv.fv5 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; border-radius:10px; flex:0 0 78cqw; width:78cqw; padding:0 16px; }
  .cv.fv5 .p5-c::before{ display:none; }
  .cv.fv5 .p5-mk{ width:34px; height:34px; } .cv.fv5 .p5-art{ height:36px; }
  .cv.fv5 .p5-n{ height:36px; } .cv.fv5 .p5-num{ font-size:21px; }
}

/* ---- the band: smaller tabs, and the content laid over #lane ------------------- */
/* ==========================================================================
   home-allwork-five-p7c · [archived] — PREVIEW ONLY
   Loaded by [archived] (index.html + one hook line).
   1 · the tab row is made smaller — every word is still there, the second line
       may wrap — so on a 1440 desktop all EIGHT tabs fit and the row does not
       slide at all;
   2 · the All Work content area is replaced by the chosen solution, laid OVER
       #lane, which stays in the page at its own size, so the band, the hero pin
       and the frame edge measure exactly as they do today;
   3 · on a desktop the content never scrolls on its own — it is locked to the
       tab row; on a phone the content is the slider and the row follows it.
   ========================================================================== */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{
  --tb-h:48px !important; --tb-join:6px !important; --tb-gap:8px !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button{
  gap:7px !important; padding:0 8px var(--tb-join) 9px !important; min-width:0 !important; overflow:hidden !important; align-items:center !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button svg{ width:16px !important; height:16px !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabw{ min-width:0 !important; gap:1px !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabname{ font-size:11.5px !important; line-height:14px !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabsub{ font-size:9.5px !important; line-height:11.5px !important; white-space:normal !important; }
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{ --tb-h:46px !important; --tb-join:5px !important; }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabname{ font-size:12.5px !important; line-height:15px !important; }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabsub{ font-size:10px !important; line-height:12px !important; white-space:nowrap !important; }
}
/* the sheet solution keeps the All Work tab in place while the row moves */

/* ---- the overlay ---------------------------------------------------------- */
.awx-host{ position:relative; }
.awx-host.awx-on > #lane{ visibility:hidden; }
.awx{ position:absolute; z-index:2; display:none; container:lane / inline-size; overflow:hidden; transition:opacity .2s ease; }
.awx-host.awx-on > .awx{ display:block; }
.tail.show .drawer.wk-swap > .awx{ opacity:0; }


/* ---- the tab row on a phone · three whole, one cut ----------------------------
   This comes AFTER the band sheet on purpose: both carry the same weight, so the
   later block is the one that decides the phone type sizes. -------------------- */
/* ---- 1 · Three Whole, One Cut — Every tab the same narrow width ---- */
@media (max-width:760px){
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs{ gap:7px !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button{ flex:0 0 calc((100% - 14px) / 3.3) !important; width:calc((100% - 14px) / 3.3) !important; gap:6px !important; padding:0 7px var(--tb-join) 8px !important; align-items:center !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button svg{ width:15px !important; height:15px !important; flex:0 0 15px !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabw{ min-width:0 !important; gap:0 !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabname{ font-size:10.5px !important; line-height:13px !important; white-space:normal !important; letter-spacing:-.01em !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabsub{ display:none !important; }
}



/* ---- option 03's card ---------------------------------------------------------- */

/* ==========================================================================
   home-allwork-photo5-q6n · [archived]
   Option 03 "Real Photographs", five ways to fix the picture's shape on a PHONE.
   The desktop card below is the approved one, byte for byte the same in all
   five — every difference lives inside the @container phone block.
   ========================================================================== */
.q .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; padding:9px 9px 0; gap:6px; justify-content:center; }
.q .p5-c--all{ background:transparent; box-shadow:none; padding:0 0 0 2px; justify-content:center; }
.q .p5-body{ width:100%; }
.q .p5-ph{ position:relative; display:block; width:100%; height:74px; border-radius:7px; overflow:hidden;
  background:#DDE9F9 center 40% / cover no-repeat; }
.q .p5-bd{ position:absolute; left:6px; bottom:6px; height:26px; padding:0 5px; border-radius:7px; background:#FFFFFF;
  display:flex; align-items:center; box-shadow:0 1px 3px rgba(14,30,53,.22); }
.q .p5-bd svg{ width:16px; height:16px; }
.q .p5-bd--w svg{ width:38px; height:16px; }
.q .p5-cta{ padding:0 4px 0; }
.q .q-nm{ display:none; }                    /* the name is a phone-only affordance */
.q .q-txt{ display:block; min-width:0; }

/* ---- q3 · Contact Sheet · 93 × 68  ·  1.37 : 1 ---- */
@container lane (max-width:700px){
  .cv.q3 .p5-c{ flex:0 0 33cqw; width:33cqw; padding:7px 7px 0; gap:5px; }
  .cv.q3 .p5-ph{ height:68px; border-radius:6px; }
  .cv.q3 .p5-cta{ min-height:39px; padding:0 2px; }
  .cv.q3 .cta{ font-size:10px; line-height:13px; }
  .cv.q3 .cta-a{ width:11px; height:11px; margin-left:3px; }
  .cv.q3 .p5-bd{ height:19px; left:4px; bottom:4px; padding:0 4px; border-radius:6px; }
  .cv.q3 .p5-bd svg{ width:12px; height:12px; } .cv.q3 .p5-bd--w svg{ width:28px; height:12px; }
  .cv.q3 .p5-audit .cta{ font-size:11.5px; line-height:15px; }
}
/* a small phone (a 360 screen leaves the band ~294px): the longest link needs a
   fourth line, which the card has no room for — so the picture gives some back */
@container lane (max-width:300px){
  .cv.q3 .p5-ph{ height:62px; }
  .cv.q3 .p5-cta{ min-height:36px; }
  .cv.q3 .cta{ font-size:9.5px; line-height:12px; }
  .cv.q3 .cta-a{ width:10px; height:10px; }
}