/**
 * Innovadel FSE — Global Utility CSS
 *
 * Ported from the Lovable design system (commerce-alchemy-main/src/styles.css).
 * All custom utilities referenced in block patterns and templates live here.
 *
 * Contents:
 *   1. CSS Custom Properties (design tokens for runtime access)
 *   2. Glass utilities
 *   3. Gradient text
 *   4. Grid background overlay
 *   5. Marquee animation
 *   6. Float particle animation
 *   7. Section spacing helpers
 *   8. Eyebrow label utility
 *   9. Pill tag utility
 *  10. Card hover utility
 *  11. Dark section utilities
 *  12. Block style overrides (custom block styles registered in functions.php)
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   Mirrors theme.json tokens for use inside block patterns and CSS utilities.
   ========================================================================== */

:root {
  /* Brand */
  --clr-primary:        #9C2022;
  --clr-primary-hover:  #7d1a1c;
  --clr-primary-deeper: #5e1313;
  --clr-primary-light:  #fef2f2;

  /* Dark hero */
  --clr-dark:      #0f1729;
  --clr-dark-card: #1a2540;

  /* Text */
  --clr-foreground:  #1a1d27;
  --clr-muted-text:  #6b7280;

  /* Surfaces */
  --clr-white:     #ffffff;
  --clr-muted-bg:  #f5f5f7;
  --clr-border:    #e8eaf0;

  /* Radius scale */
  --radius-sm:  0.375rem;  /*  6px */
  --radius-md:  0.625rem;  /* 10px */
  --radius-lg:  0.75rem;   /* 12px */
  --radius-xl:  1rem;      /* 16px */
  --radius-2xl: 1.25rem;   /* 20px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-pill: 9999px;

  /* Content widths */
  --content-width: 780px;
  --wide-width:    1280px;

  /* Header height (updated by JS on scroll) */
  --header-height: 64px;
}


/* ==========================================================================
   0. CSS RESET & BASE TYPOGRAPHY
   ──────────────────────────────────────────────────────────────────────────
   This is the layer that was missing and causing every serif/font fallback
   issue: Inter was loaded but never applied. Browser UA defaults
   (Times New Roman for headings, OS system font for inputs) bled through
   everywhere no explicit inline style or component class was present.

   Rules here use element selectors (lowest specificity) so every
   component class and inline style in the templates still wins cleanly.
   ========================================================================== */

/* Universal box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* HTML root — sets the Inter font stack and text rendering */
html {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Body — global typography baseline */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-foreground, #1a1d27);
  background-color: #ffffff;
  /* Subpixel antialiasing — matches Lovable's Tailwind base */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ── Headings ──────────────────────────────────────────────────────────────
   Element selectors intentionally — every component (section-header h2,
   process-card-title, cta-title, etc.) has a higher-specificity rule that
   overrides size/weight exactly as needed. This just kills the UA serif.
   ─────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Use inherit, NOT a fixed colour. Dark sections set `color: #fff` on the
     section element and rely on cascade — a fixed element-level rule would
     override that inheritance and turn hero headings dark. Component-level
     class rules (.section-dark h2, .section-header h2, .cta-title, etc.)
     all have higher specificity and override this where needed. */
  color: inherit;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

h5 {
  font-size: 0.9375rem;
}

h6 {
  font-size: 0.875rem;
  letter-spacing: 0;
}

/* ── Paragraphs ────────────────────────────────────────────────────────── */
p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* ── Anchors ────────────────────────────────────────────────────────────
   Navigation links and component links have higher-specificity overrides
   in navigation.css and global utility classes. This is the base fallback.
   ─────────────────────────────────────────────────────────────────────── */
a {
  color: var(--clr-primary, #9C2022);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--clr-primary-hover, #7d1a1c);
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
ul,
ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
li {
  line-height: 1.7;
}

/* ── Form elements ──────────────────────────────────────────────────────
   `font: inherit` is the single most important line for form elements.
   Without it every browser applies its own default font (often system-ui
   or even Times New Roman on older WebKit) to inputs, selects, textareas,
   and buttons — completely ignoring the body font declaration above.
   ─────────────────────────────────────────────────────────────────────── */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* ── Media ──────────────────────────────────────────────────────────────── */
img,
svg,
video,
canvas,
audio,
iframe {
  display: block;
  max-width: 100%;
}

/* SVGs used inline inside text nodes / flow content stay inline */
p img, p svg,
a svg, button svg, span svg, li svg,
label svg, td svg {
  display: inline-block;
}

/* ── Misc resets ────────────────────────────────────────────────────────── */
blockquote {
  margin: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--clr-border, #e8eaf0);
  margin: 2rem 0;
}

code,
kbd,
pre,
samp {
  font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Consolas,
               'Liberation Mono', Menlo, monospace;
  font-size: 0.875em;
}

/* ── WordPress Gutenberg block content (blog posts / default pages) ──────
   CPTs (service, platform, case_study) have Gutenberg disabled, so these
   rules only fire for blog posts and any page using the classic editor.
   ─────────────────────────────────────────────────────────────────────── */
.entry-content,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content li,
.entry-content blockquote,
.wp-block-paragraph,
.wp-block-heading,
.wp-block-list,
.wp-block-quote,
.wp-block-pullquote,
.wp-block-verse,
.wp-block-table,
.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.wp-block-media-text,
.wp-site-blocks {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── WPForms / Gravity Forms / CF7 — pick up body font via inheritance ─── */
.wpforms-form input,
.wpforms-form select,
.wpforms-form textarea,
.wpforms-field-label,
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper label,
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  font-family: inherit;
}

/* ── WordPress widgets, captions, comments ──────────────────────────────── */
.widget,
.widget-title,
.wp-caption,
.wp-caption-text,
.gallery-caption,
.comment-form input,
.comment-form textarea,
.comment-respond,
.search-form input {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── WordPress admin bar (front-end) — leave its own font alone ──────────
   #wpadminbar has its own scoped font stack. We explicitly do not touch it.
   ─────────────────────────────────────────────────────────────────────── */


/* ==========================================================================
   2. GLASS UTILITIES
   ========================================================================== */

.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-light {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Core group block style variation: .is-style-glass */
.wp-block-group.is-style-glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-block-group.is-style-glass-light {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}


/* ==========================================================================
   3. GRADIENT TEXT
   ========================================================================== */

.gradient-text,
.wp-block-heading.is-style-gradient-text {
  background: linear-gradient(120deg, #ffffff 0%, #ffb4b5 50%, #9C2022 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}

/* On light backgrounds (non-dark sections) use a brand-only gradient */
.gradient-text--brand {
  background: linear-gradient(120deg, #9C2022 0%, #5e1313 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}


/* ==========================================================================
   4. GRID BACKGROUND OVERLAY
   ========================================================================== */

.grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Pseudo-element version — add class to parent, grid sits above */
.grid-bg-overlay {
  position: relative;
}
.grid-bg-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.4;
}
.grid-bg-overlay > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   5. MARQUEE ANIMATION
   ========================================================================== */

@keyframes innovadel-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: innovadel-marquee 35s linear infinite;
  will-change: transform;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Marquee wrapper — hides overflow and fades edges */
.marquee-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.marquee-inner {
  display: flex;
  width: max-content;
  gap: 4rem;
  align-items: center;
}


/* ==========================================================================
   6. FLOAT PARTICLE
   ========================================================================== */

@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-30px) translateX(10px);
    opacity: 1;
  }
}

.float-particle {
  animation: float-particle 6s ease-in-out infinite;
}


/* ==========================================================================
   7. SECTION SPACING HELPERS
   Used for consistent vertical padding on full-width sections.
   ========================================================================== */

.section-py    { padding-top: 4rem;  padding-bottom: 4rem;  }
.section-py-sm { padding-top: 3rem;  padding-bottom: 3rem;  }
.section-py-lg { padding-top: 5rem;  padding-bottom: 5rem;  }
.section-py-xl { padding-top: 7rem;  padding-bottom: 7rem;  }

.section-px    { padding-left: 1.5rem; padding-right: 1.5rem; }

.section-max {
  max-width: var(--wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 768px) {
  .section-py    { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .section-py-lg { padding-top: 3rem;  padding-bottom: 3rem; }
  .section-py-xl { padding-top: 4rem;  padding-bottom: 4rem; }
}


/* ==========================================================================
   8. EYEBROW LABEL
   ========================================================================== */

.eyebrow,
.wp-block-heading.is-style-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 0.75rem;
  display: block;
}

.eyebrow--white {
  color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   9. PILL TAGS
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-foreground);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pill:hover {
  border-color: rgba(156, 32, 34, 0.4);
  color: var(--clr-primary);
}

.pill--brand {
  background: rgba(156, 32, 34, 0.08);
  border-color: rgba(156, 32, 34, 0.2);
  color: var(--clr-primary);
}

.pill--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}


/* ==========================================================================
   10. CARD HOVER UTILITY
   ========================================================================== */

.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06);
  border-color: rgba(156, 32, 34, 0.3);
}

/* Core group block style variation: .is-style-card-bordered */
.wp-block-group.is-style-card-bordered {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-2xl);
  background: var(--clr-white);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.wp-block-group.is-style-card-bordered:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12);
  border-color: rgba(156, 32, 34, 0.3);
}

.wp-block-group.is-style-card-elevated {
  border: none;
  border-radius: var(--radius-2xl);
  background: var(--clr-white);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-block-group.is-style-card-elevated:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12);
}


/* ==========================================================================
   11. DARK SECTION UTILITIES
   ========================================================================== */

.dark-section,
.wp-block-group.is-style-dark-section {
  background-color: var(--clr-dark);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
}
.dark-section h1, .dark-section h2, .dark-section h3,
.dark-section h4, .dark-section h5, .dark-section h6,
.wp-block-group.is-style-dark-section h1,
.wp-block-group.is-style-dark-section h2,
.wp-block-group.is-style-dark-section h3,
.wp-block-group.is-style-dark-section h4 {
  color: #ffffff;
}

.muted-section,
.wp-block-group.is-style-muted-section {
  background-color: var(--clr-muted-bg);
}

/* Blur blob decorative element (positioned absolutely inside dark sections) */
.blob-red {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(156, 32, 34, 0.25);
  filter: blur(140px);
}
.blob-red--top-center {
  width: 900px;
  height: 600px;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
}
.blob-red--bottom-left {
  width: 600px;
  height: 400px;
  bottom: -100px;
  left: -100px;
}


/* ==========================================================================
   12. BLOCK STYLE VARIATIONS — supplementary CSS
   ========================================================================== */

/* Button: Outline Pill */
.wp-block-button.is-style-outline-pill .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid currentColor;
  box-shadow: none;
}
.wp-block-button.is-style-outline-pill .wp-block-button__link:hover {
  background: rgba(156, 32, 34, 0.05) !important;
  transform: scale(1.02);
}

/* Button: Ghost (Dark BG) */
.wp-block-button.is-style-ghost-dark .wp-block-button__link {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.wp-block-button.is-style-ghost-dark .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Heading: Eyebrow */
.wp-block-heading.is-style-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

/* Separator: Dots */
.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
}
.wp-block-separator.is-style-dots::before {
  content: '· · ·';
  letter-spacing: 0.5em;
  color: var(--clr-muted-text);
  font-size: 1.25rem;
}


