/* ========================================
   Helvetik Consulting - Custom CSS
   Professional Cybersecurity Consultancy Theme
   ======================================== */

/* ========================================
   Google Fonts - Inter & Open Sans
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');

/* ========================================
   CSS Variables - Professional Color Palette
   ======================================== */
:root {
  /* New Color Palette */
  --deep-lilac: #6F51A5;
  --black: #000000;
  --sky-aqua: #51CBEC;
  --dark-orange: #F68F28;
  --electric-rose: #E93199;
  
  /* Primary Brand Colors */
  --primary-color: #0E1537;           /* Deep Navy - maximum contrast, matches logo */
  --primary-dark: #0A0F2E;            /* Darker navy for hover states */
  --secondary-color: #2A3A6A;         /* Steel Blue - subheaders, panels */
  
  /* Accent Colors */
  --accent-color: #00BCD4;            /* Cyan-Blue from logo - buttons, CTAs, links */
  --accent-hover: #00A3BD;            /* Darker cyan-blue for hover */
  --accent-light: #F5F7FA;            /* Light Gray - section backgrounds */
  
  /* Text Colors */
  --text-primary: #1E2638;            /* Dark Slate - main text */
  --text-secondary: #6B7280;          /* Soft Gray - metadata, secondary */
  --text-light: #FFFFFF;              /* White text on dark backgrounds */
  
  /* Borders & Backgrounds */
  --background-color: #FFFFFF;
  --background-alt: #F5F7FA;          /* Alternating section background */
  --border-color: #E5E7EB;
  --success-color: #10B981;           /* Green for success states */
  --warning-color: #F59E0B;           /* Amber for warnings */
  --error-color: #EF4444;             /* Red for errors */
  
  /* Legacy compatibility - mapped to new colors */
  --color-primary: #00B2BB;
  --color-primary-dark: #009BA3;
  --color-primary-light: #33C5CD;
  --color-dark: #0F1640;
  --color-dark-secondary: #2A3A6A;
  --color-dark-tertiary: #6B7280;
  --color-gray: #6B7280;
  --color-gray-light: #9CA3AF;
  --color-white: #FFFFFF;
  --color-off-white: #F5F7FA;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  
  /* Gradient Colors - Navy/Teal Harmony */
  --color-gradient-start: #00B2BB;
  --color-gradient-mid: #1A6B6E;
  --color-gradient-end: #0F1640;
  
  /* Gradient Definitions */
  --gradient-primary: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  --gradient-accent: linear-gradient(135deg, var(--accent-color), #009BA3);
  --gradient-full: linear-gradient(135deg, var(--accent-color), var(--color-gradient-mid), var(--primary-color));
  --gradient-subtle: linear-gradient(135deg, rgba(0, 178, 187, 0.05), rgba(15, 22, 64, 0.05));
  
  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3);
}

/* ========================================
   Base Typography & Body Styles
   ======================================== */
body,
html {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--background-color);
  color: var(--text-primary);
}

/* Override Tachyons font families */
.sans-serif,
body {
  font-family: var(--font-body);
}

/* ========================================
   IMPROVED HEADING STYLES
   ======================================== */

h1, .h1, .f1 {
  color: #0E1537 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 3.25rem !important;  /* ~52px */
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  margin-top: 60px;
  margin-bottom: 24px;
}

h2, .h2, .f2 {
  color: #0E1537 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.5rem !important;   /* ~40px */
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  margin-top: 48px;
  margin-bottom: 20px;
}

h3, .h3, .f3 {
  color: #0E1537 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;  /* ~28px */
  line-height: 1.25 !important;
  margin-top: 36px;
  margin-bottom: 16px;
}

h4, .h4, .f4 {
  color: #0E1537 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.375rem !important; /* ~22px */
  line-height: 1.3 !important;
  margin-top: 28px;
  margin-bottom: 12px;
}

h5, .h5, .f5 {
  color: #0E1537 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important; /* ~18px */
  line-height: 1.4 !important;
}

h6, .h6, .f6 {
  color: #0E1537 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;     /* 16px */
  line-height: 1.4 !important;
}

/* Page/Article Title with Teal Underline */
.article-title,
.page-title,
article h1:first-of-type,
main > h1:first-of-type,
.content > h1:first-of-type {
  color: #0E1537 !important;
  font-weight: 800 !important;
  font-size: 3.25rem !important;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 32px;
}

