/* ===========================================================================
   The Pipeline Fixer — shared shell stylesheet
   Created 18 Aug 2026, for the page split.

   WHAT THIS IS. Every rule needed to render the site's shell: design tokens,
   reset, shared type, the top bar and its nav, breadcrumbs, buttons, the
   generic section rhythm, and the footer with its NAP block. Nothing
   page-specific. A page that links this file plus its own small <style>
   block gets a header and footer identical to every other page's.

   WHY IT EXISTS. index.html carries ~64KB of inline CSS because it is one
   long page doing eight jobs. Shipping all of that to a 600-word service
   page would be absurd, and copying the shell into each new file would
   guarantee the eight copies drift apart — the same failure the structure
   plan warns about for the @graph, and for the same reason: each copy is a
   confident claim and they end up contradicting each other.

   THE ONE OUTSTANDING PIECE. index.html has NOT been migrated onto this
   file. Its inline <style> still carries its own copy of the shell rules
   below, deliberately: extracting them from a 200KB single file is a real
   refactor with real risk to the page that currently earns everything, and
   it is not what the split needed. So until that migration happens:

       A CHANGE TO THE SHELL IS A CHANGE IN TWO PLACES.
       Here, and in the <style> block of index.html.

   That is a known, documented duplication, not an oversight. Migrating
   index.html onto this file is the change that retires it, and it should
   happen before there are nine pages rather than after.

   Load order matters: link this file BEFORE any page-level <style>, so the
   page can override the shell rather than fighting it.
   =========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#17181A;
  --bone:#EDEBE4;
  --paper:#F8F7F3;
  --line:#D9D6CC;
  --slate:#5B5F63;
  --accent:#22345A;
  --accent-dark:#172642;
  --rust:#B3431E;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --maxw:1080px;
}

/* ---------- reset + base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}
footer a:focus-visible{outline-color:#8fa6d4}

/* skip link — keyboard users shouldn't have to tab the whole page */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
  font-family:var(--mono);font-size:13px;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
}
.section-index{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;color:var(--slate);display:block;margin-bottom:14px;
}
/* h1 is included here and not only h2: on an inner page the page title is
   an h1, and it should look exactly like a homepage section title. */
h1.section-title,
h2.section-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,4vw,38px);line-height:1.1;
  letter-spacing:-0.02em;max-width:22ch;
}
.head .kicker{margin-top:16px;font-size:16px;color:var(--slate);max-width:56ch}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:rgba(237,235,228,.9);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:50;
}
.topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;padding-bottom:14px;gap:16px;
}
.topbar .name{
  font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;
}
.topbar .bar-cta{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  transition:border-color .15s ease,background .15s ease;white-space:nowrap;
}
.topbar .bar-cta:hover{border-color:var(--ink);background:var(--paper)}

/* ---------- header nav ----------
   Four text slots plus the CTA. The text links collapse under 560px and
   leave the CTA; a nav that wraps to two rows on a phone costs more than
   the slots are worth. Revisit that when there are nine URLs and a
   disclosure toggle starts to earn its keep.

   aria-current="page" marks the section the visitor is already in. It is
   drawn at full opacity rather than with a colour or a rule, because at
   12.5px mono a weight change reads as a rendering artefact. */
.topnav{display:flex;align-items:center;gap:22px}
.topnav a:not(.bar-cta){
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;opacity:.68;white-space:nowrap;
  transition:opacity .15s ease;
}
.topnav a:not(.bar-cta):hover,
.topnav a:not(.bar-cta):focus-visible{opacity:1}
.topnav a[aria-current="page"]{opacity:1;font-weight:600}

/* ---------- breadcrumbs ----------
   On every page except the homepage, directly under the topbar and above
   the h1, and always matched by a BreadcrumbList node in that page's
   @graph. The pair is what produces "thepipelinefixer.com > Services >
   Sales Diagnostic" in a result instead of a raw URL; one without the
   other produces nothing at all.

   The crumb rail shares .wrap's 28px gutter at every width so it lines up
   with the h1 directly beneath it. Do not give it its own value. */
.crumbs{border-bottom:1px solid var(--line)}
.crumbs ol{
  list-style:none;margin:0 auto;padding:12px 28px;max-width:var(--maxw);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--slate)}
.crumbs li + li::before{content:"/";opacity:.4}
.crumbs a{color:var(--ink);text-decoration:none;opacity:.7}
.crumbs a:hover{opacity:1}
.crumbs [aria-current="page"]{opacity:.6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;
  padding:15px 24px;border-radius:10px;text-decoration:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
  border:1px solid transparent;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{transform:translateY(-2px);background:var(--accent-dark)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn.ghost.on-dark{color:var(--paper);border-color:#3a3e45}
.btn.ghost.on-dark:hover{border-color:var(--paper)}

/* A ghost button on a dark section inherits color:var(--ink) from the rule
   above, which is very nearly the dark background it is sitting on: the
   border shows, the label does not. On 19 Aug 2026 that was the state of the
   "WhatsApp me" button in the closing CTA of /about/, /sales-diagnostic/ and
   /sales-fix/ - three empty-looking outlines on the last thing a visitor
   sees before deciding whether to make contact.

   The .on-dark modifier above already existed and already fixed it. It was
   simply not on those three buttons; the homepage got it right and the three
   pages built in the 18 Aug split did not. A modifier class that has to be
   remembered on every copy of a component will be forgotten again, so the
   dark sections now claim their own ghost buttons by descent and the class
   is no longer load-bearing.

   Both dark section classes are listed. They are defined per page in each
   file's inline <style>, not here, so if a third dark section is ever added
   its selector belongs in this list on the same day. */
.close-cta .btn.ghost,
.midcta .btn.ghost{color:var(--paper);border-color:#3a3e45}
.close-cta .btn.ghost:hover,
.midcta .btn.ghost:hover{border-color:var(--paper);color:#fff}

/* ---------- generic section ---------- */
section.block{padding:64px 0;border-top:1px solid var(--line)}
.block .head{margin-bottom:40px}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.09)}
footer .wrap{
  padding:44px 28px 40px;
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;
}
footer .footer-brand{
  font-family:var(--display);font-weight:600;font-size:17px;color:#fff;
  letter-spacing:-0.01em;margin-bottom:6px;
}
footer .footer-tag{font-family:var(--body);font-size:13.5px;color:#8a8e93;max-width:32ch}
footer .footer-links{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
}
footer .footer-links a{color:#b7bbc0;text-decoration:none;border-bottom:1px solid rgba(183,187,192,.35)}
footer .footer-links a:hover{color:#fff;border-color:#fff}
/* NAP block. Deliberately quiet typographically — it exists to be
   consistent and crawlable, not to compete with the CTA. Every instance
   of it across the site must be byte-identical; that is the whole value. */
footer .footer-nap{
  font-style:normal;font-family:var(--body);font-size:13px;line-height:1.55;
  color:#8a8e93;margin-top:18px;display:flex;flex-direction:column;gap:2px;
}
footer .footer-nap .nap-name{color:#b7bbc0}
footer .footer-nap a{
  color:#b7bbc0;text-decoration:none;
  border-bottom:1px solid rgba(183,187,192,.28);align-self:flex-start;
}
footer .footer-nap a:hover{color:#fff;border-color:#fff}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .topnav{gap:14px}
  .topnav a:not(.bar-cta){font-size:11.5px}
}
@media (max-width:560px){
  section.block{padding:48px 0}
  .topbar .bar-cta{padding:7px 12px;font-size:11.5px}
  .topnav a:not(.bar-cta){display:none}
  .topnav{gap:0}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:20px}
  footer .footer-links{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}