/* Homepage enhancement. Content is visible before JavaScript and if GSAP fails. */
.page-index .hero-fixed .chip{top:calc(var(--head-h) + 40px)}
.page-index .home-title-mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.page-index .home-title-line{display:inline-block;white-space:nowrap}
.page-index .hero-fixed-copy hr{transform-origin:left center}

/* Continuous project shelf; hover and keyboard focus pause it. */
.page-index .works-strip{margin-top:24px;padding-bottom:8px;scroll-snap-type:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.page-index .works-strip.is-looping{scrollbar-width:none}
.page-index .works-strip.is-looping::-webkit-scrollbar{display:none}
.page-index .works-strip.is-static [data-work-clone]{display:none}
/* One CSS state covers original cards and runtime loop copies. */
.page-index .wcard{
  --card-enter:0;--card-image-scale:1;--card-arrow-shift:0px;--card-line-scale:0;
  --card-heading:var(--t1);--card-category:var(--mut4);--card-metric-label:var(--mut4);
  height:auto;min-height:780px;transition:box-shadow .18s ease;
}
.page-index .wcard-fig{overflow:hidden;flex:none}
.page-index .wcard-fig img{
  transform:scale(var(--card-image-scale));
  transition:transform calc(.28s + var(--card-enter) * .17s) cubic-bezier(.2,.7,.2,1);
  user-select:none;-webkit-user-drag:none;
}
.page-index .wcard-dimrow svg{
  transform:translate(var(--card-arrow-shift),calc(-1 * var(--card-arrow-shift)));
  color:var(--card-category);transition:transform .2s ease,color .18s ease;
}
.page-index .wcard-dim{color:var(--card-category);transition:color .18s ease}
.page-index .wcard-body h3{color:var(--card-heading);transition:color .2s ease;transition-delay:calc(var(--card-enter) * .08s)}
.page-index .wcard-metrics>div{--metric-order:0}
.page-index .wcard-metrics>div:nth-child(2){--metric-order:1}
.page-index .wcard-metrics>div:nth-child(3){--metric-order:2}
.page-index .wcard-metrics strong,.page-index .wcard-metrics span{
  transition:color .2s ease;
  transition-delay:calc(var(--card-enter) * (.12s + var(--metric-order) * .06s));
}
.page-index .wcard-metrics strong{color:var(--card-heading)}
.page-index .wcard-metrics span{color:var(--card-metric-label)}
.page-index .works-strip .wcard .wcard-accent{background:var(--line2)}
.page-index .wcard-accent::before{
  content:'';position:absolute;inset:0;background:var(--blue2);pointer-events:none;
  transform:scaleX(var(--card-line-scale));transform-origin:left center;
  transition:transform calc(.2s + var(--card-enter) * .1s) cubic-bezier(.2,.7,.2,1);
}
.page-index .wcard:focus-visible{
  --card-enter:1;--card-image-scale:1.03;--card-arrow-shift:4px;--card-line-scale:1;
  --card-heading:var(--white);--card-category:var(--blue2);--card-metric-label:var(--t2);
  outline-offset:-2px;box-shadow:inset 0 0 0 1px rgba(105,152,239,.5);
}
@media (hover:hover) and (pointer:fine){
  .page-index .wcard:hover{
    --card-enter:1;--card-image-scale:1.03;--card-arrow-shift:4px;--card-line-scale:1;
    --card-heading:var(--white);--card-category:var(--blue2);--card-metric-label:var(--t2);
  }
}

/* Semantic method steps retain the approved desktop geometry. */
.page-index .method{background:var(--band);padding-bottom:56px}
.page-index .quad-wrap{margin-top:32px;height:calc(864px * var(--method-scale,1))}
.page-index .quad{transform:scale(var(--method-scale,1));transform-origin:top center}
.method-step{display:contents}
.page-index .quad-q{transition:color .2s ease}
.page-index .quad-q h4{transition:color .2s ease}
.page-index .quad-no{white-space:nowrap;text-align:inherit;transition:color .2s ease}
.page-index .quad-no::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--blue2);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.method-step.is-active .quad-no{color:var(--green)}
.method-step.is-active .quad-no::after{transform:scaleX(1)}
.method-step.is-active .quad-q h4{color:var(--white)}
.method-step.is-active .quad-q .out{text-shadow:0 0 16px rgba(36,199,137,.25)}
.page-index .quad-center{border:1px solid transparent;transition:border-color .2s ease}
.page-index .quad-center strong{pointer-events:none}
.page-index .quad-center:hover,.page-index .quad-center:focus-visible{border-color:var(--green)}
.method-routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none;overflow:visible}
.home-motion-ready .method-routes{display:block}
.home-motion-ready .quad-routes{opacity:0}
.method-route-base,.method-route-signal{fill:none;stroke:var(--blue2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.method-route-base{stroke-dasharray:4 7;opacity:.55}
.method-route-signal{stroke:var(--green);stroke-width:2.5;stroke-dasharray:.1 .9;stroke-dashoffset:var(--signal-offset,.15);opacity:0}
.page-index .foot-rule{transform-origin:left center}

@media (max-width:1679px) and (min-width:1101px){
  .page-index .quad-wrap{--method-scale:.78}
}
@media (max-width:1280px) and (min-width:1101px){
  .page-index .quad-wrap{--method-scale:.7}
}
@media (max-width:1100px){
  .page-index .method{padding-top:72px}
  .page-index .quad-wrap{height:auto;margin-top:40px}
  .page-index .quad{width:calc(100% - 48px);height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;transform:none}
  .page-index .quad-deco,.page-index .quad-routes,.page-index .method-routes{display:none}
  .page-index .quad-center{position:relative;left:auto;top:auto;width:200px;height:200px;grid-column:1/-1;justify-self:center;margin-bottom:12px}
  .page-index .quad-center strong{font-size:28px;line-height:36px}
  .method-step{display:flex;flex-direction:column;gap:16px;background:var(--panel);border-top:1px solid var(--line2);padding:24px;transition:border-color .2s}
  .method-step.is-active{border-color:var(--green)}
  .page-index .quad-no{position:relative;left:auto!important;top:auto!important;font-size:22px;line-height:32px;align-self:flex-start}
  .page-index .quad-q{position:static;width:auto!important;text-align:left;align-items:flex-start;gap:12px}
  .page-index .quad-q h4{font-size:22px;line-height:32px}
  .page-index .quad-q p{font-size:15px;line-height:26px}
  .page-index .wcard{width:min(600px,calc(100vw - 48px))}
}
@media (max-width:767px){
  .page-index{--head-h:104px}
  .page-index .site-head .container{width:calc(100% - 32px);flex-wrap:wrap;align-content:center;row-gap:4px}
  .page-index .site-head .brand{width:100%;font-size:12px}
  .page-index .site-head .brand svg{width:24px;height:24px}
  .page-index .main-nav{height:42px;width:100%}
  .page-index .main-nav>.nav-item,.page-index .main-nav>.nav-drop{flex:1;width:auto}
  .page-index .main-nav>.nav-drop:last-child{flex:1.3}
  .page-index .main-nav .nav-item{font-size:12px;width:100%;white-space:nowrap}
  .page-index .drop-panel{min-width:280px;max-width:calc(100vw - 32px)}
  .page-index .hero.hero-fixed{height:max(680px,92svh)}
  .page-index .hero-fixed-copy{bottom:64px;width:100%}
  .page-index .hero-fixed-copy h1{font-size:clamp(32px,7.5vw,54px);line-height:1.3}
  .page-index .hero-fixed-copy hr{margin-top:20px}
  .page-index .hero-fixed-copy .hero-lead{font-size:16px;line-height:28px;margin-top:20px}
  .page-index .hero-fixed .chip{top:132px;font-size:14px}
  .page-index main::after{top:max(680px,92svh)}
  .page-index .hero-fixed-bg{object-position:62% center}
  .page-index .hero .hero-veil{display:block;background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 35%,rgba(0,0,0,.65))}
  .page-index .works{padding-top:64px}
  .page-index .sec-title{font-size:30px;line-height:1.4}
  .page-index .eyebrow{font-size:16px;line-height:26px}
  .page-index .sec-body{font-size:16px;line-height:28px}
  .page-index .wcard{min-height:0}
  .page-index .wcard-top{padding:24px 24px 20px}
  .page-index .wcard-fig{height:auto;aspect-ratio:12/7}
  .page-index .wcard-body{padding:24px;gap:20px}
  .page-index .wcard-body h3{font-size:26px;line-height:36px}
  .page-index .wcard-desc{font-size:15px;line-height:26px}
  .page-index .wcard-metrics{gap:16px;justify-content:space-between}
  .page-index .wcard-metrics strong{font-size:15px}
  .page-index .wcard-metrics span{font-size:10px;margin-top:8px}
  .page-index .method{margin-top:64px;padding-top:64px;padding-bottom:48px}
  .page-index .quad{grid-template-columns:1fr;gap:16px}
  .page-index .quad-center{grid-column:1}
  .page-index .quad-no{font-size:20px}
  .page-index .site-footer{padding:48px 0}
  .page-index .foot-row{flex-direction:column;align-items:flex-start;gap:24px;margin-top:32px}
  .page-index .foot-nav{width:100%;height:48px;margin:0}
  .page-index .foot-nav>.nav-drop,.page-index .foot-nav>.nav-item{flex:1;width:auto;height:48px}
  .page-index .foot-nav>.nav-drop:last-child{flex:1.3}
  .page-index .foot-nav .nav-item{font-size:12px;height:48px;width:100%;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .page-index .home-title-line,.page-index .wcard,.page-index .sec-head>*{transform:none!important;opacity:1!important;visibility:visible!important}
  .page-index .hero-fixed-bg{transform:none!important}
  .page-index .wcard-fig img,.page-index .wcard-dimrow svg{transform:none!important}
  .page-index .works-strip{scroll-behavior:auto}
  .page-index .nav-item svg,.page-index .wcard,.page-index .wcard *,.page-index .wcard *::before,.page-index .quad *{transition:none!important}
  .page-index .method-route-signal{display:none}
}