/* ============================================================================
 ORCA Connect — the Omni-Channel set pieces
 The platform panel, the hub of four channels, the score ladder, before and
 after, and the profile that assembles — the parts of the story that belong
 to the platform itself. Used by features.html, driven by omni.js.
 ============================================================================ */

/* ---- the panel ----------------------------------------------------------
   It arrives like an object rather than a page: it comes up from below
   already small and grows to fill the screen as it takes over, then holds
   while it is read. Driven from JS rather than `animation-timeline: view()`:
   the panel is sticky, and a pinned element does not travel, so a view()
   timeline would freeze the moment it stuck. The track around it does
   travel, so the script reads the track and writes the transform. */
.interlude-track{ position:relative; z-index:1; height:260svh }
.interlude{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; align-content:center;
  /* the same gradient the channels page opens on, so the two navy surfaces in
     the product are one surface rather than two flat fills that nearly match */
  background:
    radial-gradient(115% 85% at 76% 14%,
      color-mix(in srgb, var(--c-accent) 74%, #fff) 0%, transparent 62%),
    linear-gradient(158deg,
      color-mix(in srgb, var(--c-accent) 88%, #fff) 0%,
      var(--c-accent) 44%,
      color-mix(in srgb, var(--c-accent) 80%, #000) 100%);
  color:var(--on-dark);
  /* clear of the header at the top, and a matching breath at the bottom */
  padding-top:calc(var(--nav-h) + clamp(28px,6vh,72px));
  padding-bottom:clamp(48px,8vh,96px);
  transform-origin:50% 50%; will-change:transform;
  box-shadow:0 34px 90px -46px rgba(10,16,32,.6);
}

/* 14 · the Tool cards lean toward the pointer, with a glare riding it */
.cardset{ perspective:1000px }
.cardset .card{ position:relative; transform-style:preserve-3d }
.cardset .card .glare{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.95), transparent 50%);
  mix-blend-mode:soft-light; transition:opacity .4s }
.cardset .card:hover .glare{ opacity:1 }

/* ---- the panel's own layout: the argument, and a picture of the product */
.interlude__in{
  max-width:var(--maxw); margin-inline:auto; width:100%;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,3.6vw,60px); align-items:center;
}
.interlude .h2{ margin:0 0 var(--s-sm); max-width:18ch }
.interlude .lede{ margin:0 0 var(--s-lg); max-width:46ch;
                  font:var(--t-lead-airy); letter-spacing:0 }
.cardset{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-sm) }
/* on a phone the four cards stay two by two, small, so the panel still fits
   one screen instead of cutting the last card off */
@media (max-width:560px){
  .cardset{ gap:8px }
  .cardset .card{ padding:12px }
  .cardset .caption{ display:none }
}
.cardset .card{ display:grid; align-content:start; gap:6px;
                padding:var(--s-md); border-radius:var(--r-md); border-color:transparent }
.card__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:var(--r-pill);
  font:var(--t-fine); font-weight:600; letter-spacing:0;
  color:var(--c-accent-text); background:#EBF1FF; margin-bottom:2px;
}
.cardset .h3{ font:var(--t-body-strong); letter-spacing:var(--track-body); margin:0 }
.cardset .caption{ font:400 12.5px/1.46 var(--font-text); letter-spacing:0; color:var(--ink-muted-80) }

/* The screen sits slightly proud of the copy and turned just enough to read
   as a thing on a surface rather than a flat image pasted on navy. The doctor
   stands in front of its left edge — he overlaps the rail, which is the one
   part of the screen that carries no numbers, so nothing is hidden. */
.tool-shot{ position:relative; perspective:1500px; padding-left:64px }
.tool-shot .mock{
  transform:rotateY(-7deg) rotateX(2deg); transform-origin:50% 50%;
  box-shadow:0 40px 90px -40px rgba(3,8,24,.65), 0 2px 6px rgba(3,8,24,.18);
}
.tool-doc{
  position:absolute; left:-30px; bottom:-42px; z-index:2;
  height:clamp(250px,44vh,392px); width:auto; pointer-events:none;
  filter:drop-shadow(0 30px 30px rgba(3,8,24,.45));
}
@media (max-width:1180px){
  .tool-shot .mock{ transform:none }
  .tool-shot{ padding-left:40px }
  .tool-doc{ height:250px; left:-34px }
}
@media (max-width:980px){
  .interlude__in{ grid-template-columns:1fr }
  .tool-shot{ display:none }
  .interlude .lede{ max-width:56ch }
}
/* The panel is exactly one viewport and cannot scroll, so on a short screen
   it sheds the least load-bearing lines rather than clipping the rest. */
