/*
Theme Name: Rifle Approach Marketing (Kadence Child)
Theme URI: https://rifleapproachmarketing.com
Description: Kadence child theme carrying the Rifle Approach Marketing design system (dark charcoal-navy palette, gold accent, Source Serif 4 / Inter type). v4: FAQ color-rule correction, restored "Math Behind the Mark" band, dual social-proof outcomes grid on Services, slug-derived service routing, glass-panel flip cards, Contact "Command Intake Portal" restructure — see IMPLEMENTATION-NOTES.md.
Author: Rifle Approach Marketing
Template: kadence
Version: 4.0.0
Text Domain: ram-kadence-child
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  /* Backgrounds */
  --ram-bg: #12141a;           /* primary background */
  --ram-bg-deep: #0a0b10;      /* deep/footer background */
  --ram-bg-panel: #171a22;     /* panel/section fill */
  --ram-bg-card: #1c2029;      /* card fill */
  --ram-bg-card-alt: #1a1e28;  /* alt card fill */
  --ram-bg-utility: #11161B;   /* v2: dedicated utility card background (About cards) */
  --ram-bg-flip-back: #1C232A; /* v3: arsenal flip-card back face */

  /* Text */
  --ram-text: #eef0f4;         /* headings / primary text */
  --ram-text-body: #c7cbd6;    /* body text */
  --ram-text-muted: #9aa0b0;   /* muted / secondary text */
  --ram-text-faint: #8f96a6;   /* faint meta text */

  /* Accent */
  --ram-gold: #eeba2b;
  --ram-gold-light: #f4cc55;
  --ram-gold-deep: #D4AF37;    /* v2: services matrix hover border */
  --ram-gold-ink: #211d17;     /* text-on-gold */
  --ram-gold-ink-soft: #3a2c05;

  /* Solutions/services category accents */
  --ram-accent-gold: #eeba2b;
  --ram-accent-blue: #8fb8de;
  --ram-accent-lavender: #c9a2e0;
  --ram-accent-teal: #7fd4c1;   /* v3: flip-card back-face rotation */
  --ram-accent-rose: #e2a2ad;   /* v3: flip-card back-face rotation */

  /* Borders */
  --ram-border: rgba(230, 233, 240, 0.12);
  --ram-border-soft: rgba(230, 233, 240, 0.08);
  --ram-border-gold: rgba(238, 186, 43, 0.35);
  --ram-border-utility: #222B35; /* v2: About card border */

  /* Type */
  --ram-font-heading: 'Source Serif 4', Georgia, serif;
  --ram-font-body: 'Inter', system-ui, sans-serif;

  /* Radius / spacing */
  --ram-radius: 8px;
  --ram-radius-sm: 6px;
  --ram-section-pad-y: clamp(48px, 7vw, 88px);
  --ram-section-pad-x: clamp(20px, 5vw, 64px);
}

/* =========================================================
   2. BASE / UTILITIES
   ========================================================= */

.ram-page-dark,
.ram-page-dark .site,
.ram-page-dark .content-area {
  background: var(--ram-bg);
  color: var(--ram-text);
}

.ram-page-dark a { color: var(--ram-gold); }
.ram-page-dark a:hover { color: var(--ram-gold-light); }

.ram-serif { font-family: var(--ram-font-heading); }
.ram-sans { font-family: var(--ram-font-body); }

/* v2: wraps every literal mention of the agency name (Universal Typography Rule) */
.ram-brand { font-weight: 700; }

/* v3: inline gold accent for emphasized (non-italic) words within copy */
.ram-text-gold { color: var(--ram-gold); }

.ram-eyebrow {
  font-family: var(--ram-font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ram-gold);
  margin: 0 0 16px;
}

.ram-kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ram-gold);
  font-weight: 700;
  margin: 0 0 14px;
}

.ram-section {
  padding: var(--ram-section-pad-y) var(--ram-section-pad-x);
}

.ram-section-xxs { max-width: 720px; margin: 0 auto; }
.ram-section-sm { max-width: 900px; margin: 0 auto; }
.ram-section-narrow { max-width: 820px; margin: 0 auto; }
.ram-section-medium { max-width: 1000px; margin: 0 auto; }
.ram-section-wide { max-width: 1100px; margin: 0 auto; }