/* ==========================================================================
   12b. INNOVADEL-SECTION — base positioning for all homepage sections
        (needed so absolute-positioned decorative elements work correctly)
   ========================================================================== */

.innovadel-section {
  position: relative;
  overflow: hidden;
}


/* ==========================================================================
   13. WORDPRESS CORE BLOCK ALIGNMENT RESETS
   ========================================================================== */

/* Remove default block margins inside hero and custom sections */
.no-block-margin > * + *,
.innovadel-dark-hero > * + * {
  margin-block-start: 0;
}

/* Ensure full-width blocks break out of the content constraint */
.wp-block-group[data-align="full"] {
  max-width: 100%;
  width: 100%;
}


/* ==========================================================================
   14. RESPONSIVE HELPERS
   ========================================================================== */

@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
  .hide-desktop { display: none !important; }
}


/* ==========================================================================
   15. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--clr-primary);
  color: #fff;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}


/* ==========================================================================
   15b. INNOVADEL-CARD — homepage section cards
   Single class applied to all card groups in the block patterns.
   Combines card-hover-group + card-glow behaviour so patterns only need
   one class and editors don't have to know about the utility split.
   ========================================================================== */

.innovadel-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.innovadel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06);
  border-color: rgba(156, 32, 34, 0.3) !important;
}

/* Radial glow top-right on hover */
.innovadel-card::before {
  content: '';
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: rgba(156, 32, 34, 0);
  filter: blur(3rem);
  pointer-events: none;
  transition: background 0.5s ease;
  z-index: 0;
}

.innovadel-card:hover::before {
  background: rgba(156, 32, 34, 0.18);
}

/* Keep inner content above the glow pseudo-element */
.innovadel-card > * {
  position: relative;
  z-index: 1;
}

/* Red-shadow variant — used by platforms + salesforce sections */
.innovadel-card--red:hover {
  box-shadow: 0 20px 60px -20px rgba(156, 32, 34, 0.25) !important;
  border-color: rgba(156, 32, 34, 0.3) !important;
}

.innovadel-card--red:hover::before {
  background: rgba(156, 32, 34, 0.22) !important;
}

/* Icon transitions scoped to .innovadel-card hover */
.innovadel-card:hover .icon-neutral {
  border-color: rgba(156, 32, 34, 0.3);
  background: #ffffff;
}

.innovadel-card:hover .icon-commerce {
  background: #9C2022;
  color: #ffffff;
}

.innovadel-card:hover .float-symbol {
  color: rgba(156, 32, 34, 0.4);
}

/* Scroll-reveal base state — JS adds .fade-up--visible when in viewport */
.innovadel-card.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.innovadel-card.fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}

/* When card has both fade-up and hover — combine transforms cleanly */
.innovadel-card.fade-up--visible:hover {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .innovadel-card.fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   16. FADE-UP ENTRANCE ANIMATION
   Driven by IntersectionObserver in animations.js.
   ========================================================================== */

.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion fallback: show immediately without motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   17. SVG PATH DRAW BASE
   stroke-dasharray/offset are set via JS (getTotalLength).
   The .draw-path class just ensures the path starts invisible.
   ========================================================================== */

.draw-path {
  fill: none;
  stroke-linecap: round;
}

/* Section SVG decorative containers */
.svg-draw-container {
  pointer-events: none;
}


/* ==========================================================================
   18. PROCESS TIMELINE
   7-step accordion with vertical progress line and connector nodes.
   ========================================================================== */

/* Outer wrapper — provides stacking context for the progress line */
.process-steps {
  position: relative;
  margin-top: 4rem;
}

/* Vertical track (the grey rail behind the fill) */
.process-progress-track {
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e5e7eb;
  display: none;
}

@media (min-width: 768px) {
  .process-progress-track { display: block; }
}

/* Animated fill bar */
.process-progress-fill {
  position: absolute;
  inset-x: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #9C2022, rgba(156,32,34,0.6), transparent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 2.2s ease-in-out;
}

.process-progress-fill--animate {
  transform: scaleY(1);
}

/* Individual step row */
.process-step {
  position: relative;
}

@media (min-width: 768px) {
  .process-step { padding-left: 5rem; }
}

/* Connector node (the icon circle on the left rail) */
.process-node {
  position: absolute;
  left: 0;
  top: 1.5rem;
  display: none;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #9C2022;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
  z-index: 10;
}

@media (min-width: 768px) {
  .process-node { display: grid; }
}

.process-node--active {
  background: linear-gradient(135deg, #9C2022, #5e1313);
  border-color: #9C2022;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(156,32,34,0.3);
}

/* The <details> accordion card */
.process-card {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
  margin-bottom: 1rem;
}

.process-card:hover,
details.process-card[open] {
  border-color: rgba(156,32,34,0.3);
}

details.process-card[open] {
  box-shadow: 0 24px 80px -30px rgba(156,32,34,0.35);
}

.process-card summary {
  list-style: none;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.process-card summary::-webkit-details-marker { display: none; }

.process-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Mobile icon (hidden on desktop — node shows instead) */
.process-card-icon-mobile {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items-center: center;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background: rgba(156,32,34,0.1);
  color: #9C2022;
}
@media (min-width: 768px) {
  .process-card-icon-mobile { display: none; }
}

.process-stage-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9C2022;
}

.process-card-title {
  margin-top: 0.2rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}

.process-card-goal {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Plus/close toggle icon */
.process-toggle {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 1.25rem;
  font-weight: 300;
  transition: transform 0.25s, border-color 0.25s, color 0.25s;
}

details.process-card[open] .process-toggle {
  transform: rotate(45deg);
  border-color: rgba(156,32,34,0.4);
  color: #9C2022;
}

/* Expanded content area */
.process-card-body {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: linear-gradient(135deg, rgba(245,245,247,0.6), #ffffff);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .process-card-body { grid-template-columns: repeat(3, 1fr); }
}

.process-card-body-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9ca3af;
  margin-bottom: 0.75rem;
}

.process-deliverables {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.process-deliverables li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
}

.process-deliverables li::before {
  content: '';
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #9C2022;
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.process-card-body p {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.6;
}


/* ==========================================================================
   19. CARD RADIAL GLOW (hover pseudo-element)
   Mirrors Lovable's `group-hover:bg-[#9C2022]/20` radial blur inside cards.
   ========================================================================== */

.card-glow {
  position: relative;
  overflow: hidden;
}

.card-glow::before {
  content: '';
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: rgba(156, 32, 34, 0);
  filter: blur(3rem);
  pointer-events: none;
  transition: background 0.5s ease;
  z-index: 0;
}

.card-glow:hover::before {
  background: rgba(156, 32, 34, 0.20);
}

.card-glow > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   20. LOGO MARQUEE — GRAYSCALE + HOVER RED
   Mirrors Lovable's `grayscale hover:grayscale-0 hover:text-[#9C2022]`.
   ========================================================================== */

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  min-width: 160px;
  padding: 0 1.5rem;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #a3a3a3;
  filter: grayscale(1);
  transition: color 0.5s ease, filter 0.5s ease, drop-shadow 0.5s ease;
  white-space: nowrap;
  user-select: none;
}

.logo-item:hover {
  color: #9C2022;
  filter: grayscale(0);
  filter: drop-shadow(0 0 18px rgba(156,32,34,0.55));
}


/* ==========================================================================
   21. WHY INNOVADEL DOT PATTERN BACKGROUND
   ========================================================================== */

.dot-pattern-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 28px 28px, 56px 56px;
  background-position: 0 0, 14px 14px;
}

.dot-section-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent, rgba(255,255,255,0.4));
}


/* ==========================================================================
   22. ICON VARIANTS
   ========================================================================== */

/* Red gradient icon bg (Platforms, SalesforceConsulting) */
.icon-red-gradient {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #9C2022, #5e1313);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(156,32,34,0.2);
  flex-shrink: 0;
}

/* Muted red icon bg (ProblemSection, ProcessTimeline mobile) */
.icon-red-muted {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(156, 32, 34, 0.1);
  color: #9C2022;
  flex-shrink: 0;
}

/* Neutral/bordered icon bg (OurApproach) */
.icon-neutral {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #f5f5f7;
  color: #9C2022;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.card-hover-group:hover .icon-neutral {
  border-color: rgba(156, 32, 34, 0.3);
  background: #ffffff;
}

/* Solid red icon bg (WhyInnovadel) */
.icon-red-solid {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: #9C2022;
  color: #ffffff;
  box-shadow: 0 10px 30px -10px rgba(156,32,34,0.5);
  flex-shrink: 0;
}

/* Commerce Services — icon changes on hover */
.icon-commerce {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(156, 32, 34, 0.1);
  color: #9C2022;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.card-hover-group:hover .icon-commerce {
  background: #9C2022;
  color: #ffffff;
}


/* ==========================================================================
   23. SECTION TAG PILLS (SalesforceConsulting card tags)
   ========================================================================== */

.tag-red {
  display: inline-block;
  border-radius: 9999px;
  background: rgba(156, 32, 34, 0.1);
  padding: 0.2rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #9C2022;
}


/* ==========================================================================
   24. CARD HOVER GROUP — shared transition wrapper
   ========================================================================== */

.card-hover-group {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover-group:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06);
  border-color: rgba(156, 32, 34, 0.3) !important;
}

/* Dark section variant */
.card-hover-group--dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.25);
}


/* ==========================================================================
   25. HERO SECTION SPECIFIC
   ========================================================================== */

.innovadel-hero-section,
.innovadel-dark-hero {
  position: relative;
  overflow: hidden;
  background-color: #0a0a0a; /* neutral-950 */
  color: #ffffff;
  isolation: isolate;
}

/* Animated pulse on the main red blob */
@keyframes innovadel-pulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}

/* Alias used by inline markup in home-hero.php blob HTML */
@keyframes pulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}

.blob-pulse {
  animation: innovadel-pulse 4s ease-in-out infinite;
}

/* ── Cursor-reactive radial gradient overlay ──────────────────────────────
   cursor-hero.js sets --cursor-x / --cursor-y on the .innovadel-dark-hero
   element. This ::after layer renders the spotlight without any JS DOM
   mutation beyond setting those two custom properties.
   Mirrors Lovable's: useTransform → radial-gradient(600px circle …)
   ────────────────────────────────────────────────────────────────────── */
.innovadel-dark-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(156, 32, 34, 0.35),
    transparent 60%
  );
  pointer-events: none;
  /* z-index 0 keeps it between the blob layer (z:0 on container) and content (z:1).
     Sits above blob container div but below the constrained content group. */
  z-index: 0;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .innovadel-dark-hero::after { display: none; }
}

/* Hero trust separator dots */
.trust-dot {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  vertical-align: middle;
  margin: 0 0.5rem;
}


/* ==========================================================================
   26. SECTION HEADER UTILITY
   ========================================================================== */

.section-header {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header .section-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #9C2022;
  margin-bottom: 0.75rem;
}

