/* ==========================================================================
   About – Sticky Narrative (Moving Transparent Elements)
   Scope: #section-about only
   ========================================================================== */

/* Sticky must be allowed (no hidden overflow on ancestors) */
#content, .content-wrap, #section-about { overflow: visible !important; }

/* Section-scoped variables */
#section-about {
  --pin-shift: 2vh; /* push pinned copy a bit below center; tweak to taste */
}

/* Pinned copy: centered & lowered a touch */
#section-about.ohm-sticky-narrative { position: relative; }
#section-about .ohm-pin{
  position: sticky;
  top: calc(50vh + var(--pin-shift));
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  display: grid; place-items: center;
  text-align: center;
  margin: 0; padding: 0;
  pointer-events: none; /* so elements behind still scroll/click */
}
#section-about .ohm-pin .container{ pointer-events: auto; }

/* Typographic hooks */
#section-about .ohm-pin__eyebrow{
  font-family: var(--font-body, "Archivo", system-ui); letter-spacing:.08em; text-transform:uppercase;
  opacity:.75; margin-bottom:.5rem; font-size: clamp(12px,1.4vw,14px);
}
#section-about .ohm-pin__title{
  font-family: var(--font-display, "Clash Display", "Archivo", system-ui); font-weight:700;
  font-size: clamp(28px, 4vw, 56px); line-height:1.1; margin: 0 0 .4rem; color:#1C1C1C;
}
#section-about .ohm-pin__sub{
  font-size: clamp(16px, 2vw, 22px); color: #555; max-width: 52ch; margin: 0 auto;
}
@media (max-width: 767.98px){ #section-about .ohm-pin{ padding: 0 1rem; } }

/* Stage that scrolls beneath the pinned copy */
#section-about .ohm-stage{
  position: relative; z-index: 1;
  height: 400vh;      /* total scroll length; tune */
  margin-top: -14vh;  /* start elements just behind the pin */
}

/* Elements: ABSOLUTE so they can cross the top edge */
#section-about .ohm-obj{
  position: absolute;
  left: var(--x,50%);   /* base anchor */
  top:  var(--y,50%);   /* base anchor */
  transform: translate3d(0,0,0) scale(var(--s,1)); /* JS adds translate/scale/rotate */
  will-change: transform, opacity, filter;
  pointer-events: none;
  width: clamp(120px, 18vw, 360px);
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.22));
  opacity: .2; /* higher baseline so elements aren't "almost invisible" */
  transition:
    opacity .28s linear,
    filter  .28s linear,
    transform .20s linear,
    transform-origin .20s linear;
}

/* Visibility tiers:
   - current panel: fully on and crisp
   - past panels: faint but still visible
   - future panels: hidden (prevents seeing everything on panel 1) */
#section-about .ohm-obj.is-current{
  opacity: 1;
  filter: drop-shadow(0 24px 70px rgba(0,0,0,.28));
  z-index: 3;
}
#section-about .ohm-obj.is-past{
  opacity: .28;                        /* readable but subdued */
  filter: blur(2px) drop-shadow(0 14px 40px rgba(0,0,0,.18));
  z-index: 1;
}
#section-about .ohm-obj.is-future{
  opacity: 0;                          /* don’t show future sets early */
  filter: none;
  z-index: 0;
}

/* Steps are invisible spacers (not relied on for detection anymore,
   but kept for content mapping/labels) */
#section-about .ohm-steps{ position: relative; }
#section-about .ohm-step{ height: 75vh; }

/* Kill any tint/overlay so background stays pure */
#section-about .ohm-stage::after{ content:none !important; background:none !important; }
#section-about{ background:#fff !important; }
#section-about .ohm-pin, #section-about .ohm-stage{ background:transparent !important; }

/* Small devices: scale down a few heavy elements */
@media (max-width: 576px){
  #section-about .ohm-obj[data-el="2"],
  #section-about .ohm-obj[data-el="6"],
  #section-about .ohm-obj[data-el="10"],
  #section-about .ohm-obj[data-el="12"]{ width: clamp(96px, 28vw, 240px); }
}

/* Do NOT let .ohm-steps contribute height; we only read their data- attributes */
#section-about .ohm-steps{
  position: absolute !important;
  inset: 0 auto auto 0;   /* keep in DOM, but no layout height */
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
#section-about .ohm-step{
  height: 0 !important;
}

/* --- Keep About text clear of the hero edge --- */
#section-about{
  /* a bit of top padding so the pinned block doesn't kiss the hero */
  padding-top: clamp(40px, 10vh, 120px);
  /* if you jump to #section-about from the menu, don't hide under header */
  scroll-margin-top: 12vh;
}

/* --- Keep pinned copy centered horizontally & vertically on phones --- */
@media (max-width: 600px){
  /* bring it a touch closer to center on small screens */
  #section-about { --pin-shift: 4vh; }

  #section-about .ohm-pin{
    /* center + small nudge for notches/safe areas */
    top: calc(50vh + var(--pin-shift) + env(safe-area-inset-top, 0px)/2);
    transform: translateY(-50%);
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;       /* horizontal center */
  }

  /* keep headings readable on narrow viewports */
  #section-about .ohm-pin__title{ font-size: clamp(26px, 7vw, 42px); }
  #section-about .ohm-pin__sub{   font-size: clamp(var(--step-0), 2.2vw, var(--step-2)); }
}

/* Keep all titles to ~2 tidy lines */
#section-about .ohm-pin__title{
  max-width: 20ch;          /* force similar line length */
  margin-inline: auto;
  text-wrap: balance;       /* better line breaks (supported in modern browsers) */
  word-break: keep-all;
}

