/* Non-scrollable clipping keeps focus on the motion control from internally
   scrolling the oversized artwork, shade and footer out of alignment. */

.mh-orbital{--ink:#171b18;--ivory:#ece9dc;--muted:#b1b7ab;--amber:#edb14e}.mh-orbital *{box-sizing:border-box}.mh-orbital{margin:0;background:var(--ink);color:var(--ivory);font-family:MH Orbital Sans,Arial,sans-serif}:where(.mh-orbital) a{color:inherit;text-decoration:none}:where(.mh-orbital) button{font:inherit}.mh-orbital{width:100%;height:900px;position:relative;overflow:hidden;overflow:clip;background:#171b18}.mh-o-light{position:absolute;inset:0;background:radial-gradient(ellipse at 79% 59%,#8f785039 0%,#52614c20 34%,#171b1800 63%)}.mh-o-orbital-field{position:absolute;width:1440px;height:900px;left:50%;top:0;transform:translateX(-50%)}.mh-o-orbital-field svg{width:100%;height:100%;overflow:visible}.mh-o-art{position:absolute;z-index:2;height:auto}.mh-o-front-orbit{z-index:3;pointer-events:none}.mh-o-base-shade{position:absolute;z-index:3;left:0;right:0;bottom:0;height:190px;background:linear-gradient(180deg,#171b1800,#171b18 88%)}.mh-o-nav{position:absolute;z-index:6;left:58px;right:58px;top:0;height:112px;border-bottom:1px solid #eee9d922;display:flex;align-items:center;justify-content:space-between;gap:30px}.mh-o-logo{width:194px;display:block}.mh-o-nav .mh-o-links{display:flex;gap:31px;font-size:12px;color:#c1c4b7;margin-left:auto;margin-right:150px;white-space:nowrap}.mh-o-nav-cta{font-size:12px;white-space:nowrap}.mh-o-nav-cta span{display:inline-block;color:var(--amber);margin-left:15px}.mh-o-copy{position:absolute;z-index:4;left:86px;top:253px;width:650px}.mh-o-eyebrow{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#c0b38f;margin:0 0 28px}.mh-o-eyebrow i{display:inline-block;border-radius:50%;width:5px;height:5px;background:var(--amber);margin-right:11px;vertical-align:2px}.mh-orbital h1{font-family:MH Orbital Editorial,"Times New Roman",Times,serif;white-space:nowrap;font-size-adjust:.45;font-size:108px;font-weight:400;letter-spacing:-3.7px;line-height:.98;margin:0 0 35px}.mh-o-description{font-size:16px;line-height:1.75;color:#bdc1b4;margin:0 0 30px}.mh-o-cta{display:flex;align-items:center;justify-content:space-between;width:212px;background:var(--amber);color:#24271f;padding:19px 22px;font-size:12px;line-height:1}.mh-o-cta span{font-size:17px}.mh-o-footer{position:absolute;z-index:5;left:58px;right:58px;bottom:34px;border-top:1px solid #eeebdc22;padding-top:23px;font-size:8px;letter-spacing:1.55px;color:#a5ad9e;display:flex;justify-content:space-between;align-items:center}.mh-o-footer span{font-size:10px;letter-spacing:.2px}.mh-o-footer i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#c8b07c;margin-right:8px;vertical-align:2px}.mh-o-study{position:absolute;z-index:4;color:#a9b09e;font-size:8px;letter-spacing:1.4px;line-height:1.8}.mh-o-study b{font-weight:400;color:#d6bd84}.mh-o-small-trace{position:absolute;z-index:4;color:#b4bca8;font-size:8px;letter-spacing:2.2px}.mh-o-study,.mh-o-small-trace{pointer-events:none}.mh-orbital a:focus-visible{outline:2px solid var(--amber);outline-offset:7px} .mh-o-cta{font-size:14px;font-weight:700}.mh-o-art{width:1180px;left:465px;top:145px}.mh-o-copy{top:254px;width:652px}.mh-o-study{left:813px;top:176px}.mh-o-small-trace{left:1145px;top:725px}.mh-o-copy:before{content:'';position:absolute;z-index:-1;left:-100px;top:-50px;width:670px;height:560px;background:radial-gradient(ellipse at 25% 50%,#171b1888,#171b1800 75%)}@media(max-width:760px){ .mh-orbital{height:1120px}.mh-o-nav{left:25px;right:25px;height:93px;gap:12px}.mh-o-logo{width:188px}.mh-o-nav .mh-o-links{display:none}.mh-o-nav-cta{font-size:10px}.mh-o-nav-cta span{margin-left:7px}.mh-o-copy{left:25px;top:146px;width:340px}.mh-o-eyebrow{font-size:8px;letter-spacing:1.45px;margin-bottom:24px}.mh-orbital h1{font-size:67px;letter-spacing:-2px;line-height:1.02;margin-bottom:24px}.mh-o-description{font-size:13px;line-height:1.75;margin-bottom:25px}.mh-o-cta{width:195px;font-size:11px;padding:18px 20px}.mh-o-cta span{font-size:15px}.mh-o-footer{left:25px;right:25px;bottom:25px;padding-top:21px;font-size:7px;letter-spacing:1.2px;display:block}.mh-o-footer span{display:block;font-size:9px;margin-top:15px}.mh-o-study{font-size:7px;letter-spacing:1.1px}.mh-o-small-trace{display:none}.mh-o-base-shade{height:170px;background:linear-gradient(180deg,#171b1800,#171b18 66%)}.mh-o-orbital-field{width:940px;height:587px;top:464px;left:53%}.mh-o-light{background:radial-gradient(ellipse at 66% 74%,#9b865332 0%,#53634913 44%,#171b1800 67%)} .mh-o-cta{font-size:13px}.mh-o-art{width:815px;left:-249px;top:518px}.mh-o-study{top:510px;left:25px}.mh-o-small-trace{top:939px;left:26px}.mh-o-copy:before{display:none}.mh-o-front-orbit{left:52%}}@media(max-width:360px){.mh-o-copy{width:calc(100% - 50px)}.mh-orbital h1{font-size:55px}.mh-o-logo{width:168px}.mh-o-nav-cta{font-size:9px}}@media(max-width:360px){.mh-o-art{left:-293px}.mh-o-nav{left:20px;right:20px}.mh-o-copy{left:20px}.mh-o-study{left:20px}}
.mh-orbital{display:block;padding:0;min-height:0;isolation:isolate}.mh-orbital .mh-o-art{max-width:none}.mh-orbital h1{max-width:none;text-transform:none;font-style:normal}.mh-o-eyebrow{font-weight:400;line-height:normal}.mh-o-nav>a,.mh-o-nav-cta{flex-shrink:0}.mh-o-copy{max-width:calc(100% - 50px)}
@media(min-width:761px) and (max-width:1050px){.mh-o-nav .mh-o-links{display:none}}

/* Ambient orbital loops. The anatomy and typography never drift.
   The rings repeat every 18s; their 12s fades meet again at 36s.
   The complete accent system repeats every 72s without resetting a timeline.
   CSS owns the timelines: pausing freezes their phase instead of restarting. */
.mh-o-plane{transform-box:view-box;transform-origin:1000px 512px}
.mh-o-plane-primary{opacity:.73}
.mh-o-plane-secondary{transform-origin:1020px 480px;opacity:.28}
.mh-o-plane-crossing{transform-origin:1015px 490px}
.mh-o-motion-node{offset-anchor:0px 0px;offset-position:0px 0px;offset-rotate:0deg;offset-distance:0%;opacity:.82}
.mh-o-node-upper{offset-path:path('M 577 178 C 509.5 206 449 237 396.875 276.25')}
.mh-o-node-lower{offset-path:path('M 1261 719 C 1339 674 1412 616 1454 555')}
.mh-o-orbit-glint{stroke-dasharray:28 972;stroke-dashoffset:0;stroke-linecap:round;opacity:.28}
.mh-orbital.motion-ready .mh-o-plane-primary{animation:mh-plane-primary-sweep 18s linear infinite,mh-plane-primary-breathe 12s ease-in-out -3s infinite}
.mh-orbital.motion-ready .mh-o-plane-secondary{animation:mh-plane-secondary-sweep 18s linear infinite,mh-plane-secondary-breathe 12s ease-in-out infinite}
.mh-orbital.motion-ready .mh-o-plane-crossing{animation:mh-plane-crossing-sweep 18s linear infinite}
.mh-orbital.motion-ready .mh-o-motion-node{animation:mh-node-travel 12s ease-in-out infinite,mh-node-lustre 8s ease-in-out -2s infinite}
.mh-orbital.motion-ready .mh-o-node-upper{animation-duration:8s,8s}
.mh-orbital.motion-ready .mh-o-node-lower{animation-duration:24s,8s}
.mh-orbital.motion-ready .mh-o-orbit-glint{animation:mh-orbit-glide 24s linear infinite,mh-glint-lustre 6s ease-in-out infinite}
.mh-o-art{animation:mh-art-arrive 1.6s ease-out both}

/* The filled planes sweep through one another. At 3s the main plane has
   already moved ~44px and tilted ~5.5deg, while the second moves oppositely.
   Endpoint Beziers match velocity at 0/18s; no stop-and-restart beat. */
@keyframes mh-plane-primary-sweep{
  0%{transform:translate(0px,0px) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.333333,.523599,.666667,1)}
  25%{transform:translate(52px,-24px) rotate(6.5deg) scale(1.025);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  75%{transform:translate(-52px,24px) rotate(-6.5deg) scale(0.975);animation-timing-function:cubic-bezier(.333333,0,.666667,.476401)}
  100%{transform:translate(0px,0px) rotate(0deg) scale(1);animation-timing-function:linear}
}
@keyframes mh-plane-secondary-sweep{
  0%{transform:translate(0px,0px) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.333333,.523599,.666667,1)}
  25%{transform:translate(-38px,28px) rotate(-8deg) scale(0.968);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  75%{transform:translate(38px,-28px) rotate(8deg) scale(1.032);animation-timing-function:cubic-bezier(.333333,0,.666667,.476401)}
  100%{transform:translate(0px,0px) rotate(0deg) scale(1);animation-timing-function:linear}
}
@keyframes mh-plane-crossing-sweep{
  0%{transform:translate(0px,0px) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.333333,.523599,.666667,1)}
  25%{transform:translate(18px,20px) rotate(3deg) scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  75%{transform:translate(-18px,-20px) rotate(-3deg) scale(1);animation-timing-function:cubic-bezier(.333333,0,.666667,.476401)}
  100%{transform:translate(0px,0px) rotate(0deg) scale(1);animation-timing-function:linear}
}
/* Long, staggered light passes, not flashes. Transform and opacity have
   independent CSS timelines; pause freezes both at their current phase. */
@keyframes mh-plane-primary-breathe{0%,100%{opacity:.48}50%{opacity:.98}}
@keyframes mh-plane-secondary-breathe{0%,100%{opacity:.28}50%{opacity:.92}}
@keyframes mh-node-lustre{0%,100%{opacity:.64}50%{opacity:1}}
@keyframes mh-glint-lustre{0%,100%{opacity:.28}50%{opacity:.8}}
@keyframes mh-node-travel{0%,100%{offset-distance:0%}50%{offset-distance:100%}}
@keyframes mh-orbit-glide{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes mh-art-arrive{from{opacity:.12}to{opacity:1}}
.mh-orbital.motion-paused :is(.mh-o-plane,.mh-o-motion-node,.mh-o-orbit-glint,.mh-o-art){animation-play-state:paused}
.mh-orbital.user-paused :is(.mh-o-plane,.mh-o-motion-node,.mh-o-orbit-glint){animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.mh-o-cta{transition:transform 180ms ease-out,box-shadow 180ms ease-out}.mh-o-cta:hover,.mh-o-cta:focus-visible{transform:translateY(-2px);box-shadow:0 5px 16px #00000020}}
.mh-o-motion-toggle{display:none;position:absolute;right:145px;top:20px;color:#a5ad9e;font-family:MH Orbital Sans,Arial,sans-serif;font-size:10px;line-height:1.4;letter-spacing:.1px;border:0;padding:4px 0;background:none;cursor:pointer}
.mh-orbital.motion-ready .mh-o-motion-toggle{display:block}
.mh-o-motion-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
@media(max-width:760px){
  .mh-o-motion-toggle{right:0;top:38px;font-size:9px}
  /* This exact sub-curve remains inside the real 320–760px crop, beside the
     crown. The desktop route would carry its amber point offscreen. */
  .mh-o-node-upper{offset-path:path('M 577 178 C 539.2 193.68 503.5952 210.3008 470.427072 228.784384')}
}
@supports not (offset-path:path('M 0 0 L 1 1')){.mh-o-node-upper{transform:translate(577px,178px);animation:none!important}.mh-o-node-lower{transform:translate(1261px,719px);animation:none!important}}
@media(prefers-reduced-motion:reduce){.mh-orbital :is(.mh-o-plane,.mh-o-motion-node,.mh-o-orbit-glint,.mh-o-art){animation:none!important}.mh-o-motion-toggle{display:none!important}.mh-o-plane{transform:none!important}.mh-o-motion-node{offset-distance:0%!important}.mh-o-art{opacity:1!important}.mh-o-cta{transition:none!important;transform:none!important}}

/* Each ellipse stays geometrically complete. Only the outer hero clips the
   composition; the SVG viewBox must not cut a moving oval into a flat edge. */
.mh-o-orbital-field svg{overflow:visible}

/* One-shot reveal gates only decoration. The head boot reserves these
   surfaces before paint; removing the gate restores their exact static state.
   Loop transforms and their opacity pulses remain on separate parent groups. */
:is(.model-drawing-pending.orbital-intro-pending,.orbital-intro-active) .mh-o-intro-fill{opacity:var(--mh-orbit-fill,0)}
:is(.model-drawing-pending.orbital-intro-pending,.orbital-intro-active) .mh-o-orbit-trace{stroke-dasharray:1;stroke-dashoffset:var(--mh-orbit-line,1)}
:is(.model-drawing-pending.orbital-intro-pending,.orbital-intro-active) .mh-o-trace-reverse{stroke-dashoffset:var(--mh-orbit-line-reverse,-1)}
:is(.model-drawing-pending.orbital-intro-pending,.orbital-intro-active) .mh-o-intro-accent{opacity:var(--mh-orbit-accent,0)}
@media(prefers-reduced-motion:reduce){:is(.model-drawing-pending.orbital-intro-pending,.orbital-intro-active) .mh-o-intro-fill,:is(.model-drawing-pending.orbital-intro-pending,.orbital-intro-active) .mh-o-intro-accent{opacity:1!important}:is(.model-drawing-pending.orbital-intro-pending,.orbital-intro-active) .mh-o-orbit-trace{stroke-dasharray:none!important;stroke-dashoffset:0!important}}

.orbital-intro-fallback :is(.mh-o-plane,.mh-o-motion-node,.mh-o-orbit-glint){animation:none!important}

/* Let the complete model establish its silhouette before this bright point
   joins the background. Its existing path and pulse never restart. */
.mh-o-upper-dot-reveal{opacity:1}
.model-drawing-pending .mh-o-upper-dot-reveal,
.hero-model-pending .mh-o-upper-dot-reveal{opacity:0}
.hero-dot-arriving .mh-o-upper-dot-reveal{animation:mh-upper-dot-reveal 350ms ease-out both}
@keyframes mh-upper-dot-reveal{from{opacity:0}to{opacity:1}}
.mh-orbital.motion-paused .mh-o-upper-dot-reveal,
.mh-orbital.user-paused .mh-o-upper-dot-reveal{animation-play-state:paused}
.orbital-intro-fallback .mh-o-upper-dot-reveal{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){.mh-o-upper-dot-reveal{animation:none!important;opacity:1!important}}

/* Exact anatomy-reviewed 1774×887 master.
   Desktop head scale and position are retained while the completed hand fits
   wide screens. No image transforms, stretching, or source-pixel edits. */
@media (min-width: 761px) {
  .mh-o-art { width: 1330px; left: calc(50% - 365px); top: 200px; }
  .mh-o-copy { left: max(58px, calc((100% - 1740px) / 2)); }
  .mh-o-nav, .mh-o-footer {
    left: max(58px, calc((100% - 1804px) / 2));
    right: max(58px, calc((100% - 1804px) / 2));
  }
  .mh-o-orbital-field svg { overflow: visible; }
  .mh-o-base-shade {
    height: 210px;
    background: linear-gradient(180deg, #171b1800, #171b18 80%);
  }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .mh-o-art { left: calc(50% - 205px); }
  .mh-o-copy { width: 520px; }
  .mh-orbital h1 { font-size: 90px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .mh-o-art { left: calc(50% - 155px); }
  .mh-o-copy { left: 40px; width: 440px; }
  .mh-orbital h1 { font-size: 80px; }
  .mh-o-nav, .mh-o-footer { left: 40px; right: 40px; }
}
@media (max-width: 760px) {
  .mh-o-art { width: 1360px; left: -165px; top: 496px; }
}
@media (max-width: 360px) { .mh-o-art { left: -209px; } }