/* ═══════════════════════════════════════════════════════════════
   ALWANI GROUP — DESIGN SYSTEM
   Theme: Ultra-modern · Minimalist · Premium
   Palette: White / Black / Deep Blue accent
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  /* Grayscale (Light Theme) — warm cream paper, almost-black ink */
  --c-cream:        #f8f8f0;                 /* page background */
  --c-cream-soft:   #fcfcf6;                 /* raised surfaces */
  --c-white:        hsl(0, 0%, 100%);        /* pure white — text on dark only */
  --c-off-white:    hsl(60, 30%, 96%);
  --c-gray-100:     hsl(60, 12%, 92%);
  --c-gray-200:     hsl(60, 10%, 88%);
  --c-gray-300:     hsl(60, 9%, 82%);
  --c-gray-400:     hsl(60, 7%, 70%);
  --c-gray-500:     hsl(60, 6%, 52%);
  --c-gray-600:     hsl(60, 6%, 36%);
  --c-gray-700:     hsl(60, 6%, 22%);        /* body copy */
  --c-gray-800:     hsl(60, 7%, 14%);
  --c-gray-900:     hsl(60, 8%, 7%);         /* headings — almost black */
  --c-black:        hsl(60, 8%, 4%);

  /* Deep Blue accent */
  --c-blue:         hsl(220, 85%, 35%);
  --c-blue-light:   hsl(220, 85%, 45%);
  --c-blue-dark:    hsl(220, 85%, 25%);
  --c-blue-subtle:  hsla(220, 85%, 35%, 0.12);

  /* Functional */
  --c-success:      hsl(150, 50%, 45%);
  --c-error:        hsl(0, 55%, 55%);

  /* Typography */
  --ff-heading:     'Montserrat', sans-serif;
  --ff-body:        'Open Sans', sans-serif;

  --fs-xs:    clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
  --fs-sm:    clamp(0.8rem,  0.75rem + 0.2vw, 0.9rem);
  --fs-base:  clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --fs-md:    clamp(1.05rem, 1rem + 0.3vw,    1.2rem);
  --fs-lg:    clamp(1.4rem,  1.1rem + 1vw,    2rem);
  --fs-xl:    clamp(1.8rem,  1.4rem + 1.5vw,  2.8rem);
  --fs-2xl:   clamp(2.2rem,  1.6rem + 2.5vw,  3.8rem);
  --fs-hero:  clamp(2.6rem,  2rem + 3vw,      4.5rem);

  /* Spacing */
  --sp-2xs:  0.25rem;
  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   1.5rem;
  --sp-lg:   2.5rem;
  --sp-xl:   4rem;
  --sp-2xl:  6rem;
  --sp-3xl:  8rem;
  --sp-4xl:  10rem;

  /* Layout */
  --max-w:     1140px;
  --header-h:  72px;

  /* Radii */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;

  /* Shadows */
  --sh-sm:  0 1px 4px hsla(210, 15%, 10%, 0.08);
  --sh-md:  0 4px 16px hsla(210, 15%, 10%, 0.12);
  --sh-lg:  0 8px 40px hsla(210, 15%, 10%, 0.15);
  --sh-blue: 0 0 20px hsla(220, 85%, 35%, 0.2);

  /* Transitions */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-s:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-f:   180ms;
  --dur-m:   400ms;
  --dur-s:   700ms;
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL
   ═══════════════════════════════════════════════════════════════ */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-gray-700);
  background: var(--c-white);
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.section {
  padding: var(--sp-3xl) 0;
  position: relative;
}

::selection {
  background: var(--c-blue);
  color: var(--c-white);
}

.brand-color {
  color: var(--c-blue);
}

/* Utility: image placeholder */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  background: var(--c-gray-100);
  border: 1px dashed var(--c-gray-300);
  color: var(--c-gray-500);
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.img-placeholder-icon {
  font-size: 2rem;
  opacity: 0.4;
}

.img-placeholder-label {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION EYEBROW & HEADING (Reusable)
   ═══════════════════════════════════════════════════════════════ */
.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.section-eyebrow--left {
  justify-content: flex-start;
}

.eyebrow-text {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--c-blue);
  white-space: nowrap;
}

