/* ============================================================
   AERgO INTERNATIONAL — Colors, Type & Tokens
   Forked from AERgO Design System (May 2023 brand book + system notes)
   ============================================================ */

@font-face {
  font-family: 'Google Sans Flex'; src: url('../fonts/GoogleSansFlex_24pt-Light.ttf') format('truetype'); font-weight: 300; font-display: swap;
}
@font-face { font-family: 'Google Sans Flex'; src: url('../fonts/GoogleSansFlex_24pt-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Google Sans Flex'; src: url('../fonts/GoogleSansFlex_24pt-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Google Sans Flex'; src: url('../fonts/GoogleSansFlex_24pt-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Google Sans Flex'; src: url('../fonts/GoogleSansFlex_24pt-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Google Sans Flex Display'; src: url('../fonts/GoogleSansFlex_72pt-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --runway: #314E67;
  --sky:    #37AEE4;
  --white:  #FFFFFF;
  --ink:    #0E1A24;            /* deeper than Runway, for true-black moments */

  --bg:            #FFFFFF;
  --surface:       #FFFFFF;
  --surface-alt-runway: #E8EEF3;
  --surface-alt-sky:    #E3F5FC;

  --fg:        #314E67;
  --fg-muted:  rgba(49, 78, 103, 0.78);
  --fg-subtle: rgba(49, 78, 103, 0.52);
  --fg-on-dark:        #FFFFFF;
  --fg-on-dark-muted:  rgba(255,255,255,0.72);

  --border-hairline:   rgba(49, 78, 103, 0.15);
  --border-input:      rgba(49, 78, 103, 0.25);
  --border-strong:     #314E67;
  --border-on-dark:    rgba(255,255,255,0.18);

  --sub-royal:   #8871B3;
  --sub-bronze:  #B97054;
  --sub-frost:   #91D3CE;
  --sub-river:   #00BABC;
  --sub-moss:    #657008;
  --sub-clover:  #92C83E;

  --runway-hover: #3D5F7A;
  --sky-hover:    #2A9DD0;
  --overlay-modal: rgba(49, 78, 103, 0.45);
  --frost-nav:    rgba(255, 255, 255, 0.80);

  --font-sans:    'Google Sans Flex', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-display: 'Google Sans Flex Display', 'Google Sans Flex', Arial, sans-serif;
  --font-fallback: Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-heavy:   900;

  --fs-hero:      40px;
  --fs-h1:        32px;
  --fs-h2:        28px;
  --fs-h3:        20px;
  --fs-body:      16px;
  --fs-ui:        14px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;

  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-normal:  1.50;
  --lh-loose:   1.70;
  --ls-eyebrow: 0.20em;
  --ls-button:  0.02em;

  --sp-1:  4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
  --sp-5:  32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;

  --r-0: 0px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;

  --container-max: 1400px;
  --gutter: 32px;

  --t-fast: 120ms cubic-bezier(.2,.6,.2,1);
  --t-base: 200ms cubic-bezier(.2,.6,.2,1);
  --t-slow: 320ms cubic-bezier(.2,.6,.2,1);
  /* Scroll reveal — longer ease-out for cinematic content entrance */
  --t-reveal: 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-reveal-stagger: 90ms; /* multiply by data-reveal-i attribute */
}

/* Gutter scales down on smaller screens */
@media (max-width: 768px) { :root { --gutter: 24px; } }
@media (max-width: 480px) { :root { --gutter: 20px; } }

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

::selection { background: var(--sky); color: #fff; }

/* ============================================================
   Typographic primitives
   ============================================================ */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow--on-dark { color: rgba(255,255,255,0.78); }
.eyebrow--sky { color: var(--sky); }

.tagline {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.display {
  font-family: var(--font-sans);
  font-weight: var(--w-heavy);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-button);
  padding: 12px 22px;
  min-height: 46px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary    { background: var(--runway); color: #fff; }
.btn--primary:hover { background: var(--runway-hover); }
.btn--secondary  { background: var(--sky); color: #fff; }
.btn--secondary:hover { background: var(--sky-hover); }
.btn--outline    { background: transparent; color: var(--runway); border-color: var(--runway); }
.btn--outline:hover { background: var(--surface-alt-runway); }
.btn--outline-light    { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn--outline-light:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.85); }
.btn--ghost      { background: transparent; color: var(--runway); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-alt-runway); }
.btn--lg { min-height: 54px; padding: 14px 26px; font-size: 15px; }

/* Nav item */
.nav-item {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: var(--w-bold);
  padding: 4px 18px;
  min-height: 32px;
  border-radius: var(--r-sm);
  transition: background-color var(--t-base);
}

/* Inputs */
.input {
  width: 100%;
  background: var(--white);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--t-base);
  outline: none;
}
.input::placeholder { color: var(--fg-subtle); }
.input:focus { border-color: var(--sky); }
.input--dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.input--dark::placeholder { color: rgba(255,255,255,0.45); }
.input--dark:focus { border-color: var(--sky); background: rgba(255,255,255,0.06); }
.input--error { border-color: #ff8a80 !important; }
.input--error:focus { border-color: #ff8a80 !important; }

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--viewport { min-height: 100vh; display: flex; align-items: center; }

/* Page surfaces */
.surface-runway { background: var(--runway); color: #fff; }
.surface-ink    { background: var(--ink);    color: #fff; }
.surface-light  { background: var(--surface-alt-runway); }

/* Hairline divider */
.hr {
  height: 1px; width: 100%;
  background: var(--border-hairline);
  border: 0;
}
.hr--on-dark { background: rgba(255,255,255,0.14); }

/* ============================================================
   Hover for clickable cards
   ============================================================ */
.tile { transition: transform var(--t-base); }
.tile:hover .tile__img { transform: scale(1.03); }
.tile__imgwrap { overflow: hidden; }
.tile__img { transition: transform 800ms cubic-bezier(.2,.6,.2,1); width: 100%; height: 100%; object-fit: cover; }

/* Focus ring for accessibility (subtle) */
a:focus-visible, button:focus-visible, .input:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}