/* Blue Harbour Solutions, brand stylesheet
   Navy/gold, serif display + sans body, "sandwich" navy/white pattern. */
:root{
  --navy:#0C1B35;
  --navy-2:#0f2143;
  --gold:#F0B429;
  --gold-soft:#FFE8A3;
  --grey:#C9CCD3;
  --slate:#2C2F36;
  --light:#F4F6F9;
  --goldtint:#FBF3DC;
  --line:rgba(255,255,255,0.12);

  /* Light palette, declared on bare :root so the default (unstamped) state is
     complete. These six pages had no theme at all, so a dark-mode visitor
     moving from /blog to /start went from a dark page to a white one, at the
     exact moment of conversion. */
  --ground:#FFFFFF;
  --ground-alt:#F4F6F9;
  --card:#FFFFFF;
  --rule:#E7EBF0;
  --ink:#2C2F36;
  --ink-doc:#3A3D44;
  --ink-2:#55585F;
  --ink-3:#646A73;
  --callout:#FBF3DC;
  --callout-rule:#EADAA8;
  --tablehead:#F4F6F9;
  --ink-strong:#0C1B35;
  --accent-ink:#0C1B35; /* gold is never text on a light ground (Trevor, 2026-09-30) */
  --rule-strong:#B9C0CD;
  --danger:#A3282D;
  color-scheme:light;
}

/* Dark. Guarded as :not([data-theme="light"]) so an explicit light choice wins
   over a dark OS, and repeated under [data-theme="dark"] so the reverse also
   holds. Only tokens are redefined; no component sets a colour directly. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A1426;
    --ground-alt:#101E37;
    --card:#16233F;
    --rule:#2E3F60;
    --ink:#C6CDDA;
    --ink-doc:#C6CDDA;
    --ink-2:#A2ACBE;
    --ink-3:#8E98AA;
    --callout:#1B2438;
    --callout-rule:#3A4468;
    --tablehead:#101E37;
    --light:#101E37;
    --goldtint:#1B2438;
    --ink-strong:#E3E8F2;
    --accent-ink:#E3BC63;
    --rule-strong:#46536B;
    --danger:#E58A8E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0A1426;
  --ground-alt:#101E37;
  --card:#16233F;
  --rule:#2E3F60;
  --ink:#C6CDDA;
  --ink-doc:#C6CDDA;
  --ink-2:#A2ACBE;
  --ink-3:#8E98AA;
  --callout:#1B2438;
  --callout-rule:#3A4468;
  --tablehead:#101E37;
  --light:#101E37;
  --goldtint:#1B2438;
  --ink-strong:#E3E8F2;
  --accent-ink:#E3BC63;
  --rule-strong:#46536B;
  --danger:#E58A8E;
    color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}
body{font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',sans-serif;color:var(--ink);background:var(--ground);line-height:1.65;-webkit-font-smoothing:antialiased}
.serif{font-family:'Source Serif 4',Georgia,'Times New Roman',serif}
/* Prose links used to inherit their surrounding colour with no underline,
   which made the contact link inside .doc .meta a 1.00:1 link. Chrome keeps
   the bare treatment; anything inside body copy gets an underline. */
