/* ==========================================================================
   FCnoise Web Brand System — brand.css
   The shared design layer every product in Digital-Products/ links to.

   Change brand here (or in the canonical token source) and every product
   updates on the next sync. Single source of truth for tokens:
   00-Command-Center/brand-os/02-visual-system/tokens.css

   Do NOT hand-edit the token block below. Run _brand/sync-brand.sh to
   refresh it from the canonical Brand OS, then re-deploy each product.
   ========================================================================== */

/* FCN-TOKENS:START — auto-synced from brand-os/02-visual-system/tokens.css. Do not edit by hand. */
:root {
  /* ============================================ COLORS ============================================ */

  /* Neutrals */
  --black: #0a0a0a;
  --black-soft: #141414;
  --black-card: #1a1a1a;
  --black-blue: #14181f;   /* ELEVATED sections (Promise · Agency · Empathy · Format · Schedule · Offer) */

  --white: #ffffff;
  --gray-100: #f5f5f5;
  --gray-300: #cccccc;
  --gray-500: #888888;
  --gray-700: #444444;
  --gray-900: #1c1c1c;

  /* Brand orange */
  --orange: #FF7A00;
  --orange-bright: #ff8a1a;
  --orange-deep: #e66a00;
  --orange-glow: rgba(255, 122, 0, 0.4);

  /* ============================================ TYPOGRAPHY ============================================ */

  --font-display: 'Anton', 'Impact', 'Arial Black', sans-serif;  /* canon since 2026-07-13 (Leo): Anton = webfont Impact. Was Bebas Neue. */
  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;  /* canon since 2026-07-13 (Leo): Barlow, sport-industrial pairing with Anton. Was Inter. */

  /* ============================================ RADIUS ============================================ */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ============================================ SHADOWS ============================================ */

  --shadow-orange: 0 8px 32px rgba(255, 122, 0, 0.25);
  --shadow-card: 0 12px 48px rgba(0, 0, 0, 0.6);

  /* ============================================ CONTAINER WIDTHS ============================================ */

  --container: 1080px;   /* tightened 2026-07-13 (Leo): content canvas pulls inward, backgrounds full-bleed */
  --container-narrow: 800px;
}
/* FCN-TOKENS:END */

/* ==========================================================================
   The pieces below are the shared component system. They ARE brand-facing
   design decisions (type scale, buttons, spacing, focus states). Edit here
   when the brand's component language changes, then run sync-brand.sh.
   Page-specific styles stay inside each product's own stylesheet.
   ========================================================================== */

/* ============================================ RESET ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); background: var(--black); color: var(--white);
  line-height: 1.6; font-size: 16px; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }

/* ============================================ TYPOGRAPHY ============================================ */
.h-display, h1, h2 {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: 0.005em; line-height: 0.98; text-transform: uppercase;
}
/* Scale tuned for Anton (runs wider + heavier than the former Bebas) */
h1 { font-size: clamp(2.5rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
h3 { font-family: var(--font-body); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
/* Guarantee: no heading ever falls back to a browser serif default */
h4, h5, h6 { font-family: var(--font-body); }
.eyebrow {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange);
  display: inline-block; margin-bottom: 1rem;
}
.subhead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--gray-300); font-weight: 400; line-height: 1.6; max-width: 60ch; }
.accent { color: var(--orange); }
.muted { color: var(--gray-500); }

/* ============================================ LAYOUT ============================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }
section { padding: 6rem 0; position: relative; }
@media (max-width: 768px) { section { padding: 4rem 0; } }

/* ============================================ BUTTONS ============================================ */
/* Brand pattern (Leo, canon): unified outline: transparent fill, orange
   border, white text; hover fills orange. Same for direct + transitional.
   (Filled-dominance experiment retired 2026-07-13 by Leo's brand call;
   revisit with GA4 data if CTR underperforms.) */
.btn-cta, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(180deg, rgba(10,10,10,0.28) 0%, rgba(10,10,10,0.5) 100%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: var(--white);
  border: 2.25px solid var(--orange);
  padding: 0.95rem 2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 400; font-size: 0.88rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer; white-space: nowrap;
}
.btn-cta:hover, .btn-ghost:hover {
  transform: translateY(-2px);
  background: var(--orange);
  color: var(--black);
  box-shadow: 0 8px 24px rgba(255, 122, 0, 0.35);
}
.btn-cta:active, .btn-ghost:active { transform: translateY(0); }
.btn-cta-large { padding: 1.3rem 3rem; font-size: 1rem; }

/* ============================================ HERO LEGIBILITY (brand rule, Leo 2026-07-13) ============================================ */
/* Over photo heroes: type and logos always carry a soft shade for clarity. */
.hero h1, .hero h2, .hero .subhead { text-shadow: 0 2px 22px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45); }
.hero img { filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)); }

/* ============================================ ACCESSIBILITY ============================================ */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--orange); color: var(--black); padding: 0.75rem 1.25rem; font-weight: 700; }
.skip-link:focus { left: 0; }