/* ---- UNIFIED STYLESHEET ---- */

/* ---- Preloader Safety (disabled and removed) ---- */

/* ========================================================================== 
   MOBILE MENU — Professional Slide-In Drawer with Brand Colors
   ========================================================================== */

/* ========================================================================== 
   HERO VIDEO SLIDER — Ken Burns Effect with Dynamic Content
   ========================================================================== */

.hero-video {
  position: relative;
  height: 100vh;
  min-height: 550px;
  overflow: hidden;
  background: var(--color-navy-900);
}

.hero-video__track {
  position: absolute;
  inset: 0;
}

.hero-video__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.hero-video__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.hero-video__bg-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: kenBurnsLoop 5s ease-in-out infinite;
}

@keyframes kenBurnsLoop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.hero-video__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 27, 43, 0.92) 0%, rgba(11, 27, 43, 0.65) 45%, rgba(11, 27, 43, 0.3) 100%),
              linear-gradient(180deg, rgba(11, 27, 43, 0.25) 0%, transparent 50%, rgba(11, 27, 43, 0.4) 100%);
  z-index: 2;
}

.hero-video__content {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 5rem) var(--space-lg);
}

@media (max-width: 768px) {
  .hero-video__content {
    padding: 2rem 1.5rem;
    align-items: center;
    justify-content: center;
    padding-top: 0;
  }
}

.hero-video__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .hero-video__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .hero-video__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.hero-video__left {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

@media (max-width: 768px) {
  .hero-video__left {
    align-items: center;
    text-align: center;
  }
}

.hero-video__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: rgba(255, 199, 8, 0.25);
  border: 2.5px solid var(--color-gold);
  padding: 0.8rem 1.6rem;
  border-radius: 50px;
  width: fit-content;
  animation: fadeInUp 0.8s ease-out 0.2s both;
  box-shadow: 0 6px 20px rgba(255, 199, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
}

@media (max-width: 768px) {
  .hero-video__eyebrow {
    font-size: 0.6rem;
    padding: 0.6rem 1.2rem;
    border-width: 2px;
    margin: 0 auto;
  }
}

.hero-video__headline-track {
  position: relative;
  height: auto;
}

.hero-video__headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  word-spacing: normal;
  color: #fff;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s ease-out;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(20px);
}

@media (max-width: 768px) {
  .hero-video__headline {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    line-height: 1.2;
    text-align: center;
  }
}

.hero-video__headline.is-active {
  opacity: 1;
  visibility: visible;
  position: static;
  transform: translateY(0);
}

.hero-video__headline .highlight {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}

.hero-video__accent-line {
  width: 70px;
  height: 4px;
  background: var(--color-gold);
  border-radius: 2px;
  animation: fadeInUp 0.8s ease-out 0.35s both;
}

@media (max-width: 768px) {
  .hero-video__accent-line {
    width: 50px;
    height: 3px;
    margin: 0 auto;
  }
}

.hero-video__desc-track {
  position: relative;
  height: auto;
}

.hero-video__desc {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 500px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out 0.1s, visibility 0.5s ease-in-out 0.1s, transform 0.5s ease-out 0.1s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 500px;
  transform: translateY(20px);
}

@media (max-width: 768px) {
  .hero-video__desc {
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }
}

.hero-video__desc.is-active {
  opacity: 1;
  visibility: visible;
  position: static;
  transform: translateY(0);
}

.hero-video__desc .highlight {
  color: var(--color-gold);
  font-weight: 700;
}

.hero-video__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

@media (max-width: 768px) {
  .hero-video__actions {
    gap: 0.75rem;
    flex-direction: column;
    width: 100%;
  }
}

.hero-video__cta {
  padding: 0.9rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: capitalize;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .hero-video__cta {
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
    width: 100%;
    justify-content: center;
  }
}

.hero-video__cta--primary {
  background: var(--color-gold);
  color: var(--color-navy-900);
  box-shadow: 0 8px 20px rgba(255, 199, 8, 0.32);
}

.hero-video__cta--primary:hover {
  background: var(--color-gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 199, 8, 0.42);
}

.hero-video__cta--secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.hero-video__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.hero-video__right {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

@media (max-width: 1024px) {
  .hero-video__right {
    order: -1;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .hero-video__right {
    display: none;
  }
}

.hero-video__featured-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 199, 8, 0.15);
}

.hero-video__featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video__dots {
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  display: flex;
  gap: 0.8rem;
  z-index: 10;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

@media (max-width: 768px) {
  .hero-video__dots {
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.2rem;
  }
}

.hero-video__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.hero-video__dot:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.hero-video__dot.is-active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(255, 199, 8, 0.6);
  width: 14px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .hero-video {
    min-height: 550px;
    height: 90vh;
  }

  .hero-video__inner {
    grid-template-columns: 1fr;
  }

  .hero-video__headline {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
  }

  .hero-video__actions {
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    max-width: 70%;
  }

  .hero-video__cta {
    width: 100%;
    justify-content: center;
  }

  .hero-video__cta--secondary {
    display: none;
  }

  .hero-video__featured-image {
    aspect-ratio: 16 / 9;
    width: 90vw;
    max-width: 100%;
  }
}



.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  transition: all var(--transition-fast);
  order: -1;
}

/* Hide on desktop (min-width 992px), show on mobile (max-width 991px) */
@media (min-width: 992px) {
  .nav-toggle {
    display: none;
  }
}

@media (max-width: 991px) {
  .nav-toggle {
    display: flex !important;
  }
}

.nav-toggle__bars {
  position: relative;
  width: 24px;
  height: 18px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #FFD700;
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 8px; }
.nav-toggle__bars span:nth-child(3) { top: 16px; }

/* Yellow bars always on mobile */
.site-header--solid .nav-toggle__bars span,
.site-header.is-scrolled .nav-toggle__bars span {
  background: #FFD700;
}

.nav-open .nav-toggle__bars span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.nav-open .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle__bars span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* Mobile Drawer Menu */
@media (max-width: 991px) {
  .site-header {
    background: white !important;
    height: 60px;
  }
  
  .site-header.is-scrolled,
  .site-header--solid,
  .site-header.mega-open {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .site-header__inner {
    padding: 0 1rem;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .nav {
    display: none !important;
  }
  
  .site-header__logo {
    display: flex !important;
    order: 2;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }
  
  .site-header__logo img {
    height: 80px;
    width: auto;
  }
  
  .site-header__contact-btn {
    display: flex !important;
    order: 1;
    color: #0b1f33;
  }
  
  .site-header__contact-btn:hover {
    color: #197556;
  }
  
  .site-header__cta {
    display: none !important;
  }
  
  /* CRITICAL: Hamburger always visible on mobile */
  .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 3;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }
  
  .nav-toggle__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }
  
  .nav-toggle__bars span {
    display: block !important;
    width: 24px;
    height: 3px;
    background: #FFD700 !important;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  .site-header.is-scrolled .nav-toggle__bars span,
  .site-header--solid .nav-toggle__bars span,
  .site-header.mega-open .nav-toggle__bars span {
    background: #FFD700 !important;
  }
}

/* ==========================================================================
   WHY CHOOSE AOT 
   ========================================================================== */

.why-choose { position: relative; isolation: isolate;
  overflow: clip; background: var(--color-teal-tint, #E6F8FB);padding-block: clamp(2.5rem, 6vw, 4rem);
}
/* Scoped glow — absolute to the section, not fixed to the viewport */
.why-choose__glow {
  position: absolute;inset: 0;z-index: 0;pointer-events: none;background:
    radial-gradient(60% 70% at 50% calc(20% - var(--wc-progress, 0) * 10%), rgba(255,199,8,0.10) 0%, transparent 70%),
    radial-gradient(45% 55% at 25% calc(60% + var(--wc-progress, 0) * 10%), rgba(41,127,62,0.06) 0%, transparent 70%);
  transition: background 0.2s linear;
}
.why-choose__container {position: relative;z-index: 1;width: 100%;max-width: var(--container-max);margin-inline: auto;padding-inline: var(--space-md);
}
@media (min-width: 768px) { .why-choose__container { padding-inline: var(--space-lg); } }

/* ---- Heading ---- */
.why-choose__heading { overflow: hidden; margin-bottom: clamp(2rem, 6vw, 3.5rem); }

.why-choose__eyebrow { display: inline-flex;align-items: center;gap: var(--space-xs);font-size: var(--fs-eyebrow);font-weight: 700;
  letter-spacing: 0.14em;text-transform: uppercase;color: #F2A93B;opacity: 0;transform: translateY(14px);transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.why-choose__eyebrow::before {content: '';display: inline-block;width: 28px; height: 3px;background: var(--color-gold);border-radius: var(--radius-pill);
  transform: scaleX(0);transform-origin: left center;transition: transform 0.6s var(--ease-out) 0.2s;
}
.why-choose.is-visible .why-choose__eyebrow { opacity: 1; transform: translateY(0); }
.why-choose.is-visible .why-choose__eyebrow::before { transform: scaleX(1); }

.why-choose__title-mask { overflow: hidden; margin-top: var(--space-xs); }

.why-choose__title {font-family: var(--font-display);font-weight: 800;line-height: 0.98; letter-spacing: -0.01em;color: var(--color-navy-900);font-size: clamp(1.8rem, 7vw, 3.5rem);
  text-transform: uppercase;transform: translateY(115%);opacity: 0;transition: transform 0.85s var(--ease-out), opacity 0.85s var(--ease-out);
}
.why-choose__title span { color: var(--color-gold); }
.why-choose.is-visible .why-choose__title { transform: translateY(0); opacity: 1; }

.why-choose__stage {position: relative;display: grid;grid-template-columns: 1fr;gap: 2rem;margin-bottom: 4rem;
}

.why-choose__image-card {position: relative;order: 1;aspect-ratio: 4 / 5;border-radius: var(--radius-xl);overflow: hidden;box-shadow: 0 40px 80px rgba(0,0,0,0.4);background: var(--color-navy-800);border: 1px solid rgba(255,255,255,0.1);
  opacity: 0;transform: translate3d(0, 0, 0);transition: opacity 0.8s var(--ease-out);
}
.why-choose.is-visible .why-choose__image-card { opacity: 1; }

.why-choose.is-visible .why-choose__image-card { opacity: 1; transform: translateY(0) scale(1); }

.why-choose__slide-img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0;transform: scale(1);transition: opacity 0.9s var(--ease-out);
}
.why-choose__slide-img.is-active { opacity: 1; z-index: 1; animation: kenBurns 8s var(--ease-out) forwards; }

.why-choose__image-card::after {content: '';position: absolute;inset: 0;background: linear-gradient(180deg, rgba(11,27,43,0) 40%, rgba(11,27,43,0.55) 100%);z-index: 2;pointer-events: none;
}

.why-choose__image-tag {position: absolute;left: var(--space-md);bottom: var(--space-md);z-index: 3;display: inline-flex;align-items: center;gap: var(--space-xs);padding: 0.4rem 0.85rem;border-radius: var(--radius-pill);background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);color: var(--color-white);font-size: var(--fs-small);font-weight: 700;opacity: 0;transform: translateY(8px);transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.why-choose__image-tag.is-active { opacity: 1; transform: translateY(0); }

/* Text card — parallaxes the OPPOSITE direction to the image for depth */
.why-choose__text-card {position: relative;order: 2;z-index: 4;background: rgba(255,255,255,0.95);backdrop-filter: blur(10px);border-radius: var(--radius-xl);
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);padding: clamp(2rem, 6vw, 3rem);margin-inline: auto;margin-bottom: 4rem;max-width: 500px;opacity: 0;transform: translateY(50px) scale(0.94);transition: opacity 0.8s var(--ease-out) 0.3s, transform 0.8s var(--ease-out) 0.3s;border: 1px solid rgba(255,255,255,0.5);
}
.why-choose.is-visible .why-choose__text-card {opacity: 1;transform: translateY(0) scale(1);translate: 0 calc((var(--wc-progress, 0.5) - 0.5) * 32px);
}

.why-choose__stat-row {display: flex;align-items: baseline;gap: var(--space-sm);border-bottom: 1px solid var(--color-border);padding-bottom: var(--space-md);margin-bottom: var(--space-md);
}

.why-choose__stat-number {
  font-family: var(--font-display);font-weight: 800; font-size: clamp(2.75rem, 8vw, 3.5rem);line-height: 1;color: var(--color-gold-dark);min-width: 3.6ch;
}

.why-choose__stat-track,
.why-choose__copy-track { position: relative; display: grid; }

.why-choose__stat-track > *,
.why-choose__copy-track > * {grid-area: 1 / 1;opacity: 0;transform: translateY(10px);transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);pointer-events: none;
}
.why-choose__stat-track > .is-active,
.why-choose__copy-track > .is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.why-choose__stat-label {font-size: var(--fs-small);font-weight: 700;text-transform: uppercase;letter-spacing: 0.08em;color: var(--color-ink-soft);
}

.why-choose__copy-title {font-family: var(--font-display);font-size: var(--fs-h4);color: var(--color-navy-900);margin-bottom: var(--space-xs);
}

.why-choose__copy-desc {font-size: 0.95rem;color: var(--color-ink-soft);line-height: 1.65;margin-bottom: var(--space-lg);min-height: 4.6em;
}

.why-choose__cta {display: inline-flex;align-items: center;gap: var(--space-xs);background: var(--color-gold);color: var(--color-navy-900);font-weight: 700;
  font-size: var(--fs-small);padding: 0.85rem 1.5rem;border-radius: var(--radius-pill);box-shadow: var(--shadow-gold);transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.why-choose__cta:hover { background: var(--color-gold-dark); transform: translateY(-2px); }
.why-choose__cta svg { transition: transform var(--transition-fast); }
.why-choose__cta:hover svg { transform: translateX(3px); }

.why-choose__nav { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }

.why-choose__dot {position: relative;width: 2.25rem; height: 4px;border-radius: var(--radius-pill);background: var(--color-border);overflow: hidden;
}
.why-choose__dot-fill { position: absolute; inset: 0; width: 0%; background: var(--color-teal); border-radius: var(--radius-pill); }
.why-choose__dot.is-active .why-choose__dot-fill { animation: whyChooseFill var(--slide-duration, 6s) linear forwards; }
.why-choose__dot.is-complete .why-choose__dot-fill { width: 100%; animation: none; }

@keyframes whyChooseFill { from { width: 0%; } to { width: 100%; } }

@keyframes kenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (max-width: 767px) {
  .why-choose__nav {
    display: none;
  }
}

@media (min-width: 768px) {
  .why-choose__stage {grid-template-columns: minmax(280px, 420px) 1fr;align-items: center;column-gap: var(--space-xl);
  }
  .why-choose__image-card { order: 2; aspect-ratio: 16 / 11; }
  .why-choose__text-card { order: 1; margin-inline: 0; margin-right: -3.25rem; padding: var(--space-xl); max-width: 460px; }
}

@media (min-width: 1100px) {
  .why-choose__stage { grid-template-columns: minmax(320px, 460px) 1fr; }
  .why-choose__image-card { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {.why-choose__glow,.why-choose__eyebrow, .why-choose__eyebrow::before,.why-choose__title, .why-choose__image-card, .why-choose__text-card,.why-choose__image-tag, .why-choose__slide-img, .why-choose__stat-track > *, .why-choose__copy-track > *,.why-choose__dot-fill {
    transition-duration: 0.01ms !important;animation: none !important;transform: none !important;translate: none !important;
  }
}

/* ==========================================================================
   GALLERY PAGE — AOT CONSULTING
   1. FILTER BAR
   ========================================================================== */
.filter-bar{ display: flex;gap: .6rem; overflow-x: auto; padding-bottom: .35rem;margin-bottom: clamp(1.75rem, 4vw, 2.5rem);scrollbar-width: none;-webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar{ display: none; }.filter-bar{ justify-content: flex-start; }
@media (min-width: 760px){ .filter-bar{ justify-content: center; } }

.filter-pill{flex: 0 0 auto;font-family: 'Poppins', sans-serif;font-weight: 600;font-size: .8rem;letter-spacing: .01em;color: var(--navy-900);background: #fff;border: 1px solid var(--line);border-radius: 999px;padding: .55rem 1.15rem;cursor: pointer;transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.filter-pill:hover{transform: translateY(-2px);border-color: var(--gold-500);box-shadow: 0 10px 20px -14px rgba(10,21,38,.4);
}
.filter-pill.is-active{background: var(--navy-900);border-color: var(--navy-900);color: #fff;box-shadow: 0 12px 22px -12px rgba(19,37,66,.55);
}

/* ==========================================================================
   2. GALLERY GRID
   ========================================================================== */
.gallery-grid{display: grid;gap: 1.1rem;grid-template-columns: 1fr;transition: opacity .25s var(--ease);
}
@media (min-width: 620px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap: 1.35rem; } }

.gallery-grid.is-swapping{ opacity: 0; }

/* ---- card ---- */
.gcard{position: relative;aspect-ratio: 4 / 3;border-radius: 16px;overflow: hidden;background: var(--navy-900);box-shadow: 0 14px 28px -20px rgba(10,21,38,.5);
  opacity: 0;transform: translateY(24px);transition: opacity .55s var(--ease), transform .55s var(--ease), box-shadow var(--dur-m) var(--ease);
}
.gcard.is-visible{ opacity: 1; transform: translateY(0); }.gcard:hover{ box-shadow: 0 30px 46px -20px rgba(10,21,38,.55); }

.gcard__trigger{all: unset;position: absolute;inset: 0;cursor: pointer;display: block;
}

.gcard__trigger img{
  position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;transform: scale(1.03);transition: transform .8s var(--ease), filter .5s var(--ease);
}
.gcard:hover .gcard__trigger img{transform: scale(1.14) rotate(0.3deg);
}
.gcard__scrim{
  position: absolute;inset: 0;background: linear-gradient(180deg, rgba(10,21,38,0) 35%, rgba(10,21,38,.55) 72%, rgba(10,21,38,.92) 100%);transition: background var(--dur-m) var(--ease);
}
.gcard:hover .gcard__scrim{background: linear-gradient(180deg, rgba(19,37,66,.15) 0%, rgba(10,21,38,.62) 45%, rgba(10,21,38,.95) 100%);
}
.gcard__tag{position: absolute;top: .85rem;left: .85rem;font-family: 'Poppins', sans-serif; font-weight: 700;font-size: .62rem;letter-spacing: .1em;text-transform: uppercase;color: #fff; background: rgba(192,90,55,.9);padding: .3rem .65rem;border-radius: 999px; opacity: 0;transform: translateY(-6px);transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.gcard:hover .gcard__tag{ opacity: 1; transform: translateY(0); }

.gcard__icon{position: absolute;
  top: .85rem;right: .85rem;width: 34px;height: 34px;border-radius: 50%;display: grid;place-items: center;background: rgba(255,255,255,.14);backdrop-filter: blur(6px);color: #fff;opacity: 0;transform: scale(.6) rotate(-20deg);transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.gcard:hover .gcard__icon{ opacity: 1;transform: scale(1) rotate(0deg);
}
.gcard:hover .gcard__icon:hover{ background: var(--ember-500); }

.gcard__body{position: absolute;left: 0; right: 0; bottom: 0;padding: 1.1rem 1.1rem 1.15rem;color: #fff;text-align: left;
}
.gcard__title{display: block;font-family: 'Poppins', sans-serif;font-weight: 700;font-size: 1rem;line-height: 1.3;transform: translateY(0);transition: transform var(--dur-m) var(--ease);
}
.gcard:hover .gcard__title{ transform: translateY(-2px); }

.gcard__desc{display: block;font-family: 'Lato', sans-serif;font-size: .84rem;line-height: 1.55;color: rgba(255,255,255,.85);max-height: 0;opacity: 0;overflow: hidden;transform: translateY(6px);transition: max-height var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), margin-top var(--dur-m) var(--ease);
}
.gcard:hover .gcard__desc{max-height: 4.5em;opacity: 1;transform: translateY(0);margin-top: .4rem;
}
@media (hover: none){
  /* touch devices: keep description visible, skip hover-only reveal */
  .gcard__desc{ max-height: 4.5em; opacity: 1; transform: none; margin-top: .4rem; }
  .gcard__icon, .gcard__tag{ opacity: 1; transform: none; }
  .gcard__scrim{ background: linear-gradient(180deg, rgba(10,21,38,0) 25%, rgba(10,21,38,.55) 65%, rgba(10,21,38,.92) 100%); }
}



/* ==========================================================================
   3. PAGINATION
   ========================================================================== */
.gallery-pagination{
  display: flex;align-items: center;justify-content: center;gap: .4rem;margin-top: clamp(2rem, 5vw, 3rem);font-family: 'Poppins', sans-serif;font-size: .85rem;
}
.gpage-btn{min-width: 38px;height: 38px;padding-inline: .5rem;border-radius: 50%;border: 1px solid var(--line);background: #fff;color: var(--navy-900);font-weight: 600;cursor: pointer;transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.gpage-btn:hover{ transform: translateY(-2px); border-color: var(--gold-500); }
.gpage-btn.is-active{background: var(--navy-900); border-color: var(--navy-900);color: #fff;
}
.gpage-btn--next{border-radius: 999px;width: auto;padding-inline: 1rem;display: inline-flex;align-items: center;gap: .35rem;
}
.gpage-dots{ color: var(--ink-600); padding-inline: .25rem; }

/* ==========================================================================
   4. LIGHTBOX
   ========================================================================== */
.lightbox{
  position: fixed;
  inset: 0;z-index: 200;display: flex;align-items: center;justify-content: center;padding: 1.25rem;background: rgba(8,15,27,.82);backdrop-filter: blur(6px);opacity: 0;visibility: hidden;transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open{ opacity: 1; visibility: visible; }

.lightbox__panel{ position: relative;width: min(920px, 100%);max-height: 88vh; background: var(--navy-950);border-radius: 18px;overflow: hidden;display: grid;grid-template-rows: auto auto;transform: translateY(24px) scale(.97);transition: transform .4s var(--ease);box-shadow: 0 40px 80px -30px rgba(0,0,0,.65);
}
.lightbox.is-open .lightbox__panel{ transform: translateY(0) scale(1); }

@media (min-width: 760px){
  .lightbox__panel{ grid-template-rows: 1fr; grid-template-columns: 1.4fr 1fr; max-height: 78vh; }
}

.lightbox__media{position: relative;min-height: 220px;max-height: 50vh;overflow: hidden;
}
@media (min-width: 760px){ .lightbox__media{ max-height: 78vh; height: 100%; } }
.lightbox__media img{width: 100%;height: 100%;object-fit: cover;display: block;
}

.lightbox__info{padding: 1.5rem 1.6rem 1.75rem;color: #fff;overflow-y: auto;
}
.lightbox__tag{display: inline-block;font-family: 'Poppins', sans-serif;font-weight: 700;font-size: .65rem;letter-spacing: .1em;text-transform: uppercase;color: var(--ember-500);background: rgba(192,90,55,.15);padding: .3rem .6rem;border-radius: 999px;margin-bottom: .85rem;
}
.lightbox__title{font-family: 'Poppins', sans-serif;font-weight: 800;font-size: 1.35rem;line-height: 1.3;margin-bottom: .75rem;
}
.lightbox__desc{font-family: 'Lato', sans-serif;font-size: .95rem;line-height: 1.7;color: rgba(255,255,255,.78);
}

.lightbox__close{position: absolute;top: .85rem;right: .85rem;width: 38px;height: 38px;border-radius: 50%;border: none; background: rgba(255,255,255,.12);color: #fff;display: grid;place-items: center;cursor: pointer;z-index: 2;transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.lightbox__close:hover{ background: var(--ember-500); transform: rotate(90deg); }

.lightbox__nav{position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;border-radius: 50%;border: none;background: rgba(255,255,255,.14);color: #fff;display: grid;place-items: center;cursor: pointer;z-index: 2;transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.lightbox__nav:hover{ background: var(--ember-500); }.lightbox__nav--prev{ left: .75rem; }.lightbox__nav--next{ right: .75rem; }

body.has-lightbox{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){.gcard{ opacity: 1; transform: none; transition: none; }.gcard__trigger img{ transition: none; }.lightbox, .lightbox__panel{ transition: none; }
}

/* ==========================================================================
   PAGE: About Us / Our Team
   ========================================================================== */

.company-overview {display: grid;gap: var(--space-lg);}

@media (min-width: 900px) {.company-overview {grid-template-columns: 1fr 1fr;align-items: center; }}

.company-overview__img {border-radius: var(--radius-md);overflow: hidden;box-shadow: var(--shadow-md);}

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

.stat-strip {display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); padding-block: var(--space-lg);border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);}

@media (min-width: 768px) {.stat-strip { grid-template-columns: repeat(4, 1fr); }}

.team-slider {display: flex;gap: var(--space-md); overflow-x: auto;scroll-snap-type: x mandatory;padding-bottom: var(--space-sm);scrollbar-width: none;
}
.team-slider::-webkit-scrollbar { display: none; }
.team-slider__item {scroll-snap-align: start;flex: 0 0 62%;}
@media (min-width: 640px) { .team-slider__item { flex-basis: 32%; } }
@media (min-width: 992px) { .team-slider__item { flex-basis: 23%; } }
.dept-grid {display: grid;gap: var(--space-md);grid-template-columns: 1fr;}
@media (min-width: 768px) {
  .dept-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .dept-grid { grid-template-columns: repeat(5, 1fr); }
}

.dept-card {
  border-radius: var(--radius-md);overflow: hidden;border: 1px solid var(--color-border);transition: transform var(--transition-fast), box-shadow var(--transition-fast);}

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

.dept-card__img {height: 130px;overflow: hidden;}
.dept-card__img img {height: 100%;object-fit: cover;}

.dept-card__body {padding: var(--space-md);}

.dept-card__icon {color: var(--color-teal);margin-bottom: var(--space-xs);}

.dept-card__title {font-size: 0.85rem;text-transform: uppercase;letter-spacing: 0.03em;margin-bottom: var(--space-xs);}

.dept-card__list li {font-size: 0.8rem;color: var(--color-ink-soft);padding-block: 1px;}

.action-gallery {display: grid;gap: var(--space-sm); grid-template-columns: repeat(2, 1fr);}
@media (min-width: 768px) {.action-gallery { grid-template-columns: repeat(5, 1fr); }
}
.action-gallery img {border-radius: var(--radius-sm);
height: 160px;width: 100%;object-fit: cover;transition: transform var(--transition-fast);}
.action-gallery img:hover {transform: scale(1.04);
}

.cert-strip { display: flex;flex-wrap: wrap;
gap: var(--space-lg);justify-content: center}.cert-item {display: flex;align-items: center;gap: var(--space-sm);font-size: 0.85rem;font-weight: 700;color: var(--color-navy-900);
}.cert-item svg { color: var(--color-teal); }




/* ---------------------------------------------------------------------
   2. TRUST / IMPACT STRIP
   --------------------------------------------------------------------- */
/* ==========================================================================
   2. IMPACT STATISTICS — Modern, Compact, Teal Background
   ========================================================================== */

.impact-stats {
  background: linear-gradient(135deg, #1cb4d0 0%, #0d9db5 100%);
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem);
  overflow: hidden;
  position: relative;
}

.impact-stats::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transform: translate(40%, -20%);
  pointer-events: none;
}

.impact-stats::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: translate(-30%, 30%);
  pointer-events: none;
}

.impact-stats__container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.impact-stats__header {
  text-align: left;
  margin-bottom: 2rem;
}

.impact-stats__label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.impact-stats__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.impact-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.impact-stats__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.impact-stats__item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.impact-stats__number {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  min-width: 30px;
  margin-top: 0.2rem;
}

.impact-stats__content {
  flex: 1;
}

.impact-stats__value {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #FFD700;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.impact-stats__text {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.5rem 0 0 0;
  line-height: 1.3;
}

.impact-stats__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.impact-stats__tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  transition: all 0.2s ease;
}

.impact-stats__tag:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .impact-stats {
    padding: 2rem 1.25rem;
  }

  .impact-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .impact-stats__item {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }

  .impact-stats__number {
    align-self: center;
    margin-top: 0;
  }

  .impact-stats__value {
    font-size: clamp(1.6rem, 3.5vw, 2rem);
  }

  .impact-stats__text {
    font-size: 0.8rem;
  }
}

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

  .impact-stats__tags {
    justify-content: center;
  }

  .impact-stats__title {
    font-size: 1.2rem;
  }
}


/* ==========================================================================
   SERVICES PAGES — motion & visual layer
   ========================================================================== */





/* ==========================================================================
   2. SCROLL REVEAL — bottom-up by default
   ========================================================================== */
