/* Sections · Section component variants + page-level section wrappers */

/* ── Generic Section component ────────────────────────────────────── */
/* Usage: <section class="gl-section gl-section--{bg}"> */
.gl-section {
  padding: 96px 32px;
  background: var(--gray-0);
}
.gl-section--subtle { background: var(--gray-50); }
.gl-section--dark   { background: var(--gray-900); color: var(--gray-0); }

/* Inner container · same width budget as the footer (var(--container-max) = 1280) */
.gl-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Header block (eyebrow + title + subtitle) inside a Section */
.gl-section__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 56px;
}
.gl-section__head--center {
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.gl-section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.gl-section--dark .gl-section__eyebrow { color: var(--blue-200); }

.gl-section__title {
  font-size: 44px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin: 0;
  white-space: pre-line;
  max-width: 580px;
}
@media (max-width: 694px) {
  .gl-section__title {
    font-size: 36px;
    line-height: 1.25;
  }
}
.gl-section--dark .gl-section__title { color: var(--gray-0); }

.gl-section__subtitle {
  font-size: 17px;
  line-height: 28px;
  color: var(--gray-700);
  margin: 0;
  max-width: 720px;
  /* Honor `\n` in i18n strings as a hard line break. */
  white-space: pre-line;
}
.gl-section--dark .gl-section__subtitle { color: var(--gray-400); }

/* ── Page hero (used at top of About, Labs, Press, Career, Business) ──
 * Header is position:fixed → page-hero must reserve top space equal to the
 * header's actual rendered height, published as --header-h by app.jsx
 * (ResizeObserver). Fallback 116px = default desktop header. */
.gl-page-hero {
  position: relative;
  padding: calc(var(--header-h, 116px) + 20px) var(--container-pad-x) 120px;
  background: var(--gray-0);
  transition: padding-top var(--duration-base) var(--ease-out);
}
@media (max-width: 1024px) {
  .gl-page-hero {
    padding: calc(var(--header-h, 116px) + 16px) var(--container-pad-x) 120px;
  }
}
@media (max-width: 694px) {
  .gl-page-hero {
    padding: calc(var(--header-h, 116px) + 12px) var(--container-pad-x) 96px;
  }
}
.gl-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
}
/* Curved-shape SVG · two-layer structure:
 *   .gl-page-hero__shape-wrap  · positioning + scroll-parallax (inline style)
 *   .gl-page-hero__shape       · SVG itself · entry reveal animation
 * Path fill uses currentColor so per-page modifier sets the brand color. */
.gl-page-hero__shape-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.gl-page-hero__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Per-page modifier sets --shape-origin (e.g. "85% 12%"). Default centers. */
  --shape-origin-x: 50%;
  --shape-origin-y: 50%;
  /* Two animations chained:
   *  1) heroShapeEnter (1600ms)   · ellipse bloom + fade · runs once on landing
   *  2) heroShapeAlive (14s loop) · gentle drift + breathe · starts after entry
   * The "alive" loop gives an AI-organism feel — never fully static.
   * Origin coordinates come from CSS vars so each page can choose its bloom direction. */
  animation:
    heroShapeEnter 1600ms cubic-bezier(0.16, 1, 0.3, 1) backwards,
    heroShapeAlive 14s ease-in-out 1600ms infinite;
  will-change: clip-path, opacity, transform;
  /* Force a dedicated GPU compositing layer · prevents sub-pixel rendering
   * artifacts (stray bright dots) along the SVG path edges during transform
   * animation, particularly on dark hero backgrounds. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
@keyframes heroShapeEnter {
  0% {
    opacity: 0;
    clip-path: ellipse(20% 20% at var(--shape-origin-x) var(--shape-origin-y));
  }
  100% {
    opacity: 1;
    clip-path: ellipse(200% 200% at var(--shape-origin-x) var(--shape-origin-y));
  }
}
/* Default "breathing" loop · drift + gentle scale gives the shape an
 * AI-organism feel. Other pages depend on the scale for the breathing
 * effect; Career overrides this loop separately because its path has a
 * pixel-aligned vertical left edge that flickers under scale. */
