/* JRC Software hero: intro animation + 5-slide carousel */
/* The hero is a dark brand surface in both themes by design. */
:root{
  --jh-black:#000000;
  --jh-orange:#F05721;
  --jh-amber:#FFB547;
  --jh-white:#FFFFFF;
  --jh-muted:#B9B4AE;
  --jh-line:rgba(255,255,255,.14);
  --jh-panel:#0E0D0C;
  --jh-surface:#000000;
  --jh-text:#FFFFFF;
  --jh-display:"Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jh-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jh-ease:cubic-bezier(.2,.7,.1,1);
  /* matches the site header gutter (a flat 24px at every width), so the hero
     nav, slide copy and dots line up with every other page */
  --jh-gutter:1.5rem;
  --jh-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --jh-peak:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M50 0 L100 100 L81.6 100 Q80.4 100 79.9 99 L50 39 L20.1 99 Q19.6 100 18.4 100 L0 100 Z'/></svg>");
}

/* Scoped resets. The hero lives inside #jh-page; the intro overlay and the
   fly-in element are siblings of it, so they are listed separately. */
:where(#jh-page, .jh-intro, .jh-flyer), :where(#jh-page, .jh-intro, .jh-flyer) *,
:where(#jh-page, .jh-intro, .jh-flyer) *::before, :where(#jh-page, .jh-intro, .jh-flyer) *::after{ box-sizing:border-box; }
#jh-page, .jh-intro{ color-scheme:dark; background:var(--jh-surface); color:var(--jh-text);
  font-family:var(--jh-body); -webkit-font-smoothing:antialiased; }
:where(#jh-page, .jh-intro) img{ max-width:100%; display:block; }
:where(#jh-page) a{ color:inherit; }
html{ scroll-padding-top:5rem; }
:where(#jh-page, .jh-intro) :focus-visible{ outline:2px solid var(--jh-amber); outline-offset:3px; border-radius:6px; }

/* ---------- Intro ---------- */
.jh-intro{ position:fixed; inset:0; margin:0; z-index:1100; background:var(--jh-black); display:grid; place-items:center; overflow:hidden; transition:opacity .7s ease, visibility 0s linear .7s; }
.jh-intro.jh-is-done{ opacity:0; visibility:hidden; }
.jh-intro__glow{ position:absolute; left:50%; top:50%; width:140vmax; height:140vmax; transform:translate(-50%,-50%) scale(0); border-radius:50%;
  background:radial-gradient(circle, rgba(240,87,33,.5) 0%, rgba(240,87,33,.15) 30%, rgba(0,0,0,0) 60%); transition:transform 1.3s var(--jh-ease); }
.jh-intro.jh-is-bloom .jh-intro__glow{ transform:translate(-50%,-50%) scale(1); }
.jh-intro__stage{ position:relative; --jh-wm-w:min(560px, 76vw); width:var(--jh-wm-w); height:calc(var(--jh-wm-w) * 82 / 900); }
.jh-intro__wordmark{ position:absolute; inset:0; width:100%; height:100%; clip-path:inset(0 50% 0 50%); transition:clip-path .8s var(--jh-ease); }
.jh-intro.jh-is-word .jh-intro__wordmark{ clip-path:inset(0 0 0 0); }
.jh-intro__mark{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; overflow:visible; transition:transform .8s var(--jh-ease); }
.jh-intro__mark path{ fill:rgba(240,87,33,0); stroke:var(--jh-orange); stroke-width:1.6; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1s cubic-bezier(.6,0,.3,1), fill .35s ease; }
.jh-intro.jh-is-draw .jh-intro__mark path{ stroke-dashoffset:0; }
.jh-intro.jh-is-fill .jh-intro__mark path{ fill:var(--jh-orange); }
.jh-intro.jh-is-word .jh-intro__mark{ transform:translate(var(--jh-tx), 0) scale(var(--jh-s)); }
.jh-intro.jh-is-word .jh-intro__mark.jh-is-hidden{ opacity:0; transition:opacity .2s ease .75s, transform .8s var(--jh-ease); }
.jh-intro__skip{ position:absolute; right:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); background:none; border:1px solid var(--jh-line); color:var(--jh-muted);
  font:500 14px var(--jh-body); padding:12px 18px; border-radius:999px; cursor:pointer; min-height:44px; }
.jh-intro__skip:hover{ color:var(--jh-white); border-color:rgba(255,255,255,.4); }

/* ---------- Nav ---------- */
.jh-page{ position:relative; }
.jh-nav{ position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:color .6s ease, background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.jh-nav{ border-bottom:1px solid transparent; }
.jh-nav.jh-is-stuck{ background:hsl(0 0% 4% / .8); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom-color:hsl(0 0% 100% / .05); }
.jh-nav::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none;
  transition:opacity .5s ease;
  background:linear-gradient(120deg, #F05721 0%, #F46A26 45%, #FF9A3C 100%);
  background-repeat:no-repeat;
  background-size:var(--jh-hero-w, 100vw) var(--jh-hero-h, 100vh);
  background-position:0 var(--jh-hero-y, 0px); }

/* Slide 3, scrolled, and the hero still behind the bar: wear the slide's own
   gradient instead of the dark bar, and keep the slide's black-on-orange tone. */
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck.jh-is-overhero{ background-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; color:var(--jh-black); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck.jh-is-overhero::before{ opacity:1; }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck.jh-is-overhero .jh-nav__logo img{ filter:brightness(0); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck.jh-is-overhero .jh-btn--primary{ background:var(--jh-black); color:var(--jh-white); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck.jh-is-overhero .mobile-menu-btn{ border-color:rgba(0,0,0,.35); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck.jh-is-overhero .mobile-menu-btn:hover{ border-color:rgba(0,0,0,.6); }
.jh-nav__in{ max-width:1280px; margin:0 auto; padding:22px var(--jh-gutter); display:flex; align-items:center; gap:32px;
  transition:padding .3s ease; }
/* condensed, it is exactly the 4rem of the site header on every other page */
.jh-nav.jh-is-stuck .jh-nav__in{ padding-top:10px; padding-bottom:10px; }
/* same box as the site header logo on every other page */
.jh-nav__logo img{ width:150px; height:auto; transition:filter .6s ease; }
.jh-nav__links{ display:flex; gap:32px; margin:0 auto; padding:0; list-style:none; }
.jh-nav__links a{ text-decoration:none; font-size:14px; font-weight:500; opacity:.82; }
.jh-nav__links a:hover{ opacity:1; }
.jh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px; border-radius:999px; font:600 15px var(--jh-body);
  text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--jh-ease), background-color .25s ease, border-color .25s ease, color .25s ease; }
.jh-btn:hover{ transform:translateY(-2px); }
.jh-btn--primary{ background:linear-gradient(100deg, var(--jh-orange), #FF8A3D 55%, var(--jh-amber)); color:var(--jh-black); }
.jh-btn--ghost{ border-color:rgba(255,255,255,.35); color:var(--jh-white); }
.jh-btn--ghost:hover{ border-color:var(--jh-white); }
.jh-btn--ink{ background:var(--jh-black); color:var(--jh-white); }
.jh-btn--ink-ghost{ border-color:rgba(0,0,0,.45); color:var(--jh-black); }
/* the site header CTA is 14px/500, not the hero buttons' 15px/600 */
.jh-nav .jh-btn{ min-height:44px; padding:0 22px; font-size:14px; font-weight:500; }
/* new.css pins the hamburger to a fixed foreground colour; in the hero it has to
   follow the header tone like everything else in the nav */
.jh-nav .mobile-menu-btn{ color:inherit; }
.jh-page[data-tone="light"] .jh-nav{ color:var(--jh-black); }
.jh-page[data-tone="light"] .jh-nav__logo img{ filter:brightness(0); }
.jh-page[data-tone="light"] .jh-nav .jh-btn--primary{ background:var(--jh-black); color:var(--jh-white); }
/* the shared .mobile-menu-btn draws with currentColor, so it follows the tone on
   its own; only its border needs the light-slide treatment */
.jh-page[data-tone="light"] .jh-nav .mobile-menu-btn{ border-color:rgba(0,0,0,.35); }
.jh-page[data-tone="light"] .jh-nav .mobile-menu-btn:hover{ border-color:rgba(0,0,0,.6); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck{ color:var(--jh-white); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck .jh-nav__logo img{ filter:none; }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck .jh-btn--primary{
  background:linear-gradient(100deg, var(--jh-orange), #FF8A3D 55%, var(--jh-amber)); color:var(--jh-black); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck .mobile-menu-btn{ border-color:var(--jh-line); }
.jh-page[data-tone="light"] .jh-nav.jh-is-stuck .mobile-menu-btn:hover{ border-color:rgba(255,255,255,.4); }

/* ---------- Hero frame ---------- */
.jh-hero{ position:relative; background:var(--jh-black); overflow:hidden; }
.jh-slides{ display:grid; }
/* set by hero.js while the stacked mobile layout changes height between slides */
.jh-slides.jh-is-sizing{ overflow:hidden; transition:height .6s var(--jh-ease); }
.jh-slide{ grid-area:1 / 1; position:relative; display:grid; align-items:center; min-height:max(680px, 100svh); overflow:hidden;
  padding:110px 0 120px; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s linear .9s; }
.jh-slide.jh-is-active{ opacity:1; visibility:visible; transition:opacity .9s ease; z-index:1; }
.jh-grain{ position:absolute; inset:0; z-index:2; pointer-events:none; background-image:var(--jh-grain); opacity:.11; mix-blend-mode:overlay; }

.jh-wrap{ position:relative; z-index:3; width:100%; max-width:1280px; margin:0 auto; padding:0 var(--jh-gutter);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center; }
.jh-copy{ max-width:620px; }
.jh-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid rgba(240,87,33,.5);
  color:var(--jh-amber); font-size:14px; font-weight:500; margin-bottom:26px; }
.jh-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--jh-orange); }
.jh-slide--orange .jh-pill{ border-color:rgba(0,0,0,.35); color:var(--jh-black); }
.jh-slide--orange .jh-pill::before{ background:var(--jh-black); }

:where(#jh-page) h1, :where(#jh-page) h2{ font-family:var(--jh-display); font-weight:600; letter-spacing:-.035em; line-height:1.02; margin:0; font-size:clamp(2.5rem, 5.2vw, 4.9rem); }
.jh-line{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.jh-line > span{ display:block; transform:translateY(108%); transition:transform 1s var(--jh-ease); transition-delay:calc(var(--jh-d, 0) * 110ms + 250ms); }
.jh-slide.jh-is-active .jh-line > span{ transform:none; }
.jh-line--warm > span{ background:linear-gradient(95deg, var(--jh-orange) 0%, #FF8A3D 45%, var(--jh-amber) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jh-slide--orange .jh-line--warm > span{ background:none; color:var(--jh-black); -webkit-text-fill-color:var(--jh-black); opacity:.62; }
.jh-lede{ font-size:clamp(1rem, 1.25vw, 1.15rem); line-height:1.6; color:var(--jh-muted); max-width:50ch; margin:26px 0 0; }
.jh-slide--orange .jh-lede{ color:rgba(0,0,0,.78); }
.jh-rise{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .9s var(--jh-ease); transition-delay:calc(var(--jh-d, 0) * 110ms + 300ms); }
.jh-slide.jh-is-active .jh-rise{ opacity:1; transform:none; }
.jh-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* ---------- Slide 1: the Λ composition ---------- */
.jh-art{ position:absolute; z-index:1; top:0; bottom:0; right:0; width:56%; pointer-events:none; --jh-mx:0; --jh-my:0; opacity:0; transition:opacity 1.2s ease; }
.jh-slide.jh-is-active .jh-art{ opacity:1; }
.jh-aura{ position:absolute; width:78%; aspect-ratio:1 / 1; left:8%; top:16%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(240,87,33,.2), rgba(240,87,33,.06) 55%, rgba(240,87,33,0)); filter:blur(30px); animation:jh-aura 16s ease-in-out infinite alternate; }
@keyframes jh-aura{ 0%{ transform:translate(-6%, 5%) scale(1); } 100%{ transform:translate(8%, -6%) scale(1.14); } }
.jh-ghost{ position:absolute; width:min(54vw, 96vh, 860px); aspect-ratio:1 / 1; left:40%; bottom:-30%;
  transform:translate(calc(var(--jh-mx) * -30px), calc(var(--jh-my) * -20px)); transition:transform 1.2s var(--jh-ease); }
.jh-ghost svg{ width:100%; height:100%; overflow:visible; }
.jh-ghost path{ fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.08); stroke-width:1; vector-effect:non-scaling-stroke; }
.jh-ghost--small{ width:min(13vw, 22vh, 200px); left:72%; bottom:auto; top:13%; transform:translate(calc(var(--jh-mx) * 22px), calc(var(--jh-my) * 16px)); }
.jh-ghost--small path{ fill:none; stroke:rgba(255,255,255,.12); }
.jh-peak{ position:absolute; width:min(39vw, 70vh, 620px); aspect-ratio:1 / 1; left:27%; bottom:11%;
  transform:translate(calc(var(--jh-mx) * -14px), calc(var(--jh-my) * -10px)); transition:transform .9s var(--jh-ease), opacity .7s ease; }
.jh-peak.jh-is-waiting{ opacity:0; transition:none; }
.jh-peak__float{ position:absolute; inset:0; animation:jh-float 9s ease-in-out infinite; }
@keyframes jh-float{ 50%{ transform:translateY(-12px); } }
.jh-peak__fill{ position:absolute; inset:0; -webkit-mask:var(--jh-peak) center / 100% 100% no-repeat; mask:var(--jh-peak) center / 100% 100% no-repeat; }
.jh-peak__fill canvas{ width:100%; height:100%; display:block; opacity:.92; }
.jh-peak__shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 100%); }
.jh-peak__line{ position:absolute; inset:-6% -6% 0; width:112%; height:106%; overflow:visible; }
.jh-peak__line path{ fill:none; stroke:rgba(255,181,71,.28); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1) .6s; }
.jh-slide.jh-is-active .jh-peak__line path{ stroke-dashoffset:0; }
.jh-flyer{ position:fixed; z-index:1101; pointer-events:none; transform-origin:0 0; background:#F05721;
  -webkit-mask:var(--jh-peak) center / 100% 100% no-repeat; mask:var(--jh-peak) center / 100% 100% no-repeat; }
.jh-flyer::after{ content:""; position:absolute; inset:0; background:linear-gradient(165deg, #FFB547 0%, #F46A26 40%, #A8350F 78%, #3A1004 100%); opacity:0; transition:opacity 1.4s ease; }
.jh-flyer.jh-is-flying{ transition:transform 1.4s cubic-bezier(.7,0,.2,1); }
.jh-flyer.jh-is-flying::after{ opacity:.95; }
.jh-flyer.jh-is-landed{ opacity:0; transition:opacity .7s ease; }
.jh-proof{ display:flex; flex-wrap:wrap; margin:38px 0 0; padding:0; list-style:none; }
.jh-proof li{ padding:0 26px; border-left:1px solid var(--jh-line); }
.jh-proof li:first-child{ padding-left:0; border-left:0; }
.jh-proof b{ display:block; font-family:var(--jh-display); font-size:26px; font-weight:600; letter-spacing:-.02em; }
.jh-proof span{ font-size:14px; color:var(--jh-muted); }

/* ---------- Slide 2: blueprint + prompt + review ---------- */
.jh-blueprint{ position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:48px 48px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(60% 70% at 75% 50%, #000 0%, transparent 75%); mask-image:radial-gradient(60% 70% at 75% 50%, #000 0%, transparent 75%); }
.jh-wash{ position:absolute; z-index:0; width:60vw; height:60vw; right:-10vw; top:50%; transform:translateY(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(240,87,33,.2), rgba(240,87,33,0)); pointer-events:none; }
.jh-stages{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:28px 0 0; padding:0; list-style:none; counter-reset:stage; }
.jh-stages li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--jh-white); }
.jh-stages li::before{ counter-increment:stage; content:counter(stage); width:24px; height:24px; border-radius:50%; border:1px solid rgba(240,87,33,.55); color:var(--jh-amber); font-size:12px; font-weight:600; display:grid; place-items:center; }
.jh-stages li:not(:last-child)::after{ content:""; width:22px; height:1px; background:rgba(255,255,255,.25); margin-left:2px; }

.jh-duo{ position:relative; padding-top:0; width:100%; max-width:450px; margin-left:auto; margin-right:-12px; }
.jh-prompt{ position:absolute; top:0; left:-28px; z-index:2; width:min(360px, 80%); background:rgba(20,18,16,.92); border:1px solid var(--jh-line); border-radius:14px; padding:14px 16px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.jh-prompt small{ display:block; font-size:12px; color:var(--jh-muted); margin-bottom:6px; }
.jh-prompt p{ margin:0; font-size:14px; line-height:1.45; min-height:2.9em; }
.jh-caret{ display:inline-block; width:2px; height:1em; background:var(--jh-amber); vertical-align:-2px; margin-left:1px; animation:jh-blink 1s steps(1) infinite; }
@keyframes jh-blink{ 50%{ opacity:0; } }
.jh-scan{ position:relative; background:rgba(14,13,12,.94); border:1px solid var(--jh-line); border-radius:18px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(240,87,33,.35); }
.jh-scan__bar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--jh-line); }
.jh-dots{ display:flex; gap:6px; }
.jh-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); }
.jh-scan__url{ flex:1; font-size:13px; color:var(--jh-muted); background:rgba(255,255,255,.06); border-radius:8px; padding:7px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jh-status{ font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--jh-muted); white-space:nowrap; transition:background-color .4s ease, color .4s ease; }
.jh-status.jh-is-live{ background:var(--jh-orange); color:var(--jh-black); }
.jh-scan__body{ padding:20px 22px 22px; }
.jh-scan__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.jh-scan__head h3{ margin:0; font:600 16px var(--jh-display); letter-spacing:-.01em; }
.jh-scan__head span{ font-size:12px; color:var(--jh-muted); }
.jh-checks{ list-style:none; margin:0; padding:0; }
.jh-check{ display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid rgba(255,255,255,.07); font-size:14px; }
.jh-check__icon{ width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); position:relative; }
.jh-check.jh-is-checking .jh-check__icon{ border-color:rgba(255,255,255,.15); border-top-color:var(--jh-amber); animation:jh-spin .7s linear infinite; }
.jh-check.jh-is-issue .jh-check__icon{ border-color:var(--jh-orange); background:var(--jh-orange); }
.jh-check.jh-is-issue .jh-check__icon::after{ content:"!"; position:absolute; inset:0; display:grid; place-items:center; font:700 11px var(--jh-body); color:var(--jh-black); }
.jh-check.jh-is-ok .jh-check__icon{ border-color:var(--jh-white); background:var(--jh-white); }
.jh-check.jh-is-ok .jh-check__icon::after{ content:""; position:absolute; left:5px; top:3px; width:4px; height:8px; border:solid var(--jh-black); border-width:0 2px 2px 0; transform:rotate(45deg); }
.jh-check__note{ font-size:13px; color:var(--jh-muted); text-align:right; }
.jh-check.jh-is-issue .jh-check__note{ color:var(--jh-amber); }
.jh-deploy{ margin-top:16px; }
.jh-deploy__row{ display:flex; justify-content:space-between; font-size:13px; color:var(--jh-muted); margin-bottom:8px; }
.jh-deploy__track{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.jh-deploy__fill{ height:100%; width:0; background:linear-gradient(90deg, var(--jh-orange), var(--jh-amber)); transition:width 1.4s cubic-bezier(.5,0,.2,1); }
@keyframes jh-spin{ to{ transform:rotate(360deg); } }

/* ---------- Slide 3: orange ---------- */
.jh-slide--orange{ background:linear-gradient(120deg, #F05721 0%, #F46A26 45%, #FF9A3C 100%); color:var(--jh-black); }
.jh-gauge{ position:absolute; z-index:0; right:-12vw; top:50%; width:min(1100px, 90vw); aspect-ratio:1; transform:translateY(-50%); pointer-events:none; }
.jh-gauge svg{ width:100%; height:100%; animation:jh-turn 120s linear infinite; }
.jh-gauge circle{ fill:none; stroke:rgba(0,0,0,.14); }
@keyframes jh-fadein{ from{ opacity:0; } to{ opacity:1; } }
.jh-contours{ position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(75% 85% at 72% 60%, #000 35%, transparent 85%); mask-image:radial-gradient(75% 85% at 72% 60%, #000 35%, transparent 85%); }
.jh-contours svg{ width:100%; height:100%; display:block; }
.jh-contours path{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:1; vector-effect:non-scaling-stroke; animation:jh-contour 5.6s ease-in-out infinite; animation-delay:calc(var(--jh-i) * .45s); }
@keyframes jh-contour{ 0%, 100%{ stroke:rgba(255,255,255,.09); } 14%{ stroke:rgba(255,181,71,.2); } 30%{ stroke:rgba(255,255,255,.09); } }
.jh-gauge--dark{ right:-6vw; width:min(980px, 74vw); }
.jh-gauge--dark circle{ stroke:rgba(255,255,255,.075); }
.jh-gauge--dark svg{ animation-direction:reverse; }
@keyframes jh-turn{ to{ transform:rotate(360deg); } }
.jh-report{ background:var(--jh-black); color:var(--jh-white); border-radius:22px; padding:28px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.6); max-width:560px; margin-left:auto; }
.jh-ring{ position:relative; width:180px; height:180px; }
.jh-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.jh-ring circle{ fill:none; stroke-width:12; }
.jh-ring .jh-track{ stroke:rgba(255,255,255,.1); }
.jh-ring .jh-val{ stroke:url(#jh-warm); stroke-linecap:round; stroke-dasharray:553; stroke-dashoffset:553; transition:stroke-dashoffset 1.8s var(--jh-ease) .5s; }
.jh-ring__num{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.jh-ring__num b{ display:block; font:600 46px/1 var(--jh-display); letter-spacing:-.03em; }
.jh-ring__num span{ font-size:12px; color:var(--jh-muted); }
.jh-areas{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.jh-area{ font-size:13px; }
.jh-area__top{ display:flex; justify-content:space-between; margin-bottom:6px; }
.jh-area__top em{ font-style:normal; color:var(--jh-muted); }
.jh-area__top em.jh-risk{ color:var(--jh-amber); }
.jh-area__bar{ height:5px; border-radius:5px; background:rgba(255,255,255,.1); overflow:hidden; }
.jh-area__bar i{ display:block; height:100%; width:0; background:var(--jh-white); border-radius:5px; transition:width 1.2s var(--jh-ease); }
.jh-area__bar i.jh-risk{ background:var(--jh-orange); }
.jh-report__foot{ grid-column:1 / -1; font-size:12px; color:var(--jh-muted); border-top:1px solid var(--jh-line); padding-top:14px; }

/* ---------- Slide 4: products in 3D ---------- */
.jh-floor{ position:absolute; z-index:0; left:40%; right:-10%; bottom:-30%; height:80%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(240,87,33,.32), rgba(255,138,61,.12) 50%, rgba(0,0,0,0)); filter:blur(20px); pointer-events:none; }
.jh-stage3d{ perspective:1600px; height:440px; position:relative; }
.jh-fan{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(-16deg) rotateX(8deg); }
.jh-win{ position:absolute; left:0; top:30%; width:78%; aspect-ratio:16 / 10; border-radius:12px; overflow:hidden; background:#fff;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  transition:transform 1s var(--jh-ease), opacity 1s ease; }
.jh-win img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.jh-win[data-pos="0"]{ transform:translate3d(0,0,0); opacity:1; z-index:4; }
.jh-win[data-pos="1"]{ transform:translate3d(14%,-18%,-220px); opacity:.6; z-index:3; }
.jh-win[data-pos="2"]{ transform:translate3d(28%,-36%,-440px); opacity:.35; z-index:2; }
.jh-win[data-pos="3"]{ transform:translate3d(42%,-54%,-660px); opacity:.18; z-index:1; }
.jh-prod-list{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none; }
.jh-prod-list li{ font-size:14px; padding:8px 14px; border-radius:999px; border:1px solid var(--jh-line); color:var(--jh-muted); transition:color .4s ease, border-color .4s ease; }
.jh-prod-list li.jh-is-on{ color:var(--jh-white); border-color:var(--jh-orange); }

/* ---------- Slide 5: services as layers of the Λ ---------- */
.jh-layers{ width:100%; }
.jh-layers svg{ width:100%; height:auto; overflow:visible; display:block; }
.jh-seg{ cursor:pointer; outline:none; }
.jh-seg__shape{ fill:#12100E; stroke:rgba(255,255,255,.16); stroke-width:1; transition:fill .6s ease, stroke .4s ease; }
.jh-seg__label{ fill:var(--jh-muted); font:500 16px var(--jh-body); transition:fill .4s ease; }
.jh-seg__wrap{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .8s var(--jh-ease); }
.jh-layers.jh-is-built .jh-seg__wrap{ opacity:1; transform:none; }
.jh-seg.jh-is-lit .jh-seg__shape{ fill:url(#jh-layerGrad); stroke:rgba(255,181,71,.6); }
.jh-seg.jh-is-lit .jh-seg__label{ fill:var(--jh-white); }
.jh-seg.jh-is-current .jh-seg__label{ fill:var(--jh-amber); }
.jh-seg:hover .jh-seg__shape, .jh-seg:focus-visible .jh-seg__shape{ stroke:var(--jh-amber); }
.jh-seg:focus-visible .jh-seg__label{ text-decoration:underline; }
.jh-caption{ margin:18px auto 0; max-width:440px; text-align:center; min-height:4.6em; }
.jh-caption b{ display:block; font:600 18px var(--jh-display); letter-spacing:-.01em; margin-bottom:4px; }
.jh-caption span{ font-size:14px; line-height:1.5; color:var(--jh-muted); }

/* ---------- Controls ---------- */
.jh-controls{ position:absolute; left:0; right:0; bottom:28px; z-index:5; }
.jh-controls__in{ max-width:1280px; margin:0 auto; padding:0 var(--jh-gutter); display:flex; align-items:center; gap:14px; }
.jh-dots-nav{ display:flex; align-items:center; gap:2px; }
.jh-tab{ background:none; border:0; padding:0 4px; min-height:44px; min-width:20px; cursor:pointer; display:flex; align-items:center; }
.jh-tab__track{ position:relative; display:block; width:8px; height:8px; border-radius:8px; background:rgba(255,255,255,.35); overflow:hidden; transition:width .5s var(--jh-ease), background-color .3s ease; }
.jh-tab:hover .jh-tab__track{ background:rgba(255,255,255,.7); }
.jh-tab.jh-is-active .jh-tab__track{ width:56px; background:rgba(255,255,255,.22); }
.jh-tab__fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--jh-orange); border-radius:8px; }
.jh-tab.jh-is-active .jh-tab__fill{ animation:jh-fill var(--jh-dur, 7s) linear forwards; }
.jh-hero.jh-is-paused .jh-tab.jh-is-active .jh-tab__fill{ animation-play-state:paused; }
@keyframes jh-fill{ from{ width:0; } to{ width:100%; } }
.jh-pause{ width:36px; height:36px; border-radius:50%; border:1px solid var(--jh-line); background:none; color:var(--jh-white); cursor:pointer; display:grid; place-items:center; margin-left:6px; }
.jh-pause svg{ width:12px; height:12px; }
.jh-page[data-tone="light"] .jh-tab__track{ background:rgba(0,0,0,.28); }
.jh-page[data-tone="light"] .jh-tab.jh-is-active .jh-tab__track{ background:rgba(0,0,0,.18); }
.jh-page[data-tone="light"] .jh-tab__fill{ background:var(--jh-black); }
.jh-page[data-tone="light"] .jh-pause{ color:var(--jh-black); border-color:rgba(0,0,0,.3); }

/* ---------- Responsive ---------- */
@media (max-width: 1060px){
  .jh-nav__links{ display:none; }
  .jh-nav__in{ justify-content:space-between; }
  .jh-nav__cta{ display:none; }
  /* the site only shows the hamburger below 768px; the hero drops its links at
     1060px, so bring it in here too rather than leave a gap with no nav at all */
  .jh-nav .mobile-menu-btn{ display:flex; }
}
@media (max-width: 960px){
  .jh-wrap{ grid-template-columns:1fr; gap:40px; }
  .jh-slide{ align-items:start; padding:110px 0 100px; }
  /* one slide at a time, so no slide carries the tallest slide's empty space.
     hero.js animates the height change; see .jh-slides.jh-is-sizing below. */
  .jh-slides{ display:block; }
  .jh-slide{ display:none; }
  .jh-slide.jh-is-active{ display:grid; animation:jh-fadein .7s ease; }
  .jh-slide--brand{ padding-bottom:calc(min(56vw, 360px) + 60px); }
  .jh-art{ width:100%; top:auto; height:calc(min(56vw, 360px) + 60px); }
  .jh-peak{ width:min(52vw, 330px); left:auto; right:12%; bottom:14%; }
  .jh-ghost{ width:min(80vw, 520px); left:44%; bottom:-46%; }
  .jh-ghost--small{ width:min(18vw, 110px); left:auto; right:8%; top:2%; bottom:auto; }
  .jh-aura{ width:90%; left:5%; top:0; }
  .jh-duo{ padding-top:0; margin-right:0; }
  .jh-report{ margin-left:0; }
  .jh-stage3d{ height:320px; }
  .jh-prompt{ left:0; }
  .jh-gauge{ right:-40vw; top:70%; }
  .jh-gauge--dark{ right:-50vw; top:78%; width:130vw; }
}
@media (max-width: 560px){
  /* stretch, not start: start shrank the area list and the footer to their own
     content width, leaving the score bars far short of the card. The ring keeps
     its own 140px below, so stretching the column does not stretch it. */
  .jh-report{ grid-template-columns:1fr; justify-items:stretch; padding:22px; }
  .jh-ring{ width:140px; height:140px; }
  .jh-ring__num b{ font-size:36px; }
  .jh-check__note{ font-size:12px; }
  .jh-check.jh-is-optional-m{ display:none; }
  .jh-slide--brand .jh-proof{ display:none; }
  .jh-proof{ gap:16px 28px; }
  .jh-proof li, .jh-proof li:first-child{ padding:0; border-left:0; }
  .jh-proof b{ font-size:22px; }
  .jh-stage3d{ height:240px; }
}
@media (prefers-reduced-motion: reduce){
  :where(#jh-page, .jh-intro, .jh-flyer), :where(#jh-page, .jh-intro, .jh-flyer) *,
  :where(#jh-page, .jh-intro, .jh-flyer) *::before, :where(#jh-page, .jh-intro, .jh-flyer) *::after{
    transition-duration:.01ms !important; transition-delay:0s !important; animation-duration:.01ms !important; }
}