.section-header h2 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #111827;
  margin: 0 0 1rem;
}

.section-header .section-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: #6b7280;
  max-width: 40rem;
  margin: 0 auto;
}

.section-header--dark .section-eyebrow { color: #ff8b8d; }
.section-header--dark h2              { color: #ffffff; }
.section-header--dark .section-subtitle { color: rgba(255,255,255,0.7); }


/* ==========================================================================
   27. FLOAT SYMBOL (decorative card overlay text) & HERO PARTICLES
   ========================================================================== */

/* Card corner symbols (AI, ↔, ◎, ↗) — gentle 6px bob matching Lovable's
   whileInView animate={{ y: [0, -6, 0] }} */
.float-symbol {
  pointer-events: none;
  position: absolute;
  font-size: 1.875rem;
  font-weight: 300;
  color: #e5e7eb;
  transition: color 0.5s ease;
  user-select: none;
  top: 1.25rem;
  right: 1.25rem;
  /* CSS-driven bob — JS overrides duration/delay via animations.js */
  animation: float-symbol-bob 5s ease-in-out infinite;
}

.card-hover-group:hover .float-symbol {
  color: rgba(156, 32, 34, 0.4);
}

@keyframes float-symbol-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Hero particle dots — bigger 30px movement matching Lovable's float-particle */
.hero-particle {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

@keyframes hero-particle-float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.4; }
  50%       { transform: translateY(-30px) translateX(10px); opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   28. ARCHIVE PAGE GRIDS — services / platforms listing pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* 3-column responsive grid (services archive) */
.services-card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .services-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services-card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 2-column responsive grid (platforms archive, detail case-studies) */
.two-col-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .two-col-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 4-column responsive grid (process steps) */
.four-col-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .four-col-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .four-col-grid { grid-template-columns: repeat(4, 1fr); } }

/* ─── Service archive card base — see Section 51 for full styles ─── */
.svc-card {
  display: block;
  border-radius: var(--radius-2xl, 1.25rem);
  border: 1px solid var(--clr-border, #e5e7eb);
  background: #ffffff;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.svc-card:hover {
  border-color: rgba(156, 32, 34, 0.3);
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12);
}

/* Platform card — larger, 3-col avatar icon */
.platform-card {
  display: block;
  border-radius: 1.5rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, box-shadow 0.3s, transform 0.25s;
}
.platform-card:hover {
  border-color: rgba(156, 32, 34, 0.3);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* Page-level constrained container */
.page-content-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLATFORMS ARCHIVE — listing page (/platforms/)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero tweak: tighten padding to match Lovable pt-40 pb-24 */
.plt-archive-hero {
  padding-top: 10rem;
  padding-bottom: 6rem;
}

/* Cards section: py-20 (80px) to match Lovable's <main> py-20 */
.plt-archive-grid-section {
  padding: 5rem 0;
}

/* 2-column responsive grid — matches Lovable `grid gap-6 md:grid-cols-2` */
.plt-archive-grid {
  display: grid;
  gap: 1.5rem; /* gap-6 = 24px */
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .plt-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Platform card — matches Lovable rounded-3xl, p-8, hover effects ── */
.plt-card {
  display: block;
  border-radius: 1.5rem; /* rounded-3xl */
  border: 1px solid var(--clr-border);
  background: #fff;
  padding: 2rem; /* p-8 */
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.plt-card:hover {
  transform: translateY(-4px); /* hover:-translate-y-1 */
  box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.12); /* hover:shadow-2xl */
  border-color: rgba(156, 32, 34, 0.3); /* hover:border-[#9C2022]/30 */
}

/* Red gradient icon box: h-12 w-12 rounded-xl */
.plt-card-icon {
  width: 3rem;   /* h-12 = 48px */
  height: 3rem;  /* w-12 = 48px */
  border-radius: 0.75rem; /* rounded-xl */
  background: linear-gradient(
    to bottom right,
    var(--clr-primary),
    var(--clr-primary-deeper)
  );
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 24px -4px rgba(156, 32, 34, 0.25); /* shadow-lg shadow-[#9C2022]/20 */
  flex-shrink: 0;
}

/* Platform name: mt-5 text-2xl font-semibold tracking-tight */
.plt-card-title {
  margin: 1.25rem 0 0; /* mt-5 */
  font-size: 1.5rem;   /* text-2xl */
  font-weight: 600;
  letter-spacing: -0.02em; /* tracking-tight */
  line-height: 1.25;
  color: var(--clr-foreground);
}

/* Tagline: mt-3 text-neutral-600 */
.plt-card-tagline {
  margin: 0.75rem 0 0; /* mt-3 */
  font-size: 0.9375rem;
  color: var(--clr-muted-text);
  line-height: 1.65;
}

/* "Learn more →": mt-6 inline-flex gap-1 text-sm font-semibold text-primary */
.plt-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
  margin-top: 1.5rem; /* mt-6 */
  font-size: 0.875rem; /* text-sm */
  font-weight: 600;
  color: var(--clr-primary);
  text-decoration: none;
  transition: gap 0.2s ease; /* group-hover:gap-2 */
}
.plt-card:hover .plt-card-link {
  gap: 0.5rem; /* gap-2 on hover */
}
.plt-card-link .icon {
  flex-shrink: 0;
}

/* Platform brand logo — replaces the red icon box when a logo is uploaded.
   _plt_logo is the single source of truth set in WP Admin → Platform CPT.
   Used in both the homepage platforms-preview section and the archive plt-card.
   Height matches the icon box (3rem/48px) so the card title lands at the
   same vertical position regardless of whether a logo or icon is shown. */
.plt-brand-logo {
  display: block;
  height: 3rem;        /* matches .plt-card-icon height */
  width: auto;
  max-width: 10rem;    /* prevents very wide logos from breaking the card */
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   29. INNER PAGE DARK HERO  (PageShell / DetailPage shared)
   ═══════════════════════════════════════════════════════════════════════════ */

.inner-page-hero {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  color: #ffffff;
  padding: 10rem 1.5rem 6rem;
  text-align: center;
}
.inner-page-hero__blob {
  pointer-events: none;
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: 62.5rem;
  height: 37.5rem;
  border-radius: 9999px;
  background: rgba(156, 32, 34, 0.3);
  filter: blur(160px);
}
.inner-page-hero__content {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
}
.inner-page-hero .eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  margin-bottom: 1.25rem;
}
.inner-page-hero .eyebrow-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #9C2022;
}
.inner-page-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 1.5rem;
}
.inner-page-hero .hero-subtitle {
  max-width: 42rem;
  margin: 0 auto 2.25rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.inner-page-hero .hero-sub-text {
  max-width: 42rem;
  margin: 0 auto 2rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}
.inner-page-hero .hero-ctas {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Detail-page icon in hero */
.detail-hero-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #9C2022, #5e1313);
  color: #ffffff;
  display: grid;
  place-items: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 40px -10px rgba(156, 32, 34, 0.7);
}


/* ═══════════════════════════════════════════════════════════════════════════
   30. DETAIL PAGE SECTIONS  (service / platform inner pages)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared section wrapper for detail page blocks */
.detail-section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.detail-section + .detail-section {
  padding-top: 0;
}

/* Block header (centered eyebrow + h2) */
.block-header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 2.5rem;
}
.block-header .block-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9C2022;
}
.block-header h2 {
  margin: 0;
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0a0a0a;
  text-wrap: balance;
}

/* ─── Pain point cards (bordered) ─── */
.pain-card {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 1.5rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.pain-card:hover {
  border-color: rgba(156, 32, 34, 0.3);
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.1);
}
.pain-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
}
.pain-card p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ─── Benefit cards (gradient bg) ─── */
.benefit-card {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  padding: 1.75rem;
}
.benefit-card .benefit-check {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(156, 32, 34, 0.1);
  color: #9C2022;
  display: grid;
  place-items: center;
}
.benefit-card h4 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
}
.benefit-card p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ─── Process step cards ─── */
.step-card {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 1.5rem;
}
.step-card .step-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9C2022;
  margin: 0 0 0.5rem;
}
.step-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
}
.step-card p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ─── Pill tags ─── */
.tech-pill {
  display: inline-block;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f9fafb, #ffffff);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
}
.integration-pill {
  display: inline-block;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  transition: border-color 0.2s, color 0.2s;
}
.integration-pill:hover {
  border-color: rgba(156, 32, 34, 0.4);
  color: #9C2022;
}
.industry-pill {
  display: inline-block;
  border-radius: 9999px;
  border: 1px solid rgba(156, 32, 34, 0.2);
  background: rgba(156, 32, 34, 0.08);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9C2022;
}
.pill-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ─── Metrics dark band ─── */
.metrics-band {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #0a0a0a;
  padding: 3rem;
  color: #ffffff;
  text-align: center;
}
.metrics-band .metrics-blob {
  pointer-events: none;
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: 50rem;
  height: 25rem;
  border-radius: 9999px;
  background: rgba(156, 32, 34, 0.25);
  filter: blur(140px);
}
.metrics-band .metrics-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ff8b8d;
  margin: 0 0 0.75rem;
}
.metrics-band h3 {
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 3rem;
}
.metrics-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
}
.metric-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 2rem;
}
.metric-stat .metric-value {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
}
.metric-stat .metric-label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Case study cards ─── */
.case-card {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 1.75rem;
  transition: box-shadow 0.25s;
}
.case-card:hover {
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12);
}
.case-card h4 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0a0a0a;
}
.case-card p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ─── FAQ accordion (detail pages) ─── */
.faq-item {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}
.faq-item[open] {
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-toggle {
  color: #9C2022;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item[open] summary .faq-toggle {
  transform: rotate(45deg);
}
.faq-item .faq-answer {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.7;
}
.faq-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ─── Bottom CTA dark banner ─── */
.cta-banner {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  padding: 6rem 1.5rem;
  color: #ffffff;
  text-align: center;
}
.cta-banner .cta-blob {
  pointer-events: none;
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: 56rem;
  height: 31rem;
  border-radius: 9999px;
  background: rgba(156, 32, 34, 0.3);
  filter: blur(140px);
}
.cta-banner h2 {
  position: relative;
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 1rem;
}
.cta-banner .cta-sub {
  position: relative;
  max-width: 36rem;
  margin: 0 auto 2rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}
.cta-banner .cta-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ─── Category section header (archive pages) ─── */
.cat-header {
  margin-bottom: 2.5rem;
  max-width: 42rem;
}
.cat-header .cat-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9C2022;
}
.cat-header h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0a0a0a;
}
.cat-header p {
  margin: 0;
  font-size: 1rem;
  color: #4b5563;
}

/* ─── Shared button styles for inner page CTAs ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: #9C2022;
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 40px -10px rgba(156, 32, 34, 0.7);
  transition: transform 0.2s;
}
.btn-primary:hover { transform: scale(1.03); color: #fff; }

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ==========================================================================
   31. CONNECTING SVGS
   Decorative animated curved path lines spanning section backgrounds.
   Visible desktop (≥1024px) only — hidden on mobile.
   ========================================================================== */

.connecting-svg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

@media (min-width: 1024px) {
  .connecting-svg { display: block; }
}

