/*
  Custom styles for TANDMM Inc. Mission Continuity & Operational Resilience website.
  Theme: dark background with high‑contrast accents. Designed with accessibility
  and responsiveness in mind. Colors and spacing are defined as CSS variables
  for easy maintenance. No EM dashes are used in the copy. All sizes use
  rem units for scalability. 
*/

:root {
  --color-bg: #0d111b;
  --color-bg-secondary: #111927;
  --color-fg: #ffffff;
  --color-fg-secondary: #c4ccd4;
  --color-accent: #60bf70; /* green accent from provided palette */
  --color-accent-light: #7ddc89;
  --color-accent-dark: #3a8f4c;
  --color-link: #6ea9e7; /* soft blue for links */
  /* Alternate background colours for section contrast */
  --color-bg-alt1: #111d2e;
  --color-bg-alt2: #14243b;
  --color-bg-alt3: #162c43;
  --color-header-fg: #0d111b;
  --color-header-bg: #ffffff;
  --color-nav-bg: rgba(13, 17, 27, 0.8);
  --transition-fast: 0.3s ease;
  --transition-slow: 0.6s ease;
  --max-width: 1150px;
  --border-radius: 0.5rem;
  --font-body: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
}

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: 1.5;
  font-size: 16px;
}

/* Increase section header size for all major sections */
.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

/* How It Works Page Styles */

/* Hero Section */
.hero-section {
  padding: 6rem 0 4rem;
  background: linear-gradient(180deg, var(--color-bg) 0%, #111927 100%);
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--color-fg);
}

