/* ==========================================================================
   home-allwork-ourwork · our-work-card.css — LIVE on index.html (2026-09-27)
   Owner-approved preview: [archived] ("Purpose First ·
   two lines"). The rules are that preview's, in its cascade order
   ([archived] → [archived] → [archived] → [archived] → [archived]), keeping only
   what v30 uses. Every visible rule sits inside @media (max-width:760px);
   above that the new pieces are hidden and the desktop hero is untouched.
       Proof Before You Decide
       Our Work.
       Real results, video audits, client reviews and the pages we've built.
       ▦ All Work        ↗ Google Ads       ▶ Google Ads Audits   ★ Client Reviews
         View Everything   Success Stories    Video Audit Library   Feedback & Testimonials
       ●● Client Wall    ▯ Landing Pages    ▭ Websites            ↗ Meta Ads
         Brands We've…     Lead-Focused…      Websites We've…       Campaign Success Stories
   Undo: delete the two home-allwork-ourwork lines in index.html.
   ========================================================================== */

/* ---- desktop: none of this is drawn --------------------------------------- */
#hx .s4-tabs .mw-i, #hx .s4-tabs .mw-t, #hx .mw-head, #hx .mw-eye, #hx .mw-why { display: none; }

@media (max-width: 760px) {
  /* ---- the buttons: icon + the owner's two lines ([archived]) ------------------ */
  html body #hx.hx .s4-tabs .hx-tab > .hx-ti,
  html body #hx.hx .s4-tabs .hx-tab > .hx-tt { display: none; }
  html body #hx.hx .s4-tabs .mw-i { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; }
  html body #hx.hx .s4-tabs .mw-i svg { display: block; width: 19px; height: 19px; }
  html body #hx.hx .s4-tabs .mw-t { display: flex; flex-direction: column; min-width: 0; }
  html body #hx.hx .s4-tabs .mw-n {
    font-size: 13px; font-weight: 700; line-height: 1.15; color: #22324B; letter-spacing: -.005em;
    white-space: nowrap; transition: color .3s ease;
  }
  html body #hx.hx .s4-tabs .mw-c {
    font-size: 11px; font-weight: 500; line-height: 1.2; color: #56627A; margin-top: 2px; white-space: nowrap;
  }
  html body #hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-n { color: var(--brand); }
  html body #hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-c { color: #3D5475; }

  /* ---- the card's base ([archived]) --------------------------------------------- */
  html body #hx.hx .mw-head {
    display: block; margin: 0; padding: 12px 16px 0;
    font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink);
  }
  html body #hx.hx .mw-head .mw-dot { color: var(--brand); }
  html body #hx.hx .s4-tabs { height: auto; }
  html body #hx.hx .s4-tabs .hx-tab { box-shadow: none; min-width: 0; }
  html body #hx.hx .s4-tabs .hx-tab:nth-child(-n+4) { box-shadow: none; }
  html body #hx.hx .s4-tabs .hx-tab::after { display: none; }
  html body #hx.hx .s4-work { padding-top: 12px; }
}
@media (max-width: 359px) {
  html body #hx.hx .mw-head { padding: 12px 14px 0; font-size: 18px; }
}

/* ---- the opening: why · what · what is inside ([archived]) ----------------------- */
@media (max-width: 760px) {
  html body #hx.hx .mw-eye {
    display: block; margin: 0; padding: 15px 16px 0;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--brand); line-height: 1.3;
  }
  html body #hx.hx .mw-head { padding: 3px 16px 0; font-size: 21px; }
  html body #hx.hx .mw-why {
    display: block; margin: 0; padding: 4px 16px 0;
    font-size: 13.5px; line-height: 1.4; color: #4F5B6C; font-weight: 500; text-wrap: pretty;
  }
}
@media (max-width: 359px) {
  html body #hx.hx .mw-eye { padding: 14px 14px 0; }
  html body #hx.hx .mw-head { padding: 3px 14px 0; font-size: 20px; }
  html body #hx.hx .mw-why { padding: 4px 14px 0; font-size: 13px; }
}