/* Two-column split (About intro/stats). v4: tuned to a literal 60%/40%
   split (was an approximate 7fr/5fr ≈ 58.3%/41.7%). */
.ram-grid-7-5 {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  gap: 44px;
  align-items: center;
}
.ram-grid-7-5.ram-align-start { align-items: start; }
@media (max-width: 800px) {
  .ram-grid-7-5 { grid-template-columns: 1fr; }
}

.ram-mt-24 { margin-top: 24px; }
.ram-mt-32 { margin-top: 32px; }
.ram-empty-state {
  font-size: 15px;
  color: var(--ram-text-muted);
  border: 1px dashed var(--ram-border);
  border-radius: var(--ram-radius-sm);
  padding: 24px;
}

.ram-bg-panel { background: var(--ram-bg-panel); }
.ram-bg-deep { background: var(--ram-bg-deep); }

/* Buttons */
.ram-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ram-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ram-gold-ink) !important;
  background: var(--ram-gold);
  border: none;
  border-radius: 4px;
  padding: 14px 26px;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ram-btn:hover { background: var(--ram-gold-light); color: var(--ram-gold-ink) !important; }

.ram-link-arrow {
  display: inline-flex; /* v3: matches .ram-btn's box model so both sit on the same baseline */
  align-items: center;
  line-height: 1;
  font-weight: 600;
  font-size: 15px;
  color: var(--ram-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ram-text);
  padding-bottom: 2px;
}
.ram-link-arrow:hover { color: var(--ram-gold) !important; border-color: var(--ram-gold); }

.ram-panel-gradient {
  background: linear-gradient(135deg, #1f2636 0%, #12141a 100%);
  border-top: 1px solid var(--ram-border-gold);
  border-bottom: 1px solid var(--ram-border-gold);
}
.ram-panel-gradient.ram-panel-gradient--top-only { border-bottom: none; }

.ram-panel-gold {
  background: var(--ram-gold);
  color: var(--ram-gold-ink-soft);
}
.ram-panel-gold h2 { color: var(--ram-gold-ink); }
.ram-panel-gold .ram-kicker { color: var(--ram-gold-ink); }

/* v2: gold banner gets its own dedicated padding + centered inner wrapper */
.ram-gold-banner-section { padding: 6rem 2rem; }
.ram-gold-banner-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* =========================================================
   3. HERO (full-bleed photo + dark gradient overlay)
   ========================================================= */
.ram-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--ram-bg-deep);
  background-size: cover;
  background-position: center;
}
.ram-hero--home { min-height: 620px; }

.ram-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(13, 11, 7, 0.95) 0%,
    rgba(13, 11, 7, 0.82) 42%,
    rgba(13, 11, 7, 0.42) 78%,
    rgba(13, 11, 7, 0.2) 100%
  );
}

/* v3: split (60/40) hero layout for Home. The v2 gradient faded all the
   way to 0% opacity by center-right, which made the background photo too
   bright and the text illegible — contrast correction below keeps a
   heavy dark pocket over the text column at all times. */
.ram-hero--split::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 45%, rgba(0, 0, 0, 0.4) 100%);
}

/* v5.3: Services hero — now that a real background photo is going in,
   switched from the flat uniform tint to a left-to-right fade: heavy
   dark pocket behind the text column, easing to lighter on the right
   so the photo still shows through. Same treatment as the Home split
   hero, just applied to this single-column layout. */
.ram-hero--services::before {
  background: linear-gradient(to right, rgba(10, 14, 18, 0.92) 0%, rgba(10, 14, 18, 0.88) 50%, rgba(10, 14, 18, 0.35) 100%);
}
.ram-hero--split .ram-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  gap: 32px;
  align-items: center;
}
.ram-hero--split .ram-hero-content-inner { max-width: none; }
.ram-hero-col-right { min-height: 1px; } /* intentionally blank — background graphic shows through */
@media (max-width: 860px) {
  .ram-hero--split .ram-hero-content { grid-template-columns: 1fr; }
  .ram-hero-col-right { display: none; }
}