.highlight-text {
  color: #60bf70;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-fg-secondary);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Step Sections */
.step-section {
  padding: 5rem 0;
  position: relative;
}

.step-accelerate {
  background: linear-gradient(135deg, #0d1b2a 0%, #1a3a2a 50%, #0f2a1a 100%);
  border-top: 3px solid rgba(96, 191, 112, 0.3);
  border-bottom: 3px solid rgba(96, 191, 112, 0.3);
}

.step-isolate {
  background: linear-gradient(135deg, #0f1629 0%, #1e2a4a 50%, #152544 100%);
  border-top: 3px solid rgba(59, 130, 246, 0.3);
  border-bottom: 3px solid rgba(59, 130, 246, 0.3);
}

.step-recover {
  background: linear-gradient(135deg, #1a0f2e 0%, #2d1b4e 50%, #251a3f 100%);
  border-top: 3px solid rgba(168, 85, 247, 0.3);
  border-bottom: 3px solid rgba(168, 85, 247, 0.3);
}

.step-content {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.step-isolate .step-content {
  flex-direction: row-reverse;
}

.step-text {
  padding: 2rem 0;
  flex: 1;
  min-width: 0;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.step-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-accelerate .step-icon {
  background: rgba(96, 191, 112, 0.2);
  color: #60bf70;
}

.step-isolate .step-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.step-recover .step-icon {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.step-number {
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.step-text h2 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--color-fg);
}

.step-text h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.step-accelerate h3 {
  color: #7ddc89;
}

.step-isolate h3 {
  color: #60a5fa;
}

.step-recover h3 {
  color: #c084fc;
}

.step-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-fg-secondary);
  margin-bottom: 2rem;
}

.step-features {
  list-style: none;
  padding: 0;
}

.step-features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-fg-secondary);
}

.step-features li::before {
  content: "→";
  position: absolute;
  left: 0;
  font-weight: bold;
}

.step-accelerate .step-features li::before {
  color: #60bf70;
}

.step-isolate .step-features li::before {
  color: #3b82f6;
}

.step-recover .step-features li::before {
  color: #a855f7;
}

/* Chart Styles */
.step-chart {
  padding: 2rem;
  flex: 1;
  min-width: 0;
}

.chart-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1rem;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.step-accelerate .chart-container {
  border: 1px solid rgba(96, 191, 112, 0.3);
}

.step-isolate .chart-container {
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.step-recover .chart-container {
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.chart-label {
  font-size: 0.9rem;
  color: var(--color-fg-secondary);
}

.chart-value {
  font-size: 0.9rem;
  font-weight: 600;
}

.step-accelerate .chart-value {
  color: #60bf70;
}

.step-isolate .chart-value {
  color: #3b82f6;
}

.step-recover .chart-value {
  color: #a855f7;
}

.progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.step-accelerate .progress-fill {
  background: linear-gradient(90deg, #60bf70 0%, #7ddc89 100%);
}

.step-isolate .progress-fill {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.step-recover .progress-fill {
  background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
}

/* Architecture Section */
.architecture-section {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, #111927 100%);
}

.section-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--color-fg);
}

.section-subtitle {
  font-size: 1.25rem;
  color: var(--color-fg-secondary);
  margin-bottom: 4rem;
}

.architecture-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
}

.diagram-container {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 3rem 3rem 10rem 3rem;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  position: relative;
  min-width: 800px;
}

.site-section {
  text-align: center;
  flex: 1;
}

.site-icon {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.site-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-fg);
}

.site-section p {
  color: var(--color-fg-secondary);
  line-height: 1.5;
  font-size: 0.95rem;
}

.connection-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.flow-line {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #60bf70 0%, #3b82f6 100%);
}

.flow-arrow {
  color: #888;
  font-size: 1.5rem;
  font-weight: bold;
}

.recovery-badge {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(168, 85, 247, 0.2);
  border: 2px solid rgba(168, 85, 247, 0.4);
  border-radius: 2rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #c084fc;
  font-weight: 600;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
}

/* Use Cases Section */
.use-cases-section {
  padding: 6rem 0;
  background: linear-gradient(180deg, #111927 0%, var(--color-bg) 100%);
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.use-case-card {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.use-case-card:hover {
  transform: translateY(-5px);
  border-color: rgba(96, 191, 112, 0.3);
}

.use-case-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.use-case-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-fg);
}

.use-case-card p {
  color: var(--color-fg-secondary);
  line-height: 1.6;
}

/* Technical Specifications Section */
.specs-section {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, #0f1419 100%);
}

.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.spec-card {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1rem;
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.ai-acceleration-spec {
  border: 1px solid rgba(96, 191, 112, 0.3);
}

.physical-isolation-spec {
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.spec-header {
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ai-acceleration-spec .spec-header {
  background: rgba(96, 191, 112, 0.1);
  border-bottom: 1px solid rgba(96, 191, 112, 0.3);
}

.physical-isolation-spec .spec-header {
  background: rgba(59, 130, 246, 0.1);
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

.spec-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.ai-acceleration-spec .spec-icon {
  background: rgba(96, 191, 112, 0.2);
}

.physical-isolation-spec .spec-icon {
  background: rgba(59, 130, 246, 0.2);
}

.spec-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-fg);
}

.spec-details {
  padding: 2rem;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-label {
  color: var(--color-fg-secondary);
  font-size: 0.95rem;
}

.spec-value {
  font-weight: 600;
  color: var(--color-fg);
  font-size: 0.95rem;
  text-align: right;
}

.ai-acceleration-spec .spec-value {
  color: #7ddc89;
}

.physical-isolation-spec .spec-value {
  color: #60a5fa;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .step-content {
    flex-direction: column;
    gap: 3rem;
  }

  /* Override step-isolate row-reverse for mobile */
  .step-isolate .step-content {
    flex-direction: column;
  }

  /* Ensure chart comes after text on mobile for step-isolate */
  .step-isolate .step-chart {
    order: 2;
  }
  
  .step-isolate .step-text {
    order: 1;
  }

  .diagram-container {
    flex-direction: column;
    gap: 3rem;
    min-width: auto;
    padding: 2rem;
  }

  .connection-flow {
    flex-direction: column;
    gap: 0.5rem;
  }

  .flow-line {
    height: 40px;
    width: 3px;
    background: linear-gradient(180deg, #60bf70 0%, #3b82f6 100%);
  }

  .flow-arrow {
    transform: rotate(90deg);
  }

  .recovery-badge {
    position: static;
    transform: none;
    margin: 2rem auto 0;
    width: fit-content;
  }

  .specs-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .step-text h2 {
    font-size: 2.5rem;
  }

  .step-section {
    padding: 3rem 0;
  }

  .step-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .use-cases-grid {
    grid-template-columns: 1fr;
  }

  .site-box {
    min-width: auto;
  }
}

/* Alternate section backgrounds */
.bg-alt1 {
  /* Dark blue with subtle gradient */
  background: linear-gradient(180deg, #0d1b2a 0%, #15244a 100%);
}

.bg-alt2 {
  /* Dark blue to dark purple gradient */
  background: linear-gradient(180deg, #0f2130 0%, #221f3b 100%);
}

.bg-alt3 {
  background: linear-gradient(180deg, #162c43 0%, #2c214c 100%);
}

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

a:hover, a:focus {
  color: var(--color-accent);
}

img {
  max-width: 100%;
  height: auto;
}

/* Utility classes */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section {
  padding-block: 3rem;
}

.text-center {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border: 2px solid var(--color-accent);
}

.btn:hover, .btn:focus {
  background-color: var(--color-accent-dark);
  color: var(--color-fg);
}

/* Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-header-bg);
  color: var(--color-header-fg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.75rem 1.5rem;
}

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

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav li {
  position: relative;
}

nav a {
  color: var(--color-header-fg);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem;
  display: block;
}

/* Underline for active navigation link */
nav a[aria-current="page"] {
  position: relative;
}

nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background-color: var(--color-accent);
}

nav a:hover, nav a:focus {
  color: var(--color-accent-dark);
}

/* Mobile navigation */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-header-fg);
  font-size: 1.5rem;
  cursor: pointer;
}

.nav-menu {
  display: flex;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
    margin-left: auto;
  }
  .nav-menu {
    display: none;
  }
  .nav-menu.open {
    display: block;
  }
  nav ul {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-header-bg);
    color: var(--color-header-fg);
    flex-direction: column;
    width: 250px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-slow);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
  }
  nav ul.open {
    max-height: 500px;
    padding: 1rem;
    opacity: 1;
  }
  nav li {
    margin-bottom: 1rem;
  }
}

/* Hero section */
#hero {
  position: relative;
  width: 100%;
  /* Reduce hero height further to bring subsequent content closer */
  height: 75vh;
  /* Add top margin for additional spacing */
  margin-top: 2rem;
  /* Reduce top padding to move content up by ~150px */
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

#hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

#hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding-inline: 1rem;
  padding-top: 20px;
}

#hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.1;
}

#hero h1 .highlight {
  color: var(--color-accent);
}