@media (max-height:840px){
  .interlude .lede{ font:400 16px/1.5 var(--font-text); margin-bottom:var(--s-md) }
  .interlude .h2{ font:600 clamp(26px,2.8vw,34px)/1.12 var(--font-display) }
}
@media (max-height:700px){
  .interlude .lede{ display:none }
  .cardset .caption{ display:none }
}

/* the mockup itself is assembled entirely from mocks.css — the kit is shared
   with features.html, so nothing about it may live in this page's <style> */
.tool-row{ gap:10px }

/* Every card below the pill gets the same two-line box for its heading and
   the same two-line box for its line, so the four "Explore" links land on one
   baseline instead of stepping down the row. */
/* 12ch forces the two short headings to break where the two long ones already
   do, so all four cards carry the same two-line block instead of two of them
   sitting a line higher than the others */
.grid--4 .card--link .h3{ min-height:2.4em; max-width:12ch }
.grid--4 .card--link .small{ min-height:2.86em }

/* ---- the four channels, as what they actually are --------------------
   A hub. Two channels each side, the platform in the middle, wires running
   in, and data travelling down the wires. The section used to be four equal
   cards in a row, which said "here are four things" — this says "four things
   feed one", which is the page's entire argument. */
/* One sentence, one line — broken across two it reads as two claims instead
   of one. The font is sized off the viewport so it can never wrap. */
.hub-head{ max-width:none; text-wrap:nowrap; font-size:clamp(24px,4.1vw,52px) }
@media (max-width:720px){ .hub-head{ text-wrap:balance; font-size:clamp(26px,6vw,34px) } }
.hub{
  position:relative; margin-top:var(--s-xxl);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,auto) minmax(0,1fr);
  gap:clamp(28px,5vw,90px); align-items:center;
}
.hub__side{ display:grid; gap:var(--s-lg); position:relative; z-index:1 }
.chan{
  display:grid; align-content:start; gap:var(--s-xs);
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:var(--s-lg); text-decoration:none;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.chan:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--c-accent) 38%,transparent);
  box-shadow:0 16px 34px -24px rgba(10,16,32,.36);
}
.chan .h3{ font:var(--t-display-md); letter-spacing:var(--track-md); margin:0 }
.chan .small{ margin:0 }
.chan .btn--link{ margin-top:var(--s-xs) }
/* the pill names the channel and now shows it too */
.pill__ico{ display:inline-grid; place-items:center; width:15px; height:15px; margin-right:2px }
.pill__ico svg{ width:15px; height:15px; display:block }
/* Scoped to .chan, not to .pill itself — the pill is a design-system chip and
   the same class carries the filter row and the card tags elsewhere. Here it
   is the channel's own name at the head of a card, so it is set at body size
   with a mark to match, rather than at caption size. */
.chan .pill{
  font:var(--t-body-strong); letter-spacing:var(--track-body);
  gap:var(--s-xs); padding:13px 18px;
}
.chan .pill__ico, .chan .pill__ico svg{ width:19px; height:19px }

.hub__core{
  position:relative; z-index:1; text-align:center; justify-self:center;
  padding:clamp(24px,2.6vw,38px) clamp(20px,2.4vw,34px);
  border-radius:50%; aspect-ratio:1; display:grid; align-content:center;
  width:clamp(212px,19vw,266px);
  background:var(--c-accent); color:var(--on-dark);
  box-shadow:0 24px 60px -28px color-mix(in srgb,var(--c-accent) 60%,transparent);
}
/* the lockup is navy-on-transparent, so on the navy disc it has to be driven
   to solid white — the same treatment the footer gives it */
.hub__core img{
  width:min(80%,176px); height:auto; margin:0 auto;
  filter:brightness(0) invert(1);
}
.hub__core strong{
  display:block; margin-top:9px;
  font:600 clamp(15px,1.25vw,18px)/1.2 var(--font-display); letter-spacing:-.015em;
}
.hub__core span{ display:block; margin-top:12px; font:var(--t-caption); color:#C6D2EC }
.chan .small{ margin:0; text-wrap:nowrap }
@media (max-width:1100px){ .chan .small{ text-wrap:pretty } }

/* the wires are drawn from the real card positions, so they land on the
   right edges at any width — see the script at the end of the page */
.hub__wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0 }
.hub__wires path{ fill:none; stroke:var(--hairline); stroke-width:1.5 }
.hub__wires circle{ fill:var(--c-accent) }

@media (max-width:900px){
  .hub{ grid-template-columns:1fr; gap:var(--s-lg) }
  .hub__core{ order:-1 }
  .hub__wires{ display:none }
}

