/* ════════════════════════════════════════════════════════════
   RUPADI INTERNATIONAL — SHOWCASE  ·  cinematic page headers
   A slow, auto-advancing image show behind the page title —
   screen-saver pacing, Ken Burns drift, crossfade. Every slide
   carries a caption AND a credit line, so the imagery is
   attributed the same way the figures are.

   Used on: about.html · services.html · contact.html
   Scoped to .sc-* so nothing else in the site is affected.
════════════════════════════════════════════════════════════ */

.sc{
  position:relative;
  min-height:max(880px,108vh);
  display:flex;align-items:flex-end;
  padding:200px 0 clamp(122px,11vw,164px);
  overflow:hidden;
  background:#140D06;
  color:#EDE8DD;
  isolation:isolate;
}

/* ── Stage ───────────────────────────────────────────────── */
.sc-stage{position:absolute;inset:0;z-index:0}
.sc-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;
  transition:opacity 1.5s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.sc-slide.is-active{opacity:1}
.sc-slide img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  transform:scale(1.02);
}
/* Atmospheric frames (rendered scenes, no fine detail to lose) can still
   bleed. Opt in per-slide with data-fit="cover". */
.sc-slide[data-fit="cover"] img{object-fit:cover;object-position:center}
/* Ken Burns — only the visible slide drifts, and each index
   drifts a different way so the loop never feels mechanical. */
@media(prefers-reduced-motion:no-preference){
  .sc-slide.is-active img{animation:scKen 11s ease-out both}
  .sc-slide:nth-child(2n).is-active img{animation-name:scKen2}
  .sc-slide:nth-child(3n).is-active img{animation-name:scKen3}
}
@keyframes scKen {from{transform:scale(1.00) translate3d(0,0,0)}     to{transform:scale(1.05) translate3d(-.6%,-.5%,0)}}
@keyframes scKen2{from{transform:scale(1.05) translate3d(.5%,.4%,0)}  to{transform:scale(1.00) translate3d(0,0,0)}}
@keyframes scKen3{from{transform:scale(1.01) translate3d(.4%,-.3%,0)} to{transform:scale(1.06) translate3d(-.4%,.3%,0)}}