[data-reveal]{opacity: 0;transform: translateY(42px);transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
[data-reveal="left"]{ transform: translate(-36px, 24px); }
[data-reveal="right"]{ transform: translate(36px, 24px); }
[data-reveal].is-visible{ opacity: 1; transform: translate(0,0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* hero content: gentle load-in, independent of scroll */
.page-hero__eyebrow,
.page-hero__title,
.page-hero__desc {
  opacity: 0;
  transform: translateY(22px);
  animation: heroRise 1.2s ease-out forwards;
}

.page-hero__eyebrow { animation-delay: 0.2s; }
.page-hero__title { animation-delay: 0.4s; }
.page-hero__desc { animation-delay: 0.6s; }

@keyframes heroRise { 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

.page-hero__slide{ will-change: transform; }


.service-nav-back{transition: color var(--dur-s) var(--ease)}.service-nav-back svg{ transition: transform var(--dur-s) var(--ease); }.service-nav-back:hover svg{ transform: translateX(-4px); }

.service-detail__list li{transition: transform var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.service-detail__list li:hover{transform: translateX(6px);color: var(--navy-900);
}
.service-detail__list li::before{transition: transform var(--dur-s) var(--ease), border-radius var(--dur-s) var(--ease);
}
.service-detail__list li:hover::before{transform: scale(1.4);border-radius: 50%;
}

.detail-media{ position: relative;border-radius: 18px;overflow: hidden;box-shadow: 0 30px 55px -26px rgba(10,21,38,.45);cursor: zoom-in;
}
.detail-media::after{content: "";position: absolute;inset: 14px -14px -14px 14px;border: 2px solid var(--gold-500);border-radius: 18px;z-index: -1;
}
.detail-media img{display: block;width: 100%;height: 100%;object-fit: cover;transition: transform var(--dur-l) var(--ease);
}
.detail-media:hover img{ transform: scale(1.07); }

.detail-media__zoom{position: absolute;right: .9rem;bottom: .9rem;width: 40px;height: 40px;border-radius: 50%;display: grid;place-items: center;background: rgba(10,21,38,.55);backdrop-filter: blur(6px);color: #fff;opacity: 0;transform: scale(.7);transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.detail-media:hover .detail-media__zoom{ opacity: 1; transform: scale(1); }.detail-media:hover .detail-media__zoom:hover{ background: var(--ember-500); }

/* ==========================================================================
   4. PROJECT REPORTS — new section
   ========================================================================== */
.reports-band{
  background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
}.reports-band .section-heading .eyebrow{ color: var(--gold-300); }.reports-band .section-heading__title{ color: #fff; }.reports-band .section-heading p{ color: rgba(255,255,255,.7); }

.reports-grid{display: grid;gap: 1.1rem;grid-template-columns: 1fr;}
@media (min-width: 640px){ .reports-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .reports-grid{ grid-template-columns: repeat(3, 1fr); } }

.report-card{display: flex;flex-direction: column;background: rgba(255,255,255,.04);border: 1px solid rgba(255,255,255,.1);border-radius: 16px;padding: 1.5rem;transition: transform var(--dur-m) var(--ease), background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);}
.report-card:hover{transform: translateY(-8px);background: rgba(255,255,255,.07);border-color: rgba(233,205,142,.35);box-shadow: 0 26px 44px -22px rgba(0,0,0,.55);}

.report-card__top{display: flex;align-items: center;gap: .9rem; margin-bottom: 1rem;}
.report-card__icon{flex: 0 0 auto; width: 46px;
  height: 46px;border-radius: 12px;display: grid;place-items: center;background: linear-gradient(160deg, var(--ember-500), #a3452c);color: #fff;transition: transform var(--dur-s) var(--ease);}
.report-card:hover .report-card__icon{ transform: rotate(-6deg) scale(1.08); }
.report-card__tag{font-family: 'Poppins', sans-serif;font-weight: 700;font-size: .65rem;letter-spacing: .1em;text-transform: uppercase;color: var(--gold-300);
}
.report-card__meta{font-family: 'Lato', sans-serif;font-size: .78rem;color: rgba(255,255,255,.55);margin-top: .15rem;}

.report-card__title{font-family: 'Poppins', sans-serif;font-weight: 700;font-size: 1.02rem;color: #fff;line-height: 1.4;margin-bottom: .5rem;}
.report-card__desc{font-family: 'Lato', sans-serif;font-size: .9rem;line-height: 1.6;color: rgba(255,255,255,.68);flex-grow: 1;}

.report-card__actions{ display: flex;gap: .6rem; margin-top: 1.25rem;
}
.report-btn{flex: 1;display: inline-flex;align-items: center;justify-content: center;gap: .4rem;font-family: 'Poppins', sans-serif;font-weight: 600;font-size: .82rem;padding: .65rem .75rem;border-radius: 999px;text-decoration: none;cursor: pointer;border: 1px solid rgba(255,255,255,.2);background: transparent;color: #fff;transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.report-btn:hover{ transform: translateY(-2px); border-color: var(--gold-500); }
.report-btn--fill{background: linear-gradient(120deg, var(--gold-500), var(--ember-500));border-color: transparent;color: #16202a;
}
.report-btn--fill:hover{ box-shadow: 0 14px 26px -14px rgba(233,205,142,.6); }

/* ---- PDF viewer modal ---- */
.report-modal{position: fixed;
  inset: 0;z-index: 300;display: flex;align-items: center;justify-content: center;padding: 1rem;background: rgba(8,15,27,.85);backdrop-filter: blur(6px);opacity: 0;visibility: hidden;transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.report-modal.is-open{ opacity: 1; visibility: visible; }
.report-modal__panel{width: min(920px, 100%);height: min(86vh, 1000px);background: #1b232f;border-radius: 14px;overflow: hidden;position: relative;transform: translateY(20px) scale(.97);transition: transform .35s var(--ease);box-shadow: 0 40px 80px -28px rgba(0,0,0,.65);
}
.report-modal.is-open .report-modal__panel{ transform: translateY(0) scale(1); }
.report-modal__bar{display: flex;align-items: center;justify-content: space-between;padding: .85rem 1.1rem;background: var(--navy-950);color: #fff;font-family: 'Poppins', sans-serif; font-size: .85rem;font-weight: 600;
}
.report-modal__close{width: 32px; height: 32px;border-radius: 50%;border: none;background: rgba(255,255,255,.12); color: #fff;display: grid; place-items: center; cursor: pointer;transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.report-modal__close:hover{ background: var(--ember-500); transform: rotate(90deg); }
.report-modal__frame{width: 100%;height: calc(100% - 50px);border: none;background: #525659;}body.has-report-modal{ overflow: hidden; }

/* ==========================================================================
   5. RELATED SERVICES — modern cards + mobile slider
   ========================================================================== */
.service-card{border-radius: 16px;overflow: hidden; background: #fff;border: 1px solid var(--line);box-shadow: 0 14px 28px -22px rgba(10,21,38,.4);transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.service-card:hover{transform: translateY(-8px);box-shadow: 0 30px 48px -22px rgba(10,21,38,.45);
}
.service-card__media{aspect-ratio: 16 / 10;overflow: hidden;
}
.service-card__media img{
  width: 100%;height: 100%;object-fit: cover;transition: transform var(--dur-l) var(--ease);
}
.service-card:hover .service-card__media img{ transform: scale(1.1); }.service-card__body{ padding: 1.25rem 1.35rem 1.5rem; }.service-card__title{ transition: color var(--dur-s) var(--ease); }.service-card:hover .service-card__title{ color: var(--ember-500); }.service-card__link{display: inline-flex;align-items: center;gap: .4rem;
}.service-card__link svg{ transition: transform var(--dur-s) var(--ease); }.service-card:hover .service-card__link svg{ transform: translateX(5px); }

/* mobile-first: horizontal snap slider, becomes a grid at tablet+ */
.related-services{display: flex;gap: 1rem;overflow-x: auto;scroll-snap-type: x mandatory;padding-bottom: .5rem;scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.related-services::-webkit-scrollbar{ display: none; }
.related-services .service-card{flex: 0 0 84%;scroll-snap-align: start;}
@media (min-width: 480px){
  .related-services .service-card{ flex-basis: 62%; }
}
@media (min-width: 768px){.related-services{display: grid;grid-template-columns: repeat(3, 1fr);overflow-x: visible;}
  .related-services .service-card{ flex-basis: auto; }}

.related-services-hint{font-family: 'Lato', sans-serif; font-size: .78rem;color: var(--ink-600);text-align: center;margin-top: .5rem;
}@media (min-width: 768px){ .related-services-hint{ display: none; } }

/* ==========================================================================
   1. DESIGN TOKENS & VARIABLES
   ========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --color-gold: #FFC708;--color-gold-dark: #E0A800;--color-teal: #1CB4D0;--color-teal-light: #30BDDC; --color-teal-deep: #15B4D7; --color-green: #297F3E;

  /* ---- Neutrals ---- */--color-navy-900: #0B1B2B;--color-navy-800: #12293D;--color-ink: #16202A;--color-ink-soft: #4A5A68;--color-white: #FFFFFF;--color-off-white: #F5F8FA;--color-border: #E2E8ED;

  /* ---- Semantic aliases ---- */--color-primary: var(--color-gold);--color-primary-hover: var(--color-gold-dark);--color-secondary: var(--color-teal);--color-accent: var(--color-green);--color-surface-dark: var(--color-navy-900);

  /* ---- Typography ---- */--font-display: 'Poppins', 'Lato', sans-serif;--font-body: 'Lato', sans-serif;
--fs-h1: clamp(2rem, 5vw, 3.5rem);--fs-h2: clamp(1.6rem, 3.5vw, 2.5rem);--fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);--fs-h4: clamp(1.05rem, 1.8vw, 1.25rem);--fs-body: 1rem;--fs-small: 0.875rem;--fs-eyebrow: 1.1rem;

  /* ---- Spacing scale ---- */--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1.25rem; --space-lg: 2rem;--space-xl: 3.25rem;--space-2xl: 5rem;

  /* ---- Layout ---- */--container-max: 1240px;--header-height: 85px;--header-height-mobile: 60px;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 28px;--radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(11, 27, 43, 0.08);--shadow-md: 0 8px 24px rgba(11, 27, 43, 0.12);--shadow-lg: 0 20px 48px rgba(11, 27, 43, 0.18);--shadow-gold: 0 8px 20px rgba(255, 199, 8, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);--transition-fast: 0.2s var(--ease-out);--transition-med: 0.4s var(--ease-out);--transition-slow: 0.7s var(--ease-out);

  /* ---- Z-index scale ---- */
  --z-header: 1000;--z-mega-menu: 1010;--z-modal: 1100; --z-toast: 1200;

  /* ---- Footer tokens ---- */--footer-navy-900: #0b1f33;--footer-amber-500: #f2a93b;--footer-amber-600: #d98f22;--footer-ink-100: #ffffff;--footer-ink-300: rgba(255, 255, 255, 0.82);--footer-ink-500: rgba(255, 255, 255, 0.6);
--footer-line: rgba(255, 255, 255, 0.14);--footer-container: 1180px;--footer-radius-pill: 999px;
}

/* ==========================================================================
   2. RESET & NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {box-sizing: border-box;margin: 0;padding: 0;
}

html {scroll-behavior: smooth;-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;
  }
}

body {min-height: 100vh;font-family: var(--font-body);color: var(--color-ink);background: var(--color-white);line-height: 1.6;overflow-x: hidden;
}

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

button,input,textarea,select {font: inherit;color: inherit;}

button {cursor: pointer;background: none;border: none;
}

a {color: inherit;text-decoration: none;
}ul,
ol {list-style: none;}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible {outline: 3px solid var(--color-teal);outline-offset: 3px;border-radius: 4px;
}

.u-visually-hidden { position: absolute; width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
   h1, h2, h3, h4, h5 {font-family: var(--font-display);font-weight: 700;line-height: 1.15;color: var(--color-navy-900);}

h1 { font-size: var(--fs-h1); font-weight: 800; }h2 { font-size: var(--fs-h2); }h3 { font-size: var(--fs-h3); }h4 { font-size: var(--fs-h4); }

p {font-size: var(--fs-body);color: var(--color-ink-soft);}

.eyebrow {display: inline-flex;align-items: center;gap: var(--space-xs);font-family: var(--font-body);font-size: var(--fs-eyebrow);font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: #F2A93B;
}

.eyebrow::before {content: '';display: inline-block;width: 28px;height: 3px;background: var(--color-gold);border-radius: var(--radius-pill);
}.section-heading {margin-bottom: var(--space-lg);}.section-heading__title {margin-top: var(--space-xs);}
.text-white { color: var(--color-white); }.text-white p, .text-white .eyebrow { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.container {width: 100%;max-width: var(--container-max);margin-inline: auto;padding-inline: var(--space-md);}@media (min-width: 768px) {.container { padding-inline: var(--space-lg); }}
.section {padding-block: var(--space-2xl);}.section--tight {padding-block: var(--space-xl);
}

.section--dark {background: var(--color-navy-900);color: var(--color-white);
}

.section--off-white { background: var(--color-off-white);
}

.grid {display: grid;gap: var(--space-lg);
}

@media (min-width: 768px) {.grid--2 { grid-template-columns: repeat(2, 1fr); }.grid--3 { grid-template-columns: repeat(3, 1fr); }.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.u-flex-between {display: flex;align-items: center;justify-content: space-between;
}

.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-text-center { text-align: center; }

.skip-link {position: absolute;left: -9999px;top: 0;background: var(--color-gold);color: var(--color-navy-900);padding: var(--space-sm) var(--space-md);z-index: 2000;font-weight: 700;
}
.skip-link:focus {left: var(--space-md);top: var(--space-md);
}
/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {display: inline-flex;align-items: center;justify-content: center;gap: var(--space-xs);padding: 0.85rem 1.75rem;font-family: var(--font-body);font-size: var(--fs-small);font-weight: 700;letter-spacing: 0.03em;text-transform: uppercase;border-radius: var(--radius-pill);border: 2px solid transparent;transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);white-space: nowrap;
}.btn:hover { transform: translateY(-2px); }.btn:active { transform: translateY(0); }

.btn--primary {background: var(--color-gold);color: var(--color-navy-900);box-shadow: var(--shadow-gold);
}.btn--primary:hover {background: var(--color-gold-dark);box-shadow: 0 12px 28px rgba(255, 199, 8, 0.45);}

.btn--secondary {background: transparent;border-color: var(--color-navy-900);color: var(--color-navy-900);
}
.btn--secondary:hover {background: var(--color-navy-900);color: var(--color-white);}
.btn--ghost {background: rgba(255,255,255,0.08);border-color: rgba(255,255,255,0.6);color: var(--color-white);backdrop-filter: blur(6px);}
.btn--ghost:hover {background: var(--color-white);color: var(--color-navy-900);}
.btn--sm {padding: 0.6rem 1.25rem;font-size: 0.75rem;
}
.btn--block {width: 100%;
}.btn--icon { width: 46px;height: 46px;padding: 0;border-radius: 50%;
}




/* ==========================================================================
   10. FOOTER & FLOATING BUTTONS
   ========================================================================== */

.eyebrow {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F2A93B;
  margin-bottom: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--footer-radius-pill);
  font-size: 0.95rem;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--footer-amber-500); outline-offset: 2px; }

.btn--primary {
  background: var(--footer-amber-500);
  color: var(--footer-navy-900);
}

.btn--primary:hover { background: var(--footer-amber-600); }

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--secondary {
  background: transparent;
  color: var(--footer-navy-900);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 0.85rem;
}

.footer-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 110px 24px 90px;
}

.footer-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 51, 0.88) 0%, rgba(11, 31, 51, 0.72) 55%, rgba(11, 31, 51, 0.9) 100%);
  z-index: 0;
}

.footer-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-hero__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  font-weight: 800;
  max-width: 18ch;
}

.footer-hero__desc {
  margin: 0 0 34px;
  color: var(--footer-ink-300);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  max-width: 52ch;
}

.footer-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.site-footer {
  position: relative;
  background: var(--footer-navy-900);
  color: var(--footer-ink-300);
}

.site-footer__curve {
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;
  height: 90px;
  display: block;
  z-index: 0;
}

.site-footer__inner {
  max-width: var(--footer-container);
  margin: 0 auto;
  padding: 50px 24px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
}

.site-footer__about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-footer__logo {
  height: 120px;
  width: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}

.site-footer__about p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--footer-ink-500);
}

.site-footer h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-footer__links li {
  margin-bottom: 10px;
}

.site-footer__links a {
  font-size: 0.92rem;
  color: var(--footer-ink-500);
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline-block;
  padding-left: 0;
}

.site-footer__links a:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-amber-500), transparent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__links a:hover {
  color: var(--footer-amber-500);
  transform: translateX(4px);
  padding-left: 4px;
}

.site-footer__links a:hover:before {
  width: 100%;
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--footer-ink-500);
}

.site-footer__contact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--footer-amber-500);
}

.site-footer__maps-link {
  color: var(--footer-ink-500);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline;
}

.site-footer__maps-link:hover {
  color: var(--footer-amber-500);
  text-decoration: underline;
  text-decoration-color: var(--footer-amber-500);
  text-underline-offset: 3px;
  cursor: pointer;
}

.site-footer__maps-link:after {
  content: ' ↗';
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__maps-link:hover:after {
  opacity: 1;
}

.site-footer__contact-link {
  color: var(--footer-ink-500);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline-block;
  padding-left: 0;
}

.site-footer__contact-link:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-amber-500), transparent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__contact-link:hover {
  color: var(--footer-amber-500);
  transform: translateX(4px);
  padding-left: 4px;
}

.site-footer__contact-link:hover:before {
  width: 100%;
}

.site-footer__bottom {
  border-top: 1px solid var(--footer-line);
}

.site-footer__bottom-inner {
  max-width: var(--footer-container);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--footer-ink-500);
}

.site-footer__social {
  display: flex;
  gap: 12px;
}

.site-footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--footer-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-ink-300);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.site-footer__social a:hover {
  background: var(--footer-amber-500);
  border-color: var(--footer-amber-500);
  color: var(--footer-navy-900);
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--footer-navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 31, 51, 0.35);
  z-index: 20;
}

.whatsapp-container {
  position: fixed;
  right: 24px;
  bottom: 100px;
  display: flex;
  align-items: center;
  z-index: 20;
  text-decoration: none;
}

.whatsapp-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.whatsapp-label {
  background: #fff;
  color: var(--footer-navy-900);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--footer-radius-pill) 0 0 var(--footer-radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  margin-right: -32px;
  transition: max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.whatsapp-container:hover .whatsapp-label {
  max-width: 160px;
  opacity: 1;
  padding: 10px 32px 10px 16px;
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-hero { padding: 110px 20px 90px; }
  .footer-hero__title { max-width: none; }
  .footer-hero__actions { flex-direction: column; width: 100%; }
  .footer-hero__actions .btn { width: 100%; }
  .site-footer__inner {
    grid-template-columns: 1fr;
    padding: 56px 20px 40px;
    gap: 38px;
  }
  .site-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}


/* ==========================================================================
   11. ANIMATIONS & TRANSITIONS
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-32px);
}

[data-reveal="left"].is-revealed {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(32px);
}

[data-reveal="right"].is-revealed {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="scale"].is-revealed {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   12. FORMS & INPUTS
   ========================================================================== */

.form__group {
  margin-bottom: var(--space-md);
}

.form__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-navy-900);
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.85rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 4px rgba(28, 180, 208, 0.15);
  outline: none;
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

.form__row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.form__note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  margin-top: var(--space-sm);
}

.form__success {
  display: none;
  background: rgba(41, 127, 62, 0.1);
  border: 1px solid var(--color-green);
  color: var(--color-green);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  margin-top: var(--space-md);
}

.form__success.is-visible {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pill-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .pill-group { grid-template-columns: repeat(4, 1fr); }
}

.pill-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-option__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-md) var(--space-xs);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.pill-option input:checked + .pill-option__card {
  border-color: var(--color-teal);
  background: rgba(28, 180, 208, 0.08);
  color: var(--color-navy-900);
}

.pill-option__card svg {
  color: var(--color-white);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: left;
}

.faq-item__icon {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

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

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-med);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.faq-item.is-open .faq-item__answer {
  max-height: 200px;
  padding-bottom: var(--space-md);
}




/* ==========================================================================
   14. CONTACT MODAL
   ========================================================================== */

.contact-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 27, 43, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  z-index: 1090;
  pointer-events: none;
}

.contact-modal__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.contact-modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease-out);
  box-shadow: 10px 0 40px rgba(11, 27, 43, 0.2);
  overflow-y: auto;
  pointer-events: none;
}

.contact-modal.is-open {
  transform: translateX(0);
  pointer-events: all;
}

@media (max-width: 480px) {
  .contact-modal {
    max-width: 100%;
  }
}

.contact-modal__header {
  background: linear-gradient(135deg, #1cb4d0 0%, #158fa3 100%);
  color: var(--color-white);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.contact-modal__header h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.contact-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.contact-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.contact-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

.contact-modal__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

.contact-modal__item:last-of-type {
  margin-bottom: var(--space-xl);
}

.contact-modal__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: rgba(37, 139, 76, 0.12);
  color: #258B4C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-modal__item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #258B4C;
  margin: 0 0 var(--space-xs) 0;
}

.contact-modal__item p {
  font-size: 0.9rem;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.6;
}

.contact-modal__item a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
}

.contact-modal__item a:hover {
  color: #1cb4d0;
}

.contact-modal__social {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.contact-modal__social h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #258B4C;
  margin: 0 0 var(--space-md) 0;
}

.contact-modal__social-icons {
  display: flex;
  gap: var(--space-md);
}

.contact-modal__social-link {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(37, 139, 76, 0.12);
  color: #258B4C;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.contact-modal__social-link:hover {
  background: #1cb4d0;
  color: var(--color-white);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal__overlay,
  .contact-modal {
    transition: none !important;
  }
  
  .contact-modal__social-link {
    transition: none !important;
  }
}

/* ==========================================================================
   15. SEARCH MODAL
   ========================================================================== */

.search-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 27, 43, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  z-index: 999;
  pointer-events: none;
}

.search-modal__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 10vw, 4rem);
  z-index: 1000;
  pointer-events: none;
}

.search-modal.is-open .search-modal__content {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

.search-modal__content {
  position: relative;
  width: 100%;
  max-width: 700px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 50px 100px rgba(11, 27, 43, 0.15);
  padding: clamp(2rem, 6vw, 3.5rem);
  opacity: 0;
  transform: scale(0.95) translateY(-20px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}

.search-modal__close {
  position: absolute;
  top: clamp(1rem, 4vw, 2rem);
  right: clamp(1rem, 4vw, 2rem);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 1;
}

.search-modal__close:hover,
.search-modal__close:focus-visible {
  background: var(--color-border);
  color: var(--color-navy-900);
  outline: none;
}

.search-modal__header {
  margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
  text-align: center;
}

.search-modal__header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 800;
  color: var(--color-navy-900);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.search-modal__header p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.search-modal__form {
  display: flex;
  gap: clamp(0.75rem, 3vw, 1rem);
  flex-wrap: wrap;
}

.search-modal__input-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
}

.search-modal__input-icon {
  position: absolute;
  left: clamp(1rem, 3vw, 1.25rem);
  color: var(--color-ink-soft);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.search-modal__input {
  width: 100%;
  padding: clamp(0.9rem, 3vw, 1.1rem) clamp(1rem, 3vw, 1.25rem) clamp(0.9rem, 3vw, 1.1rem) clamp(2.75rem, 5vw, 3.25rem);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-navy-900);
  transition: all var(--transition-fast);
}

.search-modal__input::placeholder {
  color: var(--color-ink-soft);
}

.search-modal__input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(28, 180, 208, 0.1);
}

.search-modal__input:focus + .search-modal__input-icon {
  color: var(--color-white);
}

.search-modal__submit {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.search-modal__submit svg {
  transition: transform var(--transition-fast);
}

.search-modal__submit:hover svg {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .search-modal {
    padding: 1.5rem;
    align-items: flex-end;
  }
  .search-modal__content {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1.5rem;
  }
  .search-modal__header {
    margin-bottom: 1.5rem;
  }
  .search-modal__header h2 {
    font-size: 1.5rem;
  }
  .search-modal__form {
    flex-direction: column;
  }
  .search-modal__input-wrapper {
    min-width: auto;
  }
  .search-modal__submit {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-modal__overlay,
  .search-modal__content,
  .search-modal__close,
  .search-modal__input {
    transition: none !important;
  }
}



/* ==========================================================================
   16. SLIDERS (Project, Clients, News)
   ========================================================================== */

.project-slider {
  position: relative;
}

.project-slider__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-md);
  scrollbar-width: none;
}

.project-slider__track::-webkit-scrollbar { display: none; }

.project-slider__item {
  scroll-snap-align: start;
  flex: 0 0 82%;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 380px;
  box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
  .project-slider__item { flex-basis: 46%; }
}

@media (min-width: 992px) {
  .project-slider__item { flex-basis: 31%; height: 420px; }
}

.project-slider__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.project-slider__item:hover img {
  transform: scale(1.08);
}

.project-slider__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,27,43,0.92) 0%, rgba(11,27,43,0.1) 55%, rgba(11,27,43,0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  color: var(--color-white);
}

.project-slider__location {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.project-slider__title {
  color: var(--color-white);
  font-size: 1.15rem;
  transition: font-size var(--transition-med);
}

.project-slider__item:hover .project-slider__title {
  font-size: 1.3rem;
}

.project-slider__desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition-med), opacity var(--transition-med), margin-top var(--transition-med);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}

.project-slider__item:hover .project-slider__desc {
  max-height: 80px;
  opacity: 1;
  margin-top: var(--space-sm);
}

.project-slider__arrow-btn {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-900);
  display: grid;
  place-items: center;
  transform: rotate(0deg);
  transition: transform var(--transition-fast);
}

.project-slider__item:hover .project-slider__arrow-btn {
  transform: rotate(45deg);
}

.project-slider__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.project-slider__progress {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.project-slider__progress-bar {
  height: 100%;
  width: 30%;
  background: var(--color-gold);
  border-radius: var(--radius-pill);
  transition: width var(--transition-med), transform var(--transition-med);
}

.slider-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.slider-arrow:hover {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
  color: var(--color-white);
}

.clients-slider {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.clients-slider__track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  animation: clients-scroll 28s linear infinite;
}

.clients-slider:hover .clients-slider__track {
  animation-play-state: paused;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.clients-slider__logo {
  flex: 0 0 auto;
  width: 160px;
  height: 90px;
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.clients-slider__logo:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: var(--shadow-md);
  border-color: var(--color-teal);
}

.clients-slider__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.clients-slider__logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.news-slider__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.news-slider__track::-webkit-scrollbar { display: none; }

.news-slider__item {
  scroll-snap-align: start;
  flex: 0 0 88%;
}

@media (min-width: 640px) { .news-slider__item { flex-basis: 45%; } }
@media (min-width: 992px) { .news-slider__item { flex-basis: 30%; } }

.news-slider__numbers {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.news-slider__number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.news-slider__number.is-active,
.news-slider__number:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy-900);
}



/* ==========================================================================
   17. MOBILE NAVIGATION (Off-canvas)
   ========================================================================== */

.mobile-nav__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height-mobile);
  background: var(--color-navy-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  z-index: 1001;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav__contact-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: var(--space-xs);
  transition: transform 0.2s ease;
}

.mobile-nav__contact-btn:hover {
  transform: scale(1.1);
}

.mobile-nav__close {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: var(--space-xs);
  transition: transform 0.2s ease;
}

.mobile-nav__close:hover {
  transform: scale(1.1);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-navy-900);
  color: var(--color-white);
  display: block;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: calc(var(--header-height-mobile) + var(--space-lg)) var(--space-md) var(--space-2xl);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  visibility: visible;
  opacity: 1;
}

/* Show on mobile, hide on desktop */
@media (max-width: 991px) {
  .mobile-nav {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .mobile-nav { 
    display: none !important;
  }
}

.nav-open .mobile-nav {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  -moz-transform: translateX(0) !important;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
}

.mobile-nav__item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #0FBCE0;
}

.mobile-nav__link .nav__chevron {
  stroke: #0FBCE0;
}

.mobile-nav__submenu {
  display: none !important;
  overflow: hidden;
  transition: max-height var(--transition-med);
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  margin-top: 0.5rem;
}

/* When JavaScript sets inline style="display: block", show it */
.mobile-nav__submenu[style*="display: block"] {
  display: block !important;
}

.mobile-nav__item.is-open .mobile-nav__link .nav__chevron {
  transform: rotate(180deg);
}

.mobile-nav__sub-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.95rem;
  color: #0FBCE0;
}

.mobile-nav__sub-link:hover {
  color: #0FBCE0;
  text-decoration: underline;
}

.mobile-nav__cta {
  margin-top: var(--space-lg);
}

/* Mobile nav overlay */
.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med), visibility var(--transition-med);
}

.nav-open .mobile-nav__overlay {
  opacity: 1;
  visibility: visible;
}



/* Client Carousel Title - Change from Fraunces to Poppins */
.client-carousel__title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
}
/* Trust Strip Numbers - Change from Fraunces to Poppins */
.trust-strip__number {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
}





/* ==========================================================================
   18. HOME PAGE STYLES
   ========================================================================== */

.services-section {
  background: var(--color-white);
}

.services-section--dark {
  background: var(--color-navy-900);
  color: var(--color-white);
}

.services-section--dark p { color: rgba(255,255,255,0.7); }

.insights-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .insights-grid {
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-rows: repeat(2, 220px);
  }
}

.insights-grid__feature {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 260px;
}

@media (min-width: 900px) {
  .insights-grid__feature { grid-row: span 2; min-height: 100%; }
}

.insights-grid__feature img,
.insights-grid__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.insights-grid__feature:hover img,
.insights-grid__tile:hover img {
  transform: scale(1.08);
}

.insights-grid__tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 130px;
}

.insights-grid__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(0deg, rgba(11,27,43,0.85) 0%, rgba(11,27,43,0) 70%);
  color: var(--color-white);
}

.insights-grid__cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.insights-grid__title {
  color: var(--color-white);
  font-size: 1rem;
  margin-top: 4px;
}

.insights-grid__feature .insights-grid__title {
  font-size: 1.4rem;
}

.clients-heading {
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   19. NEWS PAGE STYLES
   ========================================================================== */

.featured-news-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 992px) {
  .featured-news-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
  }
}

.featured-news-large {
  position: relative;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: visible;
}

@media (min-width: 768px) {
  .featured-news-large {
    height: 280px;
  }
}

@media (min-width: 992px) {
  .featured-news-large {
    height: 320px;
    min-height: 400px;
  }
}

.featured-news__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  z-index: 1;
}

.featured-news__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,27,43,0.6) 0%, rgba(11,27,43,0.2) 100%);
  border-radius: var(--radius-md);
  z-index: 2;
}

.featured-news__card {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-width: 420px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  z-index: 3;
  transition: all var(--transition-med);
}

@media (min-width: 768px) {
  .featured-news__card {
    bottom: -45px;
    width: 90%;
    max-width: 460px;
    padding: 12px 14px;
  }
}

@media (min-width: 992px) {
  .featured-news__card {
    bottom: -50px;
    width: 93%;
    max-width: 500px;
    padding: 14px 16px;
  }
}

.featured-news__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%) translateY(-6px);
}

.featured-news__tag {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-navy-900);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}

.featured-news__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.featured-news__date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.featured-news__title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy-900);
  margin: 0 0 2px 0;
}

@media (min-width: 768px) {
  .featured-news__title {
    font-size: 1rem;
    margin-bottom: 3px;
  }
}

@media (min-width: 992px) {
  .featured-news__title {
    font-size: 1.05rem;
    margin-bottom: 4px;
  }
}

.featured-news__desc {
  display: none;
}

.featured-news__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-gold);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.featured-news__link:hover {
  gap: 12px;
  color: var(--color-white);
}

.featured-news__link svg {
  transition: transform var(--transition-fast);
}

.featured-news__link:hover svg {
  transform: translateX(2px);
}

.featured-news-small {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 992px) {
  .featured-news-small {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
}

.featured-news-item {
  position: relative;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-med);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .featured-news-item {
    height: 150px;
  }
}

@media (min-width: 992px) {
  .featured-news-item {
    height: 145px;
  }
}

.featured-news-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.featured-news-item__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-med);
}

.featured-news-item:hover .featured-news-item__image {
  transform: scale(1.08);
}

.featured-news-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,27,43,1) 0%, rgba(11,27,43,0.75) 50%, rgba(11,27,43,0.1) 100%);
  z-index: 1;
}

.featured-news-item__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  padding: var(--space-md);
  color: var(--color-white);
}

.featured-news-item__date {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.featured-news-item h3 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .featured-news-item h3 {
    font-size: 1rem;
  }
}

.news-filters {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .news-filters {
    gap: 6px;
    margin-bottom: var(--space-lg);
  }
}

.news-filter {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-ink-soft);
}

@media (max-width: 768px) {
  .news-filter {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 500;
  }
}

