/* ==========================================================================
   GEO SEA ENGINEERING LIMITED — style.css
   Design: industrial engineering | Sora + Manrope
   RECOLOR NOTE (2026-07): All palette tokens updated to brand identity.
   Variable NAMES are unchanged (--clr-teal-*, --clr-navy-*, etc.) to avoid
   touching every usage rule. VALUES now reflect the real brand:
     "teal" tokens  → brand yellow/amber  (#FBB603 / #E29400 / #FDD055)
     "emerald" tokens → deep amber / warm amber (#CC7A00 / #E29400 / #F5C842)
     "blue" tokens  → secondary amber / ochre (#B86A00 / #D4880A)
     "navy" tokens  → charcoal near-blacks  (#0a0a0a / #131313 / #1c1c1c …)
   Light offwhites → warm neutrals (#faf9f6 / #f3f1ec)
   ========================================================================== */

/* --------------------------------------------------------------------------
   GOOGLE FONTS — loaded via HTML link tag (Sora + Manrope)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   01. DESIGN TOKENS — CSS Custom Properties
   ========================================================================== */
:root {
  /* --- Brand Palette ---
     NOTE: variable names kept for backward-compat; VALUES are brand-accurate.
     "navy"    = rich charcoal / near-black tones
     "teal"    = brand yellow #FBB603 and amber variants
     "emerald" = deeper amber / warm-amber variants
     "blue"    = secondary amber / ochre variants               */

  --clr-navy-950:    #0a0a0a;   /* deepest backgrounds                       */
  --clr-navy-900:    #131313;   /* dark section bands                        */
  --clr-navy-800:    #1c1c1c;   /* header scrolled, footer                   */
  --clr-navy-700:    #2a2a2a;   /* card subtle borders on dark               */
  --clr-navy-600:    #383838;   /* accent on dark surface                    */

  --clr-teal-400:    #FBB603;   /* brand yellow — primary accent             */
  --clr-teal-300:    #FDD055;   /* yellow highlight                          */
  --clr-teal-200:    #FDE898;   /* yellow light, chip hover bg               */

  --clr-emerald-500: #E29400;   /* deep amber — secondary accent             */
  --clr-emerald-400: #F0A800;   /* amber hover / hover glow                  */
  --clr-emerald-300: #F5C842;   /* light amber                               */

  --clr-blue-500:    #CC7A00;   /* dark amber — btn gradient end             */
  --clr-blue-400:    #D4880A;   /* link colour accent on dark                */

  --clr-white:       #ffffff;
  --clr-offwhite:    #faf9f6;   /* warm light section background             */
  --clr-grey-50:     #f3f1ec;   /* subtlest warm light bg                    */
  --clr-grey-100:    #e4e0d6;   /* borders on light                          */
  --clr-grey-200:    #c8c2b0;
  --clr-grey-400:    #8a8070;   /* muted text                                */
  --clr-grey-600:    #5a5245;   /* secondary text on light                   */
  --clr-grey-800:    #1e1a14;   /* body text                                 */

  --clr-red-500:     #e03c3c;   /* form error                                */

  /* --- Semantic Aliases --- */
  --bg-light:        var(--clr-offwhite);
  --bg-light-alt:    var(--clr-grey-50);
  --bg-dark:         var(--clr-navy-900);
  --bg-dark-alt:     var(--clr-navy-950);
  --bg-dark-mid:     var(--clr-navy-800);

  --text-primary:    var(--clr-grey-800);
  --text-secondary:  var(--clr-grey-600);
  --text-on-dark:    #e8dfc8;
  --text-on-dark-muted: #9a8f78;

  --accent-primary:  var(--clr-teal-400);
  --accent-secondary:var(--clr-emerald-500);
  --accent-blue:     var(--clr-blue-500);

  /* --- Gradients ---
     Yellow → amber replaces old teal → blue gradient.
     On dark bands: yellow reads well; on light: yellow used for accents only. */
  --grad-btn:        linear-gradient(135deg, var(--clr-teal-400) 0%, var(--clr-blue-500) 100%);
  --grad-btn-hover:  linear-gradient(135deg, var(--clr-teal-300) 0%, var(--clr-emerald-500) 100%);
  --grad-hero:       linear-gradient(135deg, var(--clr-navy-950) 0%, #111008 40%, #18150a 70%, #0e0c06 100%);
  --grad-card-glow:  radial-gradient(ellipse 80% 60% at 50% 110%, rgba(251,182,3,.18) 0%, transparent 70%);
  --grad-card-glow-emerald: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(226,148,0,.16) 0%, transparent 70%);

  /* --- Typography --- */
  --font-display:    'Sora', sans-serif;
  --font-body:       'Manrope', sans-serif;

  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   1.875rem;   /*  30px */
  --text-3xl:   2.25rem;    /*  36px */
  --text-4xl:   3rem;       /*  48px */
  --text-5xl:   3.75rem;    /*  60px */
  --text-6xl:   4.5rem;     /*  72px */

  /* --- Spacing --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* --- Border Radius --- */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-pill: 9999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(10,10,10,.10), 0 1px 2px rgba(10,10,10,.08);
  --shadow-md:   0 4px 16px rgba(10,10,10,.14), 0 2px 6px rgba(10,10,10,.10);
  --shadow-lg:   0 8px 32px rgba(10,10,10,.18), 0 4px 12px rgba(10,10,10,.12);
  --shadow-card: 0 2px 12px rgba(10,10,10,.08), 0 1px 4px rgba(10,10,10,.06);
  --shadow-dark-card: 0 4px 20px rgba(0,0,0,.40), 0 1px 6px rgba(0,0,0,.25);
  /* "glow-teal" token now holds brand-yellow glow */
  --shadow-glow-teal: 0 0 24px rgba(251,182,3,.22), 0 0 8px rgba(251,182,3,.14);

  /* --- Transitions --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   400ms;

  /* --- Layout --- */
  --container-max:  1200px;
  --header-height:  68px;
  --section-py:     var(--space-20);
}

/* ==========================================================================
   02. CSS RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

p, li, label {
  text-align: center;
}

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

ul, ol {
  list-style: none;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

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

/* ==========================================================================
   03. UTILITIES
   ========================================================================== */
.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;
}

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

/* ==========================================================================
   04. FOCUS VISIBLE — Accessibility
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   05. SECTION BASE
   ========================================================================== */
.section {
  padding-block: var(--section-py);
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  text-align: center;
}

.section__subtitle {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
}

/* ==========================================================================
   06. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

/* Primary button: yellow/amber bg + BLACK text — high contrast on all surfaces */
.btn--primary {
  background: var(--grad-btn);
  color: #0a0a0a;
  box-shadow: 0 4px 20px rgba(251,182,3,.35), 0 1px 4px rgba(204,122,0,.25);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--grad-btn-hover);
  box-shadow: 0 6px 28px rgba(251,182,3,.50), 0 2px 8px rgba(226,148,0,.35);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--outline {
  background: transparent;
  color: var(--clr-white);
  border: 2px solid rgba(255,255,255,.45);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 16px rgba(251,182,3,.22);
  transform: translateY(-2px);
}

