/* =============================================================================
   01) HOME SECTIONS (SOVEREIGN)
   NOTE: legacy global <section> styling removed to avoid cross-page overrides
============================================================================= */

/* =============================================================================
   02) FEATURED COLLECTIONS
   NOTE: styling migrated to `/assets/css/collections.css` (sovereign module)
============================================================================= */

/* =============================================================================
   03) LEGACY POSTS & COMMENTS
============================================================================= */

/* Legacy featured posts/comments (kept) */
.section-posts{background-color:#f9f9f9;}
.post{border-bottom:1px solid #ddd;padding:2rem 0;}
.post:last-child{border-bottom:none;}
.post-title{font-size:1.5rem;font-weight:600;margin-bottom:0.5rem;}
.post-excerpt{font-size:1rem;color:#333;margin-bottom:0.5rem;}
.read-more{text-decoration:none;color:#0077cc;font-weight:500;transition:color 0.2s;}
.read-more:hover{text-decoration:underline;color:#005fa3;}

.section-comments{background-color:#f5f5f5;padding:2rem 0;}
.section-comments h2{font-size:1.8rem;font-weight:600;margin-bottom:1.5rem;}
.comment{border-bottom:1px solid #ddd;padding:1rem 0;}
.comment:last-child{border-bottom:none;}
.comment p{font-size:0.95rem;line-height:1.6;color:#222;margin-bottom:var(--spacing-md);}

/* Rail alignment for legacy content blocks (keeps visuals consistent with footer/header gutters) */
.section-posts .post,
.section-comments h2,
.section-comments .comment{
  width: min(var(--site-rail-width), calc(100% - (var(--site-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================================
   04) HOME HERO (POST-ENTER) — FULL-BLEED VIDEO + LUX GLASS OVERLAY
   Goal: video spans edge-to-edge, sits UNDER the header ribbon, and stays centered.
============================================================================= */

/* Full-bleed hero section container (tolerant selectors) */
#home-hero,
.home-hero,
.hero-home,
[data-hero="home"]{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  /* Full viewport hero */
  min-height: 100vh;
  min-height: 100svh;
}

@supports (height: 100dvh){
  #home-hero,
  .home-hero,
  .hero-home,
  [data-hero="home"]{
    min-height: 100dvh;
  }
}

/* Video wrapper (covers under fixed header-controls) */
#home-hero .hero-video,
#home-hero .home-hero-video,
#home-hero video,
.home-hero .hero-video,
.home-hero .home-hero-video,
.home-hero video,
.hero-home .hero-video,
.hero-home .home-hero-video,
.hero-home video,
[data-hero="home"] .hero-video,
[data-hero="home"] .home-hero-video,
[data-hero="home"] video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Ensure the media itself is truly centered and fills (no side black gaps) */
#home-hero video,
.home-hero video,
.hero-home video,
[data-hero="home"] video{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  transform: translateZ(0);
  z-index: 0;
}

/* Optional glass overlay element if present in HTML */
#home-hero .hero-glass,
#home-hero .home-hero-glass,
.home-hero .hero-glass,
.home-hero .home-hero-glass,
.hero-home .hero-glass,
.hero-home .home-hero-glass,
[data-hero="home"] .hero-glass,
[data-hero="home"] .home-hero-glass{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  /* Lux wash + subtle blur, theme-adaptable */
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.48) 52%,
      rgba(0,0,0,0.68) 100%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.light-mode #home-hero .hero-glass,
body.light-mode #home-hero .home-hero-glass,
body.light-mode .home-hero .hero-glass,
body.light-mode .home-hero .home-hero-glass,
body.light-mode .hero-home .hero-glass,
body.light-mode .hero-home .home-hero-glass,
body.light-mode [data-hero="home"] .hero-glass,
body.light-mode [data-hero="home"] .home-hero-glass{
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.12) 52%,
      rgba(0,0,0,0.22) 100%
    );
}

/* If no overlay element exists, paint the glass with a pseudo-element on the hero */
#home-hero::after,
.home-hero::after,
.hero-home::after,
[data-hero="home"]::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.48) 52%,
      rgba(0,0,0,0.68) 100%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.light-mode #home-hero::after,
body.light-mode .home-hero::after,
body.light-mode .hero-home::after,
body.light-mode [data-hero="home"]::after{
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.12) 52%,
      rgba(0,0,0,0.22) 100%
    );
}

/* Replace pseudo-matte with real DOM matte (prevents scroll-away during pinned hero sequence) */
#home-hero::after{
  opacity: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.light-mode #home-hero::after{
  opacity: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Real matte layer (DOM node) — can be pinned by JS without affecting logo/headlines */
#home-hero .home-hero-matte{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.48) 52%,
      rgba(0,0,0,0.68) 100%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.light-mode #home-hero .home-hero-matte{
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.12) 52%,
      rgba(0,0,0,0.22) 100%
    );
}

/* Global matte styles (needed when JS portals .home-hero-matte to <body> during pin) */
.home-hero-matte{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.48) 52%,
      rgba(0,0,0,0.68) 100%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.light-mode .home-hero-matte{
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.12) 52%,
      rgba(0,0,0,0.22) 100%
    );
}

/* Hero content sits above glass */
#home-hero .hero-content,
.home-hero .hero-content,
.hero-home .hero-content,
[data-hero="home"] .hero-content{
  position: relative;
  z-index: 2;
}

/* Ensure hero logo sits above glass overlay */
#home-hero .hero-logo,
.home-hero .hero-logo,
.hero-home .hero-logo,
[data-hero="home"] .hero-logo {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* Home Hero — Dedicated Logo Layer (always above glass) */
#home-hero .home-hero-logo-layer,
.home-hero .home-hero-logo-layer,
.hero-home .home-hero-logo-layer,
[data-hero="home"] .home-hero-logo-layer{
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* Defensive: if an explicit overlay node exists, keep it under logo + content */
#home-hero .home-hero-overlay,
.home-hero .home-hero-overlay,
.hero-home .home-hero-overlay,
[data-hero="home"] .home-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Mobile: use dynamic viewport units to avoid bottom gaps */
@media (max-width: 820px){
  #home-hero,
  .home-hero,
  .hero-home,
  [data-hero="home"]{
    min-height: 100svh;
  }

  @supports (height: 100dvh){
    #home-hero,
    .home-hero,
    .hero-home,
    [data-hero="home"]{
      min-height: 100dvh;
    }
  }
}

/* Mobile: vertically + horizontally center hero content */
@media (max-width: 820px){
  #home-hero .hero-content,
  .home-hero .hero-content,
  .hero-home .hero-content,
  [data-hero="home"] .hero-content{
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* =============================================================================
   05) HOME HERO LOGO — STICKY + SHRINK ON SCROLL
============================================================================= */

/* Base size (initial state, large but controlled) */
.home-hero-logo,
.hero-logo,
.home-hero-logo-layer img,
.home-hero-logo-layer svg {
  width: 34vw;
  min-width: 320px;
  max-width: 560px;
  height: auto;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
  will-change: transform, width;
}

/* Sticky behavior after enter (same anchor for both states) */
.home-hero-logo-layer {
  position: sticky;
  top: 4.4rem; /* sit below the fixed header controls */
  z-index: 300; /* above video + glass, below menu */
  display: flex;
  justify-content: flex-start;
  padding-left: var(--site-gutter);
  pointer-events: auto;
}

/* Scrolled state (JS toggles .hero-logo-scrolled on body) */
body.hero-logo-scrolled .home-hero-logo,
body.hero-logo-scrolled .hero-logo,
body.hero-logo-scrolled .home-hero-logo-layer img,
body.hero-logo-scrolled .home-hero-logo-layer svg {
  width: 24vw; /* ~50% of original, not tiny */
  min-width: 260px;
  max-width: 380px;
  transform: scale(1);
  opacity: 1;
}

/* Mobile tuning */
@media (max-width: 820px) {
  .home-hero-logo,
  .hero-logo,
  .home-hero-logo-layer img,
  .home-hero-logo-layer svg {
    width: 72vw;
    min-width: 240px;
    max-width: 380px;
    max-width: 84%;
  }

  .home-hero-logo-layer {
    top: 4.1rem;
    padding-left: var(--site-gutter);
  }

  body.hero-logo-scrolled .home-hero-logo,
  body.hero-logo-scrolled .hero-logo,
  body.hero-logo-scrolled .home-hero-logo-layer img,
  body.hero-logo-scrolled .home-hero-logo-layer svg {
    width: 220px;
    transform: scale(1);
  }
}

/* =============================================================================
   06) HOME HERO LOGO DURING OVERLAYS (MENU / COUNTRY)
   Rule: NEVER vanish completely. Only soften and disable interaction.
============================================================================= */


body.menu-open .home-hero-logo-layer,
body.menu-open .home-hero-logo,
body.menu-open .hero-logo,
body.menu-open .home-hero-logo-layer img,
body.menu-open .home-hero-logo-layer svg,
body.country-overlay-active .home-hero-logo-layer,
body.country-overlay-active .home-hero-logo-layer img,
body.country-overlay-active .home-hero-logo-layer svg{
  opacity: 0.14 !important;
  pointer-events: none !important;
}

/* =============================================================================
   06A) HOME HERO LOGO — ESSENCE STEP FADE (ARCH → INTEL → SYSTEMS) — LUX
   Uses existing body classes set by JS: hl-1 / hl-2 / hl-3
   - hl-1: fully visible
   - hl-2: gradual fade begins (still present)
   - hl-3: nearly gone (still a ghost)
   - hero-lock-released: fully gone beyond hero
============================================================================= */

/* Ensure opacity animates (width/transform already handled above) */
.home-hero-logo-layer,
.home-hero-logo,
.hero-logo,
.home-hero-logo-layer img,
.home-hero-logo-layer svg{
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width, opacity;
}

/* ARCHITECTURE */
body.hl-1 .home-hero-logo-layer,
body.hl-1 .home-hero-logo,
body.hl-1 .hero-logo,
body.hl-1 .home-hero-logo-layer img,
body.hl-1 .home-hero-logo-layer svg{
  opacity:1;
  pointer-events:auto;
}

/* INTELLIGENCE: begin fade (lux runway) */
body.hl-2 .home-hero-logo-layer,
body.hl-2 .home-hero-logo,
body.hl-2 .hero-logo,
body.hl-2 .home-hero-logo-layer img,
body.hl-2 .home-hero-logo-layer svg{
  opacity:0.42;
}

/* SYSTEMS: almost gone, still barely present */
body.hl-3 .home-hero-logo-layer,
body.hl-3 .home-hero-logo,
body.hl-3 .hero-logo,
body.hl-3 .home-hero-logo-layer img,
body.hl-3 .home-hero-logo-layer svg{
  opacity:0.06;
  pointer-events:none;
}

/* After hero exits: fully gone (clean handoff) */
body.hero-lock-released .home-hero-logo-layer,
body.hero-lock-released .home-hero-logo,
body.hero-lock-released .hero-logo,
body.hero-lock-released .home-hero-logo-layer img,
body.hero-lock-released .home-hero-logo-layer svg{
  opacity:0;
  pointer-events:none;
}

/* =============================================================================
   07) HOME SCROLL GRADIENT BACKDROP (EXPERIMENTAL / ADDITIVE)
   Reference: JescoJets — vertical chromatic fade driven by scroll (CSS-only)
============================================================================= */

.home-scroll-gradient{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Top = subtle color, Bottom = neutral */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-primary1) 14%, var(--bg-color)) 0%,
      color-mix(in srgb, var(--bg-color) 92%, transparent) 55%,
      var(--bg-color) 100%
    );

  transition: background 0.9s cubic-bezier(0.22,1,0.36,1);
}

/* Mid-scroll: slightly richer top tone */
body.scroll-mid .home-scroll-gradient{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-primary1) 22%, var(--bg-color)) 0%,
      color-mix(in srgb, var(--bg-color) 90%, transparent) 50%,
      var(--bg-color) 100%
    );
}

