/* ==========================================================================
   OUR WORK — a tab switch that cannot move the tab row

   Nothing here is a design change: no colour, spacing, card, tab or layout
   value is touched. It only fixes the movement.

   WHAT WAS MOVING THE TABS
   .screen is a flex column that is at least one viewport tall, and .hero is
   its only flexible child (flex:1). Whatever the drawer did not use, the
   hero absorbed. So a taller tab made the hero shorter and the whole tab row
   slid UP — measured at 151px between the Landing Pages tab (top 502) and
   the Google Ads tab (top 653). The cards did not push the tabs down; the
   hero pulled them up.

   THE TWO THINGS THAT MAKE IT STOP
   1 · --wk-hero pins the hero to the height it settles at on first paint,
       so it can no longer hand its space back and forth. Everything above
       the tab row is then a constant, whatever is underneath it.
   2 · --wk-reserve holds the drawer at the tallest of the five card views,
       so those five are identical to the pixel and switching between them
       changes no height at all. Both values are measured by the page's own
       tab script and re-measured on resize; neither is a fixed number.

   The Google Ads tab shows a panel that is genuinely shorter than that
   reserve, so it is exempt (a reserve there would be dead grey space inside
   the recess). That one real height difference is the only thing left to
   animate, and .wk-anim / .wk-swap animate it instead of jumping it.
   ========================================================================== */

/* 1 · the hero holds still. flex:none only once JS has a height to pin. */
.hero.wk-pin{ flex: none; height: var(--wk-hero); }

/* 2 · the floor under the content area, measured as the shallowest of the
       card views at this width — so it holds the band up if a view ever
       renders emptier than any real view does, and pads nothing that
       exists today. A floor tall enough to make every tab one height has
       to pad the short ones, and they are short by design: measured, it
       costs the Google Ads rail 90px of empty recess on a desktop and
       Client Wall 146px on a phone, and it stretches the five All Work
       cards by 61px. The brief asks for the design to be kept exactly, so
       the tab row is anchored by the hero pin above instead.

       The Google Ads tab is exempt: its panel is the Google Ads page's own
       client rail, drawn to sit tight under its last row. */
.tail.show .drawer{ min-height: var(--wk-reserve, 0px); }
.tail.show .drawer.is-gads{ min-height: 0px; }

/* 3 · the switch itself: height on the drawer, opacity on what it holds.
       Both are set only while a swap is running, so nothing carries a
       transition, a clip or a will-change at rest. */
.tail.show .drawer.wk-anim{
  transition: height .34s cubic-bezier(.33, 0, .2, 1);
  will-change: height;
  /* the box shrinks and grows around content that is already its new size,
     so the overflow has to be clipped — vertically only. overflow:hidden
     would make a scroll container of it and kill the phone lane's
     full-bleed negative margin; an inset clip-path that is open on the
     left and right clips the spill and leaves the bleed alone. */
  clip-path: inset(0 -1200px);
}
.tail.show .drawer > .head,
.tail.show .drawer > .lane2,
.tail.show .drawer > .gah{ transition: opacity .2s ease; }
.tail.show .drawer.wk-swap > .head,
.tail.show .drawer.wk-swap > .lane2,
.tail.show .drawer.wk-swap > .gah{ opacity: 0; }

/* the sheet already carries a global reduced-motion reset for transitions;
   this drops the clip and the compositor hint with it. */
@media (prefers-reduced-motion: reduce){
  .tail.show .drawer.wk-anim{ clip-path: none; will-change: auto; }
}