/* ═══════════════════════════════════════════════════════════
   COMPONENTS.CSS — Umbrella Corp HQ
   All UI components: nav, hero, marquee, services, stats,
   work/case studies, gallery, process, testimonials, CTA,
   footer, cursor, WhatsApp btn, page heroes, services page,
   FAQ, about, contact, awards, breadcrumb, section utils
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════
   NAVIGATION
═══════════════════════════════ */

.nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         1000;
  padding:         28px var(--container-pad);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  transition:      all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation:       navFadeIn 0.6s ease forwards;
}

.nav--scrolled {
  background:    rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding:       16px var(--container-pad);
  border-bottom: 1px solid rgba(193, 18, 31, 0.15);
}

.nav-logo {
  display:         flex;
  align-items:     center;
  gap:             12px;
  text-decoration: none;
}

.nav-logo-mark {
  width:      36px;
  height:     36px;
  transition: transform 0.6s ease;
}

.nav-logo:hover .nav-logo-mark {
  transform: rotate(90deg);
}

.nav-logo-text {
  font-family:    var(--font-display);
  font-size:      22px;
  letter-spacing: 0.05em;
  color:          var(--ivory);
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         40px;
}

.nav-link {
  font-family:     var(--font-body);
  font-size:       14px;
  font-weight:     400;
  color:           rgba(240, 237, 232, 0.7);
  letter-spacing:  0.05em;
  text-decoration: none;
  position:        relative;
  transition:      color var(--transition-fast);
}

.nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     -4px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--corp-red);
  transition: width var(--transition-med);
}

.nav-link:hover {
  color: var(--ivory);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--ivory);
}

.nav-link.active::after {
  width: 100%;
}

.nav-cta {
  margin-left:     20px;
  padding:         10px 28px;
  background:      var(--corp-red);
  color:           var(--ivory);
  font-family:     var(--font-body);
  font-size:       13px;
  font-weight:     500;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-decoration: none;
  transition:      background var(--transition-fast);
}

.nav-cta:hover {
  background: var(--deep-red);
}

/* Hamburger */

.hamburger {
  display:    none;
  flex-direction: column;
  gap:        5px;
  cursor:     pointer;
  padding:    4px;
  z-index:    1001;
}

.hamburger span {
  display:          block;
  width:            24px;
  height:           1.5px;
  background:       var(--ivory);
  transition:       all 0.3s ease;
  transform-origin: center;
}

.hamburger.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}

.hamburger.is-open span:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}

.hamburger.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* Mobile Menu Overlay */

.mobile-menu {
  position:        fixed;
  inset:           0;
  background:      var(--void);
  z-index:         999;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.4s ease;
}

.mobile-menu.is-open {
  opacity:        1;
  pointer-events: all;
}

.mobile-menu .mobile-link {
  font-family:     var(--font-display);
  font-size:       56px;
  color:           var(--ivory);
  text-decoration: none;
  letter-spacing:  0.02em;
  transition:      color 0.2s;
}

.mobile-menu .mobile-link:hover {
  color: var(--corp-red);
}

.mobile-menu .mobile-cta {
  margin-top: 40px;
}

@media (max-width: 1024px) {
  .nav         { padding: 24px var(--container-pad-md); }
  .nav--scrolled { padding: 16px var(--container-pad-md); }
}

@media (max-width: 768px) {
  .nav         { padding: 20px var(--container-pad-sm); }
  .nav--scrolled { padding: 14px var(--container-pad-sm); }
  .nav-links   { display: none; }
  .hamburger   { display: flex; }
}

/* ═══════════════════════════════
   HERO SECTION
═══════════════════════════════ */

.hero {
  min-height:  100vh;
  position:    relative;
  display:     flex;
  align-items: center;
  overflow:    hidden;
  padding-top: var(--nav-height);
}

.hero-bg-graphic {
  position:       absolute;
  right:          -8%;
  bottom:         -15%;
  width:          65vw;
  max-width:      900px;
  opacity:        0.05;
  animation:      crosshairRotate 80s linear infinite;
  pointer-events: none;
  z-index:        0;
}

.hero-content {
  position:  relative;
  z-index:   1;
  max-width: 1000px;
}

.hero-heading {
  font-family:    var(--font-display);
  font-size:      clamp(72px, 11vw, 160px);
  line-height:    0.9;
  letter-spacing: 0.01em;
  margin-bottom:  0;
  overflow:       hidden;
}

.hero-line {
  display:  block;
  overflow: hidden;
}

.hero-line-2 {
  color: var(--corp-red);
}

.hero-line-3 {
  font-size: clamp(42px, 6.5vw, 96px);
  color:     var(--ivory);
  opacity:   0.7;
}

.hero-subtext {
  font-family: var(--font-body);
  font-size:   18px;
  color:       var(--steel);
  line-height: 1.7;
  max-width:   480px;
  margin-top:  40px;
  opacity:     0;
}

.hero-ctas {
  display:    flex;
  flex-wrap:  wrap;
  gap:        16px;
  margin-top: 48px;
  opacity:    0;
}

