/* ==========================================================================
   JCC — KURO layer
   The header, the loader and the shared editorial furniture, translated from
   the KURO template into the Jainam palette. Everything is prefixed .kx-
   except the few #nav / .n-link overrides, which have to win against the id
   rules already in layouts/public.blade.php.
   ========================================================================== */

:root{
  --kx-ink:#0e1330;
  --kx-brand:#2e3192;
  --kx-accent:#d91423;
  --kx-paper:#f6f7fb;
  --kx-line:rgba(14,19,48,.14);
  --kx-mono:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --kx-serif:'Cormorant Garamond',Georgia,serif;
  --kx-nav-h:82px;
}

/* ===========================================================
   1. LOADER — the curtain that lifts once the page is ready
   =========================================================== */
#kxload{
  position:fixed;inset:0;z-index:12000;
  display:grid;place-content:center;justify-items:center;gap:20px;
  background:#0b0d1c;color:#fff;
  transition:transform .9s cubic-bezier(.76,0,.24,1);
}
#kxload.kx-gone{transform:translateY(-101%)}
.kx-load-mark{
  width:74px;height:74px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);transform:rotate(45deg);
}
.kx-load-mark svg{width:34px;height:34px;transform:rotate(-45deg);
  fill:none;stroke:#fff;stroke-width:1.25}
#kxload p{margin:10px 0 0;font:400 9px/1 var(--kx-mono);
  letter-spacing:.32em;opacity:.62;text-transform:uppercase}
.kx-load-line{width:180px;height:1px;background:rgba(255,255,255,.16);overflow:hidden}
.kx-load-line i{display:block;width:100%;height:100%;background:var(--kx-accent);
  transform:scaleX(0);transform-origin:left;
  animation:kxload 1.15s cubic-bezier(.65,0,.35,1) forwards}
@keyframes kxload{to{transform:scaleX(1)}}

/* ===========================================================
   2. HEADER
   Transparent over the hero, frosted once you move. While it is
   transparent the three groups blend in "difference", so the mark
   reads black on the white hero and flips to white the moment a
   dark photo scrolls under it — the trick the template uses.
   =========================================================== */
#nav.kx-nav{
  height:var(--kx-nav-h);padding:0 clamp(18px,3.4vw,40px);
  background:transparent;border-bottom:1px solid transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
  transition:height .35s cubic-bezier(.22,1,.36,1),
             background .35s, border-color .35s, box-shadow .35s;
}
#nav.kx-nav.scrolled{
  height:64px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--kx-line);
  box-shadow:0 1px 24px rgba(14,19,48,.06);
}

/* -- brand ------------------------------------------------- */
#nav.kx-nav .n-logo{
  display:flex;align-items:center;gap:11px;
  font-family:var(--kx-mono);text-decoration:none;color:var(--kx-ink);
}
.kx-crest{width:37px;height:37px;flex:none;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.25;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.kx-crest circle{stroke-dasharray:93 18;transform-origin:center;
  transform:rotate(-28deg)}
#nav.kx-nav .n-logo:hover .kx-crest{transform:rotate(180deg)}
.kx-brand-name{display:flex;flex-direction:column;line-height:1.05}
.kx-brand-name b{font-size:13px;font-weight:600;letter-spacing:.22em}
.kx-brand-name small{margin-top:4px;font-size:6px;letter-spacing:.42em;opacity:.62}

/* -- links ------------------------------------------------- */
#nav.kx-nav .n-links{gap:clamp(16px,2vw,30px)}
#nav.kx-nav .n-link{
  position:relative;padding-bottom:6px;
  font-family:var(--kx-mono);font-size:9px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kx-ink);opacity:.6;transition:opacity .25s;
}
#nav.kx-nav .n-link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;width:auto;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .38s cubic-bezier(.7,0,.3,1);
}
#nav.kx-nav .n-link:hover{opacity:1}
#nav.kx-nav .n-link.an{opacity:1}
#nav.kx-nav .n-link:hover::after,
#nav.kx-nav .n-link.an::after{transform:scaleX(1);transform-origin:left}