/* ==========================================================================
   07. NAVIGATION / HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    background var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    backdrop-filter var(--duration-base) var(--ease-standard);
}

.site-header--scrolled {
  background: rgba(19,19,19,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0,0,0,.50);
}

.nav {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Wordmark — CSS grid so logo sits in its own column and the two text spans
   stack vertically in the second column — no HTML changes needed */
.nav__wordmark {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-3);
  line-height: 1.1;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo badge — white circular background so the black logo parts read on dark header */
.nav__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  padding: 4px;
  object-fit: contain;
  /* Span both text rows */
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  transition:
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.nav__wordmark:hover .nav__logo {
  box-shadow: 0 0 14px rgba(251,182,3,.55), 0 0 4px rgba(251,182,3,.30);
  transform: scale(1.04);
}

.nav__wordmark-primary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--clr-white);
  grid-column: 2;
  grid-row: 1;
  line-height: 1.15;
}

.nav__wordmark-secondary {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-primary);
  grid-column: 2;
  grid-row: 2;
  line-height: 1.2;
}

/* Desktop Nav Menu */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,.78);
  border-radius: var(--radius-sm);
  position: relative;
  white-space: nowrap;
  transition:
    color var(--duration-base) var(--ease-standard);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
  transition: width var(--duration-base) var(--ease-standard);
}

.nav__link:hover {
  color: var(--clr-white);
}

.nav__link:hover::after,
.nav__link--active::after {
  width: calc(100% - var(--space-6));
}

.nav__link--active {
  color: var(--accent-primary);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard);
}

.nav__hamburger:hover {
  background: rgba(255,255,255,.08);
}

.nav__hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-white);
  border-radius: var(--radius-pill);
  transition:
    transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    width var(--duration-base) var(--ease-standard);
  transform-origin: center;
}

/* Hamburger → X animation */
.nav__hamburger--open .nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger--open .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.nav__hamburger--open .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   08. HERO SECTION
   ========================================================================== */
.section--hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-32) var(--space-20);
  background: var(--grad-hero);
  color: var(--clr-white);
}

/* Animated energy-flow background — pure CSS, no images */
.section--hero::before,
.section--hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Large slow pulse — amber/yellow orb */
.section--hero::before {
  inset: auto;
  width: 700px;
  height: 700px;
  top: -15%;
  left: -12%;
  background: radial-gradient(circle, rgba(251,182,3,.10) 0%, transparent 70%);
}

/* Smaller fast pulse — deep amber orb */
.section--hero::after {
  width: 500px;
  height: 500px;
  bottom: -10%;
  right: -8%;
  background: radial-gradient(circle, rgba(226,148,0,.08) 0%, transparent 70%);
}

/* Animated energy grid lines via box-shadow on a hidden element trick — use outline SVG-like pattern via background */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  width: 100%;
  padding-inline: var(--space-4);
}

/* Animated scan-line overlay on hero */
.hero__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 48px,
      rgba(251,182,3,.020) 48px,
      rgba(251,182,3,.020) 49px
    );
  animation: scanlines-drift 6s linear infinite;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: var(--space-5);
  opacity: 0.9;
}

.hero__heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--clr-white);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 32px rgba(0,0,0,.50);
}

.hero__subline {
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--text-on-dark);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: 1.7;
  opacity: 0.9;
  text-align: center;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.45);
  animation: scroll-bounce 2.4s ease-in-out infinite;
  z-index: 1;
}

.hero__scroll-indicator svg {
  display: block;
  margin-inline: auto;
}

/* ==========================================================================
   09. ABOUT SECTION
   ========================================================================== */
.section--about {
  background: var(--bg-light);
}

.section--about .section__title {
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

.about__intro {
  max-width: 72ch;
  margin-inline: auto;
}

.about__para {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-5);
  text-align: center;
}

.about__para:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   10. VISION & MISSION SECTION
   ========================================================================== */
.section--vision-mission {
  background: var(--bg-light-alt);
}

.vm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 880px;
  margin-inline: auto;
}

.vm-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
  box-shadow: var(--shadow-card);
}

/* Glow from bottom on hover — ::before */
.vm-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-glow);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
  z-index: 0;
}

.vm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-glow-teal);
}

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

.vm-card > * {
  position: relative;
  z-index: 1;
}

.vm-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-grey-50);
  border-radius: var(--radius-md);
  margin-inline: auto;
  margin-bottom: var(--space-5);
  color: var(--clr-grey-400);
  filter: grayscale(1);
  transition:
    filter var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.vm-card:hover .vm-card__icon {
  filter: grayscale(0);
  color: var(--clr-grey-800);
  background: rgba(251,182,3,.15);
}

.vm-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  min-height: calc(var(--text-xl) * 1.2 * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-card__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  text-align: center;
}

/* ==========================================================================
   11. CORE VALUES SECTION
   ========================================================================== */
.section--values {
  background: var(--bg-light);
}

.section--values .section__title {
  margin-bottom: var(--space-10);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
  list-style: none;
}

.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--clr-white);
  border: 1px solid var(--clr-grey-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.value-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-glow);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.value-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 16px rgba(251,182,3,.14);
}

.value-item:hover::before {
  opacity: 1;
}

.value-item > * {
  position: relative;
  z-index: 1;
}

.value-item__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  color: var(--clr-grey-400);
  filter: grayscale(1);
  transition:
    filter var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.value-item:hover .value-item__icon {
  filter: grayscale(0);
  color: var(--clr-grey-800);
}

.value-item__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  text-align: center;
}

/* ==========================================================================
   12. DIVISIONS SECTION
   ========================================================================== */
.section--divisions {
  background: var(--bg-light-alt);
}

.section--divisions .section__title {
  margin-bottom: var(--space-4);
}

.divisions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

/* Division Card */
.division-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.division-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-glow);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
  z-index: 0;
}

.division-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-teal);
}

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

.division-card > * {
  position: relative;
  z-index: 1;
}

/* Header row inside card */
.division-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  width: 100%;
}

.division-card__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--clr-grey-100);
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}

.division-card:hover .division-card__number {
  color: rgba(251,182,3,.30);
}

.division-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-grey-400);
  filter: grayscale(1);
  transition:
    filter var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}

.division-card:hover .division-card__icon {
  filter: grayscale(0);
  color: var(--clr-grey-800);
}

.division-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  min-height: calc(var(--text-lg) * 1.2 * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.division-card__blurb {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  text-align: center;
  flex-grow: 1;
}

/* Toggle Button */
.division-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--clr-grey-200);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.division-card__toggle:hover,
.division-card__toggle--open {
  border-color: var(--clr-grey-800);
  color: var(--clr-grey-800);
  background: rgba(251,182,3,.08);
}

