/* ==========================================================================
   RIA Advisory — INDUSTRIES · OPTION C  ("Interactive")
   Third whole-page direction. Client brief (2026-08-03):
     "client dont like scroll features · userfriendly modern and smooth
      animated · i want totally different concept now"

   So the defining rule of Option C is: **NOTHING is driven by scroll.**
     · no scroll-linked storytelling / pinned media (that was Option B)
     · no sticky sub-nav or scroll-spy (that was Option A)
     · no parallax
     · NO `data-r` scroll-reveals anywhere — content is visible immediately,
       which is also the most user-friendly reading of the brief. Nothing is
       hidden until the reader "unlocks" it by scrolling.
   All motion is therefore either (a) a one-off on-load intro, or (b) a
   response to a click / hover / focus. The page has zero scroll listeners.

   Concept: an APP-LIKE EXPLORER. A segmented control with a sliding
   indicator swaps the practices; products are a one-at-a-time carousel with
   real prev/next controls and dots. Both are things the reader operates.

   IMPORTANT — do NOT wrap these animations in
   `@media (prefers-reduced-motion: no-preference)`. This client's Windows has
   animation effects turned OFF system-wide, which previously killed every
   animation on the site. Motion here is deliberate and unconditional.

   RULES: clamp()/calc() need SPACES around +/- ; grid/flex text kids need
   min-width: 0.
   ========================================================================== */

/* ==========================================================================
   HERO — 2026-08-04 client feedback, corrected: left-aligned (was centred),
   and background is a CSS GRADIENT matched to the homepage hero VIDEO's
   colour palette — cool blue-grey easing through silvery wave-light bands
   into near-white — NOT the video itself (no <video>/<img>, colour-match
   only, per explicit client correction). Credential badge row removed.
   ========================================================================== */
/* 2026-08-06 client correction: "I don't want circles — that circle area
   colour just light blue as now, and grey." So this is now LINEAR-ONLY.
   Every radial-gradient and the ambient orb layer are gone, because both
   rendered as visible round blobs in the open right-hand area the client
   circled. Three stacked linear washes instead: a grey one anchored left
   (keeps contrast under the dark headline), a light-blue one anchored right
   (fills the circled area), and a base diagonal easing to near-white at the
   bottom edge so the section still hands off cleanly to the white below. */
.oc-hero { position: relative; overflow: hidden; isolation: isolate; text-align: left;
  background:
    linear-gradient(100deg, rgba(150,161,179,.62) 0%, rgba(150,161,179,.18) 38%, rgba(150,161,179,0) 58%),
    linear-gradient(255deg, rgba(158,199,232,.58) 0%, rgba(158,199,232,.22) 34%, rgba(158,199,232,0) 62%),
    linear-gradient(158deg, #a7b2c3 0%, #c0cad8 26%, #d6dfe9 50%, #e8edf3 74%, #f7f8f6 100%);
  padding-block: clamp(3.4rem, 2.4rem + 4.4vw, 6rem) clamp(2.6rem, 2rem + 2.6vw, 4rem); }

.oc-hero__in { position: relative; z-index: 1; max-width: 42rem; margin: 0; }
.oc-hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .42rem 1rem; border-radius: 30px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(29,65,121,.16); backdrop-filter: blur(8px);
  font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.oc-hero__eyebrow i { color: var(--orange); }
.oc-hero h1 { font-size: clamp(2.3rem, 1.35rem + 4vw, 4.2rem); line-height: 1.04; letter-spacing: -.032em; margin: 1.3rem 0 1.2rem; }
.oc-hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.oc-hero__lead { color: var(--slate); font-size: clamp(1.02rem, .96rem + .45vw, 1.2rem); line-height: 1.66; max-width: 52ch; margin: 0 0 2.1rem; }
.oc-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-start; }

/* One-off intro — plays once on load, never re-triggered by scrolling. */
.oc-in { opacity: 0; transform: translateY(16px); animation: ocIn .75s cubic-bezier(.22,1,.36,1) forwards; }
.oc-in--1 { animation-delay: .05s; } .oc-in--2 { animation-delay: .16s; }
.oc-in--3 { animation-delay: .27s; } .oc-in--4 { animation-delay: .38s; }
@keyframes ocIn { to { opacity: 1; transform: none; } }