a{color:inherit}
.nav a, .btn, .flinks a, footer.site a, .product-card a, a.btn, .we-cta, .we-store{text-decoration:none}
.doc a, .lede a{text-decoration:underline;text-underline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* Nav */
.nav{background:var(--navy);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:40px;justify-content:flex-start;max-width:1140px;padding:20px 32px}
.nav img{height:34px;width:auto;display:block}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;flex:none}
.nav .brand span{font-family:'Source Serif 4',Georgia,serif;font-size:19px;color:#fff;letter-spacing:0.01em;white-space:nowrap}
.nav .links{display:flex;gap:30px;align-items:center}
.nav .links a{color:var(--grey);font-size:15px;letter-spacing:0.01em}
.nav .links a:hover{color:#fff}
.nav a.cta{color:var(--navy);background:var(--gold);padding:12px 22px;border-radius:10px;font-weight:600;font-size:15px;white-space:nowrap}
.nav a.cta:hover{filter:brightness(0.95);color:var(--navy)}

/* Sections */
.navy{background:var(--navy);color:#fff}
.navy h1,.navy h2,.navy h3{color:#fff}
.navy p{color:var(--grey)}
section{padding:76px 0}
.hero{padding:96px 0 84px}
.eyebrow{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
h1{font-size:clamp(34px,6vw,54px);line-height:1.08;letter-spacing:-0.01em;font-weight:600}
h2{font-size:clamp(26px,4vw,38px);line-height:1.15;font-weight:600;color:var(--ink-strong)}
h3{font-size:20px;font-weight:600;color:var(--ink-strong)}
.lede{font-size:clamp(17px,2.4vw,21px);color:var(--grey);max-width:640px;margin-top:20px}
p{margin-bottom:16px}
.section-intro{max-width:680px;margin-bottom:40px}
.section-intro h2{margin-bottom:14px}
.section-intro p{color:var(--ink-2);font-size:17px}

/* Tagline */
.tagline{font-size:clamp(20px,3vw,26px);color:var(--gold);letter-spacing:0.02em;margin:8px 0 0;font-weight:400}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;padding:14px 26px;border-radius:8px;border:1px solid transparent;transition:all .15s}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{filter:brightness(0.96)}
.btn-outline{border-color:rgba(255,255,255,0.35);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,0.08)}
.btn-dark{background:var(--navy);color:#fff}
/* Navy on the dark page ground nearly vanished (#0C1B35 on #0A1426). In dark, the dark button
   inverts to the high-contrast ink, the same way the diagnostic's Next does. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-dark{background:var(--ink-strong);color:var(--ground)}}
:root[data-theme="dark"] .btn-dark{background:var(--ink-strong);color:var(--ground)}
.btn-dark:hover{background:var(--navy-2)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* Cards */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--ground-alt);border:1px solid var(--rule);border-radius:14px;padding:30px;min-width:0}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:15px;margin-bottom:0}
.product-card{display:flex;flex-direction:column;background:var(--ground-alt);border:1px solid var(--rule);border-radius:16px;padding:32px;transition:transform .15s, box-shadow .15s}
.product-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(12,27,53,0.1)}
.product-card .kicker{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.product-card h3{font-size:24px;margin-bottom:10px}
.product-card p{flex:1;color:var(--ink-2);font-size:15px;margin-bottom:20px}
.product-card .go{color:var(--ink-strong);font-weight:600;font-size:15px}

/* Gold circle icon */
.gicon{width:46px;height:46px;border-radius:50%;background:var(--gold);border:1px solid #d99e1e;display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:700;font-family:'Source Serif 4',Georgia,serif;font-size:18px;flex:0 0 46px}

/* Numbered / pillar list */
.rows{display:flex;flex-direction:column;gap:22px}
.row{display:flex;gap:18px;align-items:flex-start}
.row .body h3{margin-bottom:4px}
.row .body p{color:var(--ink-2);font-size:15px;margin-bottom:0}

/* Callout / engagement */
.callout{background:var(--callout);border:1px solid var(--callout-rule);border-radius:14px;padding:28px 30px}
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.stat{flex:1;min-width:150px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 20px}
.stat .n{font-family:'Source Serif 4',Georgia,serif;font-size:26px;color:var(--ink-strong);font-weight:600}
.stat .l{font-size:13px;color:var(--ink-3);margin-top:2px}

/* Scope two-col */
.scope{display:grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap:22px}
.scope ul{list-style:none;margin-top:10px}
.scope li{padding:6px 0 6px 22px;position:relative;font-size:15px;color:var(--ink-2)}
.scope .inc li::before{content:"✓";position:absolute;left:0;color:#2f855a;font-weight:700}
.scope .exc li::before{content:"\00d7";position:absolute;left:0;color:var(--ink-3)}

/* Footer */
footer.site{background:var(--navy);color:var(--grey);padding:48px 24px 40px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
footer.site img{height:40px;width:auto;margin-bottom:12px}
footer.site .flinks{display:flex;flex-direction:column;gap:8px}
footer.site .flinks a{color:var(--grey);font-size:14px}
footer.site .flinks a:hover{color:#fff}
footer.site .addr{font-size:13px;line-height:1.7;opacity:0.8;max-width:280px}
footer.site .legal{width:100%;border-top:1px solid var(--line);margin-top:28px;padding-top:18px;font-size:12px;opacity:0.6}

/* Legal doc pages */
.doc h1{color:var(--ink-strong);font-size:34px;margin-bottom:6px}
.doc .meta{color:var(--ink-3);font-size:14px;margin-bottom:24px}
.doc h2{color:var(--ink-strong);font-size:22px;margin:28px 0 10px}
.doc p,.doc li{font-size:15px;color:var(--ink-doc);margin-bottom:12px}
.doc ul{padding-left:22px}
.doc .note{background:var(--ground-alt);border:1px solid var(--rule);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--ink-2);margin:16px 0 26px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;margin:12px 0}
.doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.doc th{color:var(--ink);font-weight:650;background:var(--tablehead)}
.tablewrap{overflow-x:auto}

@media (max-width:640px){
  .nav .links{gap:16px}
  .nav .links a:not(.cta){display:none}
  .scope{grid-template-columns: minmax(0, 1fr)}
  .cols-2{grid-template-columns: minmax(0, 1fr)}
  section{padding:56px 0}
}



/* Match the gold focus ring home.css already uses, so the convention does
   not stop at the page boundary. */
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Skip link. Off-screen until focused, then pinned top-left over the sticky nav. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000}
.skip-link:focus{left:12px;top:12px;background:var(--gold);color:#0C1B35;
  font-weight:600;padding:10px 16px;border-radius:8px;text-decoration:none;
  outline:2px solid #0C1B35;outline-offset:2px}

/* ---------- mobile navigation ----------
   .nav .links a:not(.cta) was display:none below 900px with no replacement, so
   every one of these six pages offered a phone visitor a single link. Same
   disclosure pattern as home.css so the two halves of the site behave alike. */
.nav-toggle{display:none}
@media (max-width:1023px){
  .nav .wrap{position:relative;gap:12px}
  .nav .brand{flex:0 0 auto;margin-right:auto}
  .nav>.wrap>a.cta{order:2;padding:12px 16px;font-size:14px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;flex:none;background:transparent;
    border:1px solid rgba(255,255,255,.22);border-radius:10px;cursor:pointer}
  .nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .nav-bars,.nav-bars::before,.nav-bars::after{display:block;width:20px;height:2px;
    background:#fff;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
  .nav-bars::before,.nav-bars::after{content:"";position:absolute}
  .nav-bars::before{transform:translateY(-6px)}
  .nav-bars::after{transform:translateY(6px)}
  .nav-toggle[aria-expanded="true"] .nav-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-bars::before{transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-bars::after{transform:rotate(-45deg)}
  .nav .links{display:none;position:absolute;top:calc(100% + 14px);left:0;right:0;
    flex-direction:column;gap:0;background:var(--navy);
    border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:6px;z-index:60;
    box-shadow:0 18px 44px rgba(0,0,0,.42)}
  .nav .links.open{display:flex}
  .nav .links a{display:block;padding:14px 16px;font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .nav .links a:last-child{border-bottom:none}
  /* the old rules that emptied the menu */
  .nav .links a:not(.cta){display:block}
}
@media (prefers-reduced-motion:reduce){
  .nav-bars,.nav-bars::before,.nav-bars::after{transition:none}
}

/* Narrow-viewport containment, matching home.css. */
img,svg,video,table,pre{max-width:100%}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:480px){
  .btn{white-space:normal;text-align:center}
  .card .btn,.hero .btn{display:block;width:100%}
}

.btn{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .06s ease}
.btn:active{transform:translateY(1px)}

/* At 320px the nav row needed 322px: 64px of wrap padding, a 34px mark, a 12px
   gap, ~190px of wordmark, a 40px gap and the 46px toggle. Drop the wordmark
   and tighten the row so the bar fits the narrowest phone in use. */
@media (max-width:460px){
  .card{padding:22px}
  .wrap{padding:0 16px}
  .nav .wrap{padding:14px 16px;gap:12px}
  .nav .brand span{display:none}
  .nav img{height:30px}
}
/* A long unbreakable token (an email address, a URL) sets the min-content
   width of its container and pushes the page sideways on a small phone. */
.card,.doc,.doc p,.doc li,.addr,.flinks a,.lede{overflow-wrap:anywhere}

/* 712px of column at 14 to 15px ran 100 to 112 characters per line on every
   paragraph of /start, /support and /privacy. */
.narrow{max-width:680px}
.doc p,.doc li{font-size:16px}
footer.site .flinks a{display:inline-block;padding-block:10px}
.we-social a{width:44px;height:44px}

/* Same seventh-item squeeze as home.css: nav links never wrap, and the gap
   gives way before a label does. */
.nav .links a { white-space: nowrap; }
@media (min-width:1024px) and (max-width:1320px){ .nav .links{gap:22px} }

/* ---- The one site footer (was two: home/blog had this, every other page the old footer.site).
   Copied from home.css and scoped to footer.footer so it cannot touch the nav. 2026-09-30. ---- */
footer.footer{background:#050D1C;color:rgba(201,204,211,0.7);padding-block:64px 40px;font-size:15px}
footer.footer .footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,1fr);gap:48px}
footer.footer h4{font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin:0 0 18px}
footer.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
footer.footer a{color:rgba(201,204,211,0.75);text-decoration:none}
footer.footer a:hover{color:var(--gold)}
footer.footer .brand{display:flex;align-items:center;gap:12px;color:#fff;font-family:'Source Serif 4',Georgia,serif;font-size:19px;letter-spacing:.01em;margin-bottom:18px}
footer.footer .mark{height:34px;width:auto;flex:none;display:block}
footer.footer address{font-style:normal;line-height:1.7}
footer.footer .colophon{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:rgba(201,204,211,0.68)}
@media (max-width:900px){footer.footer .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){footer.footer .footer-grid{grid-template-columns:minmax(0,1fr)}footer.footer a{display:inline-block;padding-block:11px}footer.footer ul{gap:0}}
footer.footer address,footer.footer a{overflow-wrap:anywhere}

/* Resources joined the nav on 1 Oct 2026. Between 1024 and 1180 the extra item pushed
   "Book a fit call" off the right edge, so the gaps tighten in that band only. */
@media (min-width:1024px) and (max-width:1180px){ .nav .wrap{gap:20px} .nav .links{gap:15px} .nav .links a{font-size:14px} }