/**
 * BigBase brand injection over the Blayden theme (loaded after main.css).
 * Recolors the theme's monochrome tokens to the brand palette and injects
 * orange as the accent. Opacity/gradients allowed. Fonts: Poppins (heading
 * substitute for ITC Avant Garde) + Arial (body).
 */
:root {
  --bb-orange: #ca4e19;
  --bb-orange-rgb: 202 78 25;
  --bb-gray: #4a4a4a;
  --bb-black: #000;
  --bb-white: #fff;

  /* --- Light scheme = white surface, black text, gray muted --- */
  --base--light: #ffffff;
  --base-rgb--light: 255, 255, 255;
  --base-shade--light: #f4f4f5;
  --base-tint--light: #ffffff;
  --stroke-controls--light: #000000;
  --stroke-elements--light: rgb(0 0 0 / 0.14);
  --t-bright--light: #000000;
  --t-medium--light: #4a4a4a;
  --t-muted--light: rgb(0 0 0 / 0.55);
  --t-opp-bright--light: #ffffff;
  --t-opp-medium--light: #d8d8d8;
  --t-opp-muted--light: #9a9a9a;
  --neutral-bright--light: #000000;

  /* --- Dark scheme = rich black surface, white text --- */
  --base--dark: #050505;
  --base-rgb--dark: 5, 5, 5;
  --base-shade--dark: #000000;
  --base-tint--dark: #161616;
  --stroke-controls--dark: #ffffff;
  --stroke-elements--dark: rgb(255 255 255 / 0.16);
  --t-bright--dark: #ffffff;
  --t-medium--dark: #cfcfcf;
  --t-muted--dark: rgb(255 255 255 / 0.6);
  --t-opp-bright--dark: #000000;
  --t-opp-medium--dark: #313437;
  --t-opp-muted--dark: #797d83;
  --neutral-bright--dark: #ffffff;

  --neutral-gray: #4a4a4a;
  --neutral-gray-dark: #2a2a2a;

  /* Accent + effects */
  --accent: var(--bb-orange);
  --accent-rgb: var(--bb-orange-rgb);
  --grad-orange: linear-gradient(120deg, #ca4e19, #e5622b);
  --glow-orange: 0 0 60px rgb(202 78 25 / 0.28);

  /* Typography (Style Guide): ITC Avant Garde Gothic Std for headings, Arial for
     body. No web-embed license, so we name the real face first, then the closest
     geometric fallbacks (Century Gothic / URW Gothic) then Arial. No Poppins. */
  --font-headings: "ITC Avant Garde Gothic Std", "ITC Avant Garde Gothic", "Century Gothic", "URW Gothic", "Questrial", arial, sans-serif;
  --font-body: arial, "helvetica neue", helvetica, sans-serif;
}

/* Fonts: Avant Garde stack for headings, Arial for body */
body {
  font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, h6,
.headline__title, .headline__subtitle, .cards__title, .inner__name, .logo-text, .logo-text span,
.btn, .menu__caption, .large-text-block, blockquote, .tagline-chapter, .footer__text {
  font-family: var(--font-headings) !important;
  letter-spacing: -0.02em;
}

/* Inject orange accent on interactive + highlight elements */
.menu__link:hover,
.menu__link.active,
.menu__list .active .menu__caption,
a:hover,
.headline__subtitle b,
#typed,
.typed-cursor,
.cards__title:hover {
  color: var(--accent);
}
.headline__subtitle b,
#typed { font-weight: 800; }

/* Primary buttons / accent fills */
.btn-accent,
.btn--accent,
.bb-btn-primary {
  background: var(--accent);
  color: var(--bb-white);
  border-color: var(--accent);
}
.btn-accent:hover,
.btn--accent:hover,
.bb-btn-primary:hover {
  background: var(--bb-black);
  color: var(--bb-white);
  border-color: var(--bb-black);
}

/* Loader accent */
.loader { background: var(--base); }
.loader__count { color: var(--accent); }

/* Image placeholders — neutral gray block with hairline + label */
.bb-ph {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background:
    linear-gradient(135deg, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.02)),
    var(--base-shade);
  border: 1px solid var(--stroke-elements);
  border-radius: 18px;
  overflow: hidden;
}
[color-scheme="dark"] .bb-ph {
  background: linear-gradient(135deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02)), #101010;
}
.bb-ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headings, "Poppins"), sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.bb-ph--glow { box-shadow: var(--glow-orange); }

