/**
 * Motionwell Automation - Main Stylesheet
 * Design tokens plus Gemini format
 */

/* === Design Tokens === */
:root {
  /* Colors - Motionwell Brand */
  --primary-color: #8B0000;
  --primary-dark: #600000;
  --accent-color: #333333;
  --text-color: #555555;
  /* #777777 gives 4.48:1 on white and 4.14:1 on #f4f6f9, so it fails AA on
     both. Measured with axe-core: #777777 = 94 violations, #767676 still 28
     (.cs-tag fails on the light grey ground), #6e6e6e = 0 (5.10 on white,
     4.71 on light grey, with headroom on both). */
  --text-light: #6e6e6e;
  --bg-light: #f4f6f9;
  --white: #ffffff;
  --border-color: rgba(0, 0, 0, 0.1);

  /* Spacing Scale (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Typography Scale */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;

  /* Touch Targets */
  --touch-min: 44px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius: var(--radius-md);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);

  /* Transition */
  --transition-base: 200ms ease;
  --transition-fast: 100ms ease;

  /* Layout */
  --max-width: 1200px;
  --header-height: 80px;
}

/* === Reset & Base === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-color);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* Hidden visually, readable by screen readers and search engines. Used to give
   generic anchor text such as "Read More" the context it is missing. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-color);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  color: var(--accent-color);
}

h3 {
  color: #222222;
}

/* === Layout === */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section {
  padding: var(--space-20) 0;
}

.bg-light {
  background-color: var(--bg-light);
}

/* === Header === */
.header {
  background: var(--white);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 48px;
  width: auto;
}

.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-menu a {
  font-weight: 500;
  color: var(--accent-color);
  font-size: var(--text-base);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.nav-menu a:hover {
  color: var(--primary-color);
}

/* CTA Button */
.btn-cta {
  background: var(--primary-color);
  color: var(--white);
  padding: 10px 25px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  border: 2px solid var(--primary-color);
}

.btn-cta:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}

.btn-cta-white {
  background: var(--white);
  color: var(--primary-color);
  border-color: var(--white);
}

.btn-cta-white:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

/* Mobile Navigation */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--accent-color);
  margin: 6px 0;
  transition: var(--transition-base);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: var(--white);
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 101;
  padding: var(--space-6);
  /* When closed the panel has to leave the focusable tree for real. With only
     right:-100%, the 7 links on the panel stay in the tab order and a keyboard
     user tabs to things off screen (WCAG 2.4.7). visibility goes into the
     transition with a 0.3s delay on the closing side, so it flips only after
     the slide-out animation has finished and the animation survives. */
  transition: right 0.3s ease, visibility 0s linear 0.3s;
  visibility: hidden;
}

.mobile-nav.active {
  right: 0;
  visibility: visible;
  transition: right 0.3s ease, visibility 0s linear 0s;
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.close-menu {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  color: var(--text-light);
}

.mobile-nav-menu {
  margin-top: 60px;
}

.mobile-nav-menu a {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--accent-color);
  border-bottom: 1px solid var(--border-color);
}

/* === Hero Section === */
.hero {
  padding-top: var(--header-height);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/qa-lab-3d-full-view-1200.webp');
  background-size: cover;
  background-position: center;
  min-height: calc(600px + var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
}

.hero-content {
  max-width: 800px;
  padding: var(--space-10) var(--space-5);
}

.hero h1 {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-3);
  font-weight: 700;
  color: var(--white);
}

.hero-tagline {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-desc {
  font-size: 20px;
  margin-bottom: var(--space-8);
  line-height: 1.6;
  opacity: 0.95;
}

.hero p {
  font-size: 22px;
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.btn-cta-outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-cta-outline:hover {
  background: var(--white);
  color: var(--primary-color);
}

.hero-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* === Section Header === */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header h2 {
  font-size: var(--text-3xl);
  color: var(--primary-color);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  margin: var(--space-3) auto 0;
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--text-light);
}

/* === What We Do / Why Motionwell Cards === */
.wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.wwd-card {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* The card title is a small uppercase red label. As a link it keeps the label
   look and takes an underline only on hover and focus. */
.wwd-card-title a {
  color: inherit;
  text-decoration: none;
}

.wwd-card-title a:hover,
.wwd-card-title a:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wwd-card-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-color);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--primary-color);
}

.wwd-card p {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.7;
  margin: 0;
}

.wwd-summary {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.wwd-summary a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wwd-summary a:hover,
.wwd-summary a:focus-visible {
  color: var(--primary-dark);
}

.wwd-summary p {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.75;
}

@media (max-width: 768px) {
  .wwd-grid {
    grid-template-columns: 1fr;
  }
}

/* === Milestones Grid === */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.milestone-item {
  background: var(--white);
  padding: var(--space-6);
  border-left: 5px solid var(--primary-color);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.milestone-item:hover {
  box-shadow: var(--shadow);
}

.milestone-item .year {
  font-size: var(--text-2xl);
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: var(--space-2);
}

.milestone-item .milestone-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-color);
}

/* === Solutions Grid === */
.solutions-primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.solutions-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.solution-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

a.solution-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

a.solution-card h3 {
  color: var(--text-dark);
}

a.solution-card:hover h3 {
  color: var(--primary-color);
}

.solution-card-large .card-img {
  height: 220px;
}

.solution-card-small .card-img {
  height: 160px;
}

.solution-card-small .card-body {
  padding: var(--space-4);
}

.solution-card-small .card-body h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.solution-card-small .card-body p {
  font-size: 13px;
  margin-bottom: 0;
}

.card-tags {
  margin-top: var(--space-3);
}

/* === Industry Grid (Legacy) === */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8);
}

.industry-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.industry-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card-img {
  height: 200px;
  background: #ddd;
  position: relative;
  overflow: hidden;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  padding: var(--space-6);
}

.card-body h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  color: var(--accent-color);
}

.card-body p {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: var(--space-4);
}

.tag {
  display: inline-block;
  background: rgba(139, 0, 0, 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  margin-right: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--primary-color);
}

/* === Product Section === */
.product-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-20);
}

.product-item:nth-child(even) {
  flex-direction: row-reverse;
}

.product-item:last-child {
  margin-bottom: 0;
}

.product-img-box {
  flex: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.product-img-box img {
  width: 100%;
  height: auto;
}

.product-info {
  flex: 1;
}

.product-info h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
  color: var(--primary-color);
}

.product-info > p {
  font-size: var(--text-base);
  margin-bottom: var(--space-5);
  line-height: 1.8;
  color: var(--text-color);
}

.feature-list {
  padding-left: 0;
}

.feature-list li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-6);
  position: relative;
  color: var(--text-color);
}

.feature-list li::before {
  content: '\2713';
  color: var(--primary-color);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* === Partners Section === */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  min-height: 80px;
}

.logo-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.logo-box img {
  width: 100%;
  max-width: 160px;
  height: 46px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .logo-box {
    padding: var(--space-3);
    min-height: 60px;
  }

  .logo-box img {
    height: 34px;
  }

  .logo-box img {
    max-height: 40px;
  }
}