.division-card__toggle-label {
  font-family: var(--font-display);
}

.division-card__toggle-icon {
  transition: transform var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}

.division-card__toggle--open .division-card__toggle-icon {
  transform: rotate(180deg);
}

/* Products Collapsible Panel */
.division-card__products {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--duration-slow) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
  margin-top: 0;
}

/* When panel is hidden via HTML attribute, keep collapsed */
.division-card__products[hidden] {
  display: block;   /* override UA hidden so transition works */
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.division-card__products--open {
  max-height: 600px;
  opacity: 1;
  margin-top: var(--space-5);
  visibility: visible;
  pointer-events: auto;
}

.products-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  list-style: none;
  padding: var(--space-4) 0 var(--space-2);
}

.products-list__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--clr-grey-50);
  border: 1px solid var(--clr-grey-100);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.products-list__chip:hover {
  background: rgba(251,182,3,.12);
  border-color: var(--clr-grey-800);
  color: var(--clr-grey-800);
}

/* Collapsible panel: muted note text */
.products-list__note {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-3);
  text-align: center;
  line-height: 1.55;
}

/* Collapsible panel: small uppercase group label */
.products-list__group-label {
  width: 100%;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--clr-grey-800);
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  text-align: center;
}

/* ==========================================================================
   13. INDUSTRIES SECTION
   ========================================================================== */
.section--industries {
  background: var(--bg-light);
}

.section--industries .section__title {
  margin-bottom: var(--space-8);
}

.industries-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  list-style: none;
  max-width: 900px;
  margin-inline: auto;
}

/* General chip — used in industries and customers sections */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-grey-100);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  transition:
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.chip:hover {
  background: rgba(251,182,3,.10);
  border-color: var(--clr-grey-800);
  color: var(--clr-grey-800);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 12px rgba(251,182,3,.16);
}

/* ==========================================================================
   14. WHY CHOOSE US SECTION
   ========================================================================== */
.section--why-us {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--why-us .section__title {
  color: var(--clr-white);
  margin-bottom: var(--space-10);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1000px;
  margin-inline: auto;
}

.why-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  box-shadow: var(--shadow-dark-card);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 110%, rgba(251,182,3,.14) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251,182,3,.30);
  box-shadow: var(--shadow-dark-card), 0 0 28px rgba(251,182,3,.14);
}

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

.why-card > * {
  position: relative;
  z-index: 1;
}

.why-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
  margin-inline: auto;
  margin-bottom: var(--space-5);
  color: rgba(255,255,255,.35);
  filter: grayscale(1);
  transition:
    filter var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.why-card:hover .why-card__icon {
  filter: grayscale(0);
  color: var(--accent-primary);
  background: rgba(251,182,3,.14);
}

.why-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: var(--space-3);
  min-height: calc(var(--text-lg) * 1.2 * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.why-card__body {
  font-size: var(--text-base);
  color: var(--text-on-dark-muted);
  line-height: 1.7;
  margin-top: auto;
  text-align: center;
}

/* ==========================================================================
   15. CUSTOMERS SECTION
   ========================================================================== */
.section--customers {
  background: var(--bg-light-alt);
}

.section--customers .section__title {
  margin-bottom: var(--space-8);
}

.customers-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  list-style: none;
  max-width: 900px;
  margin-inline: auto;
}

/* ==========================================================================
   16. INVESTMENT OPPORTUNITIES SECTION
   ========================================================================== */
.section--invest {
  background: var(--bg-dark-alt);
  color: var(--text-on-dark);
}

.section--invest .section__title {
  color: var(--clr-white);
  margin-bottom: var(--space-4);
}

.invest__intro {
  font-size: var(--text-md);
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-10);
  text-align: center;
}

.invest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  max-width: 960px;
  margin-inline: auto;
}

.invest-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  transition:
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.invest-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 110%, rgba(226,148,0,.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.invest-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251,182,3,.30);
  box-shadow: 0 0 24px rgba(251,182,3,.14);
}

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

.invest-card > * {
  position: relative;
  z-index: 1;
}

.invest-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.30);
  margin-inline: auto;
  margin-bottom: var(--space-3);
  filter: grayscale(1);
  transition:
    filter var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.invest-card:hover .invest-card__icon {
  filter: grayscale(0);
  color: var(--accent-primary);
}

.invest-card__label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-on-dark);
  line-height: 1.4;
  text-align: center;
  margin-top: auto;
}

.invest__closing {
  font-size: var(--text-md);
  color: var(--text-on-dark-muted);
  max-width: 60ch;
  margin-inline: auto;
  margin-top: var(--space-12);
  line-height: 1.7;
  text-align: center;
}

.invest__cta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   17. SUSTAINABILITY SECTION
   ========================================================================== */
.section--sustainability {
  background: var(--bg-light);
}

.section--sustainability .section__title {
  margin-bottom: var(--space-4);
}

.sustainability__intro {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.sustainability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  list-style: none;
  max-width: 900px;
  margin-inline: auto;
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--clr-white);
  border: 1px solid var(--clr-grey-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 110%, rgba(226,148,0,.14) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 16px rgba(251,182,3,.14);
}

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

.pillar > * {
  position: relative;
  z-index: 1;
}

.pillar__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-grey-400);
  margin-inline: auto;
  margin-bottom: var(--space-3);
  filter: grayscale(1);
  transition:
    filter var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.pillar:hover .pillar__icon {
  filter: grayscale(0);
  color: var(--clr-grey-800);
}

.pillar__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.4;
}

/* ==========================================================================
   18. FUTURE / ROADMAP SECTION
   ========================================================================== */
.section--future {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--future .section__title {
  color: var(--clr-white);
  margin-bottom: var(--space-4);
}

.future__intro {
  font-size: var(--text-md);
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-10);
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.future-roadmap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  max-width: 720px;
  margin-inline: auto;
  counter-reset: roadmap;
}

.future-roadmap__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.future-roadmap__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(251,182,3,.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.future-roadmap__item:hover {
  transform: translateY(-2px);
  border-color: rgba(251,182,3,.28);
  background: rgba(255,255,255,.06);
}

.future-roadmap__item:hover::before {
  opacity: 1;
}

.future-roadmap__item > * {
  position: relative;
  z-index: 1;
}

.future-roadmap__number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--accent-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  min-width: 3ch;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.60;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.future-roadmap__item:hover .future-roadmap__number {
  opacity: 1;
}

.future-roadmap__label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-on-dark);
  line-height: 1.4;
  text-align: left;
  flex: 1;
}

.future__closing {
  font-size: var(--text-base);
  color: var(--text-on-dark-muted);
  max-width: 66ch;
  margin-inline: auto;
  margin-top: var(--space-12);
  line-height: 1.75;
  text-align: center;
}

/* ==========================================================================
   19. FOOTER / CONTACT SECTION
   ========================================================================== */