/* ==========================================================================
   32. DARK CTA — BACKGROUND OVERRIDE
   Matches Lovable bg-neutral-950 (#0a0a0a). Overrides Gutenberg inline style.
   ========================================================================== */

.innovadel-dark-cta,
.innovadel-dark-cta.has-background {
  background-color: #0a0a0a !important;
}

/* ==========================================================================
   33. PROCESS DETAILS BODY ANIMATION
   Smooth fade-in when a <details>.process-card opens.
   ========================================================================== */

details.process-card[open] .process-card-body {
  animation: process-body-enter 0.3s ease;
}

@keyframes process-body-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   34. LAYOUT UTILITIES — container, section wrappers, grids
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base container — max-width centred */
.container {
  max-width: var(--wide-width, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Section vertical padding */
.section-pad {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (max-width: 768px) {
  .section-pad { padding-top: 3rem; padding-bottom: 3rem; }
}

/* Section background variants */
.section-dark {
  background-color: var(--clr-dark, #0f1729);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6 {
  color: #ffffff;
}

.section-muted {
  background-color: var(--clr-muted-bg, #f5f5f7);
}

/* Section header row — eyebrow/title block beside a CTA link */
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .section-header-row { flex-direction: column; align-items: flex-start; }
}

/* 3-column responsive grid */
.three-col-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .three-col-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .three-col-grid { grid-template-columns: repeat(3, 1fr); } }

/* Outline button (on light bg) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1.5px solid var(--clr-foreground, #1a1d27);
  background: transparent;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-foreground, #1a1d27);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.btn-outline:hover {
  border-color: var(--clr-primary, #9C2022);
  color: var(--clr-primary, #9C2022);
  background-color: rgba(156, 32, 34, 0.04);
}

/* pill--sm variant */
.pill--sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   37. CTA SECTION (template-parts/sections/cta.php)
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-section {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  padding: 6rem 1.5rem;
  color: #ffffff;
  text-align: center;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
}

.cta-title {
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0.5rem 0 1rem;
}

.cta-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  max-width: 38rem;
  margin: 0 auto 2rem;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.cta-indicators {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.cta-indicator strong {
  color: #ffffff;
  font-size: 1rem;
}

/* eyebrow on dark bg */
.eyebrow--light {
  color: rgba(255, 255, 255, 0.5);
}


/* ═══════════════════════════════════════════════════════════════════════════
   39. SITE FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  background-color: #0a0a0a;
  color: rgba(255, 255, 255, 0.7);
  padding: 5rem 0 0;
}

.footer-inner {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 2fr; gap: 4rem; }
}

/* Brand column */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-logo-link {
  display: inline-block;
  text-decoration: none;
}

.footer-logo {
  height: 32px;
  width: auto;
}

.footer-tagline {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  max-width: 22rem;
  margin: 0;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-link:hover { color: #ffffff; }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-social a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Navigation columns */
.footer-nav {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}

.footer-nav-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 1rem;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav-list a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav-list a:hover { color: #ffffff; }

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.footer-legal-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal-list a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal-list a:hover { color: rgba(255, 255, 255, 0.7); }


/* ═══════════════════════════════════════════════════════════════════════════
   40. SERVICE CARD EXTRAS
   ═══════════════════════════════════════════════════════════════════════════ */

.svc-card-img {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.svc-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.svc-card-category {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-primary, #9C2022);
  margin: 0.75rem 0 0.375rem;
}

.svc-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.svc-card-title a {
  color: inherit;
  text-decoration: none;
}
.svc-card-title a:hover { color: var(--clr-primary, #9C2022); }

.svc-card-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-muted-text, #6b7280);
  margin: 0 0 1.25rem;
}

.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-primary, #9C2022);
  text-decoration: none;
  transition: gap 0.2s;
}
.svc-card-link:hover { gap: 0.5rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   41. PLATFORM CARD EXTRAS
   ═══════════════════════════════════════════════════════════════════════════ */

.platform-card-img {
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.platform-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.platform-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0.5rem 0 0.5rem;
  line-height: 1.3;
}
.platform-card-title a {
  color: inherit;
  text-decoration: none;
}
.platform-card-title a:hover { color: var(--clr-primary, #9C2022); }

.platform-card-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-muted-text, #6b7280);
  margin: 0 0 1.5rem;
}

.platform-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-primary, #9C2022);
  text-decoration: none;
  transition: gap 0.2s;
}
.platform-card-link:hover { gap: 0.5rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   42. CASE STUDY CARD EXTRAS
   ═══════════════════════════════════════════════════════════════════════════ */

.case-study-card {
  display: flex;
  flex-direction: column;
}

.case-study-card-img {
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.case-study-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.case-study-card-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.case-study-client-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-muted-text, #6b7280);
}

.case-study-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.625rem;
  line-height: 1.3;
}
.case-study-card-title a {
  color: inherit;
  text-decoration: none;
}
.case-study-card-title a:hover { color: var(--clr-primary, #9C2022); }

.case-study-card-excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-muted-text, #6b7280);
  margin: 0 0 1.25rem;
  flex: 1;
}

.case-study-card-result {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: rgba(156, 32, 34, 0.05);
  border: 1px solid rgba(156, 32, 34, 0.15);
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
}

.result-metric {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary, #9C2022);
  letter-spacing: -0.02em;
  line-height: 1;
}

.result-label {
  font-size: 0.8125rem;
  color: var(--clr-muted-text, #6b7280);
}

.case-study-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-primary, #9C2022);
  text-decoration: none;
  transition: gap 0.2s;
}
.case-study-card-link:hover { gap: 0.5rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   43. BLOG CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card shell */
.blog-card {
  border-radius: 1.25rem;
  border: 1px solid var(--clr-border, #e8eaf0);
  background: var(--clr-white, #ffffff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.blog-card:hover {
  border-color: rgba(156, 32, 34, 0.25);
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.13);
  transform: translateY(-4px);
}

/* ── Image media area ───────────────────────────────────────────────────── */
.blog-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a 0%, #181818 55%, #9C2022 100%);
  flex-shrink: 0;
}

/* Featured image fills the full media area */
.blog-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
  z-index: 1;
}
.blog-card:hover .blog-card-img { transform: scale(1.05); }

/* Subtle grid texture over the image */
.blog-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.35;
}

/* Invisible post link covering the image — sits below the category badge */
.blog-card-cover-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}

/* Category pill — glass style, overlaid top-left on the image */
.blog-card-cat-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  display: inline-block;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.3rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  line-height: 1.5;
  transition: background 0.2s ease;
}
.blog-card-cat-badge:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

/* ── Card body ──────────────────────────────────────────────────────────── */
.blog-card-body {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  flex: 1;
  gap: 0.625rem;
}

/* Title: 1.125rem to match Lovable text-lg, hover transitions to brand red */
.blog-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-card:hover .blog-card-title a { color: var(--clr-primary, #9C2022); }

/* Excerpt — line-clamped to 3 lines */
.blog-card-excerpt {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row — author + reading time, pinned to bottom of card */
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid var(--clr-border, #e8eaf0);
}

.blog-card-author,
.blog-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--clr-muted-text, #6b7280);
  line-height: 1;
}
.blog-card-author svg,
.blog-card-read svg {
  flex-shrink: 0;
  opacity: 0.65;
}

/* ── Blog filter tab spacing ────────────────────────────────────────────── */
.blog-filter-tabs {
  margin-bottom: 2rem;
}

/* ── Blog archive pagination ────────────────────────────────────────────── */
.navigation.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: center;
}
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--clr-border, #e8eaf0);
  background: var(--clr-white, #ffffff);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-foreground, #1a1d27);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.navigation.pagination .page-numbers:hover {
  border-color: rgba(156, 32, 34, 0.4);
  color: var(--clr-primary, #9C2022);
}
.navigation.pagination .page-numbers.current {
  background: var(--clr-primary, #9C2022);
  border-color: var(--clr-primary, #9C2022);
  color: #ffffff;
}
.navigation.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  pointer-events: none;
  min-width: 1.5rem;
  padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   44. INNER PAGE — page-hero-title / page-hero-subtitle / section-title
   ═══════════════════════════════════════════════════════════════════════════ */

.page-hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #ffffff;
  text-wrap: balance;
  margin: 0.5rem 0 1.5rem;
}

.page-hero-subtitle {
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto;
}

/* Generic section heading inside constrained content */
.section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0 0 1rem;
}

.section-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-muted-text, #6b7280);
}


/* ═══════════════════════════════════════════════════════════════════════════
   45. ABOUT PAGE — timeline, team grid, metric-item
   ═══════════════════════════════════════════════════════════════════════════ */

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-left: 2.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.4375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--clr-border, #e8eaf0);
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.0625rem;
  top: 0.3125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--clr-primary, #9C2022);
  border: 2px solid var(--clr-white, #ffffff);
  box-shadow: 0 0 0 2px var(--clr-primary, #9C2022);
}

.timeline-chip {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary, #9C2022);
  margin-bottom: 0.375rem;
}

.timeline-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.375rem;
}

.timeline-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}

/* Team grid */
.team-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px)  { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.team-card {
  border-radius: 1.25rem;
  border: 1px solid var(--clr-border, #e8eaf0);
  background: var(--clr-white, #ffffff);
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.team-card:hover {
  border-color: rgba(156, 32, 34, 0.25);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.1);
}

.team-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
  border: 2px solid var(--clr-border, #e8eaf0);
}

.team-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.25rem;
}

.team-role {
  font-size: 0.8125rem;
  color: var(--clr-primary, #9C2022);
  margin: 0 0 0.5rem;
}

.team-bio {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--clr-muted-text, #6b7280);
  margin: 0 0 0.75rem;
}

.team-linkedin {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-primary, #9C2022);
  text-decoration: none;
}
.team-linkedin:hover { text-decoration: underline; }

/* About metrics */
.metric-item {
  text-align: center;
}
.metric-number {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #ffffff;
}
.metric-label {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}


/* ═══════════════════════════════════════════════════════════════════════════
   46. CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 2-col layout: constrained to 960px so the form is never excessively wide ── */
.contact-body { }

.contact-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  grid-template-columns: 1fr;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 860px) {
  .contact-layout { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
}

/* ── Form card — static (no hover lift on interactive content) ── */
.contact-form-card {
  /* base visual handled by inline style in template to match innovadel-card pattern */
}

/* ── Fluent Forms — full brand override ── */

/* Field labels */
.contact-ff-wrap .ff-el-input--label label,
.contact-ff-wrap .ff-el-input--label .ff-el-is-required {
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--clr-muted-text, #6b7280) !important;
  margin-bottom: 0.375rem !important;
}

/* All text inputs, selects, textareas */
.contact-ff-wrap .ff-el-form-control,
.contact-ff-wrap .ff-el-input--content input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.contact-ff-wrap .ff-el-input--content select,
.contact-ff-wrap .ff-el-input--content textarea {
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  color: var(--clr-foreground, #1a1d27) !important;
  background: var(--clr-muted-bg, #f5f5f7) !important;
  border: 1.5px solid var(--clr-border, #e8eaf0) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  box-shadow: none !important;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important;
  line-height: 1.5 !important;
}

.contact-ff-wrap .ff-el-form-control:focus,
.contact-ff-wrap .ff-el-input--content input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus,
.contact-ff-wrap .ff-el-input--content select:focus,
.contact-ff-wrap .ff-el-input--content textarea:focus {
  border-color: var(--clr-primary, #9C2022) !important;
  background: var(--clr-white, #ffffff) !important;
  box-shadow: 0 0 0 3px rgba(156, 32, 34, 0.1) !important;
  outline: none !important;
}

/* Submit button — pill shape matching btn-primary */
.contact-ff-wrap .ff-btn-submit,
.contact-ff-wrap .ff_submit_btn_container .ff-btn,
.contact-ff-wrap .fluentform_wrapper button[type="submit"],
.contact-ff-wrap button[type="submit"] {
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  background: var(--clr-primary, #9C2022) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.875rem 1.75rem !important;
  color: #ffffff !important;
  box-shadow: 0 10px 40px -10px rgba(156, 32, 34, 0.65) !important;
  transition: transform 0.2s, background-color 0.2s !important;
  cursor: pointer !important;
}
.contact-ff-wrap .ff-btn-submit:hover,
.contact-ff-wrap .ff_submit_btn_container .ff-btn:hover,
.contact-ff-wrap button[type="submit"]:hover {
  background: var(--clr-primary-hover, #7d1a1c) !important;
  transform: scale(1.03) !important;
}

/* Error text */
.contact-ff-wrap .error,
.contact-ff-wrap .ff-el-form-error .error {
  font-size: 0.8125rem !important;
  color: var(--clr-primary, #9C2022) !important;
  margin-top: 0.25rem !important;
}

/* Success message */
.contact-ff-wrap .ff-message-success,
.contact-ff-wrap .ff-success-message-wrap {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 0.75rem !important;
  color: #166534 !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.9375rem !important;
}

/* Form group spacing */
.contact-ff-wrap .ff-el-group {
  margin-bottom: 1.25rem !important;
}

/* Placeholder shown when Fluent Forms is not installed or ID not set */
.contact-ff-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
  background: var(--clr-muted-bg, #f5f5f7);
  border-radius: 0.75rem;
  border: 2px dashed var(--clr-border, #e8eaf0);
  text-align: center;
  color: var(--clr-muted-text, #6b7280);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.contact-ff-placeholder strong { color: var(--clr-foreground, #1a1d27); }
.contact-ff-placeholder em     { font-style: normal; font-weight: 500; color: var(--clr-primary, #9C2022); }

/* ── Contact info sidebar ── */
.contact-info-wrap__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border, #e8eaf0);
}

.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--clr-border, #e8eaf0);
}
.contact-info-row:last-child { border-bottom: none; padding-bottom: 0; }

/* .icon-neutral is already defined in global section — no duplicate needed */

.contact-info-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.contact-info-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-muted-text, #6b7280);
}

.contact-info-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-foreground, #1a1d27);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s;
}
a.contact-info-value:hover { color: var(--clr-primary, #9C2022); }

/* ── Registration Information ── */
.reg-section { }

.reg-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 560px) { .reg-grid { grid-template-columns: repeat(3, 1fr); } }

/* base bg/border/padding set as inline styles (matches innovadel-card pattern) */
.reg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.reg-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-muted-text, #6b7280);
}

.reg-value {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clr-foreground, #1a1d27);
  line-height: 1.2;
}

/* ── Find Us ── */
.findus-section { }

.findus-map {
  margin-top: 2.5rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--clr-border, #e8eaf0);
  line-height: 0;
}
.findus-map iframe { display: block; width: 100%; }

.findus-locs {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 560px) { .findus-locs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .findus-locs { grid-template-columns: repeat(3, 1fr); } }


/* ═══════════════════════════════════════════════════════════════════════════
   47. FILTER TABS (case study archive)
   ═══════════════════════════════════════════════════════════════════════════ */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  border-radius: 9999px;
  border: 1px solid var(--clr-border, #e8eaf0);
  background: var(--clr-white, #ffffff);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-foreground, #1a1d27);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.filter-tab:hover {
  border-color: rgba(156, 32, 34, 0.4);
  color: var(--clr-primary, #9C2022);
}

.filter-tab--active {
  background: var(--clr-primary, #9C2022);
  border-color: var(--clr-primary, #9C2022);
  color: #ffffff;
}
.filter-tab--active:hover { color: #ffffff; }


/* ═══════════════════════════════════════════════════════════════════════════
   48. ICON UTILITY — size helper
   ═══════════════════════════════════════════════════════════════════════════ */

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.icon--xs {
  width: 0.75rem;
  height: 0.75rem;
}
.icon--sm {
  width: 1rem;
  height: 1rem;
}
.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   49. SECTION-HEADER ALIGNMENT OVERRIDE
   The PHP helper innovadel_section_header() outputs:
     • "section-header"            → left-aligned (default)
     • "section-header section-header--center" → centred
   Section 26 above defaulted to centred. Override here to allow left-align.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Left-align is the default */
.section-header {
  max-width: 48rem;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
/* Centred modifier */
.section-header.section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Keep sub-elements inheriting the correct alignment */
.section-header .section-eyebrow,
.section-header h2,
.section-header .section-title,
.section-header .section-subtitle {
  text-align: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════
   50. NARROW CONTAINER
   Used for FAQ sections, case-study quotes, any centred narrow content.
   ═══════════════════════════════════════════════════════════════════════════ */

.container--narrow {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   52. HERO IMAGE PANEL (two-column hero for CPT singles)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override: two-col hero on single-service / single-platform */
.inner-page-hero .hero-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.inner-page-hero .hero-content {
  flex: 1;
  min-width: 0;
}

.hero-image {
  flex: 0 0 auto;
  width: 100%;
  max-width: 28rem;
  border-radius: 1.25rem;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

@media (max-width: 768px) {
  .hero-image { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   53. BENEFIT LIST (service-overview, service-pain-points)
   ═══════════════════════════════════════════════════════════════════════════ */

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--clr-foreground, #1a1d27);
  line-height: 1.6;
}

.benefit-list .icon--primary,
.icon--primary {
  color: var(--clr-primary, #9C2022);
  flex-shrink: 0;
  margin-top: 0.1rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   54. CARD TAGS (pill tags inside platform-card / salesforce cards)
   ═══════════════════════════════════════════════════════════════════════════ */

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   55. FAQS LIST ALIAS
   PHP templates use .faqs-list (with 's'); section 30 uses .faq-list.
   ═══════════════════════════════════════════════════════════════════════════ */

.faqs-list {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   56. RESULTS HEADING (dark metrics band heading in case-study-results.php)
   ═══════════════════════════════════════════════════════════════════════════ */

.results-heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  margin: 0 0 2.5rem;
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════════════════
   57. TESTIMONIAL — LARGE VARIANT (case-study-quote.php)
   ═══════════════════════════════════════════════════════════════════════════ */

.testimonial-card--large {
  padding: 3rem;
  border-radius: 1.5rem;
  text-align: center;
}
.testimonial-card--large .testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.65;
}
.testimonial-card--large .testimonial-footer {
  justify-content: center;
  margin-top: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   58. TECH STACK (case-study-details.php)
   ═══════════════════════════════════════════════════════════════════════════ */

.tech-stack-wrap h3 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-muted-text, #6b7280);
  margin: 0 0 0.875rem;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   59. PLATFORM CARD — dark section variant
   platform-card used inside .section-dark (problem.php, approach.php)
   needs to adapt its colours for dark background context.
   ═══════════════════════════════════════════════════════════════════════════ */

.section-dark .platform-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.section-dark .platform-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(156, 32, 34, 0.4);
}
.section-dark .platform-card h3 { color: #ffffff; }
.section-dark .platform-card p  { color: rgba(255, 255, 255, 0.6); }


/* ═══════════════════════════════════════════════════════════════════════════
   60. DETAIL-TEXT COLUMN
   Used in service-overview.php two-col grid as a styled text block.
   ═══════════════════════════════════════════════════════════════════════════ */

.detail-text {}

.detail-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-muted-text, #6b7280);
  margin: 1rem 0 0;
}


/* === 65. FOOTER - 4-col nav + newsletter + social === */

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) {
  .footer-nav {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
}
.footer-contact-link:hover {
  color: rgba(255, 255, 255, 0.85);
}
.footer-contact-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.footer-social-link {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.footer-social-link:hover {
  border-color: rgba(156, 32, 34, 0.5);
  color: #9C2022;
  background: rgba(156, 32, 34, 0.06);
}

.footer-newsletter {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  padding: 1.5rem 0;
}

.footer-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-newsletter-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-newsletter-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.footer-newsletter-sub {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.footer-newsletter-form {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.footer-newsletter-input {
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  width: 220px;
  outline: none;
  transition: border-color 0.2s;
}
.footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.footer-newsletter-input:focus {
  border-color: rgba(156, 32, 34, 0.5);
}

.footer-newsletter-btn {
  white-space: nowrap;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .footer-newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-newsletter-form {
    width: 100%;
  }
  .footer-newsletter-input {
    width: 100%;
    flex: 1;
  }
}


/* ============================================================
   PLATFORM CPT PAGE — Single Platform Detail
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.plt-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
}

/* ── Problem Section ──────────────────────────────────────── */
.plt-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.plt-problem-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.plt-problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.10);
  border-color: rgba(156,32,34,0.25);
}

.plt-problem-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: var(--clr-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  margin-bottom: 1.25rem;
}

.plt-problem-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-foreground);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.plt-problem-card p {
  font-size: 0.9375rem;
  color: var(--clr-muted-text);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.plt-pain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.plt-pain-list li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-primary);
  line-height: 1.4;
}
.plt-pain-list li .icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
}

/* ── Solution Section ─────────────────────────────────────── */
.plt-solution-eyebrow {
  margin-bottom: 0.5rem;
}

.plt-solution-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.plt-solution-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--clr-foreground);
  margin: 0 0 1.5rem;
}

.plt-solution-quote {
  border: 0;
  margin: 0;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius-xl);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-foreground);
}

.plt-solution-diagram {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ── What We Deliver ──────────────────────────────────────── */
.plt-deliver-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--clr-foreground);
  margin: 0;
}

.plt-deliver-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.plt-deliver-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.plt-deliver-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.10);
  border-color: rgba(156,32,34,0.2);
}

.plt-deliver-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--clr-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  margin-bottom: 1.125rem;
}

.plt-deliver-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-foreground);
  margin: 0 0 0.625rem;
}

.plt-deliver-card p {
  font-size: 0.875rem;
  color: var(--clr-muted-text);
  line-height: 1.65;
  margin: 0;
}

/* ── Customer Journey ─────────────────────────────────────── */
.plt-journey-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Vertical spine */
.plt-journey-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--clr-border);
  transform: translateX(-50%);
}

.plt-journey-step {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
}

.plt-journey-step--right .plt-journey-card { order: 3; }
.plt-journey-step--right .plt-journey-node { order: 2; }
.plt-journey-step--right .plt-journey-spacer { order: 1; }

.plt-journey-step--left .plt-journey-card { order: 1; }
.plt-journey-step--left .plt-journey-node { order: 2; }
.plt-journey-step--left .plt-journey-spacer { order: 3; }

/* For steps without spacer element use :empty logic in JS — handled with CSS grid */
.plt-journey-step--right {
  grid-template-areas: ". node card";
}
.plt-journey-step--left {
  grid-template-areas: "card node .";
}

.plt-journey-step--right .plt-journey-node { grid-area: node; }
.plt-journey-step--right .plt-journey-card { grid-area: card; }
.plt-journey-step--left .plt-journey-node  { grid-area: node; }
.plt-journey-step--left .plt-journey-card  { grid-area: card; }

.plt-journey-node {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--clr-primary);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}

.plt-journey-node span {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--clr-primary);
  font-variant-numeric: tabular-nums;
}

.plt-journey-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 1.75rem 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.plt-journey-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-foreground);
  margin: 0 0 0.5rem;
}

.plt-journey-card p {
  font-size: 0.9rem;
  color: var(--clr-muted-text);
  line-height: 1.65;
  margin: 0;
}

/* ── Tech Stack Section ───────────────────────────────────── */
.plt-stack-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 2.5rem;
}

.plt-stack-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
}

.plt-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.plt-stack-logo {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.plt-stack-logo img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}
.plt-stack-logo--text .icon {
  color: rgba(255,255,255,0.6);
}

.plt-stack-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-align: center;
  white-space: nowrap;
}

/* ── Architecture Section ─────────────────────────────────── */
/*
 * Layout (matches Figma node 2245-7303):
 *
 *  ┌────────────────────┬──────────────────────────────────────────────────┐
 *  │  LEFT  (gray, 26%) │  RIGHT  (white, 74%)                             │
 *  │  padding: 40px     │  ┌──────────────────┬──────────────────┐         │
 *  │  • title           │  │  Sub-col A       │  Sub-col B       │         │
 *  │  • description     │  │  What We Deliver │  Typical Setup   │         │
 *  │  • benefit box     │  │  Common Engage.  │  Use Cases       │         │
 *  │                    │  │                  │  CTA (full-width)│         │
 *  │                    │  └──────────────────┴──────────────────┘         │
 *  └────────────────────┴──────────────────────────────────────────────────┘
 *
 * Left is intentionally narrow (26%) so right sub-cols have room to breathe.
 * At 1280px content width: left ≈ 333px, each sub-col ≈ 473px.
 */

.plt-arch-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.plt-arch-card {
  display: grid;
  grid-template-columns: 26% 1fr; /* left narrow → right sub-cols naturally wider */
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.25s ease;
}
.plt-arch-card:hover {
  box-shadow: 0 16px 48px -8px rgba(0,0,0,0.09);
}

/* Left column — gray background, 40px padding matching Figma exactly */
.plt-arch-left {
  padding: 2.5rem; /* 40px — Figma measured value */
  background: var(--clr-muted-bg);
  display: flex;
  flex-direction: column;
}

.plt-arch-left h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--clr-foreground);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.plt-arch-desc {
  font-size: 0.9rem;
  color: var(--clr-muted-text);
  line-height: 1.65;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}

/* Benefit to Business pink box */
.plt-arch-benefit {
  background: var(--clr-primary-light);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-top: auto;
}
.plt-arch-benefit-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 0.5rem;
}
.plt-arch-benefit p {
  font-size: 0.875rem;
  font-weight: 600;
  font-style: italic;
  color: var(--clr-foreground);
  margin: 0;
  line-height: 1.6;
}

/* Right column — white background, contains 2 sub-cols (matches Figma) */
.plt-arch-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-left: 1px solid var(--clr-border);
}

/* Sub-columns inside .plt-arch-right — no internal divider (Figma has none) */
.plt-arch-subcol {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
/* No border-right between sub-cols — spacing only, no divider line */

/* Shared list group */
.plt-arch-list-group {
  margin-bottom: 1.75rem;
}
.plt-arch-list-group:last-of-type {
  margin-bottom: 0;
}
.plt-arch-list-group h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted-text);
  margin: 0 0 0.625rem;
}

.plt-arch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.plt-arch-list li {
  font-size: 0.875rem;
  color: var(--clr-foreground);
  line-height: 1.55;
  padding-left: 1rem;
  position: relative;
}
.plt-arch-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--clr-primary);
  font-weight: 700;
}

/* Use Cases chips */
.plt-arch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.plt-arch-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-foreground);
  white-space: nowrap;
}

/* CTA — full-width, 30px top margin seats the button at the right distance from Use Cases */
.plt-arch-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  border-radius: 10px;
}

