/* Herrin Advisory / Global Race Condition — Design System
   Global stylesheet entry point. Consumers link this one file.
   Keep this as @import lines only — all rules live in the imported token files. */

/* Herrin Advisory / Global Race Condition — Color tokens
   Brand DNA: deep navy + restrained gold. Warm paper neutrals, cool ink text.
   Sourced verbatim from the production site stylesheets. */

:root {
  /* ---- Brand: Navy ---- */
  --navy-900: #0f2440;   /* dark-navy — nav bar, hero base, footer */
  --navy-700: #1a3a5c;   /* navy — primary brand, links, borders on hover */
  --navy-600: #263751;   /* mid-navy — credibility band, secondary surface */
  --navy-500: #1a1a2e;   /* heading ink — near-black indigo */

  /* ---- Brand: Gold ---- */
  --gold-500: #c9a84c;   /* gold — accent, rules, CTA fill, logo mark */
  --gold-400: #d4b965;   /* gold-light — hover state for gold */

  /* ---- Neutrals (warm paper / cool ink) ---- */
  --ink:        #2d2d2d;   /* body text */
  --ink-muted:  #666666;   /* secondary text */
  --ink-faint:  #888888;   /* tertiary / metadata */
  --border:     #e0ddd8;   /* hairline borders (warm) */
  --border-cool:#e8e6e1;   /* hairline borders (briefing site) */
  --paper:      #f9f8f6;   /* page background (warm off-white) */
  --paper-alt:  #f5f5f7;   /* inset / table-header background */
  --white:      #ffffff;

  /* ---- Semantic aliases ---- */
  --brand:            var(--navy-700);
  --brand-strong:     var(--navy-900);
  --accent:           var(--gold-500);
  --accent-hover:     var(--gold-400);

  --bg:               var(--paper);
  --bg-inset:         var(--paper-alt);
  --surface-card:     var(--white);
  --surface-dark:     var(--navy-900);
  --surface-dark-alt: var(--navy-600);

  --text-heading:     var(--navy-500);
  --text-body:        var(--ink);
  --text-muted:       var(--ink-muted);
  --text-faint:       var(--ink-faint);
  --text-on-dark:     rgba(255, 255, 255, 0.85);
  --text-on-dark-mut: rgba(255, 255, 255, 0.6);

  --link:             var(--navy-700);
  --link-hover:       var(--gold-500);
  --rule:             var(--border);
  --rule-strong:      var(--navy-700);

  /* On-dark gold-tinted hairlines (credibility band, hero divider) */
  --rule-gold-faint:  rgba(201, 168, 76, 0.2);
}

/* Herrin Advisory / GRC — Typography tokens
   A deliberate two-voice system:
   - SERIF (Georgia) carries long-form authority: body copy, briefs, taglines.
   - SANS (system UI stack) carries structure: nav, headings, labels, buttons, data.
   No webfonts ship with the brand — it runs entirely on Georgia + the native
   system sans stack. The logo wordmark is a high-contrast display serif;
   Georgia Bold is the faithful system stand-in. */

:root {
  /* ---- Families ---- */
  --font-serif: Georgia, 'Times New Roman', 'Times', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Role aliases */
  --font-body:    var(--font-serif);   /* prose, briefs, descriptions */
  --font-display: var(--font-sans);    /* section + hero headings */
  --font-ui:      var(--font-sans);    /* nav, labels, buttons, data */
  --font-wordmark:var(--font-serif);   /* GLOBAL RACE CONDITION lockup */

  /* ---- Type scale (rem; base 17px) ---- */
  --text-xs:   0.75rem;   /* 12.75px — micro labels, badges */
  --text-sm:   0.85rem;   /* 14.5px  — nav, UI, captions */
  --text-base: 1rem;      /* 17px    — body */
  --text-md:   1.1rem;    /* 18.7px  — lead paragraph, card heads */
  --text-lg:   1.25rem;   /* 21px    — h3 / brief h2 */
  --text-xl:   1.5rem;    /* 25.5px  — brief h1 */
  --text-2xl:  1.8rem;    /* 30.6px  — section titles */
  --text-3xl:  2.1rem;    /* 35.7px  — brief headline */
  --text-4xl:  2.4rem;    /* 40.8px  — hero h1 */

  /* ---- Weights ---- */
  --weight-normal:   400;
  --weight-medium:   600;
  --weight-bold:     700;

  /* ---- Line heights ---- */
  --leading-tight:  1.2;    /* display headings */
  --leading-snug:   1.4;
  --leading-normal: 1.6;    /* card copy */
  --leading-prose:  1.7;    /* body / briefs */

  /* ---- Letter-spacing ---- */
  --tracking-label:  2px;    /* uppercase section labels */
  --tracking-brand:  1.5px;  /* nav brand wordmark */
  --tracking-ui:     0.5px;  /* buttons */
  --tracking-tight:  0;
}

