/**
 * BUILT WITH RESPONSIBILITY - Responsible manufacturing / earth section
 * ------------------------------------------------------------------
 * Phase: PHARAON-HOME-EARTH-SECTION-01
 * Scope: homepage only (body.home). Never affects other templates.
 *
 * POSITION
 * Sits directly after the "Inside Pharaon" film and directly before
 * "Our Product". It is the narrative bridge between what the plant can do
 * and what the company owes for doing it.
 *
 * Both sections originally carried an editorial index in the right of the
 * head row - 02 Manufacturing and 03 Responsibility. Both were removed on
 * request, so each head row is now a single eyebrow over a hairline.
 *
 * TYPOGRAPHY
 * No font is imported and no family is hard-coded, same contract as the
 * film section: the display face comes from the theme's Redux variable and
 * everything else inherits the body face.
 *   --themeht-typography-secondary-font-family   headings
 *
 * BACKGROUND
 * assets/homepage/img/pharaon-earth-bg.webp, converted from the supplied
 * PNG (1.79 MB -> 68 KB) with a 900px variant for phones (17 KB). It is
 * decorative: it states nothing the copy does not, and the section is
 * fully readable if it never loads. See the background block below for
 * why the scrim is shaped the way it is.
 *
 * PALETTE
 * Forest and earth neutrals dominate. The accent is the real Pharaon logo
 * colour sampled from the live site (#E3AD0B) - the brief called it
 * "orange", the site's actual token is this warm gold, and matching the
 * site wins over matching the brief. Brand navy #273791 is deliberately
 * absent here: this is the one section allowed its own field, and mixing
 * navy into forest muddies both.
 *
 * The field runs dark at the top and lifts toward the bottom. That is not
 * decoration - the section above is dark and "Our Product" below is light,
 * so the lift is the handoff between them.
 *
 * MOTION
 * The reveal states are armed by .is-ready, which pharaon-home-earth.js
 * adds - and only when the visitor has not asked for reduced motion.
 * Without the script, nothing is ever hidden and the section renders flat.
 * Everything below is a CSS transition. The single GSAP ScrollTrigger in
 * the JS owns .ph-earth__disc-inner and nothing else.
 *
 * TRANSFORM OWNERSHIP (do not merge these onto one element)
 *   .ph-earth__disc        clip-path reveal
 *   .ph-earth__disc-inner  GSAP parallax, desktop only
 *   .ph-earth__disc-img    CSS settle scale
 */

body.home .ph-earth {
  --phe-forest-deep: #0d2b1c;
  --phe-forest: #123d2a;
  --phe-forest-lift: #16452f;
  --phe-forest-soft: #286044;
  --phe-sand: #d5ccb8;
  --phe-off-white: #f4f2eb;
  --phe-accent: #e3ad0b;

  --phe-ink: var(--phe-off-white);
  --phe-ink-soft: rgba(244, 242, 235, 0.68);
  /* 0.82, not a rounder 0.6: measured against the lifted forest this is
     5.1:1, and the proof line is evidence rather than decoration. */
  --phe-ink-mid: rgba(213, 204, 184, 0.82);
  --phe-line: rgba(213, 204, 184, 0.16);
  --phe-ease: cubic-bezier(0.16, 0.84, 0.28, 1);

  --phe-display: var(--themeht-typography-secondary-font-family, inherit);

  position: relative;
  isolation: isolate;
  color: var(--phe-ink);
  padding: clamp(56px, 5vw, 96px) clamp(20px, 3.6vw, 84px);
  overflow: hidden;

  /* ----------------------------------------------------------
     BACKGROUND FIELD

     Three layers, painted front to back:

       1. edge scrim   darkens the top and bottom bands so the
                       eyebrow and the proof bar keep their contrast
                       over the bright part of the photograph
       2. left scrim   carries the headline and the lead. The image
                       is already dark on the left, but `cover` crops
                       differently at every viewport, so the type
                       cannot depend on where the artwork happens to
                       be dark - it needs its own floor.
       3. photograph   the environmental field itself

     `background-color` sits under all of it, so the section is never
     bare while the image loads and never depends on it. The image is
     decorative: nothing here is content, and it carries no meaning
     the copy does not already state.

     No `background-attachment: fixed` - it janks on scroll and is
     broken on iOS. This scrolls with the section like everything else.
     ---------------------------------------------------------- */
  background-color: var(--phe-forest);
  background-image:
    linear-gradient(
      180deg,
      rgba(13, 43, 28, 0.66) 0%,
      rgba(13, 43, 28, 0) 22%,
      rgba(13, 43, 28, 0) 58%,
      rgba(11, 36, 24, 0.62) 82%,
      rgba(11, 36, 24, 0.88) 100%
    ),
    linear-gradient(
      96deg,
      rgba(11, 36, 24, 0.96) 0%,
      rgba(11, 36, 24, 0.93) 46%,
      rgba(11, 36, 24, 0.84) 72%,
      rgba(13, 43, 28, 0.52) 90%,
      rgba(13, 43, 28, 0.3) 100%
    ),
    url("../img/pharaon-earth-bg.webp");
  background-repeat: no-repeat;
  background-position: center, center, center right;
  background-size: cover, cover, cover;
}