.scroll-indicator {
  position:        absolute;
  bottom:          48px;
  left:            50%;
  transform:       translateX(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  animation:       float 2.5s ease-in-out infinite;
  color:           var(--steel);
  font-size:       11px;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
}

.scroll-indicator svg {
  width:  20px;
  height: 20px;
  stroke: var(--corp-red);
}

@media (max-width: 768px) {
  .hero {
    padding: 120px var(--container-pad-sm) 80px;
  }

  .hero-subtext {
    font-size: 16px;
  }
}

/* ═══════════════════════════════
   MARQUEE STRIP
═══════════════════════════════ */

.marquee-strip {
  background:  var(--corp-red);
  padding:     18px 0;
  overflow:    hidden;
  flex-shrink: 0;
}

.marquee-track {
  display:     flex;
  white-space: nowrap;
  animation:   marqueeScroll 35s linear infinite;
  user-select: none;
}

.marquee-track--2 {
  animation-direction: reverse;
}

.marquee-item {
  font-family:    var(--font-display);
  font-size:      17px;
  color:          var(--ivory);
  padding:        0 20px;
  letter-spacing: 0.12em;
  display:        flex;
  align-items:    center;
  gap:            20px;
}

.marquee-item::after {
  content: '·';
  color:   rgba(240, 237, 232, 0.4);
}

/* ═══════════════════════════════
   SERVICES SECTION
═══════════════════════════════ */

.services-section {
  padding: 140px 0;
}

.services-section .section-header {
  margin-bottom: 80px;
}

.services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  border:                1px solid rgba(255, 255, 255, 0.06);
}

.service-card {
  padding:     52px 44px;
  border:      1px solid rgba(255, 255, 255, 0.06);
  background:  var(--void);
  position:    relative;
  overflow:    hidden;
  transition:  border-color var(--transition-med),
               transform    var(--transition-med),
               background   var(--transition-med);
  cursor:          pointer;
  text-decoration: none;
  display:         block;
  color:           var(--ivory);
}

.service-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(193, 18, 31, 0.04) 0%, transparent 60%);
  opacity:    0;
  transition: opacity var(--transition-med);
}

.service-card:hover {
  border-color: var(--corp-red);
  transform:    translateY(-6px);
  background:   var(--carbon);
}

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

.service-card__number {
  font-family:    var(--font-display);
  font-size:      13px;
  color:          var(--corp-red);
  letter-spacing: 0.25em;
  margin-bottom:  28px;
  display:        block;
}

.service-card__icon {
  margin-bottom: 24px;
}

.service-card__icon svg {
  width:  36px;
  height: 36px;
  stroke: var(--corp-red);
  fill:   none;
}

.service-card__title {
  font-family:    var(--font-display);
  font-size:      38px;
  letter-spacing: 0.02em;
  margin-bottom:  16px;
  line-height:    1;
}

.service-card__desc {
  font-size:   14px;
  color:       var(--steel);
  line-height: 1.75;
}

.service-card__arrow {
  margin-top:  36px;
  color:       var(--corp-red);
  font-size:   22px;
  transition:  transform var(--transition-med);
  display:     inline-block;
}

.service-card:hover .service-card__arrow {
  transform: translateX(10px);
}

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

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

  .service-card {
    padding: 40px 28px;
  }
}

/* ═══════════════════════════════
   STATS BAR
═══════════════════════════════ */

.stats-bar {
  background:    var(--carbon);
  padding:       100px 0;
  border-top:    1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   40px;
  text-align:            center;
}

.stats-item {
  padding:  0 20px;
  position: relative;
}

.stats-item:not(:last-child)::after {
  content:    '';
  position:   absolute;
  right:      0;
  top:        10%;
  height:     80%;
  width:      1px;
  background: rgba(255, 255, 255, 0.08);
}

.stats-number-wrap {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  gap:             2px;
}

.stats-number {
  font-family: var(--font-display);
  font-size:   clamp(56px, 7vw, 88px);
  color:       var(--corp-red);
  line-height: 1;
}

.stats-suffix {
  font-family:  var(--font-display);
  font-size:    clamp(28px, 3.5vw, 44px);
  color:        var(--corp-red);
  padding-top:  8px;
}

.stats-label {
  font-family:    var(--font-body);
  font-size:      13px;
  color:          var(--steel);
  margin-top:     16px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   60px 40px;
  }

  .stats-item::after {
    display: none;
  }
}

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

/* ═══════════════════════════════
   WORK / CASE STUDIES SECTION
═══════════════════════════════ */

.work-section {
  padding: 140px 0;
}

.work-section .section-header {
  margin-bottom: 80px;
}

.case-study-card {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  background:            var(--carbon);
  overflow:              hidden;
  margin-bottom:         32px;
  transition:            transform var(--transition-med);
  border:                1px solid rgba(255, 255, 255, 0.04);
}

.case-study-card:hover {
  transform: translateY(-4px);
}

.case-study-card.reverse {
  direction: rtl;
}

.case-study-card.reverse > * {
  direction: ltr;
}

.case-study-card__image {
  aspect-ratio: 4/3;
  background:   #111;
  position:     relative;
  overflow:     hidden;
}

.case-study-card__image .img-placeholder {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  aspect-ratio: unset;
}

