/* ==========================================================================
   SERVICES — OPTION C · "LIFECYCLE EXPLORER"
   --------------------------------------------------------------------------
   Demo layout option C for the What We Do › Services landing page.
   App-like page: the seven services are grouped into three revenue-lifecycle
   stages (Advise / Deliver / Run) and revealed through a pill switcher that
   cross-fades a bento-ish card grid underneath.

   Everything here is namespaced `sc-` so it cannot collide with the parallel
   option A / option B stylesheets. Shared primitives (.wrap, .section, .btn,
   .grad-text, .oc-head, .oc-cta, .oc-way) come from the already-linked
   round3-final / round3v2 / industries-c sheets and are NOT redefined.

   House rules honoured here:
     · no radial-gradient, no floating circle decoration (client rejected them)
     · no dark navy full-bleed sections — the page stays light throughout
     · no "01 / 02 / 03" numbering
     · no @media (prefers-reduced-motion) wrapper — this client's OS reports
       reduced-motion globally and it would kill every transition on the page
     · clamp()/calc() always keep spaces around + and -
     · every grid/flex child that holds text carries min-width: 0
   ========================================================================== */

/* ==========================================================================
   HERO — gradient stack copied verbatim from .oc-hero (industries-c.css) so
   the services page sits in the same light grey-to-blue family as the live
   industry pages. Three stacked linear-gradients: grey wash from the left,
   blue wash from the right, base diagonal ramp underneath.
   ========================================================================== */
.sc-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.8rem, 2.1rem + 2.8vw, 4.4rem); }

.sc-hero__in { position: relative; z-index: 1; max-width: 46rem; margin: 0; }
.sc-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); }
.sc-hero__eyebrow i { color: var(--orange); }
.sc-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; }
.sc-hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.sc-hero__lead { color: var(--slate); font-size: clamp(1.02rem, .96rem + .45vw, 1.2rem); line-height: 1.66;
  max-width: 56ch; margin: 0 0 2rem; }
.sc-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-start; }

/* Hero meta strip — flat facts, no invented metrics. */
.sc-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin: 1.9rem 0 0; padding: 0; list-style: none; }
.sc-hero__meta li { min-width: 0; display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 30px; background: rgba(255,255,255,.72);
  border: 1px solid rgba(29,65,121,.14); font-size: .8rem; font-weight: 600; color: var(--navy); }
.sc-hero__meta i { color: var(--orange); font-size: .8rem; }

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

/* ==========================================================================
   LIFECYCLE BAND — three stage cards that double as shortcuts into the
   explorer below. Buttons (not links) because they drive the switcher.
   ========================================================================== */
.sc-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, .7rem + .6vw, 1.3rem); align-items: stretch; }
.sc-flow > * { min-width: 0; }

.sc-stage { position: relative; min-width: 0; display: flex; flex-direction: column; gap: .55rem;
  text-align: left; padding: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  background: #fff; border: 1px solid var(--line); border-radius: 16px; cursor: pointer;
  box-shadow: 0 24px 46px -38px rgba(11,24,48,.34);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.sc-stage:hover,
.sc-stage:focus-visible { transform: translateY(-5px); border-color: var(--sky);
  box-shadow: 0 32px 56px -34px rgba(11,24,48,.36); }
.sc-stage__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--sky-tint); color: var(--navy); font-size: 1.05rem;
  transition: background .3s ease, color .3s ease; }
.sc-stage:hover .sc-stage__ico { background: var(--navy); color: #fff; }
.sc-stage__name { font-family: var(--font-display, sans-serif); font-weight: 800;
  font-size: 1.16rem; letter-spacing: -.015em; color: var(--ink); margin-top: .35rem; }
.sc-stage__txt { color: var(--slate); font-size: .93rem; line-height: 1.62; }
.sc-stage__go { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--navy); }
.sc-stage__go i { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.sc-stage:hover .sc-stage__go i { transform: translateX(4px); }

/* Thin arrow between the stage cards — a flat chevron, not a blob. */
.sc-stage::after { content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(.9rem, .7rem + .6vw, 1.3rem) / 2);
  width: 9px; height: 9px; margin-top: -5px; margin-right: -4px;
  border-top: 2px solid var(--sky); border-right: 2px solid var(--sky);
  transform: rotate(45deg); opacity: .7; }
.sc-stage:last-child::after { display: none; }

@media (max-width: 820px) {
  .sc-flow { grid-template-columns: minmax(0, 1fr); }
  .sc-stage::after { display: none; }
}

/* ==========================================================================
   EXPLORER — pill switcher + bento card grid.
   The bar is a plain flex row of buttons; the active pill fills navy. No
   sliding indicator so the whole control degrades gracefully without JS.
   ========================================================================== */
