/* ================================================================
   Big Brain Digital 2026, canonical token stylesheet
   ================================================================
   One file. Every snippet relies on these variables and none of them
   redefines a value.

   This exists because of a specific defect on the current site: each
   XYZ IHS snippet carries its own inline <style>, so tokens were
   duplicated per section and drifted. Three different oranges are in
   production today, #FF5100 across snippets 1 to 18, #ff6600 in the v2
   header and hero, and the correct #f05323 in exactly one place, a
   Calendly parameter. Do not repeat that. Snippets reference var(--bbd-*)
   and never hardcode a brand color.

   Install this as a real stylesheet, not a snippet, if you can. See
   README.md in this folder.
   ================================================================ */

/* ---- Self hosted Clash Display -----------------------------------
   Repoint these four paths at the WordPress media library after upload.
   Production must not depend on the Fontshare CDN.
------------------------------------------------------------------- */
@font-face{font-family:'Clash Display';src:url('/wp-content/uploads/2026/08/bbd26/fonts/ClashDisplay-Variable.woff2') format('woff2-variations'),url('/wp-content/uploads/2026/08/bbd26/fonts/ClashDisplay-Variable.woff2') format('woff2');font-weight:200 700;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url('/wp-content/uploads/2026/08/bbd26/fonts/ClashDisplay-Medium.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url('/wp-content/uploads/2026/08/bbd26/fonts/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Clash Display';src:url('/wp-content/uploads/2026/08/bbd26/fonts/ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}


/* ================ tokens/colors.css ================ */
:root{
  /* --- Ink scale: the dark end of the brand --- */
  --bbd-ink-deep:#0c0d10;      /* deepest ground: covers, footers, hero base */
  --bbd-ink:#131519;           /* default dark page background, light-mode headings */
  --bbd-panel:#1a1d23;         /* raised panel on dark */
  --bbd-panel-2:#21252c;       /* second-step panel, gradient partner to --bbd-panel */

  /* --- Signal orange: the single accent --- */
  --bbd-orange:#f05323;        /* THE brand orange. Never #ff6600, never #FF5100. */
  --bbd-orange-soft:#f6824f;   /* orange for text/icons on dark grounds */
  --bbd-orange-deep:#c23a14;   /* orange for text/figures on light grounds */
  --bbd-ember:#7a2e16;         /* deep rust, ambient depth only */

  /* --- Warm paper neutrals: the light end --- */
  --bbd-paper:#f4f1ea;         /* brand paper, light panel fill */
  --bbd-paper-2:#faf8f4;       /* table zebra stripe, faintest fill */
  --bbd-rule:#e2ded5;          /* border on paper */
  --bbd-rule-soft:#e8e4db;     /* table rule on paper */

  /* --- Text on light --- */
  --bbd-text-body:#3f454d;
  --bbd-text-secondary:#6f6a60;
  --bbd-text-tertiary:#9a958a; /* captions, footers, page numbers */
  --bbd-text-eyebrow:#8a857a;  /* uppercase section labels on paper */

  /* --- Text on dark --- */
  --bbd-on-dark-strong:#f4f1ea;
  --bbd-on-dark-body:#c9ced5;
  --bbd-on-dark-muted:#aab0b8;
  --bbd-mist:#9aa0a8;
  --bbd-on-dark-label:#7d838b;

  /* --- Hairlines on dark --- */
  --bbd-line:rgba(255,255,255,.07);
  --bbd-line-2:rgba(255,255,255,.12);

  /* --- Semantic aliases --- */
  --surface-page:var(--bbd-ink);
  --surface-page-light:#ffffff;
  --surface-panel:var(--bbd-panel);
  --surface-card-light:var(--bbd-paper);
  --surface-callout:var(--bbd-paper);
  --surface-zebra:var(--bbd-paper-2);
  --surface-table-head:var(--bbd-ink);
  --surface-band:var(--bbd-orange);

  --text-heading:var(--bbd-ink);
  --text-body:var(--bbd-text-body);
  --text-muted:var(--bbd-text-secondary);
  --text-caption:var(--bbd-text-tertiary);
  --text-accent:var(--bbd-orange-deep);
  --text-accent-on-dark:var(--bbd-orange-soft);

  --border-default:var(--bbd-rule);
  --border-table:var(--bbd-rule-soft);
  --accent:var(--bbd-orange);
  --accent-bar:var(--bbd-orange);
}

/* ================ tokens/typography.css ================ */
:root{
  /* Families. Clash Display for anything structural or numeric,
     Spline Sans for anything you read in sentences. */
  --bbd-font-display:'Clash Display','Sora',system-ui,sans-serif;
  --bbd-font-body:'Spline Sans',system-ui,sans-serif;
  --bbd-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --bbd-weight-display:600;
  --bbd-weight-display-quote:500;
  --bbd-weight-body:400;
  --bbd-weight-body-strong:600;

  /* Display scale, from the live homepage clamps */
  --bbd-size-hero:clamp(44px,6.6vw,82px);
  --bbd-size-h1:clamp(34px,5vw,62px);
  --bbd-size-h2:clamp(30px,4vw,48px);
  --bbd-size-h2-doc:29px;      /* fixed-page documents do not fluid-scale */
  --bbd-size-h3:23px;
  --bbd-size-h4:19px;
  --bbd-size-quote:clamp(24px,3.3vw,38px);

  /* Body scale */
  --bbd-size-lead:clamp(17px,2vw,20px);
  --bbd-size-body-lg:17px;
  --bbd-size-body:14.5px;
  --bbd-size-body-sm:13.5px;
  --bbd-size-caption:12.5px;
  --bbd-size-micro:11.5px;

  /* Structural labels */
  --bbd-size-eyebrow:12px;
  --bbd-size-eyebrow-sm:10px;
  --bbd-size-index:12px;       /* the 01 / 02 section numeral */
  --bbd-size-table-head:9.5px;

  /* Line heights */
  --bbd-leading-display:1.02;
  --bbd-leading-hero:.98;
  --bbd-leading-h2:1.06;
  --bbd-leading-quote:1.28;
  --bbd-leading-body:1.65;
  --bbd-leading-body-tight:1.45;

  /* Tracking. Negative on display, wide on uppercase labels. */
  --bbd-tracking-hero:-.035em;
  --bbd-tracking-display:-.025em;
  --bbd-tracking-h3:-.02em;
  --bbd-tracking-eyebrow:.24em;
  --bbd-tracking-eyebrow-tight:.18em;
  --bbd-tracking-table-head:.13em;
  --bbd-tracking-footer:.06em;

  --bbd-measure-hero:14ch;
  --bbd-measure-heading:26ch;
  --bbd-measure-body:66ch;
  --bbd-measure-lead:52ch;
}

/* ================ tokens/spacing.css ================ */
:root{
  --bbd-space-1:4px;
  --bbd-space-2:8px;
  --bbd-space-3:12px;
  --bbd-space-4:16px;
  --bbd-space-5:20px;
  --bbd-space-6:24px;
  --bbd-space-7:32px;
  --bbd-space-8:40px;
  --bbd-space-9:52px;
  --bbd-space-10:72px;

  /* Section rhythm on the marketing site */
  --bbd-section-y:108px;
  --bbd-section-y-tight:78px;
  --bbd-section-y-mobile:68px;

  /* Page shell */
  --bbd-wrap-max:1200px;
  --bbd-wrap-pad:32px;
  --bbd-wrap-pad-mobile:20px;

  /* Fixed-page documents (Letter at 96dpi) */
  --bbd-doc-page-w:816px;
  --bbd-doc-page-h:1056px;
  --bbd-doc-margin:72px;
  --bbd-doc-footer-offset:32px;

  /* Component paddings lifted verbatim from the live build */
  --bbd-pad-btn:15px 28px;
  --bbd-pad-btn-sm:11px 22px;
  --bbd-pad-eyebrow:9px 17px;
  --bbd-pad-card:38px 32px;
  --bbd-pad-callout:20px 24px;
  --bbd-pad-metric:30px 26px;
  --bbd-pad-table-cell:10px 13px;

  /* The 30px rule that sits left of every uppercase section label */
  --bbd-kicker-rule-w:30px;
  --bbd-kicker-rule-gap:42px;
  /* The 3px orange bar on stat cells and callouts */
  --bbd-accent-bar-w:3px;
}

/* ================ tokens/effects.css ================ */
:root{
  /* Radii. Large and soft on the marketing site; documents are square. */
  --bbd-radius-sm:6px;
  --bbd-radius-md:13px;   /* buttons */
  --bbd-radius-lg:18px;   /* metric cards */
  --bbd-radius-xl:22px;   /* service pillars, case cards */
  --bbd-radius-pill:100px;
  --bbd-radius-doc:0px;   /* print never rounds */

  /* Shadows. Long, low-opacity, always downward. */
  --bbd-shadow-btn:0 8px 24px -6px rgba(240,83,35,.45);
  --bbd-shadow-btn-hover:0 16px 38px -10px rgba(240,83,35,.6);
  --bbd-shadow-card:0 30px 60px -30px rgba(0,0,0,.7);
  --bbd-shadow-card-hover:0 30px 60px -28px rgba(0,0,0,.8);
  --bbd-shadow-panel:0 40px 80px -50px rgba(0,0,0,.9);
  /* Float is the hover partner for .bbd26-lift-8. Same geometry as panel,
     named separately because the motion spec talks about it separately. */
  --bbd-shadow-float:0 40px 80px -50px rgba(0,0,0,.9);
  --bbd-shadow-flag:0 24px 60px -30px rgba(240,83,35,.5);

  /* Motion */
  --bbd-ease:cubic-bezier(.2,.85,.25,1); /* @kind other */
  --bbd-dur-fast:.2s; /* @kind other */
  --bbd-dur:.25s; /* @kind other */
  --bbd-dur-slow:.35s; /* @kind other */
  --bbd-dur-reveal:.75s; /* @kind other */
  --bbd-lift:-3px;         /* buttons and small cards */
  --bbd-lift-card:-8px;    /* service pillars */

  /* Translucency and blur, used only on dark grounds */
  --bbd-blur-nav:blur(14px) saturate(120%); /* @kind other */
  --bbd-blur-card:blur(8px); /* @kind other */
  --bbd-scrim-nav:rgba(12,13,16,.72);
  --bbd-fill-ghost:rgba(255,255,255,.03);
  --bbd-fill-subtle:rgba(255,255,255,.04);
  --bbd-fill-orange:rgba(240,83,35,.12);

  /* Film grain overlay, the one texture in the system. Applied at .045 on
     dark page grounds and .10 on the orange band, mix-blend-mode:overlay. */
  --bbd-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); /* @kind other */
  --bbd-grain-opacity:.045; /* @kind other */

  /* Dot grid, masked to a soft ellipse behind hero and closing sections */
  --bbd-dotgrid-size:36px;
  --bbd-dotgrid-color:rgba(255,255,255,.05);
}