.case-study-card__content {
  padding:        64px 56px;
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

.case-study-card__industry {
  font-size:      11px;
  color:          var(--corp-red);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom:  16px;
  font-family:    var(--font-body);
  font-weight:    500;
}

.case-study-card__client {
  font-family:   var(--font-display);
  font-size:     clamp(40px, 4vw, 64px);
  line-height:   0.95;
  margin-bottom: 24px;
}

.case-study-card__services {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 32px;
}

.case-study-card__result {
  font-size:    14px;
  color:        var(--steel);
  line-height:  1.7;
  padding-top:  24px;
  border-top:   1px solid rgba(255, 255, 255, 0.06);
  margin-top:   auto;
}

.case-study-card__result strong {
  color:       var(--corp-red);
  font-weight: 500;
}

.btn-view-case {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  color:           var(--ivory);
  font-size:       13px;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  margin-top:      32px;
  padding-bottom:  6px;
  border-bottom:   1px solid rgba(193, 18, 31, 0.5);
  transition:      border-color var(--transition-fast),
                   gap         var(--transition-fast);
  text-decoration: none;
  font-family:     var(--font-body);
  font-weight:     500;
}

.btn-view-case:hover {
  border-color: var(--corp-red);
  gap:          16px;
  color:        var(--corp-red);
}

@media (max-width: 1024px) {
  .case-study-card {
    grid-template-columns: 1fr;
  }

  .case-study-card.reverse {
    direction: ltr;
  }

  .case-study-card__content {
    padding: 48px 40px;
  }
}

@media (max-width: 768px) {
  .case-study-card__content {
    padding: 36px 24px;
  }
}

/* Case Study Full Page (work.html) cards */

.work-filter {
  display:       flex;
  flex-wrap:     wrap;
  gap:           12px;
  margin-bottom: 64px;
}

.filter-btn {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        10px 24px;
  background:     transparent;
  color:          var(--steel);
  border:         1px solid rgba(255, 255, 255, 0.1);
  cursor:         pointer;
  transition:     all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background:   var(--corp-red);
  color:        var(--ivory);
  border-color: var(--corp-red);
}

.cs-full-card {
  background:    var(--carbon);
  border:        1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 24px;
  overflow:      hidden;
}

.cs-full-card__hero {
  aspect-ratio: 16/6;
  width:        100%;
  position:     relative;
}

.cs-full-card__body {
  padding: 56px 64px;
}

.cs-full-card__header {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   40px;
  align-items:           start;
  margin-bottom:         48px;
}

.cs-full-card__client-name {
  font-family: var(--font-display);
  font-size:   clamp(40px, 5vw, 72px);
}

.cs-full-card__industry-badge {
  font-size:      11px;
  color:          var(--corp-red);
  border:         1px solid rgba(193, 18, 31, 0.3);
  padding:        8px 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space:    nowrap;
  font-family:    var(--font-body);
  font-weight:    500;
}

.cs-sections {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   48px;
  margin-bottom:         48px;
}

.cs-section-label {
  font-size:      11px;
  color:          var(--corp-red);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom:  12px;
  font-family:    var(--font-body);
  font-weight:    500;
}

.cs-section-text {
  font-size:   15px;
  color:       var(--steel);
  line-height: 1.8;
}

.cs-metrics {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            rgba(255, 255, 255, 0.04);
  margin:                48px 0;
}

.cs-metric {
  background:  var(--void);
  padding:     36px 32px;
  text-align:  center;
}

.cs-metric__number {
  font-family: var(--font-display);
  font-size:   56px;
  color:       var(--corp-red);
  line-height: 1;
}

.cs-metric__label {
  font-size:      12px;
  color:          var(--steel);
  margin-top:     8px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family:    var(--font-body);
}

.cs-testimonial {
  background:   var(--void);
  padding:      40px 48px;
  border-left:  3px solid var(--corp-red);
  margin:       48px 0;
}

.cs-testimonial__quote {
  font-size:     17px;
  color:         var(--ivory);
  line-height:   1.8;
  font-style:    italic;
  margin-bottom: 20px;
}

.cs-testimonial__author {
  font-family: var(--font-display);
  font-size:   20px;
}

.cs-testimonial__role {
  font-size:  13px;
  color:      var(--steel);
  margin-top: 4px;
}

/* Expand button */

.btn-expand {
  display:        flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--font-body);
  font-size:      13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--corp-red);
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        0;
  margin-top:     24px;
  transition:     gap var(--transition-fast);
}

.btn-expand:hover {
  gap: 18px;
}

.cs-expanded-content {
  display:       none;
  padding-top:   48px;
  border-top:    1px solid rgba(255, 255, 255, 0.06);
  margin-top:    48px;
}

.cs-expanded-content.is-open {
  display: block;
}

.cs-expanded-content h3 {
  font-family:   var(--font-display);
  font-size:     32px;
  margin-bottom: 16px;
  margin-top:    40px;
}

.cs-expanded-content h3:first-child {
  margin-top: 0;
}

.cs-expanded-content p {
  font-size:     15px;
  color:         var(--steel);
  line-height:   1.85;
  margin-bottom: 16px;
}

.cs-expanded-content ul {
  padding-left:  0;
  margin-bottom: 20px;
}

.cs-expanded-content ul li {
  font-size:   15px;
  color:       var(--steel);
  line-height: 1.75;
  padding:     6px 0 6px 20px;
  position:    relative;
}

.cs-expanded-content ul li::before {
  content:  '→';
  position: absolute;
  left:     0;
  color:    var(--corp-red);
}

@media (max-width: 1024px) {
  .cs-full-card__body {
    padding: 40px 40px;
  }

  .cs-sections {
    grid-template-columns: 1fr;
    gap:                   32px;
  }
}