.sc-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
  padding: .38rem; margin: 0 auto clamp(1rem, .85rem + .7vw, 1.5rem);
  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); }
.sc-pill { flex: none; display: inline-flex; align-items: center; gap: .55rem;
  padding: .68rem 1.2rem; border-radius: 30px; font-size: .9rem; font-weight: 600;
  color: var(--slate); white-space: nowrap; cursor: pointer; background: transparent;
  transition: color .28s ease, background-color .34s cubic-bezier(.22,1,.36,1); }
.sc-pill i { font-size: .9rem; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.sc-pill:hover { color: var(--navy); background: var(--sky-tint); }
.sc-pill:hover i { transform: translateY(-2px); }
.sc-pill[aria-pressed="true"] { background: var(--navy); color: #fff;
  box-shadow: 0 12px 24px -12px rgba(29,65,121,.7); }
.sc-pill[aria-pressed="true"] .sc-pill__n { background: rgba(255,255,255,.2); color: #fff; }
.sc-pill__n { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: 20px; background: var(--sky-tint); color: var(--navy);
  font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 600;
  transition: background .3s ease, color .3s ease; }

.sc-status { text-align: center; margin: 0 0 clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate); }

/* --- The grid ------------------------------------------------------------
   Flex rather than grid on purpose: filtering removes cards, and flex-grow
   re-flows the remaining ones so a filtered stage never leaves a hole in the
   layout. Wide cards get a bigger basis + grow, giving the bento variation
   without any per-state column maths. */
.sc-grid { display: flex; flex-wrap: wrap; align-items: stretch;
  gap: clamp(1rem, .82rem + .55vw, 1.35rem);
  transition: opacity .26s ease, transform .26s ease; }
.sc-grid.is-swapping { opacity: 0; transform: translateY(10px); }

.sc-card { position: relative; min-width: 0; flex: 1 1 21rem;
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  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; }
.sc-card--wide { flex: 1.45 1 30rem; }
.sc-card:hover { transform: translateY(-6px); border-color: var(--sky);
  box-shadow: 0 34px 60px -32px rgba(11,24,48,.36); }
.sc-card[hidden] { display: none; }

/* Hairline accent that draws in on hover — flat, no glow. */
.sc-card::before { content: ""; position: absolute; left: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); top: -1px;
  width: 0; height: 3px; border-radius: 3px; background: var(--grad);
  transition: width .45s cubic-bezier(.22,1,.36,1); }
.sc-card:hover::before { width: 3.4rem; }

.sc-card__top { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.sc-card__ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--sky-tint); color: var(--navy); font-size: 1rem;
  transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.sc-card:hover .sc-card__ico { background: var(--navy); color: #fff; transform: translateY(-2px); }
.sc-card__kicker { min-width: 0; font-family: var(--font-mono, monospace); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.sc-card h3 { font-size: clamp(1.14rem, 1.05rem + .32vw, 1.34rem); line-height: 1.26;
  letter-spacing: -.018em; margin: .2rem 0 0; }
.sc-card > p { color: var(--slate); font-size: .94rem; line-height: 1.62; margin: 0; }

.sc-card__ul { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .45rem; }
.sc-card__ul li { min-width: 0; display: flex; align-items: flex-start; gap: .55rem;
  font-size: .875rem; line-height: 1.5; color: var(--ink); }
.sc-card__ul i { flex: none; margin-top: .18rem; font-size: .78rem; color: var(--sky); }

/* Wide cards lay their bullets out in two columns so the extra width earns
   its keep instead of stretching the text to unreadable line lengths. */
.sc-card--wide .sc-card__ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.1rem; }
@media (max-width: 640px) { .sc-card--wide .sc-card__ul { grid-template-columns: minmax(0, 1fr); } }

.sc-card__cta { margin-top: auto; padding-top: 1.05rem; display: inline-flex; align-items: center; gap: .5rem;
  align-self: flex-start; font-size: .875rem; font-weight: 600; color: var(--navy); }
.sc-card__cta i { font-size: .75rem; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.sc-card__cta:hover { color: var(--orange); }
.sc-card__cta:hover i { transform: translateX(4px); }

/* Per-card entry, restarted by JS on every stage change. --d is set inline. */
.sc-card.is-in { animation: scPop .52s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); }
@keyframes scPop { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   CTA — small tweaks on top of the shared .oc-cta pattern.
   ========================================================================== */
.sc-cta__note { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); }
.sc-cta__note i { color: var(--orange); }

/* --- Focus visibility: the switcher is keyboard-first, so make it obvious. */
.sc-pill:focus-visible,
.sc-stage:focus-visible,
.sc-card__cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 30px; }