/* Own The Job — shared responsive rules, one file for every page.
   Mobile first: bottom contact bar + Call/Menu; desktop nav from 900px. */
.co-desktop-nav { display: none; }
.co-mobile-only { display: flex; }
.co-sticky-bar { display: grid; }
body { padding-bottom: 60px; }
@media (min-width: 900px) {
  .co-desktop-nav { display: flex; }
  .co-mobile-only { display: none; }
  .co-sticky-bar { display: none; }
  body { padding-bottom: 0; }
}

/* 10.2 win-rate sensitivity grid: 2 up on phones, 4 up on desktop */
.co-sens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #C9C6BE; border: 1px solid #C9C6BE; }
@media (min-width: 900px) { .co-sens { grid-template-columns: repeat(4, 1fr); } }

/* 10.3 platform costs: stacked cards below 700px, real table above */
.co-plat-table { display: none; }
.co-plat-cards { display: grid; }
@media (min-width: 700px) { .co-plat-table { display: block; } .co-plat-cards { display: none; } }


/* 11.x calculator results: sticky on desktop only, never taller than the viewport */
.co-sticky-results { position: static; }
@media (min-width: 900px) {
  .co-sticky-results { position: sticky; top: 84px; max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Trade chip row: even grid so nothing is left orphaned on its own line */
.co-trade-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .co-trade-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .co-trade-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* generated hover and focus states */
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #E6FF70; transform: translateY(-2px);}
.co-f3:focus-visible{outline: 3px solid #D8FF3E; outline-offset: 3px;}
.co-h4:hover{border-color: #F7F6F3; transform: translateY(-2px);}
.co-h5:hover{color: #D8FF3E; border-color: #D8FF3E;}
.co-h6:hover{border-color: #D8FF3E; transform: translateY(-4px);}
.co-h7:hover{background: #0B0C0E; color: #D8FF3E;}
.co-h8:hover{color: #D8FF3E;}
.co-h9:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{border-color: #D8FF3E;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-f2:focus-visible{outline: 3px solid #0B0C0E; outline-offset: 3px;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-f3:focus-visible{outline: 2px solid #D8FF3E; outline-offset: 1px;}
.co-h4:hover{background: #E6FF70;}
.co-h5:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #E6FF70;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #0B0C0E; color: #F7F6F3;}
.co-h3:hover{background: #E6FF70;}
.co-h4:hover{border-color: #0B0C0E;}
.co-h5:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #E6FF70;}
.co-f3:focus-visible{outline: 3px solid #D8FF3E; outline-offset: 3px;}
.co-h4:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #EFEDE7;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #E6FF70;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #E6FF70;}
.co-h3:hover{color: #F7F6F3;}
.co-h0:hover{color: #5A6068;}
.co-h1:hover{background: #23262B;}
.co-h2:hover{background: #E6FF70;}
.co-h3:hover{color: #F7F6F3;}

/* ------------------------------------------------------------------
   Audit repairs, 1 September 2026. Appended after the generated
   rules above, which are emitted once per page into this one shared
   file. Because they all use the same .co-h* class names, the last
   definition of each class wins on every page, and many of them are
   defeated anyway by the inline style on the element. The rules below
   repair the three hover states that land unreadable and restore the
   two the inline styles were swallowing. The real fix is upstream:
   the generator should namespace its output per page.
   ------------------------------------------------------------------ */

/* Focus ring that reads on the cream background and on the dark
   sections. Dark inner ring carries the light pages, lime outer ring
   carries the dark ones. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.co-f2:focus-visible,
.co-f3:focus-visible {
  outline: 3px solid #D8FF3E;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #0B0C0E;
}

/* Footer links: the winning .co-h2 rule paints a lime block behind
   grey text, 2.9:1. Brighten the text instead, as the other footer
   link classes do. */
.co-h2[style*="color: #8A8F96"]:hover { background: none; color: #F7F6F3 !important; }

/* About page work buttons: lime block behind near-white text, 1.0:1.
   Brighten the border instead. */
.co-h2[style*="color: #F7F6F3"]:hover { background: none; border-color: #F7F6F3 !important; }

/* Monthly plan cards: the winning .co-h4 rule turns the text near-white
   on a white card, 1.1:1. */
.co-h4[style*="background: #FFFFFF"]:hover { color: #0B0C0E; border-color: #0B0C0E !important; }

/* Primary dark button: the authored .co-h1 hover is blocked by the
   inline background, so it currently has no hover state at all. */
.co-h1[style*="background: #0B0C0E"]:hover { background: #23262B !important; }

/* Footer links on the other classes: same, blocked by the inline colour. */
.co-h3[style*="color: #8A8F96"]:hover,
.co-h4[style*="color: #8A8F96"]:hover,
.co-h5[style*="color: #8A8F96"]:hover,
.co-h9[style*="color: #8A8F96"]:hover,
.co-h5[style*="color: #C9CBCF"]:hover,
.co-h9[style*="color: #C9CBCF"]:hover { color: #F7F6F3 !important; }
.co-h8[style*="color: #F7F6F3"]:hover { color: #D8FF3E !important; }

/* The "Who we work with" panel on the home page shipped an inline
   `position: sticky; top: 84px`, with no breakpoint guard. On desktop it pins
   beside the trades grid, which is right. On a phone the layout stacks, so a
   531px panel pinned at the top of an 812px viewport froze the upper 615px of
   the screen for about 1,520px of scrolling, roughly two screenfuls, with only
   a 136px strip of content moving underneath it. Sticky is now desktop only,
   matching how .co-sticky-results is already guarded. */
.co-sticky-side { position: static; }
@media (min-width: 900px) {
  .co-sticky-side { position: sticky; top: 84px; align-self: start; }
}

/* Skip link. Off screen until it takes focus, then it lands under the
   sticky header rather than behind it. */
.co-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0B0C0E;
  color: #D8FF3E;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 0 0 4px 0;
  text-decoration: none;
}
.co-skip:focus {
  left: 0;
}
/* The sticky header would otherwise cover the top of whatever the skip link
   jumps to. */
#main { scroll-margin-top: 76px; }

/* [hidden] loses to an inline display value, and this site sets display
   inline almost everywhere. Learned the hard way on another build. */
[hidden] { display: none !important; }

/* The before-and-after captures used to ship as two <img> elements with one
   hidden by CSS, which downloads both. They are one <picture> now. The
   desktop and mobile crops have different ratios, so the box is pinned at
   each breakpoint to keep the layout from jumping. */
.co-shot img { aspect-ratio: 1200 / 657; }
@media (min-width: 700px) { .co-shot img { aspect-ratio: 1600 / 731; } }

/* Safety net for the bug fixed on 1 September 2026.
   The generator writes `position: sticky` into inline style attributes, where
   no media query can reach it. One such panel on the home page pinned itself
   at the top of a phone screen and painted over the content scrolling beneath
   it, which read as the page having stopped scrolling.
   Anything inside <main> that ships an inline sticky is unpinned below the
   desktop breakpoint. The site header sits outside <main>, so it is untouched
   and stays pinned as intended. Nothing currently matches this rule: it exists
   so the bug cannot come back through a re-render. */
@media (max-width: 899px) {
  main [style*="position: sticky"],
  main [style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }
}