@media (max-width: 480px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === Footer === */
.footer {
  background: #1a1a1a;
  color: #bbb;
  padding: var(--space-12) 0 var(--space-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.footer-brand {
  color: var(--white);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: var(--space-5);
}

.footer-desc {
  color: #bbb;
  line-height: 1.7;
}

.footer h3 {
  color: var(--white);
  margin-bottom: var(--space-5);
  font-size: var(--text-lg);
}

.footer-contact li {
  margin-bottom: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* The phone number and email address are links, and they used to look exactly
   like the plain text beside them, so nothing showed they were clickable.
   The hover rule is not decoration: the global a:hover turns them #8B0000,
   which is only 1.74:1 against the #1a1a1a footer. Specificity (0,2,1) here
   beats the global (0,1,1), and that is the actual fix. */
.footer-contact a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--white);
  text-decoration-thickness: 3px;
}

.footer-links a {
  display: block;
  margin-bottom: var(--space-3);
  color: #bbb;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  padding-top: var(--space-5);
  border-top: 1px solid #333;
  font-size: 14px;
  color: #888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-legal {
  display: flex;
  gap: var(--space-4);
}

.footer-legal a {
  color: #888;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--white);
}

/* === Responsive === */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-nav,
  .nav-backdrop {
    display: block;
  }

  .hero {
    min-height: calc(420px + var(--header-height));
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8);
  }

  .hero h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .hero-tagline {
    font-size: var(--text-lg);
    letter-spacing: 1px;
  }

  .hero p,
  .hero-desc {
    font-size: var(--text-base);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .hero-buttons .btn-cta {
    width: 100%;
    max-width: 280px;
  }

  .section {
    padding: var(--space-12) 0;
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .section-header h2 {
    font-size: var(--text-2xl);
  }

  .product-item {
    flex-direction: column !important;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
  }

  .product-info h3 {
    font-size: var(--text-2xl);
  }

  .industry-grid {
    grid-template-columns: 1fr;
  }

  .solutions-primary {
    grid-template-columns: 1fr;
  }

  .solutions-secondary {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-card-large .card-img {
    height: 180px;
  }

  .solution-card-small .card-img {
    height: 140px;
  }

  .milestones-grid {
    grid-template-columns: 1fr;
  }

  .milestone-item .year {
    font-size: var(--text-xl);
  }

  .btn-cta.header-cta {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* === Page Content (Inner Pages) === */

/* Page Hero Section */
.page-hero {
  padding-top: var(--header-height);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  min-height: calc(350px + var(--header-height));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* The hero image runs at full opacity. It used to sit at opacity .3 over a
   brand-red gradient, which washed out about seventy per cent of the machine
   and tinted the whole block red. Now the image shows in full under a neutral
   dark scrim, and the scrim is heavy only on the text side and falls away
   quickly to the right, so the metal reads through. */
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 0;
}

/* Readability scrim for the text: heavy on the left, light on the right, in a
   neutral dark instead of brand red. */
.page-hero:has(.page-hero-bg)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(18, 12, 12, 0.88) 0%, rgba(18, 12, 12, 0.70) 38%,
                    rgba(18, 12, 12, 0.34) 68%, rgba(18, 12, 12, 0.14) 100%),
    linear-gradient(to top, rgba(18, 12, 12, 0.45), transparent 42%);
}

.page-hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 2;
  background: linear-gradient(to top, var(--white), transparent);
}

.page-hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
}

.page-hero .pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-hero h1 {
  font-size: var(--text-4xl);
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  margin-bottom: var(--space-4);
  font-weight: 700;
  line-height: 1.2;
}

/* Primary CTA in a blog post hero. The hero carries a background image, so the
   button needs a shadow to hold its own against it. */
.page-hero-content .btn-cta {
  margin-top: var(--space-5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.page-hero .hero-subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
  max-width: 600px;
}

/* Page Content Section */
.page-content {
  padding: var(--space-16) 0;
  background: var(--white);
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-12);
}

.content-main {
  min-width: 0;
}

/* Sidebar Styles */
.content-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  height: fit-content;
}

.sidebar-box {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.share-btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-light);
  color: var(--text-color);
  border-radius: 4px;
  font-size: 13px;
  margin-right: 6px;
  margin-bottom: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.share-btn:hover {
  background: var(--primary-color);
  color: var(--white);
}

.sidebar-box h2, .sidebar-box h4 {
  font-size: var(--text-lg);
  color: var(--accent-color);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--primary-color);
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list li {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-list li:last-child {
  border-bottom: none;
}

.sidebar-label {
  font-weight: 600;
  color: var(--text-color);
  font-size: 14px;
}

.sidebar-value {
  color: var(--text-light);
  font-size: 14px;
}

.sidebar-contact {
  background: var(--primary-color);
  color: var(--white);
}

.sidebar-contact h2,
.sidebar-contact h3,
.sidebar-contact h4 {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.sidebar-contact p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: var(--space-4);
}

.btn-sidebar {
  display: block;
  background: var(--white);
  color: var(--primary-color);
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.btn-sidebar:hover {
  background: var(--bg-light);
  color: var(--primary-color);
  transform: translateY(-2px);
}

/* Content Typography */
.content-main h2 {
  font-size: var(--text-2xl);
  color: var(--primary-color);
  margin: var(--space-10) 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--bg-light);
  position: relative;
}

.content-main h2:first-child {
  margin-top: 0;
}

.content-main h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--primary-color);
}

.content-main h3 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin: var(--space-8) 0 var(--space-4);
}

.content-main h4 {
  font-size: var(--text-lg);
  color: var(--accent-color);
  margin: var(--space-6) 0 var(--space-3);
}

.content-main p {
  margin-bottom: var(--space-4);
  line-height: 1.8;
  color: var(--text-color);
}

.content-main ul,
.content-main ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.content-main li {
  margin-bottom: var(--space-2);
  line-height: 1.7;
  color: var(--text-color);
}

.content-main ul li {
  list-style: none;
  position: relative;
  padding-left: var(--space-5);
}

.content-main ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
}

.content-main ol li {
  list-style: decimal;
  padding-left: var(--space-2);
}

/* Content Images */
.content-main img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin: var(--space-6) 0;
}

/* Content Tables */
.content-main table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Table headers are a single light treatment. thead used to be a #8B0000 deep
   red ground while .content-main th layered rgba(139,0,0,.06) under #333 text
   on top of it, measuring 1.26 contrast where WCAG AA asks for 4.5, which is
   effectively invisible. */
.content-main thead {
  background: transparent;
}

.content-main th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content-main td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  font-size: 15px;
  color: var(--text-color);
}

.content-main tbody tr:last-child td {
  border-bottom: none;
}

.content-main tbody tr:hover {
  background: var(--bg-light);
}

/* Content Code Blocks */
.content-main pre,
.content-main code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.content-main code {
  background: var(--bg-light);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--primary-color);
}

.content-main pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.content-main pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
}