/* Deep-scroll: strongest presence, still neutralized at bottom */
body.scroll-deep .home-scroll-gradient{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-primary2) 26%, var(--bg-color)) 0%,
      color-mix(in srgb, var(--bg-color) 88%, transparent) 45%,
      var(--bg-color) 100%
    );
}


/* =============================================================================
   08) HOME HERO HEADLINES (SCROLL FOCUS)
============================================================================= */

.home-hero-headlines{
  position: absolute;
  left: 0;
  top: 58%;
  z-index: 3;

  display: grid;
  gap: 0.65rem;

  width: 100%;
  max-width: none;
  padding: 0 var(--site-gutter);

  transform: translateY(-50%);
  text-align: left;

  opacity: 1;
  pointer-events: none;

  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 820px){
  .home-hero-headlines{
    padding: 0 var(--site-gutter);
    max-width: 92vw;
  }
}

.home-hero-headline{
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0.22;
  transform: translateY(0px) scale(0.92);
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
  will-change: transform, opacity;
  filter: blur(0.6px);

  /* Size: huge, restrained. No clamp(). */
  font-size: 8.2vw;
  line-height: 0.92;
}

@media (min-width: 1200px){
  .home-hero-headline{font-size: 100px;}
}

@media (max-width: 820px){
  .home-hero-headline{font-size: 14vw;}
}


