/* styles.css — FIXED & FINAL (copy-paste this exact file) */
@import url('https://fonts.googleapis.com/css2?family=Monument+Extended:wght@400;600;800&family=Helvetica+Neue:wght@300;400;500&display=swap');

:root {
  --bg: #000000;
  --text: #ffffffbc;
  --red: #e500008c;
  --red-solid: #e500008c;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow-x:hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Monument Extended', sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ==== ALL SECTIONS NOW VISIBLE BY DEFAULT + FADE IN ==== */
section, .numbers, .clients-roller, .services-grid, .final-statement {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1.6s cubic-bezier(0.22,1,0.36,1);
}
section.visible, .numbers.visible, .clients-roller.visible, 
.services-grid.visible, .final-statement.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Hero has its own animation, so we override opacity */
.hero { opacity: 1; }
/* Top background layer – fades in over the main one */
.bg-top {
  position: fixed;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;                     /* starts invisible */
  z-index: -1;                    /* sits just above .bg-img (which is z-index: -2 or unset) */
  animation: fadeInTop 6s ease-out forwards; /* fade in over 6 seconds */
  pointer-events: none;           /* doesn't block clicks */
}

/* Fade-in animation for the top layer */
@keyframes fadeInTop {
  to {
    opacity: 80;                /* final opacity – adjust between 0.15–0.40 */
  }
}
/* (rest of your CSS — unchanged from before) */
header { position:fixed;top:0;left:0;right:0;padding:2.5vh 6vw;display:flex;justify-content:space-between;align-items:center;z-index:1000;mix-blend-mode:difference;color:white;transition:all .6s; }
header.scrolled { background:rgba(0,0,0,.94);backdrop-filter:blur(20px);padding:1.8vh 6vw; }
/* ──────────────────────────────────────────────
   LOGO STYLES
──────────────────────────────────────────────── */

/* Shared styles for both logo versions */
.logo-symbol {
  max-height: 125px;
  height: auto;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}

.logo-link {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo-link:hover,
.logo-link:focus {
  color: var(--red-solid);
  outline: none;
}

.logo-link:hover {
  transform: scale(1.02);
}

/* Desktop/tablet version: full logo with text */
.logo-full {
  font-size: 2.5rem;
  font-weight: 100;
  letter-spacing: -0.01em;
  gap: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.842);
}

/* Mobile version: image only (will be repositioned) */
.logo-image-only {
  display: none; /* hidden by default – shown only on mobile */
}

/* ──────────────────────────────────────────────
   MOBILE / RESPONSIVE
──────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Hide full logo with text */
  .logo-full {
    display: none;
  }

  /* Show image-only logo and position it top-right */
  .logo-image-only {
    display: flex;
    position: absolute;
    top: 2vh;
    right: 4vw;
    gap: 0;
    z-index: 1002; /* above other elements */
  }

  .logo-image-only .logo-symbol {
    max-height: 60px; /* adjust 50–70px as needed */
  }

  /* Hide text hover scale on touch devices if it feels weird */
  .logo-image-only:hover {
    transform: none;
  }

  /* Tighter header padding */
  header {
    padding: 1.8vh 4vw;
    position: relative; /* needed for absolute positioning of logo */
  }

  /* Hamburger stays top-left */
  .hamburger {
    position: absolute;
    top: 2vh;
    left: 4vw;
    z-index: 1001;
  }

  /* Mobile brand text at top of slide-out nav */
  .mobile-brand {
    display: block;
    font-family: 'Monument Extended', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    text-align: left;
  }

  .mobile-brand .since {
    font-weight: 400;
    font-size: 1.1rem;
    opacity: none;
    letter-spacing: 0.5px;
    color:rgba(255, 255, 255, 0.564)
  }

  /* Rest of nav links – make sure they come after brand */
  nav a {
    margin: 1.8rem 0;
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .logo-image-only .logo-symbol {
    max-height: 52px;
  }

  .logo-image-only {
    right: 3vw;
    top: 1.8vh;
  }

  .mobile-brand {
    font-size: 1.4rem;
  }
}

/* Desktop/tablet – ensure full logo stays left */
@media (min-width: 769px) {
  .logo-full {
    display: flex;
  }

  .mobile-brand {
    display: none; /* never show on desktop */
  }
}

nav a { font-size:1.15rem;margin-left:3.5vw;color:white;font-weight:400;letter-spacing:1px;text-decoration:none;transition:color .4s; }
nav a:hover, nav a.active { color:var(--red-solid); }

.bg-img { position:fixed;inset:0;background:center/cover no-repeat;opacity:.18;z-index:-1; }

/* HERO — base styles (desktop-first, but we'll override for mobile) */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  overflow: hidden;
  position: relative;
  padding-top: 5vh;
   /* helps with positioning if you ever add overlays */
}