/* Content Blockquote */
.content-main blockquote {
  border-left: 4px solid var(--primary-color);
  background: var(--bg-light);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.content-main blockquote p {
  margin: 0;
  font-style: italic;
  color: var(--text-color);
}

/* Content Strong/Bold */
.content-main strong {
  color: var(--accent-color);
  font-weight: 600;
}

/* Page CTA Section */
.page-cta {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  padding: var(--space-16) 0;
}

.cta-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  color: var(--white);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.cta-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.page-cta .btn-cta {
  background: var(--white);
  color: var(--primary-color);
  padding: 14px 40px;
  font-size: var(--text-lg);
}

.page-cta .btn-cta:hover {
  background: var(--bg-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Responsive Inner Pages */
@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .content-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
  }

  .sidebar-box {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .page-hero {
    min-height: 280px;
  }

  .page-hero h1 {
    font-size: var(--text-2xl);
  }

  .page-content {
    padding: var(--space-10) 0;
  }

  .content-sidebar {
    grid-template-columns: 1fr;
  }

  .content-main h2 {
    font-size: var(--text-xl);
  }

  .content-main table {
    display: block;
    overflow-x: auto;
  }

  .page-cta {
    padding: var(--space-12) 0;
  }

  .cta-content h2 {
    font-size: var(--text-2xl);
  }
}

/* Legacy Support */
.page-header {
  padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-8);
  background: var(--bg-light);
}

.page-header h1 {
  font-size: var(--text-4xl);
  color: var(--primary-color);
  margin-bottom: var(--space-3);
}

.page-header .lead {
  font-size: var(--text-lg);
  color: var(--text-light);
  max-width: 700px;
}

.content-wrapper {
  padding: var(--space-12) 0;
}

.content h2 {
  font-size: var(--text-2xl);
  color: var(--accent-color);
  margin: var(--space-8) 0 var(--space-4);
}

.content h3 {
  font-size: var(--text-xl);
  margin: var(--space-6) 0 var(--space-3);
}

.content p {
  margin-bottom: var(--space-4);
  line-height: 1.8;
}

.content ul,
.content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.content li {
  margin-bottom: var(--space-2);
  list-style: disc;
}

/* === Utility Classes === */
.text-center {
  text-align: center;
}

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

/* === Enhanced Solution Page Typography === */

/* Lead paragraph - first paragraph after h2 */
.content-main > p:first-of-type,
.content-main h2 + p {
  font-size: var(--text-lg);
  color: var(--text-color);
  line-height: 1.9;
}

/* Feature highlight boxes */
.content-main > p > strong:only-child,
.content-main > p:has(> strong:first-child:last-child) {
  display: block;
  background: linear-gradient(135deg, var(--bg-light) 0%, rgba(200, 16, 46, 0.05) 100%);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--primary-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-5) 0;
}

/* Nested lists styling */
.content-main ul ul,
.content-main ol ul {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  padding-left: var(--space-5);
}

.content-main ul ul li::before {
  width: 4px;
  height: 4px;
  background: var(--text-light);
  top: 12px;
}

/* Definition-style list items with em dash */
.content-main li strong {
  color: var(--primary-color);
}

/* Image captions */
.content-main img + em,
.content-main p:has(img) + p > em:only-child {
  display: block;
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
  margin-top: calc(-1 * var(--space-4));
  margin-bottom: var(--space-6);
}

/* Better spacing for image sections */
.content-main h3 + p:has(img),
.content-main h2 + p:has(img) {
  margin-top: var(--space-4);
}

/* FAQ styling */
.content-main h3:has(+ p) {
  margin-bottom: var(--space-3);
}

/* Horizontal rule styling */
.content-main hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, var(--primary-color), transparent);
  margin: var(--space-10) 0;
}

/* Enhanced blockquote for callouts */
.content-main blockquote {
  position: relative;
  border-left: 4px solid var(--primary-color);
  background: linear-gradient(135deg, var(--bg-light) 0%, rgba(200, 16, 46, 0.03) 100%);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.content-main blockquote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 60px;
  color: var(--primary-color);
  opacity: 0.2;
  font-family: Georgia, serif;
  line-height: 1;
}

.content-main blockquote p {
  font-size: var(--text-lg);
  font-style: normal;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Table enhancements */
.content-main table {
  font-size: 15px;
}

.content-main table caption {
  caption-side: bottom;
  padding: var(--space-3);
  font-size: 13px;
  color: var(--text-light);
  text-align: left;
}

/* First column emphasis in tables */
.content-main td:first-child {
  font-weight: 500;
  color: var(--accent-color);
}

/* Alternating row colors for better readability */
.content-main tbody tr:nth-child(even) {
  background: var(--bg-light);
}

.content-main tbody tr:nth-child(even):hover {
  background: rgba(200, 16, 46, 0.05);
}

.content-main tbody tr:nth-child(odd):hover {
  background: var(--bg-light);
}

/* === Blog Styles === */

/* Blog listing page */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-8);
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.blog-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

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

.blog-card-body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-meta {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--text-light);
}

.blog-card-meta .category {
  color: var(--primary-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-card h3 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.blog-card h3 a {
  color: inherit;
  transition: color var(--transition-fast);
}

.blog-card h3 a:hover {
  color: var(--primary-color);
}

.blog-card p {
  color: var(--text-color);
  line-height: 1.7;
  flex: 1;
  margin-bottom: var(--space-4);
}

.blog-card .read-more {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition-fast);
}

.blog-card .read-more:hover {
  gap: 10px;
}

/* Blog single post */
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-light);
}

.blog-post-meta .author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-post-meta .category {
  background: rgba(200, 16, 46, 0.1);
  color: var(--primary-color);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

/* Featured post on blog listing */
.blog-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
}

.blog-featured .blog-card-img {
  aspect-ratio: auto;
  min-height: 300px;
}

.blog-featured .blog-card-body {
  padding: var(--space-8);
  justify-content: center;
}

.blog-featured h3 {
  font-size: var(--text-2xl);
}

/* Blog sidebar */
.blog-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

.blog-sidebar-box {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.blog-sidebar-box h4 {
  font-size: var(--text-lg);
  color: var(--accent-color);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--primary-color);
}

.blog-categories {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-categories li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}

.blog-categories li:last-child {
  border-bottom: none;
}

.blog-categories a {
  color: var(--text-color);
  display: flex;
  justify-content: space-between;
  transition: color var(--transition-fast);
}

.blog-categories a:hover {
  color: var(--primary-color);
}

.blog-categories .count {
  color: var(--text-light);
  font-size: 13px;
}

/* Recent posts widget */
.recent-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-posts li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}

.recent-posts li:last-child {
  border-bottom: none;
}

.recent-posts a {
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.5;
  display: block;
  transition: color var(--transition-fast);
}

.recent-posts a:hover {
  color: var(--primary-color);
}

.recent-posts .date {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

/* === List Page Styles === */

.list-hero {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  text-align: center;
}

.list-hero h1 {
  color: var(--white);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.list-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto;
}

.list-content {
  padding: var(--space-16) 0;
  background: var(--bg-light);
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-8);
}