@media (max-width: 480px) {
  .news-filter {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}

.news-filter:hover {
  border-color: var(--color-teal);
  color: var(--color-white);
}

.news-filter.is-active {
  background: var(--color-gold);
  color: var(--color-navy-900);
  border-color: var(--color-gold);
}

.news-section {
  margin-bottom: var(--space-2xl);
}

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

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

@media (max-width: 768px) {
  .news-grid {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--space-sm);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
    -webkit-overflow-scrolling: touch;
  }

  .news-grid::-webkit-scrollbar {
    height: 6px;
  }

  .news-grid::-webkit-scrollbar-track {
    background: transparent;
  }

  .news-grid::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 3px;
  }
}

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

.news-card-modern {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 300px;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-med);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .news-card-modern {
    height: 280px;
    min-width: 280px;
    width: 280px;
  }
}

.news-card-modern:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.news-card-modern__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-med);
}

.news-card-modern:hover .news-card-modern__image {
  transform: scale(1.08);
}

.news-card-modern__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,27,43,1) 0%, rgba(11,27,43,0.75) 50%, rgba(11,27,43,0.1) 100%);
  z-index: 1;
}

.news-card-modern__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  padding: var(--space-lg);
  color: var(--color-white);
}

.news-card-modern__cat {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.news-card-modern__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-teal);
}

.news-card-modern__desc {
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.8);
  margin: 0 0 var(--space-md) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-modern__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy-900);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.news-card-modern:hover .news-card-modern__arrow {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translate(4px, -4px);
  box-shadow: var(--shadow-md);
}

.news-pagination {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.news-pagination__number {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  color: var(--color-ink-soft);
}

.news-pagination__number:hover {
  border-color: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-2px);
}

.news-pagination__number.is-active {
  background: var(--color-gold);
  color: var(--color-navy-900);
  border-color: var(--color-gold);
  font-weight: 700;
}


/* ==========================================================================
   20. CONTACT PAGE STYLES
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: var(--space-lg);
  margin-top: -30px;
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1.3fr 1fr;
    margin-top: -35px;
  }
}

.contact-form-panel {
  background: var(--color-navy-900);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .contact-form-panel { padding: var(--space-xl); }
}

.contact-form-panel .eyebrow {
  font-size: 1.1rem;
}

.contact-form-panel .section-heading__title {
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
}

.contact-form-panel p {
  font-size: 0.85rem;
  line-height: 1.5;
}

.contact-form-panel .form__label { color: rgba(255,255,255,0.85); }

.contact-form-panel .form__input,
.contact-form-panel .form__textarea,
.contact-form-panel .form__select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--color-white);
}

.contact-form-panel .form__input::placeholder,
.contact-form-panel .form__textarea::placeholder {
  color: rgba(255,255,255,0.4);
}

.contact-info-panel {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  align-self: start;
}

@media (min-width: 768px) {
  .contact-info-panel { padding: var(--space-xl); }
}

.contact-info-panel .eyebrow {
  font-size: 0.7rem;
}

.contact-info-panel .section-heading__title {
  font-size: 1.6rem;
  margin-bottom: var(--space-lg);
}

.contact-info-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

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

.contact-info-item__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 199, 8, 0.15);
  color: var(--color-gold-dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-info-item h4 {
  font-size: 0.9rem;
  margin-bottom: 4px;
  font-weight: 700;
}

.contact-info-item p,
.contact-info-item a {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  margin-bottom: -20vh;
}

.map-embed iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block;
}

/* ---- ABOUT PAGE SECTION MOVED TO END ---- */

/* ==========================================================================
   2. RESET & NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}



body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy-900);
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F2A93B;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background: var(--color-gold);
  border-radius: var(--radius-pill);
}

.section-heading {
  margin-bottom: var(--space-lg);
}

.section-heading__title {
  margin-top: var(--space-xs);
}

.text-white { color: var(--color-white); }
.text-white p, .text-white .eyebrow { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-lg); }
}

.section {padding-block: var(--space-2xl); background: #fff;}

.section--tight {
  padding-block: var(--space-xl);
}

.section--dark {
  background: var(--color-navy-900);
  color: var(--color-white);
}

.section--off-white {
  background: var(--color-off-white);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.u-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-text-center { text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-navy-900);
  padding: var(--space-sm) var(--space-md);
  z-index: 2000;
  font-weight: 700;
}

.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-gold);
  color: var(--color-navy-900);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover {
  background: var(--color-gold-dark);
  box-shadow: 0 12px 28px rgba(255, 199, 8, 0.45);
}

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

.btn--ghost {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  color: var(--color-white);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-navy-900);
}

.btn--sm {
  padding: 0.6rem 1.25rem;
  font-size: 0.75rem;
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
}

/* ==========================================================================
   6. HERO SECTION (Home page)
   ========================================================================== */

.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: var(--color-navy-900);
}

.hero__media { 
  position: absolute; 
  inset: 0; 
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__video.is-active { 
  opacity: 1;
  background-size: cover;
  background-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,27,43,0.75) 0%, rgba(11,27,43,0.35) 45%, rgba(11,27,43,0.15) 100%),
              linear-gradient(180deg, rgba(11,27,43,0.15) 0%, rgba(11,27,43,0.05) 40%, rgba(11,27,43,0.5) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  height: calc(100% - 148px);
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  color: var(--color-white);
}
@media (min-width: 768px) { .hero__content { padding-inline: var(--space-lg); } }

.hero__headline-block { max-width: 640px; }

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.12;
  color: var(--color-white);
  margin: 0 0 var(--space-lg);
}

.hero__learn-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-white);
  color: var(--color-navy-900);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.9rem 0.9rem 0.9rem 1.5rem;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.hero__learn-btn:hover { background: var(--color-gold); transform: translateY(-2px); }

.hero__learn-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--color-navy-900);
  display: grid;
  place-items: center;
  transition: transform var(--transition-fast);
}
.hero__learn-btn:hover .hero__learn-arrow { transform: rotate(-45deg); }

.hero__card-strip {
  position: relative;
  z-index: 2;
  display: flex;
  height: 148px;
}

.hero__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background: rgba(11,27,43,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  overflow: hidden;
  transition: background var(--transition-fast);
}
.hero__card:last-child { border-right: none; }
.hero__card:hover { background: rgba(11,27,43,0.8); }

.hero__card.is-active {
  background: var(--color-gold);
}
.hero__card.is-active .hero__card-title,
.hero__card.is-active .hero__card-arrow { color: var(--color-navy-900); }
.hero__card.is-active .hero__card-arrow { border-color: var(--color-navy-900); }

.hero__card-skeleton {
  position: absolute;
  inset: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.08) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.hero__card--loaded .hero__card-skeleton { opacity: 0; pointer-events: none; }

.hero__card-content {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}
.hero__card--loaded .hero__card-content { opacity: 1; filter: blur(0); transform: translateY(0); }

.hero__card-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--color-white);
}

.hero__card-arrow {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  display: grid;
  place-items: center;
  color: var(--color-white);
}

@media (max-width: 768px) {
  .hero {
    min-height: 600px;
    height: auto;
  }
  
  .hero__content { 
    height: auto; 
    padding-top: 80px; 
    padding-bottom: var(--space-lg); 
    align-items: flex-start; 
  }
  
  .hero__headline-block { 
    max-width: 100%;
  }
  
  .hero__headline {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-bottom: var(--space-md);
  }
  
  .hero__learn-btn {
    font-size: 0.85rem;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  }
  
  .hero__learn-arrow {
    width: 28px;
    height: 28px;
  }
  
  .hero__card-strip { 
    flex-wrap: wrap; 
    height: auto; 
  }
  
  .hero__card { 
    flex: 1 1 50%; 
    height: auto;
    min-height: 100px;
    padding: var(--space-sm);
  }
  
  .hero__card-title { 
    font-size: 0.75rem; 
  }
  
  .hero__card-arrow {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: auto;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  
  .hero__content { 
    padding-top: 60px; 
    padding-bottom: 120px;
    padding-inline: var(--space-sm);
    height: auto;
    min-height: 200px;
  }
  
  .hero__headline {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    margin-bottom: var(--space-sm);
  }
  
  .hero__learn-btn {
    font-size: 0.8rem;
    padding: 0.65rem 0.65rem 0.65rem 1rem;
  }
  
  .hero__learn-arrow {
    width: 24px;
    height: 24px;
  }
  
  .hero__card-strip { 
    display: none;
  }
  
  .hero__card { 
    display: inline-block;
    position: fixed;
    bottom: 20px;
    left: calc(50% + var(--dot-offset));
    width: 8px;
    height: 8px;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    flex: none;
    transform: translateX(-50%);
    z-index: 10;
  }
  
  .hero__card:nth-child(1) {
    --dot-offset: -16px;
  }
  
  .hero__card:nth-child(2) {
    --dot-offset: 0px;
  }
  
  .hero__card:nth-child(3) {
    --dot-offset: 16px;
  }
  
  .hero__card.is-active { 
    background: var(--color-gold);
    width: 10px;
    height: 10px;
    bottom: 19px;
    box-shadow: 0 0 12px rgba(242, 169, 59, 0.6);
  }
  
  .hero__card-title { 
    display: none;
  }
  
  .hero__card-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video, .hero__card, .hero__card-content, .hero__card-skeleton { transition: none; animation: none; }
}

/* ---- Ken Burns Zoom Animation for Hero ---- */
@keyframes kenBurnsZoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.hero__video.ken-burns-zoom {
  animation: kenBurnsZoom 8s ease-out forwards;
  transform-origin: center;
}

/* ==========================================================================
   7. INNER PAGE HERO
   ========================================================================== */

.page-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0B1B2B;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-height-mobile);
}

@media (min-width: 992px) {
  .page-hero { 
    min-height: 500px;
    padding: 0;
  }
}

.page-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: kenBurnsPageHero 8s ease-out forwards;
  transform-origin: center;
}

.page-hero__slide.is-active {
  opacity: 1;
}

@keyframes kenBurnsPageHero {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes kenBurnsPremiumCard {
  0% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,27,43,0.55) 0%, rgba(11,27,43,0.85) 100%);
}

.page-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-md);
  color: var(--color-white);
  text-align: left;
}

@media (min-width: 768px) {
  .page-hero__content { padding: var(--space-xl) var(--space-lg); }
}

.page-hero__eyebrow {
  color: #F2A93B;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  display: block;
}

.page-hero__title {
  color: #F2A93B;
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .page-hero__title {
    font-size: 3rem;
  }
}

@media (max-width: 640px) {
  .page-hero__title {
    font-size: 1.8rem;
  }
}

.page-hero__desc {
  color: #ffffff;
  max-width: 560px;
  margin-bottom: var(--space-md);
  font-size: 1rem;
  line-height: 1.6;
}

.breadcrumb {
  display: flex;
  gap: var(--space-xs);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
}

.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb span[aria-current] { color: var(--color-gold); }

/* ==========================================================================
   8. BREADCRUMB NAVIGATION SECTION
   ========================================================================== */

.breadcrumb-section {
  background: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 2px 0;
  margin: 0;
  line-height: 1;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
}

.breadcrumb-nav__item {
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-nav__item:hover {
  color: #1CB4D0;
}

.breadcrumb-nav__item.is-active {
  color: var(--color-navy-900);
  font-weight: 600;
}

.breadcrumb-nav__divider {
  color: #d0d0d0;
  margin: 0 4px;

  padding: 24px 0;
}

.breadcrumb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
}

.breadcrumb-nav__item {
  color: var(--color-navy-900);
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (min-width: 992px) {
  .site-header { height: 85px; }
}

.breadcrumb-nav__item:hover {
  color: var(--color-gold);
}

.breadcrumb-nav__item.is-active {
  color: var(--color-gold);
  cursor: default;
}

.breadcrumb-nav__divider {
  color: #999;
  font-weight: 400;
}

@media (max-width: 768px) {
  .breadcrumb-section {
    padding: 2px 0;
  }
  
  .breadcrumb-nav {
    gap: 8px;
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   9. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height-mobile);
  display: flex;
  align-items: center;
  background: white;
  transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

@media (min-width: 992px) {
  .site-header {
    height: var(--header-height);
  }

  .site-header.is-scrolled {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}



.site-header--solid,
.site-header.is-scrolled,
.site-header.mega-open {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

.site-header--solid .nav__link,
.site-header.is-scrolled .nav__link,
.site-header.mega-open .nav__link {
  color: #0b1f33;
}

.site-header--solid .nav__chevron,
.site-header.is-scrolled .nav__chevron,
.site-header.mega-open .nav__chevron {
  stroke: #0b1f33;
}

.site-header--solid .site-header__contact-btn,
.site-header.is-scrolled .site-header__contact-btn,
.site-header.mega-open .site-header__contact-btn {
  color: #0b1f33;
}

.site-header--solid .site-header__search-btn,
.site-header.is-scrolled .site-header__search-btn,
.site-header.mega-open .site-header__search-btn {
  color: #0b1f33;
}

.site-header--solid .site-header__search-btn svg,
.site-header.is-scrolled .site-header__search-btn svg,
.site-header.mega-open .site-header__search-btn svg {
  stroke: #0b1f33;
}

.site-header--solid .site-header__cta,
.site-header.is-scrolled .site-header__cta,
.site-header.mega-open .site-header__cta {
  background-color: #1cb4d0;
  color: white;
}

.site-header--solid .site-header__cta:hover,
.site-header.is-scrolled .site-header__cta:hover,
.site-header.mega-open .site-header__cta:hover {
  background-color: #16a0be;
}

.site-header__inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  position: relative;
  height: 100%;
  flex-wrap: nowrap;
}

@media (min-width: 992px) {
  .site-header__inner {
    justify-content: center;
    position: relative;
  }
}

@media (min-width: 768px) {
  .site-header__inner { padding-inline: 2rem; }
  .nav__link { font-size: 1.1rem !important; padding-block: 0.5rem !important; }
}

.site-header__contact-btn {
  height: auto;
  width: auto;
  transition: transform var(--transition-fast), filter var(--transition-fast);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--transition-fast);
  order: 0;
  margin: 0;
  flex-shrink: 0;
  display: none;
  align-items: center;
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 992px) {
  .site-header__contact-btn {
    display: flex;
  }
}

@media (min-width: 768px) {
  .site-header__contact-btn {
    left: 2rem;
  }
}

.site-header--solid .site-header__contact-btn,
.site-header.is-scrolled .site-header__contact-btn,
.site-header.mega-open .site-header__contact-btn {
  color: var(--color-navy-900);
}

.site-header__contact-btn .icon-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-gold);
  color: var(--color-navy-900);
  flex-shrink: 0;
}

.site-header__contact-btn span.contact-label {
  display: none !important;
}

.site-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 2;
  margin: 0;
  flex-shrink: 0;
  transition: filter var(--transition-fast);
}

@media (max-width: 991px) {
  .site-header__logo {
    display: none;
  }
}

.site-header__logo img {
  height: 110px;
  width: auto;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.site-header__logo:hover img {
  transform: scale(1.05) rotate(-2deg);
}

.site-header__logo:hover {
  filter: drop-shadow(0 0 10px rgba(255, 199, 8, 0.5));
}

/* Left navigation */
.nav--left {
  order: 1;
  flex: 0 1 auto;
  display: flex;
}

/* Right navigation */
.nav--right {
  order: 3;
  flex: 0 1 auto;
  display: flex;
}

/* Navigation styling */
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 100%;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__link {
  display: flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 1.2rem;
  height: 100%;
  color: #0b1f33;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  white-space: nowrap;
  font-size: 1rem;
}

.nav__link:hover {
  color: #1cb4d0;
}

.site-header.is-scrolled .nav__link {
  color: #0b1f33;
}

.site-header.is-scrolled .nav__link:hover {
  color: #1cb4d0;
}

.site-header__mobile-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
  margin: 0;
  padding: var(--space-xs);
}

.site-header__mobile-logo img {
  height: 48px;
  width: auto;
  transition: transform var(--transition-fast);
}

.site-header__mobile-logo:hover img {
  transform: scale(1.05);
}

@media (min-width: 992px) {
  .site-header__mobile-logo {
    display: none;
  }
}

.nav {
  display: none;
}

@media (min-width: 992px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.site-header__utils {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  order: 4;
  flex: 0 0 auto;
  justify-content: flex-end;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .site-header__utils {
    right: 2rem;
  }
}

/* Hide REQUEST QUOTE button on mobile, show on desktop */
.site-header__cta {
  display: none;
}

@media (min-width: 992px) {
  .site-header__cta { display: inline-flex !important; margin-left: 1rem !important; order: 5; flex-shrink: 0; }
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  transition: all var(--transition-fast);
  order: -1;
}

@media (min-width: 992px) {
  .nav-toggle { display: none; }
}

@media (max-width: 991px) {
  .nav-toggle {
    display: grid !important;
    order: 3;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }
}

.nav-toggle__bars {
  position: relative;
  width: 24px;
  height: 18px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #FFD700;
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 8px; }
.nav-toggle__bars span:nth-child(3) { top: 16px; }

/* Keep yellow color always on mobile */
.site-header--solid .nav-toggle__bars span,
.site-header.is-scrolled .nav-toggle__bars span,
.nav-open .nav-toggle__bars span {
  background: #FFD700;
}

.nav-open .nav-toggle__bars span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.nav-open .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle__bars span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* ---- MEGA MENU ----
   Positioned relative to the header itself (not the individual nav item)
   so it always sits flush against the header's true bottom edge, full
   width, with zero gap — regardless of which link triggered it. */

.mega-menu {
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  transform: none;
  z-index: var(--z-mega-menu);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  pointer-events: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .mega-menu {
    top: var(--header-height);
  }
}

@media (max-width: 991px) {
  .mega-menu {
    display: none !important;
  }
}

.nav__item.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.mega-menu__panel {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  box-shadow: 0 20px 60px rgba(11, 31, 51, 0.12);
  border-top: 2px solid var(--color-teal);
  border-radius: 0;
  padding: 1.5rem 1rem;
  width: 100%;
  margin: 0;
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  width: 100%;
  max-width: var(--container-max);
  padding: 0 1rem;
}

.mega-menu__card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(31, 180, 208, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #fff;
  position: relative;
}

.mega-menu__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(31, 180, 208, 0.05) 0%, rgba(255, 199, 8, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.mega-menu__card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(31, 180, 208, 0.15);
  border-color: var(--color-teal);
}

.mega-menu__card:hover::before {
  opacity: 1;
}

.mega-menu__card-img {
  height: 130px;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 0;
}

.mega-menu__card:hover .mega-menu__card-img {
  transform: scale(1.08);
}

.mega-menu__card-body {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.mega-menu__card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-navy-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mega-menu__card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-teal) 0%, #1cc4d0 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: white;
}

.mega-menu__card:hover .mega-menu__card-arrow {
  background: var(--color-gold);
  color: var(--color-navy-900);
  transform: rotate(45deg) scale(1.1);
}

.mega-menu--mobile {
  display: none;
}


/* ==========================================================================
   10. FOOTER & FLOATING BUTTONS
   ========================================================================== */

.eyebrow {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F2A93B;
  margin-bottom: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--footer-radius-pill);
  font-size: 0.95rem;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--footer-amber-500); outline-offset: 2px; }

.btn--primary {
  background: var(--footer-amber-500);
  color: var(--footer-navy-900);
}

.btn--primary:hover { background: var(--footer-amber-600); }

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--secondary {
  background: transparent;
  color: var(--footer-navy-900);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 0.85rem;
}

.footer-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 110px 24px 90px;
}

.footer-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 51, 0.88) 0%, rgba(11, 31, 51, 0.72) 55%, rgba(11, 31, 51, 0.9) 100%);
  z-index: 0;
}

.footer-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-hero__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  font-weight: 800;
  max-width: 18ch;
}

.footer-hero__desc {
  margin: 0 0 34px;
  color: var(--footer-ink-300);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  max-width: 52ch;
}

.footer-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.site-footer {
  position: relative;
  background: var(--footer-navy-900);
  color: var(--footer-ink-300);
}

.site-footer__curve {
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;
  height: 90px;
  display: block;
  z-index: 0;
}

.site-footer__inner {
  max-width: var(--footer-container);
  margin: 0 auto;
  padding: 50px 24px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
}

.site-footer__about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-footer__logo {
  height: 120px;
  width: auto;
  display: block;
  object-fit: contain;
  background: transparent;
}

.site-footer__about p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--footer-ink-500);
}

.site-footer h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-footer__links li {
  margin-bottom: 10px;
}

.site-footer__links a {
  font-size: 0.92rem;
  color: var(--footer-ink-500);
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline-block;
  padding-left: 0;
}

.site-footer__links a:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-amber-500), transparent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__links a:hover {
  color: var(--footer-amber-500);
  transform: translateX(4px);
  padding-left: 4px;
}

.site-footer__links a:hover:before {
  width: 100%;
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--footer-ink-500);
}

.site-footer__contact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--footer-amber-500);
}

.site-footer__maps-link {
  color: var(--footer-ink-500);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline;
}

.site-footer__maps-link:hover {
  color: var(--footer-amber-500);
  text-decoration: underline;
  text-decoration-color: var(--footer-amber-500);
  text-underline-offset: 3px;
  cursor: pointer;
}

.site-footer__maps-link:after {
  content: ' ↗';
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__maps-link:hover:after {
  opacity: 1;
}

.site-footer__contact-link {
  color: var(--footer-ink-500);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline-block;
  padding-left: 0;
}

.site-footer__contact-link:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--footer-amber-500), transparent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__contact-link:hover {
  color: var(--footer-amber-500);
  transform: translateX(4px);
  padding-left: 4px;
}

.site-footer__contact-link:hover:before {
  width: 100%;
}

.site-footer__bottom {
  border-top: 1px solid var(--footer-line);
}

.site-footer__bottom-inner {
  max-width: var(--footer-container);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--footer-ink-500);
}

.site-footer__social {
  display: flex;
  gap: 12px;
}

.site-footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--footer-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-ink-300);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.site-footer__social a:hover {
  background: var(--footer-amber-500);
  border-color: var(--footer-amber-500);
  color: var(--footer-navy-900);
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--footer-navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 31, 51, 0.35);
  z-index: 20;
}

.whatsapp-container {
  position: fixed;
  left: 24px;
  bottom: 100px;
  display: flex;
  align-items: center;
  z-index: 20;
  text-decoration: none;
}

.whatsapp-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.whatsapp-label {
  background: #fff;
  color: var(--footer-navy-900);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--footer-radius-pill) 0 0 var(--footer-radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  margin-right: -32px;
  transition: max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.whatsapp-container:hover .whatsapp-label {
  max-width: 160px;
  opacity: 1;
  padding: 10px 32px 10px 16px;
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-hero { padding: 110px 20px 90px; }
  .footer-hero__title { max-width: none; }
  .footer-hero__actions { flex-direction: column; width: 100%; }
  .footer-hero__actions .btn { width: 100%; }
  .site-footer__inner {
    grid-template-columns: 1fr;
    padding: 56px 20px 40px;
    gap: 38px;
  }
  .site-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}


/* ==========================================================================
   11. ANIMATIONS & TRANSITIONS
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-32px);
}

[data-reveal="left"].is-revealed {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(32px);
}

[data-reveal="right"].is-revealed {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="scale"].is-revealed {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   12. FORMS & INPUTS
   ========================================================================== */

.form__group {
  margin-bottom: var(--space-md);
}

.form__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-navy-900);
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.85rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 4px rgba(28, 180, 208, 0.15);
  outline: none;
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

.form__row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.form__note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  margin-top: var(--space-sm);
}

.form__success {
  display: none;
  background: rgba(41, 127, 62, 0.1);
  border: 1px solid var(--color-green);
  color: var(--color-green);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  margin-top: var(--space-md);
}

.form__success.is-visible {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pill-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .pill-group { grid-template-columns: repeat(4, 1fr); }
}

.pill-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-option__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-md) var(--space-xs);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.pill-option input:checked + .pill-option__card {
  border-color: var(--color-teal);
  background: rgba(28, 180, 208, 0.08);
  color: var(--color-navy-900);
}

.pill-option__card svg {
  color: var(--color-white);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: left;
}

.faq-item__icon {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

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

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-med);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.faq-item.is-open .faq-item__answer {
  max-height: 200px;
  padding-bottom: var(--space-md);
}


/* ==========================================================================
   13. CARDS (Service, Value, Stat, Team, Detail Media)
   ========================================================================== */

.service-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-med), transform var(--transition-med), border-color var(--transition-med);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: var(--color-teal);
}

.service-card__media {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.service-card:hover .service-card__media img {
  transform: scale(1.12);
}

.service-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card__title {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
}

.service-card__desc {
  font-size: 0.92rem;
  flex: 1;
  margin-bottom: var(--space-md);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  align-self: flex-start;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.service-card__link:hover {
  gap: 10px;
  color: var(--color-gold-dark);
}

.value-card {
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.value-card__icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 199, 8, 0.15);
  color: var(--color-gold-dark);
}

.value-card__title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.value-card__list li {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  padding-block: 2px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.stat-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(28, 180, 208, 0.12);
  color: var(--color-white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.stat-card__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--color-navy-900);
  line-height: 1;
}

.stat-card__label {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}

.team-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

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

.team-card:hover img,
.team-card.is-active img {
  transform: scale(1.08);
}

.team-card__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md);
  background: linear-gradient(0deg, rgba(11,27,43,0.92) 0%, rgba(11,27,43,0.1) 100%);
  color: var(--color-white);
  transform: translateY(65%);
  transition: transform var(--transition-med);
}

.team-card:hover .team-card__info,
.team-card.is-active .team-card__info {
  transform: translateY(0);
}

.team-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.team-card__role {
  font-size: 0.8rem;
  color: var(--color-gold);
  margin-top: 2px;
}

.detail-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--color-teal);
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-med);
}

.detail-media:hover img {
  transform: scale(1.06);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: rgba(11,27,43,0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med), visibility var(--transition-med);
  padding: var(--space-lg);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(900px, 92vw);
  max-height: 85vh;
  border-radius: var(--radius-md);
  transform: scale(0.9);
  transition: transform var(--transition-med);
}

.lightbox.is-open img {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  display: grid;
  place-items: center;
}



/* ==========================================================================
   14. CONTACT MODAL
   ========================================================================== */

.contact-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 27, 43, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  z-index: 1090;
  pointer-events: none;
}

.contact-modal__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.contact-modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease-out);
  box-shadow: 10px 0 40px rgba(11, 27, 43, 0.2);
  overflow-y: auto;
  pointer-events: none;
}

.contact-modal.is-open {
  transform: translateX(0);
  pointer-events: all;
}

@media (max-width: 480px) {
  .contact-modal {
    max-width: 100%;
  }
}

.contact-modal__header {
  background: linear-gradient(135deg, #1cb4d0 0%, #158fa3 100%);
  color: var(--color-white);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.contact-modal__header h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.contact-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.contact-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.contact-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

.contact-modal__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

.contact-modal__item:last-of-type {
  margin-bottom: var(--space-xl);
}

.contact-modal__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: rgba(37, 139, 76, 0.12);
  color: #258B4C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-modal__item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #258B4C;
  margin: 0 0 var(--space-xs) 0;
}

.contact-modal__item p {
  font-size: 0.9rem;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.6;
}

.contact-modal__item a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
}

.contact-modal__item a:hover {
  color: #1cb4d0;
}

.contact-modal__social {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.contact-modal__social h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #258B4C;
  margin: 0 0 var(--space-md) 0;
}

.contact-modal__social-icons {
  display: flex;
  gap: var(--space-md);
}

.contact-modal__social-link {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(37, 139, 76, 0.12);
  color: #258B4C;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.contact-modal__social-link:hover {
  background: #1cb4d0;
  color: var(--color-white);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal__overlay,
  .contact-modal {
    transition: none !important;
  }
  
  .contact-modal__social-link {
    transition: none !important;
  }
}

/* ==========================================================================
   15. SEARCH MODAL
   ========================================================================== */

.search-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 27, 43, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  z-index: 999;
  pointer-events: none;
}

.search-modal__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 10vw, 4rem);
  z-index: 1000;
  pointer-events: none;
}

.search-modal.is-open .search-modal__content {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

.search-modal__content {
  position: relative;
  width: 100%;
  max-width: 700px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 50px 100px rgba(11, 27, 43, 0.15);
  padding: clamp(2rem, 6vw, 3.5rem);
  opacity: 0;
  transform: scale(0.95) translateY(-20px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}

.search-modal__close {
  position: absolute;
  top: clamp(1rem, 4vw, 2rem);
  right: clamp(1rem, 4vw, 2rem);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 1;
}

.search-modal__close:hover,
.search-modal__close:focus-visible {
  background: var(--color-border);
  color: var(--color-navy-900);
  outline: none;
}

.search-modal__header {
  margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
  text-align: center;
}

.search-modal__header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 800;
  color: var(--color-navy-900);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.search-modal__header p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.search-modal__form {
  display: flex;
  gap: clamp(0.75rem, 3vw, 1rem);
  flex-wrap: wrap;
}

.search-modal__input-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
}

.search-modal__input-icon {
  position: absolute;
  left: clamp(1rem, 3vw, 1.25rem);
  color: var(--color-ink-soft);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.search-modal__input {
  width: 100%;
  padding: clamp(0.9rem, 3vw, 1.1rem) clamp(1rem, 3vw, 1.25rem) clamp(0.9rem, 3vw, 1.1rem) clamp(2.75rem, 5vw, 3.25rem);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-navy-900);
  transition: all var(--transition-fast);
}

.search-modal__input::placeholder {
  color: var(--color-ink-soft);
}

.search-modal__input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(28, 180, 208, 0.1);
}

.search-modal__input:focus + .search-modal__input-icon {
  color: var(--color-white);
}

.search-modal__submit {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.search-modal__submit svg {
  transition: transform var(--transition-fast);
}

.search-modal__submit:hover svg {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .search-modal {
    padding: 1.5rem;
    align-items: flex-end;
  }
  .search-modal__content {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1.5rem;
  }
  .search-modal__header {
    margin-bottom: 1.5rem;
  }
  .search-modal__header h2 {
    font-size: 1.5rem;
  }
  .search-modal__form {
    flex-direction: column;
  }
  .search-modal__input-wrapper {
    min-width: auto;
  }
  .search-modal__submit {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-modal__overlay,
  .search-modal__content,
  .search-modal__close,
  .search-modal__input {
    transition: none !important;
  }
}

/* ==========================================================================
   16. SLIDERS (Project, Clients, News)
   ========================================================================== */

.project-slider {
  position: relative;
}

.project-slider__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-md);
  scrollbar-width: none;
}

.project-slider__track::-webkit-scrollbar { display: none; }

.project-slider__item {
  scroll-snap-align: start;
  flex: 0 0 82%;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 380px;
  box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
  .project-slider__item { flex-basis: 46%; }
}

@media (min-width: 992px) {
  .project-slider__item { flex-basis: 31%; height: 420px; }
}

.project-slider__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.project-slider__item:hover img {
  transform: scale(1.08);
}

.project-slider__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,27,43,0.92) 0%, rgba(11,27,43,0.1) 55%, rgba(11,27,43,0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  color: var(--color-white);
}