/* Content wrapper — already good, but we'll center it more on mobile */
.hero-content {
  max-width: 1000px;
  transform: translateX(-100px);
  opacity: 0;
  animation: slideInLeft 1.8s cubic-bezier(.22,1,.36,1) .3s forwards;
  margin-top:5vh;
}

/* Title — fluid but we'll tighten on mobile */
.hero-title {
  font-size: clamp(6rem, 12vw, 11rem);
  line-height: .88;
  letter-spacing: -0.06em;
  font-weight: 200;
  margin: 0;
  text-align: left; /* default — we’ll center on mobile */
}

/* Subtitle — already uses clamp, good */
.hero-subtitle {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .9;
  margin: 2rem 0 6rem;
}

/* Keep your animations */
.hero-title span {
  display: block;
  opacity: 0;
  transform: translateY(80px);
  animation: rise 1.8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-title span:nth-child(1) { animation-delay: .6s; }
.hero-title span:nth-child(2) { animation-delay: .9s; color: var(--red-solid); }

/* ──────────────────────────────────────────────
   MOBILE / TABLET ADJUSTMENTS
──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero {
    min-height: 85vh;          /* Slightly shorter — prevents feeling endless on tablets */
    padding: 8vh 6vw;
    justify-content: center;   /* already centered vertically */
  }

  .hero-content {
    transform: translateX(0);  /* Remove left shift on smaller screens */
    text-align: center;        /* Better for mobile reading */
    max-width: 90%;            /* Prevent ultra-wide text lines */
    margin: 0 auto;
    margin-top: 16vh;
  }

  .hero-title {
    font-size: clamp(4.5rem, 10vw, 8rem); /* Smaller range — still big but not overwhelming */
    line-height: 0.92;                    /* Slightly more breathing room */
    letter-spacing: -0.04em;
  }

  .hero-subtitle {
    margin: 1.5rem 0 4rem;                /* Less vertical space */
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 70vh;                      /* Even shorter on phones — users see content sooner */
    padding: 0 5vw 10vh;                   /* Extra bottom padding so CTA isn't cut off by browser UI */
  }

  .hero-title {
    font-size: clamp(3.8rem, 11vw, 6rem); /* Very mobile-friendly size */
    line-height: 0.95;
  }

  .hero-subtitle {
    margin: 1.2rem 0 3.5rem;
  }

  /* Optional: make button full-width for easier tapping */
  .hero-btn {
    width: 100%;
    max-width: 320px;                      /* or remove max if you want truly full-width */
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 60vh;                      /* Very compact — great for portrait phones */
    padding: 0 4vw 12vh;
  }

  .hero-title {
    font-size: clamp(3rem, 13vw, 5rem);   /* Aggressive but still readable */
  }

  .hero-subtitle {
    font-size: clamp(1rem, 4vw, 1.2rem);
    margin: 1rem 0 3rem;
  }
}

@keyframes rise { to { opacity:1;transform:translateY(0); } }
@keyframes slideInLeft { to { opacity:1;transform:translateX(0); } }

/* BUTTONS */
.btn, .hero-btn {
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Monument Extended',sans-serif;font-weight:600;
  font-size:clamp(1rem,2vw,1.4rem);letter-spacing:2px;text-transform:uppercase;
  color:#ffffffbc;background:transparent;border:2px solid var(--red);
  padding:1.4rem 4rem;text-decoration:none;cursor:pointer;
  transition:background .5s cubic-bezier(.22,1,.36,1), color .5s, border-color .5s;
}
.btn:hover, .hero-btn:hover {
  background:var(--red);
  color:white;
  border-color:var(--red-solid);
}
.hero-btn {
  font-size:clamp(1.4rem,3vw,2rem);
  padding:1.6rem 5rem;
  margin-left:-300px;
  animation:slideInButton 3s cubic-bezier(.22,1,.36,1) .4s forwards;
}
@keyframes slideInButton {to {margin-left:0;}}

/* Fix: bring all buttons above the dark gradient */
.service-card a.btn,
.final-statement a.btn,
.hero-btn {
  position: relative;
  z-index: 10;
}

/* NUMBERS */
.numbers { padding:12vh 6vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4rem;text-align:center; }
.counter { font-size:clamp(6rem,12vw,10rem);font-weight:100;color:var(--red-solid);margin-bottom:.5rem; }
.label { font-family:'Helvetica Neue',sans-serif;font-weight:300;font-size:1.2rem;letter-spacing:2px;opacity:.7; }