.list-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition-normal);
  display: block;
}

.list-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.list-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-light);
}

.list-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

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

.list-card-body {
  padding: var(--space-6);
}

.list-card .pill {
  display: inline-block;
  background: rgba(200, 16, 46, 0.1);
  color: var(--primary-color);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.list-card h3 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.list-card p {
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.list-card .learn-more {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.list-card:hover .learn-more {
  gap: 10px;
}

/* Contact page specific */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.contact-info h3 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-bottom: var(--space-4);
}

.contact-item {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--bg-light);
  border-radius: var(--radius-md);
}

.contact-item-icon {
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--white);
}

.contact-item-content h4 {
  font-size: var(--text-lg);
  color: var(--accent-color);
  margin-bottom: var(--space-2);
}

.contact-item-content p {
  color: var(--text-color);
  margin: 0;
  line-height: 1.6;
}

.contact-item-content a {
  color: var(--primary-color);
  font-weight: 500;
}

/* Contact form */
.contact-form {
  background: var(--white);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.contact-form h3 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-bottom: var(--space-6);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--space-2);
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.btn-submit {
  background: var(--primary-color);
  color: var(--white);
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
}

.btn-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
}

.form-status.success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.form-status.error {
  background: #fbe9e7;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .list-grid {
    grid-template-columns: 1fr;
  }

  .list-hero h1 {
    font-size: var(--text-2xl);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   List Card Placeholder Styles
   ======================================== */

.list-card-placeholder {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.placeholder-pattern {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.placeholder-letter {
  font-size: 72px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  z-index: 2;
  line-height: 1;
}

.placeholder-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.placeholder-decoration::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.placeholder-decoration::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

/* Geometric pattern overlay */
.list-card-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.placeholder-icon {
  width: 64px;
  height: 64px;
  fill: rgba(255, 255, 255, 0.3);
  z-index: 2;
}

/* Hover effect for placeholder cards */
.list-card:hover .list-card-placeholder {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #4a0000 100%);
}

.list-card:hover .placeholder-letter {
  color: rgba(255, 255, 255, 0.25);
}

/* Blog card placeholder */
.blog-card-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.blog-card-placeholder .placeholder-letter {
  font-size: 64px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  z-index: 2;
}

.blog-card-placeholder .placeholder-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.blog-card:hover .blog-card-placeholder {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #4a0000 100%);
}

.blog-card:hover .blog-card-placeholder .placeholder-letter {
  color: rgba(255, 255, 255, 0.25);
}

/* === Industries Page === */

/* Hero */
.ind-hero {
  padding: calc(var(--header-height) + var(--space-20)) 0 var(--space-16);
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.88) 0%, rgba(22, 33, 62, 0.85) 50%, rgba(15, 52, 96, 0.82) 100%),
              url('/images/hero/qa-lab-3d-full-view-1200.webp') center / cover no-repeat;
  color: var(--white);
  text-align: center;
  position: relative;
}

.ind-hero h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  color: var(--white);
}

.ind-hero-lead {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}

.ind-hero-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-12);
}

.btn-cta-outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-cta-outline:hover {
  background: var(--white);
  color: var(--primary-color);
}

.ind-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

.ind-stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
}

.ind-stat-title {
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.ind-stat-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* Sticky Jump Nav */
.ind-jump-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-3) 0;
}

.ind-chiprow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ind-chiprow::-webkit-scrollbar {
  display: none;
}

.ind-chip-label {
  font-size: var(--text-sm);
  color: var(--text-light);
  white-space: nowrap;
  font-weight: 600;
}

.ind-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent-color);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-base);
}

.ind-chip:hover {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

/* Section Title */
.ind-section-title {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.ind-section-sub {
  text-align: center;
  color: var(--text-light);
  margin-bottom: var(--space-12);
  font-size: var(--text-lg);
}

/* Industry Card Grid */
.ind-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}

.ind-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0;
  text-decoration: none;
  color: var(--accent-color);
  transition: var(--transition-base);
  overflow: hidden;
}

.ind-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.ind-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.ind-card-body {
  padding: var(--space-6);
}

.ind-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.ind-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.ind-card-top h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
}

.ind-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(139, 0, 0, 0.08);
  padding: 4px 10px;
  border-radius: 12px;
}

.ind-minihead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: var(--space-2);
}

.ind-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.ind-tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-light);
  color: var(--text-color);
}

.ind-card-desc {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.6;
  margin-top: var(--space-2);
}

/* Industry Details */
.ind-details {
  padding-bottom: var(--space-16);
}

.ind-detail {
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--border-color);
  scroll-margin-top: calc(var(--header-height) + 56px);
}

.ind-detail:last-of-type {
  border-bottom: none;
}

.ind-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.ind-detail-head h4 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--accent-color);
}

.ind-overview {
  font-size: var(--text-base);
  color: var(--text-color);
  line-height: 1.8;
  max-width: 700px;
}

.ind-detail-head .btn-cta {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: var(--space-2);
}

.ind-detail-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.ind-detail-box {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.ind-box-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-color);
  margin-bottom: var(--space-4);
}

.ind-detail-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ind-detail-box li {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.6;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ind-detail-box li:last-child {
  border-bottom: none;
}

.ind-next {
  font-size: var(--text-sm);
  color: var(--text-light);
  padding: var(--space-4);
  background: rgba(139, 0, 0, 0.03);
  border-left: 3px solid var(--primary-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Industries Bottom CTA */
.ind-cta {
  text-align: center;
  padding: var(--space-16) 0 var(--space-10);
}

.ind-cta h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.ind-cta p {
  color: var(--text-light);
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

.ind-cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.ind-cta-buttons .btn-cta-outline {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.ind-cta-buttons .btn-cta-outline:hover {
  background: var(--primary-color);
  color: var(--white);
}

/* Industries Responsive */
@media (max-width: 768px) {
  .ind-hero {
    padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-10);
  }

  .ind-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .ind-hero-lead {
    font-size: var(--text-base);
  }

  .ind-hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .ind-hero-buttons .btn-cta {
    width: 100%;
    max-width: 280px;
  }

  .ind-stats {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .ind-section-title {
    font-size: var(--text-2xl);
  }

  .ind-card-grid {
    grid-template-columns: 1fr;
  }

  .ind-card-top h3 {
    font-size: var(--text-lg);
  }

  .ind-detail-head {
    flex-direction: column;
  }

  .ind-detail-head h4 {
    font-size: var(--text-xl);
  }

  .ind-detail-cols {
    grid-template-columns: 1fr;
  }

  .ind-cta h3 {
    font-size: var(--text-xl);
  }

  .ind-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .ind-cta-buttons .btn-cta {
    width: 100%;
    max-width: 280px;
  }
}

/* === Case Studies Page === */

/* Hero */
/* ================================================
   Case Studies Page
   ================================================ */

/* Hero */
.cs-hero {
  padding: calc(var(--header-height) + var(--space-20)) 0 var(--space-16);
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.90) 0%, rgba(22, 33, 62, 0.87) 50%, rgba(15, 52, 96, 0.84) 100%),
              url('/images/cases/electronic-tester-cleanroom-3d-01-1200.webp') center / cover no-repeat;
  color: var(--white);
  text-align: center;
  position: relative;
}

.cs-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.4), transparent);
}

