/* Js Custom Design — shared visual polish / responsive type system */
:root{
 --jsc-type-display:clamp(4rem,8vw,8rem);
 --jsc-type-section:clamp(2.25rem,3.8vw,3.5rem);
 --jsc-type-subsection:clamp(1.35rem,2.5vw,2.5rem);
 --jsc-type-body:clamp(.95rem,.16vw + .91rem,1rem);
 --jsc-leading-body:2;
 --jsc-motion:cubic-bezier(.16,1,.3,1);
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto!important}
body{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,blockquote{
 font-feature-settings:"palt" 1;
 text-wrap:balance;
 line-break:strict;
 word-break:auto-phrase;
 overflow-wrap:normal;
}
p,blockquote,dd{text-wrap:pretty}

/* Display and section sizes follow one shared scale across all six pages. */
.hero-copy h1,.phero-copy h1{font-size:var(--jsc-type-display)!important;line-height:.88!important}
.sec-big,.section-title{font-size:var(--jsc-type-section)!important;line-height:1.1!important}
.story-head h2,.community h2,.future-copy h2{font-size:var(--jsc-type-section)!important}
.card h3,.value-text h3{font-size:var(--jsc-type-subsection)!important}

/* Editorial headlines: keep intentional copy to two lines on desktop. */
.statement h2{font-size:clamp(2.4rem,4.25vw,4rem)!important;line-height:1.34!important}
.community-head{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr)!important;gap:clamp(40px,6vw,82px)!important}
.community h2{max-width:11.5em;font-size:clamp(2.4rem,3.7vw,3.5rem)!important;line-height:1.38!important}
.story-head h2,.future-copy h2{max-width:12.5em}
.rep-body h2{font-size:clamp(2rem,3.6vw,3.4rem)!important;line-height:1.45!important}

.phero-description,.phero-alert,.st-bd p,.svc-lead,.intro-copy p.body,.intro-body>p:not(.eyebrow),.story-head>p:last-child,.statement-copy,.value-text p,.future-copy p:last-child,.ch-bd p,.form-lead,.v-item blockquote{
 font-size:var(--jsc-type-body)!important;line-height:var(--jsc-leading-body)!important;
}
.v-item .meta{font-size:max(.78rem,12.5px)!important}

/* Room for long hero copy on compact screens; scroll is preferred to clipping. */
.hero,.phero{min-height:max(760px,100svh)}
.hero-copy,.phero-copy{padding-bottom:clamp(72px,9vh,96px)!important}
.future{min-height:max(760px,100svh)}

/* Scroll reveal ("fuwa"): elements with .rv fade up once when they enter the screen.
   Driven by motion.js. Hidden only while html.jsc-motion is set (added in <head> by
   motion-init.js), so the page stays fully readable without JavaScript or with reduced motion.
   The transitions exist only while revealing, so each element keeps its own hover transitions. */
html.jsc-motion .rv:not(.is-in){opacity:0;translate:0 28px}
html.jsc-motion .rv:not(.is-in):not(.jsc-media){filter:blur(6px)}
html.jsc-motion .rv.jsc-media:not(.is-in){translate:0 44px;scale:.97}
html.jsc-motion .rv.is-revealing{
 transition:
  opacity .9s var(--jsc-motion) var(--jsc-delay,0ms),
  translate 1.05s var(--jsc-motion) var(--jsc-delay,0ms),
  filter .8s ease var(--jsc-delay,0ms)!important;
}
html.jsc-motion .rv.jsc-media.is-revealing{
 transition:
  opacity 1.1s var(--jsc-motion) var(--jsc-delay,0ms),
  translate 1.3s var(--jsc-motion) var(--jsc-delay,0ms),
  scale 1.6s var(--jsc-motion) var(--jsc-delay,0ms)!important;
}

/* Subtle, GPU-friendly parallax for large photographic fields. */
.jsc-parallax{
 --jsc-parallax-y:0px;--jsc-parallax-scale:1.075;
 transform:translate3d(0,var(--jsc-parallax-y),0) scale(var(--jsc-parallax-scale))!important;
 transform-origin:center;will-change:transform;
}
.profile-link:hover{--jsc-parallax-scale:1.11}

/* Tablet: long representative-message cards become natural-height panels. */
@media(min-width:981px) and (max-width:1180px){
 .story .story-layout{grid-template-columns:96px minmax(0,1fr);gap:24px}
 .story .stage{position:relative;top:auto;height:auto;min-height:720px;margin-bottom:40px}
 .story .card{min-height:720px;height:auto}
 .story .card-body{padding:42px}
 .story .card h3{font-size:clamp(1.65rem,3vw,2.2rem)!important}
}

