/* ==========================================================================
   RAUSHEENA GROUP — MAIN STYLESHEET
   Design system, layout, and components for the premium corporate site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Core neutrals */
  --rg-black:        #030713;
  --rg-charcoal:      #060d1f;
  --rg-charcoal-2:     #0a1429;
  --rg-charcoal-3:      #101c38;
  --rg-charcoal-4:       #182a4d;
  --rg-white:         #ffffff;
  --rg-off-white:      #eef3ff;
  --rg-grey-100:        #dde6fa;
  --rg-grey-300:         #a8b6d6;
  --rg-grey-500:          #8493b6;
  --rg-grey-700:           #4b5b82;

  /* Brand colors — derived from the Rausheena Group logo */
  --rg-indigo:        #2e3192;
  --rg-indigo-light:   #4d50c4;
  --rg-indigo-dark:     #0b0f3a;
  --rg-cyan:          #00aeef;
  --rg-cyan-light:     #5cd0ff;
  --rg-gold:          #c9a24b;
  --rg-gold-light:     #e6c983;

  /* Semantic */
  --rg-bg:            var(--rg-black);
  --rg-bg-alt:         var(--rg-charcoal);
  --rg-surface:        var(--rg-charcoal-2);
  --rg-surface-alt:     var(--rg-charcoal-3);
  --rg-border:         rgba(150,180,255,0.11);
  --rg-border-strong:   rgba(150,180,255,0.2);
  --rg-text:           var(--rg-off-white);
  --rg-text-dim:        var(--rg-grey-300);
  --rg-text-faint:       var(--rg-grey-500);

  /* Fixed tokens — NEVER change with theme. Used only for text sitting on a
     saturated brand-color surface (a solid cyan selection highlight, a
     gold/brand-gradient button) where the surface itself doesn't flip. */
  --rg-paper: #ffffff;
  --rg-ink:   #030713;

  /* Nav-specific translucent surfaces — the header/mega-menu/mobile-menu
     now flip with theme (unlike .hero/.page-hero/.cta-band, which stay
     permanently dark since they sit on photography, not a flat surface). */
  --rg-nav-bg: rgba(3,7,19,0.74);
  --rg-nav-solid: rgba(7,14,31,0.98);
  --rg-hover-tint: rgba(150,180,255,0.07);

  /* Deep-blue ambience — soft indigo/cyan light pooling in the section
     backgrounds (see .bg-black / .bg-surface). Dark theme only: the light
     blocks below set these to transparent. */
  --rg-glow-1: rgba(36,44,140,0.15);
  --rg-glow-2: rgba(0,110,190,0.06);

  /* HERO IMAGE CONTROLS — the two knobs for every hero photo (home page and
     inner pages). Also adjustable live: open  index.html?tune  for sliders.
       --hero-brightness  1 = untouched photo, <1 darker, >1 brighter
       --hero-density     photo opacity over the dark base (1 = solid, lower =
                          the navy base shows through and the photo thins out)
     No colour grading is applied to the photos. */
  --hero-brightness: 1;
  --hero-density: 0.96;

  --rg-gradient-brand: linear-gradient(120deg, var(--rg-indigo) 0%, var(--rg-cyan) 100%);
  --rg-gradient-gold:  linear-gradient(120deg, var(--rg-gold) 0%, var(--rg-gold-light) 100%);
  --rg-gradient-dark:  linear-gradient(180deg, rgba(3,7,19,0) 0%, rgba(3,7,19,0.92) 100%);
  --rg-gradient-dark-full: linear-gradient(180deg, rgba(3,7,19,0.42) 0%, rgba(3,7,19,0.68) 55%, rgba(3,7,19,0.9) 100%);

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.6rem, 5.4vw, 5.4rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.4rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 1.9rem);
  --fs-h4: clamp(1.15rem, 1.4vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* Layout */
  --container-w: 1360px;
  --container-pad: 6vw;
  --section-pad-y: clamp(4.5rem, 8vw, 8rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --nav-h: 92px;
  --nav-h-scrolled: 68px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}

@media (max-width: 900px){
  :root{ --container-pad: 24px; }
}

/* --------------------------------------------------------------------------
   1B. LIGHT THEME
   ------------------------------------------------------------------------
   Three states, same pattern used across the rest of the site's tooling:
     - no explicit choice  → follow the OS via prefers-color-scheme
     - data-theme="light"  → force light regardless of OS
     - data-theme="dark"   → force dark regardless of OS (re-asserts the
       :root defaults above, so a user can override an OS set to light)
   Only the neutral/accent-text tokens flip here. Brand hues (indigo, cyan,
   gold) and anything built from hardcoded rgba() — hero photo scrims, the
   modal backdrop — stay constant in both themes on purpose.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --rg-black:      #ffffff;
    --rg-charcoal:    #f5f6f9;
    --rg-charcoal-2:   #ffffff;
    --rg-charcoal-3:    #eef0f4;
    --rg-charcoal-4:     #e3e6ec;
    --rg-white:      #101114;
    --rg-off-white:   #2b2d36;
    --rg-grey-100:     #33353f;
    --rg-grey-300:      #53555f;
    --rg-grey-500:       #74767f;
    --rg-grey-700:        #9a9ca5;
    --rg-cyan-light:  #0089b8;
    --rg-gold-light:  #96751d;
    --rg-border:      rgba(10,11,15,0.1);
    --rg-border-strong: rgba(10,11,15,0.18);
    --rg-nav-bg: rgba(255,255,255,0.78);
    --rg-nav-solid: rgba(255,255,255,0.98);
    --rg-hover-tint: rgba(10,11,15,0.045);
    --rg-glow-1: transparent;
    --rg-glow-2: transparent;
  }
}
:root[data-theme="light"]{
  --rg-black:      #ffffff;
  --rg-charcoal:    #f5f6f9;
  --rg-charcoal-2:   #ffffff;
  --rg-charcoal-3:    #eef0f4;
  --rg-charcoal-4:     #e3e6ec;
  --rg-white:      #101114;
  --rg-off-white:   #2b2d36;
  --rg-grey-100:     #33353f;
  --rg-grey-300:      #53555f;
  --rg-grey-500:       #74767f;
  --rg-grey-700:        #9a9ca5;
  --rg-cyan-light:  #0089b8;
  --rg-gold-light:  #96751d;
  --rg-border:      rgba(10,11,15,0.1);
  --rg-border-strong: rgba(10,11,15,0.18);
  --rg-nav-bg: rgba(255,255,255,0.78);
  --rg-nav-solid: rgba(255,255,255,0.98);
  --rg-hover-tint: rgba(10,11,15,0.045);
  --rg-glow-1: transparent;
  --rg-glow-2: transparent;
}

/* Chrome that sits on photography, a brand-gradient panel, or (footer) a
   solid brand-colour fill rather than a flat neutral surface — hero/
   page-hero photo overlays, the CTA band, and the footer — stays visually
   identical in both themes (a photo, or a deliberately-blue footer,
   doesn't have a "light mode"). The nav bar and mobile menu are flat
   neutral surfaces, so they flip normally. Because these declarations
   target the elements directly (not :root), they win for that element and
   everything inside it regardless of the light-theme overrides above or
   source order. */
.hero, .page-hero, .cta-band, .site-footer{
  --rg-black:      #030713;
  --rg-charcoal:    #060d1f;
  --rg-charcoal-2:   #0a1429;
  --rg-charcoal-3:    #101c38;
  --rg-charcoal-4:     #182a4d;
  --rg-white:      #ffffff;
  --rg-off-white:   #eef3ff;
  --rg-grey-100:     #dde6fa;
  --rg-grey-300:      #a8b6d6;
  --rg-grey-500:       #8493b6;
  --rg-grey-700:        #4b5b82;
  --rg-cyan-light:  #5cd0ff;
  --rg-gold-light:  #e6c983;
  --rg-border:      rgba(150,180,255,0.11);
  --rg-border-strong: rgba(150,180,255,0.2);
  /* --rg-text/--rg-text-dim/--rg-text-faint (":root{ --rg-text-dim:
     var(--rg-grey-300); }" etc.) get their var() reference substituted
     once, at :root, into a fixed value that then just inherits down —
     overriding the raw --rg-grey-100/300/500 above does NOT make an
     already-inherited --rg-text-dim/--rg-text-faint re-resolve against
     it (confirmed via getComputedStyle: without this, .cta-band p came
     out light-theme dark-grey instead of this block's intended light
     grey, in light theme). So the semantic aliases need restating here
     directly too, not just the raw tokens they're meant to proxy. */
  --rg-text:      var(--rg-off-white);
  --rg-text-dim:   var(--rg-grey-300);
  --rg-text-faint:  var(--rg-grey-500);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body{
  margin: 0;
  background: var(--rg-bg);
  color: var(--rg-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Defensive default: a long unbroken string (an email address, the CIN,
   a URL) must never be able to force a flex/grid ancestor wider than its
   column — wrap it instead. Safe everywhere; normal prose is unaffected. */
body{ overflow-wrap: break-word; word-break: break-word; }
img, picture, video, canvas, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{ margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
::selection{ background: var(--rg-cyan); color: var(--rg-ink); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--rg-cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lenis smooth scroll helper classes */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }

/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section{ padding-block: var(--section-pad-y); position: relative; }
.section-tight{ padding-block: clamp(3rem, 5vw, 5rem); }
.bg-surface{ background: radial-gradient(900px 520px at 6% 100%, var(--rg-glow-2), transparent 66%), var(--rg-bg-alt); }
.bg-charcoal{ background: var(--rg-charcoal-2); }
.bg-black{ background: radial-gradient(1000px 560px at 94% 0%, var(--rg-glow-1), transparent 62%), var(--rg-black); }

.section-header{ max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-header.center{ margin-inline: auto; text-align: center; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rg-cyan-light);
  margin-bottom: 1.1rem;
}
.eyebrow::before{
  content: "";
  width: 28px; height: 2px;
  background: var(--rg-gradient-brand);
  display: inline-block;
}
.section-header.center .eyebrow{ justify-content: center; }

.section-title{ font-size: var(--fs-h2); color: var(--rg-white); }
.section-lead{ font-size: var(--fs-lead); color: var(--rg-text-dim); margin-top: 1.1rem; font-weight: 400; }

.text-gradient{
  background: var(--rg-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gold{ color: var(--rg-gold-light); }
.text-dim{ color: var(--rg-text-dim); }

.grid{ display: grid; gap: 2rem; }
.grid > *{ min-width: 0; } /* grid items don't shrink below their content's min-content by default — this lets long text wrap instead of forcing the track (and every ancestor) wider */
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.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;
}

.skip-link{
  position: fixed; top: -60px; left: 16px; z-index: 10000;
  background: var(--rg-cyan); color: var(--rg-ink);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 700; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 16px; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn-primary{
  background: var(--rg-gradient-brand);
  color: var(--rg-paper);
  box-shadow: 0 8px 30px -8px rgba(0,174,239,0.45);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(0,174,239,0.6); }
.btn-outline{
  background: transparent;
  color: var(--rg-white);
  border-color: var(--rg-border-strong);
}
.btn-outline:hover{ border-color: var(--rg-cyan); color: var(--rg-cyan-light); transform: translateY(-2px); }
.btn-gold{
  background: var(--rg-gradient-gold);
  color: var(--rg-ink);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(201,162,75,0.5); }
.btn-sm{ padding: 0.75rem 1.5rem; font-size: 0.8rem; }
.btn-block{ width: 100%; }

.link-arrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em;
  color: var(--rg-cyan-light);
  position: relative;
  padding-bottom: 4px;
}
.link-arrow::after{
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  opacity: 0.5;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.link-arrow:hover::after{ transform: scaleX(1); opacity: 1; }
.link-arrow i, .link-arrow svg{ transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover i{ transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. PRELOADER
   -------------------------------------------------------------------------- */
#preloader{
  position: fixed; inset: 0; z-index: 100000;
  background: var(--rg-black);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 22px;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}
#preloader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark{ width: 68px; height: 68px; opacity: 0; animation: rgFadeUp 0.6s var(--ease-out) forwards; }
.preloader-word{
  font-family: var(--font-display); letter-spacing: 0.3em; font-size: 0.85rem;
  color: var(--rg-grey-300); text-transform: uppercase;
  opacity: 0; animation: rgFadeUp 0.6s var(--ease-out) 0.15s forwards;
}
.preloader-bar{
  width: 180px; height: 2px; background: var(--rg-border-strong);
  overflow: hidden; border-radius: 2px;
  opacity: 0; animation: rgFadeUp 0.6s var(--ease-out) 0.3s forwards;
}
.preloader-bar span{
  display: block; height: 100%; width: 0%;
  background: var(--rg-gradient-brand);
  animation: rgLoadBar 1.1s var(--ease-soft) 0.4s forwards;
}

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
/* Frost tint channels — set from the hero photo by js/navigation.js. Registered as
   numbers so the tint crossfades between rotating slides instead of jumping. */
@property --nav-tr { syntax: "<number>"; inherits: true; initial-value: 6; }
@property --nav-tg { syntax: "<number>"; inherits: true; initial-value: 12; }
@property --nav-tb { syntax: "<number>"; inherits: true; initial-value: 28; }
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: height var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
              transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out), --nav-tr 0.9s ease, --nav-tg 0.9s ease, --nav-tb 0.9s ease;
  border-bottom: 1px solid transparent;
}
/* Unscrolled, the header is transparent and sits directly on top of the
   hero photo (every page starts with one) — it needs the same fixed light
   text as the hero itself here, regardless of site theme, or it goes
   unreadable against a bright/warm image in light mode. Once `.is-scrolled`
   adds its own backdrop these overrides no longer match, so the header's
   text correctly falls back to following the theme. */
.site-header:not(.is-scrolled):not(.is-menu-open){
  --rg-white: #ffffff;
  --rg-off-white: #eef3ff;
  --rg-grey-100: #dde6fa;
  --rg-grey-300: #a8b6d6;
  --rg-grey-500: #8493b6;
  --rg-border-strong: rgba(150,180,255,0.2);
  --rg-cyan-light: #5cd0ff;
  /* Heroes have no scrim of their own: the header carries a soft fade tinted with the
     photo's own colours (js/navigation.js sets --nav-t*; deep navy until then). */
  background: linear-gradient(180deg, rgb(var(--nav-tr) var(--nav-tg) var(--nav-tb) / 0.74) 0%, rgb(var(--nav-tr) var(--nav-tg) var(--nav-tb) / 0.5) 62%, rgb(var(--nav-tr) var(--nav-tg) var(--nav-tb) / 0) 100%);
  /* Size the gradient to the border box too, or its dark top row repeats into the
     1px transparent bottom border and draws a hairline across the photo. */
  background-origin: border-box; background-repeat: no-repeat;
}
/* Permanent on every page: white text over a frosted, see-through fade.
   The blur softens busy detail (wires, pylons, signage) sitting behind the menu and
   dissolves at the bottom edge, so it never reads as a band or hides the photo. The
   logo is a transparent PNG with a dark-indigo wordmark, so it gets a light halo. */
.site-header:not(.is-scrolled):not(.is-menu-open)::before{
  content: ""; position: absolute; inset: 0 0 -18px 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
/* Logo glow is permanent: every page, scrolled or not, menu open or closed, either theme. */
.site-header .brand img{
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px rgba(255,255,255,0.95)) drop-shadow(0 0 12px rgba(255,255,255,0.4));
}
.site-header:not(.is-scrolled):not(.is-menu-open) .nav-link,
.site-header:not(.is-scrolled):not(.is-menu-open) .nav-link:hover,
.site-header:not(.is-scrolled):not(.is-menu-open) .nav-link.is-active,
.site-header:not(.is-scrolled):not(.is-menu-open) .brand-name{ color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.4); }
.site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle span{ background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.site-header:not(.is-scrolled):not(.is-menu-open) .theme-toggle{ color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(2,5,14,0.28); }
.site-header:not(.is-scrolled):not(.is-menu-open) .theme-toggle:hover,
.site-header:not(.is-scrolled):not(.is-menu-open) .theme-toggle[aria-expanded="true"]{ color: #fff; border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.2); box-shadow: 0 0 0 4px rgba(255,255,255,0.1), 0 8px 24px -8px rgba(0,174,239,0.6); }
.site-header:not(.is-scrolled):not(.is-menu-open) .nav-link::after{ background: linear-gradient(90deg, var(--rg-cyan-light, #5cd0ff), #fff); box-shadow: 0 1px 4px rgba(0,0,0,0.45); }
/* The mega-menu dropdown carries its own opaque surface (--rg-nav-solid)
   that already flips correctly with theme regardless of header scroll
   state, so its text must follow the theme too — not the fixed-light
   override above, which is only for chrome sitting directly on the hero
   photo. Without this, light theme renders white labels on the mega-menu's
   now-white background. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .site-header:not(.is-scrolled) .mega-menu{
    --rg-white: #101114;
    --rg-off-white: #2b2d36;
    --rg-grey-100: #33353f;
    --rg-grey-300: #53555f;
    --rg-grey-500: #74767f;
    --rg-border-strong: rgba(10,11,15,0.18);
    --rg-cyan-light: #0089b8;
  }
}
:root[data-theme="light"] .site-header:not(.is-scrolled) .mega-menu{
  --rg-white: #101114;
  --rg-off-white: #2b2d36;
  --rg-grey-100: #33353f;
  --rg-grey-300: #53555f;
  --rg-grey-500: #74767f;
  --rg-border-strong: rgba(10,11,15,0.18);
  --rg-cyan-light: #0089b8;
}
.site-header.is-scrolled{
  height: var(--nav-h-scrolled);
  background: var(--rg-nav-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--rg-border);
}
/* Auto-hide: js/navigation.js slides the bar away while the page scrolls down and
   brings it back — with a staggered drop-in — on scroll-up, or once scrolling stops. */
.site-header.is-hidden{ transform: translateY(-105%); opacity: 0; pointer-events: none; }
.site-header.is-revealing .brand,
.site-header.is-revealing .nav-actions{ animation: rgNavFade 0.6s var(--ease-out) backwards; }
.site-header.is-revealing .nav-primary > li{ animation: rgNavDrop 0.55s var(--ease-out) backwards; }
.site-header.is-revealing .nav-primary > li:nth-child(1){ animation-delay: 0.05s; }
.site-header.is-revealing .nav-primary > li:nth-child(2){ animation-delay: 0.10s; }
.site-header.is-revealing .nav-primary > li:nth-child(3){ animation-delay: 0.15s; }
.site-header.is-revealing .nav-primary > li:nth-child(4){ animation-delay: 0.20s; }
.site-header.is-revealing .nav-primary > li:nth-child(5){ animation-delay: 0.25s; }
.site-header.is-revealing .nav-primary > li:nth-child(6){ animation-delay: 0.30s; }
@keyframes rgNavDrop{ from{ opacity: 0; transform: translateY(-14px); } }
@keyframes rgNavFade{ from{ opacity: 0; } }
.nav-inner{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.brand{ display: flex; align-items: center; gap: 12px; z-index: 2; }
.brand img{ height: 66px; width: auto; transition: height var(--dur-med) var(--ease-out); }
.site-header.is-scrolled .brand img{ height: 48px; }
.brand-name{
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.02em; color: var(--rg-white); line-height: 1.1;
}
.brand-name span{ display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.2em; color: var(--rg-text-faint); text-transform: uppercase; margin-top: 3px; }
/* The unscrolled header's muted grey tagline colour was tuned to sit on a
   dark backdrop — against a brighter hero photo it nearly disappears, so
   it gets its own lighter, shadowed treatment specifically while
   unscrolled (once .is-scrolled adds an opaque bar it goes back to the
   normal, theme-following faint-grey above). */
.site-header:not(.is-scrolled):not(.is-menu-open) .brand-name span{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4);
}

.nav-primary{ display: flex; align-items: center; gap: clamp(1.1rem, 1.7vw, 2.4rem); white-space: nowrap; }
.nav-primary > li{ position: relative; }
.nav-link{
  font-size: 0.9rem; font-weight: 500; color: var(--rg-grey-100);
  padding: 8px 2px; position: relative; display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link::after{
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--rg-gradient-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-link.is-active{ color: var(--rg-white); }
.nav-link:hover::after, .nav-link.is-active::after{ transform: scaleX(1); }
.nav-caret{ font-size: 0.6rem; transition: transform var(--dur-fast) var(--ease-out); }
.has-mega:hover .nav-caret, .has-mega.is-open .nav-caret{ transform: rotate(180deg); }

.nav-actions{ display: flex; align-items: center; gap: 1.2rem; }

/* Theme toggle — cycles system → light → dark (see js/theme.js). The header
   instance is a bare icon button; the mobile-menu instance also
   shows a text label. Both use the ordinary flipping tokens below, so
   they correctly follow the nav bar's own light/dark state. */
.theme-toggle{
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--rg-border-strong); color: var(--rg-grey-100);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover{ border-color: var(--rg-cyan); color: var(--rg-cyan-light); transform: translateY(-2px); }
.theme-toggle i{ font-size: 1rem; width: 1em; text-align: center; }
.theme-toggle-mobile{
  width: 100%; height: auto; border-radius: var(--radius-sm); justify-content: flex-start;
  padding: 0.85rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--rg-grey-100);
}
.theme-toggle-mobile:hover{ transform: none; background: var(--rg-hover-tint); }
.theme-toggle{ cursor: pointer; }
.theme-toggle:focus-visible{ outline: 2px solid var(--rg-cyan); outline-offset: 3px; }
.theme-toggle:active{ transform: scale(0.92); }
.theme-toggle[aria-expanded="true"]{ border-color: var(--rg-cyan); color: var(--rg-cyan-light); }
.theme-toggle.is-swapping i{ animation: rgThemeSwap 0.6s var(--ease-out); }
@keyframes rgThemeSwap{ from{ transform: rotate(-140deg) scale(0.3); opacity: 0; } to{ transform: none; opacity: 1; } }

/* Theme menu (built by js/theme.js, appended to <body> so it follows the theme, not the header's pinned-white tokens) */
.theme-menu{
  position: fixed; z-index: 9600; min-width: 196px; padding: 6px; border-radius: 16px;
  background: var(--rg-nav-solid); border: 1px solid var(--rg-border-strong);
  box-shadow: 0 26px 60px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  visibility: hidden; opacity: 0; transform: translateY(-8px) scale(0.96); transform-origin: 100% 0;
  transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.2s;
}
.theme-menu.is-open{ visibility: visible; opacity: 1; transform: none; }
.theme-menu-item{
  display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.7rem 0.85rem; border-radius: 11px;
  font: 600 0.88rem/1 var(--font-body); text-align: left; cursor: pointer; color: var(--rg-grey-100);
  transition: background 0.2s var(--ease-out), color 0.2s;
}
.theme-menu-item > i:first-child{ width: 1.15em; text-align: center; color: var(--rg-text-dim); transition: color 0.2s, transform 0.3s var(--ease-out); }
.theme-menu-item:hover, .theme-menu-item:focus-visible{ background: var(--rg-hover-tint); color: var(--rg-white); outline: none; }
.theme-menu-item:hover > i:first-child, .theme-menu-item:focus-visible > i:first-child{ color: var(--rg-cyan-light); transform: scale(1.15) rotate(-8deg); }
.theme-menu-item[aria-checked="true"]{ color: var(--rg-white); }
.theme-menu-check{ margin-left: auto; font-size: 0.75rem; color: var(--rg-cyan-light); opacity: 0; transform: scale(0.5); transition: opacity 0.25s, transform 0.3s var(--ease-out); }
.theme-menu-item[aria-checked="true"] .theme-menu-check{ opacity: 1; transform: none; }

/* Segmented control shown inside the mobile menu */
.theme-seg{ display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--rg-hover-tint); border: 1px solid var(--rg-border); }
.theme-seg-btn{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 0.4rem; border-radius: calc(var(--radius-sm) - 2px);
  font: 600 0.82rem/1 var(--font-body); color: var(--rg-grey-100); cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s, box-shadow 0.25s;
}
.theme-seg-btn:focus-visible{ outline: 2px solid var(--rg-cyan); outline-offset: 2px; }
.theme-seg-btn[aria-checked="true"]{ background: var(--rg-gradient-brand); color: var(--rg-paper); box-shadow: 0 8px 22px -10px rgba(0,174,239,0.7); }

/* Theme switch: the new theme grows out of the button (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root){ animation: none; mix-blend-mode: normal; }
.theme-vt::view-transition-old(root){ z-index: 1; }
.theme-vt::view-transition-new(root){ z-index: 2; }

.nav-toggle{
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; z-index: 2;
}
.nav-toggle span{ width: 24px; height: 2px; background: var(--rg-white); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); transform-origin: center; }
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1280px){ .nav-toggle{ display: none; } }
@media (max-width: 1279px){ .nav-primary{ display: none; } }
/* Below the desktop nav breakpoint the theme toggle lives inside the
   full-screen mobile menu instead, to keep the collapsed header uncluttered. */
@media (max-width: 1279px){ .nav-actions > .theme-toggle:not(.theme-toggle-mobile){ display: none; } }

/* Mega menu */
.mega-menu{
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translate(-50%, 12px);
  width: min(880px, 86vw);
  background: var(--rg-nav-solid);
  border: 1px solid var(--rg-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem 1.6rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.has-mega:hover .mega-menu,
.has-mega.is-open .mega-menu{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.mega-item{
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.mega-item:hover{ background: var(--rg-hover-tint); }
.mega-item .mega-icon{
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: var(--rg-charcoal-3);
}
.mega-item .mega-icon img{ width: 100%; height: 100%; object-fit: cover; }
.mega-item-text{ display: flex; flex-direction: column; }
.mega-item-text strong{ font-size: 0.86rem; font-weight: 600; color: var(--rg-white); }
.mega-item-text small{ font-size: 0.72rem; color: var(--rg-text-faint); margin-top: 2px; }

/* Mobile fullscreen menu */
.mobile-menu{
  position: fixed; inset: 0; z-index: 8500;
  background: var(--rg-charcoal);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 1rem) var(--container-pad) 2.5rem;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-soft);
  overflow-y: auto;
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu-links{ display: flex; flex-direction: column; }
.mobile-menu-links > li{ border-bottom: 1px solid var(--rg-border); }
.mobile-menu-links a, .mobile-menu-links button.mobile-toggle{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1.15rem 0.2rem; font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600; color: var(--rg-white); text-align: left;
}
.mobile-submenu{ max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.mobile-submenu.is-open{ max-height: 600px; }
.mobile-submenu a{ font-size: 1rem; font-weight: 500; color: var(--rg-text-dim); padding: 0.7rem 0.4rem; }
.mobile-menu-footer{ margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu-footer a{ color: var(--rg-text-dim); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
/* Heroes carry no overlaid copy: the photo is shown whole, running behind the
   transparent fixed header (the user explicitly rejected a solid/dark band
   above it). The banners are wide panoramas (1920x701 rotator slides,
   1920x452 page banners), so height follows the photo's ratio (36.51vw =
   701/1920) rather than a viewport-height box — that box cropped 40-80% of
   the width and read as "too zoomed in". The floor/ceiling only crop a
   little on phones and very large monitors. NOTE: don't pair `aspect-ratio`
   with min/max-height on these blocks; Chromium re-derives WIDTH from the
   clamped height and the block overflows sideways. */
.hero, .page-hero{
  position: relative; overflow: hidden;
  background: var(--rg-black);
  --rotator-h: clamp(200px, 36.51vw, 70svh);
}
.hero-media, .page-hero-media{ position: relative; overflow: hidden; }
.hero-media, .page-hero-media[data-vertical-rotator]{ height: var(--rotator-h); }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; opacity: var(--hero-density); filter: brightness(var(--hero-brightness)); }
.page-hero-media:not([data-vertical-rotator]) img{
  display: block; width: 100%; height: auto; min-height: 200px; max-height: 70svh;
  object-fit: cover; opacity: var(--hero-density); filter: brightness(var(--hero-brightness));
}
.hero-canvas{ position: absolute; inset: 0; z-index: 1; opacity: 0.5; }
.hero-grid-overlay{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(140,180,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, black 10%, transparent 75%);
}

/* Multi-vertical rotating hero backdrop — cross-fades through a real
   photo from each business vertical (see data-vertical-rotator in
   js/business.js). Falls back to showing just the first image when
   prefers-reduced-motion is set (JS never starts the interval). The host
   needs an explicit height (set above) because every slide is absolute. */
[data-vertical-rotator] img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 1.6s var(--ease-soft);
}
/* :not(.is-active) outranks the plain `.hero-media img` / `.page-hero-media
   img` base-opacity rules regardless of their order in this file. */
[data-vertical-rotator] img:not(.is-active){ opacity: 0 !important; }
.hero-media[data-vertical-rotator] img.is-active{ opacity: var(--hero-density); }
.page-hero-media[data-vertical-rotator] img.is-active{ opacity: var(--hero-density); }

.hero-vertical-tag{
  position: absolute; z-index: 2; top: calc(var(--nav-h) + 1.6rem); right: var(--container-pad);
  max-width: calc(100% - 2 * var(--container-pad));
  padding: 0.55rem 1.15rem; border-radius: 999px;
  background: rgba(3,7,19,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rg-border-strong);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; color: var(--rg-grey-100);
}
.hero-vertical-dots{ position: absolute; z-index: 2; bottom: 1.4rem; right: var(--container-pad); display: flex; gap: 8px; }
.hero-vertical-dots span{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.32); transition: background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.hero-vertical-dots span.is-active{ background: var(--rg-cyan); transform: scale(1.5); }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card{
  background: var(--rg-surface);
  border: 1px solid var(--rg-border);
  border-radius: var(--radius-md);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

/* Business ecosystem cards */
.biz-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.biz-card{
  position: relative; border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--rg-charcoal-3), var(--rg-charcoal-2));
  border: 1px solid var(--rg-border);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.biz-card::before{
  content:""; position: absolute; inset: 0; opacity: 0; background: var(--rg-gradient-brand);
  transition: opacity var(--dur-med) var(--ease-out); z-index: 0; pointer-events: none;
}
.biz-card:hover{ transform: translateY(-8px); border-color: rgba(0,174,239,0.4); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); }
.biz-card:hover::before{ opacity: 0.08; }
.biz-card > *{ position: relative; z-index: 1; }
/* Real photography of each division, matching how the official site
   presents its business cards — flush with the card's top edge, above
   the icon/copy. */
.biz-card-media{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rg-charcoal-3); }
.biz-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.biz-card:hover .biz-card-media img{ transform: scale(1.07); }
/* Edible Oil's asset is an isolated product-jar PNG, not a scene photo
   like the other six — contain + a warm brand-gold backdrop instead of a
   cropping cover fit, so the jar doesn't get cut off. */
.biz-card-media.is-product{ background: linear-gradient(160deg, rgba(201,162,75,0.22), rgba(46,49,146,0.16)); }
.biz-card-media.is-product img{ object-fit: contain; padding: 1.2rem; }
.biz-card-body{ position: relative; z-index: 1; padding: 1.7rem 1.8rem 2rem; display: flex; flex-direction: column; flex: 1; }
.biz-card-icon{
  width: 58px; height: 58px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,174,239,0.1); color: var(--rg-cyan-light); font-size: 1.5rem; margin-bottom: 1.4rem;
  border: 1px solid rgba(0,174,239,0.25);
  transition: transform var(--dur-med) var(--ease-out);
}
.biz-card:hover .biz-card-icon{ transform: scale(1.08) rotate(-4deg); }
.biz-card-num{ position: absolute; top: 0.9rem; right: 0.9rem; z-index: 1; padding: 0.2rem 0.6rem; border-radius: 100px; background: rgba(3,7,19,0.6); backdrop-filter: blur(6px); font-family: var(--font-display); font-size: 0.72rem; color: var(--rg-off-white); letter-spacing: 0.1em; }
.biz-card h3{ font-size: 1.2rem; color: var(--rg-white); margin-bottom: 0.7rem; }
.biz-card p{ font-size: 0.9rem; color: var(--rg-text-dim); line-height: 1.65; }
.biz-card .link-arrow{ margin-top: 1.3rem; }

/* Value / ethos cards */
.values-row{ display: flex; gap: 1.1rem; flex-wrap: wrap; }
.value-card{
  flex: 1 1 150px; padding: 1.9rem 1.4rem; border-radius: var(--radius-md);
  background: var(--rg-charcoal-2); border: 1px solid var(--rg-border);
  transition: flex-grow var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  cursor: default;
}
.value-card:hover{ flex-grow: 1.6; background: var(--rg-charcoal-3); transform: translateY(-6px); }
.value-card .value-icon{ font-size: 1.6rem; color: var(--rg-gold-light); margin-bottom: 1rem; display:block; }
.value-card h4{ font-size: 1.02rem; color: var(--rg-white); margin-bottom: 0.5rem; }
.value-card p{ font-size: 0.85rem; color: var(--rg-text-dim); line-height: 1.6; }

/* Product / gallery cards */
.product-card{
  border-radius: var(--radius-md); overflow: hidden; position: relative;
  border: 1px solid var(--rg-border); background: var(--rg-surface);
}
.product-card .product-media{ aspect-ratio: 4/3.3; overflow: hidden; }
.product-card .product-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.product-card:hover .product-media img{ transform: scale(1.08); }
.product-card .product-body{ padding: 1.2rem 1.3rem 1.5rem; }
.product-card h4{ font-size: 0.98rem; color: var(--rg-white); font-weight: 600; }
.product-card p{ font-size: 0.82rem; color: var(--rg-text-faint); margin-top: 0.35rem; }

/* Leadership cards */
.leader-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.6rem; }
.leader-card{
  display: flex; flex-direction: column; width: 100%; padding: 0; font: inherit;
  border-radius: var(--radius-md); overflow: hidden; background: var(--rg-surface);
  border: 1px solid var(--rg-border); cursor: pointer; text-align: left;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.leader-card:hover{ transform: translateY(-8px); border-color: rgba(0,174,239,0.35); }
.leader-photo{ display: block; width: 100%; aspect-ratio: 4/4.4; overflow: hidden; background: var(--rg-charcoal-3); position: relative; }
.leader-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.leader-card:hover .leader-photo img{ transform: scale(1.06); }
.leader-photo .initials{
  position: absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: 2.6rem; color: var(--rg-grey-300);
  background: linear-gradient(160deg, var(--rg-charcoal-4), var(--rg-charcoal-2));
}
.leader-info{ display: block; width: 100%; padding: 1.3rem 1.4rem 1.6rem; }
.leader-info h3{ font-size: 1.05rem; color: var(--rg-white); }
.leader-info .role{ display: block; font-size: 0.8rem; color: var(--rg-cyan-light); margin-top: 0.3rem; letter-spacing: 0.02em; }
.leader-info .snippet{ display: block; font-size: 0.85rem; color: var(--rg-text-dim); margin-top: 0.7rem; line-height: 1.6; }
.leader-info .read-more{ display: block; margin-top: 0.9rem; font-size: 0.78rem; color: var(--rg-gold-light); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Certificate cards */
.cert-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.4rem; }
.cert-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 1.8rem; border-radius: var(--radius-md); text-align: left;
  background: var(--rg-charcoal-2); border: 1px solid var(--rg-border); cursor: pointer;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.cert-card:hover{ transform: translateY(-6px); border-color: rgba(201,162,75,0.4); }
.cert-icon{ width: 52px; height: 52px; border-radius: 12px; background: rgba(201,162,75,0.12); border: 1px solid rgba(201,162,75,0.3); display: flex; align-items: center; justify-content: center; color: var(--rg-gold-light); font-size: 1.3rem; }
.cert-card h4{ font-size: 0.96rem; color: var(--rg-white); line-height: 1.4; }
.cert-card .cert-cta{ font-size: 0.76rem; color: var(--rg-cyan-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* --------------------------------------------------------------------------
   9. STATS / COUNTERS
   -------------------------------------------------------------------------- */
.stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1px; background: var(--rg-border); border: 1px solid var(--rg-border); border-radius: var(--radius-md); overflow: hidden; }
/* Each card is a size container so its number scales to the card's own width: a long
   figure like 23,000+ shrinks to fit instead of breaking onto a second line (the global
   body word-break would otherwise split it mid-number). */
.stat-item{ background: var(--rg-charcoal-2); padding: 2.4rem 1.6rem; text-align: center; container-type: inline-size; }
.stat-item .num{ font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 3.2rem); color: var(--rg-white); font-weight: 700; display: flex; align-items: baseline; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; }
.stat-item .num [data-counter], .stat-item .num .suffix{ white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
@supports (width: 1cqw){ .stat-item .num{ font-size: clamp(1.35rem, 24cqw, 3.2rem); } }
.stat-item .num .suffix{ font-size: 0.5em; color: var(--rg-cyan-light); }
.stat-item .label{ margin-top: 0.6rem; font-size: 0.8rem; color: var(--rg-text-dim); }
/* Count-aware layouts, so no row ever ends in an empty cell (auto-fit above stays as the
   fallback for other counts / older browsers). 5 cards: 3+2 on tablets, one row on desktop,
   2+2+1-wide on phones. 4 cards: 2x2, then one row. 3 cards: 2+1-wide, then one row. */
@supports selector(:has(*)){
  .stats-grid:has(> .stat-item:nth-child(5):last-child){ grid-template-columns: repeat(6, 1fr); }
  .stats-grid:has(> .stat-item:nth-child(5):last-child) > .stat-item{ grid-column: span 2; }
  .stats-grid:has(> .stat-item:nth-child(5):last-child) > .stat-item:nth-child(n+4){ grid-column: span 3; }
  .stats-grid:has(> .stat-item:nth-child(4):last-child){ grid-template-columns: repeat(2, 1fr); }
  .stats-grid:has(> .stat-item:nth-child(3):last-child){ grid-template-columns: repeat(2, 1fr); }
  .stats-grid:has(> .stat-item:nth-child(3):last-child) > .stat-item:nth-child(3){ grid-column: 1 / -1; }
  .stats-grid:has(> .stat-item:nth-child(2):last-child){ grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 700px){
    .stats-grid:has(> .stat-item:nth-child(3):last-child){ grid-template-columns: repeat(3, 1fr); }
    .stats-grid:has(> .stat-item:nth-child(3):last-child) > .stat-item:nth-child(3){ grid-column: auto; }
  }
  @media (min-width: 900px){
    .stats-grid:has(> .stat-item:nth-child(4):last-child){ grid-template-columns: repeat(4, 1fr); }
  }
  @media (min-width: 1100px){
    .stats-grid:has(> .stat-item:nth-child(5):last-child){ grid-template-columns: repeat(5, 1fr); }
    .stats-grid:has(> .stat-item:nth-child(5):last-child) > .stat-item,
    .stats-grid:has(> .stat-item:nth-child(5):last-child) > .stat-item:nth-child(n+4){ grid-column: auto; }
  }
  @media (max-width: 600px){
    .stats-grid:has(> .stat-item:nth-child(5):last-child){ grid-template-columns: repeat(2, 1fr); }
    .stats-grid:has(> .stat-item:nth-child(5):last-child) > .stat-item,
    .stats-grid:has(> .stat-item:nth-child(5):last-child) > .stat-item:nth-child(n+4){ grid-column: auto; }
    .stats-grid:has(> .stat-item:nth-child(5):last-child) > .stat-item:nth-child(5){ grid-column: 1 / -1; }
  }
}
/* One shared number size per band: sized from the band's width and its narrowest column
   (--sc) rather than from each card, so a wide last card doesn't get bigger digits than
   its neighbours. --sp is a card's horizontal padding in total. */
@supports selector(:has(*)){
  .stats-grid:has(> .stat-item:nth-child(2)):not(:has(> .stat-item:nth-child(6))){ container-type: inline-size; }
  .stats-grid:has(> .stat-item:nth-child(2)):not(:has(> .stat-item:nth-child(6))) > .stat-item{ container-type: normal; }
  .stats-grid:has(> .stat-item:nth-child(2)):not(:has(> .stat-item:nth-child(6))) .stat-item .num{
    font-size: clamp(1.35rem, calc((100cqw / var(--sc, 4) - var(--sp, 3.2rem)) * 0.24), 3.2rem);
  }
  .stats-grid:has(> .stat-item:nth-child(5):last-child){ --sc: 3; }
  .stats-grid:has(> .stat-item:nth-child(4):last-child){ --sc: 2; }
  .stats-grid:has(> .stat-item:nth-child(3):last-child){ --sc: 2; }
  .stats-grid:has(> .stat-item:nth-child(2):last-child){ --sc: 2; }
  @media (min-width: 700px){ .stats-grid:has(> .stat-item:nth-child(3):last-child){ --sc: 3; } }
  @media (min-width: 900px){ .stats-grid:has(> .stat-item:nth-child(4):last-child){ --sc: 4; } }
  @media (min-width: 1100px){ .stats-grid:has(> .stat-item:nth-child(5):last-child){ --sc: 5; } }
  @media (max-width: 600px){
    .stats-grid:has(> .stat-item:nth-child(2)):not(:has(> .stat-item:nth-child(6))){ --sp: 2rem; }
    .stats-grid:has(> .stat-item:nth-child(5):last-child){ --sc: 2; }
  }
}

/* --------------------------------------------------------------------------
   10. TIMELINE
   -------------------------------------------------------------------------- */
.timeline{ position: relative; margin-top: 3rem; }
.timeline::before{
  content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(var(--rg-cyan), var(--rg-indigo) 40%, var(--rg-gold) 100%);
  opacity: 0.5;
}
.timeline-item{ position: relative; padding-left: 56px; padding-bottom: 2.6rem; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-dot{
  position: absolute; left: 10px; top: 4px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--rg-black); border: 2px solid var(--rg-cyan); box-shadow: 0 0 0 5px rgba(0,174,239,0.12);
}
.timeline-year{ font-family: var(--font-display); font-size: 1.4rem; color: var(--rg-gold-light); font-weight: 700; }
.timeline-item h4{ font-size: 1.05rem; color: var(--rg-white); margin-top: 0.3rem; }
.timeline-item p{ font-size: 0.9rem; color: var(--rg-text-dim); margin-top: 0.4rem; max-width: 560px; }

/* --------------------------------------------------------------------------
   11. MISSION / VISION SPLIT
   -------------------------------------------------------------------------- */
.split-mv{ display: grid; grid-template-columns: 1fr 1fr; }
.split-mv > *{ min-width: 0; }
.mv-panel{ padding: clamp(3rem, 6vw, 6rem) clamp(1.6rem, 5vw, 4rem); position: relative; }
.mv-panel.mission{ background: var(--rg-charcoal-2); }
.mv-panel.vision{ background: var(--rg-charcoal); }
.mv-panel .mv-label{ font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rg-cyan-light); font-weight: 700; }
.mv-panel .mv-quote{ font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: var(--rg-white); margin-top: 1.4rem; line-height: 1.35; }
.mv-panel.vision .mv-quote{ color: var(--rg-off-white); }
.mv-panel .mv-mark{ font-size: 4rem; color: var(--rg-border-strong); font-family: var(--font-display); line-height: 1; margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   12. CLIENT MARQUEE
   -------------------------------------------------------------------------- */
.marquee{ overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track{ display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4.5rem); width: max-content; animation: rgMarquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
/* Shown in full brand colour rather than desaturated — client logos read
   as a genuine "trusted by" showcase in colour, not a muted watermark. */
.marquee-track img{ height: 46px; width: auto; object-fit: contain; opacity: 0.9; transition: opacity var(--dur-fast) var(--ease-out); }
.marquee-track img:hover{ opacity: 1; }

/* 13. ECOSYSTEM — the interactive business diagram now lives in css/ecosystem.css (home + careers). */

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
/* Tried matching the live rausheenagroup.com footer's exact bright blue
   (#0aa5e8) — after seeing it rendered in full context it read as too
   loud/off-brand next to the rest of this site's dark, moody palette, so
   settled on the brand's own deep indigo instead: still unmistakably
   blue, but consistent with how every other section here treats colour
   (a dark base with restrained accent colour, not a full bright fill). */
.site-footer{ background: var(--rg-indigo-dark); border-top: 1px solid var(--rg-border); padding-top: clamp(3.5rem, 6vw, 6rem); }
.footer-top{ display: grid; grid-template-columns: 1.4fr 0.9fr 0.9fr 1.1fr; gap: 2.6rem; padding-bottom: 3rem; border-bottom: 1px solid var(--rg-border); }
.footer-top > *{ min-width: 0; }
/* The complete logo (diamond mark + "RAUSHEENA GROUP" wordmark, edge-to-
   edge in the source file) inside a circular badge — object-fit:contain
   on the <img> itself doesn't work here no matter how much padding is
   added: contain scales the image to fill the BOX's own width/height,
   and a square box's inscribed circle is only as wide as the square at
   its exact vertical centre — everywhere else (including where this
   logo's bottom text row sits) the circle is narrower than the square,
   so the full-width text row gets clipped at ANY box size (confirmed
   empirically: identical clipping from 150px to 280px). The fix is to
   size the <img> itself explicitly (not box-relative) so its own
   rendered rectangle is safely inscribed in the circle, then centre it
   with flexbox instead of object-fit. */
.footer-logo-badge{
  display: flex; align-items: center; justify-content: center;
  width: 200px; height: 200px; border-radius: 50%; background: #ffffff;
  overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  margin-bottom: 1.2rem;
}
.footer-logo-badge img{ width: 130px; height: auto; }
.footer-brand p{ font-size: 0.88rem; color: var(--rg-text-dim); max-width: 320px; line-height: 1.7; }
.footer-social{ display: flex; gap: 0.7rem; margin-top: 1.5rem; }
.footer-social a{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rg-border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--rg-grey-100);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover{ background: var(--rg-gradient-brand); color: var(--rg-paper); transform: translateY(-3px); border-color: transparent; }
.footer-col h5{ font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rg-text-faint); margin-bottom: 1.3rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a{ font-size: 0.9rem; color: var(--rg-grey-100); transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); }
.footer-col a:hover{ color: var(--rg-cyan-light); padding-left: 4px; }
.footer-office{ margin-bottom: 1.5rem; }
.footer-office h6{ font-size: 0.82rem; color: var(--rg-white); font-weight: 600; margin-bottom: 0.5rem; }
.footer-office address{ font-style: normal; font-size: 0.85rem; color: var(--rg-text-dim); line-height: 1.7; }
.footer-contact-item{ display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--rg-grey-100); margin-top: 0.6rem; }
.footer-contact-item img{ width: 18px; height: 18px; opacity: 0.8; }
.footer-contact-item i{ width: 18px; text-align: center; color: var(--rg-text-faint); font-size: 0.95rem; }
.footer-bottom{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.6rem; font-size: 0.8rem; color: var(--rg-text-faint); }
.footer-bottom a{ color: var(--rg-text-faint); }
.footer-bottom a:hover{ color: var(--rg-cyan-light); }

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; min-width: 0; }
.form-field{ display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size: 0.8rem; font-weight: 600; color: var(--rg-grey-100); letter-spacing: 0.02em; }
.form-field input, .form-field select, .form-field textarea{
  width: 100%; min-width: 0; max-width: 100%;
  background: var(--rg-charcoal-2); border: 1px solid var(--rg-border-strong); border-radius: var(--radius-sm);
  padding: 0.9rem 1rem; color: var(--rg-white); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color: var(--rg-text-faint); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--rg-cyan); background: var(--rg-charcoal-3); outline: none; }
/* The closed <select> box picks up the dark styling above fine, but its
   dropdown *popup* is drawn natively by the OS/browser and doesn't reliably
   inherit a parent's background — on Windows Chrome/Edge in particular this
   can leave option text light-on-light-native-white and effectively
   invisible. Styling <option> explicitly (not just relying on inheritance
   from <select>) fixes that in every Chromium/Firefox combination tested. */
.form-field select option{
  background: var(--rg-charcoal-2);
  color: var(--rg-white);
}
.form-field select option:disabled{ color: var(--rg-text-faint); }
.form-note{ font-size: 0.78rem; color: var(--rg-text-faint); margin-top: 1rem; }
.form-status{ margin-top: 1rem; font-size: 0.88rem; }
.form-status.success{ color: var(--rg-cyan-light); }
.form-status.error{ color: #ff8a8a; }

.contact-info-card{ background: var(--rg-charcoal-2); border: 1px solid var(--rg-border); border-radius: var(--radius-md); padding: 2.2rem; min-width: 0; }
.contact-info-card + .contact-info-card{ margin-top: 1.2rem; }
.contact-info-row{ display: flex; gap: 14px; align-items: flex-start; margin-top: 1.1rem; }
.contact-info-row:first-of-type{ margin-top: 1.4rem; }
.contact-info-row img{ width: 20px; height: 20px; margin-top: 3px; opacity: 0.85; }
.contact-info-row i{ width: 20px; margin-top: 3px; text-align: center; color: var(--rg-text-faint); font-size: 1rem; }
.contact-info-row a, .contact-info-row span{ font-size: 0.92rem; color: var(--rg-grey-100); line-height: 1.6; }
.contact-info-row a:hover{ color: var(--rg-cyan-light); }

.map-frame{ border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--rg-border); filter: grayscale(0.4) invert(0.92) contrast(0.9); }
/* The invert()/grayscale() recolor only makes sense against a dark page —
   Google's embed is already light, so show it unfiltered in light theme. */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .map-frame{ filter: none; } }
:root[data-theme="light"] .map-frame{ filter: none; }
.map-frame iframe{ width: 100%; height: 100%; min-height: 320px; border: 0; }

/* --------------------------------------------------------------------------
   16. MODAL / LIGHTBOX
   -------------------------------------------------------------------------- */
.modal-overlay{
  position: fixed; inset: 0; z-index: 20000; background: rgba(5,6,8,0.86);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 5vh 5vw;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.modal-overlay.is-open{ opacity: 1; visibility: visible; }
.modal-box{
  position: relative; width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto;
  background: var(--rg-charcoal-2); border: 1px solid var(--rg-border-strong); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  transform: translateY(24px) scale(0.98); transition: transform var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open .modal-box{ transform: translateY(0) scale(1); }
.modal-box.modal-wide{ max-width: 960px; }
.modal-close{
  position: absolute; top: 1.2rem; right: 1.2rem; width: 40px; height: 40px; border-radius: 50%;
  background: var(--rg-charcoal-3); border: 1px solid var(--rg-border-strong); color: var(--rg-white);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.modal-close:hover{ background: var(--rg-indigo); color: var(--rg-paper); transform: rotate(90deg); }
.modal-leader-photo{ width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(0,174,239,0.35); flex-shrink: 0; }
.modal-leader-photo img{ width: 100%; height: 100%; object-fit: cover; }
.modal-leader-head{ display: flex; gap: 1.3rem; align-items: center; margin-bottom: 1.6rem; }
.modal-leader-head h3{ font-size: 1.3rem; color: var(--rg-white); }
.modal-leader-head p{ font-size: 0.85rem; color: var(--rg-cyan-light); margin-top: 0.3rem; }
.modal-body p{ font-size: 0.94rem; color: var(--rg-text-dim); line-height: 1.75; margin-bottom: 1rem; }
.modal-cert-frame{ width: 100%; height: 70vh; border: 1px solid var(--rg-border); border-radius: var(--radius-sm); background: #fff; }
.modal-cert-actions{ margin-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   17. MISC COMPONENTS
   -------------------------------------------------------------------------- */
.tag-pill{ display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(0,174,239,0.08); border: 1px solid rgba(0,174,239,0.25); color: var(--rg-cyan-light); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.split-media{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-media > *{ min-width: 0; }
.split-media.reverse{ direction: rtl; }
.split-media.reverse > *{ direction: ltr; }
.split-media-figure{ position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.split-media-figure img{ width: 100%; height: 100%; object-fit: cover; }
.split-media-figure::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px var(--rg-border-strong); border-radius: var(--radius-lg); }

.factory-badge{ display: inline-flex; align-items: center; gap: 10px; margin-top: 1.6rem; padding: 0.9rem 1.2rem; background: var(--rg-charcoal-2); border: 1px solid var(--rg-border); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--rg-text-dim); }
.factory-badge i{ color: var(--rg-gold-light); }

.divider-line{ height: 1px; background: var(--rg-border); width: 100%; }

.cta-band{
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--rg-indigo-dark), var(--rg-charcoal-2) 60%);
  padding: clamp(2.6rem, 6vw, 4.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  border: 1px solid var(--rg-border);
}
.cta-band h3{ font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--rg-white); max-width: 520px; }
.cta-band p{ margin-top: 0.7rem; color: var(--rg-text-dim); font-size: 0.95rem; max-width: 480px; }

.custom-cursor{
  position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--rg-cyan); pointer-events: none; z-index: 99999; mix-blend-mode: difference;
  transform: translate(-50%, -50%); transition: width var(--dur-fast), height var(--dur-fast), opacity var(--dur-fast);
  opacity: 0;
}
.custom-cursor.is-active{ opacity: 1; }
.custom-cursor.is-hovering{
  /* The small dot inverts what it crosses (difference), which turned white icons and
     nav text salmon-pink under the pointer. Over interactive elements it becomes a plain
     translucent ring instead, so buttons keep their true colours. */
  width: 46px; height: 46px; mix-blend-mode: normal; background: rgba(0,174,239,0.08);
  box-shadow: inset 0 0 0 1.5px rgba(0,174,239,0.85), 0 0 22px rgba(0,174,239,0.3);
}

.back-to-top{
  position: fixed; bottom: 28px; right: 28px; z-index: 5000;
  width: 48px; height: 48px; border-radius: 50%; background: var(--rg-charcoal-3);
  border: 1px solid var(--rg-border-strong); color: var(--rg-white); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--rg-gradient-brand); color: var(--rg-paper); }