.cs-hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-4);
}

.cs-hero h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  color: var(--white);
}

.cs-hero-lead {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.75);
  max-width: 580px;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}

/* Filters */
.cs-filters {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-4) 0;
}

.cs-filter-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.cs-select {
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--accent-color);
  background: var(--white);
  cursor: pointer;
  min-width: 180px;
  transition: var(--transition-base);
}

.cs-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.08);
}

.cs-reset {
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-light);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition-base);
}

.cs-reset:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Section */
.cs-section {
  padding: var(--space-16) 0;
  background: var(--bg-light);
}

/* Card - horizontal layout */
.cs-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-rows: auto auto;
  margin-bottom: var(--space-8);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.cs-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
}

.cs-card.hidden {
  display: none;
}

/* Card Visual */
.cs-card-visual {
  position: relative;
  overflow: hidden;
  grid-row: 1 / 2;
  min-height: 300px;
}

.cs-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cs-card:hover .cs-card-visual img {
  transform: scale(1.03);
}

.cs-card-number {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  font-size: 48px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
}

/* Card Content */
.cs-card-content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  grid-row: 1 / 2;
}

.cs-card-meta {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.cs-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--primary-color);
  color: var(--white);
}

.cs-badge-outline {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--border-color);
}

.cs-card-content h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--space-3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cs-card-desc {
  font-size: var(--text-base);
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  flex: 1;
}

.cs-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-5);
}

.cs-tag {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--bg-light);
  color: var(--text-light);
  font-weight: 500;
  border: 1px solid transparent;
  transition: var(--transition-base);
}

/* Toggle Button */
.cs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--accent-color);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
  align-self: flex-start;
}

.cs-toggle:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.cs-toggle[aria-expanded="true"] {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

.cs-toggle-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.cs-toggle[aria-expanded="true"] .cs-toggle-icon {
  transform: rotate(180deg);
}

/* Card Detail - collapsed by default */
.cs-card-detail {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  border-top: 0 solid transparent;
}

.cs-card-detail.open {
  max-height: 600px;
  border-top: 1px solid var(--border-color);
}

.cs-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding: var(--space-8);
  background: linear-gradient(135deg, #fafbfc, #f4f6f9);
}

.cs-detail-box {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.cs-detail-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

.cs-detail-box p {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.75;
  margin: 0;
}

/* No Results */
.cs-no-results {
  text-align: center;
  padding: var(--space-16) 0;
  color: var(--text-light);
  font-size: var(--text-lg);
}

.cs-no-results a {
  color: var(--primary-color);
  font-weight: 600;
}

/* Bottom CTA */
.cs-bottom-cta {
  text-align: center;
  padding: var(--space-20) 0;
  background: var(--white);
  border-top: 1px solid var(--border-color);
}

.cs-bottom-cta h3 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--accent-color);
}

.cs-bottom-cta p {
  color: var(--text-light);
  font-size: var(--text-lg);
  max-width: 560px;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}

.cs-cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.cs-cta-buttons .btn-cta-outline {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.cs-cta-buttons .btn-cta-outline:hover {
  background: var(--primary-color);
  color: var(--white);
}

/* Case Studies Responsive */
@media (max-width: 900px) {
  .cs-card {
    grid-template-columns: 1fr;
  }

  .cs-card-visual {
    min-height: 220px;
    max-height: 280px;
  }

  .cs-detail-grid {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
}

@media (max-width: 768px) {
  .cs-hero {
    padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-8);
  }

  .cs-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .cs-hero-lead {
    font-size: var(--text-base);
  }

  .cs-filters {
    position: static;
  }

  .cs-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-select {
    min-width: unset;
    width: 100%;
  }

  .cs-section {
    padding: var(--space-10) 0;
  }

  .cs-card-content {
    padding: var(--space-6);
  }

  .cs-card-content h2 {
    font-size: var(--text-xl);
  }

  .cs-bottom-cta h3 {
    font-size: var(--text-2xl);
  }

  .cs-bottom-cta {
    padding: var(--space-12) 0;
  }

  .cs-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cs-cta-buttons .btn-cta {
    width: 100%;
    max-width: 280px;
  }
}

/* ================================================
   Industry Single Page
   ================================================ */

/* Hero - smaller variant of .ind-hero */
.ind-page-hero {
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-12);
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.88) 0%, rgba(22, 33, 62, 0.85) 50%, rgba(15, 52, 96, 0.82) 100%),
              url('/images/hero/qa-lab-3d-full-view-1200.webp') center / cover no-repeat;
  color: var(--white);
  text-align: center;
  position: relative;
}

.ind-page-hero h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  color: var(--white);
}

.ind-page-lead {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}

.ind-page-hero .btn-cta {
  margin-top: var(--space-2);
}

/* Breadcrumb */
.ind-breadcrumb {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-6);
}

.ind-breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ind-breadcrumb a:hover {
  color: var(--white);
}

.ind-breadcrumb span {
  color: rgba(255, 255, 255, 0.9);
}

/* Hero Image */
.ind-page-hero-img-section {
  padding: var(--space-10) 0 0;
}

.ind-page-hero-img-section .container {
  max-width: 900px;
}

.ind-page-hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Content area */
.ind-page-content {
  padding: var(--space-12) 0 var(--space-16);
}

.ind-page-content .container {
  max-width: 780px;
}

.ind-page-content h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-color);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.ind-page-content h2:first-child {
  margin-top: 0;
}

.ind-page-content p {
  font-size: var(--text-base);
  color: var(--text-color);
  line-height: 1.85;
  margin-bottom: var(--space-6);
}

/* Three-column detail boxes */
.ind-page-content .ind-detail-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-10) calc(-1 * var(--space-8));
  padding: 0 var(--space-8);
  max-width: none;
}

.ind-page-content .ind-detail-box {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
}

.ind-page-content .ind-box-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-color);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--primary-color);
}

.ind-page-content .ind-detail-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ind-page-content .ind-detail-box li {
  font-size: 0.82rem;
  color: var(--text-color);
  line-height: 1.65;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ind-page-content .ind-detail-box li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Standalone headings and lists in page content (not inside detail boxes) */
.ind-page-content h2 {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.ind-page-content h2:first-child {
  border-top: none;
  padding-top: 0;
}

.ind-page-content h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent-color);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.ind-page-content .container > ul,
.ind-page-content .container > ol {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-8);
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}

.ind-page-content .container > ol {
  list-style: decimal;
  padding-left: var(--space-10);
}

.ind-page-content .container > ul > li,
.ind-page-content .container > ol > li {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.7;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ind-page-content .container > ul > li:last-child,
.ind-page-content .container > ol > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ind-page-content .container > ul > li:first-child,
.ind-page-content .container > ol > li:first-child {
  padding-top: 0;
}

/* Blog and case study content styles */
.content-main h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent-color);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.content-main h2:first-child {
  border-top: none;
  padding-top: 0;
}