/* -- right-hand actions ------------------------------------ */
#nav.kx-nav .n-right{gap:14px}
#nav.kx-nav .n-cart{
  width:38px;height:38px;border:1px solid var(--kx-line);border-radius:50%;
  background:transparent;color:inherit;transition:background .25s,border-color .25s}
#nav.kx-nav .n-cart:hover{background:rgba(14,19,48,.06);border-color:currentColor}
#nav.kx-nav .n-login{
  position:relative;isolation:isolate;overflow:hidden;
  padding:11px 22px;border-radius:0;border:1px solid currentColor;
  background:transparent;color:inherit;
  font-family:var(--kx-mono);font-size:9px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
#nav.kx-nav .n-login::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--kx-accent);
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.7,0,.3,1)}
#nav.kx-nav .n-login:hover{color:#fff;border-color:var(--kx-accent)}
#nav.kx-nav .n-login:hover::before{transform:scaleX(1);transform-origin:left}
#nav.kx-nav .n-ham{border:1px solid var(--kx-line);background:transparent}
#nav.kx-nav .n-ham span{background:currentColor}

/* -- transparent state -------------------------------------
   The template inverts the bar with mix-blend-mode:difference, which is
   the right answer over a dark hero. This site's hero is white, where
   difference just washes the mark out — so the top state is plain ink and
   the blend is kept only for pages that opt in with .kx-on-dark. */
#nav.kx-nav:not(.scrolled) .n-logo,
#nav.kx-nav:not(.scrolled) .n-links,
#nav.kx-nav:not(.scrolled) .n-right{color:var(--kx-ink)}
#nav.kx-nav:not(.scrolled) .n-link{color:var(--kx-ink)}

body.kx-on-dark #nav.kx-nav:not(.scrolled) .n-logo,
body.kx-on-dark #nav.kx-nav:not(.scrolled) .n-links,
body.kx-on-dark #nav.kx-nav:not(.scrolled) .n-right{
  mix-blend-mode:difference;color:#fff}
body.kx-on-dark #nav.kx-nav:not(.scrolled) .n-link{color:#fff}
body.kx-on-dark #nav.kx-nav:not(.scrolled) .n-cart{border-color:rgba(255,255,255,.4)}

/* the counter must stay legible, never inverted */
#nav.kx-nav .cart-badge{background:var(--kx-accent);color:#fff;
  isolation:isolate;mix-blend-mode:normal}

@media (max-width:900px){
  :root{--kx-nav-h:62px}
  #nav.kx-nav{padding:0 16px}
  #nav.kx-nav.scrolled{height:56px}
  .kx-crest{width:30px;height:30px}
  .kx-brand-name b{font-size:11px;letter-spacing:.18em}
  .kx-brand-name small{font-size:5px;letter-spacing:.34em}
  #nav.kx-nav .n-login{display:none}
}

/* ===========================================================
   3. TICKER + WAVE WORD — footer furniture
   =========================================================== */
.kx-ticker{
  margin:0;padding:11px 0;overflow:hidden;
  border-top:1px solid var(--kx-line);border-bottom:1px solid var(--kx-line);
  font:500 8px/1 var(--kx-mono);letter-spacing:.34em;white-space:nowrap;
  color:var(--kx-ink);opacity:.55;text-transform:uppercase;
}
.kx-ticker div{width:max-content;animation:kxtick 26s linear infinite}
@keyframes kxtick{to{transform:translateX(-50%)}}

.kx-word{
  display:flex;justify-content:center;overflow:hidden;perspective:900px;
  margin:8vh 0 4vh;padding:0 2vw;
  font:700 clamp(52px,13vw,190px)/.74 var(--kx-serif);
  letter-spacing:-.055em;white-space:nowrap;color:var(--kx-ink);
}
.kx-word span{display:block;will-change:transform}
.kx-word:hover span{animation:kxwave .65s cubic-bezier(.4,0,.2,1) both}
.kx-word:hover span:nth-child(2){animation-delay:.035s}
.kx-word:hover span:nth-child(3){animation-delay:.07s}
.kx-word:hover span:nth-child(4){animation-delay:.105s}
.kx-word:hover span:nth-child(5){animation-delay:.14s}
.kx-word:hover span:nth-child(6){animation-delay:.175s}
@keyframes kxwave{0%,100%{transform:translateY(0) rotateX(0)}
  50%{transform:translateY(-17%) rotateX(18deg)}}