/* Ensure the last list-group before the CTA has no extra bottom margin */
.plt-arch-subcol .plt-arch-list-group:last-of-type {
  margin-bottom: 0;
}

/* ── Why Innovadel ────────────────────────────────────────── */
.plt-why-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.plt-why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.875rem;
}

.plt-why-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--clr-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
}

.plt-why-item h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--clr-foreground);
  margin: 0;
}

.plt-why-item p {
  font-size: 0.8125rem;
  color: var(--clr-muted-text);
  line-height: 1.6;
  margin: 0;
}

/* ── Engagement Models ────────────────────────────────────── */
.plt-engage-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--clr-foreground);
  margin: 0;
}

.plt-engage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.plt-engage-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plt-engage-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--clr-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.plt-engage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.10);
}

.plt-engage-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 0.875rem;
}

.plt-engage-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--clr-foreground);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.plt-engage-card p {
  font-size: 0.875rem;
  color: var(--clr-muted-text);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.plt-engage-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-primary);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.plt-engage-link:hover {
  gap: 0.5rem;
}

/* ── Platform CTA Band ────────────────────────────────────── */
.plt-cta-heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
  margin: 0 0 1.5rem;
}

.plt-cta-sub {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.70);
  margin: 0;
  text-wrap: balance;
}

/* ============================================================
   PLATFORM PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .plt-why-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .plt-engage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Architecture: collapse to single column stack at tablet */
  .plt-arch-card {
    grid-template-columns: 1fr;
  }
  .plt-arch-right {
    border-left: none;
    border-top: 1px solid var(--clr-border);
  }
  .plt-solution-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .plt-deliver-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .plt-problem-grid {
    grid-template-columns: 1fr;
  }
  .plt-deliver-grid {
    grid-template-columns: 1fr;
  }
  /* Architecture: also stack the two sub-cols on mobile */
  .plt-arch-right {
    grid-template-columns: 1fr;
  }
  /* On mobile, separate the two sub-cols with a subtle rule */
  .plt-arch-subcol:first-child {
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 1.75rem;
  }
  .plt-journey-timeline::before {
    left: 1.75rem;
  }
  .plt-journey-step {
    grid-template-areas: "node card" !important;
    grid-template-columns: auto 1fr !important;
    gap: 1rem;
  }
  .plt-journey-step--left .plt-journey-card,
  .plt-journey-step--right .plt-journey-card {
    grid-area: card;
    order: 2;
  }
  .plt-journey-step--left .plt-journey-node,
  .plt-journey-step--right .plt-journey-node {
    grid-area: node;
    order: 1;
  }
  .plt-why-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .plt-engage-grid {
    grid-template-columns: 1fr;
  }
  .plt-stack-row {
    gap: 1.5rem 2rem;
  }
}

