/* ════════════════════════════════════════════════════════════════════════
   IMEA VC — Premium Refinement Layer
   ────────────────────────────────────────────────────────────────────────
   A single, additive overrides stylesheet that elevates the existing
   design toward an institutional, Silicon Valley / American VC feel.
   Loaded AFTER Tailwind so cascade naturally wins.

   Reversible: delete this file (or remove the <link> from each template)
   to fully restore the previous look.

   Brand identity, colors, fonts, structure, and section order are
   intentionally untouched. Refinements only:
     - typographic micro-polish (letter-spacing, weight, line-height caps)
     - calmer motion (slower, longer, more restrained easings)
     - softer card lift / institutional shadow style
     - editorial line-length discipline
     - reduced glow & gimmicky accents
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1. RENDERING & TEXT QUALITY ─────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Material symbols: a touch lighter weight reads more editorial */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}


/* ── 2. DISPLAY TYPOGRAPHY (Newsreader) ──────────────────────────────── */
/* Tighter optical tracking at display sizes — Bessemer/Sequoia rigor.
   Newsreader at 72px+ needs ~-0.025em to lose the airy look. */
h1[class*="Newsreader"],
h1.font-\[\'Newsreader\'\] {
  letter-spacing: -0.028em;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  text-wrap: balance;
}
h2[class*="Newsreader"],
h2.font-\[\'Newsreader\'\] {
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h3[class*="Newsreader"],
h3.font-\[\'Newsreader\'\] {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* The "italic font-light" idiom appears across pages. The light italic at
   huge sizes can read ornamental. Bump weight a hair for institutional
   confidence without changing the font or style. */
h1 .italic, h2 .italic, h3 .italic { font-weight: 350; }


/* ── 3. UPPERCASE EYEBROWS / LABELS ─────────────────────────────────── */
/* Premium VC label conventions: tighter tracking on Work Sans 9-11px,
   slightly heavier weight. Avoid the over-airy 0.3em that screams
   "design template". */
.font-\[\'Work_Sans\'\][class*="tracking-["],
.font-label-caps {
  font-feature-settings: "kern" 1, "cpsp" 1;
}


/* ── 4. BODY COPY — EDITORIAL LINE LENGTH ────────────────────────────── */
/* Long paragraphs of Manrope without a max-width feel "agency blog". Cap
   intrinsic line length so copy reads like a memo, not a landing page. */
p.font-\[\'Manrope\'\],
.font-body-md,
.font-body-lg {
  max-width: 68ch;
}
/* Re-enable wide flow inside grids/cards where it's intentional */
.region-card p, .value-card p, .sector-card p, .partner-card p,
.team-row p, .insight-row p, footer p,
[class*="grid-cols-"] > * > p,
section [class*="md:col-span-"] p { max-width: none; }


/* ── 5. CALMER MOTION ────────────────────────────────────────────────── */
/* Top-tier VC sites move slowly and quietly. Override the most attention-
   seeking animations to feel calm & expensive. */

/* Hero background zoom: gentler scale, longer cycle */
@keyframes subtle-zoom { from { transform: scale(1.02); } to { transform: scale(1.06); } }
.animate-bg-zoom { animation: subtle-zoom 32s ease-in-out infinite alternate !important; }

/* Marquee ticker: slow it down so it reads as confident, not nervous */
.marquee-track { animation-duration: 80s !important; }

/* Animated CTA gradient: from "live shimmer" to "barely moving" */
@keyframes grad-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.cta-grad { animation-duration: 45s !important; background-size: 250% 250% !important; }

/* Scroll reveal: slightly longer, even smoother easing.
   Replaces 0.9s with 1.1s using the same Apple-style easing curve. */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1),
              transform 1.1s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Reveal travel distance: a hair smaller = less "look at me" */
.reveal       { transform: translateY(28px); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-scale { transform: scale(0.97); }
.reveal.in, .reveal-left.in, .reveal-right.in, .reveal-scale.in { transform: none; }


/* ── 6. CARD HOVER — INSTITUTIONAL, NOT FLASHY ──────────────────────── */
/* Big -12px lifts feel SaaS-y. American VC firms use restrained 2-6px
   lifts with desaturated, layered shadows. */
.sector-card { transition: transform 0.6s cubic-bezier(0.22,1,0.36,1),
                           box-shadow 0.6s ease,
                           border-color 0.4s ease !important; }
.sector-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 1px 2px rgba(0,27,61,0.04),
              0 12px 28px -8px rgba(0,27,61,0.10),
              0 0 0 1px rgba(197,160,89,0.18) !important;
  border-color: rgba(197,160,89,0.25) !important;
}

.region-card { transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
                           box-shadow 0.55s ease !important; }
.region-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.35) !important;
}

.value-card { transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
                          box-shadow 0.55s ease,
                          border-color 0.4s ease !important; }
.value-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -12px rgba(0,27,61,0.10) !important;
}