.article-title::after,
.page-title::after,
article h1:first-of-type::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: #00B2BB;  /* Teal accent underline */
  border-radius: 2px;
}

/* Mobile heading sizes */
@media (max-width: 768px) {
  h1, .h1, .f1 {
    font-size: 2.25rem !important;  /* ~36px */
    margin-top: 40px;
  }
  
  h2, .h2, .f2 {
    font-size: 1.75rem !important;  /* ~28px */
    margin-top: 32px;
  }
  
  h3, .h3, .f3 {
    font-size: 1.375rem !important; /* ~22px */
    margin-top: 24px;
  }
  
  .article-title,
  .page-title,
  article h1:first-of-type,
  main > h1:first-of-type,
  .content > h1:first-of-type {
    font-size: 2.25rem !important;
  }
}

/* High-specificity heading overrides for Ananke theme */
article h1, article h2, article h3, article h4, article h5, article h6,
main h1, main h2, main h3, main h4, main h5, main h6,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.nested-copy-line-height h1, .nested-copy-line-height h2, .nested-copy-line-height h3 {
  color: #0E1537 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Nested links headings */
.nested-links h1, .nested-links h2, .nested-links h3 {
  color: #0E1537 !important;
}

/* Body text styles */
p, .body-text {
  font-size: 1rem;
  line-height: 1.7;
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

/* Desktop: Enhanced body text */
@media screen and (min-width: 64em) {
  p, .body-text {
    font-size: 1.125rem;
    line-height: 1.8;
  }
}

/* ========================================
   Enhanced Spacing & Layout
   ======================================== */
.section-padding {
  padding: var(--spacing-2xl) var(--spacing-md);
}

@media screen and (min-width: 48em) {
  .section-padding {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }
}

@media screen and (min-width: 64em) {
  .section-padding {
    padding: 5rem var(--spacing-2xl);
  }
}

/* Container improvements */
.container-custom {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media screen and (min-width: 48em) {
  .container-custom {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
}

/* ========================================
   Button & Link Styling
   ======================================== */
/* ========================================
   NEW PALETTE BUTTON STYLES
   ======================================== */

/* Base button styles */
.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

/* Primary button = deep lilac background */
.btn-primary {
  background-color: #6F51A5;
  color: #FFFFFF;
  border: 2px solid #6F51A5;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: #6F51A5;
  border-color: #6F51A5;
  color: #F68F28;
  transform: translateY(-1px);
}

/* Secondary button = sky aqua background */
.btn-secondary {
  background-color: #51CBEC;
  color: #000000;
  border: 2px solid #51CBEC;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: #51CBEC;
  color: #F68F28;
  border-color: #51CBEC;
  transform: translateY(-1px);
}

/* Ensure visited states work properly */
.btn-primary:visited {
  background-color: #6F51A5;
  color: #FFFFFF;
  border-color: #6F51A5;
}

.btn-secondary:visited {
  background-color: #51CBEC;
  color: #000000;
  border-color: #51CBEC;
}

.btn-primary:visited:hover,
.btn-primary:visited:focus-visible {
  background-color: #6F51A5;
  border-color: #6F51A5;
  color: #F68F28;
}

.btn-secondary:visited:hover,
.btn-secondary:visited:focus-visible {
  background-color: #51CBEC;
  color: #F68F28;
  border-color: #51CBEC;
}

/* Legacy compatibility */
a.btn,
button.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

a.btn-primary,
button.btn-primary {
  background-color: #6F51A5;
  color: #FFFFFF;
  border: 2px solid #6F51A5;
}

a.btn-secondary,
button.btn-secondary {
  background-color: #51CBEC;
  color: #000000;
  border: 2px solid #51CBEC;
}

/* Large Button */
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* Small Button */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Enhanced Links */
a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color var(--transition-fast);
  position: relative;
}

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

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

/* Underline effect for text links */
p a,
.content a {
  position: relative;
  text-decoration: none;
}

p a::after,
.content a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width var(--transition-base);
}

p a:hover::after,
.content a:hover::after {
  width: 100%;
}

/* ========================================
   Navigation Enhancements
   ======================================== */
nav a,
.nav-link {
  font-weight: var(--font-weight-medium);
  padding: 0.5rem 1rem;
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

nav a:hover,
.nav-link:hover {
  background-color: rgba(0, 178, 187, 0.08);
  color: var(--accent-color);
}

/* Active nav state */
nav a.active,
.nav-link.active {
  color: var(--accent-color);
  font-weight: var(--font-weight-semibold);
  position: relative;
}

/* Active page indicator with gradient underline */
nav a.active::after,
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--accent-color);
  border-radius: 2px;
}

/* ========================================
   Card Components
   ======================================== */
.card {
  position: relative;
  background-color: var(--background-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid var(--border-color);
  will-change: transform;
}

.card:not(:hover) {
  will-change: auto;
}

/* Gradient border effect on hover */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.card:hover::before {
  opacity: 1;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.card-text {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ========================================
   Form Elements
   ======================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--background-color);
  color: var(--text-primary);
  transition: all var(--transition-base);
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0, 178, 187, 0.1);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

/* ========================================
   Animations & Transitions
   ======================================== */
/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Slide In Animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.6s ease-out;
}

/* Pulse Animation for CTAs */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.pulse-on-hover:hover {
  animation: pulse 0.6s ease-in-out;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* ========================================
   Professional Enhancements
   ======================================== */
/* Gradient Text Effect */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Fallback for browsers that don't support background-clip: text */
  color: var(--secondary-color);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    color: transparent;
  }
}