.content-main h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--accent-color);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.content-main p {
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

.content-main ul,
.content-main ol {
  padding: 0;
  margin-bottom: var(--space-6);
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  list-style: none;
}

.content-main ol {
  list-style: decimal;
  padding-left: var(--space-10);
}

.content-main li {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.7;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.content-main li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.content-main li:first-child {
  padding-top: 0;
}

.content-main figure {
  margin: var(--space-8) 0;
}

.content-main figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.content-main figcaption {
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: center;
  margin-top: var(--space-3);
  line-height: 1.5;
}

.content-main table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  background: var(--bg-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.content-main th {
  background: rgba(139, 0, 0, 0.06);
  font-weight: 700;
  color: #1f1f1f;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.content-main td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-color);
  line-height: 1.6;
}

.content-main tr:last-child td {
  border-bottom: none;
}

.ind-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  background: var(--bg-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ind-page-content th {
  background: rgba(139, 0, 0, 0.06);
  font-weight: 600;
  color: var(--accent-color);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.ind-page-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-color);
  line-height: 1.6;
}

.ind-page-content tr:last-child td {
  border-bottom: none;
}

/* Share buttons row */
.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* CTA callout at bottom of content */
.ind-page-content .ind-next {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.7;
  padding: var(--space-5) var(--space-6);
  background: rgba(139, 0, 0, 0.04);
  border-left: 3px solid var(--primary-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-10);
}

/* Content figures */
.ind-page-content figure {
  margin: var(--space-10) 0;
}

.ind-page-content figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.ind-page-content figcaption {
  font-size: var(--text-xs);
  color: var(--text-light);
  text-align: center;
  margin-top: var(--space-3);
  line-height: 1.5;
}

/* Featured Project */
.ind-featured-project {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  margin: var(--space-12) 0 var(--space-8);
  border-left: 4px solid var(--primary-color);
}

.ind-featured-project h2, .ind-featured-project h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--space-3);
}

.ind-featured-project p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: var(--space-4);
}

.ind-featured-project ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
}

.ind-featured-project li {
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
  color: var(--text-color);
  line-height: 1.5;
}

.ind-featured-project li strong {
  color: var(--accent-color);
}

/* Related Industries */
.ind-page-related {
  padding: var(--space-16) 0;
  background: var(--bg-light);
}

.ind-page-related h2 {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-10);
  color: var(--accent-color);
}

.ind-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  max-width: 960px;
  margin: 0 auto;
}

.ind-related-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  text-decoration: none;
  color: var(--accent-color);
  transition: var(--transition-base);
  text-align: center;
}

.ind-related-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.ind-related-card h2, .ind-related-card h3, .ind-related-card h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

/* 404 Page */
.page-404 {
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  text-align: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.page-404 h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--accent-color);
  margin-bottom: var(--space-4);
}

.page-404-desc {
  font-size: var(--text-lg);
  color: var(--text-light);
  margin-bottom: var(--space-8);
}

.page-404-links {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-10);
}

.page-404-links .btn-cta-outline {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.page-404-links .btn-cta-outline:hover {
  background: var(--primary-color);
  color: var(--white);
}

.page-404-nav p {
  font-size: var(--text-sm);
  color: var(--text-light);
  margin-bottom: var(--space-3);
}

.page-404-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}

.page-404-nav a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.page-404-nav a:hover {
  text-decoration: underline;
}

/* Bottom CTA */
.ind-page-cta {
  text-align: center;
  padding: var(--space-16) 0;
  background: var(--white);
  border-top: 1px solid var(--border-color);
}

.ind-page-cta h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--accent-color);
}

.ind-page-cta p {
  color: var(--text-light);
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

.ind-page-cta .ind-cta-buttons .btn-cta-outline {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.ind-page-cta .ind-cta-buttons .btn-cta-outline:hover {
  background: var(--primary-color);
  color: var(--white);
}

/* Industry Single Page Responsive */
@media (max-width: 768px) {
  .ind-page-hero {
    padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-8);
  }

  .ind-page-hero h1 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }

  .ind-page-lead {
    font-size: var(--text-base);
  }

  .ind-page-hero-img-section {
    padding: var(--space-6) 0 0;
  }

  .ind-page-content {
    padding: var(--space-8) 0 var(--space-10);
  }

  .ind-page-content .ind-detail-cols {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .ind-featured-project ul {
    grid-template-columns: 1fr;
  }

  .ind-page-related {
    padding: var(--space-10) 0;
  }

  .ind-page-related h2 {
    font-size: var(--text-2xl);
  }

  .ind-related-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ind-page-cta {
    padding: var(--space-10) 0;
  }

  .ind-page-cta .ind-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .ind-page-cta .ind-cta-buttons .btn-cta {
    width: 100%;
    max-width: 280px;
  }
}

/* ===== Contact Page ===== */
.contact-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-12);
  text-align: center;
}

.contact-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-4);
  color: var(--white);
}

.contact-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  max-width: 540px;
  margin: 0 auto;
}

.contact-content {
  padding: var(--space-16) 0 var(--space-20);
  background: var(--bg-light);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.contact-form-card {
  background: var(--white);
  border-radius: 12px;
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
}

.contact-form-card h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-6);
  color: var(--accent-color);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-color);
}

.form-group .required {
  color: var(--primary-color);
}

.form-group .optional {
  font-weight: 400;
  color: var(--text-light);
  font-size: 13px;
}

.form-group input,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fafafa;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.08);
  background: #fff;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-submit {
  align-self: flex-start;
  padding: 14px 48px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  margin-top: var(--space-2);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.info-card {
  background: var(--white);
  border-radius: 12px;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--primary-color);
}

.info-card-icon {
  color: var(--primary-color);
  margin-bottom: var(--space-3);
}

.info-card h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-3);
  color: var(--primary-color);
}

.info-card address {
  font-style: normal;
  line-height: 1.8;
  color: var(--text-color);
  font-size: 14px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.info-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-list .info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  font-weight: 600;
}

.info-list li a {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition-fast);
}

.info-list li a:hover {
  color: var(--primary-color);
}

.info-card p {
  color: var(--text-color);
  font-size: 14px;
}

@media (max-width: 768px) {
  .contact-hero {
    padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-8);
  }

  .contact-content {
    padding: var(--space-10) 0 var(--space-12);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .contact-form-card {
    padding: var(--space-6);
  }

  .contact-form-card h2 {
    font-size: var(--text-xl);
  }

  .btn-submit {
    width: 100%;
    text-align: center;
  }
}

/* === Capabilities Responsive (tablet) === */
@media (max-width: 768px) {
  .capabilities-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .cap-detail-cols {
    grid-template-columns: 1fr;
  }

  .cap-related-grid {
    grid-template-columns: 1fr;
  }

  .cap-list-grid {
    grid-template-columns: 1fr;
  }

  .cap-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cap-page-hero h1 {
    font-size: var(--text-2xl);
  }
}

/* === Homepage Capabilities Grid === */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.capability-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
  display: block;
}