.site-footer {
  background: var(--bg-dark-mid);
  color: var(--text-on-dark);
  padding-block: var(--space-16) var(--space-8);
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

/* Brand block */
.footer__brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Footer logo — full square badge (LogoFull.jpeg: white bg, emblem + wordmark).
   Rounded corners + shadow make the inherent white JPEG background read as a
   badge card floating on the dark footer. No grayscale filter. */
.footer__logo-full {
  display: block;
  width: 160px; /* scaled down on small phones; grows at 480px breakpoint */
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
  transition:
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.footer__brand:hover .footer__logo-full {
  box-shadow: var(--shadow-lg), 0 0 18px rgba(251,182,3,.55), 0 0 6px rgba(251,182,3,.30);
  transform: scale(1.03);
}

/* Exclude logo images from any broad grayscale filter rules on img */
.nav__logo,
.footer__logo-full {
  filter: none;
}

.footer__company-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--clr-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  margin-bottom: var(--space-3);
}

.footer__company-sub {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent-primary);
  display: block;
}

.footer__tagline {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-on-dark);
  margin-bottom: var(--space-4);
  font-style: italic;
  text-align: center;
}

.footer__regions {
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
  max-width: 50ch;
  margin-inline: auto;
  text-align: center;
}

.footer__regions strong {
  color: var(--text-on-dark);
}

/* Contact info block */
.footer__contact-info {
  text-align: center;
}

.footer__section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: var(--space-6);
  text-align: center;
}

.footer__details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.footer__detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  flex-wrap: wrap;
  text-align: center;
}

.footer__detail svg {
  flex-shrink: 0;
  color: var(--accent-primary);
}

.footer__link {
  color: var(--text-on-dark);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.footer__link:hover {
  color: var(--accent-primary);
}

.footer__placeholder-note {
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  opacity: 0.55;
  font-style: italic;
}

/* Contact Form */
.footer__form-wrap {
  text-align: center;
}

.contact-form {
  max-width: 480px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: center;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-on-dark);
  text-align: center;
  letter-spacing: 0.02em;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  color: var(--clr-white);
  font-size: var(--text-base);
  font-family: var(--font-body);
  text-align: left;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
  outline: none;
  resize: vertical;
}

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

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--accent-primary);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 3px rgba(251,182,3,.18);
}

.contact-form__input--error,
.contact-form__textarea.contact-form__input--error {
  border-color: var(--clr-red-500);
  box-shadow: 0 0 0 3px rgba(224,60,60,.15);
}

.contact-form__submit {
  margin-top: var(--space-2);
}

/* Thank-you confirmation — warm amber on dark */
.contact-form__thankyou {
  padding: var(--space-4) var(--space-6);
  background: rgba(251,182,3,.10);
  border: 1px solid rgba(251,182,3,.28);
  border-radius: var(--radius-md);
  color: var(--clr-teal-300);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}

/* Footer Bottom */
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: var(--space-6);
  text-align: center;
}

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* ==========================================================================
   20. REVEAL ANIMATIONS
   ========================================================================== */

/*
   Strategy: hidden state is applied when the element does NOT yet have .visible.
   If JS fails or observer never fires, the fallback is the CSS animation below
   which fires after 1.5s and forces opacity:1 on all items. This ensures no
   content stays permanently invisible.
*/

.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s var(--ease-standard),
    transform 0.55s var(--ease-standard);
}

.reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via nth-child delays */
.reveal-item:nth-child(1) { transition-delay: 0ms; }
.reveal-item:nth-child(2) { transition-delay: 80ms; }
.reveal-item:nth-child(3) { transition-delay: 160ms; }
.reveal-item:nth-child(4) { transition-delay: 240ms; }
.reveal-item:nth-child(5) { transition-delay: 320ms; }
.reveal-item:nth-child(6) { transition-delay: 400ms; }
.reveal-item:nth-child(7) { transition-delay: 480ms; }
.reveal-item:nth-child(8) { transition-delay: 560ms; }
.reveal-item:nth-child(9) { transition-delay: 80ms; }
.reveal-item:nth-child(10) { transition-delay: 160ms; }

.reveal-section {
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard);
}

.reveal-section.visible {
  opacity: 1;
}

/* Safety fallback: if JS never fires, fade in via CSS animation after 1.5s */
@keyframes reveal-fallback {
  to { opacity: 1; transform: translateY(0); }
}

.reveal-item {
  animation: reveal-fallback 0.01s 1.8s forwards;
}

.reveal-section {
  animation: reveal-fallback 0.01s 1.0s forwards;
}

/* When .visible is added, override the animation delay (animation already done at that point) */
.reveal-item.visible,
.reveal-section.visible {
  animation: none;
}

/* ==========================================================================
   21. KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 0.75; }
}

@keyframes scanlines-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 49px; }
}

/* ==========================================================================
   22. RESPONSIVE — MOBILE-FIRST BREAKPOINTS
   ========================================================================== */

