/* =============================================================
   DESIGN REFINEMENTS — the harmonization layer.
   Loaded after styles.min.css on every page. One coherent voice:

   1. A true italic register for the display serif — the words
      inside gradient emphasis become the site's "spoken" voice.
   4. Services hover in two brand tones instead of eight hues.
   5. More air: wider section rhythm, breathing room around
      headings, calmer line-heights.
   6. Violet "bookends": the page opens with the hero's glow and
      closes with a faint echo of it above contact + footer.
   ============================================================= */

/* --- 1. True italics (the files existed, but were never wired up) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 800;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond/CormorantGaramond-SemiBoldItalic.woff2') format('woff2'),
       url('../assets/fonts/cormorant-garamond/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
}

/* The italic voice: every gradient-emphasised word in a display
   heading is now spoken in true italics — the emotional beat of
   each headline. Numerals stay out of it (see below) — a slanted
   digit reads as a typo, not elegance. */
h1 em,
h2 em,
h1 .gradient-text,
h2 .gradient-text,
.hero-heading .gradient-text,
.lb-heading .lb-word-b {
  font-style: italic;
  font-family: var(--font-italic);
  text-transform: none;
  letter-spacing: -0.02em;
  display: inline-block;
  transform: translateY(0.05em);
  position: relative;
}

/* Block-level pull-quote: same voice, no inline-block/transform nudge
   (would break its centered block layout). */
.case-pull {
  font-style: italic;
  font-family: var(--font-italic);
  letter-spacing: -0.02em;
}

/* --- Numerals: one clean geometric sans wherever a number is the
   whole point — stat figures, step counters, index badges. The
   serif display face is for words; digits read cleaner and more
   minimal in the same sans used for body copy, upright and plain,
   never italic. */
.case-hero-num,
.case-stat-num,
.case-more-num,
.flow-num,
.sb-num,
.step-box .sb-num,
.proc-num {
  font-family: var(--font-numeral);
  font-style: normal;
}

/* --- 4. Services: restored to the bright, distinct color per row
   (blue, red, pink, cyan, lime, amber, indigo, teal — already set
   per item via --flow-bg in the markup). An earlier pass collapsed
   these to two flat violet tones for a more "restrained" look, but
   that read as monotone rather than premium — back to the colorful
   original, plus a rounded rectangle (see .flow-marquee below) so
   it matches the rest of the site's soft corners. */
.flow-marquee {
  border-radius: var(--radius-md, 16px);
}

/* Founding perks: brand periwinkle instead of stock green */
.founding-perks i { color: var(--accent-ink); }

/* Feature-box icons (careers + every service page's benefits
   grid): one flat accent tone for all six felt monotone against
   the new sky-tinted panels. A rotating set of vivid, tinted
   badges reads livelier without losing the premium restraint —
   still soft (16% fills), just no longer all the same color. */
/* Unified to the single lime accent — a rainbow of six hues (incl. the
   blue/violet being retired) fought the one-accent system. Dark-olive
   glyph on a pale-lime badge: coherent, readable, still lively. */
.feature-box i {
  color: var(--accent-ink);
  background: var(--accent-light);
}

/* --- 5. Air --- */
.section-pad { padding: clamp(112px, 13vh, 152px) 0; }
.section-header { max-width: 680px; margin-bottom: clamp(64px, 9vh, 96px); }
.section-heading { margin-bottom: 20px; }
.section-sub { line-height: 1.7; }
.hero-sub { margin-bottom: 52px; }
.case-story { margin-top: 8px; }

@media (max-width: 768px) {
  .section-pad { padding: 88px 0; }
  .section-header { margin-bottom: 56px; }
}

/* Bold carries meaning in running copy */
.section-sub strong, .case-story strong { color: var(--text); font-weight: 600; }

/* =============================================================
   SUBPAGE HERO — quieter, more editorial. Scoped to .subpage-hero
   only, so the homepage hero is untouched.

   The site-wide h1/h2 rule sets full uppercase — right for short,
   punchy homepage lines, but on a longer two-line subpage headline
   (half of it italic) it turns into a dense wall of caps that
   reads as loud rather than classy. Mixed case, lightly tracked,
   is what makes the italic accent actually read as an accent.

   The secondary CTA also drops its box — one solid button plus one
   quiet underlined link is the minimal hierarchy; two equally
   boxed buttons compete for the same attention. */
.subpage-hero h1 {
  text-transform: none;
  letter-spacing: -0.01em;
}
.subpage-hero-actions .btn-outline {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-left: 6px;
  padding-right: 6px;
  color: var(--text-2);
  transition: color var(--transition);
}
.subpage-hero-actions .btn-outline:hover {
  background: transparent;
  color: var(--text);
}

/* --- 6. Violet bookends: the page closes the way it opened --- */
.contact::before,
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(13,13,13, 0.075), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* =============================================================
   IMMERSIVE HEADER — logo left, hamburger (+ sound, on the
   homepage) right, nothing else. No translucent bar behind it at
   any scroll position, so the sky/hero art reads edge-to-edge
   with the header floating on top of it, not sitting in a box.
   The center nav links and the white "Get Started" pill move into
   the hamburger's existing full-screen menu (js/app.js's GSAP
   bubble-menu overlay already builds itself from those exact
   links, so nothing here needs to change to keep them reachable —
   the hamburger just becomes the one and only nav control, at
   every viewport width, not only on small screens).
   ============================================================= */
.nav-links, .nav-cta { display: none; }
.nav-hamburger { display: flex; }
.nav-container::before { display: none; }

/* no bar behind the header — everything sits on the light page
   directly now, so only a faint depth shadow is needed, not the
   heavy legibility shadow the old variable-brightness sky required */
.logo-text { text-shadow: 0 1px 3px rgba(20, 10, 45, 0.1); }
.nav-logo::before { filter: blur(0.5px) drop-shadow(0 1px 3px rgba(20, 10, 45, 0.12)); }
.nav-hamburger span { box-shadow: none; }
.sound-toggle { box-shadow: 0 2px 8px rgba(20, 10, 45, 0.08); }

/* =============================================================
   IMMERSIVE LAYER (js/experience.js)
   ============================================================= */

/* --- 3D tilt glare: a soft light that follows the pointer --- */
.case-tile::after,
.founding-card::after,
.lb-exhibit-card::after,
.proc-row::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(13,13,13, 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.case-tile:hover::after,
.founding-card:hover::after,
.lb-exhibit-card:hover::after,
.proc-row:hover::after { opacity: 1; }

/* --- Depth field: ambient dust with cursor + scroll parallax --- */
#depthField {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .case-tile::after, .founding-card::after, .lb-exhibit-card::after, .proc-row::after { display: none; }
  #depthField { display: none; }
  .atmo-glow { transition: none; }
}

/* =============================================================
   SECTION BACKGROUNDS — the animated day/night sky (js/day-night.js
   + css/sky-landscape.css) has been removed in favor of a static
   light glassmorphic backdrop (css/glass-background.css). Sections
   go back to carrying their own real (now light) background —
   see the .stack-card rules in styles.css — instead of staying
   transparent to let a sky show through. No compensating text-
   shadow is needed either, now that every section has a real,
   predictable, light background under its copy. */

/* Recoloured to the warm cream reference (was a deliberate near-black
   "hard cut" against the light page — retired along with the rest of
   the dark-violet theme). Keeps the same soft top/bottom fade shape,
   just in cream instead of near-black, so it still blends at the
   section edges without a hard seam. */
.cancel-marquee {
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--bg-2, #F5F4EF) 160px,
    var(--bg-2, #F5F4EF) calc(100% - 160px),
    transparent 100%
  );
}