/* CLIENT LOGOS ROLLER — infinite smooth marquee with real logos */
.clients-logos-roller {
  background: #0a0a0a70;
  padding: 8vh 0 8vh;
  overflow: hidden;
  position: relative;
}

.clients-logos-roller::before {
 position: absolute;
  top: 3vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 200;
  letter-spacing: 4px;
  color: #ffffff50;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}

.logos-wrapper {
  display: flex;
  
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 8vw;
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding-right: 8vw;
  animation: logoScroll 60s linear infinite;
  will-change: transform;

}

.logos-track img {
  height: 68px;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(1.4);
  opacity: 0.65;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.logos-track img:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
  transform: translateY(-10px) scale(1.08);
}

@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover for better user control */
.clients-logos-roller:hover .logos-track {
  animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .logos-track {
    gap: 6vw;
    padding-right: 6vw;
  }

  .logos-track img {
    height: 58px;
    max-width: 160px;
  }
}

@media (max-width: 768px) {
  .clients-logos-roller {
    padding: 8vh 0 6vh;
  }

  .logos-track {
    gap: 5vw;
    padding-right: 5vw;
  }

  .logos-track img {
    height: 50px;
    max-width: 140px;
  }

  .clients-logos-roller::before {
    font-size: 1.4rem;
    letter-spacing: 3px;
  }
}

@media (max-width: 480px) {
  .logos-track {
    gap: 4vw;
  }

  .logos-track img {
    height: 44px;
    max-width: 120px;
  }
}

/* TRUSTED PARTNERS & SUPPLIERS — logos left, text right */
.partners {
  padding: 5vh 6vw 18vh;
  text-align: center;
}

.partners .section-title {
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.645);
  margin-bottom: 10vh;
}


.partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  max-width: 1600px;
  margin: 0 auto;
  align-items: center;
}

.partners-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  justify-items: center;
}

.partners-logos img {
  max-width: 140px;
  max-height: 80px;
  object-fit: contain;
  filter: brightness(1.4);
  opacity: 0.7;
  transition: all 0.6s;
}

.partners-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-6px);
}

.partners-text {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.8;
  color: #ffffffd0;
  text-align: left;
}

.partners-text p {
  margin-bottom: 2rem;
}

@media (max-width: 1500px) {
  .partners-grid {
    grid-template-columns: 1fr;
    gap: 10vh;
  }
  .partners-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
  .partners-text {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .partners-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* INDUSTRIES CAROUSEL — auto-rotating, image left / text right */
.industries-carousel {
  padding: 14vh 6vw 12vh;
  background: #00000000;
  text-align: center;
}

.industries-carousel .section-title {
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.645);
  margin-bottom: 10vh;
}

.carousel-container {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  height: 70vh;
  min-height: 500px;
  /* Prevent browser pause/play overlay */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; /* disables native animation controls */
}

.carousel-container > * {
  pointer-events: auto; /* re-enable clicks on arrows, dots, etc. */
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22,1,0.36,1);
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-image {
  background: center/cover no-repeat;
  position: relative;
}

.carousel-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.8), transparent 70%);
}

.carousel-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 8vw;
  text-align: left;
  z-index: 1;
}

.carousel-content h3 {
  font-size: clamp(2.5rem, 4vw, 2rem);   /* lower min and preferred value → better mobile scaling */
  font-weight: 200;
  color: var(--red-solid);
  margin-bottom: 1.8rem;                  /* slightly less space under title */
  letter-spacing: -0.02em;
  line-height: 1.05;                      /* tighter line height helps with multi-word titles */
  text-transform: uppercase;
  word-break: break-word;                 /* safety for very long industry names */
  hyphens: auto;                          /* gentle hyphenation where browser supports */
}

/* Mobile adjustments – make titles fit comfortably */
@media (max-width: 768px) {
  .carousel-content h3 {
    font-size: clamp(2rem, 2vw, 2rem);  /* significantly smaller on phones */
    margin-bottom: 1.2rem;
    line-height: 1.1;
    padding: 0 1rem;                        /* prevent edge touching on narrow screens */
  }

  .carousel-content {
    padding: 4vh 4vw;                       /* tighter side padding helps titles breathe */
  }
}

@media (max-width: 480px) {
  .carousel-content h3 {
    font-size: clamp(1.9rem, 10vw, 3.2rem);
    margin-bottom: 1rem;
  }
}

.carousel-content p {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.6;
  opacity: 0.9;
  max-width: 600px;
}

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 4vh;
}