@media (max-width: 640px) {
  .plt-why-row {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   51. SERVICES ARCHIVE  (/services/)
   Matches the Lovable reference design — category sections + compact cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero: tighter top padding to match Lovable PageShell pt-40 pb-24 */
.svc-archive-hero {
  padding-top: 10rem;
  padding-bottom: 6rem;
}

/* Outer wrapper — py-20 (5rem) breathing room above/below all categories */
.svc-archive-sections {
  padding: 5rem 0 4rem;
}

/* Individual category block */
.svc-archive-cat {
  /* no top margin on first block */
}

/* Each subsequent category adds 6rem gap (Lovable space-y-24 = 6rem) */
.svc-archive-cat--spaced {
  margin-top: 6rem;
}

/* "Category 01" label — matches Lovable text-xs uppercase tracking-[0.2em] */
.svc-archive-cat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary, #9C2022);
  margin: 0 0 0.75rem;
}

/* Section header wrapper — max-w-2xl mb-10 */
.svc-archive-cat-header {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

/* Section title — clamp between Lovable text-3xl / text-4xl */
.svc-archive-cat-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--clr-foreground, #1a1d27);
}

/* Section description — text-neutral-600 mt-3 */
.svc-archive-cat-desc {
  font-size: 0.9375rem;
  color: var(--clr-muted-text, #6b7280);
  line-height: 1.65;
  margin: 0;
}

/* ── Updated service card — matches Lovable rounded-2xl p-6 card ── */

/* Override radius to rounded-2xl (20px) matching Lovable */
.svc-card {
  border-radius: var(--radius-2xl, 1.25rem);
  padding: 1.5rem;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Icon box: h-11 w-11 (44px) rounded-xl, red-muted bg + red icon */
.svc-card-icon {
  width: 2.75rem;    /* 44px ≈ h-11 */
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(156, 32, 34, 0.10);
  color: var(--clr-primary, #9C2022);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
  margin-bottom: 0.25rem; /* small gap before title (mt-4 on title handles the rest) */
}

/* Icon box transitions on card hover */
.svc-card:hover .svc-card-icon {
  background: var(--clr-primary, #9C2022);
  color: #ffffff;
}

/* Title — mt-4 text-base font-semibold */
.svc-card-title {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--clr-foreground, #1a1d27);
}

/* Description — mt-2 text-sm text-neutral-600 */
.svc-card-desc {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-muted-text, #6b7280);
}

/* "Learn more →" — mt-5 text-sm font-semibold text-primary */
.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto; /* push to bottom of card when card uses flex */
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-primary, #9C2022);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.svc-card:hover .svc-card-link,
.svc-card-link:hover {
  gap: 0.5rem;
}

/* Static industry tile (no link) — remove hover cursor */
.svc-card--static {
  cursor: default;
}

@media (max-width: 640px) {
  .svc-archive-sections {
    padding: 3rem 0 2rem;
  }
  .svc-archive-cat--spaced {
    margin-top: 4rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   70. SERVICE SINGLE PAGE
   Matches the live Lovable reference design at /services/[slug].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section header ────────────────────────────────────────────────── */

.svc-section-header {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 3rem;
}

.svc-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary, #9C2022);
  margin: 0 0 0.875rem;
}

.svc-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #0a0a0a;
  text-wrap: balance;
  margin: 0 0 1rem;
}

.svc-section-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}


/* ── Hero ─────────────────────────────────────────────────────────────────── */

.svc-hero {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  color: #ffffff;
  padding: 9rem 1.5rem 7rem;
  text-align: center;
}

.svc-hero__blob {
  pointer-events: none;
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 56rem;
  height: 32rem;
  border-radius: 9999px;
  background: rgba(156, 32, 34, 0.28);
  filter: blur(160px);
}

.svc-hero__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
}

.svc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.375rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  margin-bottom: 2rem;
}

.svc-hero__eyebrow .icon {
  color: #ff8b8d;
  flex-shrink: 0;
}

.svc-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 1.5rem;
}

.svc-hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 42rem;
  margin: 0 auto;
}