/* ── Scrim — keeps the type legible over any frame ───────── */
.sc-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(10,7,3,.90) 0%, rgba(10,7,3,.80) 26%,
      rgba(10,7,3,.52) 46%, rgba(10,7,3,.18) 66%, transparent 82%),
    linear-gradient(to top,rgba(12,8,3,.78) 0%,rgba(12,8,3,.30) 22%,transparent 46%),
    radial-gradient(70% 52% at 84% 12%,rgba(245,166,35,.14),transparent 70%);
}
.sc-mesh{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(245,166,35,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,166,35,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(64% 58% at 24% 40%,#000,transparent 78%);
  mask-image:radial-gradient(64% 58% at 24% 40%,#000,transparent 78%);
}
/* Hands off to the light section below, exactly like the home hero */
.sc-fade{
  position:absolute;left:0;right:0;bottom:0;height:88px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(251,246,236,.30) 46%,
    rgba(251,246,236,.80) 78%,
    #FBF6EC 100%);
}

/* ── Copy ────────────────────────────────────────────────── */
.sc-inner{position:relative;z-index:3;width:100%}
.sc-copy{
  max-width:46rem;
  padding:0 0 clamp(6px,1vw,12px);
}
.sc-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#F5A623;
  padding:8px 17px;border-radius:999px;
  background:rgba(245,166,35,.10);border:1px solid rgba(245,166,35,.28);
  margin-bottom:24px;
  animation:scUp .8s cubic-bezier(.16,1,.3,1) .05s both;
}
.sc-eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:#F5A623;box-shadow:0 0 10px #F5A623;
}
.sc-h1{
  font-size:clamp(2.3rem,5vw,4.1rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.03;color:#FFFBF3;
  margin-bottom:20px;
  text-shadow:0 2px 22px rgba(8,5,2,.88),0 1px 4px rgba(8,5,2,.75);
  animation:scUp .9s cubic-bezier(.16,1,.3,1) .12s both;
}
.sc-h1 em{
  font-style:italic;font-family:'Fraunces',var(--font-display);
  font-weight:600;font-optical-sizing:auto;padding-bottom:.08em;
  background:linear-gradient(100deg,#E0821A,#F5A623 30%,#F7CE6B 52%,#F5A623 74%,#E0821A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sc-lede{
  font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.72;
  color:#E4DFD4;max-width:52ch;margin-bottom:26px;
  text-shadow:0 1px 16px rgba(8,5,2,.92),0 1px 3px rgba(8,5,2,.8);
  animation:scUp .9s cubic-bezier(.16,1,.3,1) .2s both;
}
.sc-crumb{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
  color:#B3AB9C;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  text-shadow:0 1px 8px rgba(12,7,2,.8);
  animation:scUp .9s cubic-bezier(.16,1,.3,1) .28s both;
}
.sc-crumb a{color:#7E8698;transition:color .2s ease}
.sc-crumb a:hover{color:#F5A623}
.sc-crumb span[aria-current]{color:#C6CBD6}
@keyframes scUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ── HUD — credit line + progress dots ─────────────────────
   Kept in normal flow beneath the copy rather than pinned to the
   section floor: it can then never collide with the copy block or
   get washed out by the fade into the light section below. */
.sc-hud{
  position:relative;z-index:4;
  margin-top:clamp(38px,5.5vw,64px);
  pointer-events:none;
}
.sc-hud__wrap{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
}

/* Caption + citation for the frame currently on screen */
.sc-credits{position:relative;min-height:56px;flex:1;max-width:38rem}
.sc-credit{
  position:absolute;left:0;bottom:0;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.sc-credit.is-active{opacity:1;transform:none}
.sc-credit b{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;letter-spacing:-.015em;color:#FFFBF3;
  margin-bottom:6px;text-shadow:0 1px 10px rgba(12,7,2,.85);
}
.sc-credit b i{font-size:12px;color:#F5A623}
.sc-credit span{
  display:block;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#BDB5A6;line-height:1.5;
  text-shadow:0 1px 8px rgba(12,7,2,.85);
}
.sc-credit span::before{
  content:'';display:inline-block;width:16px;height:1px;
  background:rgba(245,166,35,.6);vertical-align:middle;margin-right:9px;
}

/* Dots double as progress bars for the auto-advance */
.sc-dots{display:flex;align-items:center;gap:9px;pointer-events:auto;flex-shrink:0}
.sc-dot{
  position:relative;width:38px;height:3px;border-radius:99px;
  background:rgba(255,255,255,.20);overflow:hidden;
  border:none;padding:0;cursor:pointer;
  transition:width .4s cubic-bezier(.16,1,.3,1),background .3s ease;
}
.sc-dot:hover{background:rgba(255,255,255,.36)}
.sc-dot.is-active{width:64px}
.sc-dot i{
  position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#F5A623,#F5C451);border-radius:99px;
}
.sc-dot.is-active i{animation:scFill var(--sc-dur,6000ms) linear forwards}
.sc.is-paused .sc-dot.is-active i{animation-play-state:paused}
@keyframes scFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1024px){
  .sc{min-height:max(700px,86vh);padding:150px 0 128px}
  .sc-scrim{
    background:
      linear-gradient(180deg,rgba(18,11,4,.62) 0%,rgba(18,11,4,.30) 38%,rgba(18,11,4,.78) 100%),
      radial-gradient(90% 60% at 80% 10%,rgba(245,166,35,.16),transparent 70%);
  }
}
@media(max-width:760px){
  .sc{min-height:max(640px,84vh);padding:126px 0 132px}  /* clears the 88px fade */
  .sc-hud__wrap{
    flex-direction:column;align-items:flex-start;gap:16px;
  }
  .sc-credits{min-height:62px;max-width:none;width:100%}
  .sc-credit b{font-size:14px}
  .sc-dot{width:26px}
  .sc-dot.is-active{width:46px}
}

/* Short viewports (laptops, split screens): the generous padding above
   would push the metric rail and the credit line below the fold. Height
   there is driven by content, not by a target. */
@media(max-height:860px) and (min-width:1025px){
  .sc      {min-height:auto;padding:146px 0 136px}
  .sc--home{min-height:auto;padding:146px 0 112px}
  /* the home hero carries the most furniture — tighten its internal
     rhythm too, or content alone pushes it well past the fold */
  .sc--home .sc-h1  {margin-bottom:14px}
  .sc--home .sc-lede{margin-bottom:24px}
  .sc--home .hx-hero__rail{margin-top:32px}
  .sc--home .sc-hud{margin-top:26px}
  .sc--home .hx-rail__item{padding:18px 20px 4px}
}

/* ── Reduced motion — no drift, no auto-advance ──────────── */
@media(prefers-reduced-motion:reduce){
  .sc-slide{transition-duration:.001s}
  .sc-slide img{animation:none !important;transform:scale(1.02)}
  .sc-credit{transition-duration:.001s}
  .sc-dot.is-active i{animation:none;transform:scaleX(1)}
  .sc-eyebrow,.sc-h1,.sc-lede,.sc-crumb{animation:none;opacity:1;transform:none}
}


/* ════════════════════════════════════════════════════════════
   FOUNDERS STRIP — real people, on the light ground
   Sits on about.html between the story and the mission bands.
════════════════════════════════════════════════════════════ */
.ppl{padding:clamp(64px,8vw,104px) 0}
.ppl__head{margin-bottom:clamp(34px,4vw,52px);max-width:60ch}
.ppl__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ppl__card{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--l-card,#FFFDF8);
  border:1px solid var(--l-line,#E7DDCB);
  border-radius:22px;padding:24px;
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .32s ease;
}
.ppl__card:hover{
  transform:translateY(-4px);
  border-color:#D8CCB6;
  box-shadow:0 4px 8px rgba(27,24,17,.04),0 28px 56px -24px rgba(27,24,17,.24);
}
.ppl__photo{
  width:84px;height:84px;flex-shrink:0;
  border-radius:20px;object-fit:cover;object-position:center 20%;
  display:block;background:#EFE9DE;
  border:1px solid rgba(27,24,17,.10);
  box-shadow:0 10px 22px -12px rgba(27,24,17,.5);
}
.ppl__body h3{
  font-size:1.05rem;font-weight:750;letter-spacing:-.025em;
  color:#1B1811;margin-bottom:4px;
}
.ppl__role{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#C2410C;margin-bottom:11px;
}
.ppl__body p{font-size:13.2px;line-height:1.6;color:#56503F}
@media(max-width:1024px){.ppl__grid{grid-template-columns:1fr;gap:14px}}
@media(max-width:520px){
  .ppl__card{flex-direction:column;gap:16px}
  .ppl__photo{width:76px;height:76px}
}


/* ════════════════════════════════════════════════════════════
   HOME VARIANT — the same show, carrying the hero's own
   furniture: headline, calls to action and the metric rail.
════════════════════════════════════════════════════════════ */
.sc--home{
  min-height:max(920px,110vh);
  padding:clamp(168px,16vw,208px) 0 clamp(104px,9vw,132px);
}
.sc--home .sc-fade{
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(251,247,240,.30) 46%,
    rgba(251,247,240,.80) 78%,
    #FBF7F0 100%);
}

/* Every frame in these shows is dense product UI carrying its own
   baked-in labels. Behind a headline they compete and the type stops
   reading, so the whole stage goes soft-focus — the imagery stays rich
   but behaves as atmosphere. Full-clarity product shots live further
   down each page, in the cards and story panels.
   Blur lives on the stage, not the image, so the Ken Burns drift on
   each frame keeps working untouched; the slight upscale hides the
   soft edge the blur would otherwise leave at the section boundary. */
.sc .sc-stage{
  filter:brightness(1.04) saturate(1.24) sepia(.10) contrast(1.02);
}
.sc--home .sc-stage{
  filter:brightness(1.02) saturate(1.22) sepia(.10) contrast(1.02);
}
.sc--home .sc-scrim{
  background:
    linear-gradient(100deg,
      rgba(10,7,3,.92) 0%, rgba(10,7,3,.82) 28%,
      rgba(10,7,3,.54) 48%, rgba(10,7,3,.20) 68%, transparent 84%),
    linear-gradient(to top,rgba(12,8,3,.80) 0%,rgba(12,8,3,.32) 24%,transparent 48%),
    radial-gradient(70% 52% at 84% 12%,rgba(245,166,35,.16),transparent 70%);
}
.sc--home .sc-copy{max-width:min(44rem,50%)}
.sc--home .sc-h1{font-size:clamp(2.5rem,5.2vw,4.5rem);letter-spacing:-.045em;line-height:1.02}
.sc--home .sc-h1 em{display:block}
.sc--home .sc-lede{color:#B7BDCB;max-width:50ch;margin-bottom:34px}
.sc--home .sc-lede b{color:#E8E2D6;font-weight:600}
.sc-actions{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  animation:scUp .9s cubic-bezier(.16,1,.3,1) .28s both;
}
.sc--home .hx-hero__rail{
  margin-top:clamp(30px,3.4vw,44px);
  border-top:1px solid rgba(245,166,35,.22);
}
.sc--home .hx-rail__val{text-shadow:0 2px 16px rgba(8,5,2,.85),0 1px 3px rgba(8,5,2,.7)}
.sc--home .hx-rail__lbl{text-shadow:0 1px 10px rgba(8,5,2,.9)}
@media(max-width:1024px){
  .sc--home{min-height:max(760px,92vh);padding:142px 0 140px}
}
@media(max-width:760px){
  .sc--home{min-height:max(680px,88vh);padding:124px 0 122px}
}
@media(prefers-reduced-motion:reduce){
  .sc-actions{animation:none;opacity:1;transform:none}
}


/* ════════════════════════════════════════════════════════════
   MISSION · VISION · PURPOSE — carried by imagery, not prose.
   Each card leads with the product that proves the statement,
   then states it in one line. Organisation-level throughout.
════════════════════════════════════════════════════════════ */
.mvvx-section{padding:clamp(72px,9vw,120px) 0}
.mvvx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mvvx{
  margin:0;background:#FFFDF8;
  border:1px solid #E7DDCB;border-radius:26px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 4px rgba(27,24,17,.03),0 14px 34px -16px rgba(27,24,17,.16);
  transition:transform .34s cubic-bezier(.16,1,.3,1),box-shadow .34s ease,border-color .34s ease;
}
.mvvx:hover{
  transform:translateY(-5px);border-color:#D8CCB6;
  box-shadow:0 6px 12px rgba(27,24,17,.05),0 40px 78px -30px rgba(27,24,17,.30);
}
.mvvx__media{position:relative;overflow:hidden;background:#0A0C12}
.mvvx__media img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;
  background:#140D06;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.mvvx:hover .mvvx__media img{transform:scale(1.06)}
.mvvx__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,12,18,.62) 0%,transparent 55%);
}
.mvvx__tag{
  position:absolute;left:18px;bottom:15px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#F5C451;
}
.mvvx__tag i{font-size:11px}
.mvvx__tag::after{
  content:'';width:26px;height:1px;background:rgba(245,196,81,.6);
}
.mvvx figcaption{padding:24px 24px 22px;display:flex;flex-direction:column;flex-grow:1}
.mvvx h3{
  font-size:1.18rem;font-weight:800;letter-spacing:-.03em;line-height:1.22;
  color:#1B1811;margin-bottom:10px;
}
.mvvx h3 em{
  font-style:italic;font-family:'Fraunces',var(--font-display);
  font-weight:600;color:#C2410C;
}
.mvvx p{font-size:14px;line-height:1.65;color:#56503F;flex-grow:1;margin:0}
.mvvx__credit{
  display:block;margin-top:16px;padding-top:14px;
  border-top:1px solid #E7DDCB;
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#8B8371;line-height:1.5;
}
.mvvx__credit::before{
  content:'';display:inline-block;width:13px;height:1px;
  background:rgba(194,65,12,.6);vertical-align:middle;margin-right:8px;
}
@media(max-width:960px){.mvvx-grid{grid-template-columns:1fr;gap:16px}}


/* ── Hero rail metrics double as section jumps ────────────── */
.sc--home a.hx-rail__item{
  position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:14px;
  transition:background .28s var(--ease,ease),transform .28s cubic-bezier(.16,1,.3,1);
}
.sc--home a.hx-rail__item:hover{
  background:rgba(245,166,35,.09);
  transform:translateY(-2px);
}
.sc--home a.hx-rail__item:focus-visible{
  outline:2px solid var(--hx-gold,#F5A623);outline-offset:3px;
}
.sc--home a.hx-rail__item:hover .hx-rail__val{color:#FFD68A}
.hx-rail__go{
  position:absolute;top:14px;right:14px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:9px;
  background:rgba(245,166,35,.16);color:#F5C451;
  opacity:0;transform:translateY(-3px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.sc--home a.hx-rail__item:hover .hx-rail__go{opacity:1;transform:none}

/* Anchored sections must clear the now-permanent fixed bar */
:target{scroll-margin-top:120px}
main section[id]{scroll-margin-top:120px}


/* ── Header content sits further left on wide screens ──────
   The shared wrap centres at 1440/1280, which on a large display pushes
   the headline well into the middle of the frame. Widening it only inside
   the header moves the copy, rail and credit line left together, leaving
   more of the image visible on the right. Below 1600 nothing changes. */
@media(min-width:1600px){
  .sc-inner > .hx-wrap--wide{max-width:1640px}
  .sc-inner > .hx-wrap{max-width:1560px}
  .sc-inner > .container{max-width:1480px}
}