.eyebrow-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, var(--c-blue), transparent);
}

.section-eyebrow--left .eyebrow-line {
  background: linear-gradient(90deg, transparent, var(--c-blue));
}

.section-eyebrow--left .eyebrow-line:last-child {
  background: linear-gradient(90deg, var(--c-blue), transparent);
}

.section-heading {
  font-family: var(--ff-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-gray-900);
  text-align: center;
  line-height: 1.15;
  margin-bottom: var(--sp-xl);
  letter-spacing: -0.5px;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER — Glassmorphism
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 1000;
  transition: background var(--dur-m) var(--ease-s),
              box-shadow var(--dur-m) var(--ease-s);
}

.site-header.scrolled {
  background: hsla(60, 30%, 96%, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--sh-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo in header */
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  z-index: 1001;
}

.header-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--c-blue);
  border-radius: var(--r-xs);
  font-family: var(--ff-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--c-blue);
  transition: all var(--dur-m) var(--ease);
}

.header-logo:hover .header-logo-mark {
  background: var(--c-blue);
  color: var(--c-white);
}

.header-logo-text {
  font-family: var(--ff-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-gray-900);
  letter-spacing: 0.5px;
  transition: color var(--dur-m) var(--ease);
}

/* Nav links */
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

.nav-link {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--c-gray-600);
  padding: var(--sp-2xs) 0;
  position: relative;
  transition: color var(--dur-f) var(--ease-s);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-blue);
  transition: width var(--dur-m) var(--ease);
}

.nav-link:hover,
.nav-link.active {
  color: var(--c-gray-900);
}

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

/* Hamburger */
.menu-toggle {
  display: none;
  width: 28px;
  height: 20px;
  position: relative;
  z-index: 1001;
}

.hamburger-bar,
.hamburger-bar::before,
.hamburger-bar::after {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--c-gray-900);
  border-radius: 2px;
  transition: all var(--dur-m) var(--ease);
}

.hamburger-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-bar::before,
.hamburger-bar::after {
  content: '';
  position: absolute;
}

.hamburger-bar::before { top: -7px; }
.hamburger-bar::after  { top:  7px; }

.menu-toggle.open .hamburger-bar {
  background: transparent;
}
.menu-toggle.open .hamburger-bar::before {
  top: 0; transform: rotate(45deg);
}
.menu-toggle.open .hamburger-bar::after {
  top: 0; transform: rotate(-45deg);
}


/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-off-white);
}

/* Animated gradient background.
   Originally an opaque white gradient — that would sit on top of the border
   network canvas and blank it out across the whole hero. Rebuilt with
   transparent stops so it reads as a warm sheen drifting over the web
   rather than a lid on top of it. */
.hero-gradient-bg {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  /* Every stop is within ~2/255 of --c-cream (#f8f8f0 = hsl(60,33%,96%)), so
     the hero cannot read as a different colour from the sections below it.
     Anything darker than ~95% lightness shows up as a visible seam.

     The alphas are capped low for a second reason: a layer that is invisible
     against the background is NOT invisible against the border network drawn
     beneath it — it pulls the dark lines toward cream just as hard. At 0.5
     the hero showed the map at half the contrast it has elsewhere, which is
     exactly where it got noticed. Keep these peaks at ~0.25 or below. */
  background: linear-gradient(
    135deg,
    hsla(60, 33%, 96%, 0)    0%,
    hsla(55, 40%, 97%, 0.25) 20%,
    hsla(45, 45%, 96%, 0)    40%,
    hsla(48, 40%, 95%, 0.22) 60%,
    hsla(40, 35%, 96%, 0)    80%,
    hsla(60, 35%, 97%, 0.2)  100%
  );
  background-size: 400% 400%;
  animation: heroGradientShift 20s ease infinite;
  pointer-events: none;
}

@keyframes heroGradientShift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

/* Subtle noise texture overlay */
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  pointer-events: none;
}

/* Vignette */
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, hsla(55, 25%, 93%, 0.12) 100%);
  pointer-events: none;
}