/* ---- 16 · the hub's wires draw themselves as it arrives -------------- */
.hub__wires .wire-live{ fill:none; stroke:var(--c-accent); stroke-width:2; stroke-linecap:round;
                        stroke-dasharray:1; stroke-dashoffset:1 }
.hub__wires circle{ opacity:0; transition:opacity .5s var(--ease) }
.hub.is-flowing .hub__wires circle{ opacity:1 }
@media (prefers-reduced-motion:reduce){ .hub__wires .wire-live{ stroke-dashoffset:0 } .hub__wires circle{ opacity:1 } }

/* one line each, the way the hub reads them */
.chan .h3{ text-wrap:nowrap }
@media (max-width:1100px){ .chan .h3{ text-wrap:pretty } }

/* ---- the score --------------------------------------------------------
   A weight is a quantity, so it is drawn as one. The bar is the argument:
   the four rows are visibly not the same size as each other. The section
   carries the same light surface as the closing statement — the shape of the
   ladder is what sets it apart, not a change of background. */
.tiers{ display:grid; margin-top:var(--s-xxl) }
.tier{
  display:grid; grid-template-columns:66px minmax(0,1fr) minmax(88px,24%);
  gap:var(--s-md); align-items:center; padding:var(--s-md) 0;
  border-top:1px solid var(--line);
}
.tier:last-child{ border-bottom:1px solid var(--line) }
.tier i{ font:700 clamp(21px,1.9vw,28px)/1 var(--font); font-style:normal;
         letter-spacing:-.02em; color:var(--c-accent-text) }
.tier > div{ display:grid; gap:3px }
.tier b{ font:600 16px/1.25 var(--font) }
.tier span{ font:var(--t-caption); letter-spacing:var(--track-caption); color:var(--ink-muted-48) }
.tier em{ display:block; height:7px; border-radius:4px; width:var(--w,50%);
          background:var(--c-accent); transform-origin:left center }
/* The bar draws itself, because the length IS the argument — seeing +10 run
   further than +2 is the point of the row. scaleX composites; animating the
   width would relayout the row on every frame. It rides the section's own
   reveal rather than a second observer, so it starts with the copy. */
.js .reveal .tier em{ transform:scaleX(0); transition:transform .95s var(--ease-out) }
.js .reveal.is-in .tier em{ transform:scaleX(1) }
.js .reveal .tier:nth-child(1) em{ transition-delay:.12s }
.js .reveal .tier:nth-child(2) em{ transition-delay:.26s }
.js .reveal .tier:nth-child(3) em{ transition-delay:.40s }
.js .reveal .tier:nth-child(4) em{ transition-delay:.54s }
@media (prefers-reduced-motion:reduce){
  .js .reveal .tier em{ transform:none; transition:none }
}
@media (max-width:680px){
  .tier{ grid-template-columns:56px minmax(0,1fr); gap:var(--s-sm) }
  .tier em{ grid-column:2; width:var(--w,50%) }
}

/* ---- 15 · the scores roll like an odometer --------------------------- */
.tier i .odo{ display:inline-flex; height:1em; overflow:hidden; vertical-align:top; align-items:flex-start }
.tier i .odo .col{ display:flex; flex-direction:column; will-change:transform }
.tier i .odo .col span{ display:block; height:1em; line-height:1 }