/* ===========================================================
   4. INQUIRY BUTTON — the template's split CTA
   =========================================================== */
.kx-cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-width:300px;min-height:84px;padding:18px 16px 18px 24px;
  background:var(--kx-ink);color:#fff;text-decoration:none;text-align:left;
  font:600 9px/1.5 var(--kx-mono);letter-spacing:.16em;text-transform:uppercase;
  transition:color .45s;
}
.kx-cta::before{content:'';position:absolute;inset:0;z-index:-1;
  background:var(--kx-accent);transform:scaleX(0);transform-origin:right;
  transition:transform .55s cubic-bezier(.7,0,.3,1)}
.kx-cta:hover::before{transform:scaleX(1);transform-origin:left}
.kx-cta span{display:flex;flex-direction:column;gap:8px}
.kx-cta small{font-size:6px;letter-spacing:.24em;opacity:.55}
.kx-cta i{width:48px;height:48px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:#fff;color:var(--kx-ink);
  font-style:normal;font-size:15px;transition:transform .45s}
.kx-cta:hover i{transform:rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  #kxload,.kx-load-line i,.kx-ticker div,.kx-word:hover span{
    animation:none!important;transition:none!important}
  #kxload{display:none}
}

/* ===========================================================
   5. FIXES on top of the cinematic layer
   =========================================================== */
/* .cx-num span is the caption underneath; the counter sits INSIDE the
   number, so it must not inherit the caption's block styling. */
.cx-num b span,.cx-fact b span,.cx-stat b span,.cx-hero-strip b span{
  display:inline;margin:0;font:inherit;letter-spacing:inherit;
  text-transform:none;color:inherit}
.tnum{font-variant-numeric:tabular-nums}

/* the outro sits on the same paper as the footer below it */
.kx-outro{background:var(--kx-paper);border-top:1px solid var(--kx-line);
  padding-top:clamp(30px,6vw,70px);overflow:hidden}
.kx-outro .kx-word{margin:clamp(28px,5vw,64px) 0 clamp(18px,3vw,40px)}

/* The turntable canvas is 2.8:1 but the stage stretches to fill whatever
   height is left in the hero, so on a tall screen the coach floated in a
   wide empty band. Cap how tall the stage is allowed to grow instead — the
   stage itself must keep its flex width, or the column collapses it. */
@media(min-width:1100px){
  /* fill whatever the copy leaves, but never grow past a sensible band --
     a fixed height here pushed the hint and the stat strip below the fold */
  .cx-stage{flex:1 1 auto;height:auto;min-height:320px;max-height:620px}
}

/* ==========================================================================
   6. LIGHT HOME
   The cinematic layer was drawn dark. The brief is a white site, so every
   dark surface on the home page is flipped here rather than edited in place
   — one block to read, one block to revert. The palette does not change:
   indigo, red, ink, paper.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
#sh.cx-hero{
  color:var(--kx-ink);
  background:
    radial-gradient(88% 66% at 84% 6%,rgba(217,20,35,.055) 0%,transparent 60%),
    radial-gradient(76% 68% at 4% 94%,rgba(46,49,146,.085) 0%,transparent 62%),
    linear-gradient(180deg,#fff 0%,#fdfdff 58%,var(--kx-paper) 100%);
}
#sh.cx-hero::after{background:none}
#sh .cx-grid{opacity:1;
  background-image:linear-gradient(rgba(14,19,48,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,19,48,.045) 1px,transparent 1px)}
#sh .cx-eyebrow{color:var(--kx-accent)}
#sh .cx-h1{color:var(--kx-ink)}
#sh .cx-h1 em{background:linear-gradient(96deg,var(--kx-brand) 0%,#5a3fb0 45%,var(--kx-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#sh .cx-lede{color:#5b6178}
#sh .cx-hero-side p{color:#9aa0b4}
#sh .cx-hero-side b{color:var(--kx-ink)}

/* the coach stands on paper, lit from under the wheels */
#sh .cx-stage{
  border-color:var(--kx-line);
  background:
    radial-gradient(72% 118% at 50% 104%,rgba(242,101,34,.16) 0%,transparent 60%),
    linear-gradient(180deg,#fff 0%,#f4f5fb 100%);
  box-shadow:0 30px 80px -46px rgba(14,19,48,.45),inset 0 1px 0 #fff;
}
#sh .cx-stage-hint{background:rgba(255,255,255,.86);border-color:var(--kx-line);
  color:#6b7186}