/* Hero content — editorial, left-aligned.
   The block sits on the same vertical line as the header logo and every
   section below it (--max-w + the container's side padding), so the page
   reads down one column instead of drifting around a centre point.
   The empty right-hand side is deliberate: that is where the border
   network and its pulses get to be seen without competing with text. */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-md);
  text-align: left;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-md);
  opacity: 0;
  animation: heroFadeUp 0.9s var(--ease) 0.25s forwards;
}

.hero-eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--c-blue-light);
  flex: none;
}

.hero-eyebrow-text {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--c-blue-light);
}

/* Oversized but LIGHT. Big + heavy shouts; big + light carries.
   Only the emphasised words go up in weight, so they hold the meaning. */
.hero-title {
  font-family: var(--ff-heading);
  font-size: clamp(2.8rem, 1.5rem + 5.5vw, 6.5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -1.5px;         /* large type needs closing up, not opening out */
  color: var(--c-gray-900);
  max-width: 15ch;
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.9s var(--ease) 0.45s forwards;
}

.hero-title em {
  font-style: normal;
  font-weight: 600;
}

.hero-lede {
  margin-top: var(--sp-md);
  max-width: 42ch;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--c-gray-600);
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.9s var(--ease) 0.65s forwards;
}

/* Scroll cue — sits on the same left column as the headline */
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  padding: 0 var(--sp-md);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  opacity: 0;
  animation: heroFadeIn 1s var(--ease) 1.1s forwards;
}

.scroll-cue-text {
  font-family: var(--ff-heading);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--c-gray-500);
}

.scroll-cue-bar {
  width: 56px;
  height: 1px;
  background: var(--c-gray-200);
  position: relative;
  overflow: hidden;
}

.scroll-cue-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--c-blue);
  animation: scrollBarPulse 2.2s var(--ease-s) infinite;
}

@keyframes scrollBarPulse {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Hero keyframes */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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


/* ═══════════════════════════════════════════════════════════════
   PARTNERS LOGO GRID
   ═══════════════════════════════════════════════════════════════ */
.partners {
  padding: var(--sp-2xl) 0;
  border-top: 1px solid var(--c-gray-200);
  border-bottom: 1px solid var(--c-gray-200);
  background: var(--c-white);
}

.partners-label {
  text-align: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--c-gray-500);
  margin-bottom: var(--sp-lg);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-sm);
}

.partner-cell {
  aspect-ratio: 2.2 / 1;
}

.partner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-sm);
  background: var(--c-off-white);
  transition: all var(--dur-m) var(--ease);
}

.partner-placeholder span {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--c-gray-400);
  transition: color var(--dur-m) var(--ease);
}

.partner-placeholder:hover {
  border-color: var(--c-blue-light);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
}

.partner-placeholder:hover span {
  color: var(--c-gray-700);
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════ */
.about {
  background: var(--c-white);
}

.about-body {
  max-width: 720px;
  margin: 0 auto var(--sp-xl);
  text-align: center;
}

.about-body p {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--c-gray-700);
  margin-bottom: var(--sp-md);
}

.about-body p:last-child {
  margin-bottom: 0;
}

/* Stats row */
.about-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xl);
  padding: var(--sp-xl) 0 0;
  border-top: 1px solid var(--c-gray-200);
  max-width: 600px;
  margin: 0 auto;
}

.about-stat {
  text-align: center;
}

.about-stat-number {
  display: block;
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-gray-900);
  line-height: 1;
}

.about-stat-suffix {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-blue);
}

.about-stat-label {
  display: block;
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--c-gray-500);
  margin-top: var(--sp-xs);
}

.about-stat-divider {
  width: 1px;
  height: 48px;
  background: var(--c-gray-200);
}


/* ═══════════════════════════════════════════════════════════════
   CHAIRMAN
   ═══════════════════════════════════════════════════════════════ */
.chairman {
  background: var(--c-off-white);
  overflow: hidden;
}

.chairman::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gray-200), transparent);
}

.chairman-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}

/* Portrait */
.chairman-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.chairman-img {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}

.chairman-portrait-accent {
  position: absolute;
  top: var(--sp-md);
  left: var(--sp-md);
  right: calc(-1 * var(--sp-md));
  bottom: calc(-1 * var(--sp-md));
  border: 1px solid var(--c-blue);
  border-radius: var(--r-md);
  opacity: 0.2;
  pointer-events: none;
  transition: opacity var(--dur-m) var(--ease);
}

