/* ==========================================================================
   Stratis Consulting — Shared Stylesheet
   Design System v1.0 | stratisconsult.com
   ========================================================================== */

/* --- Fonts --- */
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- Design Tokens --- */
:root {
  --navy: #004876;
  --navy-deep: #003459;
  --navy-light: #005A94;
  --gold: #C49A3C;
  --gold-hover: #D4AA4C;
  --warm-white: #F8F6F1;
  --black-80: #333;
  --black-60: #666;
  --black-40: #999;
  --black-10: #E5E5E5;
  --white: #fff;
  --shadow-sm: 0 1px 3px rgba(0, 48, 76, .08);
  --shadow-md: 0 4px 16px rgba(0, 48, 76, .1);
  --shadow-lg: 0 8px 32px rgba(0, 48, 76, .14);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --max-w: 1140px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Aller', 'Segoe UI', system-ui, sans-serif;
  background: var(--warm-white);
  color: var(--black-80);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  /* Effect 5: Smooth page load fade-in */
  opacity: 0;
  animation: bodyFadeIn 0.4s ease forwards;
}
@keyframes bodyFadeIn { to { opacity: 1; } }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* --- Layout --- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }

/* --- Utilities --- */
.overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
/* FIX: gold-rule 1.2s -> 0.8s; added will-change */
.gold-rule {
  width: 48px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 24px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out);
  will-change: transform;
}
/* Effect 3: Gold rule glow when visible */
.gold-rule.visible { transform: scaleX(1); box-shadow: 0 0 12px rgba(196, 154, 60, .3); }

/* --- Buttons --- */
/* FIX: replaced `ease` with `var(--ease-out)` on bg/border/shadow; active gets explicit 100ms */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: 4px;
  font-family: 'Aller', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  text-decoration: none;
}
.btn:active { transform: scale(0.97); transition: transform 100ms var(--ease-out); }
.btn-primary {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  box-shadow: 0 4px 20px rgba(196, 154, 60, .3);
}
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
}
.btn-navy {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-navy:hover {
  background: var(--navy-light);
  border-color: var(--navy-light);
}
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: #fff;
}
.btn-ghost-gold {
  background: transparent;
  color: var(--gold);
  border-color: transparent;
  padding: 16px 0;
}
.btn-ghost-gold::after { content: ' \2192'; }
.btn-ghost-gold:hover { color: var(--gold-hover); }
.btn-ghost {
  background: transparent;
  color: var(--gold);
  border-color: transparent;
  padding: 16px 4px;
  font-weight: 700;
  font-size: 15px;
}
/* FIX: replaced margin-left animation with transform (GPU-friendly) */
.btn-ghost::after { content: ' \2192'; margin-left: 4px; display: inline-block; transition: transform .25s var(--ease-out); }
.btn-ghost:hover::after { transform: translateX(8px); }
.magnetic-wrap { display: inline-block; position: relative; }

/* --- Navigation --- */
/* FIX: replaced `ease` with `var(--ease-out)` */
.nav {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .3s var(--ease-out), backdrop-filter .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* Effect 7: Nav scroll shadow */
.nav.scrolled { background: rgba(0, 72, 118, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0, 0, 0, .15); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.nav-brand img { height: 44px; }
.nav-tagline {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 32px;
  font-size: 15px;
  color: rgba(255, 255, 255, .75);
}
.nav-links a { position: relative; }
/* FIX: exit-faster-than-enter — hover-in .3s, hover-out .2s */
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .2s var(--ease-out); }
.nav-links a:hover::after { width: 100%; transition: width .3s var(--ease-out); }
.nav-links .cta-link::after { display: none; }
.nav-links a:hover { color: #fff; }
.nav-links .cta-link { color: var(--gold); font-weight: 700; }
.nav-links .cta-link:hover { color: var(--gold-hover); }
/* Effect 11: Active nav link highlighting */
.nav-links .nav-active { color: var(--white); }
.nav-links .nav-active::after { width: 100%; background: var(--gold); }

/* --- Services Dropdown --- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.dropdown-arrow { font-size: 10px; margin-left: 2px; display: inline-block; transition: transform .2s var(--ease-out); }
.nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  background: var(--navy-deep);
  border-radius: 4px;
  padding: 20px 0 12px;
  min-width: 260px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  list-style: none;
  z-index: 110;
}
/* Invisible bridge so mouse can travel from trigger to menu */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu li { padding: 0; }
/* FIX: replaced `ease` with `var(--ease-out)` */
.nav-dropdown-menu a {
  display: block;
  padding: 10px 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}
.nav-dropdown-menu a::after { display: none; }

/* Active state for dropdown items — gold underline like top nav */
.nav-dropdown-menu a.dropdown-active {
  color: var(--white);
  position: relative;
}
.nav-dropdown-menu a.dropdown-active::after {
  display: block;
  content: '';
  position: absolute;
  bottom: 4px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--gold);
  animation: dropdownUnderline 0.4s var(--ease-out) forwards;
}
@keyframes dropdownUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Mobile nav scroll lock */
body.nav-open { overflow: hidden; }

/* Mobile hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
/* FIX: replaced `all .3s ease` with explicit transform/opacity + var(--ease-out) */
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
/* FIX: replaced `opacity .2s ease` with `var(--ease-out)` */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; z-index: 110; }
.nav-hamburger span { width: 24px; height: 2px; background: var(--white); transition: transform .3s var(--ease-out), opacity .2s var(--ease-out); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero --- */
.hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-light) 100%);
  padding: 100px 0 110px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Hero split layout — text left, logo right */