.carousel-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
  transition: background 0.6s;
}

.carousel-dots span.active {
  background: var(--red-solid);
}

/* Arrows — clean, minimal red circles */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0);
  border: 2px solid var(--red-solid);
  border-radius: 50%;
  color: var(--red-solid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  transition: all 0.5s cubic-bezier(0.22,1,0.36,1);
  backdrop-filter: blur(10px);
  opacity: 0.8;
}

.carousel-arrow:hover {
  opacity: 1;
  background: var(--red-solid);
  color: white;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 0 40px rgba(229, 0, 0, 0.6);
}

.prev-arrow {
  left: 4vw;
}

.next-arrow {
  right: 4vw;
}

.carousel-arrow svg {
  width: 30px;
  height: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
  .carousel-slide {
    grid-template-columns: 1fr;
  }
  .carousel-image {
    height: 40vh;
  }
  .carousel-content {
    padding: 6vh 6vw;
    text-align: center;
    align-items: center;
  }
  .carousel-image::after {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9));
  }
}


/* INDUSTRIES — COMPACT WITH ICONS */
.industries-section {
  padding: 12vh 6vw 10vh;
  text-align: center;
}
.industries-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1rem;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .industries-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 768px)  { .industries-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .industries-grid { grid-template-columns: repeat(3, 1fr); } }

.industry-card {
  height: 140px;
  border: 1px solid #333;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.22,1,0.36,1);
}
.industry-card.visible { opacity: 1; transform: translateY(0); }
.industry-card:hover { border-color: var(--red-solid); transform: translateY(-6px); }

.industry-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.299);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  backdrop-filter: blur(4px);
}
.industry-overlay i {
  font-size: 2.2rem;
  color: #ffffff70;
  transition: all 0.5s;
}
.industry-card:hover i {
  color: var(--red-solid);
  transform: scale(1.2);
}
.industry-overlay h3 {
  font-size: clamp(0.85rem, 1.5vw, 0.8rem);
  font-weight: 200;
  color: var(--red-solid);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

/* TRUSTED BY — ULTRA-THIN & MINIMAL */
.clients {
  padding: 8vh 6vw 6vh;           /* much less vertical space */
  text-align: center;
  background: #0a0a0a5f;
}
.clients .section-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);   /* smaller title */
  font-weight: 200;
  letter-spacing: 3px;
  color: #ffffff90;
  margin-bottom: 4vh;
}

.clients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3.5rem);   /* tighter gaps */
  max-width: 1400px;
  margin: 0 auto;
}
.clients-grid span {
  font-family: 'Monument Extended', sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);   /* much thinner text */
  color: #ffffff40;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.6s;
}
.clients-grid span:hover {
  color: #ffffff90;
}

/* FEATURED PROJECTS — your original perfect cards */
.projects-section {
  padding: 16vh 6vw 14vh;
  text-align: center;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 3rem;
  max-width: 1500px;
  margin: 0 auto;
}
.project-card {
  height: 62vh;
  min-height: 480px;
  background: center/cover no-repeat;
  border: 1px solid #222;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(80px);
  transition: all 1s cubic-bezier(0.22,1,0.36,1);
}
.project-card.visible { opacity: 1; transform: translateY(0); }
.project-card:hover {
  border-color: var(--red-solid);
  transform: translateY(-16px);
}
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0.6,0.7,0.8,1), transparent 99%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
}
.project-card h3 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  color: var(--red-solid);
  margin-bottom: 0.8rem;
}
.project-card p {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  opacity: 0.9;
  line-height: 1.5;
}
/* Make sure industry & project cards respect the global fade-in */
.industry-card,
.project-card {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s cubic-bezier(0.22,1,0.36,1);
}
.industry-card.visible,
.project-card.visible {
  opacity: 1;
  transform: translateY(0);
}
/* GLOBAL MAP */
.global-reach { background: transparent; padding: 16vh 6vw 14vh; }
.map-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 80vh;
  position: relative;
}
.world-svg { width: 100%; height: 100%; object-fit: contain; opacity: 0.35; }
.project-marker { position: absolute; transform: translate(-50%,-50%); z-index: 10; }
.project-dot {
  width: 14px; height: 14px;
  background: var(--red-solid);
  border-radius: 50%;
  box-shadow: 0 0 80px var(--red-solid);
  transition: all 0.4s;
  cursor: pointer;
}
.project-dot:hover { transform: scale(3); box-shadow: 0 0 140px var(--red-solid); }
.project-textbox {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.96);
  border: 2px solid var(--red-solid);
  padding: 1rem 1.6rem;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(255,0,0,0.5);
  min-width: 220px;
  text-align: center;
}
.project-marker:hover .project-textbox { opacity: 1; }

