/* ==========================================================================
   desktop-parity/stories.css — Success Stories (#success-stories) and Client
   Proof (#hp1) on tablets and desktops (768px and wider). Written 2026-10-03.

   WHY
   ---
   On 2026-10-02 the owner approved quieter versions of these two sections for
   phones (stories-proof-phone/phone.css). The desktop sections already had the
   phone's joined surface: the chosen tab is the surface's own colour and runs
   into it. What the desktop still had was the furniture the owner asked to
   remove: a "Next: Video Audits" box that repeats a tab name the row above
   already shows, a second count beside the description where the tab already
   carries the number (at widths where the tabs hide their counts, the line
   keeps it), and a closing link in bare blue text where the site's closing
   links are now dark words with a small arrow plate.

   This file carries those three changes to wide screens and fixes one defect
   from 768px to 960px, where the six Success Stories tabs did not fit: each
   label ran past its tab, so the counts touched the next tab's icon, and the
   row ran past the surface.

   Kept on wide screens on purpose: the position bar under each rail and Client
   Proof's previous / next buttons. On phones a swipe moves the rail. With a
   mouse those controls are how it moves.

   Six ids on every selector: the same weight as stories-proof-phone/phone.css,
   above the older layers (home-proof/proof-family.css uses five).

   UNDO: delete the desktop-parity/stories.css line in index.html,
   google-ads.html, meta-ads.html, social-media.html, website-development.html
   and landing-page.html.
   ========================================================================== */

@media (min-width: 768px){

  /* ============================================== SUCCESS STORIES */
  /* "Next: …" repeats the tab row: the row is the one place a tab name is a control */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-next{ display: none !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-foot{ justify-content: flex-end !important; margin-top: 10px !important; }
  /* the close: one quiet link — dark words, a small white arrow plate on the surface */
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-cta{
    gap: 10px !important; min-height: 44px !important;
    font-size: 14.5px !important; font-weight: 650 !important; color: #0B0D12 !important; text-decoration: none !important;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-cta svg{
    box-sizing: border-box; width: 28px !important; height: 28px !important; padding: 6.5px; border-radius: 9px;
    background: #FFFFFF; color: #004594; stroke: currentColor; stroke-width: 2;
    transition: transform .2s ease;
  }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-cta:hover{ text-decoration: none !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-cta:hover svg{ transform: translateX(2px); }

}

/* the second count goes only where the tab already shows the number. Below
   these widths the tabs hide their counts (Client Proof's own rule below
   1200px; Success Stories' up to 900px, see further down), so the line keeps
   it there. Somewhere on screen the count always shows. */
@media (min-width: 901px){
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-meta .ow5-cnt{ display: none !important; }
}
@media (min-width: 1200px){
  html body #hp1#hp1#hp1#hp1#hp1#hp1 .cpf-meta .cpf-cnt{ display: none !important; }
}

/* the six Success Stories tabs fit from 768px. The tabs never shrink: a
   squeezed tab lets its words run into its own right padding, so the chosen
   plate looked lopsided (14px left / 4px right at 768px). Instead each band
   sets equal side padding to the widest the row allows — measured: the six
   tabs' own content is 622px with the counts out (768–900), 725px with them
   (901–1023) and 764px at desktop type (1024+). The live desktop rule (20px)
   squeezed the row between 1024 and ~1075px as well. */
@media (min-width: 768px) and (max-width: 1023px){
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2-tabs{ gap: 2px !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tl{ font-size: 14px !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tc{ font-size: 11.5px !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2 .ow5-tab,
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab{ flex: none !important; gap: 7px !important; padding: 0 clamp(9px, calc(8.4vw - 66.5px), 20px) !important; }
}
/* up to 900px the counts step out of the tabs, as Client Proof's do at this width, and stay on the description line */
@media (min-width: 768px) and (max-width: 900px){
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tc{ display: none !important; }
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2 .ow5-tab,
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab{ padding: 0 clamp(7px, calc(8.3vw - 57.5px), 18px) !important; }
}
@media (min-width: 1024px) and (max-width: 1099px){
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .s2 .ow5-tab,
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-tabs .ow5-tab{ flex: none !important; padding: 0 clamp(14px, calc(8.4vw - 71px), 20px) !important; }
}
@media (prefers-reduced-motion: reduce){
  html body #success-stories#success-stories#success-stories#success-stories#success-stories#success-stories .ow5-cta svg{ transition: none; }
}