.ram-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px var(--ram-section-pad-x);
  width: 100%;
}
.ram-hero-content-inner { max-width: 640px; }

.ram-hero-title {
  font-family: var(--ram-font-heading);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.14;
  margin: 0;
  color: var(--ram-text);
}
.ram-hero--home .ram-hero-title { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.12; }
.ram-hero-title em { font-style: italic; color: var(--ram-gold); }

.ram-hero-lede {
  font-size: 17px;
  line-height: 1.65;
  color: #d7dae2;
  margin: 20px 0 0;
  max-width: 64ch;
}

.ram-hero-actions {
  display: flex;
  gap: 20px;
  align-items: center; /* fixes vertical center-alignment defect on the button row */
  flex-wrap: wrap;
  margin-top: 30px;
}

/* =========================================================
   4. TRUST INDICATOR LOGO GRID (v2 — new section, Home)
   ========================================================= */
.ram-trust-section {
  padding: 40px var(--ram-section-pad-x);
  background: var(--ram-bg-panel);
  text-align: center;
}
.ram-trust-subtitle {
  display: block;
  font-size: 1.35rem;      /* v3: increased significantly for prominence */
  letter-spacing: 0.05em;  /* v3 */
  text-transform: uppercase;
  font-weight: 700;        /* v3 */
  color: #8A99A8;          /* v3 */
  margin: 0 0 28px;
}
.ram-trust-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: 32px;    /* v3: tuned for up to 8 logos wrapping into multiple rows */
  column-gap: 48px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.ram-trust-logo {
  max-height: 45px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.4;
  transition: opacity 0.25s ease;
}
.ram-trust-logo:hover { opacity: 0.75; }
/* v5.9: for logos whose color block is part of the actual brand mark
   (not just an accidental flat background) — these render in their
   original color instead of the white-silhouette filter, since that
   filter would just show as a blank white box on a fully opaque image. */
.ram-trust-logo--color {
  filter: none;
  opacity: 0.9;
}
.ram-trust-logo--color:hover { opacity: 1; }
.ram-trust-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  min-width: 120px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ram-text-faint);
  opacity: 0.5;
  border: 1px dashed var(--ram-border);
  border-radius: 4px;
  padding: 0 16px;
}
@media (max-width: 820px) {
  .ram-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; justify-items: center; }
}
@media (max-width: 560px) {
  .ram-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   4b. MATH BEHIND THE MARK — restored stat band (v4, Home, sits
       directly under the trust logo grid, before the imperatives grid)
   ========================================================= */
.ram-math-band {
  background: linear-gradient(135deg, #1f2636 0%, #12141a 100%);
  border-top: 1px solid var(--ram-border-gold);
  border-bottom: 1px solid var(--ram-border-gold);
  padding: 64px var(--ram-section-pad-x);
}


/* =========================================================
   4d. SYMMETRICAL OUTCOMES GRID (v4 — new, Services, sits between the
       18-card matrix and the technical FAQ) — two case studies, each
       internally split 40% photo/logo column, 60% quote column.
   ========================================================= */
.ram-outcomes-section {
  padding: var(--ram-section-pad-y) var(--ram-section-pad-x);
  background: var(--ram-bg-panel);
  border-top: 1px solid var(--ram-border-soft);
  border-bottom: 1px solid var(--ram-border-soft);
}
.ram-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .ram-outcomes-grid { grid-template-columns: 1fr; gap: 40px; }
}

.ram-outcome-case {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 20px;
  align-items: start;
}
@media (max-width: 560px) {
  .ram-outcome-case { grid-template-columns: 1fr; }
}

.ram-outcome-media { display: flex; flex-direction: column; gap: 12px; }
.ram-outcome-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--ram-radius-sm);
  overflow: hidden;
  border: 1px solid var(--ram-border);
  background: var(--ram-bg-card);
}
.ram-outcome-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ram-outcome-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  text-align: center;
  color: var(--ram-text-faint);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ram-outcome-logo {
  display: block;
  max-height: 64px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  /* v5.5: switched from the grayscale+brightness treatment (too faint
     for a single standalone logo) to the same brightness(0) invert(1)
     full-white silhouette used for the trust-logo grids on Home/About,
     just larger and more opaque since this is one logo on its own
     rather than a dense row of many.
     v5.7: bumped up again (42px -> 64px) — even at 42px these read as
     small next to the larger case-study photo + quote text, unlike the
     dedicated trust-logo row on About where everything is logo-sized. */
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.ram-outcome-logo-placeholder {
  font-size: 10px;
  color: var(--ram-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
}

.ram-outcome-quote {
  font-family: var(--ram-font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ram-text);
  margin: 0 0 14px;
}
.ram-outcome-attribution {
  display: block;
  color: var(--ram-gold);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* =========================================================
   5. SIX STRATEGIC IMPERATIVES — tactical dashboard grid (v2)
   ========================================================= */
.ram-differentiators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.ram-differentiator {
  position: relative;
  background: var(--ram-bg-card-alt);
  border: 1px solid var(--ram-border);
  padding: 32px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.ram-differentiator:hover {
  border-color: var(--ram-gold);
  background: #1c232a;
  box-shadow: 0 0 32px rgba(238, 186, 43, 0.18);
}
.ram-differentiator:hover h3 { color: var(--ram-text); }
.ram-differentiator:hover p { color: #dfe2ea; }

/* Tactical HUD corner brackets */
.ram-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(230, 233, 240, 0.3);
  transition: border-color 0.3s ease;
  pointer-events: none;
}
.ram-corner--tl { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.ram-corner--tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }
.ram-corner--bl { bottom: -1px; left: -1px; border-bottom: 1px solid; border-left: 1px solid; }
.ram-corner--br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
.ram-differentiator:hover .ram-corner { border-color: var(--ram-gold); }

.ram-differentiator-num {
  font-family: var(--ram-font-heading);
  font-weight: 700;
  font-size: 34px;
  color: var(--ram-gold);
  line-height: 1;
}
.ram-differentiator h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 14px 0 8px;
  color: var(--ram-text);
  transition: color 0.3s ease;
}
.ram-differentiator p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ram-text-muted);
  margin: 0;
  transition: color 0.3s ease;
}

/* =========================================================
   6. ARSENAL OF SOLUTIONS — 3D Y-axis scroll-flip cards (v3)
   ========================================================= */
.ram-arsenal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .ram-arsenal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ram-arsenal-grid { grid-template-columns: 1fr; } }