#hero p {
  font-size: 1.2rem;
  color: var(--color-fg-secondary);
  margin-bottom: 2rem;
}

#hero .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Section: What we deliver */
.deliveries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.delivery-item {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.delivery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.delivery-item svg {
  height: 40px;
  width: 40px;
  fill: var(--color-accent);
  margin-bottom: 1rem;
}

.delivery-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.delivery-item p {
  font-size: 0.9rem;
  color: var(--color-fg-secondary);
}

/* What We Deliver – new layout */
.what-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
  /* Display four columns on large screens */
  grid-template-columns: repeat(4, 1fr);
}

.what-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.what-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.icon-container {
  flex-shrink: 0;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(96,191,112,0.15);
  border-radius: var(--border-radius);
  color: var(--color-accent);
}

/* Ensure icons are visible by setting stroke and no fill */
.icon-container svg {
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
}

.what-item h3 {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
  color: var(--color-fg);
}

.what-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-fg-secondary);
}

/* How It Works – homepage */
.how-works {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.how-list {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.how-list-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.how-list-item .icon-container {
  height: 36px;
  width: 36px;
  background-color: rgba(96,191,112,0.15);
  border-radius: var(--border-radius);
  color: var(--color-accent);
}

.how-list-item h3 {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
  color: var(--color-fg);
}

.how-list-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-fg-secondary);
}

.how-bars {
  flex: 1 1 320px;
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.bar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-fg);
}

.bar-label {
  flex: 0 0 120px;
  color: var(--color-fg-secondary);
}

.bar-track {
  flex: 1;
  background-color: rgba(255,255,255,0.1);
  border-radius: 0.25rem;
  position: relative;
  height: 8px;
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 0.25rem;
}

.bar-value {
  flex: 0 0 100px;
  text-align: right;
  font-weight: 600;
  color: var(--color-accent);
}

/* Responsive adjustments */
@media (max-width: 800px) {
  .what-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 768px) {
  .how-works {
    flex-direction: column;
  }
  .how-bars, .how-list {
    flex: 1 1 100%;
  }
}