@keyframes heroShapeAlive {
  0%   { transform: translate3d(0, 0, 0)         scale(1); }
  25%  { transform: translate3d(-40px, -20px, 0) scale(1.06); }
  50%  { transform: translate3d(0, -12px, 0)     scale(1.10); }
  75%  { transform: translate3d(40px, -20px, 0)  scale(1.06); }
  100% { transform: translate3d(0, 0, 0)         scale(1); }
}
/* Mobile · narrow viewports cannot absorb the desktop ±40px translate
 * within the 6% scale, exposing white margins on the opposite side as the
 * shape drifts. Smaller translate + larger baseline scale keeps the shape
 * clipped to viewport edges throughout the breathing loop. */
@media (max-width: 694px) {
  @keyframes heroShapeAlive {
    0%   { transform: translate3d(0, 0, 0)        scale(1.04); }
    25%  { transform: translate3d(-10px, -10px, 0) scale(1.08); }
    50%  { transform: translate3d(0, -8px, 0)     scale(1.10); }
    75%  { transform: translate3d(10px, -10px, 0)  scale(1.08); }
    100% { transform: translate3d(0, 0, 0)        scale(1.04); }
  }
}

/* Hero text reveal · staggered fade + slide-up · enters earlier so it doesn't
 * feel like an afterthought to the shape bloom. Applied to any --shape variant. */
.gl-page-hero--shape .gl-page-hero__inner > * {
  animation: heroTextReveal 800ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  will-change: opacity, transform;
}
.gl-page-hero--shape .gl-page-hero__inner > *:nth-child(1) { animation-delay: 200ms; }
.gl-page-hero--shape .gl-page-hero__inner > *:nth-child(2) { animation-delay: 350ms; }
.gl-page-hero--shape .gl-page-hero__inner > *:nth-child(3) { animation-delay: 500ms; }
@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gl-page-hero__shape { animation: none; }
  .gl-page-hero__shape-wrap { transform: none !important; }
  .gl-page-hero--shape .gl-page-hero__inner > * { animation: none; }
}

/* ── Per-page shape variants · color + entry origin ─────────────────
 * Each page picks a brand-aligned color and a distinct bloom direction
 * (where the clip-path ellipse expands FROM). The shape SVG path itself
 * is also varied per page (defined in JSX) for visual differentiation. */

/* About · trust blue · top-right origin */
.gl-page-hero--shape-about .gl-page-hero__shape {
  --shape-origin-x: 85%; --shape-origin-y: 12%;
  color: var(--blue-500);
}
/* Labs · research green · top-left origin · green-700 hex (Tailwind),
 * deeper than --green-500 so white header text/onDark CTA read clearly */
.gl-page-hero--shape-labs .gl-page-hero__shape {
  --shape-origin-x: 15%; --shape-origin-y: 12%;
  color: #15803D;
}
/* Business · enterprise violet · left-middle origin · violet-700 hex,
 * deeper than violet-500 for the same readability reason */
.gl-page-hero--shape-business .gl-page-hero__shape {
  --shape-origin-x: 5%; --shape-origin-y: 50%;
  color: #6D28D9;
}
/* Press · warm media orange · center origin (gentle bloom from middle) */
.gl-page-hero--shape-press .gl-page-hero__shape {
  --shape-origin-x: 50%; --shape-origin-y: 50%;
  color: #EA580C;
}
/* Career · monolithic black · bottom-right origin (rises from corner).
 * Career's path has a near-vertical left edge that flickers when scaled
 * (sub-pixel re-rasterization of an SVG with preserveAspectRatio="none").
 * Use a Career-specific alive loop without scale — pure translate keeps the
 * "breathing drift" feel without re-rasterizing the path each frame. */