@media (max-width: 768px) {
  .cs-full-card__body {
    padding: 32px 24px;
  }

  .cs-metrics {
    grid-template-columns: 1fr;
  }

  .cs-full-card__header {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════
   CLIENT GALLERY
═══════════════════════════════ */

.gallery-section {
  padding:       80px 0;
  overflow:      hidden;
  border-top:    1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gallery-section .section-header {
  text-align:    center;
  margin-bottom: 60px;
}

.gallery-row {
  display:       flex;
  white-space:   nowrap;
  margin-bottom: 20px;
}

.gallery-row:nth-child(odd)  .gallery-track { animation: marqueeScroll 25s linear infinite; }
.gallery-row:nth-child(even) .gallery-track { animation: marqueeScroll 25s linear infinite reverse; }

.gallery-track {
  display: flex;
}

.gallery-logo-item {
  width:           180px;
  height:          72px;
  background:      var(--carbon);
  border:          1px solid rgba(255, 255, 255, 0.05);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 10px;
  flex-shrink:     0;
  color:           var(--steel);
  font-size:       11px;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  font-family:     var(--font-body);
  transition:      border-color var(--transition-fast);
}

.gallery-logo-item:hover {
  border-color: rgba(193, 18, 31, 0.3);
}

/* ═══════════════════════════════
   PROCESS SECTION
═══════════════════════════════ */

.process-section {
  padding:    140px 0;
  background: var(--carbon);
}

.process-section .section-header {
  margin-bottom: 100px;
}

.process-timeline {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  position:              relative;
}

.process-line-track {
  position:   absolute;
  top:        40px;
  left:       12.5%;
  right:      12.5%;
  height:     1px;
  background: rgba(255, 255, 255, 0.08);
}

.process-line-progress {
  position:   absolute;
  top:        40px;
  left:       12.5%;
  height:     1px;
  background: var(--corp-red);
  width:      0;
  transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-line-progress.is-drawn {
  width: 75%;
}

.process-step {
  padding:    0 40px;
  position:   relative;
  text-align: center;
}

.process-step__dot {
  width:        16px;
  height:       16px;
  background:   var(--void);
  border:       2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin:       32px auto 40px;
  position:     relative;
  z-index:      1;
  transition:   border-color 0.4s, background 0.4s;
}

.process-step.is-active .process-step__dot {
  border-color: var(--corp-red);
  background:   var(--corp-red);
}

.process-step__number {
  font-family:    var(--font-display);
  font-size:      13px;
  color:          var(--corp-red);
  letter-spacing: 0.2em;
  display:        block;
  margin-bottom:  16px;
  position:       absolute;
  top:            0;
  left:           50%;
  transform:      translateX(-50%);
}

.process-step__title {
  font-family:   var(--font-display);
  font-size:     32px;
  margin-bottom: 16px;
  line-height:   1;
}

.process-step__desc {
  font-size:   14px;
  color:       var(--steel);
  line-height: 1.75;
}

@media (max-width: 1024px) {
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    row-gap:               60px;
  }

  .process-line-track,
  .process-line-progress {
    display: none;
  }
}

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

  .process-step {
    padding:               0;
    text-align:            left;
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   24px;
  }

  .process-step__dot {
    margin: 4px 0 0;
  }

  .process-step__number {
    position:  static;
    transform: none;
  }
}

/* ═══════════════════════════════
   TESTIMONIALS SECTION
═══════════════════════════════ */

.testimonials-section {
  padding: 140px 0;
}

.testimonials-section .section-header {
  margin-bottom: 80px;
}

.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

.testimonial-card {
  background:  var(--carbon);
  padding:     48px 44px;
  border:      1px solid rgba(255, 255, 255, 0.04);
  position:    relative;
  transition:  border-color var(--transition-med);
}

.testimonial-card:hover {
  border-color: rgba(193, 18, 31, 0.3);
}

.testimonial-quote-mark {
  font-family:   var(--font-display);
  font-size:     100px;
  color:         var(--corp-red);
  line-height:   0.6;
  display:       block;
  margin-bottom: 24px;
  opacity:       0.5;
}

.testimonial-text {
  font-size:     15px;
  line-height:   1.85;
  color:         var(--ivory);
  margin-bottom: 40px;
}

.testimonial-divider {
  width:         40px;
  height:        1px;
  background:    var(--corp-red);
  margin-bottom: 24px;
}

.testimonial-author {
  font-family: var(--font-display);
  font-size:   22px;
}

.testimonial-role {
  font-size:  13px;
  color:      var(--steel);
  margin-top: 6px;
}

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

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

  .testimonial-card {
    padding: 36px 28px;
  }
}

/* ═══════════════════════════════
   CTA SECTION
═══════════════════════════════ */

.cta-section {
  background: var(--deep-red);
  padding:    140px 0;
  text-align: center;
  position:   relative;
  overflow:   hidden;
}

.cta-section::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-section .container {
  position: relative;
  z-index:  1;
}

.cta-heading {
  font-family:   var(--font-display);
  font-size:     clamp(60px, 9vw, 130px);
  color:         var(--ivory);
  line-height:   0.9;
  margin-bottom: 28px;
}

.cta-subtext {
  font-size:   18px;
  color:       rgba(240, 237, 232, 0.65);
  max-width:   500px;
  margin:      0 auto 56px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .cta-section {
    padding: 100px 0;
  }
}

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */

.footer {
  background:  #0d0d0d;
  padding:     96px 0 0;
  border-top:  1px solid rgba(255, 255, 255, 0.04);
}

.footer-grid {
  display:               grid;
  grid-template-columns: 1.4fr 0.8fr 1.2fr;
  gap:                   80px;
  padding-bottom:        80px;
  border-bottom:         1px solid rgba(255, 255, 255, 0.04);
}

.footer-logo-wrap .nav-logo {
  margin-bottom:  16px;
  pointer-events: none;
}

.footer-tagline {
  font-size:   14px;
  color:       var(--steel);
  line-height: 1.6;
  max-width:   280px;
  margin-bottom: 32px;
}

.footer-social {
  display: flex;
  gap:     12px;
}

.footer-social a {
  width:      40px;
  height:     40px;
  border:     1px solid rgba(255, 255, 255, 0.1);
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast),
              background   var(--transition-fast);
}

.footer-social a:hover {
  border-color: var(--corp-red);
  background:   rgba(193, 18, 31, 0.1);
}

.footer-social svg {
  width:      16px;
  height:     16px;
  fill:       var(--steel);
  transition: fill var(--transition-fast);
}