/* The scrim above is the stacked-layout one: it has to hold all the way
   across, because below 1025px the copy is no longer confined to a left
   column and runs into the bright side of the artwork. Measured at
   768x1024 with the earlier left-biased version, the headline came in at
   2.78:1 and the lead at 2.49:1 - both failing. */
@media (min-width: 1025px) {
  /* Two columns: the type stays left, so the scrim can release much
     earlier and let more of the field show behind the disc. */
  body.home .ph-earth {
    background-image:
      linear-gradient(
        180deg,
        rgba(13, 43, 28, 0.66) 0%,
        rgba(13, 43, 28, 0) 22%,
        rgba(13, 43, 28, 0) 58%,
        rgba(11, 36, 24, 0.62) 82%,
        rgba(11, 36, 24, 0.88) 100%
      ),
      linear-gradient(
        92deg,
        rgba(11, 36, 24, 0.96) 0%,
        rgba(11, 36, 24, 0.9) 26%,
        rgba(13, 43, 28, 0.6) 52%,
        rgba(13, 43, 28, 0.3) 100%
      ),
      url("../img/pharaon-earth-bg.webp");
  }
}

/* Chapter rule. One hairline of earth colour, the only chrome. */
body.home .ph-earth::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 204, 184, 0.34), transparent);
}

body.home .ph-earth__inner {
  max-width: 1560px;
  margin: 0 auto;
}

/* ============================================================
   HEAD ROW - eyebrow over a full-width hairline
   The film section above carried a matching editorial index on
   the right (02 Manufacturing) and this one carried 03. Both were
   removed on request, so the row is a single item now. The flex
   stays: it keeps the baseline alignment and leaves the right-hand
   slot available if an index is ever reinstated.
   ============================================================ */
body.home .ph-earth__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid var(--phe-line);
}

body.home .ph-earth__eyebrow {
  margin: 0;
  font-size: clamp(11px, 0.86vw, 14px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--phe-accent);
}

/* ============================================================
   GRID - controlled asymmetry
   Content is the narrower column on purpose: the visual has to
   stay dominant for the section to be a statement rather than a
   text block with a picture next to it.
   ============================================================ */
body.home .ph-earth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(44px, 5vw, 92px);
  align-items: center;
  padding: clamp(34px, 3.4vw, 64px) 0 clamp(32px, 3vw, 56px);
}

@media (min-width: 1025px) {
  body.home .ph-earth {
    /* min-height, never height: content always wins over the target. */
    min-height: 92vh;
    display: flex;
    align-items: center;
  }
  body.home .ph-earth__inner { width: 100%; }
  body.home .ph-earth__grid {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  }
}

/* ============================================================
   CONTENT ZONE
   ============================================================ */
body.home .ph-earth__title {
  margin: 0;
  font-family: var(--phe-display);
  font-weight: 600;
  font-size: clamp(38px, 4.5vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--phe-ink);
}