/* ---- 480px — small phones ------------------------------------------- */
@media (min-width: 480px) {

  .footer__logo-full {
    width: 220px;
  }

  .hero__heading {
    font-size: var(--text-5xl);
  }

  .vm-grid {
    grid-template-columns: 1fr 1fr;
  }

  .invest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 640px — large phones ------------------------------------------- */
@media (min-width: 640px) {

  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .sustainability-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .invest-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .future-roadmap {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ---- 768px — tablets ------------------------------------------------ */
@media (min-width: 768px) {

  :root {
    --section-py: var(--space-24);
  }

  .section__title {
    font-size: var(--text-4xl);
  }

  .hero__heading {
    font-size: var(--text-5xl);
  }

  .hero__subline {
    font-size: var(--text-lg);
  }

  .divisions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .footer__form-wrap {
    grid-column: 1 / -1;
  }

  .future-roadmap {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
  }

  .contact-form {
    max-width: 560px;
  }
}

/* ---- 1100px — hamburger breakpoint (matches JS) --------------------- */
@media (max-width: 1100px) {

  .nav__hamburger {
    display: flex;
  }

  .nav__menu {
    position: fixed;
    inset-block-start: var(--header-height);
    inset-inline: 0;
    background: rgba(19,19,19,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--space-4) 0 var(--space-8);
    border-top: 1px solid rgba(255,255,255,.08);

    /* Hidden state */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      max-height var(--duration-slow) var(--ease-standard),
      opacity var(--duration-base) var(--ease-standard);
  }

  .nav__menu--open {
    max-height: 100vh;
    opacity: 1;
    pointer-events: auto;
  }

  .nav__link {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-md);
    width: 100%;
    text-align: center;
    border-radius: 0;
    white-space: normal;
  }

  .nav__link::after {
    bottom: 6px;
  }
}

/* ---- 1101px–1350px — tight desktop nav (10 items) ------------------- */
@media (min-width: 1101px) and (max-width: 1350px) {

  .nav__menu {
    gap: 0;
  }

  .nav__link {
    font-size: 0.78rem;
    padding: var(--space-2) var(--space-2);
    white-space: nowrap;
  }
}

/* ---- 1024px — small desktop ----------------------------------------- */
@media (min-width: 1024px) {

  :root {
    --header-height: 72px;
    --section-py: var(--space-32);
  }

  .section__title {
    font-size: var(--text-4xl);
  }

  .hero__heading {
    font-size: var(--text-6xl);
  }

  .vm-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .divisions-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .divisions-grid .division-card:last-child {
    grid-column: 2;
  }

  .why-grid {
    /* 5 items: 3 + 2 centred */
    grid-template-columns: repeat(3, 1fr);
  }

  .invest-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sustainability-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .future-roadmap {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }

  .footer__form-wrap {
    grid-column: auto;
  }

  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Centre the last two cards in the bottom row of a 3-col grid (5 items total) */
  .why-grid .why-card:nth-child(4) {
    grid-column: 1 / 2;
    justify-self: end;
    width: 100%;
  }

  .why-grid .why-card:nth-child(5) {
    grid-column: 3 / 4;
    justify-self: start;
    width: 100%;
  }
}

/* ---- 1280px — full desktop ------------------------------------------ */
@media (min-width: 1280px) {

  .why-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Reset the 1024px nth-child placement overrides — all cards flow naturally */
  .why-grid .why-card:nth-child(4),
  .why-grid .why-card:nth-child(5) {
    grid-column: auto;
    justify-self: auto;
  }

  .invest-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sustainability-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .future-roadmap {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1100px;
  }

  .future-roadmap__label {
    font-size: var(--text-sm);
    text-align: center;
  }
}

/* ==========================================================================
   23. REDUCED MOTION — Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal-item,
  .reveal-section {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .hero__scroll-indicator {
    animation: none;
  }

  .section--hero::before,
  .section--hero::after {
    animation: none;
  }

  .hero__inner::before {
    animation: none;
  }

  /* --- New features: reduced motion overrides --- */

  /* INTENTIONAL OWNER DECISION: the hero SVG scene (wheel spin, bolt pulse,
     cable flow, sun glow, ray shimmer) and the marquee ribbons must KEEP
     animating even when prefers-reduced-motion is on. The site owner found
     these were freezing on his phone because a battery-saver / OS setting
     triggers reduced-motion, and he explicitly wants the decorative motion
     preserved regardless. The global `*, *::before, *::after` kill-switch
     above (animation-duration: 0.01ms !important; animation-iteration-count:
     1 !important;) would otherwise neutralize them, so we re-enable each one
     explicitly below with its original duration, restored with !important. */

  .hero-art__wheel {
    animation-duration: 4s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-art__bolt {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-art__flow {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-art__sun {
    animation-duration: 3s !important;
    animation-iteration-count: infinite !important;
  }

  .hero-art__ray line {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }

  /* Marquee: keep scrolling at its normal speed (owner decision, see note above) */
  .marquee__track {
    animation-duration: 30s !important;
    animation-iteration-count: infinite !important;
  }

  .marquee--reverse .marquee__track {
    animation-duration: 22s !important;
    animation-iteration-count: infinite !important;
  }

  /* Roadmap line: show fully drawn immediately */
  .roadmap-line__path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  /* Tilt: no 3-D transform */
  .division-card--tilting {
    transform: none !important;
  }

  /* To-top: instant opacity, no transition */
  .to-top {
    transition: none !important;
  }

  .to-top--visible {
    opacity: 1;
    transform: none;
  }

  /* Parallax: ignore --parallax-y on orbs */
  .section--hero::before,
  .section--hero::after {
    transform: none !important;
  }
}

/* ==========================================================================
   24. PRINT — minimal reset
   ========================================================================== */
@media print {

  .site-header,
  .hero__scroll-indicator,
  .nav__hamburger,
  .contact-form,
  .division-card__toggle,
  .to-top,
  .marquee,
  .roadmap-line {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section--hero,
  .section--why-us,
  .section--invest,
  .section--future,
  .site-footer {
    background: #f5f5f5;
    color: #111;
  }

  .reveal-item,
  .reveal-section {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   25. HERO ART SVG SCENE
   ========================================================================== */

/* Container below CTAs, centred within hero__inner */
.hero__scene {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  margin-top: var(--space-12);
  position: relative;
  z-index: 1;
}

.hero-art {
  width: 100%;
  height: auto;
  display: block;
  /* Base color for the art: brand yellow on dark hero */
  color: var(--clr-teal-400);
  opacity: 0.88;
  filter: drop-shadow(0 0 18px rgba(251, 182, 3, 0.20));
}

/* --- Group colour overrides via currentColor inheritance --- */

/* Charger body and connector: brand yellow */
.hero-art__charger {
  color: var(--clr-teal-400);
}

/* Lightning bolt: deep amber with glow pulse */
.hero-art__bolt {
  color: var(--clr-emerald-400);
  transform-box: fill-box;
  transform-origin: center;
  animation: bolt-pulse 2s ease-in-out infinite;
}

/* Cable flow path: lighter yellow so it reads against the charger */
.hero-art__flow {
  color: var(--clr-teal-300);
  /* stroke-dasharray is already set inline (8 4); animate offset for flowing dashes */
  stroke-dasharray: 8 4;
  animation: cable-flow 1.4s linear infinite;
}

/* Motorcycle body: soft yellow */
.hero-art__moto {
  color: var(--clr-teal-200);
}

/* Wheels: brand yellow, spin around their own centre */
.hero-art__wheel {
  color: var(--clr-teal-400);
  transform-box: fill-box;
  transform-origin: center;
  animation: wheel-spin 4s linear infinite;
}

/* Sun circle: amber glow pulse */
.hero-art__sun {
  color: var(--clr-emerald-400);
  transform-box: fill-box;
  transform-origin: center;
  animation: sun-glow 3s ease-in-out infinite;
}

/* Individual rays: staggered shimmer — each <line> inside .hero-art__ray */
.hero-art__ray {
  color: var(--clr-emerald-300);
}

.hero-art__ray line {
  animation: ray-shimmer 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Stagger each of the 8 rays */
.hero-art__ray line:nth-child(1) { animation-delay: 0s; }
.hero-art__ray line:nth-child(2) { animation-delay: 0.30s; }
.hero-art__ray line:nth-child(3) { animation-delay: 0.60s; }
.hero-art__ray line:nth-child(4) { animation-delay: 0.90s; }
.hero-art__ray line:nth-child(5) { animation-delay: 0.15s; }
.hero-art__ray line:nth-child(6) { animation-delay: 0.45s; }
.hero-art__ray line:nth-child(7) { animation-delay: 0.75s; }
.hero-art__ray line:nth-child(8) { animation-delay: 1.05s; }

/* ==========================================================================
   25A. HERO ART KEYFRAMES
   ========================================================================== */

@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bolt-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50%       { opacity: 1;   transform: scale(1.10); filter: drop-shadow(0 0 6px rgba(240, 168, 0, 0.80)); }
}

@keyframes cable-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -24; }
}

@keyframes sun-glow {
  0%, 100% { opacity: 0.75; filter: drop-shadow(0 0 4px rgba(240, 168, 0, 0.30)); }
  50%       { opacity: 1.00; filter: drop-shadow(0 0 14px rgba(240, 168, 0, 0.70)); }
}

@keyframes ray-shimmer {
  0%, 100% { opacity: 0.40; }
  50%       { opacity: 1.00; }
}

/* ==========================================================================
   25B. HERO PARALLAX — orbs respond to --parallax-y set by JS
   ========================================================================== */

/* The JS sets --parallax-y on .section--hero; we consume it on the pseudo-elements.
   We layer it on top of the existing orb-drift animations by wrapping in a
   translate — since the drift already uses transform we combine them here.
   We add a will-change hint so the compositor handles it cheaply. */
.section--hero::before {
  will-change: transform;
  /* translate the orb upward by parallax amount (moves faster than page scroll = depth) */
  transform: translateY(calc(var(--parallax-y, 0px) * -0.6)) translate(0, 0) scale(1);
  animation: orb-drift-a-parallax 18s ease-in-out infinite alternate;
}

.section--hero::after {
  will-change: transform;
  transform: translateY(calc(var(--parallax-y, 0px) * -0.4)) translate(0, 0) scale(1);
  animation: orb-drift-b-parallax 14s ease-in-out infinite alternate;
}

/* Override original orb keyframes to embed the parallax offset.
   Since CSS variables aren't animatable in keyframes, we use a separate
   animation for the drift and let the base transform carry the parallax.
   The approach: remove the old orb-drift-a/b from the pseudo-elements and
   replace with new keyframes that don't conflict. */
@keyframes orb-drift-a-parallax {
  0%   { transform: translateY(calc(var(--parallax-y, 0px) * -0.6)) translate(0, 0) scale(1); }
  100% { transform: translateY(calc(var(--parallax-y, 0px) * -0.6)) translate(6%, 4%) scale(1.12); }
}

@keyframes orb-drift-b-parallax {
  0%   { transform: translateY(calc(var(--parallax-y, 0px) * -0.4)) translate(0, 0) scale(1); }
  100% { transform: translateY(calc(var(--parallax-y, 0px) * -0.4)) translate(-5%, -6%) scale(1.08); }
}

/* ==========================================================================
   26. STATS SECTION — dark charcoal punctuation band
   ========================================================================== */

.section--stats {
  /* Dark charcoal band between the two light sections (About + Vision/Mission) */
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-16);
}

.stats-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 960px;
  margin-inline: auto;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

/* Big numeral — gradient text yellow → amber (on dark band: passes contrast) */
.stat__num {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;

  /* Gradient text: yellow → deep amber */
  background: linear-gradient(135deg, var(--clr-teal-400) 0%, var(--clr-blue-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Subtle glow behind the number */
  filter: drop-shadow(0 0 12px rgba(251, 182, 3, 0.28));
}

/* Small-caps label */
.stat__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  max-width: 18ch;
}

/* Divider between stats — amber hairline */
.stat + .stat {
  border-top: 1px solid rgba(251, 182, 3, 0.14);
  padding-top: var(--space-10);
  margin-top: 0; /* gap handles it already; border needs the pt only */
}

/* ==========================================================================
   27. MARQUEE RIBBONS
   ========================================================================== */

/* ---- Industries marquee (inside section--industries, light bg) ---------- */

/* The marquee sits inside .section--industries which is var(--bg-light).
   We give it a slightly contrasting dark tint that still reads as light-ish
   — a deep charcoal strip within the light section as a contrast moment. */
.marquee {
  width: 100%;
  overflow: hidden;
  /* Edge fade mask */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Industries marquee: lives inside a light section — dark charcoal strip */
.section--industries .marquee {
  background: var(--clr-navy-900);
  padding-block: var(--space-4);
  margin-top: var(--space-10);
  border-radius: var(--radius-md);
}

/* Reverse marquee: lives between </main> and footer (after dark .section--future,
   before dark .site-footer) — use a mid-charcoal tone to separate the two dark bands */
.marquee--reverse {
  background: var(--clr-navy-800);
  padding-block: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Track — inline-flex so items stay on one line */
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}

/* Reverse direction for --reverse variant */
.marquee--reverse .marquee__track {
  animation-name: marquee-scroll-reverse;
  animation-duration: 22s; /* slightly faster for the short region list */
}

/* Pause on hover / keyboard focus */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

/* Each text item */
.marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  padding-inline: var(--space-5);
  transition: color var(--duration-base) var(--ease-standard);
}

/* Reverse marquee items: brand yellow on dark — high contrast, looks premium */
.marquee--reverse .marquee__item {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clr-teal-200);
}

/* Separator dot */
.marquee__sep {
  display: inline-flex;
  align-items: center;
  color: var(--accent-primary);
  font-size: var(--text-xs);
  opacity: 0.6;
  flex-shrink: 0;
  padding-inline: var(--space-1);
}

/* ==========================================================================
   27A. MARQUEE KEYFRAMES
   ========================================================================== */

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

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

/* ==========================================================================
   28. DIVISION CARD TILT
   ========================================================================== */

/* Base card: no overflow:hidden on the card itself so the expanded panel
   isn't clipped. The existing CSS already has overflow:hidden — we need to
   keep it for the ::before glow but the products panel is inside the flow,
   so max-height handles visibility. The tilt perspective goes on the card. */

/* When NOT tilting: transition transform so the card snaps back smoothly */
.division-card:not(.division-card--tilting) {
  transition:
    transform var(--duration-slow) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* While tilting: NO transition on transform so it tracks the pointer instantly */
.division-card--tilting {
  transition:
    box-shadow var(--duration-base) var(--ease-standard);
  /* Apply the 3-D tilt using CSS variables set by JS */
  transform:
    perspective(800px)
    rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg));
  /* Tilt replaces the hover translateY lift; shadow glow still applies */
  box-shadow: var(--shadow-lg), var(--shadow-glow-teal);
}

/* Ensure the glow ::before is visible while tilting */
.division-card--tilting::before {
  opacity: 1;
}

/* Override the hover translateY when tilting so transforms don't stack */
.division-card--tilting:hover {
  transform:
    perspective(800px)
    rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg));
}

/* ==========================================================================
   29. PARTNERS SECTION — light band between dark "Our Future" + dark marquee
   ========================================================================== */

.section--partners {
  background: var(--bg-light);
}

.section--partners .section__title {
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.partners__intro {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
}

/* Grid: 1 col mobile → 2 col → 4 col desktop */
.partners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  max-width: 960px;
  margin-inline: auto;
}

/* Card */
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: var(--clr-white);
  border: 1px solid var(--clr-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  min-height: 200px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* Bottom glow — brand convention */
.partner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-glow);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
  z-index: 0;
}

