/* Elantis.ai Design Tokens & Global Styles */

:root {
  /* --- Brand Color Palette --- */

  /* Primary (Authority & Foundation) */
  --color-primary-900: #0B1C2E; /* Deepest Navy - Footer, Strong backgrounds */
  --color-primary-800: #162A45; /* Primary UI background */
  --color-primary-600: #2563EB; /* Corporate Blue - Links, Primary Buttons */

  /* Secondary (Structure & Neutral) */
  --color-neutral-900: #111827; /* Headings / Main Text */
  --color-neutral-600: #4B5563; /* Body Text */
  --color-neutral-400: #9CA3AF; /* Muted Text */
  --color-neutral-200: #E5E7EB; /* Borders */
  --color-neutral-100: #F3F4F6; /* Light Backgrounds */
  --color-white:       #FFFFFF; /* Card backgrounds */

  /* Accent (Innovation & Interaction) */
  --color-accent-cyan: #06B6D4; /* AI/Tech Highlights */
  --color-accent-coral:#F97316; /* CTAs, Human warmth */

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;

  /* --- Typography --- */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Spacing System (4px grid) --- */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* --- Radii --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-enterprise: 0 20px 40px -10px rgba(0,0,0,0.08);
}

/* Global Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-neutral-600);
  background-color: var(--color-white); /* Changed to white for main body */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-neutral-900);
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

/* --- Utility Classes (Tailwind-like) --- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.section {
  padding: var(--spacing-16) 0;
}

.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-primary-900 { background-color: var(--color-primary-900); }
.text-white { color: var(--color-white); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-6);
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-8);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height: 100%;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-enterprise);
  border-color: var(--color-accent-cyan);
}

/* --- CINEMATIC HOVER EFFECTS --- */
.card-hover-zoom {
  overflow: hidden;
  position: relative;
}

.card-hover-zoom img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.card-hover-zoom:hover img {
  transform: scale(1.05);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease-out;
  border: none;
  font-size: 16px;
  text-decoration: none;
}

.btn-primary {
  background-color: #C2410C;
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background-color: #9A3412; /* Darker accessible coral */
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary-900);
  border: 1px solid var(--color-primary-900);
}
.btn-secondary:hover {
  background-color: var(--color-neutral-100);
}

.btn-secondary-dark {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.3);
}
.btn-secondary-dark:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: var(--color-white);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-neutral-200);
  color: var(--color-neutral-900);
}
.btn-outline:hover {
  border-color: var(--color-accent-coral);
  color: var(--color-accent-coral);
  background-color: #FFF7ED;
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary-600);
  padding: 0;
}
.btn-ghost:hover {
  text-decoration: underline;
}

/* Typography Utilities */
.text-h1 { font-size: 64px; font-weight: 700; letter-spacing: -0.02em; }
.text-h2 { font-size: 48px; font-weight: 600; letter-spacing: -0.01em; }
.text-h3 { font-size: 32px; font-weight: 500; }
.text-h4 { font-size: 24px; font-weight: 500; }
.text-body-lg { font-size: 18px; line-height: 1.6; }
.text-body { font-size: 16px; line-height: 1.5; }
.text-sm { font-size: 14px; color: var(--color-neutral-600); }
.font-display { font-family: var(--font-display); }

/* --- Navigation & Mega Menu --- */
.nav-link {
  color: var(--color-neutral-600);
  font-weight: 500;
  padding: 24px 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-link:hover, .nav-link.active {
  color: var(--color-primary-900);
}
.nav-chevron {
  transition: transform 0.2s ease;
}
.nav-link:hover .nav-chevron {
  transform: rotate(180deg);
}

/* Animations */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 24px 0;
}
.ticker-content {
  display: flex;
  width: fit-content;
  animation: scroll 40s linear infinite;
}
.ticker-item {
  white-space: nowrap;
  padding: 0 48px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-neutral-400);
  opacity: 0.5;
  filter: grayscale(100%);
}