/* Dividers */
hr,
.divider {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-color), transparent);
  margin: var(--spacing-2xl) 0;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--accent-color);
  padding-left: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 1.125rem;
}

/* Lists */
ul li,
ol li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.7;
}

/* Code blocks */
code {
  font-family: 'Monaco', 'Courier New', monospace;
  background-color: var(--accent-light);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  color: var(--primary-color);
  border: 1px solid var(--border-color);
}

pre code {
  display: block;
  padding: var(--spacing-md);
  overflow-x: auto;
  border-radius: var(--radius-md);
}

/* ========================================
   Hero Section Enhancements
   ======================================== */
/* Allow Ananke theme's cover/header to display background images */
.cover,
.cover-image,
header.cover,
.page-header {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(0, 178, 187, 0.05), transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.hero > * {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: var(--spacing-xl);
  /* Fallback for browsers that don't support background-clip: text */
  color: var(--primary-color);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-title {
    color: transparent;
  }
}

/* ========================================
   Responsive Images
   ======================================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.img-rounded {
  border-radius: var(--radius-lg);
}

.img-shadow {
  box-shadow: var(--shadow-xl);
}

/* ========================================
   Icon Support & Flex Utilities
   ======================================== */
/* Icon wrapper classes */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
}

.icon-lg {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-xl {
  width: 4rem;
  height: 4rem;
}

/* Feature icon with gradient background */
.icon-feature {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  background: var(--gradient-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 178, 187, 0.1);
}

/* Icon with gradient effect */
.icon-gradient {
  background: var(--gradient-primary);
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Flex utilities for icon-text combinations */
.flex-icon-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.btn-with-icon .icon {
  transition: transform var(--transition-base);
}

.btn-with-icon:hover .icon {
  transform: translateX(4px);
}

/* ========================================
   Utility Classes
   ======================================== */
/* Text Utilities */
.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-teal {
  color: var(--accent-color) !important;
}

.text-white {
  color: var(--text-light) !important;
}

.text-gray {
  color: var(--text-secondary) !important;
}

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

.text-bold {
  font-weight: var(--font-weight-bold);
}

.text-semibold {
  font-weight: var(--font-weight-semibold);
}

/* Background Utilities */
.bg-primary {
  background-color: var(--primary-color) !important;
  color: var(--text-light) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
  color: var(--text-light) !important;
}

.bg-accent {
  background-color: var(--accent-color) !important;
  color: var(--text-light) !important;
}

.bg-white {
  background-color: var(--background-color) !important;
}

.bg-dark {
  background-color: var(--primary-color) !important;
  color: var(--text-light) !important;
}

/* ========================================
   Enhanced Background Variations
   ======================================== */
/* Radial glow background for hero sections */
.bg-radial-glow {
  background: radial-gradient(circle at top right, rgba(0, 178, 187, 0.08), transparent 60%),
              radial-gradient(circle at bottom left, rgba(15, 22, 64, 0.05), transparent 60%),
              var(--background-color);
}

/* Dot pattern overlay for visual interest */
.bg-dot-pattern {
  background-color: var(--background-color);
  background-image: radial-gradient(rgba(0, 178, 187, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Gradient light background variation */
.bg-gradient-light {
  background: linear-gradient(180deg, var(--background-color) 0%, var(--accent-light) 100%);
}

/* Grid pattern for special sections */
.bg-pattern-grid {
  background-color: var(--background-color);
  background-image:
    linear-gradient(var(--border-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Subtle gradient background */
.bg-gradient-subtle {
  background: var(--gradient-subtle);
}

/* Spacing Utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }
.mt-6 { margin-top: var(--spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }
.mb-6 { margin-bottom: var(--spacing-2xl); }

.py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-5 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-6 { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

/* ========================================
   Mobile-Specific Optimizations
   ======================================== */
@media screen and (max-width: 47.99em) {
  /* Larger touch targets for mobile */
  .btn,
  nav a,
  .nav-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Improved mobile spacing */
  .section-padding {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  /* Full-width buttons on mobile */
  .btn-mobile-full {
    width: 100%;
  }
  
  /* Stack navigation on mobile */
  .mobile-stack {
    flex-direction: column;
  }
  
  /* Adjust font sizes for readability */
  body {
    font-size: 16px; /* Prevents zoom on iOS devices */
  }
}

/* ========================================
   Accessibility Enhancements
   ======================================== */
/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-to-content:focus {
  top: 0;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  body {
    background: white;
    color: black;
  }
  
  .no-print {
    display: none;
  }
  
  a {
    text-decoration: underline;
  }
}

/* ========================================
   Footer Enhancements
   ======================================== */
footer {
  border-top: 1px solid var(--color-dark-tertiary);
  margin-top: var(--spacing-3xl);
}

footer a {
  color: var(--color-gray-light);
  transition: color var(--transition-fast);
}

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

/* ========================================
   Loading States
   ======================================== */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   Badge & Tag Components
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.badge-secondary {
  background-color: var(--color-dark-tertiary);
  color: var(--color-gray-light);
}

/* Gradient badge */
.badge-gradient {
  background: var(--gradient-primary);
  color: var(--color-white);
}

/* Outline badge */
.badge-outline {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary-light);
}

/* ========================================
   Alert Components
   ======================================== */
.alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid;
  background-color: var(--background-color);
  border: 1px solid;
}

.alert-info {
  background-color: rgba(0, 178, 187, 0.05);
  border-color: var(--accent-color);
  border-left-color: var(--accent-color);
  color: var(--primary-color);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.05);
  border-color: var(--success-color);
  border-left-color: var(--success-color);
  color: var(--primary-color);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.05);
  border-color: var(--warning-color);
  border-left-color: var(--warning-color);
  color: var(--primary-color);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.05);
  border-color: var(--error-color);
  border-left-color: var(--error-color);
  color: var(--primary-color);
}

/* ========================================
   Component-Specific Styles
   ======================================== */

/* Hero Section */
.hero-section {
  position: relative;
  background-color: var(--accent-light);
  padding: 80px 0;
  display: flex;
  justify-content: center;
  text-align: center;
  overflow: hidden; /* for ::before overlay */
  border: 4px solid var(--accent-color);
}

/* Sparse node-grid pattern overlay */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  
  /* node/grid pattern using palette color with low opacity */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(200, 87, 146, 0.25) 1px, transparent 0);
  background-size: 48px 48px;
  
  opacity: 0.20; /* reduces pattern intensity overall */
}

/* Ensure content stays above pattern */
.hero-content {
  position: relative; /* so it's above ::before */
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 1;
}

.hero-content h1 {
  color: #FFFFFF;
  font-size: 3rem;         /* adjust if needed */
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

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

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 40px 0;
}

.service-tile {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s ease;
  text-align: left;
}

.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15, 22, 64, 0.12);
  border-color: var(--accent-color);
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.service-tile h3 {
  color: var(--primary-color);
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.service-tile p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.learn-more {
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.learn-more:hover {
  color: var(--primary-color);
}

/* Audience Grid */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 40px 0;
}

.audience-card {
  background: var(--accent-light);
  border-radius: 12px;
  padding: 32px;
  border-left: 4px solid var(--accent-color);
}

.audience-card h3 {
  color: var(--primary-color);
  margin-bottom: 12px;
}

.audience-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Process Section */
.process-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 40px 0;
}

.process-step {
  background: white;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  min-width: 180px;
  flex: 1;
  max-width: 220px;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: var(--accent-color);
  color: white;
  border-radius: 50%;
  line-height: 40px;
  font-weight: 700;
  margin-bottom: 12px;
}

.process-step h4 {
  color: var(--primary-color);
  margin-bottom: 8px;
}

.process-step p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.process-connector {
  font-size: 1.5rem;
  color: var(--accent-color);
  font-weight: bold;
}

@media (max-width: 768px) {
  .process-connector {
    display: none;
  }
  .process-section {
    flex-direction: column;
  }
  .process-step {
    max-width: 100%;
  }
}

/* Trust Badges */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 40px 0;
}

