/* ═══════════════════════════════════════════════════════════════
   BRAND.CSS — site-wide brand consistency layer.
   Loaded by head.php on EVERY page, after the per-page stylesheet,
   so its rules win equal-specificity conflicts.

   · Brand typography — display stack (Freight Sans → Trebuchet MS)
     replaces DM Serif everywhere; JetBrains Mono for kickers,
     eyebrows and decorative numerals
   · Purple headings on light surfaces (white-on-dark untouched)
   · Consistent 96 / 80 / 64px section rhythm
   · Animation primitives: hero entrance (.gp-rise) and scroll
     reveals ([data-reveal]) — driven by assets/js/animations.js
   Theme colors are NOT changed by this file.
   ═══════════════════════════════════════════════════════════════ */

/* ── Brand display stack for headings (replaces DM Serif) ──── */
h1, h2, h3, h4,
.sec-title,
.vs-title,
.hero-h1,
.vision-tile-title,
.accel-card-title,
.diff-headline,
.diff-cell-body h4,
.editorial-content h3,
.story-card-inner h3,
.box2-card-role,
.hero-vis-label strong,
.modal-title,
.accel-img-placeholder {
    font-family: 'Freight Sans Pro', 'Trebuchet MS', 'Gill Sans MT', 'Gill Sans', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.18;
}

/* Headings on light surfaces → brand purple (dark-surface ones keep their colors) */
.hero-h1,
.sec-title,
.vs-title,
.wwd-card h3,
.step-main-title,
.vision-tile-title,
.accel-card-title,
.diff-headline,
.diff-cell-body h4 {
    color: #34005F;
}

/* Gradient words: keep the gradient, drop the italic serif slant */
.grad-it,
.grad-inline,
em.grad { font-style: normal; }

/* Intro pull-quotes (journey / testimonials) → same voice as the
   homepage quote: brand display, bold, upright, brand purple */
.iq-text {
    font-family: 'Freight Sans Pro', 'Trebuchet MS', 'Gill Sans MT', 'Gill Sans', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #34005F;
}

/* Decorative numerals → mono (matches the V2 watermark numerals) */
.editorial-num,
.box2-card-num-bg,
.story-card-ghost,
.step-num {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 0;
}

/* ── Mono voice for kickers / eyebrows (colors preserved) ──── */
.sec-kicker,
.sec-kicker-center,
.hero-kicker,
.step-kicker,
.diff-kicker-text,
.editorial-tag,
.vision-tile-subtitle,
.accel-card-tag,
.vs-kicker {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Courier New', monospace;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: 1;
}

/* Body copy size parity */
.sec-sub { font-size: 1rem; }

/* ── Consistent section rhythm (96 / 80 / 64) ──────────────── */
.wwd,
.svc-section,
.stories-sec,
.diff-section,
.bespoke-process-sec,
.bg-clean-step { padding: 96px 0; }
.intro-wrap { padding: 96px 0; }
.sec-header { margin-bottom: 56px; }
@media (max-width: 1024px) {
    .wwd, .svc-section, .stories-sec, .diff-section, .bespoke-process-sec, .bg-clean-step { padding: 80px 0; }
    .intro-wrap { padding: 80px 0; }
}
@media (max-width: 640px) {
    .wwd, .svc-section, .stories-sec, .diff-section, .bespoke-process-sec, .bg-clean-step { padding: 64px 0; }
    .intro-wrap { padding: 64px 0; }
    .sec-header { margin-bottom: 40px; }
}

/* ═══ Hero entrance (elements tagged .gp-rise by animations.js) ═══ */
.gp-rise {
    opacity: 0;
    transform: translateY(24px);
    animation: gp-rise .85s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@keyframes gp-rise { to { opacity: 1; transform: none; } }

/* ═══ Scroll-reveal primitives (driven by animations.js) ═══ */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s cubic-bezier(0.2, 0.6, 0.2, 1),
                transform .75s cubic-bezier(0.2, 0.6, 0.2, 1);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ═══ Reduced motion — brand accessibility rule ═══ */
@media (prefers-reduced-motion: reduce) {
    .gp-rise { opacity: 1; transform: none; animation: none; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}