/* ============================================================
   Boyd & Co — Brand Style Guide v2.0 layer
   Load AFTER the existing stylesheet. Changes styling only;
   no content or markup restructuring required.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --orange-l:#FFB347; --orange:#FF8C00; --orange-d:#E8430A;
  --grad:linear-gradient(135deg,#FFB347,#FF8C00,#E8430A);
  --teal:#0EA5E9; --teal-d:#0284C7;
  --teal-grad:linear-gradient(135deg,#0EA5E9,#0284C7);
  --emerald:#10B981; --emerald-d:#059669;
  --emerald-grad:linear-gradient(135deg,#10B981,#059669);
  --navy:#1E2235; --navy-d:#13162A;
  --bg:#F8FAFC; --muted:#64748B; --border:#E2E8F0;
  --orange-tint:#FFF4E6; --teal-tint:#E0F2FE; --emerald-tint:#D1FAE5;
  --on-dark:#94A3B8;

  /* remap the old Ink & Signal tokens to guide values */
  --ink:#1E2235; --ink-2:#13162A; --slate:#64748B; --slate-l:#94A3B8;
  --paper:#F8FAFC; --signal:#FF8C00; --signal-l:#FFB347; --signal-d:#E8430A;
  --r-sm:6px; --r:10px; --r-card:12px; --r-lg:16px;
}