.hero-split {
  display: flex;
  align-items: center;
  gap: 60px;
}
.hero-logo-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
/* FIX: heroLogoFadeIn 1.8s -> 0.8s; ease-in-out -> var(--ease-in-out); added will-change */
.hero-logo-emblem {
  width: 320px;
  height: auto;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation: heroLogoFadeIn 0.8s var(--ease-out) 0.4s forwards, heroLogoPulse 4s var(--ease-in-out) 1.4s infinite alternate;
  will-change: transform, opacity;
}
@keyframes heroLogoPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.03); }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  flex-shrink: 0;
}
.hero h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero .lead {
  font-size: 18px;
  opacity: .8;
  line-height: 1.65;
  margin-bottom: 36px;
}
.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Scroll Progress Bar --- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); z-index: 200; width: 0%; transition: none; }

/* --- Hero Animations --- */
/* FIX: replaced `ease` with `var(--ease-out)` on spotlight */
.hero-spotlight { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.hero:hover .hero-spotlight { opacity: 1; }
/* Effect 4: Hero headline letter-spacing tightening on load */
.hero h1 .word { display: inline-block; opacity: 0; transform: translateY(24px) rotate(1.5deg); letter-spacing: 1px; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), letter-spacing .5s var(--ease-out); will-change: transform, opacity; }
.hero h1 .word.visible { opacity: 1; transform: translateY(0) rotate(0deg); letter-spacing: 0; }
.hero h1 .line-break { display: block; }
/* FIX: hero .lead 0.8s -> 0.5s, delay 0.5s -> 0.3s */
.hero .lead { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out) .3s, transform .5s var(--ease-out) .3s; }
.hero .lead.visible { opacity: .8; transform: translateY(0); }
/* FIX: hero-buttons 0.7s -> 0.5s, delay 0.7s -> 0.5s */
.hero-buttons { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out) .5s, transform .5s var(--ease-out) .5s; }
.hero-buttons.visible { opacity: 1; transform: translateY(0); }

/* --- Hero Circle Drift --- */
/* FIX: ease-in-out -> var(--ease-in-out) for ambient animations (acceptable long duration) */
.hero::before { content: ''; position: absolute; top: -30%; right: -10%; width: 600px; height: 600px; border: 1px solid rgba(255, 255, 255, .03); border-radius: 50%; animation: heroCircleDrift 20s var(--ease-in-out) infinite alternate; }
.hero::after { content: ''; position: absolute; bottom: -40%; right: -5%; width: 400px; height: 400px; border: 1px solid rgba(255, 255, 255, .025); border-radius: 50%; animation: heroCircleDrift 25s var(--ease-in-out) infinite alternate-reverse; }
@keyframes heroCircleDrift { 0% { transform: translate(0, 0); } 100% { transform: translate(-30px, 20px); } }