.footer-social a:hover svg {
  fill: var(--corp-red);
}

.footer-nav-heading,
.footer-contact-heading {
  font-family:   var(--font-display);
  font-size:     22px;
  margin-bottom: 28px;
}

.footer-nav-list {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.footer-nav-list a {
  font-size:       14px;
  color:           var(--steel);
  text-decoration: none;
  transition:      color var(--transition-fast);
  display:         flex;
  align-items:     center;
  gap:             8px;
}

.footer-nav-list a::before {
  content:    '';
  width:      0;
  height:     1px;
  background: var(--corp-red);
  transition: width var(--transition-fast);
}

.footer-nav-list a:hover {
  color: var(--ivory);
}

.footer-nav-list a:hover::before {
  width: 16px;
}

.footer-contact-item {
  display:       flex;
  gap:           12px;
  align-items:   flex-start;
  margin-bottom: 18px;
  font-size:     14px;
  color:         var(--steel);
  line-height:   1.6;
}

.footer-contact-item svg {
  width:      16px;
  height:     16px;
  stroke:     var(--corp-red);
  fill:       none;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item a {
  color:           var(--steel);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer-contact-item a:hover {
  color: var(--corp-red);
}

.footer-bottom {
  padding:         24px 0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             12px;
}

.footer-copyright {
  font-size: 12px;
  color:     rgba(85, 85, 85, 0.7);
}

.footer-seo-text {
  font-size: 11px;
  color:     rgba(85, 85, 85, 0.5);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   60px;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 60px 0 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap:                   48px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align:     center;
  }
}

/* ═══════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════ */

/* Hide native cursor — scoped to actual pointer devices only */
@media (pointer: fine) {
  html, body, a, button, label, input, textarea, select,
  [role="button"], * { cursor: none !important; }
}

/* Both elements: fixed, off-screen by default, JS moves via transform */
.cursor-dot,
.cursor-ring {
  position:       fixed;
  top:            0;
  left:           0;
  transform:      translate(-999px, -999px);
  pointer-events: none;
  will-change:    transform;
  z-index:        99999;
}

/* ── Dot ── */
.cursor-dot {
  width:         10px;
  height:        10px;
  background:    var(--corp-red);
  border-radius: 50%;
  transition:    opacity 0.15s ease,
                 transform 0.05s ease;
}

.cursor-dot.is-hovering {
  opacity: 0;
  transform: translate(-999px, -999px) scale(0) !important;
}

/* ── Ring ── */
.cursor-ring {
  width:         40px;
  height:        40px;
  border:        2px solid var(--corp-red);
  border-radius: 50%;
  opacity:       0.65;
  transition:    width        0.35s cubic-bezier(0.16, 1, 0.3, 1),
                 height       0.35s cubic-bezier(0.16, 1, 0.3, 1),
                 opacity      0.2s  ease,
                 border-color 0.2s  ease,
                 border-width 0.2s  ease;
}

.cursor-ring.is-hovering {
  width:         64px;
  height:        64px;
  opacity:       1;
  border-color:  var(--corp-red);
  border-width:  1.5px;
}

.cursor-ring.is-clicking {
  width:        24px;
  height:       24px;
  opacity:      1;
  border-width: 2px;
  transition:   width 0.08s ease, height 0.08s ease;
}

/* On coarse/touch — hide elements, restore default cursor */
@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring { display: none !important; }
  * { cursor: auto !important; }
}

/* ═══════════════════════════════
   WHATSAPP BUTTON
═══════════════════════════════ */

.whatsapp-btn {
  position:        fixed;
  bottom:          32px;
  right:           32px;
  width:           58px;
  height:          58px;
  background:      #25d366;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         998;
  box-shadow:      0 4px 24px rgba(37, 211, 102, 0.35);
  animation:       bounceWA 6s ease-in-out 3s infinite;
  text-decoration: none;
  transition:      transform    var(--transition-fast),
                   background   var(--transition-fast);
}

.whatsapp-btn:hover {
  background: #1da851;
  transform:  scale(1.12);
  animation:  none;
}

.whatsapp-btn svg {
  width:  28px;
  height: 28px;
  fill:   white;
}

/* ═══════════════════════════════
   PAGE HEROES (inner pages)
═══════════════════════════════ */

.page-hero {
  min-height:    55vh;
  display:       flex;
  align-items:   flex-end;
  padding-bottom: 80px;
  position:      relative;
  overflow:      hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.page-hero::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--corp-red), transparent);
}

.page-hero .container {
  position: relative;
  z-index:  1;
}

.page-hero__eyebrow {
  font-size:      11px;
  color:          var(--corp-red);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family:    var(--font-body);
  font-weight:    500;
  margin-bottom:  24px;
  display:        block;
}

.page-hero__heading {
  font-family: var(--font-display);
  font-size:   clamp(60px, 9vw, 130px);
  line-height: 0.92;
  max-width:   900px;
}

.page-hero__subtext {
  font-size:   17px;
  color:       var(--steel);
  line-height: 1.7;
  max-width:   560px;
  margin-top:  32px;
}

.page-hero-bg {
  position: absolute;
  right:    0;
  top:      0;
  bottom:   0;
  width:    40%;
  opacity:  0.04;
}

/* ═══════════════════════════════
   SERVICES PAGE (services.html)
═══════════════════════════════ */