body.home .ph-earth__line {
  display: block;
  overflow: hidden;
  /* Descender guard - the mask would otherwise clip g/y/p. */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

body.home .ph-earth__line > span { display: block; }

body.home .ph-earth__title .ph-earth__accent { color: var(--phe-accent); }

/* The one small accent detail the composition gets. */
body.home .ph-earth__rule {
  display: block;
  width: clamp(56px, 5vw, 84px);
  height: 1px;
  margin: clamp(26px, 3vw, 42px) 0 0;
  border: 0;
  background: var(--phe-accent);
  transform-origin: left center;
}

body.home .ph-earth__lead {
  max-width: 52ch;
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
  color: var(--phe-ink-soft);
}

/* ============================================================
   EARTH VISUAL
   A cropped disc of the real plant, an orbit hairline and a
   shallow horizon arc. No globe, no map, no leaves - the circle
   and the curve carry the idea on their own.
   ============================================================ */
body.home .ph-earth__visual {
  position: relative;
  width: 100%;
  max-width: min(84vw, 420px);
  margin-inline: auto;
  aspect-ratio: 1;
}

/* Desktop cap. This has to live below the base declaration, not up with
   the grid rules: both selectors weigh the same, so source order is the
   only thing deciding which max-width wins. */
@media (min-width: 1025px) {
  /* Three ceilings, and the smallest wins:
       45vw    fills the 53fr column,
       780px   stops it growing past the 1560px inner shell,
       56vh    is what actually keeps the whole section inside one screen.
     Without the vh term the disc alone pushed the section past 120vh on a
     1080p laptop, which defeats the point of a single-screen statement. */
  body.home .ph-earth__visual { max-width: min(45vw, 780px, 56vh); }
}

/* Soft field glow. A gradient, not a blur filter - nothing to repaint. */
body.home .ph-earth__visual::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(40, 96, 68, 0.5) 0%, rgba(40, 96, 68, 0) 70%);
  pointer-events: none;
}

body.home .ph-earth__orbit {
  position: absolute;
  inset: -7%;
  border: 1px solid rgba(213, 204, 184, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

/* Earth curvature: a very flat ellipse, only its top edge drawn. */
body.home .ph-earth__horizon {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 190%;
  aspect-ratio: 3.1 / 1;
  transform: translateX(-50%);
  border-top: 1px solid rgba(213, 204, 184, 0.28);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

body.home .ph-earth__disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--phe-forest-deep);
  /* clip-path, not just border-radius: the reveal animates its radius and
     Safari keeps a transformed child inside a clip-path far more reliably
     than inside an overflow-hidden rounded box. */
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

/**
 * The image box is a true 16:9 rectangle, not a square with object-fit
 * doing the cropping. That is a correctness fix, not a style choice.
 *
 * WordPress 6.7 prepends sizes="auto" to every lazy image, and "auto"
 * means "use this element's own layout width". With a square box the
 * layout width was the disc diameter, so a 605px disc asked for a 768w
 * file and then upscaled it to cover - 1.4x, and visibly soft. Sizing the
 * box the way the picture is actually shaped makes the layout width the
 * honest number (~2x the disc), so the browser picks the right file on its
 * own and keeps doing so if the disc is ever resized.
 *
 *   height 112%      6% of parallax headroom above and below the circle
 *   width  199.11%   112% x 16/9, so the box matches the source ratio
 *   left  -79.6%     frames the extrusion line, x 40-90% of the source,
 *                    which also crops the Vietnamese floor signage out
 *
 * Centring is done with `left`, never transform: GSAP owns the transform
 * on this element and would overwrite a translateX.
 */
body.home .ph-earth__disc-inner {
  position: absolute;
  top: -6%;
  left: -79.6%;
  width: 199.11%;
  height: 112%;
}

/* will-change is a standing memory cost, so it is only paid where the
   parallax actually runs. The JS adds .is-parallax on desktop only. */
body.home .ph-earth.is-parallax .ph-earth__disc-inner {
  will-change: transform;
}

body.home .ph-earth__disc-img {
  display: block;
  width: 100%;
  height: 100%;
  /* The box already matches the source ratio, so cover is a no-op today.
     It stays as the guard for the day someone swaps in a different crop. */
  object-fit: cover;
  object-position: center;
  /* Pulls the plant photography toward the section's own palette without
     tinting it into something the plant does not look like. */
  filter: saturate(0.72) contrast(1.06) brightness(0.94);
}

/* Sinks the disc into the forest field instead of pasting it on top. */
body.home .ph-earth__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(202deg, rgba(18, 61, 42, 0) 18%, rgba(13, 43, 28, 0.5) 58%, rgba(11, 36, 24, 0.86) 84%, rgba(11, 36, 24, 0.96) 100%),
    radial-gradient(70% 70% at 40% 24%, rgba(244, 242, 235, 0.12) 0%, rgba(244, 242, 235, 0) 62%);
  pointer-events: none;
}

/* ============================================================
   PROOF BAR
   Evidence, not advertising: a rule, four plain terms, and the
   standard number carrying its own caption. No badge, no logo.
   ============================================================ */
body.home .ph-earth__proof-bar {
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--phe-line);
}