.project-slider__location {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.project-slider__title {
  color: var(--color-white);
  font-size: 1.15rem;
  transition: font-size var(--transition-med);
}

.project-slider__item:hover .project-slider__title {
  font-size: 1.3rem;
}

.project-slider__desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition-med), opacity var(--transition-med), margin-top var(--transition-med);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}

.project-slider__item:hover .project-slider__desc {
  max-height: 80px;
  opacity: 1;
  margin-top: var(--space-sm);
}

.project-slider__arrow-btn {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-900);
  display: grid;
  place-items: center;
  transform: rotate(0deg);
  transition: transform var(--transition-fast);
}

.project-slider__item:hover .project-slider__arrow-btn {
  transform: rotate(45deg);
}

.project-slider__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.project-slider__progress {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.project-slider__progress-bar {
  height: 100%;
  width: 30%;
  background: var(--color-gold);
  border-radius: var(--radius-pill);
  transition: width var(--transition-med), transform var(--transition-med);
}

.slider-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.slider-arrow:hover {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
  color: var(--color-white);
}

.clients-slider {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.clients-slider__track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  animation: clients-scroll 28s linear infinite;
}

.clients-slider:hover .clients-slider__track {
  animation-play-state: paused;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.clients-slider__logo {
  flex: 0 0 auto;
  width: 160px;
  height: 90px;
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.clients-slider__logo:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: var(--shadow-md);
  border-color: var(--color-teal);
}

.clients-slider__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.clients-slider__logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.news-slider__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.news-slider__track::-webkit-scrollbar { display: none; }

.news-slider__item {
  scroll-snap-align: start;
  flex: 0 0 88%;
}

@media (min-width: 640px) { .news-slider__item { flex-basis: 45%; } }
@media (min-width: 992px) { .news-slider__item { flex-basis: 30%; } }

.news-slider__numbers {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.news-slider__number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.news-slider__number.is-active,
.news-slider__number:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy-900);
}

/* ==========================================================================
   17. MOBILE NAVIGATION (Off-canvas)
   ========================================================================== */

/* ==========================================================================
   18. HOME PAGE STYLES
   ========================================================================== */

.services-section {
  background: var(--color-white);
}

.services-section--dark {
  background: var(--color-navy-900);
  color: var(--color-white);
}

.services-section--dark p { color: rgba(255,255,255,0.7); }

.insights-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .insights-grid {
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-rows: repeat(2, 220px);
  }
}

.insights-grid__feature {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 260px;
}

@media (min-width: 900px) {
  .insights-grid__feature { grid-row: span 2; min-height: 100%; }
}

.insights-grid__feature img,
.insights-grid__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.insights-grid__feature:hover img,
.insights-grid__tile:hover img {
  transform: scale(1.08);
}

.insights-grid__tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 130px;
}

.insights-grid__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(0deg, rgba(11,27,43,0.85) 0%, rgba(11,27,43,0) 70%);
  color: var(--color-white);
}

.insights-grid__cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.insights-grid__title {
  color: var(--color-white);
  font-size: 1rem;
  margin-top: 4px;
}

.insights-grid__feature .insights-grid__title {
  font-size: 1.4rem;
}

.clients-heading {
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   19. NEWS PAGE STYLES
   ========================================================================== */

.featured-news-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 992px) {
  .featured-news-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
  }
}

.featured-news-large {
  position: relative;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: visible;
}

@media (min-width: 768px) {
  .featured-news-large {
    height: 280px;
  }
}

@media (min-width: 992px) {
  .featured-news-large {
    height: 320px;
    min-height: 400px;
  }
}

.featured-news__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  z-index: 1;
}

.featured-news__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,27,43,0.6) 0%, rgba(11,27,43,0.2) 100%);
  border-radius: var(--radius-md);
  z-index: 2;
}

.featured-news__card {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-width: 420px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  z-index: 3;
  transition: all var(--transition-med);
}

@media (min-width: 768px) {
  .featured-news__card {
    bottom: -45px;
    width: 90%;
    max-width: 460px;
    padding: 12px 14px;
  }
}

@media (min-width: 992px) {
  .featured-news__card {
    bottom: -50px;
    width: 93%;
    max-width: 500px;
    padding: 14px 16px;
  }
}

.featured-news__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%) translateY(-6px);
}

.featured-news__tag {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-navy-900);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}

.featured-news__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.featured-news__date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.featured-news__title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy-900);
  margin: 0 0 2px 0;
}

@media (min-width: 768px) {
  .featured-news__title {
    font-size: 1rem;
    margin-bottom: 3px;
  }
}

@media (min-width: 992px) {
  .featured-news__title {
    font-size: 1.05rem;
    margin-bottom: 4px;
  }
}

.featured-news__desc {
  display: none;
}

.featured-news__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-gold);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.featured-news__link:hover {
  gap: 12px;
  color: var(--color-white);
}

.featured-news__link svg {
  transition: transform var(--transition-fast);
}

.featured-news__link:hover svg {
  transform: translateX(2px);
}

.featured-news-small {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 992px) {
  .featured-news-small {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
}

.featured-news-item {
  position: relative;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-med);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .featured-news-item {
    height: 150px;
  }
}

@media (min-width: 992px) {
  .featured-news-item {
    height: 145px;
  }
}

.featured-news-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.featured-news-item__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-med);
}

.featured-news-item:hover .featured-news-item__image {
  transform: scale(1.08);
}

.featured-news-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,27,43,1) 0%, rgba(11,27,43,0.75) 50%, rgba(11,27,43,0.1) 100%);
  z-index: 1;
}

.featured-news-item__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  padding: var(--space-md);
  color: var(--color-white);
}

.featured-news-item__date {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.featured-news-item h3 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .featured-news-item h3 {
    font-size: 1rem;
  }
}

.news-filters {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .news-filters {
    gap: 6px;
    margin-bottom: var(--space-lg);
  }
}

.news-filter {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-ink-soft);
}

@media (max-width: 768px) {
  .news-filter {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 500;
  }
}

@media (max-width: 480px) {
  .news-filter {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}

.news-filter:hover {
  border-color: var(--color-teal);
  color: var(--color-white);
}

.news-filter.is-active {
  background: var(--color-gold);
  color: var(--color-navy-900);
  border-color: var(--color-gold);
}

.news-section {
  margin-bottom: var(--space-2xl);
}

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

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

@media (max-width: 768px) {
  .news-grid {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--space-sm);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
    -webkit-overflow-scrolling: touch;
  }

  .news-grid::-webkit-scrollbar {
    height: 6px;
  }

  .news-grid::-webkit-scrollbar-track {
    background: transparent;
  }

  .news-grid::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 3px;
  }
}

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

.news-card-modern {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 300px;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-med);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .news-card-modern {
    height: 280px;
    min-width: 280px;
    width: 280px;
  }
}

.news-card-modern:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.news-card-modern__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-med);
}

.news-card-modern:hover .news-card-modern__image {
  transform: scale(1.08);
}

.news-card-modern__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,27,43,1) 0%, rgba(11,27,43,0.75) 50%, rgba(11,27,43,0.1) 100%);
  z-index: 1;
}

.news-card-modern__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  padding: var(--space-lg);
  color: var(--color-white);
}

.news-card-modern__cat {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.news-card-modern__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-teal);
}

.news-card-modern__desc {
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.8);
  margin: 0 0 var(--space-md) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-modern__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy-900);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.news-card-modern:hover .news-card-modern__arrow {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translate(4px, -4px);
  box-shadow: var(--shadow-md);
}

.news-pagination {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.news-pagination__number {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  color: var(--color-ink-soft);
}

.news-pagination__number:hover {
  border-color: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-2px);
}

.news-pagination__number.is-active {
  background: var(--color-gold);
  color: var(--color-navy-900);
  border-color: var(--color-gold);
  font-weight: 700;
}


/* ==========================================================================
   20. CONTACT PAGE STYLES
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: var(--space-lg);
  margin-top: -30px;
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1.3fr 1fr;
    margin-top: -35px;
  }
}

.contact-form-panel {
  background: var(--color-navy-900);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .contact-form-panel { padding: var(--space-xl); }
}

.contact-form-panel .eyebrow {
  font-size: 1.1rem;
}

.contact-form-panel .section-heading__title {
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
}

.contact-form-panel p {
  font-size: 0.85rem;
  line-height: 1.5;
}

.contact-form-panel .form__label { color: rgba(255,255,255,0.85); }

.contact-form-panel .form__input,
.contact-form-panel .form__textarea,
.contact-form-panel .form__select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--color-white);
}

.contact-form-panel .form__input::placeholder,
.contact-form-panel .form__textarea::placeholder {
  color: rgba(255,255,255,0.4);
}

.contact-info-panel {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  align-self: start;
}

@media (min-width: 768px) {
  .contact-info-panel { padding: var(--space-xl); }
}

.contact-info-panel .eyebrow {
  font-size: 0.7rem;
}

.contact-info-panel .section-heading__title {
  font-size: 1.6rem;
  margin-bottom: var(--space-lg);
}

.contact-info-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

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

.contact-info-item__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 199, 8, 0.15);
  color: var(--color-gold-dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-info-item h4 {
  font-size: 0.9rem;
  margin-bottom: 4px;
  font-weight: 700;
}

.contact-info-item p,
.contact-info-item a {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  margin-bottom: -20vh;
}

.map-embed iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block;
}

/* ==========================================================================
   21. SERVICES PAGE STYLES
   ========================================================================== */

.service-detail {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .service-detail {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.service-detail__list {
  margin-top: var(--space-md);
}

.service-detail__list li {
  position: relative;
  padding-left: 1.4rem;
  padding-block: 6px;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.service-detail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-gold);
}

.service-nav-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.service-nav-back:hover { color: var(--color-gold-dark); }

.related-services {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .related-services { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   ABOUT PAGE — AOT CONSULTING
   Brand-driven layout, alignment, and motion system
   Load AFTER main.css: <link rel="stylesheet" href="../assets/css/about-effects.css">
   ========================================================================== */



/* ==========================================================================
   1. LAYOUT PRIMITIVES — consistent rhythm & alignment
   ========================================================================== */

.section--about{
  padding-block: clamp(3rem, 7vw, 6rem);
}

.section-head{
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.section-head__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F2A93B;
  margin-bottom: .85rem;
}
.section-head__eyebrow::before,
.section-head__eyebrow::after{
  content:"";
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.section-head__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 4.6vw, 2.75rem);
  color: var(--navy-900);
  line-height: 1.18;
  margin-bottom: .75rem;
}

.section-head__desc{
  font-family: 'Lato', sans-serif;
  color: var(--ink-600);
  font-size: 1.08rem;
  line-height: 1.75;
}

/* ==========================================================================
   2. WHO WE ARE — image-left slideshow, content-right, premium alignment
   ========================================================================== */

.overview-grid{
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px){
  .overview-grid{
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* ---- media column: slideshow card + offset frame + floating badge ---- */
.overview-media{
  position: relative;
  padding: 0 1rem 1.75rem 0;
}
@media (min-width: 820px){ .overview-media{ padding: 0 1.5rem 2.25rem 0; } }

.overview-media::before{
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--gold-500);
  border-radius: 22px;
  z-index: 0;
}

.overview-slideshow{
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3.1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 34px 60px -26px rgba(10,21,38,.5);
}

.overview-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.4s var(--ease), transform 7s linear;
}
.overview-slide.is-active{
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.overview-slideshow__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(10,21,38,.08), rgba(10,21,38,.35) 85%);
  z-index: 2;
  pointer-events: none;
}

.overview-slideshow__dots{
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
  z-index: 3;
}
.overview-slideshow__dots button{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: width var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.overview-slideshow__dots button.is-active{
  width: 24px;
  background: var(--gold-500);
}

.overview-badge{
  position: absolute;
  z-index: 3;
  right: .5rem;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  color: #fff;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  min-width: 168px;
  box-shadow: 0 22px 38px -18px rgba(10,21,38,.6);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
@media (min-width: 820px){ .overview-badge{ right: -1rem; } }
.overview-badge:hover{ transform: translateY(-6px); box-shadow: 0 30px 46px -18px rgba(10,21,38,.65); }
.overview-badge__num{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--gold-300);
  line-height: 1;
}
.overview-badge__label{
  font-family: 'Lato', sans-serif;
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(255,255,255,.85);
}

/* ---- content column ---- */
.overview-content .eyebrow{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember-500);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
}
.overview-content .eyebrow::before{
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.overview-content__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4.4vw, 2.85rem);
  line-height: 1.16;
  color: var(--navy-900);
  margin-bottom: 1.15rem;
}
.overview-content p{
  font-family: 'Lato', sans-serif;
  color: var(--ink-600);
  line-height: 1.85;
  font-size: 1.08rem;
}
.overview-content p + p{ margin-top: 1.1rem; }

.overview-highlights{
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.overview-highlights li{
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-900);
}
.overview-highlights svg{
  flex: 0 0 auto;
  margin-top: .15rem;
  color: var(--ember-500);
}

.overview-content .btn{
  font-size: 1rem;
  padding: 1rem 2.1rem;
}

/* ==========================================================================
   2b. STAT STRIP — enlarged, structured
   ========================================================================== */
.stat-strip{
  align-items: center;
}
.stat-strip--lg{
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 768px){
  .stat-strip--lg{
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .stat-strip--lg .stat-card{ position: relative; }
  .stat-strip--lg .stat-card:not(:first-child)::before{
    content: "";
    position: absolute;
    left: -1rem;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: var(--line);
  }
}

.stat-card{
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .5rem;
}
.stat-strip--lg .stat-card__icon{
  width: 64px;
  height: 64px;
}
.stat-strip--lg .stat-card__icon svg{ width: 26px; height: 26px; }
.stat-strip--lg .stat-card__number{
  font-size: clamp(1.9rem, 4vw, 2.5rem);
}
.stat-strip--lg .stat-card__label{
  font-size: 1rem;
}

.stat-card__icon{
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-300);
  transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.stat-card:hover .stat-card__icon{
  background: var(--ember-500);
  color: #fff;
  transform: translateY(-3px) rotate(-6deg);
}
.stat-card__number{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  color: var(--navy-900);
  line-height: 1.1;
}
.stat-card__label{
  font-family: 'Lato', sans-serif;
  font-size: .88rem;
  color: var(--ink-600);
  letter-spacing: .02em;
}

/* ==========================================================================
   3. VISION & MISSION — 3-up, centered card grid, middle card elevated
   ========================================================================== */

.vm-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){
  .vm-grid{ grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.vm-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.75rem 2rem;
  box-shadow: 0 10px 24px -18px rgba(10,21,38,.35);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.vm-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 40px -20px rgba(10,21,38,.35);
  border-color: transparent;
}
.vm-card__icon{
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy-900);
  transition: transform var(--dur-m) var(--ease);
}
.vm-card__icon svg{ width: 28px; height: 28px; }
.vm-card:hover .vm-card__icon{ transform: scale(1.12) rotate(8deg); }
.vm-card__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy-900);
}
.vm-card__text{
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-600);
}

/* middle "Our Mission" — the brand-color anchor of the set */
.vm-card--brand{
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950));
  border-color: transparent;
  transform: translateY(-10px);
  box-shadow: 0 26px 44px -18px rgba(10,21,38,.55);
}
@media (min-width: 760px){ .vm-card--brand{ transform: translateY(-14px); } }
.vm-card--brand:hover{ transform: translateY(-20px); }
.vm-card--brand .vm-card__icon{ background: rgba(255,255,255,.1); color: var(--gold-300); }
.vm-card--brand .vm-card__title,
.vm-card--brand .vm-card__text{ color: #fff; }
.vm-card--brand .vm-card__text{ color: rgba(255,255,255,.78); }

/* ==========================================================================
   4. CORE VALUES — 3-col / 2-row grid, one elevated "signature" card
   ========================================================================== */

.values-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px){
  .values-grid{ grid-template-columns: repeat(4, 1fr); }
}

.value-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .85rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.25rem 1.5rem;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.value-tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 32px -20px rgba(10,21,38,.35);
}
.value-tile__icon{
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--paper);
  transition: transform var(--dur-s) var(--ease);
}
.value-tile__icon svg{ width: 24px; height: 24px; }
.value-tile:hover .value-tile__icon{ transform: scale(1.15); }
.value-tile__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--navy-900);
}
.value-tile__text{
  font-family: 'Lato', sans-serif;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-600);
}

/* per-value accent colors, matched to icon */
.value-tile--integrity .value-tile__icon{ color: var(--gold-500); }
.value-tile--accountability .value-tile__icon{ color: var(--navy-900); }
.value-tile--safety .value-tile__icon{ color: var(--teal-500); }
.value-tile--sustainability .value-tile__icon{ color: #3f9142; }
.value-tile--collaboration .value-tile__icon{ color: #d1a316; }

/* the signature tile — "Innovation" is why the others exist */
.value-tile--signature{
  position: relative;
  border-color: transparent;
  box-shadow: 0 22px 40px -20px rgba(10,21,38,.4);
  transform: translateY(-6px);
}
@media (min-width: 620px){ .value-tile--signature{ transform: translateY(-10px); } }
.value-tile--signature::before{
  content:"";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--ember-500), var(--gold-500));
}
.value-tile--signature .value-tile__icon{ color: var(--ember-500); }
.value-tile--signature:hover{ transform: translateY(-14px); }

/* ==========================================================================
   5. VALUED PARTNERS — grid, aligned, grayscale-to-color reveal
   ========================================================================== */

.partners-band{
  background: linear-gradient(180deg, var(--paper), #eef1f4);
}
.partners-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 620px){
  .partners-grid{ grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
}
.partner-tile{
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .9rem;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.partner-tile img{
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(1) opacity(.65);
  transition: filter var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.partner-tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -18px rgba(10,21,38,.3);
  border-color: var(--gold-300);
}
.partner-tile:hover img{
  filter: grayscale(0) opacity(1);
  transform: scale(1.06);
}

/* ==========================================================================
   6. SCROLL-REVEAL SYSTEM
   ========================================================================== */

[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .vm-card:hover, .value-tile:hover, .partner-tile:hover, .stat-card:hover .stat-card__icon{
    transform: none;
  }
}

/* ==========================================================================
   7. HERO PARALLAX
   ========================================================================== */
.page-hero__slide{ will-change: transform; }

/* ==========================================================================
   23. NEWS DETAIL PAGE STYLES
   ========================================================================== */

.article-detail-section {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}

.article-container {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 992px) {
  .article-container {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
    align-items: start;
  }
}

.article-featured-image {
  position: relative;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .article-featured-image {
    height: 130px;
  }
}

@media (min-width: 992px) {
  .article-featured-image {
    height: 150px;
    position: sticky;
    top: 100px;
  }
}

.article-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-med);
}

.article-featured-image:hover .article-image {
  transform: scale(1.05);
}

.article-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,27,43,0.3) 0%, rgba(11,27,43,0.1) 100%);
}

.article-content-wrapper {
  display: flex;
  flex-direction: column;
}

.article-meta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.article-category {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-navy-900);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
}

.article-date,
.article-author {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  font-weight: 500;
}

.article-date::before {
  content: "•";
  margin-right: var(--space-xs);
}

.article-author::before {
  content: "•";
  margin-right: var(--space-xs);
}

.article-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-navy-900);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .article-title {
    font-size: 2rem;
  }
}

@media (min-width: 992px) {
  .article-title {
    font-size: 2.2rem;
  }
}

.article-body-scroll {
  height: 450px;
  overflow-y: auto;
  padding-right: 12px;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
  .article-body-scroll {
    height: 500px;
  }
}

@media (min-width: 992px) {
  .article-body-scroll {
    height: 550px;
  }
}

.article-body-scroll::-webkit-scrollbar {
  width: 6px;
}

.article-body-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.article-body-scroll::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 3px;
}

.article-body-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-teal);
}

.article-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-ink);
}

.article-body p {
  margin-bottom: var(--space-md);
}

.article-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.article-body ul {
  margin: var(--space-md) 0 var(--space-md) var(--space-lg);
  list-style: disc;
}

.article-body li {
  margin-bottom: var(--space-sm);
  color: var(--color-ink);
}

.article-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.back-to-news {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.back-to-news:hover {
  color: var(--color-gold);
  gap: 12px;
}

.back-to-news svg {
  transition: transform var(--transition-fast);
}

.back-to-news:hover svg {
  transform: translateX(-2px);
}

.related-news-section {
  background: var(--color-off-white);
  padding: var(--space-xl) 0;
}

.related-news-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.related-news-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-navy-900);
  margin-bottom: var(--space-sm);
}

.related-news-desc {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.related-news-slider {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-md);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) transparent;
  -webkit-overflow-scrolling: touch;
}

.related-news-slider::-webkit-scrollbar {
  height: 6px;
}

.related-news-slider::-webkit-scrollbar-track {
  background: transparent;
}

.related-news-slider::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 3px;
}

.related-news-slider::-webkit-scrollbar-thumb:hover {
  background: var(--color-teal);
}

.related-news-card {
  position: relative;
  min-width: 300px;
  width: 300px;
  height: 350px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-med);
}

@media (min-width: 768px) {
  .related-news-card {
    min-width: 320px;
    width: 320px;
    height: 380px;
  }
}

.related-news-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.related-news-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-med);
}

.related-news-card:hover .related-news-card__image {
  transform: scale(1.08);
}

.related-news-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,27,43,1) 0%, rgba(11,27,43,0.75) 50%, rgba(11,27,43,0.1) 100%);
  z-index: 1;
}

.related-news-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: var(--space-lg);
  color: var(--color-white);
}

.related-news-card__category {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
  align-self: flex-start;
}

.related-news-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-white);
}

.related-news-card__excerpt {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.8);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-news-card__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy-900);
  flex-shrink: 0;
  transition: all var(--transition-fast);
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.related-news-card:hover .related-news-card__arrow {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translate(4px, -4px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .article-detail-section {
    padding: var(--space-lg) 0;
  }

  .article-featured-image {
    height: 90px;
  }

  .article-title {
    font-size: 1.4rem;
  }

  .article-body-scroll {
    height: 400px;
  }

  .related-news-card {
    min-width: 280px;
    width: 280px;
    height: 320px;
  }
}


/* ==========================================================================
   24. REQUEST A QUOTE PAGE STYLES
   ========================================================================== */

.quote-layout {
  margin-top: -30px;
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .quote-layout { margin-top: -35px; }
}

.quote-panel {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}

@media (min-width: 768px) {
  .quote-panel { padding: var(--space-xl); }
}

.quote-panel__step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
}

.quote-panel__step-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.quote-panel__step h3 {
  font-size: 1rem;
}

.quote-panel__section {
  margin-bottom: var(--space-xl);
}

.why-strip {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

@media (min-width: 768px) {
  .why-strip { grid-template-columns: repeat(5, 1fr); }
}

.why-strip__icon {
  width: 52px;
  height: 52px;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  background: rgba(28,180,208,0.12);
  color: var(--color-white);
  display: grid;
  place-items: center;
}

.why-strip h4 {
  font-size: 0.85rem;
}

.why-strip p {
  font-size: 0.78rem;
}

.process-steps {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 768px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); }
}

.process-step {
  text-align: center;
  position: relative;
}

.process-step__num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-900);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.process-step h4 { font-size: 0.9rem; }
.process-step p { font-size: 0.8rem; }




/* ========================================================================== CLIENT WALL — Trusted by regulators, banks and partners */
.client-wall { padding: clamp(1.5rem, 3vw, 2rem) var(--space-lg); background: #fff !important; position: relative; overflow: hidden; }
.client-wall::before { content: ''; position: absolute; top: -30%; left: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(28, 180, 208, 0.06) 0%, transparent 70%); pointer-events: none; animation: floatBg 20s ease-in-out infinite; }
.client-wall::after { content: ''; position: absolute; bottom: -30%; right: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 199, 8, 0.05) 0%, transparent 70%); pointer-events: none; animation: floatBg 25s ease-in-out infinite reverse; }
.client-wall__container { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; }
.client-wall__header { text-align: center; margin-bottom: 0.5rem; }
.client-wall__eyebrow { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); background: rgba(255, 199, 8, 0.12); border: 2px solid var(--color-gold); padding: 0.6rem 1.2rem; border-radius: 50px; margin-bottom: -0.2rem; }
.client-wall__title { font-family: 'Poppins', sans-serif; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #0b1f33 !important; margin: 0; display: none; }
.client-wall__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.client-wall__cell { display: flex; align-items: center; justify-content: center; min-height: 140px; background: #eef4f8 !important; border: 2px solid #1cc4d0 !important; border-radius: 14px; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; }
.client-wall__cell::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(28, 180, 208, 0.08) 0%, rgba(255, 199, 8, 0.04) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.client-wall__cell::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, rgba(255, 199, 8, 0.6) 0%, rgba(28, 180, 208, 0.5) 50%, rgba(255, 199, 8, 0.6) 100%); opacity: 0; z-index: -1; border-radius: 14px; transition: opacity 0.4s ease; filter: blur(8px); pointer-events: none; }
.client-wall__cell:hover { border-color: var(--color-teal); background: #fff; transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 35px rgba(28, 180, 208, 0.15), 0 0 20px rgba(28, 180, 208, 0.08); }
.client-wall__cell:hover::before { opacity: 1; }
.client-wall__cell:hover::after { opacity: 1; }
.client-wall__mark { font-family: 'Poppins', sans-serif; font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 700; line-height: 1.4; color: #0b1f33 !important; transition: all 0.3s ease; display: block; position: relative; z-index: 1; }
.client-wall__cell:hover .client-wall__mark { color: var(--color-gold); transform: translateY(-2px); }

.client-wall__logo { max-width: 70%; max-height: 70%; height: auto; width: auto; object-fit: contain; transition: all 0.3s ease; }

.client-wall__name-fallback { display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 700; line-height: 1.3; text-align: center; color: #0b1f33 !important; letter-spacing: -0.01em; word-break: break-word; hyphens: auto; padding: 0.5rem; transition: all 0.3s ease; width: 100%; height: 100%; min-height: 100px; }

@media (max-width: 1024px) { .client-wall__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .client-wall { padding: 2.5rem var(--space-md); } .client-wall__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .client-wall__header { margin-bottom: 2rem; } .client-wall__cell { min-height: 120px; padding: 1rem; } .client-wall__mark { font-size: 0.8rem; } }
@media (max-width: 480px) { .client-wall__cell { min-height: 100px; padding: 0.8rem; } .client-wall__mark { font-size: 0.75rem; } }
@media (prefers-reduced-motion: reduce) { .client-wall__cell, .client-wall__mark { transition: none; } .client-wall__cell:hover { transform: none; } }
@media (prefers-color-scheme: dark) { .client-wall { background: rgba(11, 27, 43, 0.95); } .client-wall__cell { background: rgba(255, 255, 255, 0.05); border-color: rgba(28, 180, 208, 0.2); } .client-wall__title { color: #fff; } .client-wall__mark { color: rgba(255, 255, 255, 0.9); } }


/* ========================================================================== SERVICE CARDS — Professional Clean Design with Poppins */
.svc-cards { padding: clamp(0.5rem, 2vw, 1.5rem) var(--space-sm); background: #fff !important; position: relative; overflow: hidden; margin-top: clamp(0.5rem, 1vw, 1rem); }
@media (min-width: 640px) { .svc-cards { padding: clamp(1rem, 2.5vw, 1.5rem) var(--space-md); } }
@media (min-width: 1024px) { .svc-cards { padding: clamp(1.5rem, 3vw, 2.5rem) var(--space-lg); } }
.svc-cards::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(28, 180, 208, 0.05) 0%, transparent 70%); pointer-events: none; animation: drift 20s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -20px); } }
.svc-cards__header { position: relative; z-index: 1; max-width: 900px; margin: 0 auto clamp(2rem, 5vw, 3rem); text-align: center; }
.svc-cards__badge { display: inline-block; margin-bottom: 2rem; }
.svc-cards__badge span { font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-teal); background: rgba(28, 180, 208, 0.12); border: 2px solid rgba(28, 180, 208, 0.4); padding: 0.7rem 1.5rem; border-radius: 50px; display: inline-flex; align-items: center; transition: all 0.3s ease; }
.svc-cards__badge:hover span { background: rgba(28, 180, 208, 0.25); border-color: var(--color-teal); transform: translateY(-2px); }
.svc-cards__title { font-family: 'Poppins', sans-serif; font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: var(--color-navy-900); margin: 0 0 1.5rem; word-spacing: normal; }
.svc-cards__highlight { background: linear-gradient(135deg, var(--color-gold) 0%, #FFD452 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900; display: block; margin-top: 0.5rem; }
.svc-cards__subtitle { font-family: 'Poppins', sans-serif; font-size: clamp(1rem, 2.5vw, 1.2rem); line-height: 1.8; color: #666; margin: 0; max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 500; letter-spacing: 0.3px; }
.svc-cards__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.5rem); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 640px) { .svc-cards__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3.5vw, 1.8rem); } }
@media (min-width: 1024px) { .svc-cards__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); } }

/* Mobile Service Sliders */
.svc-cards__mobile-sliders {
  display: none;
}