.trust-badges .badge {
  background: var(--accent-light);
  color: var(--primary-color);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--border-color);
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 60px 40px;
  text-align: center;
  border-radius: 16px;
  margin: 40px 0;
}

.cta-section h2 {
  color: white !important;
  font-size: 2rem;
  margin-bottom: 16px;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
  font-size: 1.1rem;
}

.btn-large {
  padding: 16px 32px;
  font-size: 1.1rem;
}

/* Contact Grid */
.contact-grid {
  padding: 40px 0;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.contact-option {
  background: var(--accent-light);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}

.contact-option h3 {
  color: var(--primary-color);
  margin-bottom: 12px;
}

.contact-option p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Contact Form */
.contact-form-section {
  padding: 40px 0;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0, 178, 187, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9CA3AF;
}

/* Differentiators Grid */
.differentiators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 40px 0;
}

.differentiator-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 28px;
  transition: all 0.3s ease;
}

.differentiator-card:hover {
  box-shadow: 0 8px 16px rgba(15, 22, 64, 0.08);
}

.differentiator-card h3 {
  color: var(--primary-color);
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.differentiator-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Leadership Section */
.leadership-section {
  padding: 40px 0;
}

.leader-card {
  display: flex;
  gap: 32px;
  background: var(--accent-light);
  border-radius: 12px;
  padding: 32px;
  align-items: flex-start;
}

.leader-info h3 {
  color: var(--primary-color);
  margin-bottom: 4px;
}

.leader-title {
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 16px;
}

.leader-info p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Skip Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 16px 24px;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* Focus Visible for Keyboard Navigation */
*:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .service-tile,
  .audience-card,
  .differentiator-card,
  .process-step {
    border-width: 2px;
  }
  
  .btn-primary {
    border: 2px solid white;
  }
}