/* Outer card establishes 3D perspective + hover trigger; no background
   image is ever loaded here — resting state is a flat dashboard tile. */
.ram-arsenal-card {
  perspective: 1200px;
  min-height: 220px;
  border-radius: var(--ram-radius);
  transition: all 0.5s ease;
}
/* v5: hover glow — a smooth, low-opacity warm gold outer glow that fires
   in sync with the 3D flip below, replacing the v4.1 resting-state pulse
   as the card's signature interaction.
   v5.1: added .is-scroll-flip, toggled by custom.js (IntersectionObserver)
   as each card crosses the vertical center of the viewport, so the same
   flip + glow also fires on scroll (touch devices included), not just
   mouse hover. */
.ram-arsenal-card:hover,
.ram-arsenal-card:focus-within,
.ram-arsenal-card.is-scroll-flip {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}
.ram-arsenal-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.ram-arsenal-card:hover .ram-arsenal-card-inner,
.ram-arsenal-card:focus-within .ram-arsenal-card-inner,
.ram-arsenal-card.is-scroll-flip .ram-arsenal-card-inner {
  transform: rotateY(180deg);
}

.ram-arsenal-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--ram-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  box-sizing: border-box;
}

/* Resting (front) face — v5: pure-white centered title on the premium
   dark-glass panel. The v4.1 "power pulse" border animation and the
   [ DEPLOY ] corner tag are both removed per the v5 patch — the card's
   distinctiveness now comes entirely from the hover glow below, not
   from resting-state decoration. */
.ram-arsenal-card-front {
  position: relative;
  background: rgba(17, 22, 27, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.ram-arsenal-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--ram-text);
  line-height: 1.3;
  text-align: center;
}