@media (max-width: 640px) {
  .svc-cards__grid--desktop {
    display: none;
  }

  .svc-cards__mobile-sliders {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .svc-slider {
    position: relative;
  }

  .svc-slider__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    scroll-snap-type: x mandatory;
  }

  .svc-slider__track::-webkit-scrollbar {
    height: 4px;
  }

  .svc-slider__track::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 2px;
  }

  .svc-slider__track::-webkit-scrollbar-thumb {
    background: #1cc4d0;
    border-radius: 2px;
  }

  .svc-slider__item {
    flex: 0 0 calc(100% - 1rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .svc-slider__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(11, 27, 43, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
  }

  .svc-slider__card:active {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }

  .svc-slider__media {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--color-navy-900);
  }

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

  .svc-slider__card:active .svc-slider__media img {
    transform: scale(1.05);
  }

  .svc-slider__content {
    flex: 1;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .svc-slider__tag {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1cc4d0;
    background: rgba(28, 180, 208, 0.1);
    border: 1px solid rgba(28, 180, 208, 0.3);
    padding: 0.3rem 0.6rem;
    border-radius: 50px;
    width: fit-content;
  }

  .svc-slider__title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-navy-900);
    margin: 0;
  }

  .svc-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.2rem 0;
  }

  .svc-slider__arrow {
    background: none;
    border: none;
    color: #1cc4d0;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .svc-slider__arrow:active {
    color: var(--color-gold);
    transform: scale(1.1);
  }

  .svc-slider__dots {
    display: flex;
    gap: 0.4rem;
  }

  .svc-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(28, 180, 208, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
  }

  .svc-slider__dot.active {
    background: #1cc4d0;
    width: 24px;
    border-radius: 4px;
  }
}
.svc-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid rgba(11, 27, 43, 0.15); border-radius: 16px; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); perspective: 1000px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); min-height: 380px; will-change: transform, box-shadow; }
.svc-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 199, 8, 0.15) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 10; }
.svc-card:hover::before { opacity: 1; }
.svc-card:hover { border-color: var(--color-gold); background: #fff; transform: translateY(-8px) scale(1.02); box-shadow: 0 16px 48px rgba(255, 199, 8, 0.12), 0 0 30px rgba(28, 180, 208, 0.06); }
.svc-card:hover .svc-card__media::after { opacity: 0; }
.svc-card:hover .svc-card__base { opacity: 0; pointer-events: none; transform: scale(0.95); }
.svc-card:hover .svc-card__reveal { opacity: 1; pointer-events: auto; transform: translateY(0); }
.svc-card__media { position: relative; width: 100%; height: 240px; overflow: hidden; background: var(--color-navy-900); contain: layout style paint; }
.svc-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 27, 43, 0.3) 0%, rgba(11, 27, 43, 0.8) 100%); transition: opacity 0.3s ease; pointer-events: none; z-index: 2; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; will-change: transform; }
.svc-card:hover .svc-card__media img { transform: scale(1.12) rotate(2deg); }
.svc-card__base { flex: 1; padding: clamp(1.5rem, 4vw, 2rem); display: flex; flex-direction: column; gap: 0.75rem; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 2; align-items: center; text-align: center; }
.svc-card__tag { font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal); background: rgba(28, 180, 208, 0.12); border: 1px solid rgba(28, 180, 208, 0.3); padding: 0.4rem 0.8rem; border-radius: 50px; width: fit-content; margin: 0 auto; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.svc-card:hover .svc-card__tag { background: rgba(255, 199, 8, 0.2); border-color: rgba(255, 199, 8, 0.4); color: var(--color-gold); transform: translateX(4px); }
.svc-card__name { font-family: 'Poppins', sans-serif; font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 700; line-height: 1.2; color: var(--color-navy-900); margin: 0; transition: color 0.3s ease, transform 0.3s ease; letter-spacing: -0.01em; }
.svc-card:hover .svc-card__name { color: var(--color-gold); transform: translateX(4px); }
.svc-card__reveal { position: absolute; inset: 0; padding: clamp(1.5rem, 4vw, 2rem); display: flex; flex-direction: column; gap: 1rem; background: linear-gradient(135deg, rgba(11, 27, 43, 0.98) 0%, rgba(11, 27, 43, 0.92) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 3; justify-content: center; align-items: center; text-align: center; }
.svc-card__reveal .svc-card__tag { background: rgba(28, 180, 208, 0.25); border-color: rgba(28, 180, 208, 0.5); color: var(--color-teal); transform: none; }
.svc-card__reveal .svc-card__name { font-size: clamp(1.2rem, 3.5vw, 1.5rem); color: var(--color-gold); transform: none; }
.svc-card__desc { font-family: 'Poppins', sans-serif; font-size: clamp(0.9rem, 2vw, 1rem); line-height: 1.6; color: #ffffff; margin: 0; opacity: 1; font-weight: 500; }
@keyframes slideInText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.svc-card__reveal .svc-card__desc { animation: slideInText 0.6s ease 0.1s forwards; }
.svc-card__link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--color-teal); margin-top: auto; transition: all 0.3s ease; opacity: 1; letter-spacing: 0.5px; }
.svc-card__reveal .svc-card__link { animation: slideInText 0.6s ease 0.2s forwards; }
.svc-card__link:hover { gap: 1rem; transform: translateX(4px); }
.svc-card__link svg { width: 16px; height: 16px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.svc-card__link:hover svg { transform: translateX(6px) rotate(45deg); }
@media (max-width: 640px) { .svc-card { border-radius: 12px; min-height: 340px; } .svc-card__media { height: 180px; } .svc-card:hover { transform: translateY(-6px) scale(1.01); } .svc-card:hover .svc-card__reveal { opacity: 1; transform: translateY(0); } }
@media (min-width: 640px) and (max-width: 1023px) { .svc-card { min-height: 360px; } .svc-card__media { height: 200px; } }
@media (min-width: 1024px) { .svc-card { min-height: 380px; } .svc-card__media { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .svc-card, .svc-card__media img, .svc-card__link, .svc-card__link svg { transition: none; } .svc-card:hover { transform: none; } .svc-card__desc { animation: none; opacity: 1; } .svc-card__link { animation: none; opacity: 1; } }
@media (prefers-color-scheme: dark) { .svc-card { background: rgba(255, 255, 255, 0.02); border-color: rgba(28, 180, 208, 0.15); } .svc-card:hover { background: rgba(255, 199, 8, 0.05); } }



/* ========================================================================== IMPACT QUOTE — Professional Quote Section with Premium Design *//* ========================================================================== IMPACT QUOTE — Professional Quote Section with Premium Design */
.impact-quote { padding: 2rem var(--space-lg); background: linear-gradient(180deg, var(--color-navy-900) 0%, rgba(11, 27, 43, 0.98) 100%); position: relative; overflow: hidden; }
.impact-quote::before { content: ''; position: absolute; top: -40%; left: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(28, 180, 208, 0.08) 0%, transparent 70%); pointer-events: none; animation: floatBg 20s ease-in-out infinite; }
.impact-quote::after { content: ''; position: absolute; bottom: -40%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 199, 8, 0.06) 0%, transparent 70%); pointer-events: none; animation: floatBg 25s ease-in-out infinite reverse; }
.impact-quote__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
.impact-quote__text { font-family: 'Fraunces', serif; font-size: clamp(0.95rem, 3vw, 1.3rem); line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; font-style: italic; color: #fff; margin: 0; position: relative; animation: fadeInUp 0.8s ease-out both; }
.impact-quote__text::before { content: '"'; position: absolute; left: -0.3em; top: -0.2em; font-size: 0.9em; color: var(--color-gold); opacity: 0.5; }
.impact-quote__text::after { content: '"'; position: absolute; right: -0.3em; bottom: -0.2em; font-size: 0.9em; color: var(--color-gold); opacity: 0.5; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.impact-quote__attribution { display: flex; align-items: center; gap: 1.2rem; animation: fadeInUp 0.8s ease-out 0.2s both; }
.impact-quote__line { display: block; width: 60px; height: 2px; background: linear-gradient(90deg, var(--color-gold) 0%, rgba(255, 199, 8, 0.3) 100%); border-radius: 1px; }
.impact-quote__name { font-family: 'Poppins', sans-serif; font-size: clamp(0.8rem, 1.5vw, 0.95rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); margin: 0; }
@media (max-width: 768px) { .impact-quote { padding: 1.5rem var(--space-md); } .impact-quote__text { font-size: clamp(0.85rem, 4vw, 1.1rem); line-height: 1.4; } .impact-quote__text::before, .impact-quote__text::after { font-size: 0.9em; } .impact-quote__attribution { flex-direction: row; gap: 0.6rem; align-items: center; } .impact-quote__line { width: 30px; } }
@media (max-width: 480px) { .impact-quote { padding: 1.2rem var(--space-md); } .impact-quote__text { font-size: clamp(0.8rem, 3vw, 1rem); } .impact-quote__inner { gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .impact-quote::before, .impact-quote::after, .impact-quote__text, .impact-quote__attribution { animation: none; } }
@media (prefers-color-scheme: dark) { .impact-quote__text { color: rgba(255, 255, 255, 0.95); } .impact-quote__name { color: var(--color-gold); } }



/* ========================================================================== NEWS CARDS — Latest News & Updates with Loop Display */
.news { padding: clamp(3rem, 6vw, 5rem) var(--space-lg); background: #fff !important; position: relative; overflow: hidden; }
.news::before { content: ''; position: absolute; top: -30%; left: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(28, 180, 208, 0.06) 0%, transparent 70%); pointer-events: none; animation: floatBg 20s ease-in-out infinite; }
.news::after { content: ''; position: absolute; bottom: -30%; right: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 199, 8, 0.05) 0%, transparent 70%); pointer-events: none; animation: floatBg 25s ease-in-out infinite reverse; }
.news__container { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; }
.news__header { text-align: center; margin-bottom: 2rem; }
.news__title { font-family: 'Poppins', sans-serif; font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #0b1f33 !important; margin: 0 0 1.5rem; }
.news__subtitle { font-family: 'Poppins', sans-serif; font-size: clamp(0.95rem, 2.5vw, 1.1rem); line-height: 1.8; color: #3a4a5c; margin: 0; max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 500; letter-spacing: 0.3px; }
.news__slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(2rem, 4vw, 2.5rem); margin-bottom: clamp(3rem, 8vw, 4rem); }
@media (max-width: 1024px) { .news__slider { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .news { padding: 3.5rem var(--space-md); } .news__header { margin-bottom: 2.5rem; } .news__slider { grid-template-columns: 1fr; gap: 1.5rem; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .news__slider::-webkit-scrollbar { height: 6px; } .news__slider::-webkit-scrollbar-track { background: rgba(28, 180, 208, 0.1); border-radius: 3px; } .news__slider::-webkit-scrollbar-thumb { background: rgba(28, 180, 208, 0.3); border-radius: 3px; } .news__slider::-webkit-scrollbar-thumb:hover { background: rgba(28, 180, 208, 0.5); } .upd-card { flex: 0 0 85vw; scroll-snap-align: start; scroll-snap-stop: always; } }
.upd-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #eef4f8 !important; border: 2px solid #1cc4d0 !important; border-radius: 16px; overflow: hidden; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 6px 20px rgba(28, 180, 208, 0.12) !important; text-decoration: none; color: inherit; cursor: pointer; }
.upd-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-gold) 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; }
.upd-card:hover::before { transform: scaleX(1); }
.upd-card:hover { border-color: var(--color-teal); background: #fff; box-shadow: 0 20px 60px rgba(28, 180, 208, 0.15), 0 0 40px rgba(28, 180, 208, 0.1); transform: translateY(-12px) scale(1.02); }
.upd-card__media { position: relative; display: block; width: 100%; height: 180px; overflow: hidden; background: var(--color-navy-900); }
.upd-card__media::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; z-index: 2; }
.upd-card__media img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; }
.upd-card:hover .upd-card__media img { transform: scale(1.1) rotate(1deg); }
.upd-card__tag { position: absolute; top: 1rem; left: 1rem; display: inline-block; font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--color-teal) 0%, rgba(28, 180, 208, 0.8) 100%); border: none; padding: 0.5rem 1rem; border-radius: 50px; z-index: 2; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(28, 180, 208, 0.2); }
.upd-card:hover .upd-card__tag { background: linear-gradient(135deg, var(--color-gold) 0%, rgba(255, 199, 8, 0.8) 100%); transform: translateY(-4px); box-shadow: 0 6px 20px rgba(255, 199, 8, 0.3); }
.upd-card__body { flex: 1; padding: clamp(1.5rem, 4vw, 1.8rem); display: flex; flex-direction: column; gap: 0.8rem; }
.upd-card__date { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; color: #1cc4d0 !important; text-transform: uppercase; transition: all 0.3s ease; }
.upd-card:hover .upd-card__date { color: var(--color-gold); }
.upd-card__title { font-family: 'Poppins', sans-serif; font-size: clamp(1.1rem, 2.8vw, 1.3rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: #0b1f33 !important; margin: 0; transition: all 0.3s ease; }
.upd-card__title a { color: #0b1f33 !important; text-decoration: none; transition: all 0.3s ease; }
.upd-card:hover .upd-card__title a { color: var(--color-gold); }
.upd-card__excerpt { font-family: 'Poppins', sans-serif; font-size: 0.9rem; line-height: 1.5; color: #2c3e50 !important; margin: 0; font-weight: 500; flex-grow: 1; }
.upd-card__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: auto; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--color-gold) !important; text-decoration: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); letter-spacing: 0.5px; width: fit-content; }
.upd-card:hover .upd-card__link { color: var(--color-gold); gap: 1rem; }
.upd-card__link svg { width: 15px; height: 15px; stroke: currentColor; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.upd-card:hover .upd-card__link svg { transform: translateX(4px) rotate(45deg); }
.news__footer { text-align: right; }
.news__view-all { display: inline-flex; align-items: center; gap: 0.8rem; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(0.95rem, 2vw, 1.1rem); color: var(--color-navy-900); text-decoration: none; padding: 1rem 2rem; border: 2px solid var(--color-teal); border-radius: 50px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); letter-spacing: 0.5px; }
.news__view-all:hover { background: var(--color-gold); color: #0b1f33; border-color: var(--color-gold); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(255, 199, 8, 0.2); }
.news__view-all svg { width: 16px; height: 16px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.news__view-all:hover svg { transform: translateX(6px) rotate(45deg); }
@media (max-width: 640px) { .upd-card__media { height: 160px; } .upd-card:hover { transform: translateY(-6px) scale(1.01); } .news__view-all { padding: 0.9rem 1.5rem; font-size: 0.9rem; } }
@media (prefers-reduced-motion: reduce) { .upd-card, .upd-card__media img, .upd-card__tag, .upd-card__link, .upd-card__link svg, .news__view-all, .news__view-all svg { transition: none; } .upd-card:hover { transform: none; } .upd-card::before { animation: none; } }
@media (prefers-color-scheme: dark) { .news { background: rgba(11, 27, 43, 0.95); } .upd-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(28, 180, 208, 0.2); } .upd-card__title a { color: rgba(255, 255, 255, 0.95); } .upd-card__excerpt { color: rgba(255, 255, 255, 0.7); } .news__title { color: #fff; } .news__subtitle { color: rgba(255, 255, 255, 0.7); } }


/* ========================================================================== CLIENT CAROUSEL — Continuous Horizontal Scrolling */
.client-carousel {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 1%, black 99%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 1%, black 99%, transparent 100%);
}

.client-wall {
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: linear-gradient(180deg, rgba(236, 242, 247, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.client-wall__header {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.client-wall__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.client-wall__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 500;
  color: var(--color-navy-900);
  line-height: 1.2;
  margin: 0;
}

.client-carousel__track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  animation: scroll-clients 40s linear infinite;
  width: max-content;
  padding: clamp(2rem, 5vw, 3rem) 0;
}

.client-carousel:hover .client-carousel__track {
  animation-play-state: paused;
}

@keyframes scroll-clients {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - clamp(1.5rem, 3vw, 2.5rem) / 2));
  }
}

.client-carousel__card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  width: 180px;
  height: 130px;
  background: linear-gradient(135deg, #eef4f8, #f5fafb);
  border: 2px solid #1cc4d0;
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.client-carousel__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.08) 0%, rgba(255, 199, 8, 0.04) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.client-carousel__card:hover {
  border-color: var(--color-teal);
  background: #fff;
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 35px rgba(28, 180, 208, 0.15);
}

.client-carousel__card:hover::before {
  opacity: 1;
}

.client-carousel__logo {
  max-width: 80%;
  max-height: 80%;
  height: auto;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
  display: block;
}

.client-carousel__card:hover .client-carousel__logo {
  transform: scale(1.1);
}

.client-carousel__name-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #0b1f33 !important;
  letter-spacing: -0.01em;
  word-break: break-word;
  padding: 0.5rem;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.client-carousel__card:hover .client-carousel__name-fallback {
  color: var(--color-gold);
}

@media (max-width: 768px) {
  .client-carousel__card {
    min-width: 160px;
    width: 160px;
    height: 120px;
    padding: 1rem;
  }

  .client-carousel__track {
    gap: 1rem;
  }

  @keyframes scroll-clients {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - 0.5rem));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-carousel__track {
    animation: none;
  }

  .client-carousel__card,
  .client-carousel__logo {
    transition: none;
  }

  .client-carousel__card:hover {
    transform: none;
  }
}


/* ==========================================================================
   FEATURED NEWS CARDS — Modern Clean Design with Animations
   ========================================================================== */

.featured-news-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (min-width: 992px) {
  .featured-news-container {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-xl);
  }
}

/* FEATURED CARD - LARGE */
.featured-card--large {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-med), transform var(--transition-med);
  min-height: 350px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.featured-card--large:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.featured-card__image-wrapper {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: var(--color-gray-200);
}

.featured-card--large .featured-card__image-wrapper {
  height: 320px;
}

.featured-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-med);
}

.featured-card:hover .featured-card__image {
  transform: scale(1.06);
}

.featured-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  z-index: 1;
}

.featured-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 3;
  display: inline-block;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.featured-card__badge--small {
  top: var(--space-sm);
  left: var(--space-sm);
  font-size: 0.65rem;
  padding: 0.35rem 0.7rem;
}

.featured-card__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--color-white);
  z-index: 2;
}

.featured-card__content--small {
  padding: var(--space-md);
}

.featured-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-600);
}

.featured-card__meta--small {
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.featured-card__date {
  color: var(--color-gray-600);
}

.featured-card__read-time {
  color: var(--color-gray-500);
}

.featured-card__date::after {
  content: '•';
  margin-left: var(--space-sm);
  color: var(--color-gray-400);
}

.featured-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy-900);
  margin-bottom: var(--space-md);
  transition: color var(--transition-fast);
}

.featured-card--large .featured-card__title {
  font-size: 1.8rem;
}

.featured-card__title--small {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.featured-card:hover .featured-card__title {
  color: var(--color-white);
}

.featured-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  margin-bottom: var(--space-md);
  flex-grow: 1;
}

.featured-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  transition: gap var(--transition-fast), color var(--transition-fast);
  width: fit-content;
  margin-top: auto;
}

.featured-card__cta--small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
  margin: 0;
}

.featured-card__cta:hover {
  gap: var(--space-md);
  color: var(--color-navy-900);
}

.featured-card__cta--small:hover {
  background: var(--color-navy-900);
}

.featured-card__arrow {
  stroke-width: 2.5;
  transition: transform var(--transition-fast);
}

.featured-card__cta:hover .featured-card__arrow {
  transform: translateX(2px);
}

/* FEATURED CARDS ROW - Two smaller cards side by side */
.featured-cards-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .featured-cards-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

.featured-card--small {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-med), transform var(--transition-med);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.featured-card--small:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.featured-card--small .featured-card__image-wrapper {
  height: 200px;
}





@media (min-width: 768px) {
  .news-featured-card--secondary .news-featured-card__title {
    font-size: 1.2rem;
  }
}

.news-featured-card:hover .news-featured-card__title {
  color: var(--color-white);
}

/* EXCERPT */
.news-featured-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  margin-bottom: var(--space-md);
  flex-grow: 1;
}

@media (min-width: 768px) {
  .news-featured-card__excerpt {
    font-size: 1rem;
    margin-bottom: var(--space-lg);
  }
}

/* FOOTER SECTION */
.news-featured-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* PRIMARY LINK/CTA */
.news-featured-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  transition: all var(--transition-fast);
  margin-top: auto;
}

.news-featured-card--secondary .news-featured-card__link {
  display: none;
}

.news-featured-card__link:hover {
  gap: var(--space-md);
  color: var(--color-navy-900);
}

.news-featured-card__link svg {
  transition: transform var(--transition-fast);
}

.news-featured-card__link:hover svg {
  transform: translateX(3px);
}

/* ICON LINK (For secondary cards) */
.news-featured-card__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-teal) 0%, #16a8ba 100%);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(28, 180, 208, 0.2);
  text-decoration: none;
}

.news-featured-card__icon-link:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(28, 180, 208, 0.3);
}

.news-featured-card__icon-link svg {
  transition: transform var(--transition-fast);
}

.news-featured-card__icon-link:hover svg {
  transform: translateX(2px);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .featured-news-showcase__title {
    font-size: 1.6rem;
  }

  .news-featured-card--hero {
    min-height: 380px;
  }

  .news-featured-card--secondary {
    min-height: 400px;
  }

  .news-featured-card__title {
    font-size: 1.2rem;
  }

  .news-featured-card--secondary .news-featured-card__title {
    font-size: 1rem;
  }
}




/* ==========================================================================
   ULTRA-PREMIUM NEWS SHOWCASE — Avant-Garde High-End Design
   ========================================================================== */

.premium-news-showcase {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fb 50%, #eef2f8 100%);
  overflow: hidden;
  min-height: 600px;
}

@media (max-width: 768px) {
  .premium-news-showcase {
    padding: 60px 0;
    min-height: auto;
  }
}

.premium-news-showcase__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.premium-news-showcase__particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.03;
  pointer-events: none;
}

.premium-news-showcase__particle--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--color-teal), transparent);
  top: -300px;
  right: -200px;
  animation: float 15s ease-in-out infinite;
}

.premium-news-showcase__particle--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-gold), transparent);
  bottom: -150px;
  left: -100px;
  animation: float 20s ease-in-out infinite reverse;
}

.premium-news-showcase__particle--3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--color-navy-900), transparent);
  top: 50%;
  right: 10%;
  animation: float 25s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(30px); }
}

/* HEADER - Premium Line Design */
.premium-news-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.premium-news-header__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gray-400), transparent);
}

.premium-news-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

/* TITLE - Animated Split Design */
.premium-news-title {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .premium-news-title {
    font-size: 2.2rem;
    margin-bottom: 2.5rem;
  }
}

.premium-news-title__word {
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--color-navy-900);
  transition: all 0.3s ease;
}

.premium-news-title__word--highlight {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.premium-news-title__word--highlight::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-gold));
  border-radius: 2px;
  opacity: 0.6;
}

/* PREMIUM GRID LAYOUT */
.premium-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .premium-news-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .premium-news-grid {
    grid-template-columns: 1.8fr 1fr;
    gap: 3rem;
  }
}

/* PRIMARY FEATURE CARD */
.premium-card--feature {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 480px;
}

@media (max-width: 768px) {
  .premium-card--feature {
    min-height: 420px;
  }
}

.premium-card--feature:hover {
  box-shadow: 0 30px 60px rgba(28, 180, 208, 0.15);
  transform: translateY(-12px);
}

.premium-card__inner {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  position: relative;
}

.premium-card__media {
  position: relative;
  overflow: hidden;
  height: 280px;
  background: var(--color-gray-200);
}

@media (min-width: 768px) {
  .premium-card__media {
    height: 320px;
  }
}

.premium-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: kenBurnsPremiumCard 6s ease-out forwards;
  transform-origin: center;
}

.premium-card--feature:hover .premium-card__image {
  transform: scale(1.1) rotate(1deg);
}

.premium-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.1), rgba(255, 193, 7, 0.05));
  opacity: 0;
  transition: opacity 0.6s ease;
}

.premium-card--feature:hover .premium-card__media-overlay {
  opacity: 1;
}

.premium-card__shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* CARD CONTENT */
.premium-card__content {
  padding: 2rem;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

@media (min-width: 768px) {
  .premium-card__content {
    padding: 2.5rem;
  }
}

.premium-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.premium-card__category {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-teal) 0%, #16a8ba 100%);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(28, 180, 208, 0.2);
}

.premium-card__meta {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  font-weight: 600;
}

.premium-card__title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy-900);
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

@media (min-width: 768px) {
  .premium-card__title {
    font-size: 1.9rem;
  }
}

.premium-card--feature:hover .premium-card__title {
  color: var(--color-white);
}

.premium-card__title--feature {
  font-size: 1.8rem;
}

@media (max-width: 768px) {
  .premium-card__title--feature {
    font-size: 1.5rem;
  }
}

.premium-card__description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* PRIMARY CTA BUTTON */
.premium-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--color-teal) 0%, #16a8ba 100%);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  width: fit-content;
  box-shadow: 0 4px 15px rgba(28, 180, 208, 0.3);
}

.premium-card__btn:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 25px rgba(28, 180, 208, 0.4);
}

.premium-card__btn-icon {
  transition: transform 0.3s ease;
}

.premium-card__btn:hover .premium-card__btn-icon {
  transform: translateX(2px);
}

/* COMPACT CARDS STACK */
.premium-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .premium-cards-stack {
    gap: 1.8rem;
  }
}

.premium-card--compact {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-white);
  height: 280px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
  .premium-card--compact {
    height: 240px;
  }
}

.premium-card--compact:hover {
  box-shadow: 0 20px 50px rgba(28, 180, 208, 0.12);
  transform: translateY(-8px) rotateX(3deg);
}

.premium-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease-out;
}

.premium-card--compact:hover .premium-card__image {
  transform: scale(1.12) rotate(2deg);
}

.premium-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(28, 180, 208, 0.2));
  opacity: 0.8;
  transition: opacity 0.5s ease;
}

.premium-card--compact:hover .premium-card__overlay {
  opacity: 0.6;
}

.premium-card__number {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.15);
  z-index: 2;
  font-family: var(--font-display);
}

.premium-card__compact-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  z-index: 3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

@media (min-width: 768px) {
  .premium-card__compact-content {
    padding: 2rem;
  }
}

.premium-card__title--compact {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.35;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}

@media (min-width: 768px) {
  .premium-card__title--compact {
    font-size: 1.25rem;
  }
}

.premium-card--compact:hover .premium-card__title--compact {
  color: var(--color-gold);
}

.premium-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.premium-card__date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.premium-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold) 0%, #ffb300 100%);
  color: var(--color-navy-900);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  text-decoration: none;
}

.premium-card__icon-btn:hover {
  transform: scale(1.15) rotate(-10deg);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
}

.premium-card__icon-btn svg {
  transition: transform 0.3s ease;
}

.premium-card__icon-btn:hover svg {
  transform: translateX(2px);
}

/* Mobile Adjustments */
@media (max-width: 640px) {
  .premium-news-title {
    font-size: 1.8rem;
  }

  .premium-card__title--feature {
    font-size: 1.3rem;
  }

  .premium-card__description {
    font-size: 0.9rem;
  }

  .premium-card--compact {
    height: 220px;
  }

  .premium-card__title--compact {
    font-size: 1rem;
  }
}



/* ==========================================================================
   PROJECTS SHOWCASE — Mobile-First Featured Carousel + Sidebar
   ========================================================================== */

/* Section Container */
.projects-showcase {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.projects-showcase .container-xl {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Project Buttons Row - Mobile First */
.projects-carousel__buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
  margin-left: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 1rem;
}

.projects-carousel__buttons::-webkit-scrollbar {
  height: 4px;
}

.projects-carousel__buttons::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 2px;
}

.projects-carousel__buttons::-webkit-scrollbar-thumb {
  background: #1cb4d0;
  border-radius: 2px;
}

.projects-carousel__buttons::-webkit-scrollbar-thumb:hover {
  background: #0d9db5;
}

.projects-carousel__button {
  padding: 0.6rem 1.2rem;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  color: #0b1f33;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.projects-carousel__button:hover {
  border-color: #1cb4d0;
  color: #1cb4d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 180, 208, 0.2);
}

.projects-carousel__button--active {
  background: linear-gradient(135deg, #1cb4d0 0%, #0d9db5 100%);
  color: white;
  border-color: #1cb4d0;
  box-shadow: 0 4px 16px rgba(28, 180, 208, 0.3);
}

/* Description Slider Container */
.projects-carousel__description-slider {
  min-height: 140px;
  max-height: 200px;
  overflow-y: auto;
  margin: 1.5rem 0;
  padding-right: 0.5rem;
  border-left: 3px solid #1cb4d0;
  padding-left: 1rem;
}

.projects-carousel__description-content {
  width: 100%;
}

.projects-carousel__description {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin: 0;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Custom scrollbar for description */
.projects-carousel__description-slider::-webkit-scrollbar {
  width: 6px;
}

.projects-carousel__description-slider::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.projects-carousel__description-slider::-webkit-scrollbar-thumb {
  background: #1cb4d0;
  border-radius: 3px;
}

.projects-carousel__description-slider::-webkit-scrollbar-thumb:hover {
  background: #0d9db5;
}

/* Responsive description slider */
@media (min-width: 768px) {
  .projects-carousel__description-slider {
    min-height: 160px;
    max-height: 240px;
  }
}

@media (min-width: 1024px) {
  .projects-carousel__description-slider {
    min-height: 180px;
    max-height: 280px;
  }
}

/* Section Header */
.projects-showcase__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.projects-showcase__header-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1cb4d0, transparent);
  min-width: 40px;
  max-width: 80px;
}

.projects-showcase__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #1cb4d0;
  white-space: nowrap;
}

/* Title */
.projects-showcase__title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.2;
  color: #1a1a1a;
}

.projects-showcase__title-word {
  display: inline;
}

.projects-showcase__title-word--highlight {
  background: linear-gradient(135deg, #1cb4d0 0%, #0d9db5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 0.85em;
  display: block;
}

/* Main Grid: Mobile First (Full Width Stack) */
.projects-showcase__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

/* Carousel Wrapper */
.projects-carousel-wrapper {
  width: 95%;
  max-width: 900px;
  margin: 0 auto;
}

/* ===============================================================================
   FEATURED PROJECT CAROUSEL — Mobile-First Layout
   =============================================================================== */

.projects-carousel {
  position: relative;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.projects-carousel__slides {
  position: relative;
  width: 100%;
  min-height: 500px;
}

.projects-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Mobile-first: Stack vertically on mobile */
.projects-carousel__media-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

.projects-carousel__media {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
  order: 1;
}

.projects-carousel__gallery {
  order: 2;
  width: 100%;
}

.projects-carousel__content {
  order: 3;
  width: 100%;
  padding: 1.5rem;
}

/* Tablet and Desktop: Horizontal layout */
@media (min-width: 768px) {
  .projects-carousel__slide {
    flex-direction: row;
    gap: 0;
  }

  .projects-carousel__media-column {
    width: 50%;
    height: 100%;
    order: 1;
  }

  .projects-carousel__media {
    width: 100%;
    height: 50%;
  }

  .projects-carousel__gallery {
    width: 100%;
    height: 50%;
  }

  .projects-carousel__content {
    width: 50%;
    order: 2;
    padding: 2.5rem;
  }
}

.projects-carousel__slide--active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transition-delay: 0.1s;
}

/* Media Section */
.projects-carousel__media {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
}

.projects-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.projects-carousel__slide--active .projects-carousel__image {
  transform: scale(1.05);
}

.projects-carousel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
}

.projects-carousel__badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: #1cb4d0;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(28, 180, 208, 0.3);
}

/* Content Section */
.projects-carousel__content {
  padding: 2rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.projects-carousel__meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.projects-carousel__category,
.projects-carousel__location {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1cb4d0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.projects-carousel__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.projects-carousel__description {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* Stats Section */
.projects-carousel__stats {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  align-items: flex-start;
  justify-content: space-between;
}

.projects-carousel__stat {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.projects-carousel__stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin-bottom: 0.5rem;
}

.projects-carousel__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1cb4d0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Location stat pushed to right */
.projects-carousel__stat--right {
  margin-left: auto;
}

/* CTA Button */
.projects-carousel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #1cb4d0 0%, #0d9db5 100%);
  color: white;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
  text-decoration: none;
}

.projects-carousel__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(28, 180, 208, 0.4);
}

.projects-carousel__cta:active {
  transform: translateY(0);
}

/* Gallery Section */
.projects-carousel__gallery {
  margin-top: 1.5rem;
  margin-bottom: 0;
  width: 100%;
  padding: 1rem;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.projects-carousel__gallery-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  margin-bottom: 0.5rem;
  display: block;
}

.projects-carousel__gallery-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.projects-carousel__gallery-scroll::-webkit-scrollbar {
  height: 4px;
}

.projects-carousel__gallery-scroll::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 10px;
}