/* ── The Problem — split layout ──────────────────────────────────────────── */

.svc-problem-split {
  display: grid;
  gap: 3rem;
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .svc-problem-split {
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
  }
}

.svc-problem-left p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--clr-muted-text, #6b7280);
  margin: 0 0 1rem;
}

.svc-prob-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(156, 32, 34, 0.3);
  border-radius: 9999px;
  padding: 0.3125rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary, #9C2022);
  margin-bottom: 1.25rem;
}

.svc-prob-tag .icon {
  flex-shrink: 0;
}

.svc-prob-statement {
  font-weight: 700;
  color: #0a0a0a !important;
}

.svc-prob-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .svc-prob-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.svc-prob-card {
  border: 1px solid var(--clr-border, #e8eaf0);
  border-radius: 1rem;
  padding: 1.25rem;
  background: #ffffff;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.svc-prob-card:hover {
  border-color: rgba(156, 32, 34, 0.25);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

.svc-prob-card h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0.625rem 0 0.375rem;
}

.svc-prob-card p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}


/* ── Shared: red icon badge ──────────────────────────────────────────────── */

.svc-icon-badge {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(156, 32, 34, 0.1);
  color: var(--clr-primary, #9C2022);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: 0.875rem;
}


/* ── Icon cards (Deliverables, Use Cases) ────────────────────────────────── */

.svc-icon-card {
  border: 1px solid var(--clr-border, #e8eaf0);
  border-radius: 1rem;
  background: #ffffff;
  padding: 1.5rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.svc-icon-card:hover {
  border-color: rgba(156, 32, 34, 0.2);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.07);
}

.svc-icon-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.375rem;
}

.svc-icon-card p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}


/* ── Our Solution — numbered step cards ──────────────────────────────────── */

.svc-solution-steps {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 640px) {
  .svc-solution-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.svc-solution-step {
  border: 1px solid var(--clr-border, #e8eaf0);
  border-radius: 1rem;
  background: #ffffff;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
}

.svc-solution-icon-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.25rem;
}

.svc-solution-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #9C2022 0%, #5e1313 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 32px -8px rgba(156, 32, 34, 0.5);
  margin: 0 auto;
}

.svc-solution-icon .icon {
  width: 1.625rem;
  height: 1.625rem;
}

.svc-step-num {
  position: absolute;
  top: -0.5rem;
  right: -0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--clr-primary, #9C2022);
  letter-spacing: 0.05em;
  background: #ffffff;
  border: 1px solid rgba(156, 32, 34, 0.2);
  border-radius: 9999px;
  padding: 0.0625rem 0.375rem;
  line-height: 1.4;
}

.svc-solution-step h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.5rem;
}

.svc-solution-step p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}

/* Dashed connector between step cards (desktop only) */
.svc-step-connector {
  display: none;
}

@media (min-width: 640px) {
  .svc-step-connector {
    display: block;
    position: absolute;
    top: 4rem;
    left: -1rem;
    width: calc(100% - 100% + 2rem);
    height: 1px;
    border-top: 2px dashed var(--clr-border, #e8eaf0);
    pointer-events: none;
    z-index: 0;
  }
}


/* ── Platforms Covered ───────────────────────────────────────────────────── */

.svc-platforms-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px)  { .svc-platforms-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .svc-platforms-grid { grid-template-columns: repeat(4, 1fr); } }

.svc-platform-card {
  border: 1px solid var(--clr-border, #e8eaf0);
  border-radius: 1rem;
  background: #ffffff;
  padding: 1.25rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.svc-platform-card:hover {
  border-color: rgba(156, 32, 34, 0.2);
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.07);
}

/* Logo container — image-first, fallback to initial letter */
.svc-platform-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--clr-border, #e8eaf0);
  background: #ffffff;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  margin-bottom: 0.875rem;
  overflow: hidden;
}

.svc-platform-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fallback when no logo uploaded — shows first letter of platform name */
.svc-platform-logo--fallback {
  background: rgba(156, 32, 34, 0.07);
  border-color: rgba(156, 32, 34, 0.15);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-primary, #9C2022);
  padding: 0;
  letter-spacing: -0.01em;
}

.svc-platform-card h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.375rem;
}

.svc-platform-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}

/* Status dot — always brand red (no inline style needed) */
.svc-platform-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--clr-primary, #9C2022);
}


/* ── Why Innovadel — dark cards ──────────────────────────────────────────── */

.svc-why-card {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.svc-why-card:hover {
  border-color: rgba(156, 32, 34, 0.35);
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.4);
}

.svc-why-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: rgba(156, 32, 34, 0.2);
  color: #ff8b8d;
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
}

.svc-why-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.5rem;
}

.svc-why-card p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}


/* ── Engagement Models — checklist cards ─────────────────────────────────── */

.svc-eng-card {
  border: 1px solid var(--clr-border, #e8eaf0);
  border-radius: 1rem;
  background: #ffffff;
  padding: 1.375rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.svc-eng-card:hover {
  border-color: rgba(156, 32, 34, 0.2);
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.07);
}

.svc-eng-check {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(156, 32, 34, 0.1);
  color: var(--clr-primary, #9C2022);
  display: grid;
  place-items: center;
  margin-top: 0.125rem;
}

.svc-eng-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0 0 0.375rem;
}

.svc-eng-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}


/* ── Service Page CTA (dark, full-width) ─────────────────────────────────── */

.svc-page-cta {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  color: #ffffff;
  padding: 7rem 1.5rem;
  text-align: center;
}

.svc-page-cta__blob {
  pointer-events: none;
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 50rem;
  height: 28rem;
  border-radius: 9999px;
  background: rgba(156, 32, 34, 0.28);
  filter: blur(140px);
}

.svc-page-cta__content {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
}

.svc-page-cta__content h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 1rem;
}

.svc-page-cta__content p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.svc-page-cta__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

/* Ghost button for dark sections */
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}


/* ── Responsive tweaks ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .svc-hero { padding: 7rem 1.25rem 5rem; }
  .svc-page-cta { padding: 5rem 1.25rem; }
  .svc-solution-step { padding: 1.5rem 1.25rem; }
  .svc-why-card { padding: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   50. SINGLE POST — HERO  (dark, two-column: text left / image right)
   Class prefix: ph__ (post-hero)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-viewport dark section; CSS Grid splits text and image side-by-side */
.ph {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  color: #ffffff;
  display: grid;
  grid-template-columns: 1fr;       /* mobile: stack */
  min-height: 100svh;               /* fill viewport height */
}
@media (min-width: 1024px) {
  .ph {
    grid-template-columns: 1fr 1fr; /* desktop: 50/50 split */
    min-height: 92vh;
  }
}

/* Ambient red blob — upper-left quadrant */
.ph__blob {
  pointer-events: none;
  position: absolute;
  top: -15rem;
  left: -8rem;
  width: 55rem;
  height: 40rem;
  border-radius: 50%;
  background: rgba(156, 32, 34, 0.35);
  filter: blur(160px);
  z-index: 0;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.ph__left {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  /* Top pad clears fixed header; side pad creates the ~10vw margin seen in Lovable */
  padding: calc(var(--header-height, 64px) + 5rem) 4rem 5rem 10vw;
}
@media (max-width: 1279px) {
  .ph__left { padding-left: 5vw; }
}
@media (max-width: 1023px) {
  .ph__left {
    align-items: flex-start;
    padding: calc(var(--header-height, 64px) + 3rem) 1.5rem 2.5rem;
  }
}

.ph__text {
  max-width: 34rem;
  width: 100%;
}

/* Back to Blog link */
.ph__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  margin-bottom: 1.75rem;
  transition: color 0.2s ease;
}
.ph__back:hover { color: rgba(255, 255, 255, 0.9); }
.ph__back svg { flex-shrink: 0; }

/* Badges row: category + reading time */
.ph__badges {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Category badge — solid red, white text, uppercase */
.ph__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--clr-primary);
  padding: 0.3rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ph__cat::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  margin-right: 0.1rem;
}
.ph__cat:hover { background: var(--clr-primary-hover); color: #fff; }

/* Reading-time badge — ghost outline on dark */
.ph__readtime {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.3rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.ph__readtime svg { flex-shrink: 0; opacity: 0.75; }

/* H1 headline */
.ph__title {
  font-size: clamp(2.5rem, 4.5vw + 0.5rem, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

/* Subtitle / excerpt */
.ph__excerpt {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 2rem;
}

/* Author + date byline */
.ph__byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
}
.ph__byline-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}
.ph__avatar {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ph__byline-sep { opacity: 0.3; font-weight: 300; }
.ph__byline-date { color: rgba(255, 255, 255, 0.5); }

/* ── Right column: image ─────────────────────────────────────────────────── */
.ph__media {
  position: relative;
  overflow: hidden;
  min-height: 55vw;  /* aspect ratio on mobile */
}
@media (min-width: 1024px) {
  .ph__media {
    min-height: auto;   /* let the grid row control height on desktop */
  }
}

.ph__img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder when no featured image */
.ph__media-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a0505 0%, #0a0a0a 60%);
}
.ph__media-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(156, 32, 34, 0.4) 0%, transparent 70%);
}
.ph__media-grid {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Mobile: image stacks below text */
@media (max-width: 1023px) {
  .ph__media {
    min-height: 55vw;
    max-height: 50vh;
  }
  .ph__media-placeholder { min-height: 55vw; max-height: 50vh; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   51. SINGLE POST — BODY  (sticky ToC sidebar + article)
   Class prefixes: pb__ (post-body), toc__ (table-of-contents)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — white background, vertical padding */
.pb {
  background: #ffffff;
  padding: 4rem 1.5rem 6rem;
}
@media (max-width: 768px) {
  .pb { padding: 2.5rem 1.25rem 4rem; }
}

/* Grid: sidebar left, article right */
.pb__layout {
  max-width: var(--wide-width, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1024px) {
  .pb__layout {
    grid-template-columns: 17rem 1fr;
    gap: 0 5rem;
    align-items: start;
  }
}

/* ── Table of Contents sidebar ─────────────────────────────────────────── */

.pb__sidebar {
  display: none;  /* hidden on mobile */
}
@media (min-width: 1024px) {
  .pb__sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-height, 64px) + 1.5rem);
    max-height: calc(100vh - var(--header-height, 64px) - 3rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
    padding-right: 0.25rem;
  }
  .pb__sidebar::-webkit-scrollbar { width: 3px; }
  .pb__sidebar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }
}

.toc {
  /* No border or background — clean list */
}

.toc__title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 1rem;
  display: block;
}

.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Each ToC item */
.toc__link {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.15s ease;
  width: 100%;
}
.toc__link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.toc__num {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #9ca3af;
  line-height: 1.6;
  min-width: 1.5rem;
  transition: color 0.15s ease;
}

.toc__label {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #6b7280;
  transition: color 0.15s ease;
}

/* ── Active item: solid dark-red card ────────────────────────────────────
   JS adds .toc__item--active to the <li> via IntersectionObserver.       */