/* ABOUT PAGE — perfectly matching the new dark premium style */
.philosophy, .stats, .culture {
  padding: 14vh 6vw 12vh;
  text-align: center;
}

/* Philosophy Cards */
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto;
}
.philosophy-card {
  background: rgba(20, 20, 20, 0.561);
  border: 1px solid #333;
  padding: 3rem 2.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.8s cubic-bezier(0.22,1,0.36,1);
}
.philosophy-card:hover {
  border-color: var(--red-solid);
  transform: translateY(-12px);
}
.philosophy-card h3 {
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--red-solid);
  margin-bottom: 1.4rem;
  letter-spacing: 1px;
}
.philosophy-card p {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.7;
  opacity: 0.92;
}

/* Stats */
.stats {
  background: #0a0a0a90;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.stat-value {
  font-size: clamp(4.5rem, 8vw, 6rem);
  font-weight: 200;
  color: var(--red-solid);
}
.stat-label {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 2.5px;
  color: #ffffff70;
  margin-top: 0.5rem;
}

/* Culture / Team */
/* Culture / Team */
.culture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  max-width: 1600px;
  margin: 0 auto;
  align-items: center;
}

.culture-image {
  position: relative;                    /* Required for the overlay */
  background: url('assets/images/culture.jpg') center/cover no-repeat;
  height: 78vh;
  min-height: 520px;
  border: 1px solid #333;
  border-radius: 4px;                    /* optional – remove if you don't want rounding */
  overflow: hidden;                      /* ensures overlay doesn't spill */
}

.culture-image::before {
  content: '';
  position: absolute;
  inset: 0;                              /* covers the entire image area */
  background: rgba(0, 0, 0, 0.55);       /* semi-transparent black overlay */ /* 0.35 = lighter   /   0.55–0.65 = darker */
  z-index: 1;                            /* sits above background image */
  pointer-events: none;                  /* doesn't interfere with anything */
}

/* Text styling (unchanged) */
.culture-text {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.8;
  opacity: 0.95;
}

.culture-text strong { 
  color: var(--red-solid); 
}

@media (max-width: 1024px) {
  .culture-grid { grid-template-columns: 1fr; }
  .culture-image { height: 60vh; }
}

/* CONTACT PAGE — brutalist, minimal, premium */
.contact {
  padding: 4vh 6vw 12vh;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.contact-form {
  display: grid;
  gap: 6vh;
}

.form-group {
  position: relative;
}
.form-group input,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,0.25);
  padding: 1.8rem 0 1rem;
  font-family: 'Monument Extended', sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: white;
  letter-spacing: -0.02em;
  transition: border-color 0.6s;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--red-solid);
}

.form-group label {
  position: absolute;
  top: 2rem;
  left: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.form-group input:focus ~ label,
.form-group input:valid ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:valid ~ label {
  top: -1.2rem;
  font-size: 1.2rem;
  color: var(--red-solid);
}

.form-group textarea {
  height: 26vh;
  resize: none;
}

/* Re-use .btn for submit — perfect consistency */
.contact .btn {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  padding: 1.8rem 5rem;
  margin-top: 4vh;
  justify-self: start;
}

/* Contact info */
.contact-info {
  margin-top: 10vh;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
}
.contact-info p {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin: 1.5rem 0;
  opacity: 0.8;
}
.contact-info a {
  color: var(--red-solid);
  text-decoration: none;
  transition: opacity 0.4s;
}
.contact-info a:hover {
  opacity: 1;
}

/* SERVICE CARDS — black bg, controllable image opacity, gradient, no double, no movement */
/* SERVICE CARDS — black bg, controllable image opacity, gradient, no double, no movement */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 3rem;
  padding: 12vh 6vw;
  max-width: 1600px;
  margin: 0 auto;
}

.service-card {
  height: 68vh;
  min-height: 480px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  border: 1px solid #222;
  overflow: hidden;
  background: #000000eb;
  transform: translateY(80px);
  transition: 
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0.3;
  transition: opacity 0.8s ease;
  z-index: 1;
}

.service-card:hover .service-bg {
  opacity: 0.125;
}

.service-card:hover {
  border-color: var(--red-solid);
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.94), transparent 50%);
  z-index: 2;
  pointer-events: none;
}

.service-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.service-card h2 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 200;
  margin-bottom: 1rem;
}

.service-card p {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
  opacity: .85;
  margin-bottom: 2rem;
  text-transform: none;
}