.projects-carousel__gallery-scroll::-webkit-scrollbar-thumb {
  background: #1cb4d0;
  border-radius: 10px;
}

.projects-carousel__gallery-scroll::-webkit-scrollbar-thumb:hover {
  background: #0d9db5;
}

.projects-carousel__gallery-container {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  min-width: min-content;
}

/* Mobile-first: Smaller thumbnails on mobile */
.projects-carousel__gallery-item {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  border: 1px solid #e0e0e0;
}

.projects-carousel__gallery-item:hover {
  transform: scale(1.1);
  border-color: #1cb4d0;
}

.projects-carousel__gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.projects-carousel__gallery-item:hover .projects-carousel__gallery-thumb {
  opacity: 0.8;
}

.projects-carousel__gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 180, 208, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.projects-carousel__gallery-item:hover .projects-carousel__gallery-overlay {
  opacity: 1;
}

.projects-carousel__gallery-overlay svg {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

/* Tablet: Increase thumbnail size */
@media (min-width: 600px) {
  .projects-carousel__gallery-item {
    width: 90px;
    height: 90px;
  }

  .projects-carousel__gallery-container {
    gap: 0.6rem;
  }
}

/* Desktop: Larger thumbnails */
@media (min-width: 768px) {
  .projects-carousel__gallery {
    padding: 1.2rem;
  }

  .projects-carousel__gallery-item {
    width: 110px;
    height: 110px;
  }

  .projects-carousel__gallery-container {
    gap: 0.75rem;
  }

  .projects-carousel__gallery-label {
    font-size: 0.75rem;
    margin-bottom: 0.6rem;
  }
}

/* Large Desktop: Even larger thumbnails */
@media (min-width: 1024px) {
  .projects-carousel__gallery-item {
    width: 130px;
    height: 130px;
  }

  .projects-carousel__gallery-container {
    gap: 0.9rem;
  }
}

/* Lightbox Modal */
.projects-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1rem;
}

.projects-lightbox--active {
  opacity: 1;
  visibility: visible;
}

.projects-lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.projects-lightbox__image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.projects-lightbox__close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.projects-lightbox__close:hover {
  transform: scale(1.2);
}

.projects-lightbox__caption {
  color: white;
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .projects-carousel__gallery-item {
    width: 100px;
    height: 100px;
  }

  .projects-lightbox__close {
    top: 10px;
    right: 10px;
  }

  .projects-lightbox__image {
    max-height: 70vh;
  }
}

/* Sidebar Gallery Styles */
.projects-sidebar__gallery-section {
  margin-bottom: 2rem;
}

.projects-sidebar__gallery-wrapper {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  overflow-y: auto;
  max-height: 500px;
}

.projects-sidebar__gallery-wrapper::-webkit-scrollbar {
  width: 6px;
}

.projects-sidebar__gallery-wrapper::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 10px;
}

.projects-sidebar__gallery-wrapper::-webkit-scrollbar-thumb {
  background: #1cb4d0;
  border-radius: 10px;
}

.projects-sidebar__gallery-wrapper::-webkit-scrollbar-thumb:hover {
  background: #0d9db5;
}

.projects-sidebar__gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.projects-sidebar__gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.projects-sidebar__gallery-item:hover {
  transform: scale(1.05);
}

.projects-sidebar__gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.projects-sidebar__gallery-item:hover .projects-sidebar__gallery-thumb {
  opacity: 0.7;
}

.projects-sidebar__gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 180, 208, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.projects-sidebar__gallery-item:hover .projects-sidebar__gallery-overlay {
  opacity: 1;
}

.projects-sidebar__gallery-overlay svg {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
  .projects-sidebar__gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }

  .projects-sidebar__gallery-wrapper {
    max-height: 300px;
    padding: 0.75rem;
  }
}

/* Navigation Dots */
.projects-carousel__nav {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8f9fa;
  flex-wrap: wrap;
  justify-content: center;
}

.projects-carousel__dot {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  transition: all 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.projects-carousel__dot:hover {
  border-color: #1cb4d0;
  color: #1cb4d0;
  background: #f0f8fa;
}

.projects-carousel__dot--active {
  background: linear-gradient(135deg, #1cb4d0 0%, #0d9db5 100%);
  color: white;
  border-color: #1cb4d0;
}

.projects-carousel__dot-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===============================================================================
   PROJECTS SIDEBAR — Reports & Publications (Mobile: Full Width)
   =============================================================================== */

.projects-sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.projects-sidebar__section {
  background: white;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.projects-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.projects-sidebar__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.projects-sidebar__count {
  background: #1cb4d0;
  color: white;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
}

.projects-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.projects-sidebar__item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  align-items: flex-start;
  border: 1px solid transparent;
}

.projects-sidebar__item:hover {
  background: #f0f8fa;
  border-color: #1cb4d0;
  transform: translateX(4px);
}

.projects-sidebar__item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1cb4d0;
  font-size: 1.25rem;
}

.projects-sidebar__item-content {
  flex: 1;
  min-width: 0;
}

.projects-sidebar__item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.25rem 0;
  line-height: 1.4;
  white-space: normal;
}

.projects-sidebar__item-meta {
  font-size: 0.8rem;
  color: #888;
  margin: 0;
}

.projects-sidebar__item-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
}

.projects-sidebar__action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1cb4d0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.projects-sidebar__action-btn:hover {
  background: #1cb4d0;
  color: white;
  transform: scale(1.1);
}

/* ===============================================================================
   RESPONSIVE DESIGN — Tablet & Desktop
   =============================================================================== */

@media (min-width: 768px) {
  .projects-showcase {
    padding: 6rem 2rem;
  }

  .projects-showcase__title {
    font-size: 3rem;
    margin-bottom: 4rem;
  }

  /* Tablet: Increase carousel wrapper width */
  .projects-carousel-wrapper {
    width: 98%;
    margin: 0 auto;
  }

  /* Tablet: Increase button size and padding */
  .projects-carousel__buttons {
    gap: 1rem;
    margin-left: 0;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .projects-carousel__button {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }

  /* Desktop: 3/4 Left + 1/4 Right Layout */
  .projects-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
  }

  .projects-carousel-wrapper {
    grid-column: 1 / 3;
  }

  .projects-sidebar {
    grid-column: 3;
    gap: 1.5rem;
    flex-direction: column;
  }

  .projects-carousel__slides {
    min-height: 600px;
  }

  .projects-carousel__media {
    height: 380px;
  }

  .projects-carousel__content {
    padding: 3rem;
  }

  .projects-carousel__title {
    font-size: 2rem;
  }

  .projects-carousel__description {
    font-size: 1.05rem;
  }

  .projects-carousel__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .projects-carousel__dot {
    padding: 0.9rem 1.75rem;
  }
}

@media (min-width: 1024px) {
  /* Large Desktop: Increase carousel wrapper width further */
  .projects-carousel-wrapper {
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .projects-showcase {
    padding: 2.5rem 1rem;
  }

  .projects-showcase__title {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }

  .projects-showcase__header-line {
    max-width: 50px;
  }

  .projects-carousel__media {
    height: 240px;
  }

  .projects-carousel__slides {
    min-height: 400px;
  }

  .projects-carousel__content {
    padding: 1.5rem;
  }

  .projects-carousel__title {
    font-size: 1.375rem;
  }

  .projects-carousel__description {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .projects-carousel__stats {
    gap: 1rem;
    padding: 1rem 0;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .projects-carousel__stat-value {
    font-size: 1rem;
  }

  .projects-carousel__nav {
    padding: 1rem;
    gap: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .projects-carousel__nav::-webkit-scrollbar {
    display: none;
  }

  .projects-carousel__dot {
    padding: 0.65rem 1rem;
    font-size: 0.8rem;
    min-height: 40px;
  }

  .projects-sidebar__section {
    padding: 1.5rem;
  }

  .projects-sidebar__item-icon {
    width: 36px;
    height: 36px;
  }

  .projects-sidebar__item-title {
    font-size: 0.9rem;
  }
}


/* ========================================================================
   PROJECTS GRID SECTION — "Explore More Projects" styling
   ======================================================================== */

.projects-grid-section {
  padding: 3rem 0;
  background: white;
}

.projects-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.projects-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0b1f33;
  margin: 0;
}

/* ===============================================================================
   PROJECT CARDS - Clickable Grid Cards with Read More
   =============================================================================== */

.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(28, 180, 208, 0.15);
}

.project-card__media {
  position: relative;
  width: 100%;
  padding-bottom: 66.67%;
  overflow: hidden;
  background: #f0f0f0;
}

.project-card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card:hover .project-card__media img {
  transform: scale(1.08);
}

.project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.7) 0%, rgba(13, 157, 181, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.project-card:hover .project-card__overlay {
  opacity: 1;
}

.project-card__cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  font-family: 'Poppins', sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

.project-card:hover .project-card__cta {
  opacity: 1;
}

.project-card__body {
  padding: 1.5rem 1.25rem;
  background: white;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  line-height: 1.3;
}

.project-card__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}

/* Responsive project cards */
@media (max-width: 640px) {
  .project-card__body {
    padding: 1.25rem 1rem;
  }

  .project-card__title {
    font-size: 1rem;
  }

  .project-card__desc {
    font-size: 0.85rem;
  }

  .project-card__cta {
    font-size: 1rem;
  }
}

/* ===============================================================================
   SINGLE PROJECT PAGE - Professional Layout
   =============================================================================== */

.project-detail {
  padding: 4rem 0;
  background: #f8f9fa;
}

.project-detail__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: flex-start;
  margin-bottom: 4rem;
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.project-detail__image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4/3;
}

.project-detail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-detail__hero:hover .project-detail__image {
  transform: scale(1.04);
}

.project-detail__badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-detail__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.project-detail__meta-item {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.project-detail__meta-item:last-child {
  border-bottom: none;
}

.project-detail__meta-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1CB4D0;
  margin-bottom: 0.5rem;
  font-family: 'Poppins', sans-serif;
}

.project-detail__meta-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-navy-900);
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

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

.project-detail__text {
  background: white;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.project-detail__section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #1CB4D0;
}

.project-detail__body-text {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-ink-soft);
  line-height: 1.8;
  letter-spacing: 0.3px;
}

.project-detail__body-text p {
  margin-bottom: 1.5rem;
}

.project-detail__body-text p:last-child {
  margin-bottom: 0;
}

.project-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.project-detail__sidebar-card {
  background: white;
  padding: 1.75rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #1CB4D0;
}

.project-detail__sidebar-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0 0 1rem 0;
}

.project-detail__detail-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project-detail__detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.project-detail__detail-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.project-detail__detail-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.project-detail__detail-value {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1CB4D0;
}

.project-detail__share-buttons {
  display: flex;
  gap: 0.75rem;
}

.project-detail__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #f0f8fa;
  color: #1CB4D0;
  transition: all 0.3s ease;
  border: 1px solid #d0e8f0;
}

.project-detail__share-btn:hover {
  background: #1CB4D0;
  color: white;
  transform: translateY(-2px);
}

/* Related Projects Section */
.related-projects {
  padding: 4rem 0;
  background: white;
}

.related-projects__header {
  text-align: center;
  margin-bottom: 3rem;
}

.related-projects__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
}

.related-projects__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin: 0.75rem 0 0 0;
}

.project-card-related {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.project-card-related:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(28, 180, 208, 0.2);
}

.project-card-related__image {
  position: relative;
  width: 100%;
  padding-bottom: 66.67%;
  overflow: hidden;
  background: #f0f0f0;
}

.project-card-related__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card-related:hover .project-card-related__image img {
  transform: scale(1.1);
}

.project-card-related__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 180, 208, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card-related:hover .project-card-related__overlay {
  opacity: 1;
}

.project-card-related__body {
  padding: 1.5rem;
  background: white;
}

.project-card-related__location {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1CB4D0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  font-family: 'Poppins', sans-serif;
}

.project-card-related__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .project-detail__hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }

  .project-detail__meta {
    grid-template-columns: 1fr;
  }

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

  .project-detail__text {
    padding: 2rem;
  }

  .project-detail__section-title {
    font-size: 1.5rem;
  }

  .related-projects__title {
    font-size: 1.5rem;
  }

  .project-cta__title {
    font-size: 1.5rem;
  }
}

@media (max-width: 640px) {
  .project-detail {
    padding: 2rem 0;
  }

  .project-detail__hero {
    padding: 1.5rem;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .project-detail__meta {
    gap: 1rem;
  }

  .project-detail__meta-value {
    font-size: 0.95rem;
  }

  .project-detail__section-title {
    font-size: 1.25rem;
  }

  .project-detail__body-text {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .project-detail__sidebar-card {
    padding: 1.5rem;
  }

  .related-projects {
    padding: 2rem 0;
  }

  .project-cta {
    padding: 2rem 0;
  }

  .project-cta__title {
    font-size: 1.25rem;
  }

  .project-cta__text {
    font-size: 0.9rem;
  }
}

/* ===============================================================================
   ABOUT PAGE - Modern Professional Design with High-End Effects
   =============================================================================== */

/* ---- About Overview Section ---- */
.about-overview {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.about-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-overview__image-wrapper {
  position: relative;
}

.about-overview__image-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 20px 60px rgba(28, 180, 208, 0.15);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.about-overview__image-container:hover {
  box-shadow: 0 30px 80px rgba(28, 180, 208, 0.25);
  transform: translateY(-4px);
}

.about-overview__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.about-overview__image-container:hover .about-overview__image {
  transform: scale(1.05);
}

.about-overview__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0) 0%, rgba(28, 180, 208, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.about-overview__image-container:hover .about-overview__image-overlay {
  opacity: 1;
}

.about-overview__badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
  padding: 1.75rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(28, 180, 208, 0.3);
  max-width: 160px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.about-overview__badge-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.about-overview__badge-text {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3px;
}

.about-overview__content {
  padding: 2rem 0;
}

.about-overview__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.about-overview__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-navy-900);
  margin: 0 0 1.5rem 0;
}

.about-overview__highlight {
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-overview__text {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-ink-soft);
  margin: 0 0 1.5rem 0;
  letter-spacing: 0.3px;
}

.about-overview__highlights {
  list-style: none;
  padding: 2rem 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-overview__highlights li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: var(--color-navy-900);
  font-weight: 600;
}

.about-overview__highlights svg {
  color: #1CB4D0;
  flex-shrink: 0;
}

.about-overview__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---- Vision & Mission Section ---- */
.vm-section {
  padding: 5rem 0;
  background: white;
}

.vm-section__header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.vm-section__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.vm-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 0 0 1rem 0;
}

.vm-section__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.6;
}

.vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.vm-card {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  border: 2px solid #f0f0f0;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  position: relative;
  overflow: hidden;
}

.vm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1CB4D0 0%, #0d9db5 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.vm-card:hover::before {
  transform: scaleX(1);
}

.vm-card:hover {
  border-color: #1CB4D0;
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(28, 180, 208, 0.15);
}

.vm-card--featured {
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
  border-color: #1CB4D0;
  box-shadow: 0 16px 40px rgba(28, 180, 208, 0.25);
  transform: scale(1.02);
}

.vm-card--featured:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 24px 60px rgba(28, 180, 208, 0.35);
}

.vm-card__icon-wrapper {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.vm-card__icon {
  width: 56px;
  height: 56px;
  background: #f0f8fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1CB4D0;
  transition: all 0.3s ease;
}

.vm-card--featured .vm-card__icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.vm-card:hover .vm-card__icon {
  transform: scale(1.15) rotate(10deg);
}

.vm-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0 0 1rem 0;
}

.vm-card--featured .vm-card__title {
  color: white;
}

.vm-card__text {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: 0;
}

.vm-card--featured .vm-card__text {
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Core Values Section ---- */
.values-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.values-section__header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.values-section__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.values-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 0 0 1rem 0;
}

.values-section__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.6;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.value-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  height: 100%;
  perspective: 1000px;
}

.value-card__content {
  padding: 2.5rem 2rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(28, 180, 208, 0.2);
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
}

.value-card:hover .value-card__content {
  color: white;
}

.value-card__icon {
  width: 56px;
  height: 56px;
  background: #f0f8fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1CB4D0;
  margin: 0 auto;
  transition: all 0.35s ease;
}

.value-card:hover .value-card__icon {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  transform: scale(1.1);
}

.value-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  transition: color 0.35s ease;
}

.value-card:hover .value-card__title {
  color: white;
}

.value-card__text {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  transition: color 0.35s ease;
}

.value-card:hover .value-card__text {
  color: rgba(255, 255, 255, 0.95);
}

/* ---- Partners Section ---- */
.partners-section {
  padding: 5rem 0;
  background: white;
}

.partners-section__header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.partners-section__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.partners-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 0 0 1rem 0;
}

.partners-section__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.6;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

.partner-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  min-height: 100px;
  cursor: pointer;
}

.partner-card img {
  max-width: 100%;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.partner-card:hover {
  border-color: #1CB4D0;
  box-shadow: 0 8px 24px rgba(28, 180, 208, 0.15);
  transform: translateY(-4px) scale(1.05);
}

.partner-card:hover img {
  opacity: 1;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 1024px) {
  .about-overview__grid {
    gap: 3rem;
  }

  .about-overview__title {
    font-size: 2rem;
  }

  .vm-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .values-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 768px) {
  .about-overview {
    padding: 3rem 0;
  }

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

  .about-overview__badge {
    position: static;
    margin-top: 2rem;
    width: 100%;
    max-width: none;
  }

  .about-overview__title {
    font-size: 1.75rem;
  }

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

  .vm-section__title {
    font-size: 1.75rem;
  }

  .vm-card {
    padding: 2rem;
  }

  .vm-card--featured {
    transform: scale(1);
  }

  .vm-card--featured:hover {
    transform: scale(1.02) translateY(-6px);
  }

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

  .values-section__title {
    font-size: 1.75rem;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .value-card__content {
    padding: 1.5rem 1rem;
  }

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

  .value-card__title {
    font-size: 1rem;
  }

  .value-card__text {
    font-size: 0.8rem;
  }

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

  .partners-section__title {
    font-size: 1.75rem;
  }

  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1.5rem;
  }

  .partner-card {
    min-height: 80px;
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  .about-overview {
    padding: 2rem 0;
  }

  .about-overview__title {
    font-size: 1.5rem;
  }

  .about-overview__text {
    font-size: 0.95rem;
  }

  .about-overview__highlights {
    padding: 1.5rem 0;
    gap: 1rem;
  }

  .about-overview__highlights li {
    font-size: 0.9rem;
  }

  .vm-section {
    padding: 2rem 0;
  }

  .vm-section__header {
    margin-bottom: 2.5rem;
  }

  .vm-section__title {
    font-size: 1.5rem;
  }

  .vm-section__subtitle {
    font-size: 0.9rem;
  }

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

  .vm-card {
    padding: 1.75rem 1.5rem;
  }

  .values-section {
    padding: 2rem 0;
  }

  .values-section__header {
    margin-bottom: 2.5rem;
  }

  .values-section__title {
    font-size: 1.5rem;
  }

  .values-section__subtitle {
    font-size: 0.9rem;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .value-card__content {
    padding: 1.25rem 1rem;
  }

  .partners-section {
    padding: 2rem 0;
  }

  .partners-section__header {
    margin-bottom: 2.5rem;
  }

  .partners-section__title {
    font-size: 1.5rem;
  }

  .partners-section__subtitle {
    font-size: 0.9rem;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .partner-card {
    min-height: 70px;
  }
}

/* ===============================================================================
   SEAMLESS PAGE FLOW - Hero and Content as One Unit
   =============================================================================== */

main#main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.page-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0B1B2B;
  margin: 0;
  padding: 0;
  width: 100%;
}

.page-hero + .breadcrumb-section {
  margin-top: -1px;
  position: relative;
  z-index: 2;
}

/* ===============================================================================
   SINGLE NEWS PAGE - Modern Professional Design with High-End Effects
   =============================================================================== */

.news-detail {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.news-detail__image-wrapper {
  margin-bottom: 3rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(28, 180, 208, 0.15);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.news-detail__image-wrapper:hover {
  box-shadow: 0 30px 80px rgba(28, 180, 208, 0.25);
  transform: translateY(-4px);
}

.news-detail__image {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.news-detail__image-wrapper:hover .news-detail__image {
  transform: scale(1.05);
}

.news-detail__content {
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.news-detail__text {
  max-width: 900px;
  margin: 0 auto;
}

.news-detail__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-navy-900);
  margin: 0 0 1.5rem 0;
}

.news-detail__meta-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
}

.news-detail__category {
  display: inline-block;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-detail__divider {
  color: #d0d0d0;
}

.news-detail__date {
  color: var(--color-ink-soft);
  font-weight: 600;
}

/* Description Slider */
.news-detail__description-slider {
  max-height: 400px;
  min-height: 200px;
  overflow-y: auto;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
  border-left: 4px solid #1CB4D0;
  scrollbar-width: thin;
  scrollbar-color: #1CB4D0 #f0f0f0;
}

.news-detail__description-slider::-webkit-scrollbar {
  width: 8px;
}

.news-detail__description-slider::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.news-detail__description-slider::-webkit-scrollbar-thumb {
  background: #1CB4D0;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.news-detail__description-slider::-webkit-scrollbar-thumb:hover {
  background: #0d9db5;
}

.news-detail__description-content {
  width: 100%;
}

.news-detail__description {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-ink-soft);
  margin: 0;
  letter-spacing: 0.3px;
}

.news-detail__description p {
  margin-bottom: 1.5rem;
}

.news-detail__description p:last-child {
  margin-bottom: 0;
}

/* Share Section */
.news-detail__share {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin: 2rem 0;
}

.news-detail__share-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--color-navy-900);
  font-size: 0.95rem;
}

.news-detail__share-buttons {
  display: flex;
  gap: 1rem;
}

.news-detail__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0f8fa;
  color: #1CB4D0;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  text-decoration: none;
}

.news-detail__share-btn:hover {
  background: #1CB4D0;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(28, 180, 208, 0.3);
}

/* Related News Section */
.related-news {
  padding: 5rem 0;
  background: white;
}

.related-news__header {
  text-align: center;
  margin-bottom: 4rem;
}

.related-news__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 0 0 0.75rem 0;
}

.related-news__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin: 0;
}

.related-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.news-card-related {
  display: block;
  text-decoration: none;
  color: inherit;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.news-card-related:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(28, 180, 208, 0.15);
}

.news-card-related__image {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  overflow: hidden;
  background: #f0f0f0;
}

.news-card-related__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-card-related:hover .news-card-related__image img {
  transform: scale(1.1);
}

.news-card-related__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.7) 0%, rgba(13, 157, 181, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.news-card-related:hover .news-card-related__overlay {
  opacity: 1;
}

.news-card-related__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #FFC708 0%, #E0A800 100%);
  color: #0B1B2B;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Poppins', sans-serif;
  z-index: 2;
}

.news-card-related__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.news-card-related__date {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1CB4D0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: 'Poppins', sans-serif;
}

.news-card-related__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  line-height: 1.4;
  min-height: 2.4em;
}

.news-card-related__excerpt {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.news-card-related__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1CB4D0;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.news-card-related:hover .news-card-related__link {
  gap: 1rem;
  color: #0d9db5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .news-detail {
    padding: 2.5rem 0;
  }

  .news-detail__content {
    padding: 2rem 1.5rem;
  }

  .news-detail__title {
    font-size: 1.75rem;
  }

  .news-detail__description-slider {
    max-height: 300px;
    padding: 1.5rem;
    margin: 1.5rem 0;
  }

  .news-detail__description {
    font-size: 1rem;
  }

  .related-news {
    padding: 3rem 0;
  }

  .related-news__title {
    font-size: 1.75rem;
  }

  .related-news__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .news-detail {
    padding: 2rem 0;
  }

  .news-detail__content {
    padding: 1.5rem;
    border-radius: 8px;
  }

  .news-detail__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .news-detail__meta-info {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .news-detail__category {
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
  }

  .news-detail__description-slider {
    max-height: 250px;
    padding: 1.25rem;
    margin: 1.25rem 0;
    border-radius: 6px;
  }

  .news-detail__description {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .news-detail__share {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem 0;
  }

  .news-detail__share-label {
    width: 100%;
  }

  .news-detail__share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .related-news {
    padding: 2.5rem 0;
  }

  .related-news__header {
    margin-bottom: 2rem;
  }

  .related-news__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .related-news__subtitle {
    font-size: 0.9rem;
  }

  .related-news__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .news-card-related__body {
    padding: 1.25rem;
  }

  .news-card-related__title {
    font-size: 1rem;
  }

  .news-card-related__excerpt {
    font-size: 0.85rem;
  }
}

/* Pagination Controls */
.projects-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e0e0;
}

.projects-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  color: #0b1f33;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.projects-pagination__btn:hover:not(.projects-pagination__btn--disabled) {
  border-color: #1cb4d0;
  color: #1cb4d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 180, 208, 0.2);
}

.projects-pagination__btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #999;
  border-color: #ddd;
}

.projects-pagination__numbers {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.projects-pagination__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  color: #0b1f33;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.projects-pagination__number:hover {
  border-color: #1cb4d0;
  color: #1cb4d0;
  transform: scale(1.1);
}

.projects-pagination__number--active {
  background: linear-gradient(135deg, #1cb4d0 0%, #0d9db5 100%);
  color: white;
  border-color: #1cb4d0;
}

@media (min-width: 768px) {
  .projects-section-header {
    margin-bottom: 4rem;
  }

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

  .projects-pagination {
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .projects-section-header {
    margin-bottom: 5rem;
  }

  .projects-section-title {
    font-size: 3rem;
  }
}

@media (max-width: 640px) {
  .projects-pagination {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .projects-pagination__btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .projects-pagination__numbers {
    width: 100%;
    justify-content: center;
    order: 3;
  }

  .projects-pagination__btn--prev {
    order: 1;
  }

  .projects-pagination__btn--next {
    order: 2;
  }
}


/* ========================================================================
   RESPONSIVE MENU FIXES — Ensure menu displays properly at all breakpoints
   ======================================================================== */

@media (max-width: 1199px) {
  .nav__link { 
    font-size: 1rem !important; 
    padding-inline: 0.6rem !important; 
    padding-block: 0.4rem !important;
  }
  .site-header__logo img { height: 105px; }
}

@media (max-width: 1099px) {
  .nav__link { 
    font-size: 0.95rem !important; 
    padding-inline: 0.5rem !important; 
  }
}

/* Mega-menu responsive */
@media (min-width: 992px) {
  .mega-menu__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 0 1.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mega-menu__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0 1rem;
  }
}

@media (max-width: 767px) {
  .mega-menu { display: none !important; }
}


/* ===============================================================================
   SINGLE NEWS PAGE - Modern Professional Design with High-End Effects
   =============================================================================== */

.news-detail {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.news-detail__image-wrapper {
  margin-bottom: 3rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(28, 180, 208, 0.15);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.news-detail__image-wrapper:hover {
  box-shadow: 0 30px 80px rgba(28, 180, 208, 0.25);
  transform: translateY(-4px);
}

.news-detail__image {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.news-detail__image-wrapper:hover .news-detail__image {
  transform: scale(1.05);
}

.news-detail__content {
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.news-detail__text {
  max-width: 900px;
  margin: 0 auto;
}

.news-detail__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-navy-900);
  margin: 0 0 1.5rem 0;
}

.news-detail__meta-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
}

.news-detail__category {
  display: inline-block;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-detail__divider {
  color: #d0d0d0;
}

.news-detail__date {
  color: var(--color-ink-soft);
  font-weight: 600;
}

/* Description Slider */
.news-detail__description-slider {
  max-height: 400px;
  min-height: 200px;
  overflow-y: auto;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
  border-left: 4px solid #1CB4D0;
  scrollbar-width: thin;
  scrollbar-color: #1CB4D0 #f0f0f0;
}

.news-detail__description-slider::-webkit-scrollbar {
  width: 8px;
}

.news-detail__description-slider::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.news-detail__description-slider::-webkit-scrollbar-thumb {
  background: #1CB4D0;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.news-detail__description-slider::-webkit-scrollbar-thumb:hover {
  background: #0d9db5;
}

.news-detail__description-content {
  width: 100%;
}

.news-detail__description {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-ink-soft);
  margin: 0;
  letter-spacing: 0.3px;
}

.news-detail__description p {
  margin-bottom: 1.5rem;
}

.news-detail__description p:last-child {
  margin-bottom: 0;
}

/* Share Section */
.news-detail__share {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin: 2rem 0;
}

.news-detail__share-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--color-navy-900);
  font-size: 0.95rem;
}

.news-detail__share-buttons {
  display: flex;
  gap: 1rem;
}

.news-detail__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0f8fa;
  color: #1CB4D0;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  text-decoration: none;
}

.news-detail__share-btn:hover {
  background: #1CB4D0;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(28, 180, 208, 0.3);
}

/* Related News Section */
.related-news {
  padding: 5rem 0;
  background: white;
}

.related-news__header {
  text-align: center;
  margin-bottom: 4rem;
}

.related-news__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 0 0 0.75rem 0;
}

.related-news__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-ink-soft);
  margin: 0;
}

.related-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.news-card-related {
  display: block;
  text-decoration: none;
  color: inherit;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.news-card-related:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(28, 180, 208, 0.15);
}

.news-card-related__image {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  overflow: hidden;
  background: #f0f0f0;
}

.news-card-related__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-card-related:hover .news-card-related__image img {
  transform: scale(1.1);
}

.news-card-related__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.7) 0%, rgba(13, 157, 181, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.news-card-related:hover .news-card-related__overlay {
  opacity: 1;
}

.news-card-related__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #FFC708 0%, #E0A800 100%);
  color: #0B1B2B;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Poppins', sans-serif;
  z-index: 2;
}

.news-card-related__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.news-card-related__date {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1CB4D0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: 'Poppins', sans-serif;
}

.news-card-related__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  line-height: 1.4;
  min-height: 2.4em;
}