.chairman-portrait-frame:hover .chairman-portrait-accent {
  opacity: 0.4;
}

/* Message */
.chairman-message {
  padding: var(--sp-lg) 0;
}

.chairman-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-gray-900);
  margin-bottom: var(--sp-2xs);
}

.chairman-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--c-blue);
}

.chairman-divider {
  width: 48px;
  height: 2px;
  background: var(--c-blue);
  margin: var(--sp-lg) 0;
}

.chairman-quote {
  border-left: 2px solid var(--c-blue);
  padding-left: var(--sp-md);
}

.chairman-quote p {
  font-size: var(--fs-base);
  font-style: italic;
  line-height: 1.85;
  color: var(--c-gray-600);
  margin-bottom: var(--sp-md);
}

.chairman-quote p:last-child {
  margin-bottom: 0;
}

.chairman-signature {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

.signature-line {
  width: 32px;
  height: 1px;
  background: var(--c-gray-400);
}

.signature-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-gray-700);
  letter-spacing: 1px;
}


/* ═══════════════════════════════════════════════════════════════
   TEAM
   ═══════════════════════════════════════════════════════════════ */
.team {
  background: var(--c-white);
}

.team::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gray-200), transparent);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-md);
}

.team-card {
  text-align: center;
  cursor: default;
}

.team-card-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-sm);
  aspect-ratio: 3 / 4;
}

.team-img {
  border-radius: var(--r-md);
  transition: transform var(--dur-s) var(--ease);
}

.team-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, hsla(0,0%,0%,0.3) 100%);
  opacity: 0;
  transition: opacity var(--dur-m) var(--ease);
  border-radius: var(--r-md);
}

.team-card:hover .team-img {
  transform: scale(1.04);
}

.team-card:hover .team-card-overlay {
  opacity: 1;
}

.team-card-info {
  padding: var(--sp-xs) 0;
}

.team-card-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-gray-900);
  margin-bottom: var(--sp-2xs);
  transition: color var(--dur-f) var(--ease);
}

.team-card:hover .team-card-name {
  color: var(--c-blue);
}

.team-card-role {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  color: var(--c-gray-500);
  letter-spacing: 0.5px;
}


/* ═══════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════ */
.contact {
  background: var(--c-off-white);
}

.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gray-200), transparent);
}

.contact-form {
  max-width: 640px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}

.form-group {
  margin-bottom: var(--sp-md);
}

.form-group label {
  display: block;
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--c-gray-600);
  margin-bottom: var(--sp-xs);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--r-xs);
  color: var(--c-gray-900);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-f) var(--ease-s),
              box-shadow var(--dur-f) var(--ease-s);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--c-gray-400);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-blue-light);
  box-shadow: 0 0 0 3px var(--c-blue-subtle);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* Submit button — blue accent */
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: 1rem 2rem;
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--c-white);
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dark));
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--dur-m) var(--ease);
}

.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-blue-light), var(--c-blue));
  opacity: 0;
  transition: opacity var(--dur-m) var(--ease);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-blue);
}

.btn-submit:hover::before {
  opacity: 1;
}

.btn-submit-text,
.btn-submit-icon {
  position: relative;
  z-index: 1;
}

.btn-submit-icon {
  font-size: 1.1rem;
  transition: transform var(--dur-m) var(--ease);
}

.btn-submit:hover .btn-submit-icon {
  transform: translateX(4px);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--c-white);
  padding-top: var(--sp-xl);
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gray-200), transparent);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-lg);
}

/* Footer logo */
.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.footer-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--c-gray-300);
  border-radius: var(--r-xs);
  font-family: var(--ff-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--c-gray-500);
}

.footer-logo-text {
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-gray-800);
}

.footer-tagline {
  font-size: var(--fs-xs);
  color: var(--c-gray-500);
  margin-top: var(--sp-2xs);
}

/* Footer nav */
.footer-nav {
  display: flex;
  gap: var(--sp-lg);
}

.footer-nav a {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--c-gray-500);
  transition: color var(--dur-f) var(--ease-s);
}

.footer-nav a:hover {
  color: var(--c-blue);
}