/* Flipped (back) face — deep slate gray, rotating accent color per card */
.ram-arsenal-card-back {
  background: var(--ram-bg-flip-back);
  border: 1px solid var(--ram-border-gold);
  transform: rotateY(180deg);
}
.ram-arsenal-card-back-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
  /* color set per-card via inline style, rotating through the accent palette */
}
.ram-arsenal-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ram-text-body);
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ram-arsenal-card-inner { transition: transform 0.6s ease; }
}

/* =========================================================
   7. FAQ ACCORDION (native <details>/<summary>)
   ========================================================= */
/* v4: Global FAQ Styling & Behavior — corrects the v3 rule (which made
   summary text gold at rest). The spec now draws a clear distinction:
   - Section titles ("FAQs", "Our Methodology FAQs", etc.) — always gold.
   - Accordion question text — Pure White at rest, transitions to gold
     (question text AND the native disclosure marker) only when hovered
     or open.
   - Answer body text — always Pure White. */
.ram-faq-item { padding: 16px 0; border-bottom: 1px solid rgba(230, 233, 240, 0.14); }
.ram-faq-item summary {
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ram-text); /* Pure White at rest */
  list-style: revert;
  transition: color 0.2s ease;
}
.ram-faq-item summary::marker {
  color: var(--ram-text);
  transition: color 0.2s ease;
}
.ram-faq-item summary:hover,
.ram-faq-item[open] summary {
  color: var(--ram-gold);
}
.ram-faq-item summary:hover::marker,
.ram-faq-item[open] summary::marker {
  color: var(--ram-gold);
}
.ram-faq-item p { font-size: 15px; line-height: 1.6; color: var(--ram-text); margin: 12px 0 0; }

/* Section-title gold accent — used on every FAQ/technical-spec heading
   sitewide (Home, About, Services, Contact) per the "Main Section
   Titles" rule. (.ram-tech-faq-sidebar h3's own color is set to gold
   directly where that selector is defined, further down.) */
.ram-faq-headline-accent { color: var(--ram-gold); }

/* v2: roomier accordion titles for the Services technical FAQ list */
.ram-tech-faq-list .ram-faq-item { padding: 20px 4px; }

/* =========================================================
   8. ABOUT — core values cards (v2 design upgrade)
   ========================================================= */
.ram-about-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 800px) { .ram-about-cards { grid-template-columns: 1fr; } }

.ram-about-card {
  background: var(--ram-bg-utility);
  border: 1px solid var(--ram-border-utility);
  padding: 2.5rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.ram-about-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--ram-gold), rgba(238, 186, 43, 0.15));
}
.ram-about-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(238, 186, 43, 0.14);
  border-color: var(--ram-border-gold);
}
.ram-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ram-gold);
  color: var(--ram-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ram-icon-circle i { font-size: 22px; display: inline-block; transition: transform 0.3s ease; }
.ram-about-card:hover .ram-icon-circle i { transform: scale(1.35); }
.ram-about-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; color: var(--ram-text); }
.ram-about-card p { font-size: 14.5px; line-height: 1.6; color: var(--ram-text-body); margin: 0; }

/* =========================================================
   9. STAT COUNTERS (About)
   ========================================================= */
.ram-stats { display: flex; flex-direction: column; gap: 22px; }
.ram-stat { border-left: 3px solid var(--ram-gold); padding-left: 20px; }
.ram-stat-value {
  font-family: var(--ram-font-heading);
  font-weight: 700;
  font-size: 44px;
  color: var(--ram-gold);
  line-height: 1;
}
.ram-stat-label { font-size: 14px; color: var(--ram-text-body); margin-top: 4px; }

/* =========================================================
   10. OUR PROCESS — horizontal split-grid timeline (v2)
   ========================================================= */
.ram-timeline { display: flex; flex-direction: column; }
.ram-phase {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 32px;
  padding: 28px 0;
  opacity: 0.6;
  transition: opacity 0.4s ease;
}
.ram-phase.is-active { opacity: 1; }
@media (max-width: 760px) {
  .ram-phase { grid-template-columns: 1fr; gap: 16px; }
}

