/* ==========================================================================
   HOME · the hero's All Work tabs show what Success Stories shows — PREVIEW (2026-09-28)
   The six matching tabs: ten real tiles in the order of Success Stories / Our Work, and a way to everything
   on /our-work. Sized to the band the other tabs already take (≈ 180–250px).

   2026-10-01 · "Base Plate" (owner's pick, option 07 of [archived]): a tile now says it can be
   opened. A raised white card, the picture mounted on white, and the name on a pale base with an underline and
   an arrow in a round seat. "View all …" no longer takes a row of its own: it is the card after the ten —
   pinned at the end of the rail on desktop, the last card on a phone — so the space above and below the
   cards is equal. The All Work doors wear the same card. Selectors carry #hxPanel / #hx because the hero's
   own button reset (#hx button) outranks a bare class.
   Undo: restore hero.css + home-tabs.js from [archived].
   ========================================================================== */
#hxPanel .hw-host{ position: relative; padding: 0; }   /* the panel's own padding frames it, as every tab */
#hxPanel .hw-host[hidden]{ display: none; }
#hx #hxPanel.hw-on{ padding: 24px; }   /* the same 24px above and below the cards */
.hw-rail{ display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
          padding: 6px 0 22px 6px; margin: -6px 0 -22px -6px; }   /* room for the lift and the shadow; the visible spacing stays the panel's */
.hw-rail::-webkit-scrollbar{ display: none; }

/* one tile: the work's own picture mounted on white, then the name and one line on a pale base */
#hxPanel .hw-t{ flex: 0 0 178px; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; text-align: left;
       border: 0; border-radius: 14px; background: #FFFFFF; overflow: hidden; cursor: pointer; font: inherit; color: #0E1E35;
       box-shadow: 0 0 0 1px #D6E0EE, 0 1px 2px rgba(16, 42, 88, .05), 0 10px 18px -12px rgba(16, 42, 88, .34);
       transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s cubic-bezier(.22, .61, .36, 1); }