/* Footer socials */
.footer-socials {
  display: flex;
  gap: var(--sp-xs);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-gray-300);
  color: var(--c-gray-500);
  transition: all var(--dur-m) var(--ease);
}

.social-icon svg {
  width: 16px;
  height: 16px;
}

.social-icon:hover {
  border-color: var(--c-blue-light);
  color: var(--c-blue);
  transform: translateY(-2px);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
}

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid var(--c-gray-200);
  padding: var(--sp-md) 0;
  text-align: center;
}

.footer-bottom p {
  font-size: var(--fs-xs);
  color: var(--c-gray-500);
  letter-spacing: 0.5px;
}


/* ═══════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

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

[data-reveal="section"] {
  transform: translateY(60px) scale(0.98);
  transition-duration: 1.5s;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tablet landscape ─── */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
  }

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

  .chairman-layout {
    gap: var(--sp-xl);
  }
}

/* ─── Tablet portrait ─── */
@media (max-width: 768px) {
  :root {
    --header-h: 60px;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    background: hsla(60, 30%, 96%, 0.96);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-m) var(--ease-s),
                visibility var(--dur-m) var(--ease-s);
  }

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

  .nav-list {
    flex-direction: column;
    gap: var(--sp-lg);
    text-align: center;
  }

  .nav-link {
    font-size: var(--fs-md);
    letter-spacing: 4px;
    color: var(--c-gray-900);
  }

  .section {
    padding: var(--sp-2xl) 0;
  }

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

  .chairman-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
    text-align: center;
  }

  .chairman-portrait-frame {
    max-width: 320px;
  }

  .chairman-portrait-accent {
    display: none;
  }

  .chairman-message .section-eyebrow--left {
    justify-content: center;
  }

  .chairman-name {
    text-align: center;
  }

  .chairman-title {
    text-align: center;
  }

  .chairman-quote {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--c-blue);
    padding-top: var(--sp-md);
    text-align: left;
  }

  .chairman-signature {
    justify-content: center;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    gap: var(--sp-lg);
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-md);
  }

  .footer-socials {
    justify-content: center;
  }
}

/* ─── Mobile ─── */
@media (max-width: 480px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm);
  }

  .about-stats {
    flex-direction: column;
    gap: var(--sp-md);
  }

  .about-stat-divider {
    width: 48px;
    height: 1px;
  }

  .hero-title {
    letter-spacing: -0.5px;       /* the negative tracking is only right at large sizes */
  }

  .hero-lede {
    font-size: var(--fs-base);
  }
}


/* ═══════════════════════════════════════════════════════════════
   INTRO OVERLAY — globe → logo → top bar
   ═══════════════════════════════════════════════════════════════ */
.ag-mark { width: 100%; height: 100%; display: block; }

.intro-overlay {
  position: fixed; inset: 0; z-index: 9999; background: #000;
  overflow: hidden; opacity: 1; transition: opacity 0.765s ease;
}
.intro-overlay.lift { opacity: 0; pointer-events: none; }

#intro-globe-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  transform-origin: 50% 50%;
  transition: transform 0.978s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.935s ease;
}
.intro-overlay.absorb #intro-globe-canvas { transform: scale(0.06); opacity: 0; }

.intro-labels { position: absolute; inset: 0; pointer-events: none; }
.intro-overlay.absorb .intro-labels { opacity: 0; transition: opacity 0.425s ease; }

.intro-logo-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.intro-logo-inner {
  width: clamp(150px, 24vw, 260px); color: #fff;
  opacity: 0; transform: scale(0.4);
  transition: transform 0.808s cubic-bezier(0.65, 0, 0.2, 1), opacity 0.425s ease;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.25));
}
.intro-overlay.absorb .intro-logo-inner { opacity: 1; transform: scale(1); }
.intro-logo-inner .ag-logo-full {
  width: 100%; height: auto; display: block;
  filter: invert(1);              /* original black logo → white over the dark intro */
}

.intro-skip {
  position: absolute; right: 24px; bottom: 20px; z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font: 600 13px/1 var(--ff-body, sans-serif); letter-spacing: 1px;
  padding: 8px 15px; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 0.3s ease, color 0.2s, border-color 0.2s;
}
.intro-skip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.intro-skip.hide { opacity: 0; pointer-events: none; }