.ram-phase-left { display: flex; gap: 20px; align-items: flex-start; }
.ram-phase-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ram-phase-marker {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ram-bg-card);
  border: 2px solid var(--ram-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ram-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--ram-gold);
  flex-shrink: 0;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.ram-phase.is-active .ram-phase-marker {
  background: var(--ram-gold);
  color: var(--ram-gold-ink);
  box-shadow: 0 0 0 6px rgba(238, 186, 43, 0.15);
}
.ram-phase-connector {
  width: 2px;
  flex: 1;
  min-height: 40px;
  background: linear-gradient(to bottom, var(--ram-gold), rgba(238, 186, 43, 0.15));
  margin: 6px 0;
}
.ram-phase-left-text { padding-top: 6px; }
.ram-phase-kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ram-text-faint);
  margin: 0 0 6px;
}
.ram-phase-left-text h3 {
  font-family: var(--ram-font-heading);
  font-weight: 700;
  font-size: 23px;
  margin: 0;
  color: var(--ram-text);
}

.ram-phase-right {
  padding: 24px;
  border-radius: var(--ram-radius);
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ram-phase-right:hover {
  background: var(--ram-bg-card);
  border-color: var(--ram-border-gold);
  transform: translateX(6px);
}
.ram-phase-right p { font-size: 15.5px; line-height: 1.65; color: var(--ram-text-body); margin: 0 0 14px; max-width: 62ch; }
.ram-phase-points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ram-phase-points li { font-size: 15px; line-height: 1.55; color: var(--ram-text-body); }
.ram-phase-points strong { font-weight: 700; color: var(--ram-text); }

/* =========================================================
   11. SERVICES — 9-card interactive matrix grid (v2)
   ========================================================= */
.ram-services-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .ram-services-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ram-services-matrix { grid-template-columns: 1fr; } }

.ram-service-card {
  background: var(--ram-bg-card);
  border: 1px solid var(--ram-border);
  border-radius: 6px;
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ram-service-card:hover { transform: scale(1.02); border-color: var(--ram-gold-deep); }
.ram-service-card-name { font-size: 16px; font-weight: 700; margin: 0 0 10px; color: var(--ram-text); }
.ram-service-card p { font-size: 14px; line-height: 1.6; color: var(--ram-text-muted); margin: 0 0 18px; }
.ram-service-card-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ram-gold);
  text-decoration: none;
  margin-top: auto;
}
.ram-service-card-link:hover { color: var(--ram-gold-light); }

/* =========================================================
   12. ENTERPRISE CASE QUOTE BLOCK (v2 — new, Services)
   ========================================================= */
.ram-quote-block {
  position: relative;
  overflow: hidden;
  background: #0d1116;
  text-align: center;
  padding: 72px var(--ram-section-pad-x);
}
.ram-quote-mark {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ram-font-heading);
  font-size: 220px;
  line-height: 1;
  color: rgba(238, 186, 43, 0.08);
  pointer-events: none;
  user-select: none;
}
.ram-quote-text {
  position: relative;
  z-index: 1;
  font-family: var(--ram-font-heading);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
  color: var(--ram-text);
  max-width: 820px;
  margin: 0 auto 24px;
}
.ram-quote-attribution {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ram-text-muted);
}
.ram-quote-attribution::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ram-gold);
  display: inline-block;
}

/* =========================================================
   13. UNIFIED STRATEGY — balanced 50/50 (v2)
   ========================================================= */
.ram-unified-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) { .ram-unified-grid { grid-template-columns: 1fr; } }

.ram-unified-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ram-unified-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ram-text-body); }
.ram-unified-checklist li::before { content: "\2713"; color: var(--ram-gold); font-weight: 700; flex-shrink: 0; }

/* =========================================================
   14. TECHNICAL FAQ — sticky sidebar layout (v2, Services)
   ========================================================= */
.ram-tech-faq-grid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 40px;
  align-items: start;
}
@media (max-width: 800px) { .ram-tech-faq-grid { grid-template-columns: 1fr; } }
.ram-tech-faq-sidebar { position: sticky; top: 100px; }
.ram-tech-faq-sidebar h3 {
  font-family: var(--ram-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--ram-gold); /* v4: "Main Section Titles" are always gold */
  margin: 0;
  line-height: 1.3;
}
@media (max-width: 800px) { .ram-tech-faq-sidebar { position: static; } }

/* =========================================================
   15. CONTACT — "Command Intake Portal" layout (v4)
   ========================================================= */