.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-glow-teal);
}

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

/* Ensure content sits above the ::before glow layer */
.partner-card > * {
  position: relative;
  z-index: 1;
}

/* Logo image — constrained to a fixed height with a neutral warm tint behind it.
   Because Partner1 and Partner3 have black backgrounds and Partner2/4 have white,
   we frame each jpeg in a small rounded box via the img itself styled as a block
   with explicit height. The card's own padding creates the breathing room. */
.partner-card__logo {
  display: block;
  height: 90px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  /* Rounded box look: subtle radius on the jpeg itself */
  border-radius: var(--radius-md);
  /* Neutral warm-grey background seats both black- and white-bg jpegs cleanly */
  background: var(--clr-grey-50);
  padding: var(--space-2);
  box-sizing: border-box;
  /* Grayscale default → full colour on card hover */
  filter: grayscale(1);
  transition:
    filter var(--duration-base) var(--ease-standard);
}

.partner-card:hover .partner-card__logo {
  filter: grayscale(0);
}

/* Name label — small caps style */
.partner-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  margin-top: auto;
  transition: color var(--duration-base) var(--ease-standard);
}

.partner-card:hover .partner-card__name {
  color: var(--accent-secondary);
}

/* Responsive: 2-col at 480px, 4-col at 768px */
@media (min-width: 480px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .partner-card {
    min-height: 220px;
  }
}