/* --- Section Reveal (clip-path wipe) --- */
/* FIX: 0.9s -> 0.6s */
.reveal-section { clip-path: inset(0 0 8% 0); opacity: 0.7; transition: clip-path .6s var(--ease-out), opacity .6s var(--ease-out); will-change: clip-path, opacity; }
.reveal-section.visible { clip-path: inset(0 0 0 0); opacity: 1; }

/* --- Stagger-in Children --- */
.stagger-in > * { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.stagger-in.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-in.visible > *:nth-child(2) { transition-delay: 60ms; }
.stagger-in.visible > *:nth-child(3) { transition-delay: 120ms; }
.stagger-in.visible > *:nth-child(4) { transition-delay: 180ms; }
.stagger-in.visible > *:nth-child(5) { transition-delay: 240ms; }
.stagger-in.visible > *:nth-child(6) { transition-delay: 300ms; }
.stagger-in.visible > * { opacity: 1; transform: translateY(0); }

/* --- Overline fade-in (replaces scramble) --- */
.scramble-text {
  display: inline-block;
  min-width: 1ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.scramble-text.overline-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Sections --- */
.section { padding: 88px 0; }
.section-warm { background: var(--warm-white); }
.section-white { background: var(--white); }
.section-navy { background: var(--navy); color: #fff; }
.section-deep { background: var(--navy-deep); color: #fff; }

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.section-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 12px;
}
.section-header p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.section-navy .section-header h2,
.section-deep .section-header h2 {
  color: #fff;
}

/* --- Content Grids --- */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* Stacked-card animation — adapted from 3-layer card effect */
/* FIX: replaced `transition: all` with explicit properties; exit 0.3s < enter 0.48s */
.problem-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out);
  will-change: transform;
}
.problem-item:hover {
  transition: transform 0.48s var(--ease-out);
}
.problem-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border-radius: 6px;
  background: var(--white);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: background 0.3s var(--ease-out), border-left-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.problem-item:hover .problem-item-content {
  transition: background 0.48s var(--ease-out), border-left-color 0.48s var(--ease-out), box-shadow 0.48s var(--ease-out);
}
.problem-item-content::before {
  position: absolute;
  content: "";
  top: -4%;
  left: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%);
  background: rgba(0, 72, 118, .08);
  z-index: -1;
  transform-origin: bottom;
  border-radius: inherit;
  transition: transform 0.3s var(--ease-out), rotate 0.3s var(--ease-out), top 0.3s var(--ease-out), width 0.3s var(--ease-out), height 0.3s var(--ease-out);
}
.problem-item:hover .problem-item-content::before {
  transition: transform 0.48s var(--ease-out), rotate 0.48s var(--ease-out), top 0.48s var(--ease-out), width 0.48s var(--ease-out), height 0.48s var(--ease-out);
}
.problem-item-content::after {
  position: absolute;
  content: "";
  top: -8%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%);
  background: rgba(0, 72, 118, .04);
  z-index: -2;
  transform-origin: bottom;
  border-radius: inherit;
  transition: transform 0.3s var(--ease-out), rotate 0.3s var(--ease-out), top 0.3s var(--ease-out), width 0.3s var(--ease-out), height 0.3s var(--ease-out);
}
.problem-item:hover .problem-item-content::after {
  transition: transform 0.48s var(--ease-out), rotate 0.48s var(--ease-out), top 0.48s var(--ease-out), width 0.48s var(--ease-out), height 0.48s var(--ease-out);
}
.problem-item:hover {
  transform: translateY(-16px);
}
.problem-item:hover .problem-item-content::before {
  rotate: -6deg;
  top: 0;
  width: 100%;
  height: 100%;
}
.problem-item:hover .problem-item-content::after {
  rotate: 6deg;
  top: 0;
  width: 100%;
  height: 100%;
}
.problem-item:hover .problem-item-content {
  background: var(--navy);
  border-left-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.problem-item:hover .problem-item-content h3 { color: var(--gold); }
.problem-item:hover .problem-item-content p { color: rgba(255, 255, 255, .8); }

/* FIX: exit faster (0.3s) than enter (0.48s) for color transitions */
.problem-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
  transition: color 0.3s var(--ease-out);
}
.problem-item:hover h3 { transition: color 0.48s var(--ease-out); }
.problem-item p {
  font-size: 15px;
  color: var(--black-60);
  line-height: 1.6;
  transition: color 0.3s var(--ease-out);
}
.problem-item:hover p { transition: color 0.48s var(--ease-out); }