body.home .ph-earth__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 26px) clamp(16px, 2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--phe-ink-mid);
}

/* Separators are drawn into the column gap rather than typed into the copy,
   so the list can wrap at any breakpoint without stranding a "·". They
   trail each item instead of leading the next one: a wrapped row then ends
   on a continuation mark instead of opening with a stray bullet. */
body.home .ph-earth__proof li {
  position: relative;
}

body.home .ph-earth__proof li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.5em;
  right: calc(clamp(16px, 2vw, 34px) / -2);
  width: 3px;
  height: 3px;
  margin-right: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

body.home .ph-earth__proof-iso {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.home .ph-earth__proof-std {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--phe-ink);
}

body.home .ph-earth__proof-std::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--phe-accent);
}

body.home .ph-earth__proof-note {
  padding-left: 13px;   /* aligns under the standard, past the dot */
  font-size: 0.84em;
  letter-spacing: 0.12em;
  /* Deliberately not a faded token: at the fade this caption used to carry
     it measured 2.3:1. It names the standard, so it clears AA (4.8:1) and
     takes its step down in the hierarchy from size, not from contrast. */
  color: rgba(213, 204, 184, 0.78);
}

/* ============================================================
   TABLET
   Hierarchy is preserved, the treatment is not: the disc stops
   competing with the headline and the composition goes vertical.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 52vh joins the ceilings for the same reason it does on desktop: a
     landscape tablet was spending 1.5 screens on one section. */
  body.home .ph-earth__visual { max-width: min(58vw, 520px, 52vh); }
  body.home .ph-earth__title { font-size: clamp(46px, 6.4vw, 66px); }
  body.home .ph-earth__lead { max-width: 60ch; }
  body.home .ph-earth__grid { gap: 38px; padding: 40px 0 36px; }
}

/* ============================================================
   MOBILE
   Deliberately re-ordered, not shrunk: the visual is promoted
   above the paragraph so the statement and the plant land in the
   first screen and the reading copy follows.
   ============================================================ */