/* ---------- 2. Typography (Outfit + guide scale) ---------- */
body{font-family:'Outfit','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--navy)}
h1{font-weight:800;line-height:1.15;letter-spacing:-.025em}
h2{font-weight:700;line-height:1.25;letter-spacing:-.02em}
h3{font-weight:600;line-height:1.4;letter-spacing:-.01em}
.eyebrow,.tag,.lbl,.meta{font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}

/* eyebrows/labels are teal per guide (teal = information hierarchy) */
.sec-head .eyebrow,.svc .meta,.card .lbl,.crumbs{color:var(--teal-d)}
.hero .eyebrow,.page-hero .eyebrow{color:var(--on-dark)}
.ai-panel .eyebrow,.card.lead .lbl{color:#7DD3FC}

/* ---------- 3. Surfaces: navy replaces ink ---------- */
.hero{background:radial-gradient(1300px 900px at 50% 32%,#243052 0%,var(--navy) 54%,#0D1020 100%)}
.page-hero{background:radial-gradient(900px 520px at 72% -10%,#243052,var(--navy) 62%)}
.vignette{background:
  radial-gradient(130% 100% at 50% 40%,transparent 52%,rgba(19,22,42,.5)),
  linear-gradient(to bottom,rgba(19,22,42,.35) 0%,transparent 18%,transparent 55%,rgba(19,22,42,.74) 100%)}
nav{background:rgba(30,34,53,.42);border-bottom:1px solid rgba(248,250,252,.08)}
nav.light{background:rgba(248,250,252,.9);border-color:var(--border)}
nav.light .logo{color:var(--navy)}
nav.light .nav-links{color:var(--muted)}
.nav-links a:hover{color:var(--orange)}
.bmark{background:var(--navy-d);border:1px solid rgba(248,250,252,.14);color:var(--orange)}
.proof{background:linear-gradient(180deg,var(--navy-d),var(--navy))}
.proof .pf small{color:rgba(248,250,252,.66)}
.card.lead,.ai-panel,.band,.take.dark{background:var(--navy)}
.card.lead{border-color:var(--navy)}
.band{background:var(--navy)}
.band p{color:rgba(248,250,252,.72)}
footer{border-top:1px solid var(--border);color:var(--muted)}

/* ---------- 4. Cards & borders ---------- */
.card,.sector,.panel,.tl,.val,.take{border-color:var(--border);border-radius:var(--r-card)}
.card:hover{border-color:var(--muted)}
.sector:hover{border-color:var(--orange)}
.card p,.sector small,.sec-head p,.svc p,.take p,.val small,.tl small{color:var(--muted)}
.glyph{background:var(--orange-tint);color:var(--orange-d)}

/* ---------- 5. Buttons (guide §07, radius 10px) ---------- */
.btn{border-radius:var(--r);font-weight:600;font-size:1rem;background:var(--grad);color:#fff}
.btn:hover{background:linear-gradient(135deg,#FF8C00,#E8430A);box-shadow:0 10px 26px rgba(232,67,10,.3)}
.btn.ghost{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff;box-shadow:none}
.btn.ghost-inv,.hero .btn.ghost,.page-hero .btn.ghost,.band .btn.ghost{
  background:transparent;border:1.5px solid #fff;color:#fff}
.btn.ghost-inv:hover,.hero .btn.ghost:hover,.band .btn.ghost:hover{
  background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.btn-teal{background:var(--teal-grad);color:#fff}
.btn-teal:hover{background:linear-gradient(135deg,#0284C7,#0369A1);box-shadow:0 10px 26px rgba(2,132,199,.3)}

/* ---------- 5b. Legacy button variants ----------
   The css/style.css pages carry .btn-primary / .btn-outline / .btn-gold
   next to .btn. These rules sit after the .btn rule above, so source
   order settles the tie at equal specificity — no :not() chains. */

/* .btn-primary needs no override: .btn above already supplies the v2
   gradient. Only the legacy hover fade is neutralised. */
.btn-primary:hover{opacity:1}

/* legacy .btn-outline maps to the v2 ghost — navy border on light */
.btn-outline{background:none;border:1.5px solid var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff;box-shadow:none}

/* legacy .btn-gold — high-emphasis CTA on dark bands. Deliberately a
   warm solid, not a gradient: #FFB347 with navy-dark text is 10.03:1,
   where the primary gradient with white text is 2.33:1 on the same
   navy band. Do not "fix" this back to a gradient. See CLAUDE.md. */
.btn-gold{background:var(--orange-l);border:1.5px solid var(--orange-l);
  color:var(--navy-d);font-weight:700}
.btn-gold:hover{background:var(--orange);border-color:var(--orange);
  color:var(--navy-d);box-shadow:0 10px 26px rgba(255,140,0,.3)}

/* legacy .btn-ghost had NO rule in css/style.css — 15 buttons pointing
   at an undefined class, four of them rendering as invisible outlines
   on light backgrounds. Defined here from v2 tokens rather than left
   to the inline overrides the dark ones happened to carry. */
.btn-ghost{background:none;border:1.5px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;box-shadow:none}

/* dark surfaces — cookie banner, dark sidebar panels */
.btn-ghost-inv{background:none;border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost-inv:hover{background:rgba(255,255,255,.12);border-color:#fff;
  color:#fff;box-shadow:none}

/* ---------- 6. Accent usage per guide ---------- */
/* teal = AI / technology content */
.ai-panel::before{background:var(--teal-grad)}
.ai-panel::after{background:radial-gradient(circle,rgba(14,165,233,.26),transparent 70%)}
/* emerald = trust / vendor-neutral signals. Add class="pf-trust" to the "Zero" stat. */
.pf-trust b{background:var(--emerald-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---------- 7. Wordmark: gradient ampersand (guide §03) ---------- */
.amp{
  font-weight:800;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .amp{-webkit-text-fill-color:initial;color:var(--orange)}
}
/* on orange-gradient CTA banners the "&" drops to white at reduced opacity */
.on-grad .amp{background:none;-webkit-text-fill-color:rgba(255,255,255,.72);color:rgba(255,255,255,.72)}

/* nav mark follows the nav's own light/dark state, which spine.js toggles
   past the header. Every v2 page uses a dark .hero or .page-hero, so the
   nav starts dark on all of them: PNG-07 (navy disc) shows first, PNG-01
   (bare orange B) takes over once nav.light lands. Both marks ship in the
   markup so the swap costs no fetch mid-scroll.

   Fail-safe direction matters. .bmark-img defaults to display:none in
   style.css and each state is switched ON here, so if this sheet is ever
   stale or missing the nav degrades to zero or one mark -- never two.
   The inverse (default block, hide the spare here) is what put two marks
   on the live site. Do not flip it back. */
nav:not(.light) .bmark-dark{display:block}
nav.light .bmark-light{display:block}

/* optional tagline beneath the nav wordmark */
.logo .lockup{display:flex;flex-direction:column;line-height:1.1}
.logo .lock-tag{font-size:.58rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:2px}
nav:not(.light) .logo .lock-tag{color:var(--on-dark)}
.foot .tagline{font-style:italic;color:var(--slate-l)}

/* ---------- 8. Seasonal ampersand system (guide §04) ----------
   Swap the class on the "&" ONLY — never the mark, font, or layout.
   Standard orange gradient (.amp alone) is the default. */
.amp-rainbow{background:linear-gradient(90deg,#FF0000,#FF7F00,#FFFF00,#00CC00,#0000FF,#8B00FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.amp-red{color:#CC0000;-webkit-text-fill-color:#CC0000;background:none}
.amp-orange-flat{color:#FF6B00;-webkit-text-fill-color:#FF6B00;background:none}
.amp-pink{color:#E91E8C;-webkit-text-fill-color:#E91E8C;background:none}
.amp-green{color:#00873E;-webkit-text-fill-color:#00873E;background:none}
.amp-purple{color:#6B2D8B;-webkit-text-fill-color:#6B2D8B;background:none}
.amp-gold{background:linear-gradient(135deg,#F59E0B,#D97706);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- 9. Circuit spine traces ---------- */
#spine .trunk,#spine .jog{stroke:rgba(148,163,184,.55)}
#spine .off{stroke:rgba(148,163,184,.6)}
#spine .pad{fill:#fff;stroke:rgba(100,116,139,.5)}

/* ---------- 10. Form fields (contact page) ---------- */
input,textarea,select{
  font-family:'Outfit','Helvetica Neue',Arial,sans-serif;font-size:1rem;
  border:1px solid var(--border);border-radius:var(--r);background:#fff;color:var(--navy)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
::placeholder{color:var(--muted)}