@media(max-width:980px){
 :root{--jsc-type-display:clamp(3.6rem,10.5vw,6rem);--jsc-type-section:clamp(2.15rem,5.4vw,3.4rem)}
 .hero-copy h1,.phero-copy h1{letter-spacing:-.05em!important}
 .profile-link__content{padding-inline:24px!important}
 .community-head{grid-template-columns:1fr!important}
 .community h2{max-width:12em}
}

@media(max-width:620px){
 :root{
  --jsc-type-display:clamp(3rem,14vw,4.3rem);
  --jsc-type-section:clamp(1.9rem,8.8vw,2.55rem);
  --jsc-type-subsection:clamp(1.18rem,5.5vw,1.5rem);
  --jsc-type-body:.9375rem;
  --jsc-leading-body:1.9;
 }
 .hero,.phero{min-height:max(720px,100svh)}
 .hero-copy,.phero-copy{width:calc(100% - 36px)!important;padding-top:108px!important;padding-bottom:68px!important}
 .hero-lead,.phero-catch{font-size:clamp(1.05rem,4.8vw,1.25rem)!important;line-height:1.65!important}
 .phero-description{max-width:34em}
 .phero-alert{font-size:.8125rem!important;line-height:1.75!important}
 .sp-logo{width:calc(100% - 32px);max-width:100%;font-size:clamp(2rem,10.5vw,3.2rem)!important;white-space:normal!important}
 .sp-logo small{font-size:.5rem!important;letter-spacing:.15em!important;line-height:1.6;white-space:nowrap!important}
 .sec-big,.section-title{letter-spacing:0!important}
 .statement h2,.community h2,.story-head h2,.future-copy h2{
  word-break:normal;overflow-wrap:normal;text-wrap:balance;
 }
 .statement h2{font-size:clamp(2rem,9.4vw,2.55rem)!important}
 .community h2{font-size:clamp(2rem,9.2vw,2.5rem)!important;line-height:1.45!important}
 .future-copy h2 br{display:none}
 .story .stage{
  position:sticky!important;top:76px!important;height:calc(100svh - 92px)!important;
  min-height:0!important;margin-bottom:42svh!important;scroll-margin-top:76px;
 }
 .story .stage:last-child{margin-bottom:0!important}
 .story .card{
  height:100%!important;min-height:0!important;
  grid-template-rows:minmax(150px,30%) minmax(0,70%)!important;
 }
 .story .card-body{
  justify-content:flex-start!important;overflow-y:auto!important;
  overscroll-behavior:contain;scrollbar-width:thin;padding:18px 20px 24px!important;
 }
 .card-body>p:not(.card-no):not(.sign){font-size:.8125rem!important;line-height:1.72!important}
 .sign{font-size:.8125rem!important;line-height:1.8!important}
 .card h3{font-size:clamp(1.14rem,5.1vw,1.4rem)!important;line-height:1.48!important}
 .future-copy h2{font-size:clamp(1.8rem,7.5vw,2.15rem)!important;line-height:1.55!important}
 .contact h2{font-size:clamp(2rem,9vw,2.8rem)!important}
 .profile-link__content h2{font-size:clamp(2.25rem,11vw,3.3rem)!important}
 .jsc-parallax{--jsc-parallax-scale:1.045}
}

@media(max-width:370px){
 :root{--jsc-type-display:clamp(3rem,15.5vw,4.15rem);--jsc-type-section:clamp(1.9rem,10vw,2.6rem)}
 .hero-copy,.phero-copy{width:calc(100% - 28px)!important}
 .site-header{left:8px!important;right:8px!important;padding-inline:14px!important}
}

@media(prefers-reduced-motion:reduce){
 .jsc-parallax{transform:none!important}
}