@media (max-width: 767px) {
  body.home .ph-earth {
    padding: 56px 20px 48px;

    /* A 16:9 field inside a portrait box: `cover` would blow the artwork
       up and show a random vertical sliver of it. Serve the 900px file
       (17 KB against 68 KB) pinned to the top, let it cover the upper
       part of the section, and let the flat forest carry the rest. The
       scrim is heavier here because the content is over the image the
       whole way down rather than beside it. */
    background-image:
      linear-gradient(
        180deg,
        /* 0.84 at the very top, not 0.7: the gold eyebrow is the least
           forgiving colour in the section against green, and at 360px
           the bright part of the artwork lands right under it - it
           measured 4.38:1 there before this stop was raised. */
        rgba(13, 43, 28, 0.84) 0%,
        rgba(13, 43, 28, 0.6) 22%,
        rgba(13, 43, 28, 0.88) 54%,
        var(--phe-forest) 76%
      ),
      url("../img/pharaon-earth-bg-900.webp");
    background-position: center, 62% top;
    background-size: cover, 148% auto;
  }

  body.home .ph-earth__grid {
    padding: 36px 0 40px;
    gap: 34px;
  }

  body.home .ph-earth__content {
    display: contents;
  }

  body.home .ph-earth__title { order: 1; font-size: clamp(34px, 9.2vw, 46px); }
  body.home .ph-earth__visual { order: 2; max-width: min(82vw, 380px); }
  body.home .ph-earth__rule { order: 3; margin-top: 0; }
  body.home .ph-earth__lead { order: 4; margin-top: -14px; }

  body.home .ph-earth__horizon { width: 168%; }
  body.home .ph-earth__orbit { inset: -6%; }

  /* Cheaper on mobile GPUs and the small disc does not need the grade. */
  body.home .ph-earth__disc-img { filter: saturate(0.78) contrast(1.04); }

  body.home .ph-earth__head { gap: 14px; }
  body.home .ph-earth__eyebrow { font-size: 11px; letter-spacing: 0.16em; }

  /* Below 768 every term takes a full row anyway, so the list becomes an
     actual list. The separators are dropped rather than left trailing the
     end of each line, where they read as debris instead of punctuation. */
  body.home .ph-earth__proof {
    display: grid;
    gap: 11px;
    letter-spacing: 0.14em;
  }
  body.home .ph-earth__proof li:not(:last-child)::after { content: none; }
  body.home .ph-earth__proof-iso { margin-top: 3px; }
}

@media (max-width: 380px) {
  body.home .ph-earth__title { font-size: 32px; }
  body.home .ph-earth__proof { font-size: 11px; }
}

/* ============================================================
   ARMED STATES
   These only exist once JS has stamped .is-ready, so a visitor
   without JS - or with reduced motion, where .is-ready is never
   added - always sees the finished section.
   ============================================================ */
body.home .ph-earth.is-ready .ph-earth__line > span {
  transform: translateY(105%);
  transition: transform 900ms var(--phe-ease);
}

body.home .ph-earth.is-ready .ph-earth__eyebrow,
body.home .ph-earth.is-ready .ph-earth__lead,
body.home .ph-earth.is-ready .ph-earth__proof-bar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--phe-ease), transform 700ms var(--phe-ease);
}

body.home .ph-earth.is-ready .ph-earth__rule {
  transform: scaleX(0);
  transition: transform 700ms var(--phe-ease);
}

body.home .ph-earth.is-ready .ph-earth__disc {
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  transition: clip-path 1100ms var(--phe-ease), -webkit-clip-path 1100ms var(--phe-ease);
}

body.home .ph-earth.is-ready .ph-earth__disc-img {
  transform: scale(1.08);
  transition: transform 1400ms var(--phe-ease);
}

body.home .ph-earth.is-ready .ph-earth__orbit,
body.home .ph-earth.is-ready .ph-earth__horizon {
  opacity: 0;
  transition: opacity 1100ms var(--phe-ease);
}

/* ============================================================
   REVEALED
   ============================================================ */
body.home .ph-earth.is-revealed .ph-earth__eyebrow { transition-delay: 60ms; }

body.home .ph-earth.is-revealed .ph-earth__eyebrow,
body.home .ph-earth.is-revealed .ph-earth__lead,
body.home .ph-earth.is-revealed .ph-earth__proof-bar {
  opacity: 1;
  transform: none;
}

body.home .ph-earth.is-revealed .ph-earth__line > span { transform: none; }
body.home .ph-earth.is-revealed .ph-earth__line:nth-child(1) > span { transition-delay: 200ms; }
body.home .ph-earth.is-revealed .ph-earth__line:nth-child(2) > span { transition-delay: 310ms; }

body.home .ph-earth.is-revealed .ph-earth__rule {
  transform: none;
  transition-delay: 460ms;
}

body.home .ph-earth.is-revealed .ph-earth__lead { transition-delay: 520ms; }

body.home .ph-earth.is-revealed .ph-earth__disc {
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  transition-delay: 120ms;
}