.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.diff-item { transition: border-color .3s var(--ease-out); }
.diff-item:hover { border-color: var(--gold); }
.diff-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

/* --- Service Cards --- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.services-row2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
  max-width: calc(66.66% + 8px);
  margin-left: auto;
  margin-right: auto;
}
/* FIX: exit-faster-than-enter — default (exit) .2s, hover (enter) .3s */
.service-card {
  background: var(--white);
  border-radius: 6px;
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--navy);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out), border-color .2s var(--ease-out);
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  perspective: 800px;
  will-change: transform;
}
.service-card:hover {
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  border-top-color: var(--gold);
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.service-card:hover h3 { color: var(--gold); }
.service-card:hover p { color: rgba(255, 255, 255, .75); }
.service-card:hover .card-link { color: var(--gold-hover); }
.service-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color .2s var(--ease-out);
}
.service-card:hover h3 { transition: color .3s var(--ease-out); }
.service-card p {
  font-size: 14px;
  color: var(--black-60);
  flex: 1;
  transition: color .2s var(--ease-out);
  margin-bottom: 16px;
}
.service-card:hover p { transition: color .3s var(--ease-out); }
/* Effect 2: Card link arrow animation */
.service-card .card-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  position: relative;
  transition: color .2s var(--ease-out), padding-left .2s var(--ease-out);
}
.service-card .card-link:hover { padding-left: 4px; }
.service-card .card-link::after { content: ' \2192'; }

/* --- SEVS Phases --- */
.sevs-intro {
  font-size: 17px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 12px;
  text-align: center;
}
.sevs-phases { display: flex; gap: 0; margin-top: 40px; }
.sevs-phase {
  flex: 1;
  padding: 24px 20px;
  text-align: center;
  position: relative;
}
.sevs-phase::after {
  content: '\2192';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .2);
  font-size: 20px;
}
.sevs-phase:last-child::after { display: none; }
.sevs-num { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .4; margin-bottom: 8px; }
.sevs-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sevs-tag { font-size: 12px; opacity: .5; }
.sevs-note {
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
  text-align: center;
  margin-top: 32px;
  font-style: italic;
}

/* --- SEVS Connector & Phase Cascade --- */
.sevs-connector { position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; background: rgba(196, 154, 60, .15); transform: translateY(-50%); z-index: 0; }
/* SEVS connector 2s is acceptable — storytelling animation */
.sevs-connector-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), rgba(196, 154, 60, .6)); transition: width 2s var(--ease-out); border-radius: 1px; }
.sevs-phases.visible .sevs-connector-fill { width: 100%; }
.sevs-phase { opacity: 0; transform: translateY(16px) scale(0.95); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.sevs-phases.visible .sevs-phase:nth-child(2) { transition-delay: .15s; }
.sevs-phases.visible .sevs-phase:nth-child(3) { transition-delay: .3s; }
.sevs-phases.visible .sevs-phase:nth-child(4) { transition-delay: .45s; }
.sevs-phases.visible .sevs-phase:nth-child(5) { transition-delay: .6s; }
.sevs-phases.visible .sevs-phase:nth-child(6) { transition-delay: .75s; }
.sevs-phases.visible .sevs-phase { opacity: 1; transform: translateY(0) scale(1); }
.sevs-phase::before { content: ''; display: block; width: 10px; height: 10px; background: var(--gold); border-radius: 50%; margin: 0 auto 12px; opacity: 0; transform: scale(0); transition: opacity .4s var(--ease-out), transform .4s var(--ease-spring); }
.sevs-phases.visible .sevs-phase::before { opacity: 1; transform: scale(1); }
.sevs-phases.visible .sevs-phase:nth-child(2)::before { transition-delay: .25s; }
.sevs-phases.visible .sevs-phase:nth-child(3)::before { transition-delay: .4s; }
.sevs-phases.visible .sevs-phase:nth-child(4)::before { transition-delay: .55s; }
.sevs-phases.visible .sevs-phase:nth-child(5)::before { transition-delay: .7s; }
.sevs-phases.visible .sevs-phase:nth-child(6)::before { transition-delay: .85s; }

/* --- Counter Numbers --- */
.counter-num { font-size: 40px; font-weight: 700; color: var(--gold); display: block; margin-bottom: 4px; line-height: 1; font-variant-numeric: tabular-nums; }

/* --- Credibility Grid --- */
.cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cred-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

/* --- CTA Section --- */
.cta-section { text-align: center; padding: 80px 0; position: relative; overflow: hidden; max-width: none; }
/* FIX: ease-in-out -> var(--ease-in-out) */
.cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; border: 1px solid rgba(255, 255, 255, .03); border-radius: 50%; transform: translate(-50%, -50%); animation: ctaPulse 6s var(--ease-in-out) infinite; }
@keyframes ctaPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .5; } }
.cta-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}
.cta-section p {
  font-size: 17px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
/* Effect 6: CTA button glow pulse */
.cta-section .btn-primary {
  box-shadow: 0 0 0 0 rgba(196, 154, 60, .4);
  animation: ctaBtnPulse 2s ease-in-out infinite;
}
@keyframes ctaBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 154, 60, .4); }
  50% { box-shadow: 0 0 20px 4px rgba(196, 154, 60, .2); }
}