.news-card-related__excerpt {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.news-card-related__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1CB4D0;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.news-card-related:hover .news-card-related__link {
  gap: 1rem;
  color: #0d9db5;
}

/* Mobile Responsive - Tablet (768px) */
@media (max-width: 768px) {
  .news-detail {
    padding: 2.5rem 0;
  }

  .news-detail__content {
    padding: 2rem 1.5rem;
  }

  .news-detail__title {
    font-size: 1.75rem;
  }

  .news-detail__description-slider {
    max-height: 300px;
    padding: 1.5rem;
    margin: 1.5rem 0;
  }

  .news-detail__description {
    font-size: 1rem;
  }

  .related-news {
    padding: 3rem 0;
  }

  .related-news__title {
    font-size: 1.75rem;
  }

  .related-news__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
}

/* Mobile Responsive - Small Mobile (640px) */
@media (max-width: 640px) {
  .news-detail {
    padding: 2rem 0;
  }

  .news-detail__content {
    padding: 1.5rem;
    border-radius: 8px;
  }

  .news-detail__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .news-detail__meta-info {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .news-detail__category {
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
  }

  .news-detail__description-slider {
    max-height: 250px;
    padding: 1.25rem;
    margin: 1.25rem 0;
    border-radius: 6px;
  }

  .news-detail__description {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .news-detail__share {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem 0;
  }

  .news-detail__share-label {
    width: 100%;
  }

  .news-detail__share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .related-news {
    padding: 2.5rem 0;
  }

  .related-news__header {
    margin-bottom: 2rem;
  }

  .related-news__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .related-news__subtitle {
    font-size: 0.9rem;
  }

  .related-news__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .news-card-related__body {
    padding: 1.25rem;
  }

  .news-card-related__title {
    font-size: 1rem;
  }

  .news-card-related__excerpt {
    font-size: 0.85rem;
  }
}

/* ===============================================================================
   BREADCRUMB SECTION - Responsive Navigation
   =============================================================================== */

.breadcrumb-section {
  padding: 0.15rem 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  line-height: 1;
}

.breadcrumb-nav__item {
  color: #1CB4D0;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
}

.breadcrumb-nav__item:hover {
  color: #0d9db5;
}

.breadcrumb-nav__item.is-active {
  color: var(--color-navy-900);
  font-weight: 700;
}

.breadcrumb-nav__divider {
  color: #d0d0d0;
  font-size: 0.65rem;
}

@media (max-width: 768px) {
  .breadcrumb-nav {
    font-size: 0.7rem;
    gap: 0.4rem;
  }
}

@media (max-width: 640px) {
  .breadcrumb-section {
    padding: 0.1rem 0;
  }

  .breadcrumb-nav {
    font-size: 0.65rem;
    gap: 0.3rem;
    flex-wrap: wrap;
  }

  .breadcrumb-nav__divider {
    font-size: 0.65rem;
  }
}


/* ===============================================================================
   PAGE HERO WRAPPER - Unified Hero + Breadcrumb Scroll Unit (Single News Page)
   =============================================================================== */

.page-hero-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: white;
}

.page-hero {
  position: relative;
  height: 65vh;
  min-height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  flex-shrink: 0;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 27, 43, 0.75) 0%, rgba(11, 27, 43, 0.5) 100%);
  z-index: 1;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
  color: white;
  width: 100%;
  padding: 2rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

.page-hero__eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: 1rem;
}

.page-hero__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0.5rem 0;
  color: #F2A93B;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-hero__meta {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1rem;
  font-weight: 500;
}

/* Breadcrumb - Part of unified scroll unit */
.breadcrumb-section {
  padding: 0.15rem 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
  line-height: 1;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
}

.breadcrumb-nav__item {
  color: #1CB4D0;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
}

.breadcrumb-nav__item:hover {
  color: #0d9db5;
}

.breadcrumb-nav__item.is-active {
  color: var(--color-navy-900);
  font-weight: 700;
}

.breadcrumb-nav__divider {
  color: #d0d0d0;
  font-size: 0.65rem;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  .page-hero {
    height: 45vh;
    min-height: 350px;
  }

  .page-hero__title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .page-hero__eyebrow {
    font-size: 0.75rem;
  }

  .page-hero__meta {
    font-size: 0.9rem;
  }

  .breadcrumb-nav {
    font-size: 0.7rem;
    gap: 0.5rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
  .page-hero {
    height: 40vh;
    min-height: 300px;
  }

  .page-hero__content {
    padding: 1.5rem;
  }

  .page-hero__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .page-hero__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .page-hero__meta {
    font-size: 0.85rem;
  }

  .breadcrumb-section {
    padding: 0.1rem 0;
  }

  .breadcrumb-nav {
    font-size: 0.65rem;
    gap: 0.3rem;
    flex-wrap: wrap;
  }

  .breadcrumb-nav__divider {
    font-size: 0.65rem;
  }
}


/* ===============================================================================
   RELATED NEWS SECTION - Compact Grid Layout with Pagination
   =============================================================================== */

.related-news {
  padding: 4rem 0;
  background: white;
}

.related-news__header {
  text-align: center;
  margin-bottom: 3rem;
}

.related-news__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 0 0 0.75rem 0;
}

.related-news__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin: 0;
}

/* Medium grid layout - 4 columns on desktop */
.related-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Compact card styling */
.news-card-related {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  height: 100%;
  border: 1px solid #f0f0f0;
}

.news-card-related:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(28, 180, 208, 0.12);
}

/* Reduced image height */
.news-card-related__image {
  position: relative;
  width: 100%;
  padding-bottom: 55%;
  overflow: hidden;
  background: #f0f0f0;
}

.news-card-related__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card-related:hover .news-card-related__image img {
  transform: scale(1.08);
}

.news-card-related__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.6) 0%, rgba(13, 157, 181, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.news-card-related:hover .news-card-related__overlay {
  opacity: 1;
}

/* Compact badge */
.news-card-related__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: linear-gradient(135deg, #FFC708 0%, #E0A800 100%);
  color: #0B1B2B;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Poppins', sans-serif;
  z-index: 2;
}

/* Medium card body */
.news-card-related__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.news-card-related__date {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1CB4D0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: 'Poppins', sans-serif;
}

.news-card-related__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  line-height: 1.3;
  min-height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-related__excerpt {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-related__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1CB4D0;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 0.25rem;
}

.news-card-related:hover .news-card-related__link {
  gap: 0.6rem;
  color: #0d9db5;
}

/* Pagination controls */
.related-news__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.related-news__pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #d0d0d0;
  background: white;
  color: #1CB4D0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.related-news__pagination-btn:hover {
  background: #f8f9fa;
  border-color: #1CB4D0;
  color: #0d9db5;
}

.related-news__pagination-btn.is-active {
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
  border-color: #1CB4D0;
}

.related-news__pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.related-news__pagination-info {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0 1rem;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  .related-news {
    padding: 3rem 0;
  }

  .related-news__title {
    font-size: 1.5rem;
  }

  .related-news__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }

  .news-card-related__body {
    padding: 1.25rem;
  }

  .news-card-related__title {
    font-size: 0.95rem;
  }

  .news-card-related__excerpt {
    font-size: 0.85rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
  .related-news {
    padding: 2rem 0;
  }

  .related-news__header {
    margin-bottom: 2rem;
  }

  .related-news__title {
    font-size: 1.25rem;
  }

  .related-news__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }

  .news-card-related__body {
    padding: 1rem;
  }

  .news-card-related__badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    top: 0.5rem;
    right: 0.5rem;
  }

  .news-card-related__date {
    font-size: 0.65rem;
  }

  .news-card-related__title {
    font-size: 0.85rem;
  }

  .news-card-related__excerpt {
    font-size: 0.8rem;
  }

  .related-news__pagination-btn {
    min-width: 32px;
    height: 32px;
    font-size: 0.75rem;
    padding: 0 0.35rem;
  }

  .related-news__pagination-info {
    font-size: 0.75rem;
    margin: 0.5rem;
  }
}


/* ============================================================================
   TEAM PAGE STYLES - AOT CONSULTING
   Professional High-End Design with Modern Animations
   Professional team showcase with responsive layout
   ============================================================================ */

/* ============================================================================
   TEAM PHILOSOPHY SECTION - Core Values Display
   Three-column card layout with hover effects and gradient accents
   ============================================================================ */

.team-philosophy {
  padding: clamp(3rem, 12vw, 8rem) clamp(1rem, 5vw, 3rem);
  background: linear-gradient(135deg, #F5F8FA 0%, #FFFFFF 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative gradient circle in background */
.team-philosophy::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(28, 180, 208, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Section header with centered text and maximum width */
.team-philosophy__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(2rem, 8vw, 4rem);
  position: relative;
  z-index: 1;
}

/* Main section title */
.team-philosophy__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  color: var(--color-navy-900);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Section subtitle with readable line height */
.team-philosophy__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: #666;
  line-height: 1.7;
  font-weight: 400;
}

/* Three-column responsive grid for philosophy values */
.team-philosophy__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.5rem, 5vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* Individual philosophy card styling */
.philosophy-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(28, 180, 208, 0.15);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Shimmer effect line animation on hover */
.philosophy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(28, 180, 208, 0.1), transparent);
  transition: left 0.6s ease;
}

/* Card hover state: lift and highlight */
.philosophy-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-teal);
  box-shadow: 0 20px 60px rgba(28, 180, 208, 0.15);
}

.philosophy-card:hover::before {
  left: 100%;
}

/* Circular icon with gradient background */
.philosophy-card__icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-light) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
  transition: transform 0.4s ease;
}

.philosophy-card:hover .philosophy-card__icon {
  transform: scale(1.1) rotate(5deg);
}

/* Card title styling */
.philosophy-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: 1rem;
  letter-spacing: -0.005em;
}

/* Card description text */
.philosophy-card__text {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.65;
  font-weight: 400;
}

/* ============================================================================
   TEAM MEMBERS SECTION - Leadership Grid
   Eight team member cards in responsive grid with image zoom and overlay effects
   ============================================================================ */

.team-members {
  padding: clamp(3rem, 12vw, 8rem) clamp(1rem, 5vw, 3rem);
  background: #1CB4D0;
  position: relative;
  overflow: hidden;
}

/* Top border accent line */
.team-members::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 199, 8, 0.3), transparent);
}

/* Section header styling */
.team-members__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(2rem, 8vw, 4rem);
  position: relative;
  z-index: 1;
}

/* White title on dark background */
.team-members__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Subtitle with reduced opacity */
.team-members__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  font-weight: 400;
}

/* Responsive grid with minimum 260px cards */
.team-members__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 5vw, 2.5rem);
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

/* Individual team member card */
.team-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(28, 180, 208, 0.2);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Card hover: lift, brighten, add shadow */
.team-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-teal);
  transform: translateY(-12px);
  box-shadow: 0 30px 80px rgba(28, 180, 208, 0.25);
}

/* Image container with 3:4 aspect ratio */
.team-card__image-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.1), rgba(255, 199, 8, 0.05));
}

/* Team member photo with zoom on hover */
.team-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card:hover .team-card__image {
  transform: scale(1.08);
}

/* Dark gradient overlay on image */
.team-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 27, 43, 0.3) 50%, rgba(11, 27, 43, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.team-card:hover .team-card__overlay {
  opacity: 1;
}

/* Card content padding */
.team-card__content {
  padding: 1.5rem;
}

/* Info section that slides up on hover - positioned over image */
.team-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 27, 43, 0.95) 100%);
  padding: 2rem 1.5rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.team-card:hover .team-card__info {
  transform: translateY(0);
}

/* Team member name - on info overlay */
.team-card__info-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
  letter-spacing: -0.005em;
}

/* Team member position - on info overlay */
.team-card__info-position {
  font-size: 0.8rem;
  color: var(--color-white);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

/* Contact information container */
.team-card__info-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(28, 180, 208, 0.3);
}

/* Contact link styling */
.team-card__info-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.team-card__info-link:hover {
  color: var(--color-white);
  transform: translateX(3px);
}

.team-card__info-link svg {
  flex-shrink: 0;
}

/* Team member biography - limited to 3 lines */
.team-card__bio {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.8em;
}

/* Social links container */
.team-card__socials {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Individual social link button */
.team-card__social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.2), rgba(255, 199, 8, 0.1));
  border: 1px solid rgba(28, 180, 208, 0.3);
  border-radius: 50%;
  color: var(--color-white);
  transition: all 0.3s ease;
  text-decoration: none;
}

.team-card__social:hover {
  background: linear-gradient(135deg, var(--color-teal), var(--color-teal-light));
  border-color: var(--color-teal);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(28, 180, 208, 0.3);
}

/* ============================================================================
   TEAM STATS SECTION - Key Metrics Display
   Four statistics boxes with gradient numbers and animated top borders
   ============================================================================ */


/* ============================================================================
   RESPONSIVE ADJUSTMENTS - Tablet & Mobile
   Adjust spacing, grid columns, and font sizes for smaller screens
   ============================================================================ */

@media (max-width: 768px) {
  /* Philosophy section adjustments */
  .team-philosophy {
    padding: 3rem 1.5rem;
  }

  /* Members section adjustments */
  .team-members {
    padding: 3rem 1.5rem;
  }

  .team-members__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* ============================================================================
   MOBILE ADJUSTMENTS - Small screens (640px and below)
   Single column layouts with reduced padding and optimized font sizes
   ============================================================================ */

@media (max-width: 640px) {
  /* Philosophy values to single column */
  .team-philosophy__values {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Team members to 2 columns on small mobile */
  .team-members__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Reduce team bio lines on mobile */
  .team-card__bio {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 3.2em;
    font-size: 0.85rem;
  }

  /* Reduce card padding */
  .philosophy-card {
    padding: 1.5rem;
  }
}


/* ===============================================================================
   CONTACT PAGE - MODERN GOOGLE MAPS SECTION
   =============================================================================== */

.map-section {
  padding: 4rem 0;
  background: #f8f9fa;
}

.map-section h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy-900);
  text-align: center;
  margin-bottom: 2rem;
}

.map-section .map-container {
  position: relative;
  width: 100%;
  padding-bottom: 35%; /* Set to 35% as requested */
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #e0e0e0;
}

.map-section .map-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.map-section .map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .map-section {
    padding: 3rem 0;
  }
  
  .map-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .map-section .map-container {
    padding-bottom: 35%; /* Same 35% for tablet */
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .map-section {
    padding: 2rem 0;
  }
  
  .map-section h3 {
    font-size: 1.25rem;
  }
  
  .map-section .map-container {
    padding-bottom: 45%; /* Slightly taller on mobile */
  }
}


/* ===============================================================================
   SERVICE DETAIL PAGE - MOBILE FIRST DESIGN
   =============================================================================== */

/* Service Introduction Section */
.service-intro {
  padding: clamp(2rem, 5vw, 3rem) 0;
  background: #f8f9fa;
}

.service-intro__wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.service-intro__content {
  flex: 1;
}

.service-intro__label {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F2A93B;
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.service-intro__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  line-height: 1.3;
}

.service-intro__text {
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1.7;
  color: #555;
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  padding: clamp(0.5rem, 2vw, 1rem) 0;
}

.service-intro__image {
  position: relative;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.service-intro__image img {
  width: 100%;
  height: clamp(250px, 60vw, 450px);
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.service-intro__image:hover img {
  transform: scale(1.05);
}

.service-intro__badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #F2A93B;
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(242, 169, 59, 0.4);
}

.service-intro__badge-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.service-intro__badge-text {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .service-intro {
    padding: clamp(3rem, 6vw, 5rem) 0;
  }

  .service-intro__wrapper {
    flex-direction: row;
    gap: 4rem;
    align-items: center;
  }

  .service-intro__title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  .service-intro__image img {
    height: clamp(300px, 65vw, 450px);
  }
}


/* Service Features Grid */
.service-features {
  padding: 3rem 0;
  background: white;
}

.service-features__header {
  text-align: center;
  margin-bottom: 3rem;
}

.service-features__label {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F2A93B;
  margin-bottom: clamp(0.4rem, 1vw, 0.5rem);
}

.service-features__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.service-features__desc {
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.service-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.feature-card {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(28, 180, 208, 0.15);
  border-color: #1CB4D0;
  background: white;
}

.feature-card__icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-card__icon svg {
  stroke: white;
}

.feature-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: 0.75rem;
}

.feature-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
}

@media (min-width: 640px) {
  .service-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .service-features {
    padding: 5rem 0;
  }

  .service-features__title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .service-features__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}





/* Case Studies Section */
.service-casestudies {
  padding: clamp(2rem, 5vw, 3rem) 0;
  background: white;
}

.service-casestudies__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.service-casestudies__label {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F2A93B;
  margin-bottom: clamp(0.4rem, 1vw, 0.5rem);
}

.service-casestudies__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.service-casestudies__desc {
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.casestudy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.casestudy-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.casestudy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.casestudy-card__image {
  position: relative;
  height: clamp(200px, 50vw, 300px);
  overflow: hidden;
}

.casestudy-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.casestudy-card:hover .casestudy-card__image img {
  transform: scale(1.1);
}

.casestudy-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 27, 43, 0.7) 0%, transparent 100%);
}

.casestudy-card__content {
  padding: clamp(1.2rem, 3vw, 1.5rem);
}

.casestudy-card__category {
  display: inline-block;
  font-size: clamp(0.65rem, 1.5vw, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1CB4D0;
  margin-bottom: clamp(0.4rem, 1vw, 0.5rem);
}

.casestudy-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
  line-height: 1.3;
}

.casestudy-card__desc {
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  line-height: 1.6;
  color: #666;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.casestudy-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  font-weight: 600;
  color: #1CB4D0;
  text-decoration: none;
  transition: all 0.3s ease;
}

.casestudy-card__link:hover {
  color: #0d9db5;
  gap: 0.75rem;
}

.casestudy-card__link svg {
  transition: transform 0.3s ease;
}

.casestudy-card:hover .casestudy-card__link svg {
  transform: translateX(5px);
}

@media (min-width: 640px) {
  .casestudy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .service-casestudies {
    padding: clamp(3rem, 6vw, 5rem) 0;
  }

  .service-casestudies__title {
    font-size: clamp(1.8rem, 5vw, 2.25rem);
  }
}

@media (min-width: 1024px) {
  .casestudy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* CTA Section */
.service-cta {
  padding: clamp(2rem, 5vw, 3rem) 0;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
}

.service-cta__wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: center;
  text-align: center;
}

.service-cta__label {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: clamp(0.4rem, 1vw, 0.5rem);
}

.service-cta__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: white;
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  line-height: 1.3;
}

.service-cta__text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 700px;
}

.service-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.btn--cta {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}

.btn--primary {
  background: #F2A93B;
  color: white;
}

.btn--primary:hover {
  background: #e09325;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(242, 169, 59, 0.4);
}

.btn--secondary {
  background: white;
  color: #1CB4D0;
}

.btn--secondary:hover {
  background: transparent;
  color: white;
  border-color: white;
  transform: translateY(-3px);
}

@media (min-width: 640px) {
  .service-cta__actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
}

@media (min-width: 768px) {
  .service-cta {
    padding: 5rem 0;
  }

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

  .service-cta__title {
    font-size: 2.5rem;
  }
}


/* Related Services Section - Matching Case Studies Style */
.related-services {
  padding: 3rem 0;
  background: white;
}

.related-services__header {
  text-align: center;
  margin-bottom: 3rem;
}

.related-services__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: 1rem;
}

.related-services__desc {
  font-size: 1rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.related-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.service-card__icon {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-card__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

.service-card:hover .service-card__icon {
  background: linear-gradient(135deg, #F2A93B 0%, #e09325 100%);
}

.service-card__icon svg {
  width: 60px;
  height: 60px;
  stroke: white;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card__icon svg {
  transform: scale(1.15) rotate(-5deg);
}

.service-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: 0.75rem;
  padding: 1.5rem 1.5rem 0;
}

.service-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  padding: 0 1.5rem;
  margin-bottom: 1rem;
  flex: 1;
}

.service-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.5rem 1.5rem;
  color: #1CB4D0;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.service-card__arrow svg {
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card__arrow {
  color: #0d9db5;
  gap: 0.75rem;
}

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

@media (min-width: 640px) {
  .related-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .related-services {
    padding: 5rem 0;
  }

  .related-services__title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .related-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===============================================================================
   END SERVICE DETAIL PAGE STYLES
   =============================================================================== */


/* ===============================================================================
   FIX: Hero and Breadcrumb Scroll Together (No Separation)
   =============================================================================== */

/* Ensure page-hero and breadcrumb-section are NOT sticky/fixed */
.page-hero {
  position: relative !important;
  /* Remove any sticky or fixed positioning */
}

.breadcrumb-section {
  position: relative !important;
  /* Remove any sticky or fixed positioning */
}

/* Make sure they're part of normal document flow */
.page-hero + .breadcrumb-section {
  position: relative !important;
  margin-top: 0 !important;
}

/* If there's a wrapper, ensure it's also relative */
.page-hero-wrapper {
  position: relative !important;
  display: block !important;
}

/* Remove any transform or translate that might cause separation */
.page-hero,
.breadcrumb-section {
  transform: none !important;
  will-change: auto !important;
}

/* ===============================================================================
   FIX: Move WhatsApp Button to Bottom Right Corner
   =============================================================================== */
.whatsapp-container {
  left: 50px !important;
  right: 24px !important;
  bottom: 20px !important;
}

/* Adjust for mobile */
@media (max-width: 768px) {
  .whatsapp-container {
    right: 16px !important;
    bottom: 16px !important;
  }
}

/* ===============================================================================
   FIX: Our Clients Header Card - Reduced Width, Teal Background, White Text
   =============================================================================== */

.client-wall__header {
  max-width: 600px;
  margin: 0 auto 3rem;
  background: linear-gradient(135deg, #1cb4d0 0%, #158fa3 100%);
  padding: 2rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(28, 180, 208, 0.25);
}

.client-wall__eyebrow {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.client-wall__title {
  color: #fff !important;
  display: block !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .client-wall__header {
    max-width: 100%;
    padding: 1.5rem 1.5rem;
  }
}

/* ===============================================================================
   Service Help Section - How We Help Businesses
   =============================================================================== */

.service-help {
  padding: clamp(2rem, 5vw, 3rem) 0;
  background: white;
}

.service-help__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.service-help__label {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: clamp(0.4rem, 1vw, 0.5rem);
}

.service-help__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.service-help__desc {
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.service-help__content {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(0.5rem, 2vw, 1rem);
}

.service-help__text {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  line-height: 1.8;
  color: #333;
  background: #f8f9fa;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 12px;
  border-left: 4px solid #1CB4D0;
}

.service-help__text p {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1rem) 0;
  font-family: 'Lato', sans-serif;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
}

.service-help__text p:last-child {
  margin-bottom: 0;
}

.service-help__text strong {
  color: var(--color-navy-900);
  font-weight: 700;
}

.service-help__text ul,
.service-help__text ol {
  margin: clamp(0.75rem, 1.5vw, 1rem) 0;
  padding-left: clamp(1.2rem, 2vw, 1.5rem);
}

.service-help__text li {
  margin: clamp(0.4rem, 1vw, 0.5rem) 0;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
}

@media (min-width: 768px) {
  .service-help {
    padding: clamp(3rem, 6vw, 5rem) 0;
  }

  .service-help__title {
    font-size: clamp(1.8rem, 5vw, 2.25rem);
  }

  .service-help__text {
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* ============================================================================
   TEAM PAGINATION
   ============================================================================ */

.team-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
  margin-top: 2rem;
}

.team-pagination__wrapper {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  justify-content: center;
}

.team-pagination__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.team-pagination__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.team-pagination__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.team-pagination__btn svg {
  width: 18px;
  height: 18px;
}

.team-pagination__pages {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.team-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.team-pagination__page:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.team-pagination__page--active {
  background: white;
  color: #1CB4D0;
  border-color: white;
  cursor: default;
}

.team-pagination__page--active:hover {
  transform: none;
}

.team-pagination__info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin: 0;
}

@media (max-width: 768px) {
  .team-pagination {
    gap: 1.5rem;
  }

  .team-pagination__wrapper {
    gap: 1rem;
  }

  .team-pagination__page {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .team-pagination__btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .team-pagination__btn svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 640px) {
  .team-pagination__wrapper {
    gap: 0.75rem;
  }

  .team-pagination__page {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .team-pagination__btn span {
    display: none;
  }

  .team-pagination__info {
    font-size: 0.8rem;
  }
}


/* ========================================================================== QUOTE FORM — Modern High-End Design */

.quote-container {
  padding: clamp(1rem, 3vw, 1.8rem) 0;
  background: #f5f3f0;
}

.quote-wrapper {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .quote-wrapper {
    padding: 0 var(--space-lg);
  }
}

.quote-form-section {
  background: #f5f3f0;
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(28, 180, 208, 0.1);
}

.quote-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.quote-header .eyebrow {
  display: inline-block;
}

.quote-header .section-heading__title {
  margin: 1.5rem 0 1rem;
}

.quote-description {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: #333;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* Form Steps */
.quote-form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
}

.form-step {
  padding: clamp(0.8rem, 2vw, 1.2rem);
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: none;
}



.form-step__header {
  display: flex;
  gap: clamp(0.6rem, 1.5vw, 0.9rem);
  margin-bottom: clamp(0.8rem, 1.5vw, 1rem);
  align-items: flex-start;
}

.form-step__number {
  flex-shrink: 0;
  width: clamp(30px, 6vw, 38px);
  height: clamp(30px, 6vw, 38px);
  background: linear-gradient(135deg, var(--color-teal) 0%, #0fa3b8 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
  box-shadow: 0 4px 15px rgba(28, 180, 208, 0.2);
}

.form-step__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

.form-step__description {
  font-size: clamp(0.75rem, 1.2vw, 0.8rem);
  color: var(--color-white);
  margin: 0;
  font-weight: 500;
}

.form-step__content {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form Grid */
.form-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}

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

@media (min-width: 640px) {
  .form-grid--tablet-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Form Fields */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field__label {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-field__input,
.form-field__select,
.form-field__textarea {
  padding: clamp(0.5rem, 1.2vw, 0.7rem);
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.8rem, 1.3vw, 0.85rem);
  color: var(--color-navy-900);
  background: #fff;
  transition: none;
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
  outline: none;
  border-color: var(--color-teal);
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: #999;
}

.form-field__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231cb4d0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-field__textarea {
  resize: vertical;
  min-height: 120px;
  font-family: 'Poppins', sans-serif;
}

/* Services Grid - REMOVED - Using simple dropdown */

/* Form Actions */
.form-actions {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  text-align: center;
}

.btn--lg {
  padding: clamp(0.65rem, 1.5vw, 0.8rem) clamp(1.8rem, 4vw, 2.2rem);
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  border-radius: 50px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}

.form-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  color: #1f2937;
  margin-top: 1.5rem;
}

.form-security-note svg {
  color: var(--color-white);
  flex-shrink: 0;
}

/* Success Message */
.form-success {
  display: none;
  margin-top: 2rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.1) 0%, rgba(255, 199, 8, 0.05) 100%);
  border: 1px solid var(--color-teal);
  border-radius: 14px;
  animation: slideInUp 0.5s ease-out;
}

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

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-success__content {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.form-success__icon {
  flex-shrink: 0;
  color: var(--color-white);
  margin-top: 0.25rem;
}

.form-success__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0 0 0.5rem;
}

.form-success__message {
  font-size: 0.95rem;
  color: #fff;
  margin: 0;
  line-height: 1.6;
}

/* ========================================================================== FAQ SECTION — REMOVED */


/* Mobile First - Responsive Adjustments */
@media (max-width: 640px) {
  .form-grid--tablet-2 {
    grid-template-columns: 1fr;
  }

  .services-grid {
    gap: 0.75rem;
  }

  .service-card__icon {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .faq-item__header {
    gap: 0.75rem;
  }

  .faq-item__icon-wrapper {
    width: 36px;
    height: 36px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .quote-form-section {
    background: #f5f3f0;
    border-color: rgba(28, 180, 208, 0.2);
  }

  .form-step {
    background: #ffffff;
    border-color: rgba(28, 180, 208, 0.2);
  }

  .form-field__input,
  .form-field__select,
  .form-field__textarea {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #1f2937;
  }

  .form-field__input:focus,
  .form-field__select:focus,
  .form-field__textarea:focus {
    background: #ffffff;
    border-color: rgba(28, 180, 208, 0.5);
  }

  .faq-item {
    background: rgba(28, 35, 51, 0.8);
    border-color: rgba(28, 180, 208, 0.2);
  }

  .services-dropdown__button,
  .services-dropdown__menu,
  .services-dropdown__item {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #1f2937;
  }

  .services-dropdown__item:not(:last-child) {
    border-bottom-color: #e5e7eb;
  }

  .services-dropdown__button::after {
    border-color: var(--color-teal);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .form-step,
  .form-field__input,
  .form-field__select,
  .form-field__textarea,
  .service-card,
  .faq-item,
  .faq-item__toggle {
    transition: none;
  }

  .form-step__number,
  .service-card__icon {
    animation: none;
  }
}


/* ========================================================================== CUSTOM SERVICE DROPDOWN */

.services-dropdown {
  position: relative;
  width: 100%;
}

.services-dropdown__button {
  width: 100%;
  padding: clamp(0.5rem, 1.2vw, 0.7rem) clamp(0.75rem, 1.5vw, 1rem);
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.8rem, 1.3vw, 0.85rem);
  color: var(--color-navy-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: none;
  text-align: left;
}

.services-dropdown__placeholder {
  flex: 1;
  margin-right: 0.5rem;
}

.services-dropdown__button::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid var(--color-teal);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  margin-left: auto;
  flex-shrink: 0;
}

.services-dropdown.is-open .services-dropdown__button::after {
  transform: rotate(-135deg);
}

.services-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.services-dropdown.is-open .services-dropdown__menu {
  max-height: 300px;
  overflow-y: auto;
}

.services-dropdown__item {
  padding: clamp(0.5rem, 1vw, 0.7rem) clamp(0.75rem, 1.5vw, 1rem);
  border: none;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.8rem, 1.2vw, 0.85rem);
  color: var(--color-navy-900);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: none;
}

.services-dropdown__item.is-selected {
  color: var(--color-white);
  font-weight: 600;
}

.services-dropdown__item:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.services-selected {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  margin-top: clamp(0.4rem, 0.8vw, 0.6rem);
  min-height: clamp(1rem, 2vw, 1.5rem);
}

.services-tag {
  background: rgba(28, 180, 208, 0.15);
  color: var(--color-white);
  padding: clamp(0.3rem, 0.8vw, 0.4rem) clamp(0.6rem, 1vw, 0.8rem);
  border-radius: 50px;
  font-size: clamp(0.75rem, 1rem, 0.8rem);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.services-tag button {
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-weight: bold;
  padding: 0;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  line-height: 1;
}

@media (max-width: 640px) {
  .services-dropdown__menu {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: auto;
    max-height: 250px;
  }
}


/* ===============================================================================
   PROJECTS SIDEBAR SLIDER — Carousel for Reports & Publications
   =============================================================================== */

.projects-sidebar__slider-wrapper {
  position: relative;
}

.projects-sidebar__list {
  max-height: 450px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-right: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.projects-sidebar__item {
  flex: 0 0 auto;
  display: flex;
  gap: 1rem;
  padding: 0.875rem;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  color: inherit;
}

.projects-sidebar__item:hover {
  background: #f0f8fa;
  border-color: #1cb4d0;
  transform: translateX(4px);
}

.projects-sidebar__slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e8e8e8;
}

.projects-sidebar__slider-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #1cb4d0;
  background: white;
  color: #1cb4d0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.projects-sidebar__slider-btn:hover {
  background: #1cb4d0;
  color: white;
  transform: scale(1.05);
}

.projects-sidebar__slider-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: scale(1);
}

.projects-sidebar__slider-btn:disabled:hover {
  background: white;
  color: #1cb4d0;
}

.projects-sidebar__slider-dots {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex: 1;
  min-width: 60px;
}

.projects-sidebar__slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: all 0.25s ease;
}

.projects-sidebar__slider-dot.active {
  background: #1cb4d0;
  width: 24px;
  border-radius: 3px;
}

.projects-sidebar__slider-dot:hover {
  background: #1cb4d0;
}

@media (max-width: 1024px) {
  .projects-sidebar__list {
    max-height: 380px;
  }
}

@media (max-width: 768px) {
  .projects-sidebar__list {
    max-height: 300px;
  }
  
  .projects-sidebar__slider-controls {
    gap: 0.75rem;
  }
  
  .projects-sidebar__slider-btn {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
}


/* ===============================================================================
   SERVICES PAGE (SVCP) — Modern, Professional Design System
   =============================================================================== */

/* Container & Layout */
.svcp {
  overflow: hidden;
}

.svcp-container {
  max-width: var(--container-max, 1240px);
  margin: 0 auto;
  padding: 0 var(--spacing-container, 2rem);
}

.svcp-section {
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  position: relative;
}

.svcp-section--paper {
  background: #fafafa;
}

/* ===============================================================================
   INTRO SECTION — Positioning Statement + Stats Strip
   =============================================================================== */

/* ===============================================================================
   EYEBROW & HEAD
   =============================================================================== */

.svcp-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1cb4d0;
  margin-bottom: 1rem;
}

.svcp-head {
  margin-bottom: 3rem;
}

.svcp-head--center {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.svcp-head__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 1rem 0 1.5rem;
  color: #1a1a1a;
}

.svcp-head__desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
  max-width: 700px;
}

/* ===============================================================================
   DOSSIER LIST — Service Cards with Alternating Layout
   =============================================================================== */

.svcp-dossier-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.svcp-dossier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  animation: fadeInUp 0.6s ease-out;
}

.svcp-dossier--reverse {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}

.svcp-dossier--reverse > * {
  direction: ltr;
}

.svcp-dossier__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 5/4;
  background: #e9e9e9;
}

.svcp-dossier__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.svcp-dossier:hover .svcp-dossier__media img {
  transform: scale(1.05);
}

.svcp-dossier__tab {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: rgba(28, 180, 208, 0.95);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 10;
}

.svcp-dossier__fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent;
}

.svcp-dossier__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.svcp-dossier__title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
}

.svcp-dossier__desc {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
}

.svcp-dossier__list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.svcp-dossier__list li {
  font-size: 0.95rem;
  color: #666;
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
  position: relative;
}

.svcp-dossier__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #1cb4d0;
  font-weight: bold;
  font-size: 1.1rem;
}