/* ---- the layout: centred opening, two rows of four, two lines each ([archived]) -- */
@media (max-width: 760px) {
  html body #hx.hx .mw-eye, html body #hx.hx .mw-head, html body #hx.hx .mw-why { text-align: center; }
  html body #hx.hx .mw-why { padding-left: 22px; padding-right: 22px; }
  html body #hx.hx .s4-tabs {
    --x: calc((100% - 306.5px) / 4);
    padding: 10px 2px 8px; column-gap: 0; row-gap: 2px; align-items: stretch;
    grid-template-columns: calc(70px + var(--x)) calc(73px + var(--x)) calc(81px + var(--x)) calc(82.5px + var(--x));
    grid-template-rows: auto auto;
  }
  html body #hx.hx .s4-tabs .hx-tab {
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 0;
    padding: 7px 3px 7px; border-radius: 11px; min-width: 0; transition: background-color .35s ease;
  }
  html body #hx.hx .s4-tabs .mw-i { width: 19px; height: 19px; margin-bottom: 4px; }
  html body #hx.hx .s4-tabs .mw-i svg { width: 18px; height: 18px; }
  html body #hx.hx .s4-tabs .mw-t { align-items: center; width: 100%; }
  html body #hx.hx .s4-tabs .mw-n { font-size: 12.5px; line-height: 1.12; white-space: normal; text-wrap: balance; text-align: center; }
  html body #hx.hx .s4-tabs .mw-c {
    display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.18; font-weight: 500; color: #56627A;
    white-space: normal; text-wrap: balance; text-align: center;
  }
  html body #hx.hx .s4-tabs .hx-tab:hover { background: #F4F7FC; }
  html body #hx.hx .s4-tabs .hx-tab[aria-selected="true"] { background: #E9F1FC; }
  html body #hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-n { color: var(--brand); }
  html body #hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-c { color: #3D5475; }
}
@media (min-width: 414px) and (max-width: 760px) {
  html body #hx.hx .s4-tabs .mw-n { font-size: 13px; }
  html body #hx.hx .s4-tabs .mw-c { font-size: 11px; }
  html body #hx.hx .s4-tabs { --x: calc((100% - 321px) / 4);
    grid-template-columns: calc(73px + var(--x)) calc(76.5px + var(--x)) calc(85px + var(--x)) calc(86.5px + var(--x)); }
}
@media (max-width: 389px) {
  html body #hx.hx .s4-tabs .hx-tab { padding: 7px 1px 7px; border-radius: 0; }
  html body #hx.hx .s4-tabs .hx-tab:nth-child(-n+3) { box-shadow: inset -1px 0 0 var(--line2), inset 0 -1px 0 var(--line2); }
  html body #hx.hx .s4-tabs .hx-tab:nth-child(4) { box-shadow: inset 0 -1px 0 var(--line2); }
  html body #hx.hx .s4-tabs .hx-tab:nth-child(n+5):not(:last-child) { box-shadow: inset -1px 0 0 var(--line2); }
}
@media (max-width: 359px) {
  html body #hx.hx .mw-why { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 350px) {
  html body #hx.hx .s4-tabs {
    --x: calc((100% - 274.5px) / 4);
    grid-template-columns: calc(67.5px + var(--x)) calc(75px + var(--x)) calc(66px + var(--x)) calc(66px + var(--x));
  }
  html body #hx.hx .s4-tabs .mw-n { font-size: 12px; }
}


/* ==========================================================================
   CLOSED — LIVE 2026-10-01. Owner-approved preview: [archived] direction 5.
   Phones only; above 760px nothing here is drawn.

   Before: a full-width line and a change of ground (pale above, white below)
   cut across the Our Work card between the eight tabs and the cards, and the
   selected tab was a faint tint, so the cards did not read as the tab's.

   Now the whole card is ONE pale surface holding its title, the tabs and the
   cards, with no line between them. Every tab is a soft key; the selected key
   is white and raised in the work cards' own material, so white = what is
   open. The cards start on the keys' left edge. Under the cards sits the same
   quiet position bar that Success Stories and Our Services end with (.mw-bar,
   built by our-work-card.js): it shows there is more to the side and where you are,
   and it closes the section.

   Every rule carries #hx.hx.hx so it outranks the rules above and the hero's
   other stylesheets whatever order they load in.
   UNDO: 
   ========================================================================== */
#hx .mw-bar { display: none; }

@media (max-width: 760px) {
  /* one ground for the hero and the card: the hero's lower edge carries the line */
  html body #hx.hx.hx .s4 { background: var(--field, #EAF1FB); border-bottom: 1px solid var(--edge, #C3D4EB); }
  html body #hx.hx.hx .s4-field { border-bottom-color: transparent; }

  /* the surface */
  html body #hx.hx.hx .s4-card { background: #DCE7F8; border-color: transparent; border-radius: 20px; }
  html body #hx.hx.hx .mw-why { color: #44546E; }

  /* the keys */
  html body #hx.hx.hx .s4-tabs { margin-top: 6px; border-bottom-color: transparent; position: relative; z-index: 1; }
  html body #hx.hx.hx .s4-tabs .hx-tab:nth-child(n) { position: relative; z-index: 0; background: transparent; box-shadow: none; border-radius: 11px; }
  html body #hx.hx.hx .s4-tabs .hx-tab::before {
    content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 10px; background: #EAF1FC;
    transition: background-color .25s ease, box-shadow .25s ease;
  }
  html body #hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"]::before {
    background: #fff; box-shadow: 0 0 0 1px #D6E0EE, 0 1px 2px rgba(16, 42, 88, .05), 0 10px 18px -12px rgba(16, 42, 88, .34);   /* the work cards' own shadow */
  }
  html body #hx.hx.hx .s4-tabs .hx-tab .mw-c { color: #4A5870; }
  html body #hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-n { color: #004594; }
  html body #hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-c { color: #33496B; }

  /* the cards, then the bar that closes the surface */
  html body #hx.hx.hx #hxPanel { padding-left: 10px; padding-bottom: 12px; }
  html body #hx.hx.hx #hxPanel .mw-bar { display: block; position: relative; height: 18px; margin: 6px 14px 0 4px; cursor: pointer; touch-action: none; }
  html body #hx.hx.hx #hxPanel .mw-bar[hidden] { display: none; }
  html body #hx.hx.hx #hxPanel .mw-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: #C3D1E7; }
  html body #hx.hx.hx #hxPanel .mw-bar i { position: absolute; left: 0; top: 5px; height: 8px; min-width: 28px; border-radius: 8px; background: #FAFBFC; box-shadow: inset 0 0 0 1px #B4C2D8; }
}
@media (max-width: 389px) {
  html body #hx.hx.hx .s4-tabs .hx-tab::before { inset: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #hx.hx.hx .s4-tabs .hx-tab::before { transition: none; }
}