/* --- Footer --- */
.footer { background: var(--navy-deep); padding: 56px 0 40px; color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .4;
  margin-bottom: 16px;
}
.footer-col a,
.footer-col p {
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  line-height: 2;
  display: block;
  text-decoration: none;
}
/* Effect 1: Footer link hover underline */
.footer-col a { position: relative; }
.footer-col a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .3s var(--ease-out);
}
.footer-col a:hover { color: #fff; }
.footer-col a:hover::after { width: 100%; }
.footer-logo { height: 32px; margin-bottom: 16px; }
.footer-tagline {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 24px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, .3);
}

.page-hero .hero-split {
  display: flex;
  align-items: center;
  gap: 60px;
}
.page-hero .hero-split .hero-content {
  flex: 1;
  max-width: none;
}
.page-hero .hero-logo-area {
  flex-shrink: 0;
  width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* FIX: page-hero logo same fixes as main hero logo */
.page-hero .hero-logo-emblem {
  width: 320px;
  height: auto;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation: heroLogoFadeIn 0.8s var(--ease-out) 0.4s forwards, heroLogoPulse 4s var(--ease-in-out) 1.4s infinite alternate;
  will-change: transform, opacity;
}
@keyframes heroLogoFadeIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Page-Specific: Content Pages --- */
.page-hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-light) 100%);
  padding: 72px 0 80px;
  color: #fff;
}
.page-hero h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}
.page-hero .lead {
  font-size: 18px;
  opacity: .8;
  line-height: 1.65;
  max-width: 640px;
}

/* Content blocks for inner pages */
.content-block { max-width: 800px; margin: 0 auto; }
.content-block h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 16px;
}
.content-block h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 12px;
}
.content-block p {
  margin-bottom: 16px;
  line-height: 1.65;
}
.content-block ul {
  margin: 0 0 16px 24px;
  line-height: 1.65;
}
.content-block li { margin-bottom: 8px; }

/* Two-column layout for inner pages */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

/* Cards (generic) */
/* Cards (generic) — hover: navy bg, gold title, white text */
/* FIX: exit-faster-than-enter — default (exit) .2s, hover (enter) .3s */
.card {
  background: var(--white);
  border-radius: 6px;
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--navy);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out), border-color .2s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.card p:last-of-type { flex: 1; }
.card:hover {
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  border-top-color: var(--gold);
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color .2s var(--ease-out);
}
.card:hover h3 { transition: color .3s var(--ease-out); }
.card p {
  color: var(--black-60);
  transition: color .2s var(--ease-out);
}
.card:hover p { transition: color .3s var(--ease-out); }
.card:hover h3 { color: var(--gold); }
.card:hover p { color: rgba(255, 255, 255, .75); }

/* Cards on navy sections — no bg change (already dark) */
.section-navy .card { background: rgba(255, 255, 255, .08); border-top-color: var(--gold); }
.section-navy .card h3 { color: var(--gold); }
.section-navy .card p { color: rgba(255, 255, 255, .7); }
.section-navy .card:hover { background: rgba(255, 255, 255, .14); }
.section-navy .card:hover h3 { color: var(--gold-hover); }
.section-navy .card:hover p { color: rgba(255, 255, 255, .9); }