/* ==========================================================================
   30. GALLERY PAGE — Page Hero
   ========================================================================== */

/* Compact dark charcoal hero — enough padding for sticky header + visual weight.
   Header is transparent at top so page-hero MUST be dark (charcoal) and provide
   its own top padding equal to the header height so content isn't hidden. */
.section--page-hero {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  /* Top pad = header height + breathing room; bottom generous for rhythm */
  padding-block-start: calc(var(--header-height) + var(--space-16));
  padding-block-end: var(--space-16);
  /* No full-viewport height — compact band, roughly 38–42vh on mid screens */
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Subtle amber orb behind the heading for depth */
.section--page-hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(251,182,3,.07) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}

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

.page-hero__heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--clr-white);
  margin-bottom: var(--space-4);
  text-align: center;
}

/* Thin amber underline accent below the heading */
.page-hero__heading::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--accent-primary);
  border-radius: var(--radius-pill);
  margin: var(--space-4) auto 0;
}

.page-hero__subline {
  font-size: var(--text-md);
  color: var(--text-on-dark-muted);
  max-width: 54ch;
  margin-inline: auto;
  line-height: 1.7;
  text-align: center;
}

@media (min-width: 768px) {
  .section--page-hero {
    padding-block-start: calc(var(--header-height) + var(--space-20));
    padding-block-end: var(--space-20);
  }

  .page-hero__heading {
    font-size: var(--text-5xl);
  }
}

@media (min-width: 1024px) {
  .section--page-hero {
    padding-block-start: calc(var(--header-height) + var(--space-24));
    padding-block-end: var(--space-24);
  }
}

/* ==========================================================================
   31. GALLERY PAGE — Category Nav
   ========================================================================== */

/* Sticky bar just below the header.
   On gallery.html the page-hero is dark so the nav needs a solid light bg
   to stay readable as the user scrolls past the hero into the gallery sections. */
.gallery-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 800; /* below site-header (900) */
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-grey-100);
  box-shadow: 0 2px 12px rgba(10,10,10,.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

/* Pill links */
.gallery-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--clr-grey-50);
  border: 1.5px solid var(--clr-grey-100);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.gallery-nav__link:hover,
.gallery-nav__link:focus-visible {
  background: rgba(251,182,3,.10);
  border-color: var(--accent-primary);
  color: var(--clr-grey-800);
  box-shadow: 0 0 0 3px rgba(251,182,3,.15);
  outline: none;
}

/* Active state (if JS were to add it — future-proof) */
.gallery-nav__link--active {
  background: rgba(251,182,3,.14);
  border-color: var(--accent-primary);
  color: var(--clr-grey-800);
}

/* ==========================================================================
   32. GALLERY PAGE — Gallery Sections + Grid
   ========================================================================== */

/* Alternate light / light-alt backgrounds for visual rhythm across five sections.
   scroll-margin-top: header height + gallery-nav height (~60px: 2×12px padding +
   2×8px pill padding + ~14px line-height + 1px border + 5px buffer).
   This overrides the html scroll-padding-top for these specific anchor targets so
   headings land fully below both sticky bars when a category pill is clicked. */
.section--gallery {
  background: var(--bg-light);
  scroll-margin-top: calc(var(--header-height) + 60px);
}

/* Even-indexed gallery sections get the alt background */
.section--gallery:nth-of-type(even) {
  background: var(--bg-light-alt);
}

/* Section titles on gallery page — keep brand style */
.section--gallery .section__title {
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

/* Thin amber rule under each gallery heading */
.section--gallery .section__title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent-primary);
  border-radius: var(--radius-pill);
  margin: var(--space-3) auto 0;
}

/* Gallery grid — 1 col mobile → 2 → 3 → 4 */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
}

/* Gallery item — the <li> wrapper */
.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  /* Bottom glow ::before on the item */
}

.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-glow);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
  z-index: 1;
}

.gallery-item:hover::before {
  opacity: 1;
}

/* The clickable button wrapping each image — full coverage, no native button chrome */
.gallery-item__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Focus outline — visible yellow ring */
}

.gallery-item__btn:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

/* The photo — unified aspect ratio regardless of original dimensions */
.gallery-item__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition:
    transform var(--duration-slow) var(--ease-standard),
    box-shadow var(--duration-slow) var(--ease-standard);
}

.gallery-item:hover .gallery-item__img {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(251,182,3,.14);
}

/* Responsive grid breakpoints */
@media (min-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

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

/* ==========================================================================
   33. LIGHTBOX — JS-injected overlay
   ========================================================================== */

/* Scroll lock applied to body by JS on open */
body.lightbox-open {
  overflow: hidden;
}

/* The lightbox container — hidden by default via [hidden] attribute.
   JS sequence: removes [hidden] → rAF adds .lightbox--open (opacity 1).
   On close: removes .lightbox--open (opacity 0 transition plays) →
   300ms later re-adds [hidden] (display: none). So [hidden]{display:none}
   is correct — element is never hidden while transition is mid-flight. */
.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 950; /* above site-header (900) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-4);
  /* Opacity transition for open/close */
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

/* Open state — JS adds this class */
.lightbox--open {
  opacity: 1;
}

/* Figure wrapper */
.lightbox__figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 82vh;
}

/* The main image */
.lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 64px rgba(0,0,0,.70), 0 2px 16px rgba(0,0,0,.50);
}

