/* ==========================================================================
   KOMA BUSINESS · About page
   Loaded after main.css. Everything here is scoped to .ab-* classes so the
   approved Home and Ecosystem pages cannot be affected. Content, type scale
   and atmosphere follow the live insidekoma.com/pages/about (GemPages) build;
   the scroll interaction is new.

   Three layout modes:
   1. Stacked (min-width 768, min-height 600, motion allowed): the four story
      chapters are full-viewport sticky sheets. Each new chapter rises over
      the previous one, which dims and recedes very slightly.
   2. Flow (mobile, short viewports, reduced motion): normal document flow.
   3. No JS: flow layout with every chapter fully lit.
   ========================================================================== */

:root {
  --ab-sheet: #0f0f0f;
  --ab-title-lit: #f5f5f7;
  --ab-title-dim: rgba(230, 230, 230, 0.26);
  --ab-body-lit: rgba(230, 230, 230, 0.92);
  --ab-body-dim: rgba(230, 230, 230, 0.3);
  --ab-principle-dim: rgba(230, 230, 230, 0.34);
  --ab-teal-air: rgba(0, 63, 54, 0.34);
  --ab-teal-night: rgba(2, 30, 28, 0.92);
  --ab-glow: rgba(0, 128, 104, 0.085);
  --ab-slow: 1500ms;
  --ab-lift: 14px;
}

/* Current page in the shared header */
.site-header__nav a[aria-current="page"] {
  color: var(--text-bright);
}

.ab-br-m {
  display: none;
}

/* Hero
   ========================================================================== */

.ab-hero {
  position: relative;
  z-index: 0;
  min-height: 1012px;
  padding: 252px 31px 120px;
  overflow: hidden;
  background: linear-gradient(40deg, var(--bg) 1%, var(--bg) 77%, var(--teal-deep) 100%);
  text-align: center;
}

.ab-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  will-change: transform, opacity;
}

.ab-hero__eyebrow {
  font-size: 16px;
}

.ab-hero__title {
  margin-bottom: 19px;
  color: var(--text);
  font-size: 76px;
  font-weight: 600;
  line-height: 1.3;
}

.ab-hero__line {
  display: block;
}

.ab-hero__lead {
  color: var(--text-muted);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

/* Load-in: one slow rise, staggered only slightly */
@keyframes ab-rise {
  from {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .ab-in {
    animation: ab-rise 1600ms var(--ease-out) var(--d, 0ms) both;
  }
}

/* Story chapters (shared)
   ========================================================================== */

.ab-story {
  position: relative;
  z-index: 1;
  background: var(--ab-sheet);
}

.ab-chapter {
  position: relative;
  overflow: hidden;
  background: var(--ab-sheet);
}

/* Depth veil: darkens a chapter as the next one rises over it (JS sets --cover) */
.ab-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #050505;
  opacity: calc(var(--cover, 0) * 0.62);
  pointer-events: none;
}

.ab-chapter__atmos,
.ab-chapter__bridge,
.ab-chapter__glow {
  position: absolute;
  pointer-events: none;
}

/* Quiet illumination that settles in when a chapter becomes active */
.ab-chapter__atmos {
  inset: 0;
  background: radial-gradient(60% 70% at var(--glow-x, 70%) var(--glow-y, 30%), var(--ab-teal-air), transparent 72%);
  opacity: 1;
  transition: opacity 1800ms var(--ease-out);
}

/* The ecosystem chapter starts to take on the teal of the invitation below */
.ab-chapter__bridge {
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100svh;
  background: linear-gradient(0deg, var(--ab-teal-night) 0%, rgba(2, 30, 28, 0.35) 22%, rgba(2, 30, 28, 0) 48%);
  opacity: var(--bridge, 1);
}

/* Pointer-following light (desktop, fine pointer only; JS positions it) */
.ab-chapter__glow {
  top: 0;
  left: 0;
  display: none;
  width: 1500px;
  height: 1500px;
  margin: -750px 0 0 -750px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ab-glow), rgba(0, 128, 104, 0.035) 48%, rgba(0, 128, 104, 0) 100%);
  opacity: 0;
  transform: translate3d(var(--gx, 70vw), var(--gy, 40vh), 0);
  transition: opacity 1600ms var(--ease-out);
  will-change: transform;
}

.ab-chapter__depth {
  position: relative;
  z-index: 2;
  width: 100%;
  transform: scale(calc(1 - var(--cover, 0) * 0.015));
  transform-origin: 50% 40%;
}

.ab-chapter__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}