/* --- Contact Form --- */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
/* FIX: replaced `ease` with `var(--ease-out)` */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--black-10);
  border-radius: 4px;
  font-family: 'Aller', sans-serif;
  font-size: 15px;
  color: var(--black-80);
  background: var(--white);
  transition: border-color .2s var(--ease-out);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 72, 118, .1);
}
.form-group textarea { min-height: 140px; resize: vertical; }

/* --- About Page --- */
/* Effect 8: Image hover zoom */
.about-photo {
  width: 100%;
  max-width: 360px;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease-out);
}
.about-photo:hover { transform: scale(1.03); }

/* --- Accessibility --- */
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.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;
}

/* --- Touch Safety — hover effects only on pointer devices --- */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { transform: translateY(-3px); }
  .problem-item:hover { transform: translateY(-16px); }
  .problem-item:hover .problem-item-content::before { rotate: -6deg; top: 0; width: 100%; height: 100%; }
  .problem-item:hover .problem-item-content::after { rotate: 6deg; top: 0; width: 100%; height: 100%; }
}
/* Disable stacked-card lift on touch */
@media (hover: none) {
  .problem-item:hover { transform: none; }
  .problem-item-content::before, .problem-item-content::after { display: none; }
}

/* --- Reduced Motion --- */
/* FIX: expanded coverage to hero-logo-emblem, hero circle drifts, cta pulse, cards, counter-num, cta-animate */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .hero h1 .word, .hero .lead, .hero-buttons, .sevs-phase, .stagger-in > *, .reveal-section { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .scramble-text { opacity: 1 !important; transform: none !important; }
  .gold-rule { transform: scaleX(1) !important; }
  .sevs-connector-fill { width: 100% !important; }
  .sevs-phase::before { opacity: 1 !important; transform: scale(1) !important; }
  .hero-logo-emblem, .page-hero .hero-logo-emblem { opacity: 1 !important; animation: none !important; }
  .hero::before, .hero::after { animation: none !important; }
  .cta-section::before { animation: none !important; }
  .cta-animate { opacity: 1 !important; transform: none !important; }
  .service-card, .card { transition: none !important; }
  .counter-num { opacity: 1 !important; }
  html { scroll-behavior: auto; }
  /* Effects 5 & 6: Disable body fade-in and CTA pulse for reduced motion */
  body { opacity: 1 !important; animation: none !important; }
  .cta-section .btn-primary { animation: none !important; box-shadow: 0 4px 20px rgba(196, 154, 60, .3) !important; }
}

/* --- Responsive: Tablet (1024px) --- */
@media (max-width: 1024px) {
  /* Grid adjustments for tablet */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .three-col { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: 1fr; }
  /* problem-grid stays 2-col — fine at this width */

  /* Hero split gap tightened */
  .hero-split { gap: 40px; }
  .page-hero .hero-split { gap: 40px; }
}

/* --- Responsive: Mobile (768px) --- */
@media (max-width: 768px) {
  .hero h1 { font-size: 30px; }
  .hero { padding: 64px 0 72px; }
  .hero-split { flex-direction: column; gap: 0; }
  .hero-logo-area { display: none; }
  .page-hero h1 { font-size: 28px; }
  .page-hero { padding: 48px 0 56px; }
  .page-hero .hero-split { flex-direction: column; gap: 0; }
  .page-hero .hero-logo-area { display: none; }
  .problem-grid,
  .diff-grid,
  .services-grid,
  .services-row2,
  .cred-grid,
  .two-col,
  .three-col { grid-template-columns: 1fr; }
  .services-row2 { max-width: 100%; }
  .sevs-phases { flex-direction: column; gap: 16px; }
  .sevs-phase::after { display: none; }
  .sevs-connector { display: none; }
  .sevs-phase::before { display: none; }
  .reveal-section { clip-path: none; opacity: 1; }
  .nav-hamburger { display: flex; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    padding: 8px 0 0 20px;
    min-width: 0;
    display: none;
    margin-top: 0;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a { padding: 8px 0; font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    padding: 16px 32px 24px;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--navy-deep); justify-content: center; align-items: center; gap: 32px; z-index: 105; }
  .nav-links.open a { font-size: 20px; }
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: 26px; }
  .content-block h2 { font-size: 24px; }
  .wrap { padding: 0 20px; }
}