/* ==========================================================================
   SECTION HEAD — centred but compact; C's own treatment.
   ========================================================================== */
.oc-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.oc-head__lbl { font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange); }
.oc-head h2 { font-size: clamp(1.7rem, 1.15rem + 2.4vw, 2.8rem); line-height: 1.1; letter-spacing: -.028em; margin: .9rem 0 .8rem; }
.oc-head p { color: var(--slate); font-size: 1rem; line-height: 1.64; }

/* ==========================================================================
   SEGMENTED CONTROL — the centrepiece. A pill switcher whose active
   indicator SLIDES between segments (JS sets translateX + width), with the
   panel below cross-fading. Entirely click/keyboard driven.
   ========================================================================== */
.oc-seg__bar { position: relative; display: flex; gap: .25rem; padding: .35rem; margin: 0 auto clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  background: #fff; border: 1px solid var(--line); border-radius: 40px; width: max-content; max-width: 100%;
  box-shadow: 0 18px 36px -26px rgba(11,24,48,.4); overflow-x: auto; }
/* The sliding pill. left:0 + translateX keeps the transform cheap to animate. */
.oc-seg__ind { position: absolute; z-index: 0; top: .35rem; left: 0; height: calc(100% - .7rem); border-radius: 30px;
  background: var(--navy); box-shadow: 0 12px 24px -12px rgba(29,65,121,.7);
  transition: transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1); }
.oc-seg__btn { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: .55rem;
  padding: .68rem 1.25rem; border-radius: 30px; font-size: .9rem; font-weight: 600; color: var(--slate);
  white-space: nowrap; transition: color .3s ease; }