/* ──────────────────────────────────────────────
   MOBILE: shrink cards ~50% proportionally
──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;           /* single column */
    gap: 2rem;
    padding: 8vh 5vw 10vh;                /* less vertical space */
  }

  .service-card {
    min-height: 240px;                    /* roughly half original min-height */
    max-height: 360px;                    /* prevent over-stretching */
    padding: 1.2rem;                      /* smaller internal padding */
    transform: translateY(40px);          /* smaller entrance animation */
  }

  .service-card h2 {
    font-size: clamp(1.5rem, 6vw, 2.1rem); /* ~60-70% of desktop size */
    margin-bottom: 0.6rem;
  }

  .service-card p {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem); /* smaller paragraph */
    line-height: 1.45;
    margin-bottom: 1.2rem;
  }

  .service-card .btn {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    padding: 0.9rem 2rem;
    width: 100%;                      /* full-width for easy tapping */
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .service-card {
    min-height: 220px;
    padding: 1rem;
  }

  .service-card h2 {
    font-size: clamp(1.4rem, 7vw, 1.9rem);
  }

  .service-card p {
    font-size: clamp(0.9rem, 4.2vw, 1rem);
  }
}
/* Dark overlay on carousel industry images */
.carousel-image {
  position: relative;           /* Important: allows ::before to position inside */
  background-size: cover;       /* Assuming you already have this, but ensure it */
  background-position: center;
}

/* Create the dark overlay using ::before pseudo-element */
.carousel-image::before {
  content: '';                  /* Required for pseudo-element to appear */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.514); /* Dark tint – change last number (0.50) for strength */
  z-index: 1;                   /* Above background but below content */
  pointer-events: none;         /* Doesn't block clicks/hover on content */
  border-radius: inherit;       /* Matches any rounding on .carousel-image */
}

/* Make sure the actual content (h3 + p) stays above the overlay */
.carousel-content {
  position: relative;
  z-index: 2;                   /* Higher than overlay */
  color: white;                 /* Ensure text is readable – adjust if needed */
  text-shadow: 0 1px 3px rgba(0,0,0,0.8); /* Optional: improves contrast */
}
/* CAPABILITIES SELECTOR */
.capabilities-selector {
  padding: 5vh 6vw 12vh;
  text-align: center;
}


/* Make section titles dynamic everywhere — but extra attention here */
.section-title {
  font-size: clamp(3.5rem, 7vw, 6.5rem);  /* smaller min + more aggressive scaling */
  font-weight: 200;
  color: rgba(255, 255, 255, 0.645);
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: clamp(4vh, 8vw, 10vh);
  text-transform: uppercase;
  line-height: 1;
}
/* Optional subtitle styling if you want to keep it */
.capabilities-selector .section-subtitle {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.603);
  margin: 1.5rem 0 4rem;
  letter-spacing: 2px;
}
.arrow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30vw;
}

.arrow-btn {
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 100px;
  transition: transform 0.6s;
}

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

.arrow-circle {
  width: 70px;
  height: 70px;
  border: 2px solid var(--red-solid);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s;
}

.arrow-btn.active .arrow-circle {
  background: var(--red-solid);
  box-shadow: 0 0 60px rgba(229,0,0,0.6);
}

.arrow-line {
  position: absolute;
  width: 80px;
  height: 2px;
  background: var(--red-solid);
  top: 50%;
  transition: all 0.6s;
}

.left-arrow .arrow-line {
  right: 50%;
  transform: translateY(-50%);
}

.right-arrow .arrow-line {
  left: 50%;
  transform: translateY(-50%);
}

/* EXPANDING PANELS — expand downward, meet in middle */
.capabilities-expander {
  padding: 0 6vw 18vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  max-width: 1600px;
  margin: 0 auto;
}

.panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 1.8s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  grid-column: span 1;
}

.hardware-panel {
  text-align: right;
  justify-self: end;     /* aligns to right of its half */
  padding-right: 4vw;
}

.software-panel {
  text-align: left;
  justify-self: start;   /* aligns to left of its half */
  padding-left: 4vw;
}

.panel.active {
  max-height: 2000px;
  opacity: 1;
}

.capability-column h2 {
  font-size: clamp(3.8rem, 8vw, 4rem);
  font-weight: 200;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-bottom: 6vh;
  color: rgba(255, 255, 255, 0.576);
}

.capability-list {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.capability-card {
  background: rgba(15,15,15,0.88);
  border: 1px solid #222;
  padding: 2.2rem 2rem;
  backdrop-filter: blur(8px);
  transition: all 0.8s cubic-bezier(0.22,1,0.36,1);
}
.capability-card:hover {
  border-color: var(--red-solid);
  transform: translateY(-6px);
}

.capability-card h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--red-solid);
  margin-bottom: 0.6rem;
  letter-spacing: 1px;
}