.svcp-dossier__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1cb4d0;
  text-decoration: none;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.svcp-dossier__link:hover {
  color: #0d9db5;
  transform: translateX(4px);
}

.svcp-dossier__link svg {
  transition: transform 0.3s ease;
}

.svcp-dossier__link:hover svg {
  transform: translateX(4px);
}

/* ===============================================================================
   TIMELINE — How an Engagement Runs
   =============================================================================== */

.svcp-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.svcp-timeline__step {
  position: relative;
  padding: 2rem;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.svcp-timeline__step:hover {
  border-color: #1cb4d0;
  box-shadow: 0 8px 24px rgba(28, 180, 208, 0.12);
  transform: translateY(-4px);
}

.svcp-timeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #1cb4d0;
  color: white;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.svcp-timeline__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.svcp-timeline__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #666;
}

/* ===============================================================================
   ANIMATIONS & SCROLL REVEALS
   =============================================================================== */

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

[data-svcp-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--svcp-delay, 0ms);
}

[data-svcp-reveal="left"] {
  transform: translateX(-40px) translateY(0);
}

[data-svcp-reveal="right"] {
  transform: translateX(40px) translateY(0);
}

[data-svcp-reveal="scale"] {
  transform: scale(0.95);
}

[data-svcp-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) !important;
}

/* ===============================================================================
   RESPONSIVE — Tablet & Mobile
   =============================================================================== */

@media (max-width: 768px) {
  .svcp-dossier {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .svcp-dossier--reverse {
    grid-template-columns: 1fr;
  }

  .svcp-dossier__media {
    aspect-ratio: 4/3;
  }

  .svcp-timeline {
    grid-template-columns: 1fr;
  }

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

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

  .svcp-section {
    padding: 2.5rem 0;
  }
}

@media (max-width: 640px) {
  .svcp-head__title {
    font-size: 1.5rem;
  }

  .svcp-dossier__title {
    font-size: 1.25rem;
  }

  .svcp-cta__title {
    font-size: 1.5rem;
  }

  .svcp-creds__track {
    gap: 1.5rem;
  }

  .svcp-creds__item {
    font-size: 0.75rem;
  }
}

/* ========================================================================== 404 ERROR PAGE STYLES */

.error-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem);
  box-shadow: var(--shadow-lg);
  text-align: center;
  border: 1px solid rgba(28, 180, 208, 0.1);
  animation: slideUp 0.6s var(--ease-out);
}

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

.error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.1) 0%, rgba(41, 127, 62, 0.1) 100%);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.error-icon svg {
  width: 40px;
  height: 40px;
  color: var(--color-white);
}

.error-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 1rem 0;
  line-height: 1.2;
}

.error-description {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: var(--color-ink-soft);
  margin: 1rem 0 2rem 0;
  line-height: 1.6;
}

.error-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.error-suggestions {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.error-suggestions-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
}

.error-suggestions-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.error-suggestion-link {
  padding: 0.5rem 1rem;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-navy-900);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-weight: 600;
}

.error-suggestion-link:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

@media (max-width: 768px) {
  .error-card {
    padding: 2rem 1.5rem;
  }

  .error-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error-card {
    animation: none;
  }

  .error-suggestion-link {
    transition: none;
  }
}


/* ========================================================================== 
   REPORTS & PUBLICATIONS SECTION
   ========================================================================== */

.svcp-resources {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: #fff;
}

.svcp-resources__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 3rem;
}

.svcp-resources__column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.svcp-resources__column-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: #1cb4d0;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #1cb4d0;
  letter-spacing: -0.01em;
}

.svcp-resources__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.svcp-resource-item {
  background: #f8fbfc;
  border: 1px solid rgba(28, 180, 208, 0.15);
  border-radius: 10px;
  padding: 0.7rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.svcp-resource-item:hover {
  border-color: #1cb4d0;
  box-shadow: 0 6px 16px rgba(28, 180, 208, 0.1);
  transform: translateY(-2px);
}

.svcp-resource-item__header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.svcp-resource-item__icon {
  width: 14px;
  height: 14px;
  color: #1cb4d0;
  flex-shrink: 0;
  margin-top: 2px;
}

.svcp-resource-item__title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0b1f33;
  margin: 0;
  line-height: 1.2;
  flex: 1;
}

.svcp-resource-item__desc {
  font-size: 0.75rem;
  line-height: 1.3;
  color: #666;
  margin: 0.4rem 0;
  display: none;
}

.svcp-resource-item__meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: #999;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(28, 180, 208, 0.1);
}

.svcp-resource-item__date {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.svcp-resource-item__size {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.svcp-resource-item__actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.svcp-resource-item__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #1cb4d0;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.svcp-resource-item__view-btn:hover {
  background: #0d9db5;
  transform: scale(1.05);
}

.svcp-resource-item__download {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  color: #1cb4d0;
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.7rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid #1cb4d0;
}

.svcp-resource-item__download:hover {
  background: #1cb4d0;
  color: white;
  transform: translateX(1px);
}

.svcp-resource-item__download svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.svcp-resource-item__download:hover svg {
  transform: translateY(1px);
}

.svcp-resources__empty {
  text-align: center;
  padding: 2rem 1.5rem;
  color: #999;
  font-style: italic;
}

@media (max-width: 1024px) {
  .svcp-resources__grid {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .svcp-resources {
    padding: 2.5rem 0;
  }

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

  .svcp-resources__column-title {
    font-size: 1rem;
  }

  .svcp-resource-item {
    padding: 0.85rem;
  }

  .svcp-resource-item__header {
    gap: 0.5rem;
  }

  .svcp-resource-item__title {
    font-size: 0.8rem;
  }

  .svcp-resource-item__meta {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .svcp-resource-item__download {
    padding: 0.5rem 0.6rem;
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svcp-resource-item {
    transition: none;
  }

  .svcp-resource-item:hover {
    transform: none;
  }

  .svcp-resource-item__download {
    transition: none;
  }

  .svcp-resource-item__download:hover {
    transform: none;
  }
}


/* Pagination Styles */
.svcp-resources__pagination {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1rem;
  justify-content: center;
}

.svcp-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  background: #f8fbfc;
  border: 1px solid rgba(28, 180, 208, 0.2);
  color: #0b1f33;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.svcp-pagination__btn:hover {
  background: #1cb4d0;
  color: white;
  border-color: #1cb4d0;
}

.svcp-pagination__btn.is-active {
  background: #1cb4d0;
  color: white;
  border-color: #1cb4d0;
  font-weight: 700;
}

.svcp-resource-item__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.svcp-resource-item__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #1cb4d0;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.svcp-resource-item__view-btn:hover {
  background: #0d9db5;
  transform: scale(1.05);
}


/* ==========================================================================
   CLIENTS PAGE — Modern Client Showcase
   ========================================================================== */

.clients-showcase {
  padding: 4rem clamp(1.25rem, 5vw, 3rem);
  background: linear-gradient(180deg, #f5f8fa 0%, #ffffff 100%);
}

.clients-showcase__header {
  text-align: center;
  margin-bottom: 3.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.clients-showcase__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #0b1f33;
  margin: 0 0 1rem;
  line-height: 1.2;
}

.clients-showcase__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.client-card {
  position: relative;
  height: 100%;
}

.client-card__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: white;
  border: 2px solid #1cb4d0;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  height: 100%;
  justify-content: center;
}

.client-card__inner:hover {
  border-color: #1cb4d0;
  box-shadow: 0 12px 32px rgba(28, 180, 208, 0.15);
  transform: translateY(-6px);
}

.client-card__logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  background: transparent;
  border-radius: 8px;
  padding: 0.5rem;
  flex-shrink: 0;
}

.client-card__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

.client-card__inner:hover .client-card__logo {
  transform: scale(1.05);
}

.client-card__name {
  display: none;
}

.client-card__description {
  display: none;
}

.client-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1cb4d0;
  text-decoration: none;
  margin-top: auto;
  transition: all 0.2s ease;
  padding: 0.5rem 1rem;
  border: 1px solid #1cb4d0;
  border-radius: 6px;
  background: transparent;
}

.client-card__link:hover {
  background: #1cb4d0;
  color: white;
  transform: translateX(2px);
}

.client-card__link--disabled {
  color: #999;
  border-color: #ddd;
  cursor: not-allowed;
  background: #f5f5f5;
}

.client-card__link--disabled:hover {
  background: #f5f5f5;
  color: #999;
  transform: none;
}

.clients-grid__empty {
  grid-column: 1 / -1;
  padding: 3rem;
  text-align: center;
  color: #999;
  font-family: 'Poppins', sans-serif;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .clients-showcase {
    padding: 2.5rem 1.25rem;
  }

  .clients-showcase__header {
    margin-bottom: 2.5rem;
  }

  .clients-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
  }

  .client-card__inner {
    padding: 1.5rem 1rem;
  }

  .client-card__logo-wrapper {
    height: 70px;
  }

  .client-card__name {
    font-size: 0.85rem;
  }
}

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

  .client-card__inner {
    padding: 1rem 0.75rem;
  }

  .client-card__logo-wrapper {
    height: 60px;
  }

  .client-card__name {
    font-size: 0.75rem;
  }

  .client-card__link {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
  }
}


/* ===== PROJECTS CATEGORIES SECTION ===== */
.projects-categories {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 60px 0;
}

.projects-category-box {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.projects-category-box:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.projects-category-header {
  margin-bottom: 24px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 16px;
}

.projects-category-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.projects-category-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.projects-category-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.projects-category-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 120px;
  display: block;
  text-decoration: none;
  transition: all 0.3s ease;
}

.projects-category-item:hover {
  transform: translateX(8px);
}

.projects-category-item__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.projects-category-item:hover .projects-category-item__image {
  transform: scale(1.05);
}

.projects-category-item__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  z-index: 1;
  transition: background 0.3s ease;
}

.projects-category-item:hover .projects-category-item__overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
}

.projects-category-item__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
  color: white;
}

.projects-category-item__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-category-item__location {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 4px 0;
}

.projects-category-item__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Responsive Grid */
@media (max-width: 768px) {
  .grid--2 {
    grid-template-columns: 1fr !important;
  }
  
  .projects-category-item {
    height: 100px;
  }
  
  .projects-category-title {
    font-size: 18px;
  }
}


/* ==========================================================================
   CUSTOM SELECT DROPDOWN STYLING - Contact Form
   ========================================================================== */

.form__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 1rem !important;
  background-color: white !important;
  color: #333 !important;
  cursor: pointer;
  font-size: 0.75rem !important;
  max-width: 100%;
  width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.form__select option {
  padding: 0.35rem 0.6rem;
  margin: 0.15rem 0;
  background: white;
  color: #333;
  font-size: 0.75rem;
  line-height: 1.4;
  max-height: 250px;
  word-break: break-word;
  overflow: hidden;
}

.form__select option:checked {
  background: linear-gradient(#1cb4d0, #1cb4d0);
  background-color: #1cb4d0;
  color: white;
}

/* Contact form panel select styling */
.contact-form-panel .form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.75rem !important;
  padding: 0.65rem 2.2rem 0.65rem 0.75rem !important;
  width: 100% !important;
  max-width: 100%;
}

.contact-form-panel .form__select option {
  background: white;
  color: #333;
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-form-panel .form__select option:checked {
  background: linear-gradient(#1cb4d0, #1cb4d0);
  color: white;
}

/* Mobile responsiveness for select - constrain width */
@media (max-width: 768px) {
  .form__row--2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .form__row--2 .form__group {
    width: 100%;
    min-width: 0;
  }

  .form__select {
    font-size: 0.75rem !important;
    padding: 0.6rem 2.2rem 0.6rem 0.7rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    min-width: 0;
  }

  .form__select option {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    line-height: 1.3;
    max-width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }

  .form__group--mobile {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .form__select--mobile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block;
    font-size: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .form__select {
    font-size: 0.7rem !important;
    padding: 0.55rem 2rem 0.55rem 0.65rem !important;
    width: 100% !important;
  }

  .form__select option {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* ==========================================================================
   HONEYPOT BOT PROTECTION
   ========================================================================== */

.form__honeypot {
  position: absolute;
  left: -10000px;
  height: 0;
  width: 0;
  overflow: hidden;
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.form__honeypot input,
.form__honeypot label {
  display: none !important;
  visibility: hidden;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ==========================================================================
   MOBILE RESPONSIVE FORMS
   ========================================================================== */

@media (max-width: 768px) {
  .contact-form-panel {
    padding: 1.5rem 1rem;
    overflow: hidden;
  }

  .eyebrow--mobile {
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .section-heading__title--mobile {
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 0.75rem 0;
  }

  .contact-description--mobile {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
    margin-top: 1rem;
  }

  .contact-form--mobile {
    margin-top: 1.5rem;
    overflow: hidden;
  }

  .form__row--mobile {
    gap: 1rem;
    overflow: hidden;
  }

  .form__group--mobile {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .form__group--full {
    grid-column: 1 / -1;
  }

  .form__label--mobile {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.85);
  }

  .form__input--mobile,
  .form__select--mobile,
  .form__textarea--mobile {
    font-size: 1rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
    border-radius: 6px;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }

  .form__input--mobile::placeholder,
  .form__textarea--mobile::placeholder {
    color: rgba(255,255,255,0.4);
  }

  .form__input--mobile:focus,
  .form__select--mobile:focus,
  .form__textarea--mobile:focus {
    background: rgba(255,255,255,0.08);
    border-color: #0FBADE;
    box-shadow: 0 0 0 3px rgba(15, 186, 222, 0.2);
    outline: none;
  }

  .form__select--mobile {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
  }

  .form__textarea--mobile {
    min-height: 120px;
    resize: vertical;
  }

  .btn--mobile {
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    width: 100%;
    margin-top: 1.5rem;
    border-radius: 6px;
  }

  .form__note--mobile {
    font-size: 0.75rem;
    margin-top: 1rem;
    gap: 0.5rem;
  }

  .form__note--mobile svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }

  .form__success--mobile {
    font-size: 0.9rem;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 6px;
  }

  /* Contact info panel mobile */
  .contact-info-panel--mobile {
    padding: 1.5rem 1rem;
  }

  .contact-info-items--mobile {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .contact-info-item--mobile {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }

  .contact-info-item__icon--mobile {
    min-width: 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 186, 222, 0.1);
    border-radius: 8px;
    color: #0FBADE;
    flex-shrink: 0;
  }

  .contact-info-item__title--mobile {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
  }

  .contact-info-item__text--mobile {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
  }

  .contact-info-item__text--mobile a {
    color: #0FBADE;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .contact-info-item__text--mobile a:hover {
    text-decoration: underline;
  }

  /* Map section mobile */
  .map-section--mobile {
    padding: 2rem 0;
  }

  .map-section__title--mobile {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1a5f7a;
  }

  .map-container--mobile {
    height: 300px;
    min-height: 300px;
    border-radius: 8px;
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .section-heading__title--mobile {
    font-size: 1.5rem;
  }

  .form__input--mobile,
  .form__select--mobile,
  .form__textarea--mobile {
    font-size: 1rem;
    padding: 0.875rem 0.75rem;
  }

  .form__label--mobile {
    font-size: 0.7rem;
  }

  .map-container--mobile {
    height: 250px;
  }
}


/* ==========================================================================
   FOOTER BUTTONS MOBILE OPTIMIZATION
   ========================================================================== */

@media (max-width: 768px) {
  .footer-hero__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  .footer-hero__actions .btn {
    width: auto;
    min-width: 160px;
    max-width: 70%;
    padding: 11px 22px;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 480px) {
  .footer-hero__actions .btn {
    min-width: 140px;
    max-width: 85%;
    padding: 10px 20px;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }
}


/* ==========================================================================
   FOOTER ABOUT SECTION BUTTON MOBILE OPTIMIZATION
   ========================================================================== */

@media (max-width: 768px) {
  .site-footer__about .btn {
    width: auto;
    min-width: 150px;
    max-width: 80%;
    padding: 10px 20px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .site-footer__about .btn {
    min-width: 130px;
    max-width: 90%;
    padding: 9px 18px;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }
}


/* ==========================================================================
   FOOTER LAYOUT MOBILE - SERVICES AND QUICK LINKS SIDE BY SIDE
   ========================================================================== */

@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* Ensure Contact section spans full width below */
  .site-footer__inner > div:last-child {
    grid-column: 1 / -1;
  }

  /* Ensure About section spans full width at top */
  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 40px 16px 30px !important;
  }

  .site-footer__inner > div:last-child {
    grid-column: 1 / -1;
  }

  .site-footer__about {
    grid-column: 1 / -1;
    margin-bottom: 10px;
  }
}


/* ==========================================================================
   FOOTER ABOUT COMPANY BUTTON - CENTER ALIGNMENT
   ========================================================================== */

.site-footer__about .btn {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

.site-footer__about {
  align-items: flex-start;
}

@media (max-width: 768px) {
  .site-footer__about .btn {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .site-footer__about .btn {
    width: auto;
    min-width: 130px;
    max-width: 90%;
    justify-content: center;
  }
}


/* ==========================================================================
   FOOTER QUICK LINKS - PUSH TO THE RIGHT
   ========================================================================== */

@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1.2fr !important;
  }

  /* Services on left, Quick Links on right with extra space */
  .site-footer__inner > div:nth-child(2) {
    margin-right: auto;
  }

  .site-footer__inner > div:nth-child(3) {
    margin-left: auto;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1.3fr !important;
    gap: 8px !important;
  }

  .site-footer__inner > div:nth-child(3) {
    margin-left: auto;
  }
}


/* ==========================================================================
   FOOTER ABOUT SECTION - SPACING BETWEEN TEXT AND BUTTON
   ========================================================================== */

.site-footer__about p {
  margin-bottom: 1.5rem !important;
}

.site-footer__about .btn {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .site-footer__about p {
    margin-bottom: 1.25rem !important;
  }

  .site-footer__about .btn {
    margin-top: 1.25rem;
  }
}

@media (max-width: 480px) {
  .site-footer__about p {
    margin-bottom: 1rem !important;
  }

  .site-footer__about .btn {
    margin-top: 1rem;
  }
}


/* ==========================================================================
   FOOTER ABOUT SECTION - SPACING BETWEEN BUTTON AND FOOTER SECTIONS
   ========================================================================== */

.site-footer__about {
  margin-bottom: 2rem !important;
}

.site-footer__about .btn {
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .site-footer__about {
    margin-bottom: 1.5rem !important;
  }

  .site-footer__about .btn {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 480px) {
  .site-footer__about {
    margin-bottom: 1.25rem !important;
  }

  .site-footer__about .btn {
    margin-bottom: 1rem;
  }
}


/* ========================================================================== 
   SLIDER NAVIGATION FIX - Push controls to sides
   ========================================================================== */

.project-slider__nav {
  justify-content: space-between !important;
  width: 100%;
}

@media (max-width: 640px) {
  .project-slider__nav {
    gap: var(--space-sm) !important;
  }
}

.project-slider__progress {
  flex: 0 1 200px !important;
}

@media (max-width: 640px) {
  .project-slider__progress {
    flex: 0 1 120px !important;
  }
}


/* ===============================================================================
   PROJECT GALLERY SECTION
   =============================================================================== */

.project-gallery-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: #f8f9fa;
}

.project-gallery__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.project-gallery__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy-900);
  line-height: 1.3;
}

.project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .project-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .project-gallery__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.project-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  aspect-ratio: 1;
  background: #e0e0e0;
}

.project-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-gallery__item:hover .project-gallery__image {
  transform: scale(1.1);
}

.project-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 27, 43, 0.4) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-gallery__item:hover .project-gallery__overlay {
  opacity: 1;
}

/* ===============================================================================
   END PROJECT GALLERY SECTION
   =============================================================================== */


/* ===============================================================================
   ABOUT PAGE - MOBILE FIRST RESPONSIVE DESIGN
   =============================================================================== */

/* ========== ABOUT OVERVIEW SECTION ========== */
.about-overview {
  padding: clamp(2rem, 6vw, 4rem) 0;
  background: #f8f9fa;
}

.about-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 768px) {
  .about-overview__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.about-overview__image-wrapper {
  position: relative;
}

.about-overview__image-container {
  position: relative;
  width: 100%;
  border-radius: clamp(8px, 2vw, 16px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  aspect-ratio: 1;
}

.about-overview__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-overview__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.2) 0%, transparent 100%);
  pointer-events: none;
}

.about-overview__badge {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  background: white;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: clamp(8px, 2vw, 12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-width: clamp(150px, 40vw, 200px);
}

.about-overview__badge-number {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 800;
  color: #1CB4D0;
  line-height: 1;
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.about-overview__badge-text {
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  color: #666;
  line-height: 1.4;
  font-weight: 500;
}

.about-overview__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

.about-overview__eyebrow {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  align-self: flex-start;
}

.about-overview__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-navy-900);
  line-height: 1.2;
  margin: 0;
}

.about-overview__highlight {
  color: #1CB4D0;
}

.about-overview__text {
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.7;
  color: #555;
  margin: 0;
  padding: clamp(0.5rem, 1vw, 0.75rem) 0;
}

.about-overview__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.about-overview__highlights li {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: #333;
}

.about-overview__highlights svg {
  flex-shrink: 0;
  stroke: #1CB4D0;
  min-width: clamp(16px, 2vw, 20px);
}

.about-overview__cta {
  align-self: flex-start;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
}

/* ========== VISION & MISSION SECTION ========== */
.vm-section {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: white;
}

.vm-section__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.vm-section__eyebrow {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.vm-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin: clamp(0.5rem, 1vw, 0.75rem) 0 clamp(1rem, 2vw, 1.5rem) 0;
  line-height: 1.2;
}

.vm-section__subtitle {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.vm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 768px) {
  .vm-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

.vm-card {
  background: white;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: clamp(8px, 2vw, 12px);
  border: 1px solid #eee;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.vm-card:hover {
  border-color: #1CB4D0;
  box-shadow: 0 12px 30px rgba(28, 180, 208, 0.12);
  transform: translateY(-4px);
}

.vm-card--featured {
  background: linear-gradient(135deg, rgba(28, 180, 208, 0.08) 0%, rgba(28, 180, 208, 0.04) 100%);
  border-color: #1CB4D0;
  box-shadow: 0 8px 24px rgba(28, 180, 208, 0.1);
}

.vm-card--featured .vm-card__icon {
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  color: white;
}

.vm-card--featured .vm-card__title {
  color: var(--color-navy-900);
}

.vm-card--featured .vm-card__text {
  color: #1a1a1a;
}

.vm-card__icon-wrapper {
  display: flex;
  justify-content: center;
}

.vm-card__icon {
  width: clamp(56px, 8vw, 80px);
  height: clamp(56px, 8vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1CB4D0 0%, #0d9db5 100%);
  border-radius: 50%;
  color: white;
}

.vm-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  line-height: 1.3;
}

.vm-card__text {
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  color: #666;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

/* ========== CORE VALUES SECTION ========== */
.values-section {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: #f8f9fa;
}

.values-section__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.values-section__eyebrow {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F2A93B;
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.values-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin: clamp(0.5rem, 1vw, 0.75rem) 0 clamp(1rem, 2vw, 1.5rem) 0;
  line-height: 1.2;
}

.values-section__subtitle {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.team-philosophy__values {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 640px) {
  .team-philosophy__values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-philosophy__values {
    grid-template-columns: repeat(3, 1fr);
  }
}

.philosophy-card {
  background: white;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: clamp(8px, 2vw, 12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  border-left: 4px solid transparent;
  text-align: center;
  align-items: center;
}

.philosophy-card:hover {
  border-left-color: #F2A93B;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.philosophy-card__icon {
  width: clamp(48px, 7vw, 64px);
  height: clamp(48px, 7vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F2A93B 0%, #e69a28 100%);
  border-radius: 12px;
  color: white;
  flex-shrink: 0;
}

.philosophy-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin: 0;
  line-height: 1.3;
  text-align: center;
}

.philosophy-card__text {
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  color: #666;
  line-height: 1.6;
  margin: 0;
  text-align: center;
  flex-grow: 1;
}

/* ========== CLIENT WALL SECTION ========== */
.client-wall {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: white;
}

.client-wall__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.client-wall__eyebrow {
  display: inline-block;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1CB4D0;
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.client-wall__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy-900);
  margin: clamp(0.5rem, 1vw, 0.75rem) 0 clamp(1rem, 2vw, 1.5rem) 0;
  line-height: 1.2;
}

.client-wall__subtitle {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: #666;
  max-width: 700px;
  margin: 0 auto;
}

/* ===============================================================================
   END ABOUT PAGE
   =============================================================================== */



/* ==========================================================================
   FORM SECURITY — Honeypot Fields and Bot Protection
   ========================================================================== */

/**
 * Honeypot field styling
 * Hidden from real users but visible to bots
 * Uses tab-index: -1 and aria-hidden to exclude from accessibility
 */
.form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  display: none !important;
  visibility: hidden;
  z-index: -1;
}

.form__honeypot input,
.form__honeypot label,
.form__honeypot textarea,
.form__honeypot select {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  display: none !important;
  visibility: hidden;
}

.form__honeypot input:focus,
.form__honeypot textarea:focus,
.form__honeypot select:focus {
  outline: none;
  box-shadow: none;
}

/* Additional honeypot styling for extra security */
.form__honeypot-field {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.form__honeypot-field label {
  display: none !important;
  visibility: hidden;
}

.form__honeypot-field input,
.form__honeypot-field textarea {
  display: none !important;
  visibility: hidden;
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Form validation styling */
.form__field--error {
  border-color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.05);
}

.form__field-error-message {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  font-weight: 500;
}

.form__field-required::after {
  content: ' *';
  color: #dc3545;
  font-weight: bold;
}

/* Loading state for form submission */
.form__submitting {
  opacity: 0.6;
  pointer-events: none;
}

.form__submitting button[type="submit"] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Success message styling */
.form__success {
  display: none;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-top: 1rem;
  animation: slideIn 0.3s ease-out;
}

.form__success.show {
  display: block;
}

.form__success-icon {
  color: #28a745;
  margin-right: 0.5rem;
}

/* Error message styling */
.form__error {
  display: none;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-top: 1rem;
  animation: slideIn 0.3s ease-out;
}

.form__error.show {
  display: block;
}

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

.form__error-list li {
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
}

.form__error-list li::before {
  content: '✕';
  color: #dc3545;
  font-weight: bold;
  margin-right: 0.5rem;
  font-size: 1.1rem;
}

/* Input validation states */
.form__input:invalid:not(:placeholder-shown),
.form__textarea:invalid:not(:placeholder-shown) {
  border-color: #ffc107;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}

.form__input:valid:not(:placeholder-shown),
.form__textarea:valid:not(:placeholder-shown) {
  border-color: #28a745;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Required field indicator */
.required-indicator {
  color: #dc3545;
  font-weight: bold;
  margin-left: 0.25rem;
}

/* Rate limit warning */
.form__rate-limit-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  display: none;
}

.form__rate-limit-warning.show {
  display: block;
}

/* CSRF token protection notice */
.form__security-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.5rem;
}

.form__security-icon {
  width: 14px;
  height: 14px;
  color: #28a745;
}


/* ==========================================================================
   OLD HERO SLIDER CSS - REMOVED (Use existing styles)
   ========================================================================== */




/* ========================================================================== 
   FIX: Page Hero Size Consistency (with/without breadcrumb)
   ========================================================================== */
/* When page-hero has NO breadcrumb section after it, add padding to 
   maintain consistent height with pages that have breadcrumbs */
.page-hero:not(:has(+ .breadcrumb-section)) {
    padding-bottom: calc(0.15rem + 0.15rem + 1px); /* Matches breadcrumb-section height */
}

/* ========================================================================== AOS ANIMATIONS - Global Configuration */
[data-aos] {
  opacity: 0;
  /* Will animate via AOS library */
}

[data-aos].aos-animate {
  opacity: 1;
}




/* FIX: WhatsApp button - disable hover activation on nearby space */
.whatsapp-label {
  pointer-events: none !important;
  margin-right: 0 !important;
  display: none !important;
}

.whatsapp-container {
  pointer-events: auto !important;
  width: 65px !important;
  height: 65px !important;
}

.whatsapp-container:hover .whatsapp-label {
  display: none !important;
}