/* Full-bleed dark portal container wrapping the top "Shield Hero" half
   of the page */
.ram-portal-section {
  background: var(--ram-bg-deep);
  padding: 72px var(--ram-section-pad-x);
}

.ram-contact-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 900px) { .ram-contact-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Left column: headline + intent paragraph only (v4 — the info cards
   that used to stack here now live in the full-width Briefing Deck
   below). Constrained to ~65% of the column's own width so the column
   reads as spacious rather than a hard-edged block of text. */
.ram-contact-left { display: flex; flex-direction: column; }
.ram-portal-intro { max-width: 65%; }
@media (max-width: 900px) { .ram-portal-intro { max-width: 100%; } }

/* Right column: intake form lifted onto its own elevated card */
.ram-form-card {
  background: var(--ram-bg-card);
  border: 1px solid var(--ram-border);
  border-radius: var(--ram-radius);
  padding: 32px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

/* v5: "What to Expect" — re-expanded to 3 terminal-box cards (Initial
   Review, Discovery Call, Strategy Calibration) in a symmetrical
   3-column row. Cards rest as clean slate-tinted boxes and scroll-
   trigger into an illuminated terminal panel via the existing
   .ram-reveal/.is-visible observer in custom.js (no separate JS
   needed) — same mechanism as the v4.1 2-column version, just back to
   3 up. */
.ram-expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .ram-expect-grid { grid-template-columns: 1fr; } }
.ram-expect-card {
  background: #12181F;
  border: 1px solid #1E2631;
  padding: 2rem;
  border-radius: 4px;
  transition: all 0.5s ease;
  transform: translateY(0);
}
.ram-expect-card.is-visible {
  transform: translateY(-15px);
  background: rgba(23, 29, 37, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 2px solid #D4AF37;
}
.ram-expect-card-num {
  display: block;
  font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: var(--ram-text);
}
.ram-expect-card p { font-size: 14.5px; line-height: 1.6; color: var(--ram-text-body); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .ram-expect-card { transition: none; }
  .ram-expect-card.is-visible { transform: translateY(0); }
}

/* v4.1: standalone, full-width "Our Standard of Partnership" section —
   decoupled from the onboarding grid above; sits directly beneath it. */
.ram-standard-section { padding: 12px 0 0; }
.ram-standard-heading {
  /* v5: font-contrast fix — this was inheriting a color too close to
     the section background to read; force pure white so it cuts
     through cleanly. */
  color: #ffffff !important;
  font-weight: bold;
  font-size: clamp(24px, 3vw, 32px);
  text-align: center;
  margin: 0 0 28px;
}
.ram-standard-callout {
  background: linear-gradient(135deg, #11151A 0%, #0B0D10 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-left: 4px solid #D4AF37;
  border-radius: var(--ram-radius-sm);
  padding: 3rem;
  max-width: 860px;
  margin: 0 auto;
}
.ram-standard-callout p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ram-text-body);
  margin: 0;
  text-align: center;
}

.ram-form { display: flex; flex-direction: column; gap: 16px; }
.ram-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .ram-form-row { grid-template-columns: 1fr; } }

.ram-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--ram-text-muted);
}
.ram-field input[type="text"],
.ram-field input[type="email"],
.ram-field input[type="url"],
.ram-field input,
.ram-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--ram-bg-utility);
  color: var(--ram-text);
  border: 1px solid rgba(230, 233, 240, 0.22);
  border-radius: 4px;
  box-sizing: border-box;
}
.ram-field textarea { resize: vertical; }

.ram-info-card {
  background: var(--ram-bg-card);
  border: 1px solid var(--ram-border);
  border-radius: var(--ram-radius);
  padding: 26px;
}
.ram-info-card--accent { border-top: 3px solid var(--ram-gold); }
.ram-info-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--ram-text); }
.ram-info-card > p { font-size: 14.5px; line-height: 1.6; color: var(--ram-text-muted); margin: 0 0 12px; }