body.home .ph-earth.is-revealed .ph-earth__disc-img {
  transform: none;
  transition-delay: 120ms;
}

body.home .ph-earth.is-revealed .ph-earth__orbit {
  opacity: 1;
  transition-delay: 420ms;
}

body.home .ph-earth.is-revealed .ph-earth__horizon {
  opacity: 1;
  transition-delay: 560ms;
}

body.home .ph-earth.is-revealed .ph-earth__proof-bar { transition-delay: 640ms; }

/* ============================================================
   REDUCED MOTION
   .is-ready is never stamped under this preference, so this block
   is a second lock rather than the only one. Everything stays put
   and everything stays readable.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.home .ph-earth.is-ready .ph-earth__line > span,
  body.home .ph-earth.is-ready .ph-earth__eyebrow,
  body.home .ph-earth.is-ready .ph-earth__lead,
  body.home .ph-earth.is-ready .ph-earth__rule,
  body.home .ph-earth.is-ready .ph-earth__proof-bar,
  body.home .ph-earth.is-ready .ph-earth__orbit,
  body.home .ph-earth.is-ready .ph-earth__horizon,
  body.home .ph-earth.is-ready .ph-earth__disc-img,
  body.home .ph-earth.is-revealed .ph-earth__line > span,
  body.home .ph-earth.is-revealed .ph-earth__eyebrow,
  body.home .ph-earth.is-revealed .ph-earth__lead,
  body.home .ph-earth.is-revealed .ph-earth__rule,
  body.home .ph-earth.is-revealed .ph-earth__proof-bar,
  body.home .ph-earth.is-revealed .ph-earth__orbit,
  body.home .ph-earth.is-revealed .ph-earth__horizon,
  body.home .ph-earth.is-revealed .ph-earth__disc-img {
    opacity: 1 !important;       /* [override-important] a11y */
    transform: none !important;  /* [override-important] a11y */
    transition: none !important; /* [override-important] a11y */
  }

  body.home .ph-earth.is-ready .ph-earth__disc,
  body.home .ph-earth.is-revealed .ph-earth__disc {
    clip-path: circle(50% at 50% 50%) !important;         /* [override-important] a11y */
    -webkit-clip-path: circle(50% at 50% 50%) !important; /* [override-important] a11y */
    transition: none !important;                          /* [override-important] a11y */
  }
}

/* ============================================================
   ELEMENTOR EDITOR
   The JS bails out inside the editor, so .is-ready is never added
   and nothing here is strictly required. It stays as a hard floor:
   an editor must never be handed a section at opacity 0.
   ============================================================ */
body.elementor-editor-active .ph-earth__line > span,
body.elementor-editor-preview .ph-earth__line > span,
body.elementor-editor-active .ph-earth__eyebrow,
body.elementor-editor-preview .ph-earth__eyebrow,
body.elementor-editor-active .ph-earth__lead,
body.elementor-editor-preview .ph-earth__lead,
body.elementor-editor-active .ph-earth__rule,
body.elementor-editor-preview .ph-earth__rule,
body.elementor-editor-active .ph-earth__proof-bar,
body.elementor-editor-preview .ph-earth__proof-bar,
body.elementor-editor-active .ph-earth__orbit,
body.elementor-editor-preview .ph-earth__orbit,
body.elementor-editor-active .ph-earth__horizon,
body.elementor-editor-preview .ph-earth__horizon,
body.elementor-editor-active .ph-earth__disc-inner,
body.elementor-editor-preview .ph-earth__disc-inner,
body.elementor-editor-active .ph-earth__disc-img,
body.elementor-editor-preview .ph-earth__disc-img {
  opacity: 1 !important;       /* [override-important] editor safety */
  transform: none !important;  /* [override-important] editor safety */
  transition: none !important; /* [override-important] editor safety */
}

body.elementor-editor-active .ph-earth__disc,
body.elementor-editor-preview .ph-earth__disc {
  clip-path: circle(50% at 50% 50%) !important;         /* [override-important] editor safety */
  -webkit-clip-path: circle(50% at 50% 50%) !important; /* [override-important] editor safety */
}