.ab-chapter__title {
  max-width: 576px;
  color: var(--ab-title-lit);
  font-size: 76px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.ab-chapter__body {
  max-width: 500px;
  color: var(--ab-body-lit);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

.ab-principle,
.ab-principle-rest {
  transition: color 1300ms var(--ease-out);
}

/* Active/inactive states (only with JS and motion allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .ab-chapter__title,
  .js .ab-chapter__body {
    transition:
      color var(--ab-slow) var(--ease-out),
      opacity var(--ab-slow) var(--ease-out);
  }

  .js .ab-chapter__inner {
    transform: translate3d(0, var(--ab-lift), 0);
    transition: transform 1700ms var(--ease-out);
  }

  .js .ab-chapter:not(.is-active) .ab-chapter__title {
    color: var(--ab-title-dim);
  }

  .js .ab-chapter:not(.is-active) .ab-chapter__body {
    color: var(--ab-body-dim);
  }

  .js .ab-chapter:not(.is-active) .ab-chapter__atmos {
    opacity: 0;
  }

  .js .ab-chapter.is-active .ab-chapter__inner {
    transform: none;
  }

  /* "What we believe": principles light one by one, then the rest settles */
  .js .ab-chapter--believe .ab-chapter__body {
    color: var(--ab-principle-dim);
  }

  .js .ab-chapter--believe .ab-principle.is-lit {
    color: var(--ab-title-lit);
  }

  .js .ab-chapter--believe .ab-principle-rest.is-lit {
    color: var(--ab-body-lit);
  }

  .js .ab-chapter--believe:not(.is-active) .ab-principle,
  .js .ab-chapter--believe:not(.is-active) .ab-principle-rest {
    color: var(--ab-body-dim);
  }
}

/* Stacked mode: sticky sheets moving through depth
   ========================================================================== */

@media (min-width: 768px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .ab-chapter {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    margin-bottom: 26vh;
    margin-bottom: 26svh;
    border-top: 1px solid rgba(255, 255, 255, 0.035);
    box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.55);
  }

  .ab-chapter--believe {
    margin-bottom: 34vh;
    margin-bottom: 34svh;
  }

  /* The last sheet is not sticky: it rises over "What we believe", its
     stage holds for a moment, then the whole sheet carries its teal lower
     edge straight into the invitation. The sheet itself must not clip
     (that would break the stage's sticky positioning), so the stage clips
     the pointer light instead. */
  .ab-chapter--eco {
    position: relative;
    display: block;
    height: auto;
    min-height: 130vh;
    min-height: 130svh;
    margin-bottom: 0;
    overflow: visible;
  }

  .ab-chapter__stage {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  .ab-chapter__inner {
    padding-top: 40px;
  }

  .js .ab-chapter--eco .ab-chapter__bridge {
    opacity: var(--bridge, 0);
  }
}

@media (min-width: 768px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js .ab-chapter__glow {
    display: block;
  }

  .js .ab-chapter.is-active.has-pointer .ab-chapter__glow {
    opacity: 1;
  }
}

/* Flow mode on larger screens (short viewports or reduced motion) */
@media (min-width: 768px) and (max-height: 599px), (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .ab-chapter {
    padding: 180px 0;
  }
}

/* Invitation (wave)
   ========================================================================== */

.ab-wave {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding: 120px 31px;
  overflow: hidden;
  background: var(--bg);
  text-align: center;
  isolation: isolate;
}

.ab-wave__media {
  position: absolute;
  inset: -40px;
  z-index: -3;
  will-change: transform;
  transform: scale(1.04);
}

.ab-wave__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.ab-wave__light {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(52% 62% at 66% 74%, rgba(0, 150, 140, 0.16), rgba(0, 150, 140, 0) 70%);
  opacity: 0.7;
  will-change: opacity;
}

/* Soft seams into the ecosystem chapter above and the section below */
.ab-wave::before,
.ab-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: 120px;
  pointer-events: none;
}

.ab-wave::before {
  top: 0;
  background: linear-gradient(180deg, var(--ab-teal-night) 0%, rgba(2, 30, 28, 0) 100%);
}

.ab-wave::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 10, 0) 100%);
}

.ab-wave__inner {
  max-width: var(--content-max);
}

.ab-wave__title {
  margin-bottom: 20px;
  color: var(--text);
  font-size: 55px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
}

.ab-wave__text {
  color: var(--text);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}

/* Where to start
   ========================================================================== */

.ab-start {
  background: var(--bg);
  padding: 245px 31px 182px;
  text-align: center;
}

.ab-start__inner {
  max-width: 818px;
  margin: 0 auto 66px;
}

.ab-start__title {
  margin-bottom: 52px;
  color: var(--text);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.3;
}

.ab-start__text {
  color: var(--text);
  font-size: 20px;
  font-weight: 200;
  line-height: 1.3;
}

.ab-start__cta,
.ab-final__cta {
  padding: 12px 30px;
}

/* Final CTA
   ========================================================================== */

.ab-final {
  position: relative;
  padding: 262px 31px 290px;
  overflow: hidden;
  background: linear-gradient(42deg, var(--bg) 1%, var(--bg) 77%, #002b24 100%);
  text-align: center;
  isolation: isolate;
}

/* Low green air behind the button */
.ab-final::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 120px;
  z-index: -1;
  width: 900px;
  height: 520px;
  margin-left: -450px;
  background: radial-gradient(closest-side, rgba(1, 155, 78, 0.075), rgba(1, 155, 78, 0) 100%);
  pointer-events: none;
}

.ab-final__title {
  margin-bottom: 20px;
  color: var(--text);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
}

.ab-final__text {
  margin-bottom: 62px;
  color: var(--text);
  font-size: 20px;
  font-weight: 200;
  line-height: 1.3;
}