/* ---- 13 · before, and a circle that opens onto after ----------------- */
.portal-sec{ position:relative; z-index:1 }
.portal-sec__pin{ position:relative; height:100svh; overflow:hidden; background:var(--canvas-parchment) }
.portal-sec__before{ position:absolute; inset:0; display:grid; align-content:center; justify-items:center; text-align:center; padding:0 var(--pad-x) }
.portal-sec__h{ font:700 clamp(44px,6vw,100px)/1 var(--font-display); letter-spacing:-.045em; margin:10px 0 28px; max-width:14ch }
.portal-sec .ticks{ text-align:left; display:inline-grid }
.portal-sec__after{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 var(--pad-x);
  background:radial-gradient(60% 60% at 50% 40%, #2A57B5 0%, transparent 70%), var(--c-accent);
  color:#fff; clip-path:circle(0% at 50% 50%);
}
.portal-sec__after > div{ display:grid; justify-items:center }
.portal-sec__after .portal-sec__h{ color:#fff }
.portal-sec__after .eyebrow{ color:var(--c-accent-on-dark) }
.portal-sec__after .ticks li{ color:#DCE5F7 }
.portal-sec__after .ticks li::before{ background:var(--c-accent-on-dark) }
@media (prefers-reduced-motion:reduce){ .portal-sec__after{ clip-path:none; position:relative } .portal-sec__pin{ height:auto } .portal-sec__before{ position:relative; padding:80px var(--pad-x) } }

/* ---- 20 · the profile assembles --------------------------------------- */
.assemble{ position:relative; z-index:1; background:var(--canvas) }
.assemble__pin{ height:100svh; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center;
                gap:clamp(24px,4vw,70px); padding:0 var(--pad-x); max-width:var(--maxw); margin-inline:auto }
.prof{ position:relative; width:min(520px,100%); justify-self:center; border-radius:26px; background:#fff;
       border:1px solid var(--hairline); padding:28px; box-shadow:0 50px 100px -50px rgba(10,16,32,.5) }
.prof__hd{ display:flex; gap:16px; align-items:center }
.prof__av{ width:64px; height:64px; border-radius:50%; flex:0 0 auto;
  /* Prof. Ali Usama himself, not a placeholder dot */
  background:#DCE6F8 url(assets/brand/ali-usama.webp) center top / cover no-repeat; box-shadow:0 0 0 3px #fff, 0 6px 14px -6px rgba(10,16,32,.4) }
.prof__hd b{ display:block; font:600 21px/1.15 var(--font-display) }
.prof__hd span{ font:400 14px/1.4 var(--font-text); color:var(--ink-muted-48) }
.prof__ring{ margin-left:auto; flex:0 0 auto; width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
             background:conic-gradient(var(--c-accent) calc(var(--p,87) * 1%), var(--hairline) 0) }
.prof__ring i{ width:58px; height:58px; border-radius:50%; background:#fff; display:grid; place-items:center;
               font:700 20px/1 var(--font-display); font-style:normal; color:var(--c-accent) }
.prof__chips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px }
.prof__chip{ border:1px solid var(--hairline); border-radius:14px; padding:14px; background:var(--canvas-parchment) }
.prof__chip small{ display:block; font:600 12px/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--c-accent) }
.prof__chip b{ display:block; margin-top:8px; font:600 17px/1.2 var(--font-text) }
.prof__chip--wa small{ color:var(--c-whatsapp-ink) }
.prof__next{ margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:12px;
             padding:14px 16px; border-radius:14px; background:var(--c-accent); color:#fff; font:600 15px/1.3 var(--font-text) }
@media (max-width:900px){ .assemble__pin{ grid-template-columns:1fr; align-content:center; height:auto; min-height:100svh; padding-block:90px } }

/* ---- the film: a card that opens to the full screen -----------------------
   Pinned for one screen while it opens, then held a screen on the full picture
   before the page moves on. It only plays once it is full. */
#film-b{ position:relative; height:300svh }
#film-b .vfilm__frame{ position:absolute; inset:0; overflow:hidden; will-change:clip-path }
#film-b .vfilm__copy{ transition:opacity .6s var(--ease), visibility 0s linear .6s }
#film-b:not(.is-open) .vfilm__copy{ opacity:0; visibility:hidden }
#film-b.is-open .vfilm__copy{ transition:opacity .6s var(--ease), visibility 0s }
@media (prefers-reduced-motion:reduce){
  #film-b{ height:auto } #film-b:not(.is-open) .vfilm__copy{ opacity:1; visibility:visible }
  .interlude-track{ height:auto } .interlude{ position:relative }
}
html:not(.js) #film-b{ height:auto }
html:not(.js) #film-b .vfilm__copy{ opacity:1; visibility:visible }


/* ---- the opening: ORCA Connect, four channels converging on one profile ----
   (the rest of the scene's look comes from services-hub.css) */
.sx-omni .sx-title{ font:700 clamp(46px,6vw,96px)/.95 var(--font-display); letter-spacing:-.045em; margin:0; color:#fff }
.sx-omni__body .sx-h{ font:600 clamp(28px,3.2vw,44px)/1.08 var(--font-display); letter-spacing:-.02em; margin:0; max-width:22ch; color:#fff }
.sx-omni .head__stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-lg);
  margin-top:var(--s-section); padding-top:var(--s-lg); border-top:1px solid rgba(255,255,255,.14) }
.sx-omni .head__stats b{ display:block; font:600 clamp(24px,2.4vw,32px)/1 var(--font-display); color:#fff }
.sx-omni .head__stats span{ display:block; margin-top:var(--s-xs); font:var(--t-caption); color:#C6D2EC }
@media (max-width:760px){ .sx-omni .head__stats{ grid-template-columns:repeat(2,minmax(0,1fr)) } }