#hxPanel .hw-t:focus-visible{ outline: 2px solid #0760C6; outline-offset: 2px; }
#hxPanel .hw-t:active{ transform: scale(.985); box-shadow: 0 0 0 1px #B9CCE6, 0 1px 1px rgba(16, 42, 88, .05); transition-duration: .08s; }
.hw-im{ position: relative; display: block; aspect-ratio: 16 / 9; background: #EEF2F7; overflow: hidden; }
#hxPanel .hw-t .hw-im{ margin: 6px 6px 0; border-radius: 8px; outline: 1px solid rgba(14, 30, 53, .08); outline-offset: -1px; }
.hw-im img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hw-t.is-meta .hw-im img, .hw-t.is-vid .hw-im img{ object-position: center; }
.hw-pl{ position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: #FFFFFF;
        display: grid; place-items: center; box-shadow: 0 2px 8px rgba(11, 13, 18, .25); }
.hw-pl svg{ width: 15px; height: 15px; fill: #004594; margin-left: 2px; }
.hw-dur{ position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: #111418; color: #FFFFFF; font-size: 11px; font-style: normal; font-weight: 650; }
.hw-tx{ display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px 7px; }
.hw-tx b{ font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-tx small{ font-size: 12px; line-height: 1.3; color: #5B6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the base: the underlined name, and the arrow in its round seat at the end of the name line */
#hxPanel .hw-t .hw-tx{ position: relative; flex: 1 1 auto; gap: 0; margin-top: 6px; padding: 8px 10px 10px; border-top: 1px solid #E1E8F2; background: #F1F5FC; transition: background-color .2s; }
#hxPanel .hw-t .hw-tx b{ padding: 0 28px 3px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3.5px; text-decoration-color: #A9BBD3;
                         transition: color .15s, text-decoration-color .15s; }
#hxPanel .hw-t .hw-tx::before{ content: ""; position: absolute; right: 8px; top: 5.5px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px #CFDCEE;
                               transition: background-color .2s, box-shadow .2s; }
#hxPanel .hw-t .hw-tx::after{ content: ""; position: absolute; right: 13px; top: 10.5px; width: 12px; height: 12px; background: #0760C6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") 0 50% / 12px 12px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") 0 50% / 12px 12px repeat-x;
  transition: background-color .2s, -webkit-mask-position .34s cubic-bezier(.22, .61, .36, 1), mask-position .34s cubic-bezier(.22, .61, .36, 1); }
/* keyboard focus speaks the same way as the pointer */
#hxPanel .hw-t:focus-visible .hw-tx{ background: #E4EDFA; }
#hxPanel .hw-t:focus-visible .hw-tx b{ color: #0760C6; text-decoration-color: #0760C6; }
#hxPanel .hw-t:focus-visible .hw-tx::before{ background: #0760C6; box-shadow: none; }
#hxPanel .hw-t:focus-visible .hw-tx::after{ background: #FFFFFF; -webkit-mask-position: 12px 50%; mask-position: 12px 50%; }
@media (hover: hover) and (pointer: fine){
  #hxPanel .hw-t:hover{ transform: translateY(-3px); box-shadow: 0 0 0 1px #B9CCE6, 0 2px 4px rgba(16, 42, 88, .06), 0 18px 26px -16px rgba(16, 42, 88, .46); }
  #hxPanel .hw-t:hover:active{ transform: scale(.985); box-shadow: 0 0 0 1px #B9CCE6, 0 1px 1px rgba(16, 42, 88, .05); }
  #hxPanel .hw-t:hover .hw-tx{ background: #E4EDFA; }
  #hxPanel .hw-t:hover .hw-tx b{ color: #0760C6; text-decoration-color: #0760C6; }
  #hxPanel .hw-t:hover .hw-tx::before{ background: #0760C6; box-shadow: none; }
  #hxPanel .hw-t:hover .hw-tx::after{ background: #FFFFFF; -webkit-mask-position: 12px 50%; mask-position: 12px 50%; }   /* the arrow rolls through its seat once */
}

/* Client Wall: two rows of name plates, as the tab has always shown (plates do not open, so they stay flat) */
.hw-rail.is-cl{ display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: auto; gap: 10px; }
.hw-c{ display: flex; align-items: center; gap: 10px; width: 232px; min-width: 0; padding: 9px 12px; border: 1px solid #DCE3EC; border-radius: 10px; background: #FFFFFF; }
.hw-mono{ flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #EAF1FB; color: #004594; font-size: 12.5px; font-weight: 800; }
.hw-c .hw-tx{ padding: 0; }

/* the way to everything: the card after the ten — this tab's section on the Our Work page (no count: 2026-10-13) */
.hw-end{ position: relative; flex: 0 0 132px; display: flex; min-width: 0; scroll-snap-align: end; }
.hw-rail.is-cl .hw-end{ grid-row: 1 / -1; width: 124px; }
#hxPanel .hw-more{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: 12px 14px; border-radius: 14px;
                   background: #F1F5FC; color: #0E1E35; text-decoration: none; transition: background-color .18s ease; }
#hxPanel .hw-more:focus-visible{ outline: 2px solid #0760C6; outline-offset: 2px; }
.hw-mg{ display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 700; line-height: 1.25; color: #0760C6; }
.hw-mg:first-child{ margin-top: 0; }
.hw-mg svg{ flex: none; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s cubic-bezier(.22, .61, .36, 1); }
#hxPanel .hw-more:active{ background: #E3ECF9; }
@media (hover: hover) and (pointer: fine){
  #hxPanel .hw-more:hover{ background: #E3ECF9; }
  #hxPanel .hw-more:hover .hw-mg svg{ transform: translateX(3px); }
}

/* desktop: the card stays in view at the end of the rail and the tiles pass under it */
@media (min-width: 761px){
  .hw-end{ position: sticky; right: 0; z-index: 3; flex-basis: 138px; padding-right: 6px; background: #FFFFFF; box-shadow: 0 -6px 0 0 #FFFFFF, 0 22px 0 0 #FFFFFF; }
  .hw-rail.is-cl .hw-end{ width: 130px; }
  .hw-end::before{ content: ""; position: absolute; right: 100%; top: -6px; bottom: -22px; width: 30px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF 82%); pointer-events: none; }
}

/* ---------- All Work: the seven doors wear the same card ---------- */
#hx .hx-panel[data-cur="all"] .hx-rail{ height: calc(var(--railh) + 28px); padding: 6px 6px 22px; margin: -6px -6px -22px; }
#hx .hx-door{ gap: 0; border-radius: 14px; background: #FFFFFF; overflow: hidden;
              box-shadow: 0 0 0 1px #D6E0EE, 0 1px 2px rgba(16, 42, 88, .05), 0 10px 18px -12px rgba(16, 42, 88, .34);
              transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s cubic-bezier(.22, .61, .36, 1); }
#hx .hx-door .hx-ph{ margin: 6px 6px 0; border-radius: 8px; }
#hx .hx-door .hx-dv{ flex: none; justify-content: space-between; margin-top: 6px; padding: 8px 10px 9px; border-top: 1px solid #E1E8F2; background: #F1F5FC; font-size: 13px; transition: background-color .2s; }
/* a door leads to a tab, not into a case: it keeps its plain arrow (no round seat), which also leaves room for the longest label */
#hx .hx-door:active{ transform: scale(.985); transition-duration: .08s; }
#hx .hx-door:focus-visible{ outline: 2px solid #0760C6; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  #hx .hx-door:hover{ transform: translateY(-3px); box-shadow: 0 0 0 1px #B9CCE6, 0 2px 4px rgba(16, 42, 88, .06), 0 18px 26px -16px rgba(16, 42, 88, .46); }
  #hx .hx-door:hover .hx-dv{ background: #E4EDFA; }
}
/* a door narrower than its link: the link sets on two lines (as before); the two reserved lines now include the base's own padding */
@container (max-width: 1300px){
  #hx .hx-door .hx-dv{ height: calc(2.4em + 17px); }
}
/* tablet widths: seven doors are narrow enough for a label to need three lines, so every door reserves three */
@media (min-width: 761px){
  @container (max-width: 960px){
    #hx .hx-door .hx-dv{ height: calc(3.6em + 17px); padding-inline: 8px; }
  }
}

@media (max-width: 760px){
  html body #hx.hx #hxPanel.hw-on{ padding: 14px 0 14px 14px; }   /* 14px above and below; the rail runs to the frame's edge */
  .hw-rail{ padding-right: 14px; }
  #hxPanel .hw-t{ flex-basis: 160px; }
  /* 160px cards: the round seat is dropped and the arrow stays blue, so the longest client names are not cut */
  #hxPanel .hw-t .hw-tx{ padding-inline: 7px; }
  #hxPanel .hw-t .hw-tx b{ padding-right: 18px; }
  #hxPanel .hw-t .hw-tx::before{ display: none; }
  #hxPanel .hw-t .hw-tx::after{ right: 6px; top: 9.5px; width: 14px; height: 14px; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; }
  .hw-c{ width: 214px; }
}