/* How it works summary */
.how-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.how-step {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.how-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.how-step::before {
  content: attr(data-step);
  position: absolute;
  top: -20px;
  left: -20px;
  font-size: 6rem;
  color: rgba(96,191,112,0.1);
  font-weight: 700;
  pointer-events: none;
}

.how-step h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.how-step p {
  font-size: 0.9rem;
  color: var(--color-fg-secondary);
}

/* Recovery first section */
.recovery-section {
  background-color: var(--color-bg-secondary);
  padding: 3rem 1.5rem;
  border-radius: var(--border-radius);
  margin-top: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.recovery-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.recovery-section p {
  font-size: 1rem;
  color: var(--color-fg-secondary);
  max-width: 800px;
  margin-inline: auto;
}

/* Sector tiles */
.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.sector-tile {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  padding: 2.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.sector-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.sector-tile h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: var(--color-accent);
}

/* Icons for industry tiles */
.sector-icon {
  width: 32px;
  height: 32px;
  /* Generic icon style (unused for deliver/how/industry icons after update) */
  fill: var(--color-accent);
  stroke: none;
  margin-bottom: 0.5rem;
}

/* Sector content wrapper */
.sector-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.sector-content p {
  font-size: 0.95rem;
  color: var(--color-fg-secondary);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.sector-content p:last-child {
  margin-bottom: 0;
  flex-grow: 1;
}

/* Button alignment - consistent across browsers */
.sector-tile .btn {
  margin-top: 1.5rem !important;
  flex-shrink: 0;
  align-self: flex-start !important;
  width: auto !important;
  max-width: fit-content !important;
  display: inline-block !important;
}

.sector-tile p strong {
  color: var(--color-fg);
  display: block;
  margin-bottom: 0.5rem;
}

/* Compliance grid */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

/* New compliance tiles */
.compliance-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.comp-tile {
  flex: 1 1 200px;
  background-color: var(--color-bg-secondary);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--border-radius);
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.comp-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.comp-tile h4 {
  margin-bottom: 0.3rem;
  font-size: 1rem;
  color: var(--color-fg);
}

.comp-tile p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-fg-secondary);
}

/* Proven results section */
.proven-section {
  background-color: var(--color-accent);
  color: #ffffff;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}

.proven-section h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.proven-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 2rem;
  max-width: var(--max-width);
  margin-inline: auto;
}

.proven-item {
  flex: 1 1 150px;
}

.proven-item h3 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.proven-item p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
}

.compliance-grid .item {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
}

/* Footer */
footer {
  background-color: var(--color-header-bg);
  padding: 3rem 1.5rem;
  margin-top: 0;
  color: var(--color-header-fg);
}

footer .footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin-inline: auto;
}

footer h4 {
  color: var(--color-header-fg);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

footer a {
  color: var(--color-link);
  font-size: 0.9rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

footer a:hover {
  color: var(--color-accent-dark);
}

footer p {
  font-size: 0.85rem;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Proof page styles */
.proof-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.proof-card {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.proof-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.proof-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

.proof-card p {
  font-size: 0.9rem;
  color: var(--color-fg-secondary);
  margin-bottom: 1rem;
}

.chart {
  position: relative;
  width: 100%;
  height: 120px;
}

/* Industries page */
.industry-section {
  margin-bottom: 3rem;
}

.industry-section h2 {
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.industry-section .pains, .industry-section .outcomes {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.industry-section ul {
  list-style: none;
  padding-left: 0;
}

.industry-section li {
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-fg-secondary);
}

.industry-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* Icon styles for deliver section */
.deliver-icon {
  width: 64px;
  height: 64px;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
  margin-bottom: 0.5rem;
}

/* Icon styles for industry focus section (outline only) */
.industry-icon {
  width: 32px;
  height: 32px;
  stroke: var(--color-accent);
  stroke-width: 2;
  fill: none;
  margin-bottom: 0.5rem;
}

/* How it works icon container */
.hw-icon {
  width: 40px;
  height: 40px;
  background-color: var(--color-accent);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 1rem;
}

.hw-icon svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  stroke-width: 2;
  fill: none;
}

/* Contact form */
.contact-form {
  max-width: 600px;
  margin-inline: auto;
  display: grid;
  gap: 1rem;
}

.contact-form label {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  display: block;
  color: var(--color-fg);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--border-radius);
  border: 1px solid #34405a;
  background-color: var(--color-bg-secondary);
  color: var(--color-fg);
  font-size: 0.9rem;
}

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

.contact-form button {
  justify-self: start;
  cursor: pointer;
}

/* Accessible focus outlines */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}

/* Carousel control items - prevent text wrapping */
.control-item .control-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.control-item .control-header span {
  flex-shrink: 0;
  white-space: nowrap;
}

.control-item .control-header h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* For carousel items, ensure adequate spacing */
.carousel-slide .control-item {
  min-width: 280px;
}

/* Responsive design - Mobile breakpoints */
@media (max-width: 768px) {
  /* Make proof page case study grids single column on mobile */
  .section .container > div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
  }
  
  /* Make "Why These Results Matter" section single column on mobile */
  section[class*="reveal"] div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
  }
  
  section[class*="reveal"] div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
  }
  
  /* Make performance summary section responsive */
  section div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Adjust hero section font sizes for mobile */
  .hero-section .hero-title {
    font-size: 2.5rem;
  }
  
  /* Make "What We Deliver" grid single column on mobile */
  .what-grid {
    grid-template-columns: 1fr !important;
  }
}