/* ================ Shared behavior, ported from the design files ================
   These lived in each page's helmet style block. They are global, so they
   belong here once rather than in ninety three snippets.
============================================================================= */

*{margin:0;padding:0;box-sizing:border-box}

a{color:var(--bbd-orange-soft);text-decoration:none}
a:hover{color:var(--bbd-paper)}
/* Paper grounds, the article and legal pages, invert this. */
.bbd26-paper a{color:var(--bbd-orange-deep);border-bottom:1px solid rgba(194,58,20,.35)}
.bbd26-paper a:hover{color:var(--bbd-ink)}

:focus-visible{outline:2px solid #f6824f;outline-offset:3px;border-radius:4px}
.bbd26-paper :focus-visible{outline-color:#c23a14}

/* Skip link. Must be the first focusable element in the document. */
.bbd26-skip{position:absolute;left:16px;top:-72px;z-index:100;white-space:nowrap;transition:top .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-skip:focus,.bbd26-skip:focus-visible{top:16px;outline:2px solid #f4f1ea;outline-offset:3px}
/* main takes tabindex="-1" so the skip link moves keyboard focus, not just the
   viewport. Suppress the outline for the click case only, and keep a visible
   indicator for keyboard activation. Never remove it unconditionally. */
#main:focus{outline:none}
#main:focus-visible{outline:2px solid var(--bbd-orange);outline-offset:4px}

/* Scroll reveal. The observer that adds data-seen lives in the header snippet.
   The three keyframe blocks below must stay siblings at the top level. Nesting
   L or R inside the first one makes CSS discard it, the animation never runs,
   and data-armed leaves the element at opacity 0 permanently. */
@keyframes bbdreveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes bbdrevealL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes bbdrevealR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* GROUP MODE, on a container, staggers its direct children. */
[data-reveal][data-armed]>*{opacity:0}
[data-reveal][data-seen]>*{animation:bbdreveal .62s cubic-bezier(.2,.85,.25,1) both}
[data-reveal][data-seen]>*:nth-child(2){animation-delay:.06s}
[data-reveal][data-seen]>*:nth-child(3){animation-delay:.12s}
[data-reveal][data-seen]>*:nth-child(4){animation-delay:.18s}
[data-reveal][data-seen]>*:nth-child(5){animation-delay:.24s}
[data-reveal][data-seen]>*:nth-child(n+6){animation-delay:.30s}

/* The snippet renderer wraps each component instance in .bbd26-slot, which is
   display:contents and so generates no box. Opacity and animation on it do
   nothing, which makes the stagger a silent no-op wherever a group's direct
   children are those wrappers, FAQ rows and stat rows above all. Reach through
   to the real element and take the step from the wrapper's position. */
[data-reveal][data-armed]>.bbd26-slot>*{opacity:0}
[data-reveal][data-seen]>.bbd26-slot>*{animation:bbdreveal .62s cubic-bezier(.2,.85,.25,1) both}
[data-reveal][data-seen]>.bbd26-slot:nth-child(2)>*{animation-delay:.06s}
[data-reveal][data-seen]>.bbd26-slot:nth-child(3)>*{animation-delay:.12s}
[data-reveal][data-seen]>.bbd26-slot:nth-child(4)>*{animation-delay:.18s}
[data-reveal][data-seen]>.bbd26-slot:nth-child(5)>*{animation-delay:.24s}
[data-reveal][data-seen]>.bbd26-slot:nth-child(n+6)>*{animation-delay:.30s}

/* ELEMENT MODE, on the element itself. Value is its step in the cascade. */
[data-rise][data-armed]{opacity:0}
[data-rise][data-seen]{animation:bbdreveal .62s cubic-bezier(.2,.85,.25,1) both}
[data-rise="2"][data-seen]{animation-delay:.075s}
[data-rise="3"][data-seen]{animation-delay:.15s}
[data-rise="4"][data-seen]{animation-delay:.225s}

/* DIRECTION, opt in. Default is vertical. */
[data-rise][data-from="left"][data-seen]{animation-name:bbdrevealL}
[data-rise][data-from="right"][data-seen]{animation-name:bbdrevealR}

/* Below the split collapse point, horizontal reverts to vertical. */
@media (max-width:920px){[data-rise][data-from][data-seen]{animation-name:bbdreveal}}

/* The whole hover vocabulary of the site. Five classes, replacing every
   style-hover attribute in the design source. Hovers lift, they never recolor. */
.bbd26-lift{transition:transform .25s cubic-bezier(.2,.85,.25,1),box-shadow .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-lift:hover{transform:translateY(-3px);box-shadow:var(--bbd-shadow-card)}
.bbd26-lift-8{transition:transform .3s cubic-bezier(.2,.85,.25,1),box-shadow .3s cubic-bezier(.2,.85,.25,1),border-color .3s cubic-bezier(.2,.85,.25,1)}
.bbd26-lift-8:hover{transform:translateY(-8px);box-shadow:var(--bbd-shadow-float);border-color:rgba(246,130,79,.4)}
.bbd26-lift-edge{transition:transform .25s cubic-bezier(.2,.85,.25,1),box-shadow .25s cubic-bezier(.2,.85,.25,1),border-color .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-lift-edge:hover{transform:translateY(-3px);box-shadow:var(--bbd-shadow-card);border-color:rgba(246,130,79,.4)}
.bbd26-btn{transition:transform .25s cubic-bezier(.2,.85,.25,1),box-shadow .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-btn:hover{transform:translateY(-3px)}
/* Announced to assistive technology, never painted. Used to say that a link
   leaves the site, which a sighted reader gets from the arrow instead. */
.bbd26-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Links grow their gap rather than underlining. */
.bbd26-arrow{display:inline-flex;align-items:center;gap:8px;transition:gap .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-arrow:hover{gap:14px}

/* Every figure on the site aligns its digits. */
.bbd26-num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal][data-armed]>*{opacity:1!important}
  [data-rise][data-armed]{opacity:1!important}
  [data-reveal][data-armed]>.bbd26-slot>*{opacity:1!important}
}


/* ================================================================
   Build additions, 26 August 2026
   Self hosted Spline Sans, the global rules that lived in each design
   page helmet, and the two hover classes the design source uses that
   the original five did not cover.
   ================================================================ */

@font-face{font-family:'Spline Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/wp-content/uploads/2026/08/bbd26/fonts/SplineSans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spline Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/wp-content/uploads/2026/08/bbd26/fonts/SplineSans-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Global rules carried over from the design page helmets. */
body{background:#131519}
[data-skip]{position:absolute;left:16px;top:-72px;z-index:100;white-space:nowrap;transition:top .25s cubic-bezier(.2,.85,.25,1)}
[data-skip]:focus,[data-skip]:focus-visible{top:16px}
[data-skip]:focus{outline:2px solid #f4f1ea;outline-offset:3px}
@media (max-width:600px){#main>section{padding-top:68px!important;padding-bottom:68px!important}#main h2{margin-bottom:16px!important}}

/* Page ground. The design source carries these on a root wrapper div;
   in WordPress that wrapper is the outermost element of the page body. */
.bbd26-page{position:relative}
.bbd26-page.bbd26-ink{font-family:var(--bbd-font-body);color:var(--bbd-paper);background:var(--bbd-ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bbd26-page.bbd26-paper{font-family:var(--bbd-font-body);color:var(--bbd-text-body);background:var(--bbd-paper);line-height:1.65;-webkit-font-smoothing:antialiased}

/* The design source carries a button hover shadow the five class vocabulary omitted. */
.bbd26-btn:hover{box-shadow:var(--bbd-shadow-btn-hover)}
/* Two hover values in the design source that the five classes did not cover. */
.bbd26-lift-edge2{transition:transform .25s cubic-bezier(.2,.85,.25,1),border-color .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-lift-edge2:hover{transform:translateY(-3px);border-color:rgba(246,130,79,.5)}
.bbd26-hover-paper{transition:color .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-hover-paper:hover{color:var(--bbd-paper)}
.bbd26-hover-tint{transition:background .25s cubic-bezier(.2,.85,.25,1)}
.bbd26-hover-tint:hover{background:rgba(255,255,255,.05)}