.capability-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.capability-icon {
  color: var(--primary-color);
  margin-bottom: var(--space-4);
}

.capability-card h3 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-bottom: var(--space-3);
}

.capability-card p {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}

/* === Capabilities Pages === */
.cap-page-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: var(--white);
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}

.cap-breadcrumb {
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  opacity: 0.7;
}

.cap-breadcrumb a {
  color: var(--white);
  text-decoration: none;
}

.cap-breadcrumb a:hover {
  text-decoration: underline;
}

.cap-page-hero h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.cap-page-lead {
  font-size: var(--text-lg);
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
}

.cap-page-content {
  padding: var(--space-12) 0;
}

.cap-page-content .container {
  max-width: 780px;
}

.cap-page-content h2 {
  font-size: var(--text-2xl);
  color: var(--primary-color);
  margin: var(--space-10) 0 var(--space-4);
}

.cap-page-content h3 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin: var(--space-8) 0 var(--space-3);
}

.cap-page-content p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-color);
  margin-bottom: var(--space-4);
}

.cap-page-content ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.cap-page-content li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: var(--space-2);
}

.cap-page-content strong {
  color: var(--accent-color);
}

.cap-detail-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin: var(--space-8) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cap-detail-box {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.cap-box-title {
  font-weight: 700;
  color: var(--primary-color);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-3);
}

.cap-detail-box ul {
  padding-left: var(--space-5);
  margin: 0;
}

.cap-detail-box li {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.cap-cta {
  background: var(--bg-light);
  padding: var(--space-12) 0;
  text-align: center;
}

.cap-cta h2 {
  font-size: var(--text-2xl);
  color: var(--accent-color);
  margin-bottom: var(--space-3);
}

.cap-cta p {
  color: var(--text-color);
  margin-bottom: var(--space-6);
}

.cap-cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.cap-related {
  padding: var(--space-12) 0;
}

.cap-related h2 {
  text-align: center;
  font-size: var(--text-2xl);
  color: var(--primary-color);
  margin-bottom: var(--space-8);
}

.cap-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.cap-related-card {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}

.cap-related-card:hover {
  box-shadow: var(--shadow-md);
}

.cap-related-card h4 {
  font-size: var(--text-base);
  color: var(--accent-color);
  margin-bottom: var(--space-2);
}

.cap-related-card p {
  font-size: var(--text-sm);
  color: var(--text-light);
  margin: 0;
}

/* Capabilities list page */
.cap-list-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: var(--white);
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}

.cap-list-hero h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.cap-list-hero p {
  font-size: var(--text-lg);
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.cap-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  padding: var(--space-12) 0;
}

.cap-list-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.cap-list-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.cap-list-card h2 {
  font-size: var(--text-xl);
  color: var(--accent-color);
  margin-bottom: var(--space-3);
}

.cap-list-card p {
  font-size: var(--text-sm);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}

/* === Global Mobile Refinements (narrow screens) === */
@media (max-width: 480px) {
  :root {
    --header-height: 64px;
  }

  .logo-img {
    height: 36px;
  }

  .container {
    padding: 0 var(--space-4);
  }

  .hero {
    min-height: 360px;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .hero-tagline {
    font-size: var(--text-base);
  }

  .ind-hero h1,
  .cs-hero h1 {
    font-size: 1.5rem;
  }

  .ind-page-hero h1 {
    font-size: 1.4rem;
  }

  .ind-related-grid {
    grid-template-columns: 1fr;
  }

  .cs-card-visual {
    min-height: 180px;
    max-height: 220px;
  }

  .contact-hero h1 {
    font-size: 1.6rem;
  }

  .btn-cta {
    padding: 10px 20px;
    font-size: var(--text-sm);
  }
}

/* ================================================
   About Page
   ================================================ */

.about-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: var(--space-4);
  letter-spacing: 0.03em;
}

/* Intro section */
.about-intro {
  padding: var(--space-16) 0;
}

.about-intro .container {
  max-width: 780px;
}

.about-intro-content h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-color);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--bg-light);
  position: relative;
}

.about-intro-content h2:first-child {
  margin-top: 0;
}

.about-intro-content h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--primary-color);
}

.about-intro-content.content-main > p > strong:only-child,
.about-intro-content.content-main > p:has(> strong:first-child:last-child),
.about-intro-content.content-main > p:has(> strong:first-child) {
  display: inline;
  background: none !important;
  padding: 0 !important;
  border-left: none !important;
  border-radius: 0 !important;
  margin: 0;
}

/* Stats section */
.about-stats {
  padding: var(--space-12) 0;
  background: var(--bg-light);
}

.about-stats .container {
  max-width: 900px;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.about-stat-item {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.about-stat-number {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1;
}

.about-stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Milestones section */
.about-milestones {
  padding: var(--space-16) 0;
}

.about-milestones .container {
  max-width: 700px;
}

.about-section-title {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--accent-color);
  margin-bottom: var(--space-12);
}

.about-timeline {
  position: relative;
  padding-left: 40px;
}

.about-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-color);
}

.about-timeline-item {
  position: relative;
  margin-bottom: var(--space-8);
}

.about-timeline-dot {
  position: absolute;
  left: -33px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 3px var(--primary-color);
}

.about-timeline-year {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--primary-color);
  margin-bottom: 4px;
}

.about-timeline-text {
  margin: 0;
  color: var(--text-color);
  line-height: 1.6;
}

/* Clients section */
.about-clients {
  padding: var(--space-16) 0;
  background: var(--bg-light);
}

.about-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
}

.about-client-category {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--primary-color);
}

.about-client-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-client-list li {
  padding: 8px 0;
  color: var(--text-color);
  font-weight: 500;
  border-bottom: 1px solid var(--border-color);
}

.about-client-list li:last-child {
  border-bottom: none;
}

/* Certifications section */
.about-certs {
  padding: var(--space-16) 0;
}

.about-certs .container {
  max-width: 700px;
}

.about-cert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-cert-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.about-cert-list li:last-child {
  border-bottom: none;
}

.about-cert-list svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.about-cert-list span {
  font-weight: 500;
}

/* Facilities section */
.about-facilities {
  padding: var(--space-16) 0;
  background: var(--bg-light);
}

.about-facilities .container {
  max-width: 700px;
}

.about-facilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.about-facility-card {
  background: var(--white);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.about-facility-card h3, .about-facility-card h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--space-2);
}

.about-facility-card p {
  margin: 0;
  color: var(--text-light);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* CTA buttons row */
.ind-cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.ind-page-cta .btn-cta-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.ind-page-cta .btn-cta-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
}

/* About responsive */
@media (max-width: 768px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-stat-number {
    font-size: var(--text-3xl);
  }

  .about-clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .about-section-title {
    font-size: var(--text-2xl);
  }

  .about-intro {
    padding: var(--space-12) 0;
  }
}

@media (max-width: 480px) {
  .about-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .about-clients-grid {
    grid-template-columns: 1fr;
  }
}