.service-detail {
  padding:       120px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.service-detail:nth-child(even) {
  background: var(--carbon);
}

.service-detail__grid {
  display:               grid;
  grid-template-columns: 1fr 1.6fr;
  gap:                   100px;
  align-items:           start;
}

.service-detail:nth-child(even) .service-detail__grid {
  direction: rtl;
}

.service-detail:nth-child(even) .service-detail__grid > * {
  direction: ltr;
}

.service-detail__icon-wrap {
  width:           72px;
  height:          72px;
  border:          1px solid rgba(193, 18, 31, 0.3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   32px;
}

.service-detail__icon-wrap svg {
  width:  36px;
  height: 36px;
  stroke: var(--corp-red);
  fill:   none;
}

.service-detail__number {
  font-family:    var(--font-display);
  font-size:      13px;
  color:          var(--corp-red);
  letter-spacing: 0.25em;
  margin-bottom:  16px;
  display:        block;
}

.service-detail__title {
  font-family:   var(--font-display);
  font-size:     clamp(40px, 5vw, 72px);
  margin-bottom: 32px;
  line-height:   0.95;
}

.service-detail__desc {
  font-size:     15px;
  color:         var(--steel);
  line-height:   1.85;
  margin-bottom: 16px;
}

.service-detail__deliverables {
  margin-top: 40px;
}

.service-detail__deliverables-heading {
  font-family:   var(--font-display);
  font-size:     22px;
  margin-bottom: 20px;
}

.deliverables-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.deliverable-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   14px;
  color:       var(--steel);
}

.deliverable-item::before {
  content:      '';
  width:        6px;
  height:       6px;
  background:   var(--corp-red);
  border-radius: 50%;
  flex-shrink:  0;
}

.service-detail__pricing {
  margin-top:  40px;
  padding:     24px 32px;
  border:      1px solid rgba(193, 18, 31, 0.2);
  background:  rgba(193, 18, 31, 0.04);
}

.service-pricing-label {
  font-size:      11px;
  color:          var(--corp-red);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom:  8px;
  font-family:    var(--font-body);
  font-weight:    500;
}

.service-pricing-value {
  font-family: var(--font-display);
  font-size:   28px;
}

@media (max-width: 1024px) {
  .service-detail__grid {
    grid-template-columns: 1fr;
    gap:                   48px;
  }

  .service-detail:nth-child(even) .service-detail__grid {
    direction: ltr;
  }
}

/* ═══════════════════════════════
   FAQ ACCORDION
═══════════════════════════════ */

.faq-section {
  padding:    120px 0;
  background: var(--carbon);
}

.faq-section .section-header {
  margin-bottom: 64px;
}

.faq-list {
  max-width: 800px;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.faq-question {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  padding:         28px 0;
  cursor:          pointer;
  font-size:       17px;
  font-weight:     400;
  color:           var(--ivory);
  transition:      color var(--transition-fast);
  font-family:     var(--font-body);
}

.faq-question:hover {
  color: var(--corp-red);
}

.faq-icon {
  width:           28px;
  height:          28px;
  border:          1px solid rgba(255, 255, 255, 0.15);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      all var(--transition-med);
}

.faq-icon svg {
  width:      14px;
  height:     14px;
  stroke:     var(--ivory);
  transition: transform var(--transition-med);
}

.faq-item.is-open .faq-icon {
  background:   var(--corp-red);
  border-color: var(--corp-red);
}

.faq-item.is-open .faq-icon svg {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
  padding:     0 0 28px;
  font-size:   15px;
  color:       var(--steel);
  line-height: 1.85;
}

.faq-item.is-open .faq-answer {
  max-height: 500px;
}

/* ═══════════════════════════════
   ABOUT PAGE
═══════════════════════════════ */

.about-story {
  padding: 120px 0;
}

.about-story__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   100px;
  align-items:           center;
}

.about-story__text p {
  font-size:     16px;
  color:         var(--steel);
  line-height:   1.9;
  margin-bottom: 20px;
}

.mission-vision {
  padding:    120px 0;
  background: var(--carbon);
}

.mv-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2px;
  background:            rgba(255, 255, 255, 0.04);
}

.mv-card {
  background: var(--void);
  padding:    64px 56px;
}

.mv-card__label {
  font-size:      11px;
  color:          var(--corp-red);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom:  24px;
  font-family:    var(--font-body);
  font-weight:    500;
}

.mv-card__heading {
  font-family:   var(--font-display);
  font-size:     clamp(36px, 4vw, 56px);
  margin-bottom: 24px;
}

.mv-card__text {
  font-size:   15px;
  color:       var(--steel);
  line-height: 1.85;
}

.team-section {
  padding: 120px 0;
}

.team-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
  margin-top:            64px;
}

.team-card {
  background:  var(--carbon);
  overflow:    hidden;
  border:      1px solid rgba(255, 255, 255, 0.04);
  transition:  border-color var(--transition-med);
}

.team-card:hover {
  border-color: rgba(193, 18, 31, 0.3);
}

.team-photo {
  aspect-ratio: 3/4;
  background:   #141414;
  position:     relative;
  overflow:     hidden;
}

.team-photo .img-placeholder {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  aspect-ratio: unset;
}

.team-info {
  padding: 28px 24px 24px;
}

.team-name {
  font-family: var(--font-display);
  font-size:   28px;
}

.team-role {
  font-size:  13px;
  color:      var(--steel);
  margin-top: 6px;
}

.team-linkedin {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  margin-top:      16px;
  font-size:       12px;
  color:           var(--corp-red);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-decoration: none;
  transition:      opacity var(--transition-fast);
}

.team-linkedin:hover {
  opacity: 0.7;
}

.values-section {
  padding:    120px 0;
  background: var(--carbon);
}

.values-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
  margin-top:            64px;
}

.value-card {
  padding:    40px 32px;
  border:     1px solid rgba(255, 255, 255, 0.04);
  background: var(--void);
}

.value-card__icon {
  width:         48px;
  height:        48px;
  margin-bottom: 24px;
}