/* Herrin Advisory / GRC — Spacing, radius, shadow, layout, motion tokens
   The brand spaces generously (rem-based, 17px root) and stays restrained on
   ornament: small radii, soft navy-tinted shadows, hairline borders, and a
   signature gold left-rule or top-border as the only flourish. */

:root {
  /* ---- Spacing scale (rem) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;

  /* ---- Layout widths ---- */
  --measure-prose:  780px;   /* single-column reading (briefs, services) */
  --measure-wide:   1080px;  /* marketing container */
  --measure-hero:   820px;   /* hero copy block */

  /* ---- Radii (small, businesslike) ---- */
  --radius-xs: 3px;   /* badges */
  --radius-sm: 4px;   /* buttons, blockquote */
  --radius-md: 6px;   /* brief cards, format chips */
  --radius-lg: 8px;   /* service cards, callouts */
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--border);
  --border-accent:   3px solid var(--gold-500);   /* signature left/top rule */
  --border-strong:   2px solid var(--navy-700);

  /* ---- Shadows (cool navy tint, never neutral gray) ---- */
  --shadow-card:  0 2px 8px rgba(26, 58, 92, 0.08);
  --shadow-hover: 0 4px 16px rgba(26, 58, 92, 0.08);
  --shadow-none:  none;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:   0.1s;   /* @kind other */
  --dur-base:   0.2s;   /* @kind other */
  --lift:       translateY(-1px);   /* @kind other */
}

/* ==================================================================
   Responsive rules — added August 2026
   ------------------------------------------------------------------
   The page markup uses inline style attributes, which outrank an
   external stylesheet. These rules therefore target the inline
   declarations directly with attribute selectors and !important.
   Nothing in the markup needs to change.
   ================================================================== */

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari inflating text in landscape */
}

img, svg, iframe, video {
  max-width: 100%;
  height: auto;
}

/* ---------- tablet and below ---------- */
@media (max-width: 900px) {

  /* Every inline grid collapses to a single column.
     Fixed pixel tracks (1fr 340px, 280px 1fr, repeat(3,1fr) …) are
     what force the layout wider than the screen. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex rows must be allowed to wrap */
  [style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* Section gutters: 2.5rem each side is 80px of a 390px screen */
  [style*="padding:0 2.5rem"] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  [style*="padding:4rem 0"]   { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  [style*="padding:5rem 0 4.5rem"] { padding-top: 2.75rem !important; padding-bottom: 2.5rem !important; }
  [style*="padding:2.25rem 0"] { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {

  body { overflow-wrap: break-word; }

  /* Type scale — the desktop sizes are too large for a 390px column */
  [style*="font-size:2.6rem"]  { font-size: 1.9rem !important;  line-height: 1.18 !important; }
  [style*="font-size:2.5rem"]  { font-size: 1.85rem !important; line-height: 1.18 !important; }
  [style*="font-size:1.9rem"]  { font-size: 1.45rem !important; line-height: 1.25 !important; }
  [style*="font-size:1.7rem"]  { font-size: 1.35rem !important; }
  [style*="font-size:1.65rem"] { font-size: 1.3rem !important; }
  [style*="font-size:1.55rem"] { font-size: 1.25rem !important; }
  [style*="font-size:1.4rem"]  { font-size: 1.18rem !important; }

  /* Header: keep the wordmark and links on tidy rows */
  [style*="gap:1.75rem"] { gap: 1rem 1.1rem !important; }

  /* Calendly embed — 320px minimum plus gutters overflows small phones */
  .calendly-inline-widget {
    min-width: 0 !important;
    width: 100% !important;
    height: 680px !important;
  }

  /* Buttons and pills shouldn't run off the edge */
  [style*="padding:.9rem 2.5rem"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  [style*="padding:.85rem 1.6rem"] { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }

  /* Card interiors */
  [style*="padding:1.6rem 1.5rem"] { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
  [style*="padding:1.5rem 1.6rem"] { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
}

/* ---------- very small phones (iPhone SE, 320–375px) ---------- */
@media (max-width: 380px) {
  [style*="font-size:2.6rem"] { font-size: 1.7rem !important; }
  [style*="font-size:2.5rem"] { font-size: 1.65rem !important; }
  [style*="padding:0 2.5rem"] { padding-left: 1rem !important; padding-right: 1rem !important; }
}