.gl-page-hero--shape-career .gl-page-hero__shape {
  --shape-origin-x: 95%; --shape-origin-y: 95%;
  color: var(--gray-900);
  animation:
    heroShapeEnter 1600ms cubic-bezier(0.16, 1, 0.3, 1) backwards,
    heroShapeAliveCareer 14s ease-in-out 1600ms infinite;
}
@keyframes heroShapeAliveCareer {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(0, -16px, 0); }
  50%  { transform: translate3d(0, -8px, 0); }
  75%  { transform: translate3d(0, -16px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── Text reversal · pages with dark/saturated shape bg use white text ── */
.gl-page-hero--shape-about    .gl-page-hero__eyebrow,
.gl-page-hero--shape-labs     .gl-page-hero__eyebrow,
.gl-page-hero--shape-business .gl-page-hero__eyebrow,
.gl-page-hero--shape-press    .gl-page-hero__eyebrow,
.gl-page-hero--shape-career   .gl-page-hero__eyebrow { color: rgba(255, 255, 255, 0.88); }

.gl-page-hero--shape-about    .gl-page-hero__title,
.gl-page-hero--shape-labs     .gl-page-hero__title,
.gl-page-hero--shape-business .gl-page-hero__title,
.gl-page-hero--shape-press    .gl-page-hero__title,
.gl-page-hero--shape-career   .gl-page-hero__title { color: var(--gray-0); }

/* Hero subtitle · pure white on every shape subpage, in both themes.
 * Per-shape rule owns subtitle color; the v17.css dark-theme generic
 * override for .gl-page-hero__sub was removed so this rule wins cleanly. */
.gl-page-hero--shape-about    .gl-page-hero__sub,
.gl-page-hero--shape-labs     .gl-page-hero__sub,
.gl-page-hero--shape-business .gl-page-hero__sub,
.gl-page-hero--shape-press    .gl-page-hero__sub,
.gl-page-hero--shape-career   .gl-page-hero__sub { color: #ffffff; }

/* ── Pen drawing color · per-page · uses currentColor on stroke ─────
 * PenDrawing stroke defaults to currentColor; setting `color` on the
 * .gl-pen-overlay element governs the ink — same hook works for theme
 * inversions below. */
.gl-page-hero--shape-about    .gl-pen-overlay { color: var(--gray-0); }
.gl-page-hero--shape-labs     .gl-pen-overlay { color: var(--gray-0); }
.gl-page-hero--shape-business .gl-pen-overlay { color: var(--gray-0); }
.gl-page-hero--shape-press    .gl-pen-overlay { color: var(--gray-0); }
.gl-page-hero--shape-career   .gl-pen-overlay { color: var(--gray-0); }

/* ══════════════════════════════════════════════════════════════════
 * Dark mode · explicit deeper shape colors + pen ink adjustment
 *
 * Every page picks a meaningfully DEEPER, more saturated variant of its
 * light-mode color (no opacity tricks — real dark hues read better on a
 * dark canvas and give white header text / onDark CTAs proper contrast).
 * Press and Career — both grayscale — pick a slate that's lifted just
 * enough off the page background (#000) to remain visible.
 *
 * Pen ink follows the shape: when the shape goes very dark, pens that
 * were black in light mode flip to a light gray. Pens that were already
 * white (Business, Career) stay white in both modes.
 *
 * Two parallel branches mirror the rest of the codebase:
 *   1) :root[data-theme="dark"]                         — explicit toggle
 *   2) @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
 *      — OS preference (auto)
 * ══════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .gl-page-hero--shape-about    .gl-page-hero__shape { color: var(--blue-800); }
:root[data-theme="dark"] .gl-page-hero--shape-labs     .gl-page-hero__shape { color: #14532D; }
:root[data-theme="dark"] .gl-page-hero--shape-business .gl-page-hero__shape { color: #4C1D95; }
:root[data-theme="dark"] .gl-page-hero--shape-press    .gl-page-hero__shape { color: #9A3412; }
:root[data-theme="dark"] .gl-page-hero--shape-career   .gl-page-hero__shape { color: var(--gray-800); }

/* Pen ink · About / Labs flip from black → light gray on the now-very-dark
 * navy / forest shapes. Business / Press / Career pens stay white in both
 * modes (inherited from the light-mode rule above). */
:root[data-theme="dark"] .gl-page-hero--shape-about .gl-pen-overlay { color: var(--gray-0); }
:root[data-theme="dark"] .gl-page-hero--shape-labs  .gl-pen-overlay { color: var(--gray-0); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gl-page-hero--shape-about    .gl-page-hero__shape { color: var(--blue-800); }
  :root:not([data-theme="light"]) .gl-page-hero--shape-labs     .gl-page-hero__shape { color: #14532D; }
  :root:not([data-theme="light"]) .gl-page-hero--shape-business .gl-page-hero__shape { color: #4C1D95; }
  :root:not([data-theme="light"]) .gl-page-hero--shape-press    .gl-page-hero__shape { color: #9A3412; }
  :root:not([data-theme="light"]) .gl-page-hero--shape-career   .gl-page-hero__shape { color: var(--gray-800); }

  :root:not([data-theme="light"]) .gl-page-hero--shape-about .gl-pen-overlay { color: var(--gray-0); }
  :root:not([data-theme="light"]) .gl-page-hero--shape-labs  .gl-pen-overlay { color: var(--gray-0); }
}

/* Pen drawing overlay · fills the hero, captures pointer drags, renders
 * SVG paths that auto-fade after lifeMs. crosshair cursor signals drawability.
 * touch-action: none = pen events fire on touch without page scroll. */
.gl-pen-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.gl-pen-overlay__stroke {
  animation: penFade 5000ms linear forwards;
  pointer-events: none;
}
@keyframes penFade {
  0%, 60% { opacity: 1; }
  100%    { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-pen-overlay__stroke { animation: none; }
}
.gl-page-hero__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.gl-page-hero__title {
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--gray-900);
  margin: 14px 0 24px;
  max-width: 900px;
  /* Honor `\n` in i18n strings as a hard line break. */
  white-space: pre-line;
}
.gl-page-hero__sub {
  font-size: 19px;
  line-height: 32px;
  color: var(--gray-800);
  margin: 0;
  max-width: 820px;
  /* Honor `\n` in i18n strings as a hard line break. */
  white-space: pre-line;
}

/* Careers-style hero · larger title + decorative glow blob */
.gl-page-hero--lg {
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.gl-page-hero--lg .gl-page-hero__inner {
  position: relative;
}
.gl-page-hero--lg .gl-page-hero__title {
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.16;
  max-width: 920px;
}
.gl-page-hero--lg .gl-page-hero__sub {
  max-width: 720px;
}
.gl-page-hero__glow {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.10), transparent 60%);
  pointer-events: none;
}

/* ── Region · top-level section wrapper using responsive container-pad-x ─ */
.gl-region {
  padding: 96px var(--container-pad-x);
  background: var(--gray-0);
}
.gl-region--rel       { position: relative; overflow: hidden; }
.gl-region--subtle    { background: var(--gray-50); }
.gl-region--dark      { background: var(--gray-900); color: var(--gray-0); }
.gl-region--bordered  { border-bottom: 1px solid var(--gray-200); }

/* Padding variants */
.gl-region--lg        { padding: 120px var(--container-pad-x); }
.gl-region--cta       { padding: clamp(72px, 10vw, 128px) var(--container-pad-x) 96px; }
.gl-region--press     { padding: 96px var(--container-pad-x) 80px; }

/* Mobile · uniform 80px vertical padding across every region variant.
 * Placed AFTER the variant rules so cascade order beats them at this width. */
@media (max-width: 694px) {
  .gl-region,
  .gl-region--lg,
  .gl-region--cta,
  .gl-region--press {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* Trust band · narrow band, no horizontal padding (logos marquee inside owns x-overflow) */
.gl-region--trust {
  padding: 48px 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  overflow: hidden;
}