/* Team card grayscale baseline & hover */
.team-card .t-img, .partner-card .pc-img {
  filter: grayscale(60%) contrast(1.02) !important;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
              filter 0.6s ease !important;
}
.team-card:hover .t-img, .partner-card:hover .pc-img {
  transform: scale(1.03) !important;
  filter: grayscale(10%) contrast(1.04) !important;
}


/* ── 7. CTA BUTTONS — REMOVE THE GLOW ───────────────────────────────── */
/* The gold-glow shadow on hover (shadow-[0_0_40px_rgba(...)]) is the
   single most "startup-y" element. Replace with a confident, gravity-
   based drop shadow that reads as quality, not novelty. */
a.bg-\[\#C5A059\]:hover, button.bg-\[\#C5A059\]:hover {
  box-shadow: 0 12px 28px -10px rgba(197,160,89,0.45),
              0 4px 10px -4px rgba(0,27,61,0.20) !important;
  transform: translateY(-1px);
}
a.bg-\[\#C5A059\], button.bg-\[\#C5A059\] {
  transition: background-color 0.35s ease,
              color 0.35s ease,
              box-shadow 0.45s ease,
              transform 0.35s ease !important;
  letter-spacing: 0.2em;
}

/* Ghost / outline CTAs — calmer hover */
a.border.border-white\/20:hover {
  transform: translateY(-1px);
  transition: all 0.4s ease;
}


/* ── 8. NAV — TIGHTER INSTITUTIONAL PRESENCE ────────────────────────── */
/* Sequoia-style: thinner top border, subtler hover, no jiggle. */
header nav a.font-label-caps,
header nav a[class*="font-label-caps"] {
  letter-spacing: 0.22em;
  font-weight: 600;
  transition: color 0.35s ease, border-color 0.35s ease !important;
}
header { border-bottom-width: 1px; }


/* ── 9. SCROLL PROGRESS BAR — SOLID, THIN, RESTRAINED ───────────────── */
/* The gold→cream gradient progress bar reads festive. Top-tier sites use
   a single solid hairline. */
#read-progress {
  height: 1.5px !important;
  background: #C5A059 !important;
  opacity: 0.85;
}


/* ── 10. SECTOR-CARD TAGS (defined in HTML w/o styles) ──────────────── */
/* The HTML uses bare <span class="tag"> which has no styles. Give them
   the discreet pill treatment top firms use for sub-categorization. */
.tag {
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid rgba(0,27,61,0.10);
  color: #44474e;
  background: rgba(0,27,61,0.025);
  transition: all 0.25s ease;
}
.tag:hover {
  border-color: rgba(197,160,89,0.35);
  color: #001B3D;
  background: rgba(197,160,89,0.06);
}
.sector-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #001B3D;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0,27,61,0.25);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.sector-card:hover .sector-link {
  color: #C5A059;
  border-bottom-color: rgba(197,160,89,0.6);
}


/* ── 11. STAT COUNTERS — INSTITUTIONAL NUMERICS ─────────────────────── */
/* font-light on the big gold stat numbers can read fragile. Lift to
   regular weight, enable tabular figures, tighten leading. */