.oc-seg__btn i { font-size: .92rem; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.oc-seg__btn:hover { color: var(--navy); }
.oc-seg__btn:hover i { transform: translateY(-2px); }
.oc-seg__btn.is-active { color: #fff; }

.oc-seg__panels { position: relative; }
.oc-seg__panel { display: none; }
.oc-seg__panel.is-active { display: block; animation: ocPanel .5s cubic-bezier(.22,1,.36,1); }
@keyframes ocPanel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.oc-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 1.1rem + 2.4vw, 3.2rem); align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); box-shadow: 0 30px 60px -44px rgba(11,24,48,.4); }
.oc-panel > * { min-width: 0; }
.oc-panel__k { font-family: var(--font-mono, monospace); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--orange); }
.oc-panel h3 { font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2rem); line-height: 1.12; letter-spacing: -.022em; margin: .7rem 0 .8rem; }
.oc-panel > div > p { color: var(--slate); font-size: 1rem; line-height: 1.66; margin-bottom: 1.3rem; }
.oc-panel__ul { list-style: none; display: grid; gap: .6rem; padding-left: 0; }
.oc-panel__ul li { position: relative; padding-left: 1.75rem; font-size: .93rem; line-height: 1.5; color: var(--ink); }
.oc-panel__ul li i { position: absolute; left: 0; top: .18rem; color: var(--navy); font-size: .85rem; }
.oc-panel__media { border-radius: 15px; overflow: hidden; aspect-ratio: 4 / 3.2; }
.oc-panel__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .oc-panel { grid-template-columns: minmax(0, 1fr); }
  .oc-panel__media { order: -1; aspect-ratio: 16 / 9; }
  .oc-seg__bar { width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   APPROACH — three quiet columns; the motion is a wipe on hover, not scroll.
   ========================================================================== */
.oc-appr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .7rem + 1vw, 1.6rem); }
.oc-appr > * { min-width: 0; }
.oc-appr__col { position: relative; overflow: hidden; padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
.oc-appr__col::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(180deg, transparent, var(--sky-tint)); transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s cubic-bezier(.22,1,.36,1); z-index: 0; }
.oc-appr__col:hover { transform: translateY(-5px); border-color: var(--sky); box-shadow: 0 28px 50px -32px rgba(11,24,48,.32); }
.oc-appr__col:hover::before { transform: scaleY(1); }
.oc-appr__col > * { position: relative; z-index: 1; }
.oc-appr__ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  background: var(--sky-tint); color: var(--navy); font-size: 1.2rem; margin-bottom: 1rem;
  transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.oc-appr__col:hover .oc-appr__ico { background: var(--navy); color: #fff; transform: rotate(-8deg) scale(1.06); }
.oc-appr__col h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.oc-appr__col h3 em { font-style: normal; color: var(--orange); }
.oc-appr__col p { color: var(--slate); font-size: .93rem; line-height: 1.6; }
@media (max-width: 800px) { .oc-appr { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   CTA — two columns: the ask on the left, the ways to reach us on the right.
   (A used a diagonal photo split, B a centred typographic close.)
   ========================================================================== */
.oc-cta { background: var(--sky-tint); }
.oc-cta__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 1.2rem + 2.4vw, 3.4rem); align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); box-shadow: 0 34px 64px -44px rgba(11,24,48,.4); }
.oc-cta__grid > * { min-width: 0; }
.oc-cta h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; margin: .8rem 0 .9rem; }
.oc-cta p { color: var(--slate); font-size: 1rem; line-height: 1.64; }
.oc-cta__ways { display: grid; gap: .7rem; }
.oc-way { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; border-radius: 13px;
  border: 1px solid var(--line); background: var(--paper);
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.oc-way:hover { transform: translateX(4px); border-color: var(--sky); box-shadow: 0 18px 34px -24px rgba(11,24,48,.34); }
.oc-way__ico { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--sky-tint); color: var(--navy); font-size: 1rem; transition: background .3s, color .3s; }
.oc-way:hover .oc-way__ico { background: var(--navy); color: #fff; }
.oc-way b { display: block; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: .95rem; color: var(--ink); }
.oc-way__sub { display: block; font-size: .82rem; color: var(--slate); margin-top: .1rem; }
@media (max-width: 860px) { .oc-cta__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   CASE STUDIES — 2026-08-06. Replaces the old "How We Engage" (.oc-appr)
   block on every industry sub-page. Cards are placeholders until the client
   sends real copy, so [data-placeholder] gets a muted, obviously-unfinished
   treatment (dashed rule, greyed stat figures) rather than pretending to be
   finished content. Removing that one attribute promotes a card to live.
   ========================================================================== */
.oc-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .8rem + .7vw, 1.4rem); }
.oc-cases > * { min-width: 0; }
.oc-case { position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.3rem, 1rem + 1vw, 1.85rem); background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 26px 48px -38px rgba(11,24,48,.34);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.oc-case:hover { transform: translateY(-5px); border-color: var(--sky); box-shadow: 0 32px 56px -34px rgba(11,24,48,.34); }
.oc-case__badge { position: absolute; top: 0; right: clamp(1.3rem, 1rem + 1vw, 1.85rem); transform: translateY(-50%);
  padding: .3rem .7rem; border-radius: 20px; background: var(--navy); color: #fff;
  font-family: var(--font-mono, monospace); font-size: .6rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; }
.oc-case__k { font-family: var(--font-mono, monospace); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.oc-case h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -.015em; }
.oc-case p { color: var(--slate); font-size: .93rem; line-height: 1.62; }
.oc-case__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.oc-case__stats li { display: flex; flex-direction: column; gap: .1rem; }
.oc-case__stats b { font-family: var(--font-display, inherit); font-size: 1.5rem; line-height: 1; color: var(--navy); }
.oc-case__stats span { font-size: .78rem; color: var(--slate); }
.oc-case__soon { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem;
  font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); opacity: .75; }

/* Unfinished state — deliberately reads as a placeholder, not as real proof. */
.oc-case[data-placeholder] { border-style: dashed; box-shadow: none; }
.oc-case[data-placeholder]:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.oc-case[data-placeholder] h3,
.oc-case[data-placeholder] p { color: var(--slate); opacity: .68; }
.oc-case[data-placeholder] .oc-case__badge { background: var(--slate); opacity: .55; }
.oc-case[data-placeholder] .oc-case__stats b { color: var(--slate); opacity: .45; }

@media (max-width: 980px) { .oc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .oc-cases { grid-template-columns: minmax(0, 1fr); } }