/* ---- Shared control button styles ---- */
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(19,19,19,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: rgba(255,255,255,.80);
  cursor: pointer;
  transition:
    background var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  z-index: 960;
  /* Prevent text selection on rapid clicks */
  user-select: none;
  -webkit-user-select: none;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(251,182,3,.18);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Close button — top-right corner */
.lightbox__close {
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
}

/* Prev / Next — vertically centred, hugging the edges */
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
}

.lightbox__prev {
  left: var(--space-4);
}

.lightbox__next {
  right: var(--space-4);
}

.lightbox__prev:hover {
  transform: translateY(-50%) translateX(-2px);
}

.lightbox__next:hover {
  transform: translateY(-50%) translateX(2px);
}

/* ---- Small screens: tighten buttons to edges ---- */
@media (max-width: 480px) {
  .lightbox__close {
    top: var(--space-2);
    right: var(--space-2);
    width: 40px;
    height: 40px;
  }

  .lightbox__prev,
  .lightbox__next {
    width: 40px;
    height: 40px;
  }

  .lightbox__prev {
    left: var(--space-2);
  }

  .lightbox__next {
    right: var(--space-2);
  }
}

/* ---- Reduced motion: skip transitions, instant open/close ---- */
@media (prefers-reduced-motion: reduce) {
  .gallery-item__img {
    transition: none;
  }

  .gallery-item:hover .gallery-item__img {
    transform: none;
  }

  .lightbox {
    transition: none;
    opacity: 1; /* already handled by the global * rule above, but explicit is clear */
  }

  .lightbox__close,
  .lightbox__prev,
  .lightbox__next {
    transition: none;
  }

  .lightbox__prev:hover,
  .lightbox__next:hover {
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   29. ROADMAP LINE SVG
   ========================================================================== */

/* Wrapper gives the roadmap section a relative positioning context */
.future-roadmap__wrap {
  position: relative;
  /* Ensure list items sit above the SVG line */
}

/* The SVG line: absolutely positioned behind the list */
.roadmap-line {
  position: absolute;
  /* Full height of the wrap, narrow strip down the vertical centre */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Color: brand amber, inherited via currentColor */
  color: var(--clr-teal-400);
  overflow: visible;
}

/* Ensure the ul list renders above the line */
.future-roadmap {
  position: relative;
  z-index: 1;
}

/* The animated path */
.roadmap-line__path {
  stroke: var(--clr-teal-400);
  stroke-width: 2;
  opacity: 0.22;
  /* pathLength not set in markup — use a large dasharray approximation.
     The SVG viewBox is 0 0 100 100 with preserveAspectRatio="none".
     The path is roughly 110 units long in the viewBox coordinate space.
     We use stroke-dasharray: 110; stroke-dashoffset starts at 110 (hidden)
     and transitions to 0 (fully drawn) when .roadmap-line--drawn is added. */
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  transition: stroke-dashoffset 2s var(--ease-standard);
  fill: none;
  /* Subtle glow */
  filter: drop-shadow(0 0 4px rgba(251, 182, 3, 0.40));
}

.roadmap-line--drawn .roadmap-line__path {
  stroke-dashoffset: 0;
}

/* ==========================================================================
   30. BACK-TO-TOP BUTTON
   ========================================================================== */

.to-top {
  /* Fixed bottom-right corner */
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 800;

  /* Circular button */
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  border: none;
  padding: 0;
  cursor: pointer;

  /* Dark glass background */
  background: rgba(19, 19, 19, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(251, 182, 3, 0.30);

  /* Stacking context for children */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden state: opacity 0, pushed down slightly */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;

  /* Visibility transition — JS also toggles [hidden] attribute.
     We override [hidden] display to keep the element in the flow
     while the CSS opacity transition plays. */
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

/* Override UA [hidden] so transitions can play (JS removes hidden before adding visible class) */
.to-top[hidden] {
  display: flex; /* keep it renderable so fade-out transition works */
  opacity: 0;
  pointer-events: none;
}

/* Visible state added by JS */
.to-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hover glow */
.to-top:hover,
.to-top:focus-visible {
  border-color: var(--clr-teal-400);
  box-shadow: var(--shadow-glow-teal), 0 4px 16px rgba(0, 0, 0, 0.40);
}

/* SVG progress ring container — fills the button */
.to-top > svg:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
}

/* Background ring track */
.to-top__ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2.4;
}

/* Progress arc — stroke-dashoffset updated directly by JS inline style */
.to-top__progress {
  fill: none;
  stroke: var(--clr-teal-400);
  stroke-width: 2.4;
  stroke-linecap: round;
  /* dasharray already set inline in HTML (100); dashoffset updated by JS */
}

/* Chevron arrow — sits on top of the ring SVG */
.to-top__arrow {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: var(--clr-teal-300);
  flex-shrink: 0;
  display: block;
}

/* ==========================================================================
   31. RESPONSIVE — NEW FEATURE ADDITIONS
   ========================================================================== */

/* ---- 360px — smallest phones ------------------------------------------- */
@media (min-width: 360px) {

  .hero__scene {
    max-width: 320px;
  }

  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Remove top border on stat + stat in 2-col layout — use bottom border on row instead */
  .stat + .stat {
    border-top: none;
    padding-top: 0;
  }

  /* Hairline between rows */
  .stat:nth-child(3) {
    border-top: 1px solid rgba(251, 182, 3, 0.14);
    padding-top: var(--space-6);
  }
  .stat:nth-child(4) {
    border-top: 1px solid rgba(251, 182, 3, 0.14);
    padding-top: var(--space-6);
  }
}

/* ---- 480px — small phones ---------------------------------------------- */
@media (min-width: 480px) {

  .hero__scene {
    max-width: 400px;
  }

  .stat__num {
    font-size: var(--text-4xl);
  }
}

/* ---- 768px — tablets --------------------------------------------------- */
@media (min-width: 768px) {

  .hero__scene {
    max-width: 560px;
  }

  .stats-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }

  /* Reset row separators for 4-col single-row layout */
  .stat + .stat {
    border-top: none;
    padding-top: 0;
  }
  .stat + .stat {
    /* Vertical hairline dividers between columns */
    border-left: 1px solid rgba(251, 182, 3, 0.14);
    padding-left: var(--space-8);
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-top: none;
    padding-top: 0;
  }

  .stat__num {
    font-size: var(--text-5xl);
  }

  .to-top {
    bottom: var(--space-8);
    right: var(--space-8);
  }
}

/* ---- 1024px — desktop -------------------------------------------------- */
@media (min-width: 1024px) {

  .hero__scene {
    max-width: 640px;
  }

  .stat__num {
    font-size: var(--text-6xl);
  }

  .stat__label {
    font-size: var(--text-sm);
  }

  .section--stats {
    padding-block: var(--space-20);
  }

  .marquee__item {
    font-size: var(--text-base);
  }

  .to-top {
    width: 56px;
    height: 56px;
  }
}