/* Site-wide typography, ambient background and CTA foundation.
   Navigation and footer styling live in their canonical component bundles. */

/* ---- Typography foundation: IBM Plex Sans everywhere --font-body is used --- */
:root {
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Ambient background: the homepage's shared body-level color drift ----- *
   Reuses the homepage's own --proto-home-surface glow + protoHomeSceneColor
   cycle values verbatim (own @keyframes name to avoid any cross-file
   redefinition ambiguity). Explicitly excludes .proto-home — the home page
   keeps driving its own copy of this animation from home.css unchanged.
   Sits behind content only (body background, z-index:auto, non-interactive),
   respects prefers-reduced-motion, and does not touch layout. */
body:not(.proto-home) {
  background-color: #FBFAF6;
  /* Approved direction: real brand teal/orange (not tan, not near-white) at 30% opacity over
     white, animated via background-position so the band travels bottom-left to top-right —
     kept in sync with home.css's --proto-home-surface/protoHomeSceneColor. */
  background-image: linear-gradient(35deg, #FBFAF6 0%, #F4FAF9 44%, #EAF7F7 100%);
  background-size: 220% 220%;
  background-position: 15% 85%;
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.proto-home) {
    animation: fcs-ambient-shift 7s ease-in-out infinite alternate;
  }
}
@keyframes fcs-ambient-shift {
  0% { background-position: 15% 85%; }
  100% { background-position: 85% 15%; }
}

/* ---- Canonical surface tokens: de-beige ------------------------------------
   --surface-paper/--surface-sand/--surface-proof and --text-inverse were warm tan/cream
   (#f7f0e5/#efe4d5/#e7d7c2), used across every bundle for .light-section/.sand-section,
   proof badges and "white" text on dark surfaces. Redefining them here (loads last on every
   page) flips every one of those to a neutral, non-beige tone without editing the dozens of
   duplicated rule blocks that reference them. Lightness/contrast preserved, hue only changed. */
:root {
  --surface-paper: #FBFAF6;
  --surface-sand: #F4FAF9;
  --surface-proof: #EAF7F7;
  --text-inverse: #FBFAF6;
  /* Same de-beige pass, separate token namespace used only by the reach-family bundles
     (reach-hub/reach-location/reach-shillong.css) for .rex-section--paper/--sand.
     --reach-dark/--reach-navy (the teal-navy fills) are handled below via the class
     override instead, since .rex-section--dark/--navy set background directly, not
     through a token that other rules also share. */
  --reach-paper: #FBFAF6;
  --reach-sand: #F4FAF9;
}

/* ---- Dark/teal section fills removed, per explicit approval to make section surfaces
   temporarily transparent and fix text color if needed for readability. Lets the (now neutral)
   ambient background show through instead of the dark navy-teal gradient. ---- */
body .dark-section,
body.sitewide-sync .dark-section,
body:not(.sitewide-sync) .dark-section {
  background: transparent;
  color: var(--text-primary);
}

/* Same treatment for the reach-family bundles' own section classes (reach-hub/reach-location/
   reach-shillong.css), which use .rex-section--dark/--navy instead of .dark-section — found on
   coaching-locations.html and similar pages as flat #1d1e20 fills with white text. */
body .rex-section--dark,
body .rex-section--navy,
body.sitewide-sync .rex-section--dark,
body.sitewide-sync .rex-section--navy,
body:not(.sitewide-sync) .rex-section--dark,
body:not(.sitewide-sync) .rex-section--navy {
  background: transparent;
  color: var(--reach-ink, var(--text-primary));
}
/* The section lead paragraph used --text-inverse-muted (a light blue-grey meant for the old
   dark navy fill) — now unreadable on the transparent/light background. Card copy inside these
   sections keeps its own dark card background, so it's untouched by this. */
body .rex-section--dark .rex-section-head > p:last-child,
body .rex-section--navy .rex-section-head > p:last-child,
body.sitewide-sync .rex-section--dark .rex-section-head > p:last-child,
body.sitewide-sync .rex-section--navy .rex-section-head > p:last-child,
body:not(.sitewide-sync) .rex-section--dark .rex-section-head > p:last-child,
body:not(.sitewide-sync) .rex-section--navy .rex-section-head > p:last-child {
  color: var(--text-secondary);
}

/* ---- Final CTA sections: match the homepage's own .proto-contact treatment exactly,
   same on every page and every breakpoint. --------------------------------------------
   Superseded twice: v1 made these transparent (let the animated ambient show through,
   colors varied by scroll/animation phase); v2 matched the dark navbar color. Current,
   direct instruction: use the exact same CTA — colors, sizes, buttons — as the homepage's
   own final CTA screenshot, pulled from live computed styles rather than guessed:
   scene bg rgb(247,246,242), heading rgb(32,39,45)/IBM Plex Sans/600, sub rgba(32,39,45,.68),
   the shared teal primary and restrained light secondary control treatment. Covers .rex-cta
   (incl. .reach-explore-page .rex-cta from
   explore.css, used by gallery.html/about.html), .cta-strip/section.page-cta/.reach-cta,
   .contact-quick-cta. .insight-final-cta excluded — Insights doesn't load this file.
   Button selectors cover every variant name used across bundles for the same two roles:
   .button-primary/.primary (GET QUOTE) and .button-ghost/.secondary (WHATSAPP US). */
body :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta, .contact-quick-cta),
body.sitewide-sync :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta),
body:not(.sitewide-sync) :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta),
.reach-explore-page .rex-cta {
  background: #fbfaf6;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  color: rgb(32, 39, 45);
}
body :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta, .contact-quick-cta) :is(h2, h3, strong),
body.sitewide-sync :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(h2, h3, strong),
body:not(.sitewide-sync) :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(h2, h3, strong),
.reach-explore-page .rex-cta h2 {
  /* !important stays necessary: section-system.css's sitewide `html body h2 {...!important}`
     rule would otherwise still win on pages that load it (Gallery, About, explore.css-family
     specialization pages), same issue as before, just with different target values now. */
  color: rgb(32, 39, 45) !important;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: clamp(42px, 3.7vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  margin-bottom: 0;
}
body :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta, .contact-quick-cta) :is(p, small),
body.sitewide-sync :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(p, small),
body:not(.sitewide-sync) :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(p, small),
.reach-explore-page .rex-cta p {
  color: rgba(32, 39, 45, .68);
  font-size: clamp(18px, 1.25vw, 20px);
  margin-top: 16px;
}
/* Vertical padding was 24-36px across the different bundles — cramped once the heading grew.
   Brought up to the homepage's own CTA rhythm (--site-scene-pad is clamp(56px,6vh,76px)). */
