/* ═══════════════════════════════════════════════════════════════════════════
   apex-ridge.css — THE site's one hero ridge.

   The pale peaks that sit low behind a hero and dissolve into the page. Built
   and corrected on the AI Consulting hero over 2026-09-04 and rolled out from
   there, so every page inherits the corrections instead of repeating the bugs.

   THE MODEL: A BAND, NOT A STRIP.

   The scene is a band of a fixed height across the hero's bottom edge, and the
   photograph sits inside it, bottom anchored and pushed a little further down
   so its base is never the thing you see end. The band is what the page tunes;
   the photograph only ever fills it.

   That is the second model. The first sized the photograph against the hero and
   hid a slice of it below the fold, which meant the composition changed with
   every viewport: the wider the screen, the taller the photograph, while heroes
   get SHORTER as they widen because their copy stops wrapping. At 1920 the
   Services ridge had climbed into the h1. --ridge-max cannot save it either,
   because full bleed needs `max(100%, …)` and that floor beats the cap on any
   screen wider than the cap. A band fixes the composition and lets the
   magnification move instead, which is what scenery should do.

   Five things are load-bearing:

   1. FULL BLEED NEEDS max-width: none. main.css sets `img { max-width: 100% }`,
      which capped the photograph at the hero's width while the offset still
      shifted it, so it stopped short of one edge and cut a hard vertical line.

   2. THE BAND HOLDS ITS SHARE. `min(<a cap in px>, <a share of the hero>)`:
      the share keeps short heroes clear of their own copy, the cap stops tall
      heroes turning the horizon into a landscape.

   3. THE PHOTOGRAPH'S BASE MUST BE HIDDEN AND SOFT. It is pushed below the
      band's bottom edge by --ridge-drop, a percentage, so the hidden slice is
      the same fraction at every width; and it dissolves just above where it is
      cut, so the cut itself never lands on an opaque pixel. That pairing is
      what the owner meant by "the mountains cut abruptly at the bottom".

   4. THE HERO MUST BE ITS OWN STACKING CONTEXT. That is the page's whole
      integration: `position: relative; isolation: isolate` on the hero, and
      nothing on the hero's children. Without the stacking context a negative
      layer can fall behind the page's background instead of the hero's.

   5. THE BAND CANNOT OUTGROW THE PHOTOGRAPH. Between about 900 and 1300 pixels
      the photograph is shorter than a 330px band, and a band taller than what
      is in it puts the photograph's own top edge in the open. The band carries
      a vw term for that, and the photograph fades its sky in regardless, so the
      edge is soft wherever the two disagree.

   6. NEVER object-fit: cover. It magnifies the artwork into two separate
      mountain groups with a hole in the middle. Natural aspect only.

   A page tints and sizes it with the custom properties below, and never forks
   the rules.
   ═══════════════════════════════════════════════════════════════════════════ */

.apex-ridge {
    /* a page overrides these and nothing else */
    --ridge-band:    min(330px, 23vw, 46%);  /* a px cap, the photograph's own height, or a share of the hero */
    --ridge-fade:    42%;                    /* how much of the band the top dissolve takes */
    --ridge-sky:     26%;                    /* and the photograph's own, for where the band is taller */
    --ridge-scale:   132%;                   /* the photograph's width against the hero */
    --ridge-max:     1980px;                 /* and its cap, before full bleed overrides it */
    --ridge-drop:    10%;                    /* how much of the photograph hides below the band */
    --ridge-hem:     22%;                    /* the dissolve above that hidden base */
    --ridge-opacity: .92;
    --ridge-travel:  70px;                   /* how far it lifts across the hero's exit */

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ridge-band);

    /* ★ BEHIND EVERYTHING THE HERO HOLDS, by being a negative layer inside a
       hero that is its own stacking context (see note 4). The first rollout
       instead raised the copy to z-index 1, which only lifts the ONE element
       you name: on the Business Apps hub the rack is static, so the mountains
       painted over its text, and on the AI Visibility Audit the buyer bubble is
       a positioned sibling AFTER the copy, so the copy jumped on top of it and
       cut a line of the quote in half. A negative layer needs nothing from the
       page's own elements and leaves their order exactly as it was. */
    z-index: -1;
    overflow: hidden;                  /* this is what clips the drop */
    pointer-events: none;

    /* the band's top edge is a dissolve, never a line */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--ridge-fade));
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--ridge-fade));
}

.apex-ridge__img {
    position: absolute;
    left: 50%;
    bottom: 0;

    /* load-bearing: see note 1 above */
    max-width: none;
    height: auto;

    width: max(100%, min(var(--ridge-scale), var(--ridge-max)));

    opacity: var(--ridge-opacity);

    /* see note 3: transparent exactly where the band cuts it, and for one point
       past that, so a sub-pixel rounding error cannot expose an opaque row */
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0, #000 var(--ridge-sky),
        #000 calc(99% - var(--ridge-drop) - var(--ridge-hem)),
        transparent calc(99% - var(--ridge-drop)));
    mask-image: linear-gradient(180deg,
        transparent 0, #000 var(--ridge-sky),
        #000 calc(99% - var(--ridge-drop) - var(--ridge-hem)),
        transparent calc(99% - var(--ridge-drop)));

    /* -50% centres it against left: 50%; --ridge-drop is the resting position;
       --apex-ridge-y is the scroll lift, written by apex-ridge.js and always
       positive, so the photograph only ever rises and the hidden base only
       shrinks, which keeps the cut on transparent pixels at every position */
    transform: translate3d(-50%, calc(var(--ridge-drop) - var(--apex-ridge-y, 0px)), 0);
    will-change: transform;
}

/* At phone widths the band is a thin strip, and at the desktop magnification it
   reads as a smudge rather than mountains. Take a bigger share of the hero and
   push the photograph in closer. */
@media (max-width: 700px) {
    .apex-ridge {
        --ridge-band: min(32vw, 40%);
        --ridge-scale: 180%;
        --ridge-max: 900px;
        --ridge-travel: 40px;
    }
}

/* ★ NOT `transform: none`. The photograph is centred by left:50% plus the -50%
   in its own transform, so blanking the transform parks its left edge on the
   hero's centre line: no mountains across the left half and the right half off
   the frame. Only the scroll term is dropped here. */
@media (prefers-reduced-motion: reduce) {
    .apex-ridge__img {
        transform: translate3d(-50%, var(--ridge-drop), 0);
        will-change: auto;
    }
}