/* country name pills over the globe */
.clabel {
  position: absolute; transform: translate(-50%, -100%);
  font: 600 13px/1 var(--ff-body, sans-serif); white-space: nowrap;
  color: #fff6d8; text-shadow: 0 0 6px rgba(255, 180, 60, 0.9), 0 0 2px #000;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(40, 26, 0, 0.35); border: 1px solid rgba(255, 200, 90, 0.45);
  opacity: 0; transition: opacity 0.35s ease; will-change: transform, opacity;
}

/* The hero's entrance keyframes are timed from page load, so during the ~7.4s
   intro they would run and finish behind the overlay — the hero would then be
   handed over already fully formed, with its staggered entrance spent unseen.
   (Same failure the section reveals had; see js/section-reveal.js.)
   `intro-active` is on <html> before first paint, so these start paused at 0%
   and resume — delays and all — the moment the intro hands over. */
html.intro-active .hero-eyebrow,
html.intro-active .hero-title,
html.intro-active .hero-lede,
html.intro-active .scroll-cue { animation-play-state: paused; }

/* page lock + reveal */
html.intro-active, html.intro-active body { overflow: hidden !important; height: 100%; }
#main-content, #site-footer { transition: opacity 0.765s ease 0.128s; }
html.intro-active #main-content,
html.intro-active #site-footer { opacity: 0; }
html.intro-active .site-header { opacity: 0; pointer-events: none; }

/* ── Logo mark (SVG triangle) in header + footer ── */
.header-logo-mark {
  width: 34px; height: 34px; border: none; border-radius: 0;
  padding: 0; background: none; color: var(--c-gray-900);
}
.header-logo:hover .header-logo-mark { background: none; color: var(--c-blue); }
.header-logo-mark img, .footer-logo-mark img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.header-logo-text { letter-spacing: 1.5px; font-weight: 700; }
.footer-logo-mark {
  width: 34px; height: 34px; border: none; border-radius: 0;
  padding: 0; background: none; color: currentColor;
  display: inline-flex; align-items: center; justify-content: center;
}
.footer-logo-text { letter-spacing: 1.5px; }


/* ═══════════════════════════════════════════════════════════════
   ELEGANT HOVER LAYER
   Refined micro-interactions layered on top of the base styles.
   All GPU-friendly (transform/opacity) and reduced-motion aware.
   ═══════════════════════════════════════════════════════════════ */

/* ── Nav links: underline sweeps out from the centre + soft lift ── */
.nav-link {
  transition: color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.nav-link::after {
  left: 50%;
  transform: translateX(-50%);
  transition: width var(--dur-m) var(--ease);
}
.nav-link:hover { transform: translateY(-2px); }

/* ── Header logo: mark breathes, wordmark opens up ── */
.header-logo-mark {
  transition: transform var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
}
.header-logo:hover .header-logo-mark { transform: scale(1.1) rotate(-4deg); }
.header-logo-text { transition: letter-spacing var(--dur-m) var(--ease), color var(--dur-m) var(--ease); }
.header-logo:hover .header-logo-text { letter-spacing: 2.4px; }

/* ── Partner cells: lift + light sweeping across the surface ── */
.partner-cell { transition: transform var(--dur-m) var(--ease); }
.partner-cell:hover { transform: translateY(-4px); }
.partner-placeholder {
  position: relative; overflow: hidden;
  transition: border-color var(--dur-m) var(--ease), background var(--dur-m) var(--ease),
              box-shadow var(--dur-m) var(--ease);
}
.partner-placeholder::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, hsla(0,0%,100%,0.55), transparent);
  transform: skewX(-18deg);
}
.partner-placeholder:hover::after { left: 130%; transition: left 0.85s var(--ease); }
.partner-placeholder:hover { box-shadow: var(--sh-md); }

