/* ==========================================================================
   home-allwork-ourwork · ourwork.css — LIVE on index.html (2026-09-27)
   Owner-approved preview: /doctor/mobile-work-tabs-v30.html ("Purpose First ·
   two lines"). The rules are that preview's, in its cascade order
   (mobile-work-tabs/r2.css → our.css → r6.css → r7.css → v30.css), 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 (r2.css) ------------------ */
  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 (our.css) --------------------------------------------- */
  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 (r7.css) ----------------------- */
@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 (v30.css) -- */
@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; }
}