.toc__item--active .toc__link {
  background: var(--clr-primary, #9C2022);
}
.toc__item--active .toc__num {
  color: rgba(255, 255, 255, 0.8);
}
.toc__item--active .toc__label {
  color: #ffffff;
  font-weight: 600;
}

/* ── Article ──────────────────────────────────────────────────────────────── */

.pb__article {
  min-width: 0;
}

/* ── entry-content: scoped article typography ────────────────────────────
   All rules prefixed with .pb__article to avoid bleeding into other areas. */

/* Section headings — the Lovable post uses "02 Heading" flex layout inside
   <div class="mb-5 flex items-baseline gap-3"><h2>...</h2></div>.
   We target the h2 itself and the nested number span. */

.pb__article .entry-content h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #111827;
  margin: 0 0 1.25rem;
  scroll-margin-top: calc(var(--header-height, 64px) + 1.5rem);
}

/* Number prefix span inside h2 — <span class="text-sm font-semibold text-[#9C2022]">02 </span> */
.pb__article .entry-content h2 > span > span:first-child,
.pb__article .entry-content h3 > span > span:first-child {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-primary);
  letter-spacing: 0.08em;
  margin-right: 0.625rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.pb__article .entry-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #111827;
  margin: 2rem 0 0.75rem;
  scroll-margin-top: calc(var(--header-height, 64px) + 1.5rem);
}

.pb__article .entry-content h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #111827;
  margin: 1.5rem 0 0.5rem;
}

/* Paragraphs — 15.5px / leading-7 (1.75) matching Lovable's Tailwind spec */
.pb__article .entry-content p {
  font-size: 0.96875rem;
  line-height: 1.75;
  color: #374151;
  margin: 0 0 1.125rem;
}
.pb__article .entry-content p:last-child { margin-bottom: 0; }

.pb__article .entry-content strong,
.pb__article .entry-content b {
  font-weight: 600;
  color: #111827;
}

.pb__article .entry-content em,
.pb__article .entry-content i {
  font-style: italic;
}

.pb__article .entry-content a {
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
.pb__article .entry-content a:hover { color: var(--clr-primary-hover); }

/* Lists */
.pb__article .entry-content ul,
.pb__article .entry-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}
.pb__article .entry-content li {
  font-size: 0.96875rem;
  line-height: 1.75;
  color: #374151;
  margin-bottom: 0.4rem;
}

/* Blockquote */
.pb__article .entry-content blockquote {
  border-left: 4px solid var(--clr-primary);
  background: #f9fafb;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.125rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #374151;
}
.pb__article .entry-content blockquote p {
  margin: 0;
}

/* Images */
.pb__article .entry-content img {
  border-radius: var(--radius-xl);
  width: 100%;
  height: auto;
  margin: 1.75rem 0;
}
.pb__article .entry-content figure { margin: 2rem 0; }
.pb__article .entry-content figcaption {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--clr-muted-text);
  margin-top: 0.625rem;
}

/* Code */
.pb__article .entry-content code {
  font-size: 0.875em;
  background: #f3f4f6;
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  color: #1f2937;
}
.pb__article .entry-content pre {
  background: #0f1729;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
}
.pb__article .entry-content pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
}

/* HR */
.pb__article .entry-content hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 2.5rem 0;
}

/* Gutenberg table */
.pb__article .entry-content .wp-block-table { overflow-x: auto; margin: 2rem 0; }
.pb__article .entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.pb__article .entry-content .wp-block-table th,
.pb__article .entry-content .wp-block-table td { padding: 0.75rem 1rem; border: 1px solid var(--clr-border); text-align: left; color: #374151; }
.pb__article .entry-content .wp-block-table th { background: var(--clr-muted-bg); font-weight: 600; color: #111827; }

/* ── Post tags footer ────────────────────────────────────────────────────── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--clr-border);
}
.post-tags__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-muted-text);
  margin-right: 0.25rem;
}
.post-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border);
  background: var(--clr-muted-bg);
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--clr-muted-text);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.post-tag:hover {
  border-color: rgba(156,32,34,0.35);
  color: var(--clr-primary);
  background: rgba(156,32,34,0.05);
}


/* ═══════════════════════════════════════════════════════════════════════════
   52. SINGLE POST — CTA BAND  (dark, matches Lovable bottom section)
   ═══════════════════════════════════════════════════════════════════════════ */

.post-cta {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  padding: 6rem 1.5rem;
  text-align: center;
  color: #ffffff;
}
.post-cta__blob {
  pointer-events: none;
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: 56rem;
  height: 31rem;
  border-radius: 9999px;
  background: rgba(156,32,34,0.28);
  filter: blur(140px);
}
.post-cta__content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
}
.post-cta__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.75rem;
}
.post-cta h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 1rem;
}
.post-cta__sub {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 32rem;
  margin: 0 auto 2rem;
}
.post-cta__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .post-cta { padding: 4rem 1.25rem; }
  .post-cta__actions { flex-direction: column; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   53. LOVABLE-EXPORTED CONTENT — TAILWIND COMPAT
   Maps Tailwind utility classes used in block-editor posts ported from
   Lovable to equivalent CSS. Scoped to .pb__article .entry-content.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Suppress any third-party in-content TOC that slips through */
.pb__article .entry-content #toc_container,
.pb__article .entry-content .ez-toc-container-direction {
  display: none !important;
}

/* Section wrapper — scroll offset for sticky header */
.pb__article .entry-content section[id] {
  scroll-margin-top: calc(var(--header-height, 64px) + 1.5rem);
}

/* Section spacing: mb-14 = 3.5rem in Tailwind */
.pb__article .entry-content .mb-14 { margin-bottom: 3.5rem; }
.pb__article .entry-content .mb-14:last-child { margin-bottom: 0; }

/* Heading+number flex wrapper: <div class="mb-5 flex items-baseline gap-3"> */
.pb__article .entry-content .mb-5 { margin-bottom: 1.25rem; }
.pb__article .entry-content .flex { display: flex; }
.pb__article .entry-content .items-baseline { align-items: baseline; }
.pb__article .entry-content .gap-3 { gap: 0.75rem; }

/* Body text block: <div class="space-y-4 text-[15.5px] leading-7 text-neutral-700"> */
.pb__article .entry-content .space-y-4 > * + * { margin-top: 1rem; }
.pb__article .entry-content .space-y-4 > p {
  font-size: 0.96875rem;
  line-height: 1.75;
  color: #374151;
  margin: 0;
}
.pb__article .entry-content .space-y-4 > p strong { font-weight: 600; color: #111827; }

/* ── Metric stat cards ───────────────────────────────────────────────────
   <div class="not-prose grid gap-4 sm:grid-cols-2 my-6">
     <div class="rounded-2xl border border-neutral-200 bg-gradient-to-br from-white to-neutral-50 p-5">
       <div class="text-2xl font-bold text-[#9C2022]">10–30%</div>
       <div class="mt-1 text-sm text-neutral-600">Label</div>
     </div>
   </div> */
.pb__article .entry-content div.not-prose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
@media (max-width: 600px) {
  .pb__article .entry-content div.not-prose { grid-template-columns: 1fr; }
}
/* Card */
.pb__article .entry-content div.not-prose > div {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  padding: 1.25rem 1.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pb__article .entry-content div.not-prose > div:hover {
  border-color: rgba(156,32,34,0.25);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08);
}
/* Stat value */
.pb__article .entry-content div.not-prose > div > div:first-child {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--clr-primary);
  line-height: 1.1;
  margin-bottom: 0.375rem;
}
/* Stat label */
.pb__article .entry-content div.not-prose > div > div:last-child {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b7280;
}

/* ── Blockquote / callout ──────────────────────────────────────────────────
   <blockquote class="not-prose my-6 rounded-2xl border-l-4 border-[#9C2022] bg-neutral-50 p-5 …"> */
.pb__article .entry-content blockquote.not-prose {
  display: block;
  border-left: 4px solid var(--clr-primary);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: #f9fafb;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: #374151;
}
.pb__article .entry-content blockquote.not-prose p { margin: 0; font-size: 1rem; line-height: 1.75; }

/* ── Roadmap ordered list ──────────────────────────────────────────────────
   <ol class="space-y-3 list-decimal pl-5 marker:text-[#9C2022] marker:font-semibold"> */
.pb__article .entry-content .space-y-3 {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0;
}
.pb__article .entry-content .space-y-3 > li {
  font-size: 0.96875rem;
  line-height: 1.75;
  color: #374151;
  padding-left: 0.25rem;
  margin-bottom: 0.75rem;
}
.pb__article .entry-content .space-y-3 > li::marker {
  color: var(--clr-primary);
  font-weight: 700;
}
.pb__article .entry-content .space-y-3 > li strong { font-weight: 600; color: #111827; }


/* ═══════════════════════════════════════════════════════════════════════════
   INDUSTRIES ARCHIVE  —  /industries/
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero padding matches svc/plt inner-page-hero pattern */
.ind-archive-hero {
  padding-top: 10rem;
  padding-bottom: 6rem;
}

/* Outer wrapper — breathing room above/below the card grid */
.ind-archive-section {
  padding: 5rem 0 5rem;
}

@media (max-width: 768px) {
  .ind-archive-section { padding: 3rem 0; }
}

/* 3-column responsive grid — mirrors Lovable sm:grid-cols-2 lg:grid-cols-3 */
.ind-archive-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .ind-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ind-archive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Industry card ───────────────────────────────────────────────────────── */

.ind-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl, 1.25rem);
  border: 1px solid var(--clr-border, #e5e7eb);
  background: #ffffff;
  padding: 2rem;
  text-align: left;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ind-card:hover {
  transform: translateY(-6px);
  border-color: rgba(156, 32, 34, 0.3);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12);
}

/* Bottom-right radial glow — matches Lovable absolute -right-10 -bottom-10 blur-2xl */
.ind-card::after {
  content: '';
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(156, 32, 34, 0);
  filter: blur(2rem);
  pointer-events: none;
  transition: background 0.5s ease;
  z-index: 0;
}

.ind-card:hover::after {
  background: rgba(156, 32, 34, 0.2);
}

/* Keep card content above the glow layer */
.ind-card > * {
  position: relative;
  z-index: 1;
}

/* ── Icon box — centered, red gradient, white icon ─── */
.ind-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--clr-primary, #9C2022), var(--clr-primary-deeper, #5e1313));
  color: #ffffff;
  display: grid;
  place-items: center;
  margin: 0 0 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 8px 24px -4px rgba(156, 32, 34, 0.3);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ind-card:hover .ind-card__icon {
  box-shadow: 0 12px 32px -4px rgba(156, 32, 34, 0.45);
  transform: scale(1.05);
}

/* ── Title ─── */
.ind-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--clr-foreground, #1a1d27);
  margin: 0 0 0.75rem;
}

/* ── Description ─── */
.ind-card__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-muted-text, #6b7280);
  margin: 0;
}

/* fade-up combined with hover — same pattern as innovadel-card */
.ind-card.fade-up--visible:hover {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .ind-card { transition: none; }
  .ind-card::after { display: none; }
}