.capability-card p {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.6;
  opacity: 0.9;
}

.global-subtitle-wrapper {
  text-align: center;
  max-width: 900px;
  margin: 1.5rem auto 4rem;     /* good breathing room above and below */
}

.global-subtitle-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 200;
  color: var(--red-solid);
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.global-subtitle-text {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  letter-spacing: 1.2px;
  opacity: 0.9;
  margin: 0;
  color: rgb(255, 255, 255);
}
/* Slightly smaller version for secondary sections (optional — remove if you want all huge) */
.global-reach .section-title,
.projects-section .section-title {
  font-size: clamp(3rem, 7vw, 6.5rem);
  margin-bottom: 8vh;
}
@media (max-width: 1024px) {
  .capabilities-expander {
    grid-template-columns: 1fr;
  }
  .hardware-panel, .software-panel {
    justify-self: stretch;
    padding: 0;
    text-align: left;
  }
  .arrow-container {
    gap: 15vw;
  }
  .red-text {
  color: var(--red-solid);
}

}
/* FLIPPED PARTNERS — text left, logos right */
.partners.flipped .partners-grid {
  direction: rtl; /* reverses the grid order */
}

.partners.flipped .partners-grid > * {
  direction: ltr; /* restores normal reading direction inside each column */
}

.partners.flipped .partners-text {
  text-align: right;
}

@media (max-width: 1500px) {
  .partners.flipped .partners-grid {
    direction: ltr; /* stack normally on mobile/tablet */
  }
  .partners.flipped .partners-text {
    text-align: center;
  }
}

/* Hamburger base styles – hidden by default */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  cursor: pointer;
  z-index: 1001; /* Above other elements */
}

.bar {
  height: 3px;
  width: 100%;
  background: white;
  transition: all 0.3s ease;
}

/* Mobile breakpoint – smaller & safer for small phones */
@media (max-width: 768px) {
  /* Hide desktop nav links */
  nav {
    position: fixed;
    top: 0;
    left: -240px;                /* matches new smaller width */
    width: 240px;                /* smaller overall width */
    height: 100vh;
    background: rgba(0,0,0,0.96);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14vh 4vw 4vh;       /* reduced top + sides + bottom padding */
    transition: left 0.4s cubic-bezier(0.22,1,0.36,1);
    z-index: 999;
    box-sizing: border-box;
  }

  nav a {
    margin: 0.1rem 0;            /* tighter vertical spacing */
    font-size: 1.4rem;           /* smaller but still very tappable */
    padding: 0.1rem 0;
    width: 100%;
    text-align: left;
  }

  /* Show slide-out on active */
  nav.active {
    left: 0;
  }

  /* Hamburger in upper left */
  .hamburger {
    display: flex;
    position: absolute;
    top: 2.2vh;                  /* slightly tighter alignment */
    left: 4vw;
  }

  /* Cleaner X animation on small screens */
  .hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(10px, -9px);
  }

  /* Dim background when menu open */
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 998;                /* behind menu */
    transition: opacity 0.4s;
  }
  /*Past Projects*/
}

/* Additions for dropdowns – builds on your existing nav styles */
/* Additions for dropdowns – builds on your existing nav styles */

/* Top-level list: horizontal on desktop, no bullets */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Top-level items: keep your margin spacing */
.nav-list > li {
  list-style: none;
  margin-left: 3.5vw;  /* Matches your nav a margin-left */
}

/* KEY FIX: Make dropdown parents the positioning context */
.nav-list > li.has-dropdown {
  position: relative;
}

/* Apply your existing nav a styles to the new structure */
.nav-list li {
  list-style: none;
}

/* Dropdown menus: hidden by default on desktop */
.dropdown-menu {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;                          /* Now aligns to parent's left edge */
  background: rgba(0,0,0,0.96);
  backdrop-filter: blur(20px);
  border: 1px solid #333;
  border-top: 2px solid var(--red-solid);
  min-width: 180px;
  padding: 1rem 0;
  margin: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  z-index: 999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1), transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

/* Sub-items */
.dropdown-menu li {
  margin: 0;
}
.dropdown-menu a {
  display: block;
  padding: 0.9rem 1.6rem;
  margin-left: 0;
  font-size: 1.05rem;
  transition: all 0.3s;
}
.dropdown-menu a:hover {
  background: rgba(229,0,0,0.15);
  padding-left: 2rem;
}