/* Tablet / small laptop
   ========================================================================== */

@media (max-width: 1100px) {
  .ab-hero__title,
  .ab-chapter__title {
    font-size: clamp(46px, 6.2vw, 76px);
  }

  .ab-chapter__body {
    font-size: 18px;
    line-height: 1.55;
  }

  .ab-hero__lead {
    font-size: 19px;
  }

  .ab-wave__title {
    font-size: clamp(42px, 4.8vw, 55px);
  }

  .ab-start__title {
    font-size: clamp(44px, 4.6vw, 52px);
  }
}

@media (max-width: 900px) {
  .ab-chapter__body,
  .ab-hero__lead {
    font-size: 16px;
    line-height: 1.8;
  }

  .ab-chapter__inner {
    column-gap: 32px;
    padding: 0 32px;
  }

  .ab-wave__text,
  .ab-start__text,
  .ab-final__text {
    font-size: 18px;
  }
}

/* Mobile: document flow, large editorial type, selected slow reveals
   ========================================================================== */

@media (max-width: 767px) {
  .ab-br-d {
    display: none;
  }

  .ab-br-m {
    display: inline;
  }

  /* Hero */
  .ab-hero {
    min-height: 863px;
    min-height: max(760px, calc(100svh + 20px));
    padding: 242px 16px 96px;
  }

  .ab-hero__eyebrow {
    font-size: 16px;
  }

  .ab-hero__title {
    margin-bottom: 19px;
    font-size: 41px;
  }

  .ab-hero__lead {
    font-size: 16px;
    line-height: 1.8;
  }

  /* Chapters */
  .ab-chapter {
    padding: 140px 32px;
  }

  .ab-chapter + .ab-chapter {
    padding-top: 60px;
  }

  .ab-chapter__inner {
    display: block;
    padding: 0;
    text-align: center;
  }

  .ab-chapter__title {
    max-width: none;
    margin: 0 auto 20px;
    font-size: 41px;
  }

  .ab-chapter__body {
    width: 82%;
    max-width: 320px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
  }

  .ab-chapter__atmos {
    background: radial-gradient(90% 60% at var(--glow-x, 70%) var(--glow-y, 30%), rgba(0, 63, 54, 0.26), transparent 72%);
  }

  /* In flow mode the principles light in sequence once the chapter arrives */
  .ab-chapter--believe .ab-principle:nth-child(2) { transition-delay: 260ms; }
  .ab-chapter--believe .ab-principle:nth-child(3) { transition-delay: 520ms; }
  .ab-chapter--believe .ab-principle:nth-child(4) { transition-delay: 780ms; }
  .ab-chapter--believe .ab-principle-rest { transition-delay: 1040ms; }

  /* Invitation: the viewport-sized crop of the live build (its fixed
     background shows the dark, textured centre of the image on phones) */
  .ab-wave {
    min-height: 472px;
    padding: 96px 10px;
  }

  .ab-wave__media {
    inset: auto 0;
    top: calc(50% - 50vh - 40px);
    top: calc(50% - 50lvh - 40px);
    height: calc(100vh + 80px);
    height: calc(100lvh + 80px);
    transform: none;
  }

  .ab-wave__light {
    background: radial-gradient(80% 50% at 70% 70%, rgba(0, 150, 140, 0.12), rgba(0, 150, 140, 0) 70%);
  }

  .ab-wave::before,
  .ab-wave::after {
    height: 80px;
  }

  .ab-wave__title {
    font-size: clamp(21px, 6.1vw, 25px);
    letter-spacing: 0;
  }

  .ab-wave__text {
    font-size: 14px;
  }

  .ab-wave__text br {
    display: none;
  }

  /* Where to start */
  .ab-start {
    padding: 166px 16px 150px;
  }

  .ab-start__inner {
    margin-bottom: 46px;
  }

  .ab-start__title {
    margin-bottom: 40px;
    font-size: 41px;
  }

  .ab-start__text {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
  }

  .ab-start__row > :first-child {
    justify-self: stretch;
  }

  .ab-start__cta {
    width: 100%;
    padding: 12px 24px;
  }

  /* Final CTA */
  .ab-final {
    padding: 182px 16px 210px;
  }

  .ab-final::before {
    bottom: 60px;
    width: 520px;
    height: 360px;
    margin-left: -260px;
  }

  .ab-final__title {
    margin-bottom: 19px;
    font-size: 41px;
  }

  .ab-final__text {
    width: 88%;
    margin: 0 auto 53px;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
  }

  .ab-final__cta {
    padding: 12px 100px;
  }
}

@media (max-width: 380px) {
  .ab-hero__title {
    font-size: 38px;
  }

  .ab-chapter__title,
  .ab-start__title,
  .ab-final__title {
    font-size: 38px;
  }


  .ab-final__cta {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* Reduced motion: everything visible, nothing scroll-linked
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ab-hero__inner,
  .ab-wave__media {
    will-change: auto;
  }

  .ab-chapter::after {
    display: none;
  }

  .ab-chapter__depth {
    transform: none;
  }
}