body :is(.rex-cta-grid, .cta-grid, .contact-quick-cta-inner),
body.sitewide-sync :is(.rex-cta-grid, .cta-grid, .contact-quick-cta-inner),
body:not(.sitewide-sync) :is(.rex-cta-grid, .cta-grid, .contact-quick-cta-inner) {
  padding-top: 64px;
  padding-bottom: 64px;
}
/* GET QUOTE and WHATSAPP US inside these CTAs — one consistent color/size sitewide,
   matching the homepage's .proto-btn-dark/.proto-btn-light exactly, regardless of which of
   the several button class names (.button-primary/.primary, .button-ghost/.secondary) the
   page's own bundle happens to use. */
body :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta, .contact-quick-cta) :is(.button-primary, .primary),
body.sitewide-sync :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(.button-primary, .primary),
body:not(.sitewide-sync) :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(.button-primary, .primary),
.reach-explore-page .rex-cta .button-primary {
  background: linear-gradient(180deg, #0cb2c2 0%, #06a1b1 54%, #078e9d 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 7px 18px rgba(6, 161, 177, .20) !important;
}
body :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta, .contact-quick-cta) :is(.button-ghost, .secondary),
body.sitewide-sync :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(.button-ghost, .secondary),
body:not(.sitewide-sync) :is(.rex-cta, .cta-strip, section.page-cta, .reach-cta) :is(.button-ghost, .secondary),
.reach-explore-page .rex-cta .button-ghost {
  background: rgba(255, 255, 255, .68) !important;
  color: #078e9d !important;
  border: 1px solid rgba(6, 161, 177, .55) !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
/* Layout: these sections were a two-column grid (text left, buttons right —
   grid-template-columns:minmax(0,1fr) auto) while the homepage's own CTA is a single stacked
   column (heading, subtext, then a button row below). Colors/type matched already, but the
   structure didn't, which is what actually read as inconsistent. Stacked to match home. */
body :is(.rex-cta-grid, .cta-grid, .contact-quick-cta-inner),
body.sitewide-sync :is(.rex-cta-grid, .cta-grid, .contact-quick-cta-inner),
body:not(.sitewide-sync) :is(.rex-cta-grid, .cta-grid, .contact-quick-cta-inner) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
body :is(.rex-actions, .cta-actions),
body.sitewide-sync :is(.rex-actions, .cta-actions),
body:not(.sitewide-sync) :is(.rex-actions, .cta-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 32px 0 0 !important;
}

/* ---- Ambient-background visibility fix -------------------------------------
   Diagnosis: the reach-family bundles (reach-hub.css, reach-location.css,
   reach-shillong.css) paint one page-level canvas — `.rex-main { background:
   var(--reach-paper) }`, a warm cream (#f7f0e5), not teal — directly on top
   of the body. That is the one genuine "opaque wrapper above the ambient
   layer" this file's selectors can safely neutralize per the implementation
   hierarchy (step 2: page-level wrappers that paint solid become transparent
   where safe). Removing it here does not touch any individual section's own
   background (dark/sand/paper blocks keep their local surfaces intact). */
body .rex-main { background: transparent; }

/* ---- Desktop: compact four-column grid (Brand / Explore / Reach / Contact) ---- */


/* ---- Contact column: simple text plus one button — no boxed pills/cards ---- */


/* ---- Proof badges: original assets, original colors, no boxed "dashboard" card ---- */


/* ---- Mobile: proof badges are a clean two-by-two grid right under the brand ---- */


/* ---- Mobile accordion: simple text rows, thin dividers, small chevron ---- */


/* ---- Mobile contact block + full-width GET QUOTE button ---- */