/* One mobile navigation system across every page. */
.site-header .logo{position:relative;z-index:201}
.site-header .hamburger{
 position:relative;z-index:201;flex:0 0 44px;width:44px;height:44px;
 margin-left:auto;padding:0!important;border:1px solid rgba(255,255,255,.18);
 border-radius:50%;background:transparent;appearance:none;box-sizing:border-box;
}
.site-header .hamburger span{
 position:absolute;left:50%;top:50%;display:block;width:18px;height:1px;
 margin:0!important;border:0;border-radius:0;background:#fff;
 transition:transform .3s var(--jsc-motion);
}
.site-header .hamburger span:first-child{transform:translate(-50%,-4px)}
.site-header .hamburger span:last-child{transform:translate(-50%,4px)}
.site-header .hamburger.open span:first-child{transform:translate(-50%,0) rotate(45deg)!important}
.site-header .hamburger.open span:last-child{transform:translate(-50%,0) rotate(-45deg)!important}
.drawer{
 position:fixed!important;inset:0!important;z-index:190!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:center!important;gap:6px!important;min-height:100dvh;
 padding:96px 24px 40px;box-sizing:border-box;overflow-y:auto;
 background:rgba(8,8,8,.98)!important;visibility:hidden;opacity:0;
 pointer-events:none;transition:opacity .35s ease,visibility .35s ease;
}
.drawer.open{visibility:visible!important;opacity:1!important;pointer-events:auto}
.drawer a{
 display:block;width:min(100%,320px);padding:12px 20px!important;
 color:#fff;text-align:center;font-size:1.1rem!important;line-height:1.35;
 letter-spacing:.14em!important;
}
.drawer a[aria-current]{color:#e21b23!important}
@media(min-width:981px){.site-header .hamburger{display:none!important}}
@media(max-width:980px){
 .site-header .gnav,.site-header .header-cta{display:none!important}
 .site-header .hamburger{display:block!important}
}
@media(max-width:640px){
 .site-header{left:12px!important;right:12px!important;height:60px!important;top:10px!important;padding:0 18px!important}
 .site-header .logo small{display:none!important}
 .drawer{padding-top:84px;padding-bottom:max(32px,env(safe-area-inset-bottom))}
 .drawer a{font-size:1rem!important;padding-block:11px!important}
}
@media(max-width:620px) and (max-height:700px){
 .story .card{grid-template-rows:minmax(128px,25%) minmax(0,75%)!important}
 .story .stage{top:72px!important;height:calc(100svh - 84px)!important}
}

/* Unified fixed contact buttons: icon-free, green LINE + Instagram (2026-11-11: the mail-form button was replaced by
   Instagram at the client's request; from 1600px the header carries Instagram and the bar keeps LINE only — layout.css). */
.mcta,.mobile-cta{
 position:fixed!important;z-index:210!important;left:auto!important;right:24px!important;
 bottom:18px!important;display:flex!important;width:360px!important;gap:8px!important;
 padding:8px!important;border:1px solid rgba(255,255,255,.14)!important;
 border-radius:18px!important;background:rgba(8,8,8,.88)!important;
 box-shadow:0 12px 40px rgba(0,0,0,.42)!important;
 backdrop-filter:blur(16px);box-sizing:border-box;
}
.mcta a,.mobile-cta a{
 display:flex!important;align-items:center!important;justify-content:center!important;
 flex:1 1 0!important;min-width:0;min-height:50px;padding:12px 10px!important;
 border-radius:11px!important;color:#fff!important;text-align:center;
 font-size:.8rem!important;font-weight:800!important;line-height:1.3;white-space:nowrap;
 transition:filter .25s ease,transform .25s var(--jsc-motion)!important;
}
.mcta .line,.mobile-cta .line{background:#06c755!important;color:#fff!important}
.mcta .ig,.mobile-cta .ig{background:linear-gradient(115deg,#f58529 0%,#dd2a7b 52%,#8134af 100%)!important;color:#fff!important}
.mcta a:hover,.mobile-cta a:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:980px){
 .mcta,.mobile-cta{
  left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;
  width:auto!important;
 }
}
@media(max-width:370px){
 .mcta,.mobile-cta{left:8px!important;right:8px!important;padding:6px!important;gap:6px!important}
 .mcta a,.mobile-cta a{min-height:48px;padding-inline:6px!important;font-size:.75rem!important}
}

/* Background photos below the first screen: not fetched until their section is near (motion.js adds .bg-on
   to elements marked data-lazy-bg). Without JavaScript the rule never applies and photos load as usual. */
html.jsc-lazybg [data-lazy-bg]:not(.bg-on),
html.jsc-lazybg [data-lazy-bg]:not(.bg-on) *,
html.jsc-lazybg [data-lazy-bg]:not(.bg-on) *::before,
html.jsc-lazybg [data-lazy-bg]:not(.bg-on) *::after{background-image:none!important}