.value-card__icon svg {
  width:  100%;
  height: 100%;
  stroke: var(--corp-red);
  fill:   none;
}

.value-card__title {
  font-family:   var(--font-display);
  font-size:     28px;
  margin-bottom: 16px;
}

.value-card__text {
  font-size:   14px;
  color:       var(--steel);
  line-height: 1.75;
}

.comparison-section {
  padding: 120px 0;
}

.comparison-table {
  width:           100%;
  border-collapse: collapse;
  margin-top:      64px;
}

.comparison-table th {
  font-family: var(--font-display);
  font-size:   24px;
  padding:     20px 32px;
  text-align:  left;
}

.comparison-table th:nth-child(2) {
  background: var(--corp-red);
  color:      var(--ivory);
  text-align: center;
}

.comparison-table th:nth-child(3) {
  background: var(--carbon);
  color:      var(--steel);
  text-align: center;
}

.comparison-table td {
  padding:       18px 32px;
  font-size:     14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.comparison-table td:nth-child(2) {
  text-align: center;
  background: rgba(193, 18, 31, 0.06);
}

.comparison-table td:nth-child(3) {
  text-align: center;
  background: rgba(30, 30, 30, 0.5);
  color:      var(--steel);
}

.check {
  color:     var(--corp-red);
  font-size: 18px;
}

.cross {
  color:     var(--steel);
  font-size: 16px;
}

@media (max-width: 1024px) {
  .team-grid        { grid-template-columns: repeat(2, 1fr); }
  .values-grid      { grid-template-columns: repeat(2, 1fr); }
  .about-story__grid { grid-template-columns: 1fr; gap: 48px; }
  .mv-grid          { grid-template-columns: 1fr; }
}

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

  .comparison-table {
    font-size: 12px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 14px 16px;
  }
}

/* ═══════════════════════════════
   CONTACT PAGE
═══════════════════════════════ */

.contact-section {
  padding: 120px 0;
}

.contact-grid {
  display:               grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:                   100px;
  align-items:           start;
}

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

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
}

.form-label {
  display:        block;
  font-size:      12px;
  color:          var(--steel);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom:  10px;
  font-family:    var(--font-body);
  font-weight:    500;
}

.form-input,
.form-select,
.form-textarea {
  width:           100%;
  background:      var(--carbon);
  border:          1px solid rgba(255, 255, 255, 0.08);
  color:           var(--ivory);
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     300;
  padding:         14px 20px;
  outline:         none;
  transition:      border-color var(--transition-fast),
                   background   var(--transition-fast);
  -webkit-appearance: none;
  appearance:      none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--corp-red);
  background:   rgba(30, 30, 30, 0.8);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: #e74c3c;
}

.form-error {
  font-size:  12px;
  color:      #e74c3c;
  margin-top: 6px;
  display:    none;
}

.form-error.visible {
  display: block;
}

.form-select {
  background-image:    url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23555555' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 16px center;
  padding-right:       44px;
  cursor:              pointer;
}

.form-select option {
  background: var(--carbon);
}

.form-textarea {
  resize:     vertical;
  min-height: 140px;
  line-height: 1.7;
}

.form-submit-wrap {
  margin-top: 32px;
}

.form-success {
  display:    none;
  padding:    24px 32px;
  background: rgba(39, 174, 96, 0.1);
  border:     1px solid rgba(39, 174, 96, 0.3);
}

.form-success.visible {
  display: block;
}

.form-success p {
  font-size: 15px;
  color:     #27ae60;
}

.contact-info {
  position: sticky;
  top:      120px;
}

.contact-info-heading {
  font-family:   var(--font-display);
  font-size:     40px;
  margin-bottom: 48px;
}