/* Standards status block: a live section driven by data/standards.yaml. */
.standards-watch {
  margin: var(--space-10) 0;
  padding: var(--space-6);
  border: 1px solid var(--border-color, #e2e8f0);
  border-left: 4px solid var(--primary-color);
  border-radius: 8px;
  background: var(--bg-light, #f8fafc);
}
.standards-watch h2 { margin-top: 0; }
.standards-watch table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.standards-watch th,
.standards-watch td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  font-size: var(--text-sm);
}
.standards-watch th { font-weight: 700; color: var(--accent-color); }
.standards-source {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--text-light);
}
.standards-watch .table-scroll { margin: var(--space-4) 0; }
.standards-watch .table-scroll table { margin: 0; }
.standards-watch-meta {
  font-size: var(--text-sm);
  color: var(--text-light);
  margin-bottom: 0;
}


/* Editorial update block: the freshness section driven by frontmatter updates. */
.update-notes { margin: var(--space-10) 0 0; }
.update-notes h2 { margin-bottom: var(--space-4); }
.update-notes-list { list-style: none; padding: 0; margin: 0; }
.update-notes-list li {
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-left: 3px solid var(--primary-color);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.update-notes-list li:last-child { border-bottom: none; }
.update-notes-list time {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--space-2);
}
.update-notes-list p { margin: 0; }


/* Capability card with an image: picture on top, title below, and the image
   runs edge to edge across the top of the card with no padding. */
.ind-related-card.has-img {
  padding: 0;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.ind-related-card.has-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-light);
}
.ind-related-card.has-img h2 {
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.4;
}
.ind-related-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}


/* --- Responsive hero background image ---------------------------------
   The LCP element is the hero block's CSS background image, not an <img>, so
   srcset does nothing and the only way to swap the file is a media query.
   Full size used to serve 2736x1536 at 287KB, so a 390px phone downloaded an
   image seven times wider than it needed: measured LCP of 3.8-4.4s on Slow 4G.
   The default step is 1200w, which covers a phone at DPR 3, and larger screens
   step up from there. */
@media (min-width: 900px) {
  .hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url('/images/hero/qa-lab-3d-full-view-2000.webp'); }
  .ind-hero, .ind-page-hero {
    background-image: linear-gradient(135deg, rgba(26, 26, 46, 0.88) 0%, rgba(22, 33, 62, 0.85) 50%, rgba(15, 52, 96, 0.82) 100%),
                      url('/images/hero/qa-lab-3d-full-view-2000.webp'); }
  .cs-hero {
    background-image: linear-gradient(135deg, rgba(26, 26, 46, 0.90) 0%, rgba(22, 33, 62, 0.87) 50%, rgba(15, 52, 96, 0.84) 100%),
                      url('/images/cases/electronic-tester-cleanroom-3d-01-2000.webp'); }
}
@media (min-width: 1600px) {
  .hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url('/images/hero/qa-lab-3d-full-view.webp'); }
  .ind-hero, .ind-page-hero {
    background-image: linear-gradient(135deg, rgba(26, 26, 46, 0.88) 0%, rgba(22, 33, 62, 0.85) 50%, rgba(15, 52, 96, 0.82) 100%),
                      url('/images/hero/qa-lab-3d-full-view.webp'); }
  .cs-hero {
    background-image: linear-gradient(135deg, rgba(26, 26, 46, 0.90) 0%, rgba(22, 33, 62, 0.87) 50%, rgba(15, 52, 96, 0.84) 100%),
                      url('/images/cases/electronic-tester-cleanroom-3d-01.webp'); }
}

/* --- Horizontal overflow guard ----------------------------------------
   Measured at a 390px viewport: 43 of 85 pages overflowed sideways, caused by
   wide tables and the hard-coded three-column grid on case study pages.
   Tables now scroll inside their own container, and the three-column grid
   stacks on narrow screens. The page body should never scroll sideways. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: var(--space-4) 0;
}
.table-scroll > table { margin: 0; min-width: 100%; }
.table-scroll:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* Case study Challenge / Solution / Outcome: an inline three-column grid in the
   template. It has to stack on narrow screens, or the third column runs off
   screen, and that is the column where a buyer reads the result. */
@media (max-width: 720px) {
  .cs-cso-grid { grid-template-columns: 1fr !important; }
}

/* Backstop: no media or code block that is still too wide may break the page. */
img, video, svg, iframe { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }

/* ============================================================
   Capabilities index page, /capabilities/
   Every card is rendered into the HTML; filtering uses [hidden] only and never
   touches the DOM.
   ============================================================ */

.cap-index {
  padding: var(--space-10) 0 var(--space-12);
}

/* --- Toolbar: search plus filter chips --- */
.cap-tools {
  position: sticky;
  /* The site header is fixed, 80px tall, at z-index 1000. The toolbar has to
     clear those 80px and sit below the header in z-index, or it covers the
     navigation while the page scrolls. */
  top: 80px;
  z-index: 20;
  padding: var(--space-4) 0 var(--space-3);
  margin-bottom: var(--space-8);
  background: var(--white);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.cap-search {
  position: relative;
  display: block;
  max-width: 560px;
  margin: 0 auto var(--space-4);
}

.cap-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
}

.cap-search input {
  width: 100%;
  min-height: var(--touch-min);
  padding: 10px 14px 10px 42px;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text-color, #1a1a1a);
  background: var(--bg-light, #f4f6f9);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md);
}

.cap-search input:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
  background: var(--white);
}

.cap-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 13px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-color, #1a1a1a);
  background: var(--bg-light, #f4f6f9);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.cap-chip:hover {
  border-color: var(--primary-color);
}

.cap-chip:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.cap-chip.is-active {
  color: var(--white);
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.cap-chip-n {
  font-size: 0.75rem;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}

.cap-chip.is-active .cap-chip-n {
  color: rgba(255, 255, 255, 0.85);
}

.cap-count {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-light);
  text-align: center;
}

/* --- Groups --- */
.cap-group {
  margin-bottom: var(--space-10);
}

.cap-group h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  /* 80px header plus roughly 130px of toolbar: leave that much room when an
     anchor jump lands here. */
  scroll-margin-top: 220px;
}

.cap-group-intro {
  max-width: 720px;
  margin: 0 0 var(--space-5);
  color: var(--text-light);
}

/* --- Cards --- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.cap-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.cap-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow);
}

.cap-card:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.cap-card-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-light, #f4f6f9);
}

.cap-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
}

.cap-card-title {
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent-color, #1a1a1a);
}

.cap-card:hover .cap-card-title {
  color: var(--primary-color);
}

.cap-card-desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-light);
}

.cap-empty {
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--text-light);
}

/* Separate the explanatory content below the index from the card grid. */
.cap-detail {
  border-top: 1px solid var(--border-color, #e2e8f0);
}

@media (max-width: 720px) {
  .cap-tools {
    padding-top: var(--space-3);
  }

  .cap-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

  .cap-filters::-webkit-scrollbar {
    display: none;
  }

  .cap-chip {
    flex: 0 0 auto;
  }

  .cap-grid {
    grid-template-columns: 1fr;
  }
}