/* ==========================================================================
   Our Business — scroll-snap panel story with fixed section chrome.
   ========================================================================== */

@layer pages {

  /* --- Page type scale ----------------------------------------------------
     This page runs a tighter heading leading (1.08 vs the site's 1.1) and a
     smaller lede. These are the original design's own values, not a drift —
     reproduced here rather than forced onto the shared scale.

     The eyebrow is NOT one of them any more. It used to be overridden to
     11px / .24em; it now takes the shared 11.5px / .22em so every eyebrow on
     the site matches. That override also had to restate
     `.eyebrow--centred { letter-spacing: .26em }`, because a plain `.eyebrow`
     rule in this layer outranked the modifier sitting in `base`. Both are
     gone, and the modifier applies on its own again.

     Deliberately NOT written as `.panel :is(h1,h2,h3)`. A blanket descendant
     rule outranks every single-class heading rule it passes over, so it
     silently reset .ob-hero__title, .approach__heading and .discipline__title.
     Each heading carries its own values instead.
     ------------------------------------------------------------------------ */

  .lede {
    font-size: clamp(15px, 1.12vw, 17px);
    line-height: var(--leading-relaxed);
  }

  .scroller { scroll-behavior: smooth; }

  .panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-block: clamp(96px, 13vh, 132px);
    overflow: hidden;
  }

  .panel__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: clamp(24px, 5vw, 72px);
  }

  /* Panel backgrounds — each chapter has its own tone. */
  .panel--cover { background: var(--surface-page); }
  .panel--expertise { background: var(--surface-page); }

  /* --- Hero --------------------------------------------------------------- */

  /* 22px under the eyebrow, matching the home page. `#approach` covers the
     unclassed wrapper the "Our approach and value" eyebrow sits above — the
     only div that directly follows an eyebrow on this page. Everywhere else
     already spaces itself, either with its own margin or a .section-head gap,
     so this must stay targeted rather than a blanket `.eyebrow + *`. */
  .ob-hero__title,
  #approach .eyebrow + div {
    margin-top: var(--space-5);
  }

  .ob-hero__title {
    max-width: 13ch;
    font-size: clamp(50px, 6vw, 86px);
    line-height: 1.04;
    /* Not .display-hero's -.03em — this page's hero tracks looser. */
    letter-spacing: -.018em;
  }

  .ob-hero__lede {
    max-width: 600px;
    margin-top: 30px;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.64;
    color: var(--text-light);
  }

  .ob-hero__cta { margin-top: 38px; }

  /* Hero image drifts in on load. */
  .ob-hero__media {
    opacity: 0;
    animation: media-in 1.5s var(--ease-out) .05s both;
  }

  @keyframes media-in {
    from { opacity: 0; transform: scale(1.09); }
    to   { opacity: 1; transform: none; }
  }

  /* --- How we do it ------------------------------------------------------- */
  .approach__topo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../../assets/images/value-topo-bg.png") center right / cover;
    opacity: .62;
  }

  .approach__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg,
      var(--surface-tint) 0%,
      rgba(10, 26, 16, .96) 30%,
      rgba(10, 26, 16, .62) 72%,
      rgba(10, 26, 16, .34) 100%);
  }

  .approach__statements {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 880px;
    margin-top: var(--space-6);
  }

  .approach__statement {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: var(--weight-bold);
    line-height: 1.55;
    letter-spacing: -.01em;
    color: var(--text-pale);
  }

  .approach__rule {
    height: 1px;
    margin-block: clamp(20px, 3vh, 32px);
    background: var(--line);
  }

  .approach__heading {
    margin-bottom: clamp(28px, 4vh, 40px);
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.12;
    letter-spacing: -.018em;
  }

  .value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* --- Expertise & ecosystem ---------------------------------------------- */
  .ob-feature__title {
    margin-top: 20px;
    font-size: clamp(40px, 5.2vw, 74px);
    line-height: 1.08;
    letter-spacing: -.018em;
    color: var(--text-bright);
  }

  .ob-feature__lede {
    max-width: 640px;
    margin-inline: auto;
    margin-top: var(--space-5);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.74;
    color: var(--text-pale);
  }

  .eco-hub {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
  }

  .eco-hub img {
    width: clamp(34px, 3vw, 42px);
    height: auto;
    opacity: .95;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
  }

  :where(.js) .eco-hub.reveal:not(.is-visible) img {
    opacity: 0;
    transform: scale(.82);
  }

  .eco-hub.reveal.is-visible img { transition-delay: .15s; }

  .eco-hub__line {
    width: 1px;
    height: clamp(20px, 3vh, 32px);
    margin-top: var(--space-3);
    background: linear-gradient(180deg, var(--cx-green), rgba(51, 236, 117, 0));
  }

  .eco-tabs {
    max-width: 1000px;
    margin-inline: auto;
  }

  .eco-outro {
    display: flex;
    justify-content: center;
    margin-top: clamp(34px, 4.5vh, 52px);
  }

  /* --- Responsive --------------------------------------------------------- */
  @media (max-width: 1080px) {
    .panel {
      min-height: auto;
      overflow: visible;
    }
  }

  @media (max-width: 1020px) {
    .value-grid {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
  }
}