.ram-process-bullets { display: flex; flex-direction: column; gap: 12px; }
.ram-process-bullet {
  background: rgba(230, 233, 240, 0.04);
  border-left: 3px solid var(--ram-accent-gold);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ram-text-body);
}
.ram-process-bullet strong { color: var(--ram-text); font-weight: 700; }
.ram-process-bullet--blue { border-left-color: var(--ram-accent-blue); }
.ram-process-bullet--lavender { border-left-color: var(--ram-accent-lavender); }

/* v2: static (non-accordion) 2x2 FAQ grid for Contact */
.ram-static-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 700px) { .ram-static-faq-grid { grid-template-columns: 1fr; } }
.ram-static-faq-item h4 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; color: var(--ram-text); }
.ram-static-faq-item p { font-size: 14.5px; line-height: 1.6; color: var(--ram-text-muted); margin: 0; }

/* =========================================================
   16. BLOG CARDS
   ========================================================= */
.ram-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.ram-blog-card {
  background: var(--ram-bg-card);
  border: 1px solid var(--ram-border);
  border-radius: var(--ram-radius-sm);
  padding: 24px;
  text-decoration: none !important;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ram-blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); }
.ram-blog-tag {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ram-gold);
  color: var(--ram-gold-ink-soft);
  border-radius: 3px;
  padding: 4px 9px;
}
.ram-blog-card-title { font-size: 18px; font-weight: 700; margin: 12px 0 8px; color: var(--ram-text); }
.ram-blog-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ram-text-muted); }
.ram-blog-card-meta { font-size: 12px; color: var(--ram-text-faint); }

/* =========================================================
   17. POST CONTENT (single.php the_content() output)
   ========================================================= */
.ram-post-content p { margin: 0 0 18px; }
.ram-post-content h2,
.ram-post-content h3,
.ram-post-content h4 { font-family: var(--ram-font-heading); font-weight: 700; color: var(--ram-text); margin: 32px 0 14px; }
.ram-post-content ul,
.ram-post-content ol { margin: 0 0 18px; padding-left: 22px; }
.ram-post-content a { color: var(--ram-gold); }
.ram-post-content img { max-width: 100%; height: auto; border-radius: var(--ram-radius-sm); }
.ram-post-content blockquote {
  border-left: 3px solid var(--ram-gold);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  color: var(--ram-text-muted);
  font-style: italic;
}

/* =========================================================
   18. NAV / FOOTER helpers
   ========================================================= */
.ram-nav-link { font-size: 14px; font-weight: 600; text-decoration: none !important; color: var(--ram-text) !important; }
.ram-nav-link.is-active,
.ram-nav-link:hover { color: var(--ram-gold) !important; }
.ram-footer-blurb { font-size: 13.5px; line-height: 1.6; color: #b0a890; margin: 0; max-width: 420px; }
.ram-footer-heading { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ram-text-faint); margin-bottom: 4px; display: block; }

/* =========================================================
   19. GLOBAL SCROLL-REVEAL (v2 — fade + slide up on enter viewport)
   ========================================================= */
.ram-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ram-reveal.is-visible { opacity: 1; transform: none; }

/* staggered reveal for grid/card groups */
.ram-reveal-group > .ram-reveal:nth-child(1) { transition-delay: 0s; }
.ram-reveal-group > .ram-reveal:nth-child(2) { transition-delay: 0.08s; }
.ram-reveal-group > .ram-reveal:nth-child(3) { transition-delay: 0.16s; }
.ram-reveal-group > .ram-reveal:nth-child(4) { transition-delay: 0.24s; }
.ram-reveal-group > .ram-reveal:nth-child(5) { transition-delay: 0.32s; }
.ram-reveal-group > .ram-reveal:nth-child(6) { transition-delay: 0.4s; }
.ram-reveal-group > .ram-reveal:nth-child(7) { transition-delay: 0.48s; }
.ram-reveal-group > .ram-reveal:nth-child(8) { transition-delay: 0.56s; }
.ram-reveal-group > .ram-reveal:nth-child(9) { transition-delay: 0.64s; }

@media (prefers-reduced-motion: reduce) {
  .ram-reveal,
  .ram-phase,
  .ram-arsenal-card-inner,
  .ram-differentiator,
  .ram-about-card,
  .ram-service-card {
    transition: none !important;
  }
  .ram-reveal { opacity: 1; transform: none; }
}