@media (max-width: 1024px) {
  .text-h1 { font-size: 48px; }
  .text-h2 { font-size: 36px; }
  .grid-12 { grid-template-columns: 1fr; }

  /* Safe overrides for inline grids so they stack beautifully */
  .grid-12 > div {
    grid-column: 1 / -1 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Safe mobile nav hiding */
  .nav-desktop-menu { display: none !important; }
  .nav-mobile-btn { display: flex !important; }
  .nav-mobile-menu-drawer { display: flex !important; }

  /* --- HERO SECTION MOBILE --- */
  .hero-buttons { flex-wrap: wrap !important; }
  .hero-buttons .btn { width: 100% !important; justify-content: center !important; }
  .hero-visual-card {
    display: none !important;
  }
  .hero-floating-badge {
    display: none !important;
  }
  .hero-section {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  /* --- COMMON SECTION PADDING REDUCTION --- */
  .section-padding {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .section-padding-lg {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* --- INNER GRIDS (non .grid-12) --- */
  .grid-2-col { grid-template-columns: 1fr !important; gap: 32px !important; }
  .grid-3-col { grid-template-columns: 1fr !important; gap: 24px !important; }
  .grid-4-col { grid-template-columns: repeat(2,1fr) !important; gap: 24px !important; }

  /* --- TIMELINE MOBILE --- */
  .timeline-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .timeline-center-marker { display: none !important; }
  .timeline-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* --- STICKY SCROLL SECTIONS --- */
  .scroll-sticky-layout {
    flex-direction: column !important;
    position: relative !important;
  }
  .scroll-sticky-left {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .scroll-sticky-right {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    top: auto !important;
  }

  /* --- FIXED HEIGHT CONTAINERS --- */
  .mobile-auto-height { height: auto !important; min-height: auto !important; }

  /* --- CARDS AND FIXED-WIDTH ELEMENTS --- */
  .mobile-fluid { width: 100% !important; max-width: 100% !important; }

  /* --- OPERATIONS / WATERFALL CARDS --- */
  .waterfall-card { width: 100% !important; }

  /* --- ENGAGEMENT GRID --- */
  .engagement-grid { grid-template-columns: 1fr 1fr !important; }

  /* --- CASE STUDIES GRID --- */
  .cases-grid { grid-template-columns: 1fr !important; }
  .cases-featured-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .cases-featured-grid > div { grid-column: 1 / -1 !important; }

  /* --- INSIGHTS CAROUSEL --- */
  .insights-carousel-item { flex: 0 0 100% !important; }

  /* --- FILTER BARS --- */
  .filter-bar { flex-wrap: wrap !important; gap: 12px !important; }
  .filter-bar input,
  .filter-bar select { min-width: 0 !important; width: 100% !important; }

  /* --- CONTACT FORM GRIDS --- */
  .contact-form-grid { grid-template-columns: 1fr !important; }

  /* --- GEO LOCATIONS --- */
  .geo-grid { grid-template-columns: 1fr !important; }

  /* --- FLEXIBLE GAP REDUCTION --- */
  .mobile-gap-sm { gap: 16px !important; }
  .mobile-gap-md { gap: 24px !important; }

  /* --- HIDE DESKTOP-ONLY DECORATIONS --- */
  .desktop-only { display: none !important; }

  /* ============================================================
     INSIGHTS PAGE — MOBILE OVERRIDES (1024px)
     ============================================================ */

  /* Hero section */
  .insights-hero {
    padding-top: 80px !important;
    padding-bottom: 48px !important;
    min-height: auto !important;
  }
  .insights-hero-desc {
    font-size: 17px !important;
  }
  .insights-hero-buttons {
    flex-wrap: wrap !important;
  }
  .insights-hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .insights-hero-icons {
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  .insights-hero-separator {
    display: none !important;
  }

  /* Carousel / Grid section */
  .insights-grid-section {
    padding: 60px 0 !important;
  }
  .insights-carousel-stage {
    gap: 0 !important;
  }
  .insights-card-title {
    font-size: 28px !important;
  }
  .insights-card-content {
    padding: 32px !important;
  }
  .insights-carousel-item {
    flex: 0 0 100% !important;
    height: 450px !important;
  }

  /* Start section (image + cards) */
  .insights-start-section {
    padding: 60px 0 !important;
  }
  .insights-start-grid {
    gap: 32px !important;
  }
  .insights-start-image {
    height: 350px !important;
  }

  /* Role filter section */
  .insights-role-section {
    padding: 60px 0 !important;
  }
  .insights-role-stage {
    gap: 20px !important;
    margin-bottom: 40px !important;
  }
  .insights-role-content {
    padding: 32px !important;
  }

  /* Templates section */
  .insights-templates-section {
    padding: 60px 0 !important;
  }
  .insights-templates-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }

  /* Request section */
  .insights-request-section {
    padding: 60px 0 !important;
  }

  /* CTA section */
  .insights-cta-section {
    padding: 60px 0 !important;
  }
  .insights-cta-buttons {
    flex-wrap: wrap !important;
  }
  .insights-cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ============================================================
     STAFFING PAGE — TABLET OVERRIDES (1024px)
     ============================================================ */

  /* Hero */
  .staffing-hero {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 48px !important;
  }
  .staffing-hero-buttons {
    flex-wrap: wrap !important;
  }
  .staffing-hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Stats – 5-col grid → 2-col */
  .staffing-stats {
    padding: 60px 0 !important;
  }
  .staffing-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  .staffing-stats-grid > div {
    padding-right: 0 !important;
    border-right: none !important;
  }
  .staffing-stats-grid > div > div:first-child {
    font-size: 48px !important;
  }

  /* Domains */
  .staffing-domains {
    padding: 60px 0 0 !important;
  }
  .staffing-domains-grid {
    padding-bottom: 60px !important;
  }
  .staffing-domains-grid > div {
    min-height: 320px !important;
  }

  /* Scenarios */
  .staffing-scenarios {
    padding: 60px 0 !important;
  }
  .staffing-floating-badge {
    left: 16px !important;
    bottom: 24px !important;
  }

  /* Timeline */
  .staffing-timeline {
    padding: 60px 0 !important;
  }
  .staffing-wheel {
    height: auto !important;
    margin-bottom: 32px !important;
  }
  .staffing-timeline-card > div {
    height: 400px !important;
  }
  .staffing-timeline-card h3 {
    font-size: 32px !important;
  }
  .staffing-timeline-card > div > div > div {
    padding: 32px !important;
  }

  /* Models */
  .staffing-models {
    padding: 60px 0 !important;
  }
  .staffing-model-card {
    grid-column: span 6 !important;
  }
  .staffing-model-card > div:first-child {
    font-size: 60px !important;
  }

  /* Case Studies */
  .staffing-cases {
    height: auto !important;
    min-height: 80vh !important;
    padding: 80px 0 !important;
  }
  .staffing-cases-desc {
    font-size: 18px !important;
  }
  .staffing-cases-stats > div > div:first-child {
    font-size: 48px !important;
  }

  /* Security / CTA */
  .staffing-security {
    padding: 80px 0 !important;
  }

  /* ============================================================
     ABOUT PAGE — TABLET OVERRIDES (1024px)
     ============================================================ */

  /* --- AboutHero --- */
  .about-hero-visual {
    display: none !important;
  }
  .about-hero-buttons {
    flex-wrap: wrap !important;
  }
  .about-hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- AboutFacts --- */
  .about-facts {
    padding: 60px 0 !important;
  }
  .about-facts-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .about-facts-left,
  .about-facts-right {
    grid-column: 1 / -1 !important;
  }

  /* --- AboutTimeline --- */
  .about-timeline {
    padding: 60px 0 !important;
  }
  .about-timeline-header {
    margin-bottom: 48px !important;
  }
  .about-timeline-title {
    font-size: 36px !important;
  }
  .about-timeline-items {
    gap: 48px !important;
  }
  .about-timeline-spine {
    display: none !important;
  }
  .about-timeline-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .about-timeline-row .timeline-center-marker {
    display: none !important;
  }
  .about-timeline-row > div {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .about-timeline-row > div > div:first-child {
    font-size: 36px !important;
  }
  .about-timeline-row h3 {
    font-size: 24px !important;
  }
  .about-timeline-row ul {
    align-items: flex-start !important;
  }
  .about-timeline-row > div > div[style*="height: '300px'"],
  .about-timeline-row > div[style*="height"] {
    height: 220px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- AboutDeliverables --- */
  .about-deliverables {
    padding: 60px 0 !important;
  }
  .about-del-sticky {
    position: static !important;
  }
  .about-del-sticky > div {
    position: static !important;
    padding-right: 0 !important;
  }
  .about-del-title {
    font-size: 36px !important;
  }
  .about-del-cards {
    gap: 24px !important;
  }
  .about-del-card {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .about-del-card > div:first-child {
    padding: 28px !important;
  }
  .about-del-card-image {
    width: 100% !important;
    height: 200px !important;
  }

  /* --- AboutOperations --- */
  .about-operations {
    padding: 60px 24px !important;
  }
  .about-ops-header {
    margin-bottom: 48px !important;
  }
  .about-ops-header h2 {
    font-size: 36px !important;
  }
  .about-ops-waterfall {
    margin-bottom: 60px !important;
  }
  .about-ops-principles {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .about-ops-leadership {
    padding: 40px !important;
    border-radius: 20px !important;
  }
  .about-ops-leader-text h2 {
    font-size: 36px !important;
  }
  .about-ops-leader-flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }
  .about-leader-card {
    width: 100% !important;
    max-width: 320px !important;
    transform: none !important;
  }

  /* --- AboutTransition --- */
  .about-transition {
    padding: 60px 0 !important;
  }
  .about-trans-story {
    margin-bottom: 60px !important;
  }
  .about-trans-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-trans-grid h2 {
    font-size: 36px !important;
  }
  .about-trans-image {
    height: 350px !important;
  }
  .about-trans-cta {
    padding: 40px !important;
    border-radius: 20px !important;
  }
  .about-trans-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .about-trans-cta-grid h2 {
    font-size: 32px !important;
  }
  .about-trans-cta-buttons {
    flex-wrap: wrap !important;
  }
  .about-trans-cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (min-width: 1025px) {
  .nav-mobile-btn { display: none !important; }
  .nav-mobile-menu-drawer { display: none !important; }
  .nav-desktop-menu { display: flex; }
}

@media (max-width: 768px) {
  .text-h1 { font-size: 36px !important; letter-spacing: -1px !important; }
  .text-h2 { font-size: 28px !important; }
  .grid-12 { grid-template-columns: 1fr; }

  /* Ensure singular stacking on phones for grids */
  .grid-12 > div {
    grid-column: 1 / -1 !important;
  }

  .nav-link { padding: 16px 0; }

  /* Phone-specific overrides */
  .hero-visual-card {
    display: none !important;
  }
  .hero-floating-badge {
    display: none !important;
  }
  .hero-section {
    padding-top: 60px !important;
    padding-bottom: 32px !important;
  }
  .hero-buttons .btn {
    padding: 0 20px !important;
    height: 48px !important;
    font-size: 14px !important;
  }
  .section-padding {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .grid-4-col { grid-template-columns: 1fr !important; }
  .engagement-grid { grid-template-columns: 1fr !important; }

  /* Reduce container padding on phones */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Insights phone overrides */
  .insights-hero {
    padding-top: 60px !important;
    padding-bottom: 32px !important;
  }
  .insights-hero-desc {
    font-size: 16px !important;
  }
  .insights-card-title {
    font-size: 24px !important;
  }
  .insights-carousel-item {
    height: 380px !important;
  }
  .insights-card-content {
    padding: 24px !important;
  }
  .insights-start-image {
    height: 260px !important;
  }
  .insights-role-content {
    padding: 24px !important;
  }

  /* ============================================================
     STAFFING PAGE — PHONE OVERRIDES (768px)
     ============================================================ */

  /* Hero */
  .staffing-hero {
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 32px !important;
  }
  .staffing-hero-buttons {
    flex-direction: column !important;
  }

  /* Stats – 2-col → 1-col on phones */
  .staffing-stats {
    padding: 40px 0 !important;
  }
  .staffing-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .staffing-stats-grid > div {
    padding-right: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding-bottom: 24px !important;
  }
  .staffing-stats-grid > div:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .staffing-stats-grid > div > div:first-child {
    font-size: 40px !important;
  }

  /* Domains */
  .staffing-domains {
    padding: 40px 0 0 !important;
  }
  .staffing-domains-grid {
    padding-bottom: 40px !important;
  }
  .staffing-domains-grid > div {
    min-height: 280px !important;
  }

  /* Scenarios */
  .staffing-scenarios {
    padding: 40px 0 !important;
  }
  .staffing-floating-badge {
    position: relative !important;
    left: 0 !important;
    bottom: auto !important;
    margin-top: 16px !important;
    display: inline-flex !important;
  }

  /* Timeline */
  .staffing-timeline {
    padding: 40px 0 !important;
  }
  .staffing-wheel {
    height: auto !important;
    overflow-x: auto !important;
    margin-bottom: 24px !important;
  }
  .staffing-timeline-card > div {
    height: 350px !important;
  }
  .staffing-timeline-card h3 {
    font-size: 24px !important;
  }
  .staffing-timeline-card > div > div > div {
    padding: 24px !important;
    width: 90% !important;
  }

  /* Models – 2-col → 1-col on phones */
  .staffing-models {
    padding: 40px 0 !important;
  }
  .staffing-model-card {
    grid-column: 1 / -1 !important;
  }
  .staffing-model-card > div:first-child {
    font-size: 48px !important;
  }

  /* Case Studies */
  .staffing-cases {
    height: auto !important;
    min-height: 70vh !important;
    padding: 60px 0 !important;
  }
  .staffing-cases-content {
    max-width: 100% !important;
  }
  .staffing-cases-desc {
    font-size: 16px !important;
    margin-bottom: 32px !important;
  }
  .staffing-cases-stats > div > div:first-child {
    font-size: 36px !important;
  }

  /* Security / CTA */
  .staffing-security {
    padding: 60px 0 !important;
  }

  /* ============================================================
     ABOUT PAGE — PHONE OVERRIDES (768px)
     ============================================================ */

  /* --- AboutHero --- */
  .about-hero-visual {
    display: none !important;
  }
  .about-hero-buttons {
    flex-direction: column !important;
  }

  /* --- AboutFacts --- */
  .about-facts {
    padding: 40px 0 !important;
  }
  .about-facts-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .about-facts-left,
  .about-facts-right {
    grid-column: 1 / -1 !important;
  }

  /* --- AboutTimeline --- */
  .about-timeline {
    padding: 40px 0 !important;
  }
  .about-timeline-header {
    margin-bottom: 32px !important;
  }
  .about-timeline-title {
    font-size: 28px !important;
  }
  .about-timeline-items {
    gap: 32px !important;
  }
  .about-timeline-row {
    grid-template-columns: 1fr !important;
  }
  .about-timeline-row .timeline-center-marker {
    display: none !important;
  }
  .about-timeline-row > div {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .about-timeline-row > div > div:first-child {
    font-size: 28px !important;
  }
  .about-timeline-row h3 {
    font-size: 20px !important;
  }

  /* --- AboutDeliverables --- */
  .about-deliverables {
    padding: 40px 0 !important;
  }
  .about-del-title {
    font-size: 28px !important;
  }
  .about-del-cards {
    gap: 20px !important;
  }
  .about-del-card {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .about-del-card > div:first-child {
    padding: 20px !important;
  }
  .about-del-card h3 {
    font-size: 20px !important;
    margin-bottom: 20px !important;
  }
  .about-del-card-image {
    width: 100% !important;
    height: 160px !important;
  }

  /* --- AboutOperations --- */
  .about-operations {
    padding: 40px 16px !important;
  }
  .about-ops-header {
    margin-bottom: 32px !important;
  }
  .about-ops-header h2 {
    font-size: 28px !important;
  }
  .about-ops-waterfall {
    margin-bottom: 40px !important;
  }
  .step-content {
    max-width: 100% !important;
  }
  .about-ops-principles {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .about-ops-leadership {
    padding: 24px !important;
    border-radius: 16px !important;
  }
  .about-ops-leader-text h2 {
    font-size: 28px !important;
  }
  .about-ops-leader-text p {
    font-size: 16px !important;
    margin-bottom: 32px !important;
  }
  .about-leader-card {
    width: 100% !important;
    max-width: 280px !important;
    transform: none !important;
  }
  .about-leader-card > div:first-child {
    height: 240px !important;
  }

  /* --- AboutTransition --- */
  .about-transition {
    padding: 40px 0 !important;
  }
  .about-trans-story {
    margin-bottom: 40px !important;
  }
  .about-trans-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .about-trans-grid h2 {
    font-size: 28px !important;
  }
  .about-trans-grid p {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }
  .about-trans-image {
    height: 250px !important;
  }
  .about-trans-cta {
    padding: 24px !important;
    border-radius: 16px !important;
  }
  .about-trans-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .about-trans-cta-grid h2 {
    font-size: 24px !important;
  }
  .about-trans-cta-grid p {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }
  .about-trans-cta-buttons {
    flex-direction: column !important;
  }
  .about-trans-cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* --- Safe Mobile Drawer Styles --- */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 400px;
  height: 100vh;
  background-color: var(--color-primary-900);
  z-index: 2000;
  transition: right 0.3s ease-in-out;
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-menu-drawer.open {
  right: 0;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  backdrop-filter: blur(4px);
}

.mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   SITE-NAV — NOTCH / SAFE AREA SUPPORT
   Paint nav background behind the status bar on notched devices.
   This is a cosmetic overlay only — no layout dimensions change.
   ============================================================ */
.site-nav::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #0B1C2E;
  z-index: 1001;
  pointer-events: none;
}

/* Push mobile drawer CTAs above the home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-menu-drawer > div:last-child {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
   HERO SECTION — svh UPGRADE
   100svh = small viewport height (accounts for collapsed browser
   chrome on iOS Safari). Prevents hero from being cropped on load.
   !important overrides the inline minHeight: '92vh'.
   ============================================================ */
.hero-section {
  min-height: 92svh !important;
}

/* ============================================================
   SUB-PAGE NAV BAR — HORIZONTAL SCROLL ON MOBILE
   IT Staffing and Business Ops pages have a sticky orange sub-nav
   with 5 items + CTA. On phones the total width (~570px) exceeds
   the viewport. Enable overflow-x scroll so all items are reachable.
   overflow: clip on container prevents page-level horizontal scroll.
   ============================================================ */
@media (max-width: 768px) {
  .subnav-scroll-bar .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: clip; /* clips without creating a new scroll context */
  }
  .subnav-scroll-inner {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding: 12px 16px !important;
    gap: 20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .subnav-scroll-inner::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .subnav-scroll-inner > * {
    flex-shrink: 0; /* prevent items shrinking below natural width */
  }
}

@media (max-width: 480px) {
  .subnav-scroll-inner {
    gap: 14px !important;
    padding: 10px 12px !important;
  }
}

/* ============================================================
   BRAND PAGE — RESPONSIVE OVERRIDES
   The header uses a fixed padding of 120px 0 160px which is too
   large on mobile. The cards grid uses inline repeat(3,1fr) which
   needs a class-based override at smaller viewports.
   ============================================================ */
@media (max-width: 1024px) {
  .brand-hero {
    padding-top: 80px !important;
    padding-bottom: 120px !important;
  }
  .brand-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .brand-hero {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
  }
}

/* ============================================================
   480px — EXTRA SMALL PHONE OVERRIDES
   Handles phones from 320px–480px (older iPhones, small Androids)
   where the 768px breakpoint still leaves things too large.
   ============================================================ */
@media (max-width: 480px) {
  /* Typography */
  .text-h1 { font-size: 28px !important; letter-spacing: -0.5px !important; }
  .text-h2 { font-size: 22px !important; }
  .text-h3 { font-size: 18px !important; }

  /* Hero */
  .hero-section {
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }
  .hero-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
    height: 52px !important;
    font-size: 15px !important;
  }

  /* Section padding */
  .section-padding {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .section-padding-lg {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Ticker — prevent massive font on small screens */
  .ticker-item {
    font-size: 18px !important;
    padding: 0 24px !important;
  }

  /* Staffing stats number */
  .staffing-stats-grid > div > div:first-child {
    font-size: 32px !important;
  }
  .staffing-cases-stats > div > div:first-child {
    font-size: 28px !important;
  }

  /* Staffing hero */
  .staffing-hero {
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }
}

/* ============================================================
   iOS INPUT FONT-SIZE FIX
   Safari auto-zooms the viewport when an input with font-size
   below 16px is focused. max(16px, 1rem) prevents this without
   locking user-initiated zoom (unlike maximum-scale=1).
   ============================================================ */
input,
textarea,
select {
  font-size: max(16px, 1rem);
}

/* ============================================================
   GRID ITEM OVERFLOW PREVENTION
   CSS Grid items have default min-width: auto (= content size).
   Without min-width: 0, text/images inside grid items overflow
   when the item's allocated track is smaller than the content.
   ============================================================ */
.grid-12 > * {
  min-width: 0;
}

/* ============================================================
   BATCH 2: /staffing/msp, /staffing/public, /contact,
   /contact/locations, /awards, /about (hero left padding)
   All rules use !important to override inline styles.
   ============================================================ */

/* --- About Hero — remove right-padding of left column on mobile --- */
@media (max-width: 1024px) {
  .about-hero-left {
    padding-right: 0 !important;
  }
}

/* --- Contact Page --- */
@media (max-width: 1024px) {
  .contact-main-section {
    min-height: auto !important;
  }
  .contact-form-card {
    padding: 32px !important;
    border-radius: 16px !important;
    margin-top: 0 !important;
  }
  .contact-tabs {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 768px) {
  .contact-form-card {
    padding: 20px !important;
    border-radius: 12px !important;
  }
}

/* --- Geo Locations Page --- */
@media (max-width: 1024px) {
  .geo-detail-section {
    padding: 60px 0 !important;
  }
}

@media (max-width: 768px) {
  .geo-detail-section {
    padding: 40px 0 !important;
  }
}

/* --- Awards Hero --- */
@media (max-width: 1024px) {
  .awards-hero-section {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 48px !important;
  }
  .awards-hero-left {
    padding-right: 0 !important;
  }
  .awards-hero-right {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .awards-hero-section {
    padding-top: 60px !important;
  }
}

/* --- Awards Sustainability (Achievements list rows) ---
   The title div uses a large font (42px) which overflows on mobile.
   The center stat div is absolutely positioned — it floats over the
   row and is only visible on hover (desktop only). On mobile the
   hover-image popup (opacity:0) is invisible anyway, so we only
   need to reduce font sizes and section padding.
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .awards-sust-section {
    padding: 60px 0 !important;
  }
  .awards-sust-row {
    padding: 32px 0 !important;
  }
  .awards-sust-title {
    font-size: clamp(18px, 4vw, 32px) !important;
  }
}

@media (max-width: 768px) {
  .awards-sust-section {
    padding: 40px 0 !important;
  }
  .awards-sust-title {
    font-size: 20px !important;
  }
  /* Hide the absolutely-positioned center stat on phones —
     it overlaps with the reduced-size title text */
  .awards-sust-center {
    display: none !important;
  }
}

/* --- Awards Impact --- */
@media (max-width: 1024px) {
  .awards-impact-section {
    padding: 60px 0 !important;
  }
  .awards-impact-left {
    padding-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .awards-impact-section {
    padding: 40px 0 !important;
  }
}

/* --- Awards Spotlight --- */
@media (max-width: 1024px) {
  .awards-spotlight-section {
    padding: 60px 0 !important;
  }
  .awards-spotlight-card-tall {
    height: 400px !important;
  }
  .awards-spotlight-card {
    height: 300px !important;
  }
}

@media (max-width: 768px) {
  .awards-spotlight-section {
    padding: 40px 0 !important;
  }
  .awards-spotlight-card-tall {
    height: 280px !important;
  }
  .awards-spotlight-card {
    height: 240px !important;
  }
}

/* ============================================================
   BATCH 3 + 4: Service pages, Team, Trust, Contracting,
   Cases, Engagement, Industry heroes
   ============================================================ */

/* Hide fixed-position sticky bookmark tabs on tablet/mobile */
@media (max-width: 1024px) {
  .bookmark-wrapper {
    display: none !important;
  }
}

/* Service / team hero right-column visuals — reduce height at tablet, hide at phone */
@media (max-width: 1024px) {
  .svc-hero-visual {
    height: 320px !important;
    min-height: 320px !important;
  }
}
@media (max-width: 768px) {
  .svc-hero-visual {
    display: none !important;
  }
}

/* EngagementHero right column (already has className="mobile-auto-height") */
@media (max-width: 1024px) {
  .mobile-auto-height {
    height: auto !important;
    min-height: 260px !important;
  }
}
@media (max-width: 768px) {
  .mobile-auto-height {
    height: auto !important;
    min-height: 260px !important;
  }
}

/* TrustHub right panel — fixed-height container with absolute overlay */
@media (max-width: 1024px) {
  .trust-hub-visual {
    height: auto !important;
    min-height: 300px !important;
    padding-bottom: 20px !important;
  }
}

/* Contracting Enterprise inner 2-col grid of models */
@media (max-width: 768px) {
  .contracting-models-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Heavy section padding (160px / 140px) → reduced on mobile */
@media (max-width: 1024px) {
  .section-padding-xl {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}
@media (max-width: 768px) {
  .section-padding-xl {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ============================================================
   HOMEPAGE — "Trusted by Our Clients" testimonial slider
   The overlay card uses inline left:60px + width:100%, so on
   phones it spills ~60px past the slider's right edge and the
   slider's overflow:hidden clips the headline. Inset the card
   from both sides instead, and scale down the type/padding so
   it fits the fixed-height slider without vertical clipping.
   ============================================================ */
@media (max-width: 768px) {
  .testimonial-card-wrap {
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    max-width: none !important;
  }
  .testimonial-card {
    padding: 28px !important;
  }
  .testimonial-headline {
    font-size: 24px !important;
  }
  .testimonial-quote {
    font-size: 15px !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 480px) {
  .testimonial-card-wrap {
    left: 14px !important;
    right: 14px !important;
  }
  .testimonial-card {
    padding: 22px !important;
  }
  .testimonial-headline {
    font-size: 21px !important;
  }
  .testimonial-quote {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
}

/* ============================================================
   HOMEPAGE — "Representative AI Engagements" header
   Two issues on phones:
   1. The decorative Wave divider at the top of the section is a
      fixed 80px tall, but the mobile .section-padding-xl override
      drops top padding to 48px — so the wave's white fill covers
      the middle of the heading text ("Repre…tive"). Push the
      section's top padding past the 80px wave to clear it.
      section.resources-section out-specifies .section-padding-xl.
   2. The header is a non-wrapping flex row (heading + "View Case
      Studies" button); the inline button squeezes the heading
      column. Stack it so the title gets full width.
   ============================================================ */
@media (max-width: 1024px) {
  section.resources-section {
    padding-top: 104px !important;
  }
}

@media (max-width: 768px) {
  .resources-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVENESS FIXES
   Services, Industries, Insights, Case Studies
   ============================================================ */

/* --- SERVICES: DELIVERY APPROACH (all 5 service pages) --- */
@media (max-width: 1024px) {
  .svc-approach {
    padding-top: 100px !important;
    padding-bottom: 80px !important;
  }
  .svc-approach-header {
    margin-bottom: 60px !important;
  }
  .svc-approach-steps {
    gap: 60px !important;
  }
  .svc-approach-step {
    flex-direction: column !important;
    gap: 32px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: blur(0px) !important;
  }
  .svc-approach-text {
    text-align: left !important;
  }
  .svc-approach-text > div:first-child {
    justify-content: flex-start !important;
  }
  .svc-approach-title {
    font-size: 28px !important;
  }
  .svc-approach-num {
    font-size: 36px !important;
  }
  .svc-approach-image {
    height: 250px !important;
    width: 100% !important;
  }
  .svc-approach-line {
    display: none !important;
  }
  .svc-approach-dot {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .svc-approach {
    padding-top: 80px !important;
  }
  .svc-approach-header {
    margin-bottom: 40px !important;
  }
  .svc-approach-steps {
    gap: 40px !important;
  }
  .svc-approach-step {
    gap: 24px !important;
  }
  .svc-approach-title {
    font-size: 24px !important;
  }
  .svc-approach-num {
    font-size: 28px !important;
  }
  .svc-approach-image {
    height: 200px !important;
  }
}

/* --- SERVICES: SECURITY & COMPLIANCE (DigitalSecurity) --- */
@media (max-width: 1024px) {
  .svc-security-visual {
    height: auto !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 24px 0 !important;
  }
  .svc-security-visual > div:first-child {
    display: none !important;
  }
  .svc-security-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    min-height: 200px !important;
  }
}

/* --- SHARED: ENGAGEMENT MODELS CARDS ---
   The global .grid-12 > div override zeroes horizontal padding on mobile,
   which leaves card text flush against the box border. Restore inner
   padding with a higher-specificity selector. */
@media (max-width: 1024px) {
  .grid-12 > div.engagement-card {
    padding: 32px 24px !important;
  }
}

/* --- INDUSTRIES: STATS GRID (all 12 industry pages) --- */
@media (max-width: 1024px) {
  .ind-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* --- INDUSTRIES: CONSTRAINTS GRID (all 12 industry pages) --- */
@media (max-width: 1024px) {
  .ind-constraints-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ind-constraints-grid > div {
    padding: 24px !important;
  }
}

/* --- INDUSTRIES: USE CASES (all 12 industry pages) --- */
@media (max-width: 1024px) {
  .ind-usecases-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }
  .ind-usecases-header .btn {
    width: 48px !important;
    height: 48px !important;
  }
  .ind-usecases-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ind-usecases-image {
    height: 300px !important;
  }
}

@media (max-width: 768px) {
  .ind-usecases-image {
    height: 250px !important;
  }
}

/* --- INSIGHTS: GUIDE BADGE OVERLAP --- */
@media (max-width: 1024px) {
  .insights-card-content > div:first-child {
    margin-bottom: 24px !important;
  }
}

/* --- INSIGHTS: TEMPLATES MASONRY TEXT CUT --- */
@media (max-width: 1024px) {
  .insights-masonry {
    column-count: 2 !important;
  }
}
@media (max-width: 768px) {
  .insights-masonry {
    column-count: 1 !important;
  }
  .insights-masonry .masonry-card {
    padding: 24px !important;
  }
}

/* --- CASE STUDIES: HOWTO ACCORDION TEXT CUT --- */
@media (max-width: 1024px) {
  .cases-howto {
    flex-direction: column !important;
    height: auto !important;
  }
  .cases-howto-panel {
    flex: none !important;
    min-height: 280px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  .cases-howto-detail {
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: translateY(0) !important;
  }
}
/* Strapi blog detail */
.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.64);
  font-size: 14px;
}
.blog-breadcrumb a { color: #67E8F9; font-weight: 700; }
.blog-breadcrumb span:last-child { color: rgba(255,255,255,.82); }
.blog-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 860px);
  gap: 56px;
  align-items: start;
  padding-bottom: 88px;
}
.blog-toc {
  position: sticky;
  top: 112px;
  padding: 20px;
  border: 1px solid var(--color-neutral-200, #E5E7EB);
  border-radius: var(--radius-md, 8px);
  background: rgba(255,255,255,.78);
}
.blog-toc-title {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-neutral-500, #6B7280);
}
.blog-toc span {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-neutral-700, #374151);
  border-top: 1px solid var(--color-neutral-200, #E5E7EB);
}
.blog-content-block, .blog-table-section, .blog-faq-section { margin-bottom: 48px; }
.blog-content-block > h2, .blog-table-section > h2, .blog-faq-section > h2 {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-neutral-900, #111827);
}
.blog-rich-text code {
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-neutral-100, #F3F4F6);
  color: var(--color-primary-900, #0B1C2E);
  font-size: .9em;
}
.blog-rich-text pre code { padding: 0; background: transparent; color: inherit; }
.blog-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-neutral-200, #E5E7EB);
  border-radius: var(--radius-md, 8px);
  background: var(--color-white, #FFFFFF);
}
.blog-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}
.blog-table th, .blog-table td {
  padding: 18px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-200, #E5E7EB);
}
.blog-table th {
  background: var(--color-neutral-50, #F9FAFB);
  color: var(--color-primary-900, #0B1C2E);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-table td {
  color: var(--color-neutral-700, #374151);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.blog-table tbody tr:last-child td { border-bottom: 0; }
.blog-table-cards { display: none; }
.blog-faq-list {
  border: 1px solid var(--color-neutral-200, #E5E7EB);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-white, #FFFFFF);
}
.blog-faq-item + .blog-faq-item { border-top: 1px solid var(--color-neutral-200, #E5E7EB); }
.blog-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: var(--color-neutral-900, #111827);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.blog-faq-question[aria-expanded="true"] .blog-faq-icon { transform: rotate(45deg); }
.blog-faq-icon { transition: transform .18s ease; color: var(--color-accent-coral, #F97316); font-size: 22px; }
.blog-faq-answer {
  padding: 0 22px 22px;
  color: var(--color-neutral-700, #374151);
}
.blog-faq-answer p { margin: 0; line-height: 1.7; }
.blog-state p { margin: 0 0 18px; }
.blog-state-loading { display: grid; gap: 12px; }
.blog-skeleton-line {
  display: block;
  width: min(520px, 100%);
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.blog-skeleton-line.short { width: min(320px, 70%); }
@media (max-width: 960px) {
  .blog-detail-shell { display: block; padding-bottom: 64px; }
  .blog-toc { display: none; }
}
@media (max-width: 768px) {
  .blog-detail-hero h1 { font-size: 42px; }
  .blog-table-wrapper { display: none; }
  .blog-table-cards { display: grid; gap: 16px; }
  .blog-table-card {
    border: 1px solid var(--color-neutral-200, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    background: var(--color-white, #FFFFFF);
    overflow: hidden;
  }
  .blog-table-card div { padding: 16px; border-top: 1px solid var(--color-neutral-200, #E5E7EB); }
  .blog-table-card div:first-child { border-top: 0; }
  .blog-table-card span {
    display: block;
    margin-bottom: 6px;
    color: var(--color-accent-coral, #F97316);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .blog-table-card p { margin: 0; color: var(--color-neutral-700, #374151); line-height: 1.6; }
}