#sh .cx-angle{color:var(--kx-ink)}
#sh .cx-angle small{color:#9aa0b4}
#sh .cx-pip{background:rgba(14,19,48,.18)}
#sh .cx-pip.on{background:var(--kx-accent)}

#sh .cx-hero-strip{background:var(--kx-line)}
#sh .cx-hero-strip > div{background:#fff}
#sh .cx-hero-strip b{color:var(--kx-brand)}
#sh .cx-hero-strip span{color:#6b7186}

/* buttons read on paper now */
#sh .cx-btn-p{background:var(--kx-ink);color:#fff}
#sh .cx-btn-p:hover{background:var(--kx-accent)}
#sh .cx-btn-o{border-color:var(--kx-line);color:var(--kx-ink);background:#fff}
#sh .cx-btn-o:hover{background:var(--kx-paper)}

/* --------------------------------------------------------- spec / drone */
.cx-drone.cx-dark{background:#fff;color:var(--kx-ink);
  border-top:1px solid var(--kx-line)}
.cx-dark .cx-h2{color:var(--kx-ink)}
.cx-dark .cx-h2 em{background:linear-gradient(96deg,var(--kx-brand),var(--kx-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cx-dark .cx-sub{color:#5b6178}
.cx-dark .cx-eyebrow{color:var(--kx-accent)}
.cx-dark .cx-eyebrow[style]{color:#9aa0b4!important}

.cx-drone .cx-spec th{color:#9aa0b4}
.cx-drone .cx-spec td{color:var(--kx-ink)}
.cx-drone .cx-spec tr{border-color:var(--kx-line)}
.cx-drone .cx-fact{background:#fff;border-color:var(--kx-line)}
.cx-drone .cx-fact b{color:var(--kx-brand)}
.cx-drone .cx-fact span{color:#6b7186}
.cx-drone .cx-seat{background:var(--kx-paper);border-color:var(--kx-line)}
.cx-drone .cx-seat span{color:#9aa0b4}
.cx-drone .cx-shot{border-color:var(--kx-line);
  background:radial-gradient(70% 110% at 50% 104%,rgba(242,101,34,.14),transparent 62%),
             linear-gradient(180deg,#fff,#f4f5fb)}
.cx-drone .cx-drone-img{border-color:var(--kx-line);background:var(--kx-paper)}
.cx-drone .cx-btn-p{background:var(--kx-ink);color:#fff}
.cx-drone .cx-btn-p:hover{background:var(--kx-accent)}

/* the assembly scene was already white — keep its rail on the same hairline */
.cx-asm{background:#fff}

/* the degree readout on the turntable */
#sh .cx-angle{color:#9aa0b4}
#sh .cx-angle b{color:var(--kx-ink)}

/* ------------------------------------------------- depth gallery, on paper */
.cx-work{background:var(--kx-paper);color:var(--kx-ink);
  border-top:1px solid var(--kx-line);border-bottom:1px solid var(--kx-line)}
.cx-work .cx-h2{color:var(--kx-ink)}
.cx-work .cx-h2 em{background:linear-gradient(96deg,var(--kx-brand),var(--kx-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cx-work .cx-sub{color:#5b6178}
.cx-work .cx-eyebrow{color:var(--kx-accent)}
.cx-work .cx-plate{border:1px solid var(--kx-line);background:#fff;
  box-shadow:0 30px 70px -40px rgba(14,19,48,.5)}
.cx-work .cx-plate img{background:#fff}
.cx-work .cx-gal-hint{color:#9aa0b4}
/* the 360 frames are cut-outs on a white canvas, so they must be contained,
   not cropped, and the caption needs a light scrim rather than a dark one */
.cx-work .cx-plate{width:min(52vw,520px);aspect-ratio:16/10;border-radius:18px}
.cx-work .cx-plate img{object-fit:contain;padding:14px 14px 34px}
.cx-work .cx-plate figcaption{
  padding:14px 18px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.96) 42%);
  color:var(--kx-ink);font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700}
.cx-work .cx-plate figcaption small{color:var(--kx-accent);font-weight:600;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:3px}

/* ==========================================================================
   7. INNER PAGES
   About, What We Build, Gallery, Spare Parts, Blog, Reviews, FAQs, Contact
   all share the same handful of components. Restyling those here brings the
   whole site into the home page's language without touching eight templates.
   ========================================================================== */

/* --------------------------------------------------------- page header */
.pg-head{
  background:
    radial-gradient(80% 70% at 88% 0%,rgba(217,20,35,.05) 0%,transparent 60%),
    radial-gradient(70% 70% at 0% 100%,rgba(46,49,146,.07) 0%,transparent 62%),
    linear-gradient(180deg,#fff 0%,var(--kx-paper) 100%);
  border-bottom:1px solid var(--kx-line);
  padding:128px 0 62px;
}
@media(min-width:768px){.pg-head{padding:158px 0 76px}}
.pg-head::before{
  background-image:
    linear-gradient(rgba(14,19,48,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,19,48,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 90% at 20% 50%,#000 10%,transparent 80%);
  -webkit-mask-image:radial-gradient(80% 90% at 20% 50%,#000 10%,transparent 80%);
}
.crumb{font:600 9.5px/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:#9aa0b4;gap:10px}
.crumb a:hover{color:var(--kx-accent)}
.crumb .cur{color:var(--kx-accent);font-weight:600}
.pg-h1{font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.035em;line-height:.98;
  margin-top:20px;max-width:18ch}
.pg-h1 em{background:linear-gradient(96deg,var(--kx-brand) 0%,#5a3fb0 45%,var(--kx-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pg-lede{margin-top:16px;color:#5b6178;font-size:15px}

/* ------------------------------------------------- headings and buttons */
.sh2 em,.cta-h em{
  background:linear-gradient(96deg,var(--kx-brand),var(--kx-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.band.dark .sh2 em,.band.dark .cta-h em{background:none;color:var(--accent-l)}

/* the primary button is ink that fills red, the same as the home hero --
   a full red slab was shouting over every page */
.btn-p{background:var(--kx-ink);color:#fff;box-shadow:none}
.btn-p::before{background:var(--kx-accent)}
.btn-p:hover{box-shadow:0 14px 34px -14px rgba(217,20,35,.6)}

/* ---------------------------------------------------------------- cards */
.pcard{border:1px solid var(--kx-line);border-radius:16px;box-shadow:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 22px 50px -24px rgba(14,19,48,.3)}
.pcard-media{background:var(--kx-paper)}
.pcard-t{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;
  letter-spacing:-.01em}

/* chips (OEM names, tags) match the ones on the home page */
.chip,.svc-tag{border:1px solid var(--kx-line);background:#fff;border-radius:8px;
  padding:7px 12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--kx-brand)}

/* ------------------------------------------------------------ CTA band */
.cta-band{background:var(--kx-paper);border-top:1px solid var(--kx-line);
  border-bottom:1px solid var(--kx-line)}
.cta-h{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.03em}

/* contact tiles */
.co-item{border:1px solid var(--kx-line);border-radius:14px;background:#fff}
.co-lbl{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#9aa0b4}
.co-val{color:var(--kx-ink)}

/* ==========================================================================
   8. FULL-PAGE WALK-AROUND
   The gallery was a small card floating in a normal section. It now owns a
   tall scroll range with a pinned, full-height stage, so moving through the
   coach fills the screen.
   ========================================================================== */
.cx-work{padding:0}
.cx-galscroll{position:relative;height:300vh;touch-action:pan-y;cursor:grab}
.cx-galscroll:active{cursor:grabbing}
.cx-galpin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--kx-nav-h) + 18px) clamp(18px,4vw,52px) 26px}
.cx-galhead{max-width:1240px;width:100%;margin:0 auto;text-align:left;flex:none}
.cx-galhead .cx-h2{margin-top:8px}
.cx-galhead .cx-sub{margin-top:8px}

.cx-work .cx-gal{flex:1 1 auto;height:auto;min-height:0;width:100%;
  perspective:1700px;margin-top:10px}
/* .cx-plate centres itself with negative margins keyed to its ORIGINAL
   width, so any size override has to restate them or the stack drifts
   down and to the right. */
.cx-work .cx-plate{width:min(66vw,900px);aspect-ratio:16/9;border-radius:20px;
  margin-left:calc(min(66vw,900px) / -2);
  margin-top:calc(min(66vw,900px) * .5625 / -2)}
.cx-work .cx-plate img{padding:18px 18px 44px}
.cx-work .cx-plate figcaption{padding:18px 26px}
.cx-work .cx-plate figcaption small{font-size:10px}
.cx-work .cx-plate figcaption{font-size:23px}
.cx-work .cx-gal-hint{flex:none;margin-top:10px}

@media(max-width:820px){
  .cx-galscroll{height:260vh}
  .cx-work .cx-plate{width:82vw;aspect-ratio:4/3;
    margin-left:-41vw;margin-top:calc(82vw * .75 / -2)}
  .cx-galpin{padding-top:calc(var(--kx-nav-h) + 10px)}
}

/* ==========================================================================
   9. A BIGGER HERO
   ========================================================================== */
#sh .cx-h1{font-size:clamp(40px,6.2vw,92px);line-height:.92;letter-spacing:-.04em}
#sh .cx-lede{max-width:52ch;font-size:15.5px;margin-top:16px}
#sh .cx-eyebrow{font-size:11px}
#sh .cx-hero-side b{font-size:26px}
@media(min-width:1100px){
  #sh .cx-stage{min-height:340px;max-height:640px}
}
@media(min-width:1600px){
  #sh .cx-h1{font-size:100px}
}

/* .cx-stage-in is height:100%, which only resolves against a parent with a
   definite height. Now that the stage flexes, that percentage collapsed to
   its 210px min-height and the coach shrank inside a much taller frame.
   Making the stage a flex container sizes the child without percentages. */
#sh .cx-stage{display:flex}
#sh .cx-stage-in{flex:1 1 auto;height:auto;min-height:0}

/* ==========================================================================
   10. FULL-PAGE HERO
   A tall scroll range with a sticky stage inside it: the coach turns a full
   circle as the page comes down. Without JS the sticky stage just sits at
   the top of the range and the hero reads as it always did.
   ========================================================================== */
.cx-heroscroll{position:relative;height:340vh}
#sh .cx-hero-in{position:sticky;top:0;min-height:100svh;height:100svh;
  padding:calc(var(--kx-nav-h) + 14px) clamp(18px,3vw,28px) 20px}
#sh .cx-hero-copy{transform-origin:left top;will-change:transform,opacity}
#sh .cx-stage{will-change:transform}

/* the caption under the stage, one line at a time */
.cx-hero-chapter{position:relative;height:26px;margin-top:12px;flex:none;
  text-align:center}
.cx-hero-chapter span{position:absolute;left:0;right:0;top:0;opacity:0;
  font:600 10.5px/26px 'DM Sans',sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:#6b7186}

/* the numbers start out of the way and are brought up at the end */
#sh .cx-hero-strip{flex:none}

@media(max-width:820px){
  .cx-heroscroll{height:260vh}
  .cx-hero-chapter span{font-size:9px;letter-spacing:.16em}
}

/* ==========================================================================
   11. THE REAL LOGO
   Uses the file uploaded in Settings -> CMS rather than a drawn mark. The
   upload is a square that also carries the wordmark, which is illegible at
   header size, so the box crops to the bus and the JCC monogram. A future
   upload keeps working -- nothing here is baked to this one file.
   ========================================================================== */
.kx-logo{width:54px;height:30px;flex:none;overflow:hidden;display:block}
.kx-logo img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 24%}
@media(max-width:900px){.kx-logo{width:46px;height:26px}}

/* ==========================================================================
   12. THE HERO AS A VIEW
   Two and a half pages of scroll, and for all of it the coach is the screen:
   the stage fills the sticky viewport, the copy floats over it and clears out
   early, and the numbers arrive at the end. Overrides section 10.
   ========================================================================== */
.cx-heroscroll{height:250vh}

#sh .cx-hero-in{
  position:sticky;top:0;height:100svh;min-height:100svh;
  display:block;padding:0;max-width:none;
}

/* the stage IS the hero now */
#sh .cx-stage{
  position:absolute;inset:0;z-index:1;
  height:auto;min-height:0;max-height:none;margin:0;
  border:0;border-radius:0;box-shadow:none;
  transform-origin:50% 58%;
  background:
    radial-gradient(58% 42% at 50% 82%,rgba(242,101,34,.15) 0%,transparent 62%),
    linear-gradient(180deg,#fff 0%,#fbfbfe 52%,var(--kx-paper) 100%);
}
#sh .cx-stage-in{position:absolute;inset:0}
/* full size: the coach gets the whole stage, minus room for the furniture */
#sh .cx-frame img{
  padding:clamp(96px,15vh,190px) clamp(20px,7vw,150px) clamp(120px,18vh,220px);
  object-position:center 52%;
}

/* copy floats over the coach, top-left, and leaves early */
#sh .cx-hero-copy{
  position:absolute;z-index:3;left:0;right:0;top:calc(var(--kx-nav-h) + 10px);
  padding:0 clamp(20px,4vw,58px);
  max-width:1440px;margin:0 auto;pointer-events:none;
}
#sh .cx-hero-copy a,#sh .cx-hero-copy button{pointer-events:auto}
#sh .cx-h1{font-size:clamp(38px,5.6vw,84px)}
#sh .cx-lede{max-width:44ch}

/* readout, pips, hint and captions sit on top of the view */
#sh .cx-angle{left:clamp(20px,4vw,58px);top:auto;bottom:clamp(96px,14vh,150px);z-index:4}
#sh .cx-pips{right:clamp(18px,3vw,42px);z-index:4}
#sh .cx-stage-hint{bottom:clamp(84px,12vh,130px);z-index:4}

.cx-hero-chapter{position:absolute;z-index:4;left:0;right:0;
  bottom:clamp(56px,8.5vh,96px);height:26px;margin:0}

/* the numbers ride at the very bottom of the view */
#sh .cx-hero-strip{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  border-radius:0;border-left:0;border-right:0;border-bottom:0;
}

@media(max-width:900px){
  .cx-heroscroll{height:220vh}
  #sh .cx-hero-copy{top:calc(var(--kx-nav-h) + 6px)}
  #sh .cx-frame img{padding:clamp(74px,13vh,120px) 14px clamp(150px,22vh,200px)}
  #sh .cx-angle{bottom:clamp(120px,20vh,170px)}
  #sh .cx-stage-hint{bottom:clamp(108px,18vh,150px)}
  .cx-hero-chapter{bottom:clamp(80px,14vh,110px)}
}

/* ScrollTrigger pins .cx-hero-in and builds its own spacer, so the wrapper
   must NOT also carry a height or a CSS sticky -- two pins in one range
   fight, and the wrapper's own height would double the scroll distance. */
.cx-heroscroll{height:auto}
#sh .cx-hero-in{position:relative;top:auto;height:100svh;min-height:100svh;width:100%}

/* the company beats that step through as the coach turns */
.cx-hero-beats{position:absolute;z-index:4;left:0;right:0;
  bottom:clamp(58px,9vh,104px);height:64px;
  padding:0 clamp(20px,4vw,58px);max-width:1440px;margin:0 auto}
.cx-hero-beat{position:absolute;left:clamp(20px,4vw,58px);right:clamp(20px,4vw,58px);
  bottom:0;opacity:0;text-align:center}
.cx-hero-beat b{display:block;font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;
  color:var(--kx-ink);line-height:1.1}
.cx-hero-beat span{display:block;margin-top:7px;
  font:500 11px/1.6 'DM Sans',sans-serif;letter-spacing:.1em;color:#6b7186}
@media(max-width:900px){
  .cx-hero-beats{bottom:clamp(84px,14vh,120px);height:76px}
  .cx-hero-beat b{font-size:18px}
  .cx-hero-beat span{font-size:10px;letter-spacing:.06em}
}

/* the uploaded logo, in the curtain and in the footer */
.kx-load-logo{width:104px;height:104px;border-radius:18px;overflow:hidden;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 20px 60px -30px rgba(0,0,0,.8)}
.kx-load-logo img{width:100%;height:100%;object-fit:contain;display:block}
.kx-ft-logo{width:120px;height:74px;object-fit:cover;object-position:50% 24%;
  display:block;margin-bottom:10px}

/* the page is frozen while the opening plays */
html.kx-locked{overflow:hidden}

/* ==========================================================================
   13. THE OPENING
   Type, one hairline and a counter. No illustration -- the site's own
   typography is the strongest thing it has, so the opening is built from
   that rather than from a drawing competing with it. Under two and a half
   seconds, and skippable.
   ========================================================================== */
#kxload.kx-intro{
  background:#fff;color:var(--kx-ink);
  display:grid;place-content:center;justify-items:center;gap:0;
}
#kxload.kx-intro::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 46% at 50% 16%,rgba(217,20,35,.045) 0%,transparent 64%),
    radial-gradient(52% 44% at 8% 94%,rgba(46,49,146,.05) 0%,transparent 62%);
}
.kx-open{position:relative;text-align:center;padding:0 24px}

.kx-open-mark{display:block;width:64px;height:40px;margin:0 auto 26px;
  overflow:hidden;opacity:0}
.kx-open-mark img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  display:block}

/* each letter rides up out of its own mask */
.kx-open-word{display:flex;justify-content:center;gap:.02em;
  font:700 clamp(46px,9vw,124px)/1 var(--kx-serif);
  letter-spacing:-.045em;color:var(--kx-ink);margin:0}
.kx-open-word span{display:block;overflow:hidden;padding:0 .012em}
.kx-open-word i{display:block;font-style:normal;transform:translateY(108%)}

.kx-open-rule{width:min(58vw,420px);height:1px;margin:clamp(18px,3vh,30px) auto 0;
  background:var(--kx-line);overflow:hidden}
.kx-open-rule i{display:block;width:100%;height:100%;background:var(--kx-accent);
  transform:scaleX(0);transform-origin:left}

.kx-open-sub{margin-top:16px;opacity:0;
  font:600 9.5px/1 var(--kx-mono);letter-spacing:.34em;text-transform:uppercase;
  color:#9aa0b4}

/* the counter sits in the corner and doubles as the loading state */
.kx-open-count{position:absolute;left:clamp(18px,4vw,44px);bottom:clamp(18px,4vh,40px);
  display:flex;align-items:baseline;gap:3px;color:var(--kx-ink);opacity:.5}
.kx-open-count b{font:700 clamp(30px,5vw,54px)/1 var(--kx-serif);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kx-open-count span{font:600 10px/1 var(--kx-mono);letter-spacing:.2em}

.kx-skip{
  position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(18px,4vh,40px);
  z-index:2;padding:11px 20px;border-radius:999px;
  border:1px solid var(--kx-line);background:transparent;
  color:#9aa0b4;cursor:pointer;
  font:600 9px/1 var(--kx-mono);letter-spacing:.2em;text-transform:uppercase;
  transition:color .25s,border-color .25s;
}
.kx-skip:hover{color:var(--kx-ink);border-color:var(--kx-ink)}

@media (prefers-reduced-motion:reduce){#kxload.kx-intro{display:none}}