.contact-info-item {
  display:       flex;
  gap:           20px;
  align-items:   flex-start;
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.contact-info-item:last-of-type {
  border-bottom: none;
}

.contact-info-icon {
  width:           44px;
  height:          44px;
  border:          1px solid rgba(193, 18, 31, 0.3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.contact-info-icon svg {
  width:  20px;
  height: 20px;
  stroke: var(--corp-red);
  fill:   none;
}

.contact-info-label {
  font-size:      11px;
  color:          var(--steel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom:  6px;
  font-family:    var(--font-body);
  font-weight:    500;
}

.contact-info-value {
  font-size:   15px;
  color:       var(--ivory);
  line-height: 1.6;
}

.contact-info-value a {
  color:           var(--ivory);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.contact-info-value a:hover {
  color: var(--corp-red);
}

.contact-response-note {
  font-size:   13px;
  color:       var(--steel);
  margin-top:  32px;
  padding:     20px 24px;
  border:      1px solid rgba(255, 255, 255, 0.06);
  background:  var(--carbon);
}

/* Contact column aliases (HTML uses -col suffix) */
.contact-form-col {
  /* Direct child of .contact-grid – no extra styles needed */
}

.contact-info-col {
  position: sticky;
  top:      120px;
}

@media (max-width: 1024px) {
  .contact-info-col {
    position: static;
  }
}

/* Inline field validation error */
.form-error-msg {
  display:    block;
  font-size:  12px;
  color:      var(--corp-red);
  margin-top: 6px;
  min-height: 18px;
  font-family: var(--font-body);
}

.map-placeholder {
  margin-top:      40px;
  height:          240px;
  background:      var(--carbon);
  border:          1px solid rgba(255, 255, 255, 0.06);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap:                   60px;
  }

  .contact-info {
    position: static;
  }
}

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

/* ═══════════════════════════════
   AWARDS SECTION
═══════════════════════════════ */

.awards-section {
  padding:    80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.awards-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
  margin-top:            64px;
}

.award-card {
  padding:    32px;
  border:     1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  background: var(--carbon);
}

.award-year {
  font-family: var(--font-display);
  font-size:   40px;
  color:       var(--corp-red);
}

.award-name {
  font-size:  14px;
  color:      var(--ivory);
  margin-top: 8px;
}

.award-org {
  font-size:  12px;
  color:      var(--steel);
  margin-top: 4px;
}

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

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

/* ═══════════════════════════════
   BREADCRUMB
═══════════════════════════════ */

.breadcrumb {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-size:      12px;
  color:          var(--steel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  32px;
}

.breadcrumb a {
  color:           var(--steel);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--corp-red);
}

.breadcrumb-sep {
  color: rgba(85, 85, 85, 0.4);
}

/* ═══════════════════════════════
   SECTION PADDING UTILITIES
═══════════════════════════════ */

.section-pad {
  padding: 140px 0;
}

.section-pad-sm {
  padding: 80px 0;
}

/* ═══════════════════════════════
   IMAGE PLACEHOLDER (dev only)
═══════════════════════════════ */

.img-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(255, 255, 255, 0.03);
  border:          1px dashed rgba(255, 255, 255, 0.1);
  color:           rgba(255, 255, 255, 0.2);
  font-family:     var(--font-body);
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  text-align:      center;
  padding:         24px;
}

/* ═══════════════════════════════
   INNER HERO (services, work, about, contact)
═══════════════════════════════ */

.inner-hero {
  padding:          160px 0 100px;
  position:         relative;
  overflow:         hidden;
  background:       var(--void);
  border-bottom:    1px solid rgba(255, 255, 255, 0.04);
}

.inner-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(193,18,31,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.inner-hero-heading {
  font-family:    var(--font-display);
  font-size:      clamp(52px, 8vw, 110px);
  line-height:    0.92;
  color:          var(--ivory);
  letter-spacing: -0.01em;
  margin-bottom:  32px;
}

.inner-hero-subtext {
  font-size:    17px;
  line-height:  1.7;
  color:        var(--steel);
  max-width:    600px;
}

/* ═══════════════════════════════
   FILTER BAR (work.html)
═══════════════════════════════ */

.filter-bar {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.filter-tab {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        9px 20px;
  background:     transparent;
  color:          var(--steel);
  border:         1px solid rgba(255, 255, 255, 0.1);
  cursor:         pointer;
  transition:     all var(--transition-fast);
  white-space:    nowrap;
}

.filter-tab:hover {
  color:        var(--ivory);
  border-color: rgba(255, 255, 255, 0.3);
}

.filter-tab.active {
  background:   var(--corp-red);
  color:        var(--ivory);
  border-color: var(--corp-red);
}

/* ═══════════════════════════════
   CASE STUDY FULL CARD (work.html)
   (top-level wrapper & hero image zone)
═══════════════════════════════ */

.case-study-full-card {
  background:    var(--carbon);
  border:        1px solid rgba(255, 255, 255, 0.05);
  overflow:      hidden;
  margin-bottom: 32px;
}

.case-study-hero-img {
  width:            100%;
  aspect-ratio:     21 / 8;
  background:       var(--void);
  overflow:         hidden;
  border-bottom:    1px solid rgba(255, 255, 255, 0.04);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.case-study-hero-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ═══════════════════════════════
   CS INDUSTRY BADGE & SERVICE TAGS
═══════════════════════════════ */

.cs-industry-badge {
  font-family:     var(--font-body);
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  color:           var(--corp-red);
  border:          1px solid rgba(193,18,31,0.35);
  padding:         6px 14px;
  white-space:     nowrap;
  align-self:      flex-start;
}

.tag {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--steel);
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid rgba(255, 255, 255, 0.08);
  padding:        5px 12px;
}

/* ═══════════════════════════════
   EXPAND TOGGLE & EXPANDED BODY
═══════════════════════════════ */

.expand-toggle {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--corp-red);
  background:     transparent;
  border:         none;
  cursor:         pointer;
  padding:        0;
  margin-top:     32px;
  transition:     opacity var(--transition-fast);
}

.expand-toggle:hover {
  opacity: 0.75;
}

.case-study-expanded {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-expanded.open {
  max-height: 3000px;
}

.case-study-expanded h3 {
  font-family:    var(--font-display);
  font-size:      22px;
  color:          var(--ivory);
  letter-spacing: 0.03em;
  margin:         36px 0 12px;
}

.case-study-expanded p {
  font-size:   15px;
  line-height: 1.8;
  color:       var(--steel);
  margin:      0 0 16px;
}

.case-study-expanded ul {
  margin:      0 0 20px;
  padding-left: 20px;
  list-style:  none;
}

.case-study-expanded ul li {
  font-size:     14px;
  line-height:   1.7;
  color:         var(--steel);
  padding-left:  16px;
  position:      relative;
  margin-bottom: 6px;
}

.case-study-expanded ul li::before {
  content:    '—';
  position:   absolute;
  left:       0;
  color:      var(--corp-red);
  font-size:  10px;
  top:        3px;
}

/* ═══════════════════════════════
   RESPONSIVE — INNER PAGES
═══════════════════════════════ */

@media (max-width: 768px) {
  .inner-hero {
    padding: 120px 0 72px;
  }

  .inner-hero-heading {
    font-size: 52px;
  }

  .inner-hero-subtext {
    font-size: 15px;
  }

  .filter-bar {
    gap: 6px;
  }

  .filter-tab {
    font-size:  11px;
    padding:    8px 14px;
  }

  .case-study-hero-img {
    aspect-ratio: 16 / 9;
  }
}