/* ── Team cards: lift, deeper shadow, name underline grows ── */
/* keep the reveal's opacity transition — only speed up transform for hover */
.team-card {
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--dur-s) var(--ease);
}
.team-card:hover { transform: translateY(-6px); }
.team-card-photo {
  transition: box-shadow var(--dur-s) var(--ease);
  border-radius: var(--r-md);
}
.team-card:hover .team-card-photo { box-shadow: var(--sh-lg); }
.team-img { transition: transform var(--dur-s) var(--ease); }
.team-card:hover .team-img { transform: scale(1.07); }
.team-card-name { position: relative; display: inline-block; }
.team-card-name::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1.5px; background: var(--c-blue);
  transition: width var(--dur-m) var(--ease);
}
.team-card:hover .team-card-name::after { width: 100%; }
.team-card-role {
  transition: transform var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
}
.team-card:hover .team-card-role { transform: translateX(3px); color: var(--c-gray-700); }

/* ── Chairman portrait: gentle zoom inside its frame ── */
.chairman-portrait-frame { overflow: hidden; border-radius: var(--r-md); }
.chairman-img { transition: transform var(--dur-s) var(--ease); }
.chairman-portrait-frame:hover .chairman-img { transform: scale(1.05); }

/* ── Stats: number lifts and picks up the brand colour ── */
.about-stat { transition: transform var(--dur-m) var(--ease); }
.about-stat:hover { transform: translateY(-3px); }
.about-stat-number, .about-stat-suffix {
  transition: color var(--dur-m) var(--ease);
}
.about-stat:hover .about-stat-number,
.about-stat:hover .about-stat-suffix { color: var(--c-blue); }

/* ── Submit button: shine sweep on top of the gradient ── */
.btn-submit { position: relative; overflow: hidden; }
.btn-submit::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, hsla(0,0%,100%,0.35), transparent);
  transform: skewX(-18deg);
}
.btn-submit:hover::after { left: 140%; transition: left 0.8s var(--ease); }

/* ── Social icons: brand colour fills out from the centre ── */
.social-icon { position: relative; overflow: hidden; }
.social-icon::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--c-blue); transform: scale(0); opacity: 0;
  transition: transform var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease);
}
.social-icon svg { position: relative; z-index: 1; transition: color var(--dur-m) var(--ease); }
.social-icon:hover::before { transform: scale(1); opacity: 1; }
.social-icon:hover { color: var(--c-white); transform: translateY(-3px); }

/* ── Footer nav + logo ── */
.footer-nav a { position: relative; }
.footer-nav a::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  width: 0; height: 1.5px; background: var(--c-blue);
  transition: width var(--dur-m) var(--ease);
}
.footer-nav a:hover::after { width: 100%; }
.footer-logo-mark { transition: transform var(--dur-m) var(--ease); }
.footer-logo:hover .footer-logo-mark { transform: scale(1.1) rotate(-4deg); }

/* ── Keyboard focus gets the same treatment as hover ── */
.nav-link:focus-visible { transform: translateY(-2px); }
.nav-link:focus-visible::after,
.footer-nav a:focus-visible::after { width: 100%; }
.social-icon:focus-visible::before { transform: scale(1); opacity: 1; }
.social-icon:focus-visible { color: var(--c-white); }

/* ── Respect reduced-motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  .nav-link:hover, .partner-cell:hover, .team-card:hover,
  .about-stat:hover, .social-icon:hover, .btn-submit:hover { transform: none; }
  .header-logo:hover .header-logo-mark,
  .footer-logo:hover .footer-logo-mark { transform: none; }
  .team-card:hover .team-img,
  .chairman-portrait-frame:hover .chairman-img { transform: none; }
  .partner-placeholder:hover::after, .btn-submit:hover::after { transition: none; left: -120%; }
}


/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE BORDER NETWORK
   One fixed canvas behind the whole page. Section backgrounds go
   transparent so the single continuous web reads across sections.
   ═══════════════════════════════════════════════════════════════ */
body { background: var(--c-cream); }

#site-network {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* let the network show through every section */
.hero,
.partners,
.about,
.chairman,
.team,
.contact,
.site-footer { background: transparent; }

/* content rides above the network */
#main-content,
#site-footer { position: relative; z-index: 1; }
.hero-content { position: relative; z-index: 1; }
.scroll-cue { z-index: 1; }

/* remove the template's dividers between sections — the border network
   should read as one continuous surface, uninterrupted */
.partners { border-top: none; border-bottom: none; }
.chairman::before,
.team::before,
.contact::before,
.site-footer::before { display: none; }