@import url('v1-paths.css');
@import url('v1-interactive-core.css');

/* V1.5 editorial scale guard: premium, calm and readable. */
.li-hero-title{font-size:clamp(54px,5.8vw,80px)!important}
.li-thesis-grid h2{font-size:clamp(44px,4.8vw,64px)!important}

/* Accessibility control must never leak into the visual chrome until focused. */
.v1-skip:not(:focus):not(:focus-visible){transform:translateY(-220%)!important;opacity:0!important;pointer-events:none!important}
.v1-skip:focus,.v1-skip:focus-visible{transform:none!important;opacity:1!important;pointer-events:auto!important}

/* Product decision: the framework must remain beautiful even without sticky behavior.
   Each chapter is a complete image-led editorial scene; no dead-space dependency. */
.li-method-experience{display:block!important}
.li-method-media{display:none!important}
.li-story-stack{display:grid!important;gap:18px!important}
.li-story-panel,.li-story-panel:first-child{
  min-height:520px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,7fr) minmax(340px,5fr)!important;
  align-items:stretch!important;
  border:1px solid var(--li-line)!important;
  background:#fff!important;
  opacity:1!important;
  overflow:hidden!important;
}
.li-story-panel:nth-child(even){grid-template-columns:minmax(340px,5fr) minmax(0,7fr)!important}
.li-story-panel:nth-child(even) .li-story-media{order:2}
.li-story-panel:nth-child(even) .li-story-copy{order:1}
.li-story-media{display:block!important;min-height:520px!important;overflow:hidden!important;background:#dce1e4!important}
.li-story-media img{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .8s var(--li-ease)!important}
.li-story-panel:hover .li-story-media img{transform:scale(1.018)}
.li-story-copy{padding:54px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.li-story-copy h3{font-size:clamp(34px,3.3vw,48px)!important}

/* Separate Industries overview: preserve readable white type over photography.
   This does not alter the locked homepage Six Industry System. */
.v1-sector-grid .v1-sector-card h3{color:#fff!important}
.v1-sector-grid .v1-sector-card p{color:#d9e1e6!important}
.v1-sector-grid .v1-sector-card .sector-no{color:#c2d2ff!important}
.v1-sector-grid .v1-sector-card a{color:#fff!important}

@media(max-width:1100px){
  .li-hero-title{font-size:clamp(50px,6vw,68px)!important}
  .li-story-panel,.li-story-panel:first-child,.li-story-panel:nth-child(even){grid-template-columns:1fr 1fr!important;min-height:480px!important}
  .li-story-media{min-height:480px!important}
  .li-story-copy{padding:40px!important}
}
@media(max-width:820px){
  .li-hero-title{font-size:clamp(46px,11vw,58px)!important}
  .li-thesis-grid h2{font-size:clamp(40px,8vw,56px)!important}
  .li-story-panel,.li-story-panel:first-child,.li-story-panel:nth-child(even){grid-template-columns:1fr!important;min-height:0!important}
  .li-story-panel:nth-child(even) .li-story-media,.li-story-panel:nth-child(even) .li-story-copy{order:initial}
  .li-story-media{min-height:360px!important}
  .li-story-copy{padding:32px!important}
}
@media(max-width:560px){
  .li-hero-title{font-size:44px!important}
  .li-story-media{min-height:280px!important}
  .li-story-copy{padding:26px!important}
  .li-story-copy h3{font-size:34px!important}
}
@media(prefers-reduced-motion:reduce){.li-story-media img{transition:none!important}}