/* Screen Reader Only Text */
.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;
}

/* Ensure minimum tap target size for mobile */
@media (max-width: 768px) {
  .btn,
  button,
  a.learn-more {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ========================================
   NEW PALETTE CLEANUP & OVERRIDES
======================================== */

/* Override old blue/teal button styles with new palette */
.btn-primary,
.cta-btn,
a.btn-primary,
button.btn-primary,
.hero-cta .btn-primary {
  background-color: #6F51A5 !important;
  color: #FFFFFF !important;
  border: 2px solid #6F51A5 !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.cta-btn:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background-color: #6F51A5 !important;
  border-color: #6F51A5 !important;
  color: #F68F28 !important;
}

/* Remove old accent underlines */
.hero-content h1::after {
  display: none;
}

/* Override green classes - maintain existing teal where needed */
.green,
a.green,
.nested-links a.green {
  color: #00B2BB !important;
}

.bg-green,
.hover-bg-green:hover {
  background-color: #00B2BB !important;
}

/* ========================================
   CONTRAST FIXES - WHITE TEXT ON DARK BACKGROUNDS
   ======================================== */

/* Site title on dark header background - MUST be white */
.site-title,
header .site-title,
.header-title,
nav .site-title,
header h1,
header a.link {
  color: #FFFFFF !important;
}

/* Hero section text - WHITE on dark/blue backgrounds */
.hero h1,
.hero h2,
.hero-title,
.hero-section h1,
.hero-section h2,
.cover h1,
.cover h2,
.cover-title,
header.cover h1,
header.cover h2,
.bg-near-black h1,
.bg-near-black h2,
.bg-dark-gray h1,
.bg-dark-gray h2 {
  color: #FFFFFF !important;
}

/* Hero subtitles - light gray for softer look */
.hero p,
.hero-subtitle,
.hero-section p,
.cover p,
header.cover p {
  color: #E2E6EB !important;
}

/* Navigation links - REMOVE ALL GREEN, use light gray/white */
nav a,
.nav a,
.navigation a,
header nav a,
.site-nav a,
.header-nav a {
  color: #E2E6EB !important;  /* Light gray default */
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a:hover,
nav a:focus,
.nav a:hover,
header nav a:hover {
  color: #FFFFFF !important;  /* White on hover */
}

/* Active nav link */
nav a.active,
nav a[aria-current="page"] {
  color: #FFFFFF !important;
  border-bottom: 2px solid #00B2BB;  /* Teal underline */
}

/* Override any green on nav links */
nav a.green,
nav .green,
header .green {
  color: #E2E6EB !important;
}

nav a.green:hover {
  color: #FFFFFF !important;
}

/* Override ALL green classes with teal */
.green {
  color: #00B2BB !important;
}

.bg-green {
  background-color: #00B2BB !important;
}

.hover-green:hover,
.hover-green:focus {
  color: #00B2BB !important;
}

.hover-bg-green:hover {
  background-color: #00B2BB !important;
}

/* Light backgrounds (white, light gray) → Dark navy text */
.bg-white h1, .bg-white h2, .bg-white h3,
.bg-near-white h1, .bg-near-white h2, .bg-near-white h3,
.bg-light-gray h1, .bg-light-gray h2, .bg-light-gray h3 {
  color: #0E1537 !important;
}

.bg-white p, .bg-near-white p, .bg-light-gray p {
  color: #1C233C !important;
}

/* Dark backgrounds (black, near-black, dark blue) → White/light text */
.bg-black h1, .bg-black h2, .bg-black h3,
.bg-near-black h1, .bg-near-black h2, .bg-near-black h3,
.bg-dark-blue h1, .bg-dark-blue h2, .bg-dark-blue h3,
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3,
.bg-dark h1, .bg-dark h2, .bg-dark h3 {
  color: #FFFFFF !important;
}

.bg-black p, .bg-near-black p, .bg-dark-blue p,
.bg-primary p, .bg-secondary p, .bg-dark p {
  color: #E2E6EB !important;
}

/* Ensure CTA buttons use new palette */
.btn-primary,
.cta-btn,
a.btn-primary,
button.btn-primary {
  background-color: #6F51A5 !important;
  color: #FFFFFF !important;
  border: 2px solid #6F51A5;
}

.btn-primary:hover {
  background-color: #6F51A5 !important;
  color: #F68F28 !important;
}

/* Additional contrast fixes for Ananke theme */
header.cover .site-title,
header.cover nav a,
.cover .site-title,
.cover nav a {
  color: #FFFFFF !important;
}

/* Cover/header backgrounds with images */
header.cover,
.cover {
  color: #FFFFFF !important;
}

header.cover h1,
header.cover h2,
header.cover h3 {
  color: #FFFFFF !important;
}

/* Dark gradient backgrounds */
.hero-section,
.cta-section,
[style*="background: linear-gradient"][style*="#0F1640"],
[style*="background: linear-gradient"][style*="#0E1537"] {
  color: #FFFFFF !important;
}

.hero-section h1,
.hero-section h2,
.hero-section h3 {
  color: #0E1537 !important
}

.cta-section h1,
.cta-section h2,
.cta-section h3 {
  color: #FFFFFF !important;
}

.hero-section p,
.cta-section p {
  color: #0E1537 !important
}

/* Ensure visited link states maintain proper colors */
nav a:visited {
  color: #E2E6EB !important;
}

nav a:visited:hover {
  color: #FFFFFF !important;
}

/* Footer on dark backgrounds */
footer.bg-dark a,
footer.bg-primary a,
footer.bg-near-black a {
  color: #E2E6EB !important;
}

footer.bg-dark a:hover,
footer.bg-primary a:hover,
footer.bg-near-black a:hover {
  color: #00B2BB !important;
}

/* Additional overrides for any remaining blue headings on dark backgrounds */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-near-black h1, .bg-near-black h2, .bg-near-black h3, .bg-near-black h4, .bg-near-black h5, .bg-near-black h6,
.bg-dark-gray h1, .bg-dark-gray h2, .bg-dark-gray h3, .bg-dark-gray h4, .bg-dark-gray h5, .bg-dark-gray h6,
header.cover h1, header.cover h2, header.cover h3, header.cover h4, header.cover h5, header.cover h6 {
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
}

/* Ensure all text in hero/cover sections is white or light */
.hero *,
.hero-section *,
header.cover *,
.cover * {
  color: inherit;
}

/* But explicitly override headings and important elements */
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6,
header.cover h1, header.cover h2, header.cover h3, header.cover h4, header.cover h5, header.cover h6,
.cover h1, .cover h2, .cover h3, .cover h4, .cover h5, .cover h6 {
  color: #FFFFFF !important;
}

/* ========================================
   SITE HEADER - BLACK WITH SPARSE NODE GRID
======================================== */

/* Apply to common header selectors - adjust based on actual HTML structure */
.site-header,
.main-header,
header,
header.cover,
.cover {
  position: relative;
  background-color: #111111;
  z-index: 10;
}

/* Very subtle sparse node grid overlay on header */
.site-header::before,
.main-header::before,
header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  
  background-image:
    radial-gradient(circle at 1px 1px, rgba(124, 69, 133, 0.5) 1px, transparent 0);
  background-size: 60px 60px;
  opacity: 0.10; /* very subtle */
}

/* Navigation link colors on black background */
.site-header a,
.main-header a,
header a,
.site-header nav a,
.main-header nav a,
header nav a {
  color: #F5F5F5;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header a:hover,
.site-header a:focus-visible,
.main-header a:hover,
.main-header a:focus-visible,
header a:hover,
header a:focus-visible,
.site-header nav a:hover,
.main-header nav a:hover,
header nav a:hover {
  color: #F8B55F;   /* warm yellow accent on hover */
}

/* Ensure site title/logo is visible on black */
.site-header .site-title,
.main-header .site-title,
header .site-title,
.site-header h1,
.main-header h1 {
  color: #FFFFFF !important;
}

/* ========================================
   PROFESSIONAL LIST STYLING - GLOBAL
   Icon-based feature lists for consulting aesthetic
======================================== */

/* 1. Remove default bullets globally */
ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  text-align: left !important;
}

/* 2. Apply professional icon-based layout to all list items */
ul li {
  position: relative;
  padding-left: 2.2rem; /* space for the icon */
  margin-bottom: 1.2rem;
  line-height: 1.55;
  color: #2a2a2a;
  font-size: 1.05rem;
}

/* 3. Add custom checkmark icon to every list item */
ul li::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url('/icons/check.svg') no-repeat center / contain;
  position: absolute;
  left: 0;
  top: 0.25rem;
  opacity: 0.9;
}

/* 4. Improve typography for list content */
ul li strong {
  color: #3D365C; /* deep indigo from palette */
  font-weight: 700;
}

/* Ensure proper spacing between nested lists */
ul ul {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

ul ul li {
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

/* 5. Mobile-friendly adjustments */
@media (max-width: 640px) {
  ul li {
    padding-left: 1.8rem;
    font-size: 1rem;
  }

  ul li::before {
    width: 16px;
    height: 16px;
    top: 0.3rem;
  }
}

/* Special handling for navigation lists - preserve their original styling */
nav ul,
.nav ul,
.navigation ul,
.menu ul,
footer ul.social,
.social-links ul,
header ul {
  list-style: none;
  padding-left: 0;
}

nav ul li::before,
.nav ul li::before,
.navigation ul li::before,
.menu ul li::before,
footer ul.social li::before,
.social-links ul li::before,
header ul li::before {
  display: none; /* Remove icons from navigation lists */
}

nav ul li,
.nav ul li,
.navigation ul li,
.menu ul li,
footer ul.social li,
.social-links ul li,
header ul li {
  padding-left: 0;
  margin-bottom: 0;
}

/* ========================================
   End of Custom CSS
======================================== */

/* Make main content area wider */
.container {
  max-width: 1000px; /* default may be 720px or 800px */
  margin-left: auto;
  margin-right: auto;
}

/* Optional: adjust post content area */
.post-content {
  max-width: 900px;
}
.measure-wide {
  max-width: 44em;
}