/* Hover reveal for desktop/tablet */
@media (min-width: 769px) {
  .has-dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);  /* Slide straight down from parent */
  }

  .has-dropdown:hover > a {
    color: var(--red-solid);
  }
}

/* Mobile adjustments: indented sub-lists in slide-out */
@media (max-width: 768px) {
  .nav-list {
    display: block;
  }

  .nav-list > li {
    margin-left: 0;
    margin: 1.8rem 0;
  }

  .dropdown-menu {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.5rem 0 0.5rem 1.5rem;
    opacity: 1;
    transform: none;
  }

  .dropdown-menu a {
    font-size: 1.25rem;
    padding: 0.8rem 0;
  }
}
/* Downloads page specific – reuse service-card patterns */
.downloads-hero {
  min-height: 70vh; /* Shorter than full hero for quicker content access */
  padding: 20vh 8vw 10vh;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 3rem;
  padding: 12vh 6vw;
  max-width: 1600px;
  margin: 0 auto;
}

.download-card {
  /* Reuse your service-card styles – copy if not already class-shared */
  height: 68vh;
  min-height: 480px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  border: 1px solid #222;
  overflow: hidden;
  background: #000000eb;
  transform: translateY(80px);
  transition: transform 1.4s cubic-bezier(0.22,1,0.36,1), border-color 0.6s cubic-bezier(0.22,1,0.36,1);
}

.download-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.download-card:hover {
  border-color: var(--red-solid);
}

.download-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.94), transparent 50%);
  z-index: 2;
  pointer-events: none;
}

.download-card .service-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.download-card h2 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 200;
  margin-bottom: 1rem;
}

.download-card p {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
  opacity: .85;
  margin-bottom: 2rem;
}

/* Mobile stack */
@media (max-width: 768px) {
  .downloads-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 8vh 5vw;
  }

  .download-card {
    min-height: 360px;
  }
}

/* ──────────────────────────────────────────────
   MOBILE COLLAPSIBLE SUBMENUS + SCROLLABLE MENU
──────────────────────────────────────────────── */

.submenu-toggle {
  display: none;
}

.parent-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: white;
  transition: color 0.3s;
}

.parent-label:hover,
.parent-label:focus {
  color: var(--red-solid);
}

/* Arrow only visible in mobile */
.arrow {
  display: none;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .main-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--red-solid) rgba(0,0,0,0.6);
  }

  .main-nav::-webkit-scrollbar {
    width: 6px;
  }

  .main-nav::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.6);
  }

  .main-nav::-webkit-scrollbar-thumb {
    background: var(--red-solid);
    border-radius: 3px;
  }

  .arrow {
    display: inline-block;
    margin-left: 0.5rem;
  }

  .submenu-toggle:checked + .parent-label .arrow {
    transform: rotate(180deg);
  }

  .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    padding: 0 0 0 1.5rem;
  }

  .submenu-toggle:checked ~ .dropdown-menu {
    max-height: 400px;  /* Increase if you add more sub-items */
    opacity: 1;
    padding: 0.5rem 0 0.5rem 1.5rem;
  }

  .parent-label {
    font-size: 1.5rem;
    margin: 1.8rem 0;
    padding: 0.5rem 0;
    width: 100%;
    text-align: left;
  }

  .parent-label a {
    pointer-events: none;  /* Prevent navigation on tap in mobile – only toggle submenu */
  }

  .dropdown-menu a {
    font-size: 1.25rem;
    padding: 0.8rem 0;
    display: block;
  }

  .submenu-toggle:checked + .parent-label {
    color: var(--red-solid);
  }
}

/* Font consistency: apply nav a styles to parent-label and subs on desktop */
@media (min-width: 769px) {
  .parent-label {
    display: inline;
    margin: 0;
    padding: 0;
    cursor: default;  /* Not tappable on desktop */
  }

  .parent-label a {
    font-size: 1.15rem;  /* Match nav a */
    margin-left: 3.5vw;
    color: white;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color .4s;
  }

  .parent-label a:hover {
    color: var(--red-solid);
  }
}

/* FINAL STATEMENT */
.final-statement { min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw;gap:6vh; }
.final-statement p { font-size:clamp(3.0rem,7vw,5rem);font-weight:200;line-height:1.1;max-width:120vw; }

/* FOOTER */
footer { padding:10vh 6vw 6vh;text-align:center;font-family:'Helvetica Neue',sans-serif;font-weight:300;font-size:1rem;opacity:.5;letter-spacing:1px; }

@media (max-width:768px) {
  .hero-btn { margin-left:-150px;padding:1.4rem 4rem;font-size:1.3rem; }
}