/* Active headline states (JS toggles these on <body>) */
body.hl-1 .home-hero-headline:nth-child(1),
body.hl-2 .home-hero-headline:nth-child(2),
body.hl-3 .home-hero-headline:nth-child(3){
  opacity: 0.92;
  transform: translateY(-2px) scale(1.06);
  filter: blur(0px);
}

body.hl-1 .home-hero-headline:not(:nth-child(1)),
body.hl-2 .home-hero-headline:not(:nth-child(2)),
body.hl-3 .home-hero-headline:not(:nth-child(3)){
  opacity: 0.14;
  transform: translateY(2px) scale(0.90);
  filter: blur(0.9px);
}

/* Exit motion after the 4th headline completes (JS toggles on <body>) */
body.hero-lock-released .home-hero-headlines{
  transform: translateY(calc(-50% - 140px));
}


/* Defensive: hide during overlays */
body.menu-open .home-hero-headlines,
body.country-overlay-active .home-hero-headlines{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =============================================================================
   09) HOME RAIL ALIGNMENT (GLOBAL HOME SECTIONS)
============================================================================= */

/* Unified rail for homepage content blocks (matches footer/header gutter) */
.home-rail{
  width: min(var(--site-rail-width), calc(100% - (var(--site-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed homepage figures (edge-to-edge on all devices) */
.home-figure.home-rail{
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}

.home-figure.home-rail img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* =============================================================================
   10) RTL HOME ALIGNMENT (TEXT-ONLY, KEEP LTR RAIL)
============================================================================= */

/* RTL: respect direction while keeping the same rail geometry */
html.lang-rtl .home-hero-headlines,
html.lang-rtl .home-inner,
html.lang-rtl .home-rail,
html.lang-rtl .featured-header,
html.lang-rtl .featured-grid{
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start; /* becomes right in RTL */
}

html.lang-rtl .home-inner [data-i18n-key],
html.lang-rtl .home-hero-headlines [data-i18n-key],
html.lang-rtl .featured-header [data-i18n-key],
html.lang-rtl .featured-grid [data-i18n-key]{
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start;
}


/* =============================================================================
   11) HOME ESSENCE — SCROLL-SCRUBBED INK REVEAL
============================================================================= */

/* True center: neutralize rail/gutter indentation for Essence only */
/* Kill any inherited inner/gutter padding that would offset the stage */
.home-essence .home-inner,
.home-essence .home-essence-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.home-essence-inner{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.home-ink-reveal{
  width: 100%;
  max-width: 74ch;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 0.75rem;

  text-align: center;
  justify-items: center;
  overflow: visible;
  box-sizing: border-box;
}

/* Layered essence lines (all occupy the same center point) */
.home-ink-stack{
  position: relative;
  width: 100%;

  /* Reserve space so lines don’t get clipped while layered */
  min-height: 3.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When using the stack, the reveal container becomes a single centered stage */
.home-ink-reveal{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.home-ink-layer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 74ch;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  margin-left: 0;
}

/* Slightly taller stage on larger viewports */
@media (min-width: 1024px){
  .home-ink-stack{min-height: 4.6em;}
}

@media (max-width: 820px){
  .home-ink-stack{min-height: 4.2em;}
}

/* The reveal is driven by CSS variables set by JS:
   --ink: 0..1 (reveal amount)
   --sheen: 0..1 (subtle internal sweep)
*/
.ink-line{
  margin: 0;
  position: relative;

  font-size: 1.6rem;
  line-height: 1.28;
  font-weight: 300;

  /* Base typography inherits .home-text; keep it crisp */
  letter-spacing: 0.006em;
  padding: 0.08em 0;

  /* Fallback: always visible text */
  color: var(--text-color);
  -webkit-text-fill-color: var(--text-color);

  /* Sheen gradient (safe, no color-mix dependency) */
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    var(--text-color) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 320% 100%;
  background-position: calc(var(--sheen, 0) * 100%) 50%;

  will-change: background-position;
  overflow: visible;
}

@supports (-webkit-background-clip: text) or (background-clip: text){
  .ink-line{
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.ink-line--sub{
  opacity: 0.78;
  font-size: 1.4rem;
}

/* Mobile breathing room */
@media (max-width: 820px){
  .home-ink-reveal{gap: 0.7rem;}
  .ink-line{font-size: 1.45rem;}
}

@media (min-width: 1024px){
  .ink-line{font-size: 2.05rem;}
}

@media (min-width: 1024px){
  .ink-line--sub{font-size: 1.75rem;}
}

/* RTL: keep center alignment, but let punctuation shape correctly */

html.lang-rtl .home-ink-reveal [data-i18n-key]{
  direction: rtl;
  unicode-bidi: isolate;
  text-align: center !important;
}

/* Corrective override: true center (viewport) */
.home-ink-reveal{
  width: 100%;
  max-width: 74ch;
  margin-left: auto;
  margin-right: auto;
  transform: none;
  padding-left: 0;
  padding-right: 0;
}

.home-ink-reveal .home-ink-stack{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}


.home-ink-reveal .home-ink-layer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 74ch;
  display: inline-block;
  margin: 0;
}

/* --- Essence centering: single-source-of-truth (no viewport hacks) --- */
.home-essence,
.home-essence-inner{
  width: 100%;
}

/* Keep the Essence stage truly centered with equal left/right margins */
.home-essence .home-ink-reveal{
  position: relative;
  left: auto;
  transform: none;

  width: min(74ch, calc(100% - (var(--site-gutter) * 2)));
  max-width: none;

  margin-left: auto;
  margin-right: auto;

  padding-left: 0 !important;
  padding-right: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stable centered stage for the layered lines */
.home-essence .home-ink-stack{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make each layer occupy the same centered stage (no left:50% offset) */
.home-essence .home-ink-layer{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  width: auto;
  max-width: none;
  margin: 0;

  text-align: center;
  box-sizing: border-box;
}


.home-essence .ink-line{
  display: block;
  width: 100%;
  text-align: center;
}


/* =============================================================================
   11A) HOME ESSENCE — CHROMA BACKDROP (STEP-SCRUBBED / ADDITIVE)
   Goal: during the Essence 3-line sequence, keep a luxury blurred gradient behind,
   and shift color per step (1→2→3) without affecting hero/video.
   JS may toggle: body.essence-pinned + body.essence-step-1/2/3.
============================================================================= */

/* Backdrop node (tolerant selectors: supports injected DIV or authored element) */
#essence-chroma,
.essence-chroma,
.essence-gradient,
[data-essence-chroma]{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above base bg, below pinned text stage */
  opacity: 0;
  visibility: hidden;

  /* Default (fallback) chroma — used until a step class is applied */
  background:
    radial-gradient(1100px 680px at 18% 40%, color-mix(in srgb, var(--color-primary1) 55%, transparent) 0%, transparent 62%),
    radial-gradient(900px 560px at 78% 58%, color-mix(in srgb, var(--color-primary3) 22%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 86%, transparent) 0%, var(--bg-color) 70%);

  /* soft blur + premium wash */
  filter: blur(18px);
  transform: translateZ(0);

  transition:
    opacity 900ms cubic-bezier(0.22,1,0.36,1),
    background 1200ms cubic-bezier(0.22,1,0.36,1);
}

/* Only active during Essence pin (keeps rest of site unchanged) */
body.essence-pinned #essence-chroma,
body.essence-pinned .essence-chroma,
body.essence-pinned .essence-gradient,
body.essence-pinned [data-essence-chroma],
body.essence-chroma-active #essence-chroma,
body.essence-chroma-active .essence-chroma,
body.essence-chroma-active .essence-gradient,
body.essence-chroma-active [data-essence-chroma]{
  opacity: 1;
  visibility: visible;
}

/* Step 1: warm stone (primary1) */
body.essence-step-1 #essence-chroma,
body.essence-step-1 .essence-chroma,
body.essence-step-1 .essence-gradient,
body.essence-step-1 [data-essence-chroma]{
  background:
    radial-gradient(1100px 680px at 18% 40%, color-mix(in srgb, var(--color-primary1) 55%, transparent) 0%, transparent 62%),
    radial-gradient(900px 560px at 78% 58%, color-mix(in srgb, var(--color-primary3) 22%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 86%, transparent) 0%, var(--bg-color) 70%);
}

/* Step 2: deep brass (primary2) */
body.essence-step-2 #essence-chroma,
body.essence-step-2 .essence-chroma,
body.essence-step-2 .essence-gradient,
body.essence-step-2 [data-essence-chroma]{
  background:
    radial-gradient(1100px 680px at 22% 44%, color-mix(in srgb, var(--color-primary2) 52%, transparent) 0%, transparent 62%),
    radial-gradient(900px 560px at 76% 54%, color-mix(in srgb, var(--color-primary1) 18%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 86%, transparent) 0%, var(--bg-color) 70%);
}

/* Step 3: restrained teal/olive blend (primary5/primary6) */
body.essence-step-3 #essence-chroma,
body.essence-step-3 .essence-chroma,
body.essence-step-3 .essence-gradient,
body.essence-step-3 [data-essence-chroma]{
  background:
    radial-gradient(1100px 680px at 20% 46%, color-mix(in srgb, var(--color-primary5) 34%, transparent) 0%, transparent 62%),
    radial-gradient(900px 560px at 78% 52%, color-mix(in srgb, var(--color-primary6) 28%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 86%, transparent) 0%, var(--bg-color) 70%);
}

/* Light mode: reduce density so it stays elegant */
body.light-mode.essence-step-1 #essence-chroma,
body.light-mode.essence-step-1 .essence-chroma,
body.light-mode.essence-step-1 .essence-gradient,
body.light-mode.essence-step-1 [data-essence-chroma],
body.light-mode.essence-step-2 #essence-chroma,
body.light-mode.essence-step-2 .essence-chroma,
body.light-mode.essence-step-2 .essence-gradient,
body.light-mode.essence-step-2 [data-essence-chroma],
body.light-mode.essence-step-3 #essence-chroma,
body.light-mode.essence-step-3 .essence-chroma,
body.light-mode.essence-step-3 .essence-gradient,
body.light-mode.essence-step-3 [data-essence-chroma]{
  filter: blur(16px);
  opacity: 0.85;
}


/* Mobile: slightly less blur for performance */
@media (max-width: 820px){
  #essence-chroma,
  .essence-chroma,
  .essence-gradient,
  [data-essence-chroma]{
    filter: blur(14px);
  }
}

/* Ensure the JS-created Essence pin backdrop does NOT paint over chroma.
   We keep it only as a bleed-guard while chroma provides the visible fill. */
body.essence-pinned #essence-pin-backdrop{
  background: var(--bg-color) !important;
  opacity: 0.0001 !important;
}

/* Safety: never show Essence chroma while hero is pinned (prevents cross-bleed). */
body.hero-lock-enabled #essence-chroma,
body.hero-lock-enabled .essence-chroma,
body.hero-lock-enabled .essence-gradient,
body.hero-lock-enabled [data-essence-chroma]{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Never show Essence chroma during overlays */
body.menu-open #essence-chroma,
body.menu-open .essence-chroma,
body.menu-open .essence-gradient,
body.menu-open [data-essence-chroma],
body.country-overlay-active #essence-chroma,
body.country-overlay-active .essence-chroma,
body.country-overlay-active .essence-gradient,
body.country-overlay-active [data-essence-chroma]{
  opacity: 0 !important;
  visibility: hidden !important;
}


/* =============================================================================
   12) POST-ESSENCE SECTION REVEAL (SOFT RISE-IN)
============================================================================= */

/* Animate the next section in after the Essence pinned narrative releases */
#essence-scroll-spacer + section{
  will-change: transform, opacity;
  transition:
    transform 1.25s cubic-bezier(0.22,1,0.36,1),
    opacity 1.05s ease;
}

/* While Essence is pinned, keep the next section out of view (no sudden pop) */
body.essence-pinned #essence-scroll-spacer + section{
  opacity: 0;
  transform: translateY(70px);
  pointer-events: none;
}

/* =============================================================================
   HOME CLOSING — CENTERED INTELLECTUAL STATEMENT (SEO SAFE)
============================================================================= */

.home-closing{
  width: min(var(--site-rail-width), calc(100% - (var(--site-gutter) * 2)));
  margin: 0 auto;
  padding: 4.5rem 0 6rem;
  text-align: center;
  display: grid;
  gap: 0.9rem;
}

.home-closing-line{
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color);
  font-size: 1.35rem;
  line-height: 1.35;
}

.home-closing-line--sub{
  text-transform: none;
  letter-spacing: 0.01em;
  opacity: 0.78;
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
}

/* Reveal behavior is handled globally by the Motion System (assets/js/motion.js + style.css) */

@media (max-width: 820px){
  .home-closing{padding: 3.6rem 0 5rem;}
  .home-closing-line{font-size: 1.15rem;}
  .home-closing-line--sub{font-size: 1.0rem;}
}