/* --- More breathing room below the hero --- */
#section-about{
  /* bump the initial white space so the title never kisses the hero */
  padding-top: clamp(80px, 14vh, 180px);
  /* if navigating via anchor, keep extra room for the header, too */
  scroll-margin-top: 16vh;
}

/* Nudge the stage a bit less under the pin so it doesn't "creep" up */
#section-about .ohm-stage{
  margin-top: -8vh; /* was -14vh */
}

/* --- Phone: keep the pinned copy truly centered, safe-area aware --- */
@media (max-width: 600px){
  #section-about { --pin-shift: 6vh; } /* a touch lower than desktop */

  /* Prefer dvh where supported (accounts for mobile browser UI) */
  @supports (height: 100dvh){
    #section-about .ohm-pin{
      top: calc(50dvh + var(--pin-shift));
      transform: translateY(-50%);
      padding-left: 1rem; padding-right: 1rem;
      text-align: center;
    }
  }
  /* Fallback for older browsers */
  @supports not (height: 100dvh){
    #section-about .ohm-pin{
      top: calc(50vh + var(--pin-shift) + env(safe-area-inset-top, 0px)/2);
      transform: translateY(-50%);
      padding-left: 1rem; padding-right: 1rem;
      text-align: center;
    }
  }

  /* keep headings readable on narrow viewports */
  #section-about .ohm-pin__title{ font-size: clamp(26px, 7vw, 42px); }
  #section-about .ohm-pin__sub{   font-size: clamp(15px, 4.5vw, 18px); }
}

/* Extra space under the hero without affecting the pinned center */
#section-about{
  padding-top: clamp(180px, 14vh, 180px);  /* increase/decrease to taste */
  scroll-margin-top: 16vh;                /* for anchor jumps */
}

/* === Consultation hero (dark with top green glow) === */
.ohm-consult-v2{
  position: relative;
  background: #1c1c1c;
  color: #fff;
  overflow: hidden;
  min-height: clamp(360px, 58vh, 560px);
  display: grid;
  grid-template-columns: 1fr minmax(280px, 720px) 1fr; /* L | center copy | R */
  align-items: center;
  padding: clamp(28px, 4vw, 48px) 0;
  isolation: isolate; /* keep glow blending scoped */
}

/* soft green light from top */
.ohm-consult-v2__glow{
  position: absolute; inset: 0 0 auto 0;
  height: 64%;
  background:
    radial-gradient(140% 90% at 50% -10%,
      rgba(0,255,140,.70),
      rgba(0,255,140,.22) 35%,
      rgba(0,255,140,0) 70%);
  filter: blur(28px);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* visuals */
.ohm-consult-v2__visual{
  position: relative; z-index: 1; user-select: none; pointer-events: none;
  max-width: clamp(180px, 27vw, 420px);
  height: auto;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.45));
  transform: translateZ(0);
}
.ohm-consult-v2__visual--left{
  justify-self: end;
  transform: translateY(10px) rotate(-2deg);
  margin-right: clamp(10px, 2vw, 24px);
}
.ohm-consult-v2__visual--right{
  justify-self: start;
  transform: translateY(10px) rotate(4deg);
  margin-left: clamp(10px, 2vw, 24px);
}

/* centered copy */
.ohm-consult-v2__copy{
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 clamp(10px, 2vw, 20px);
}
.ohm-consult-v2__title{
  font-family: var(--font-display, "Clash Display", system-ui);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(28px, 4.2vw, 56px);
  margin: 0 0 .35em;
  color: #fff;
}
.ohm-consult-v2__subtitle{
  font-family: var(--font-body, "Archivo", system-ui);
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1.45;
  opacity: .95;
  margin: 0;
}

/* optional white CTA (works on dark bg) */
.ohm-consult-v2__btn{
  --btn-fg:#0f1426; --btn-bg:#fff; --btn-bg-hover:#f6f7fb;
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top: clamp(12px, 2vw, 18px);
  height: 48px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 6px 28px rgba(0,0,0,.28), 0 2px 0 rgba(255,255,255,.05) inset;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.ohm-consult-v2__btn:hover{
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 2px 0 rgba(255,255,255,.08) inset;
}

/* responsive: stack, keep copy readable, tame visuals */
@media (max-width: 980px){
  .ohm-consult-v2{
    grid-template-columns: 1fr; /* stack */
    padding-bottom: clamp(36px, 8vw, 60px);
  }
  .ohm-consult-v2__visual{
    position: absolute; opacity: 1;
    max-width: clamp(160px, 45vw, 360px);
  }
  .ohm-consult-v2__visual--left{ left: -1%; bottom: -4%; }
  .ohm-consult-v2__visual--right{ right: -8%; bottom: -6%; }
  .ohm-consult-v2__copy{ padding-inline: clamp(16px, 4vw, 28px); }
}

/* ----- Unify body copy size on mobile ----- */
@media (max-width: 680px){

  /* Stop automatic text inflation on iOS/Firefox */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Treat all “subtitle/intro” blocks as regular body on phones */
  .heading-block h1 + span,
  .heading-block h2 + span,
  .heading-block h3 + span,
  .heading-block h4 + span,
  .title-block h1 + span,
  .title-block h2 + span,
  .title-block h3 + span,
  .title-block h4 + span,
  .ohm-services__intro {
    font-size: var(--step-0) !important;   /* 16px */
    line-height: 1.6;                       /* match body rhythm */
  }

  /* About section paragraph under the big title */
  #section-about .ohm-pin__sub {
    font-size: var(--step-0) !important;    /* lock to 16px on phones */
    line-height: 1.6;
  }
}