/* Neutralize theme demo background images (we use placeholders) */
.intro-bg-02__01 img,
.intro-bg-02__02 img,
.item img {
  border-radius: 16px;
}

/* Guard against horizontal scroll from full-bleed theme rows */
html, body { max-width: 100%; overflow-x: clip; }

/* ============================================================= *
 * Homepage hero — overlap fix + fluid typography (CRO)
 * The parallax placeholders (.intro-bg-02__01/02) are absolutely
 * positioned and drift on scroll; the massive H1 used stepped px
 * sizes (9→11→12.6→16rem) that clip the long word ("development")
 * and force horizontal scroll on 13"/iPad widths. Fixes:
 *  1) keep hero text above the decorative placeholders,
 *  2) scale the title fluidly,
 *  3) guarantee a gap so the subtitle never touches the grey grid.
 * ============================================================= */

/* 1. Hero text always layered above the parallax placeholders. */
.main__intro .headline { position: relative; z-index: 3; }
.main__intro .intro__background { z-index: 0; }

/* 2. Fluid hero title — smooth scaling avoids clipping / horizontal
      scroll between 768–1440px (13" laptops, iPads). */
.headline__title {
  font-size: clamp(2.5rem, 8.4vw, 12.6rem);
  line-height: 0.95;
  overflow-wrap: break-word;
}

/* 3. Dynamic breathing room below the subtitle so it never collides
      with the grey placeholder / marquee grid that follows it. */
.headline__subtitle.space-top { margin-top: clamp(1.25rem, 3.2vh, 2.5rem); }
.main__media.media-stack-bottom { margin-top: clamp(2.5rem, 7vw, 6rem); }
@media only screen and (min-width: 1200px) {
  .main__media.media-stack-bottom { margin-top: clamp(3rem, 8vh, 7rem); }
}

/**
 * Bridge: map the BigBase component design tokens (used by the reusable
 * PageHeader / Pricing / forms components) onto the Blayden theme tokens, so
 * interior pages inherit the brand + the theme's light/dark scheme.
 */
:root {
  --brand-orange: var(--accent);
  --brand-orange-rgb: var(--accent-rgb);
  --brand-gray: #4a4a4a;
  --brand-black: #000;
  --brand-white: #fff;
  --brand-white-rgb: 255 255 255;

  --color-text: var(--t-bright);
  --color-text-strong: var(--t-bright);
  --color-text-muted: var(--t-muted);
  --color-text-inverse: var(--base);
  --color-bg: var(--base);
  --color-bg-surface: var(--base-shade);
  --color-bg-muted: var(--base-shade);
  --color-bg-inverse: var(--t-bright);
  --color-brand: var(--accent);
  --color-on-brand: #fff;
  --color-border: var(--stroke-elements);
  --color-border-inputs: var(--stroke-elements);
  --color-border-subtle: var(--stroke-elements);
  --color-border-strong: var(--t-bright);
  --color-focus-ring: var(--accent);
  --color-state-hover: var(--accent);
  --color-error: #b3261e;
  --color-success: #1b5e20;

  --orange-soft: rgb(var(--accent-rgb) / 0.12);
  --orange-glow: rgb(var(--accent-rgb) / 0.18);
  --mech-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --mech-shadow-md: 0 10px 40px rgb(0 0 0 / 0.1);
  --mech-hairline-on-light: rgb(0 0 0 / 0.14);
}

/* Interior page hero (BlaydenPage) */
.bb-page-hero {
  /* Top matches .svc-hero so every page hero clears the fixed header by the
     same amount — the hubs dropped their eyebrow line, which left the H1
     sitting too close to the header at the old 7rem floor. */
  padding: clamp(9rem, 13vw, 13rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  max-width: 90rem;
  margin-inline: auto;
}
.bb-page-hero__title {
  font-family: var(--font-headings, "Poppins"), sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin: 0;
  max-width: 18ch;
}
.bb-page-hero__intro {
  margin: 1.25rem 0 0;
  font-family: arial, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--t-medium);
  max-width: 54ch;
  line-height: 1.5;
}
/* Keep reused component sections inside the theme's max width */
.bb-page-body .section {
  max-width: 90rem;
  margin-inline: auto;
}

/* Dark section wrappers (CtaBand/Stats variant="dark") invert text */
[data-theme="dark"] {
  --color-text: #fff;
  --color-text-strong: #fff;
  --color-text-muted: rgb(255 255 255 / 0.7);
  --color-bg: #000;
  --color-border: rgb(255 255 255 / 0.16);
}