.counter {
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}


/* ── 12. HERO CONCENTRIC RINGS — DIAL DOWN ──────────────────────────── */
/* The spinning rings + "IMEA Network" + material "hub" icon in the
   hero is the single most "regional template" element. Don't remove
   (would alter layout). Just make them quieter and slower. */
.animate-\[spin_50s_linear_infinite\],
.animate-\[spin_70s_linear_infinite_reverse\],
.animate-\[spin_35s_linear_infinite\],
.animate-\[spin_20s_linear_infinite_reverse\] {
  animation-duration: 120s !important;
  opacity: 0.55;
}


/* ── 13. INSIGHTS ROW — TIGHTER EDITORIAL FEEL ──────────────────────── */
.insight-row {
  transition: background 0.4s ease, padding-left 0.4s ease !important;
}
.insight-row:hover {
  background: rgba(0,27,61,0.025) !important;
  padding-left: 16px !important;
}


/* ── 14. FOOTER — INSTITUTIONAL DISCLOSURE TONE ─────────────────────── */
footer {
  /* tighter, more disciplined column spacing already in markup */
}
footer h4 {
  letter-spacing: 0.24em !important;
  font-weight: 600;
}
footer a {
  letter-spacing: 0.005em;
  transition: color 0.35s ease !important;
}
/* Make the legal/disclosure line feel like institutional fine print */
footer p[class*="text-white\\/15"],
footer .border-t p:last-child {
  font-feature-settings: "kern" 1;
  line-height: 1.6;
}


/* ── 15. SELECTION COLOR — UNIFY ACROSS PAGES ───────────────────────── */
::selection { background: #001B3D; color: #fff; }
::-moz-selection { background: #001B3D; color: #fff; }


/* ── 16. FORM CONTROLS (CONTACT PAGE) ───────────────────────────────── */
.field-input {
  letter-spacing: 0.005em;
}
.field-input:focus {
  border-bottom-width: 1.5px !important;
}
.inquiry-pill label {
  transition: all 0.3s ease !important;
}


/* ── 17. SCROLL CUE — CALM, NOT BOUNCY ──────────────────────────────── */
/* The animate-bounce "Scroll" cue reads mobile-app. Make it a quiet
   breathing fade so it suggests rather than nags. */
@keyframes vc-breathe { 0%,100% { opacity: 0.45; } 50% { opacity: 0.85; } }
section .animate-bounce {
  animation: vc-breathe 3.6s ease-in-out infinite !important;
}


/* ── 18. IMAGE TREATMENTS — EDITORIAL DESATURATION ──────────────────── */
/* Subtle photographic treatment: a touch desaturated, a touch more
   contrast — the classic American magazine/finance look. */
img[class*="grayscale-[25%]"] { filter: grayscale(20%) contrast(1.04) !important; }
img[class*="grayscale-[20%]"] { filter: grayscale(15%) contrast(1.04) !important; }


/* ── 19. NAVBAR ON SCROLL — SOFTER BLUR ─────────────────────────────── */
header.navbar-blur,
header[style*="backdrop-filter"] {
  border-bottom-color: rgba(197,160,89,0.18) !important;
}


/* ── 20. RESPONSIVE GUARDRAILS ──────────────────────────────────────── */
/* Keep the giant hero from cracking on small viewports — premium VC sites
   never have headlines that overflow. */
@media (max-width: 480px) {
  h1[class*="text-[108px]"], h1[class*="text-[96px]"], h1[class*="text-[88px]"] {
    font-size: clamp(44px, 11vw, 64px) !important;
    line-height: 0.95 !important;
  }
  h2[class*="text-[72px]"], h2[class*="text-[60px]"], h2[class*="text-[52px]"] {
    font-size: clamp(32px, 8.5vw, 44px) !important;
    line-height: 1.05 !important;
  }
}

/* Honor reduced-motion accessibility preference — institutional sites do this */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}