/* FV → About: Figma 614:2629 and 637:19946.
   The same image moves, expands and remains pinned beneath the foreground. */
.intro-journey{position:relative}
.intro-scroll-spacer,.intro-shade,.about-building-trigger{display:none}
.about-foreground,.about-row-one,.about-row-two{display:contents}
/* Keep only this short phrase together as the message naturally wraps. */
.intro-journey #about .about-message .about-message-phrase{white-space:nowrap}
.hero-photo picture{display:contents}
@media(min-width:761px){
  .hero-photo-one img{inset:auto;left:-2.33%;top:-11.75%;width:136.43%;height:auto;object-fit:cover}
  .hero-photo-two img{object-fit:cover;object-position:left top}
  .hero-photo-three img{object-fit:cover;object-position:center bottom}
  .about-background img{inset:0;width:100%;height:100%;object-fit:cover}
  .about-workers picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
  .about-workers>.texture{display:none}
  .motion-enabled .hero{position:sticky;top:0;max-width:none;width:100%;height:100vh;height:100svh;overflow:hidden;z-index:1}
  .motion-enabled .hero-copy{top:26.444vh;left:max(5.8333%,calc((100% - 1440px)/2 + 84px));right:5%}
  .motion-enabled .hero-city{top:19.889vh;max-width:1440px;left:50%;transform:translateX(-50%)}
  .motion-enabled .hero-photo{aspect-ratio:auto}
  .motion-enabled .hero-photo-three{z-index:3}
  .motion-enabled .intro-scroll-spacer{display:block;height:110vh;pointer-events:none}
  .motion-enabled .intro-shade{display:block;position:absolute;inset:0;background:rgba(8,39,50,.8);mix-blend-mode:multiply;opacity:0;transition:opacity .7s ease}
  .motion-enabled .intro-shade.is-dim{opacity:1}
  .motion-enabled .about{height:auto;min-height:0;background:transparent;color:white;z-index:2;scroll-margin-top:0;pointer-events:none}
  .motion-enabled .about a{pointer-events:auto}
  .motion-enabled .about-background{display:none}
  .motion-enabled .about-foreground{display:block;padding:33vh 8.3333% 200px}
  .motion-enabled .about-row-one{display:flex;align-items:flex-start;justify-content:space-between;position:relative;margin-top:11.111vh}
  .motion-enabled .about-heading{position:static;width:59.0833%}
  .motion-enabled .about-top-photo{position:static;width:25%;height:auto;aspect-ratio:3/2;object-fit:cover}
  .motion-enabled .about-row-two{display:flex;align-items:flex-start;justify-content:space-between;position:relative;margin-top:100px}
  .motion-enabled .about-message{position:static;width:calc(27.8333% + 1em);order:2;line-height:1.8}
  .motion-enabled .about-montage{position:relative;left:auto;top:auto;width:46.8333%;height:calc(558px * var(--intro-unit,1));order:1}
  .motion-enabled .about-building{left:0;top:calc(120px * var(--intro-unit,1));width:62.2776%;height:calc(438px * var(--intro-unit,1))}
  .motion-enabled .about-workers{right:0;top:0;width:32.0285%;height:calc(240px * var(--intro-unit,1))}
  .motion-enabled .about-building-trigger{display:block;position:absolute;left:0;top:calc(120px * var(--intro-unit,1));width:1px;height:1px;pointer-events:none}
  .motion-enabled [data-reveal]{opacity:0}
  .motion-enabled [data-reveal].is-revealed{opacity:1}
  }
@media(prefers-reduced-motion:reduce){
  .intro-shade,[data-reveal]{transition:none!important;transform:none!important;opacity:1!important}
}
@media(min-width:761px){.about-title-line{white-space:nowrap}}

/* Responsive starting geometry. Scroll timing and transform rules above remain intact. */
@media(min-width:761px){
  .hero .hero-copy,.motion-enabled .hero .hero-copy{top:var(--fv-copy-top,26.444vh)}
  .hero-copy h1{font-size:min(clamp(40px,4.444vw,64px),clamp(24px,7.111svh,64px))}
  .hero-copy p{font-size:clamp(10px,1.778svh,16px)}
}
.intro-journey:not(.motion-enabled) .hero-photo-three{top:var(--fv-photo-top);left:var(--fv-center-left);width:var(--fv-photo-width);height:var(--fv-photo-height);aspect-ratio:auto}
.intro-journey:not(.motion-enabled) .hero-photo-one,.intro-journey:not(.motion-enabled) .hero-photo-two{top:var(--fv-side-top);width:var(--fv-side-width);height:var(--fv-side-width);aspect-ratio:auto}
@media(max-width:760px){.hero{height:var(--fv-mobile-height,667px)}}

/* FV building illustration only: cover the background below its Figma top
   anchor, with no cap on scale. The existing img transform remains the
   scroll animation target, so its translation and timing are unchanged. */
.intro-journey .hero-city-container{width:100vw;left:50%;right:auto;transform:translateX(-50%)}
.intro-journey .hero .hero-city{--city-top:19.889vh;top:var(--city-top);left:50%;width:100%;height:calc(100% - var(--city-top));max-width:none;max-height:none;object-fit:cover;object-position:center top;transform:translateX(-50%)}
@media(max-width:760px){.intro-journey .hero .hero-city{--city-top:180px}}

/* Whole FV scales from the 1440px Figma frame. This unit is deliberately
   separate from --intro-unit, which belongs to the unchanged About layout. */
@media(min-width:761px){
  .intro-journey .hero{max-width:none;width:100%}
  .intro-journey .hero .hero-copy{left:5.833333%;right:5%}
  .intro-journey .hero-copy h1{font-size:calc(64px * var(--fv-unit,1))}
  .intro-journey .hero-copy p{font-size:calc(16px * var(--fv-unit,1));margin-top:calc(16px * var(--fv-unit,1))}
  .intro-journey .particles i:nth-child(1){width:calc(12px * var(--fv-unit,1));height:calc(12px * var(--fv-unit,1));top:calc(185px * var(--fv-unit,1))}
  .intro-journey .particles i:nth-child(2){width:calc(4px * var(--fv-unit,1));height:calc(4px * var(--fv-unit,1));top:calc(425px * var(--fv-unit,1))}
  .intro-journey .particles i:nth-child(3){width:calc(6px * var(--fv-unit,1));height:calc(6px * var(--fv-unit,1));top:calc(524px * var(--fv-unit,1))}
  .intro-journey .particles i:nth-child(4){width:calc(16px * var(--fv-unit,1));height:calc(16px * var(--fv-unit,1));top:calc(271px * var(--fv-unit,1))}
  .intro-journey .particles i:nth-child(5){width:calc(14px * var(--fv-unit,1));height:calc(14px * var(--fv-unit,1));top:calc(229px * var(--fv-unit,1))}
  .intro-journey .particles i:nth-child(6){width:calc(8px * var(--fv-unit,1));height:calc(8px * var(--fv-unit,1));top:calc(563px * var(--fv-unit,1))}
  .intro-journey .particles i:nth-child(7){width:calc(10px * var(--fv-unit,1));height:calc(10px * var(--fv-unit,1));top:calc(278px * var(--fv-unit,1))}
}

@media(min-width:761px){.intro-journey .hero .hero-city{--city-top:calc(179px * var(--fv-unit,1))}}

/* Clip the continuing image below the FV instead of aligning image bottoms. */
.intro-journey:not(.motion-enabled) .hero-photos{overflow:hidden}
.intro-journey .hero-photo-one{left:var(--fv-left-photo-left)}
.intro-journey .hero-photo-two{left:var(--fv-right-photo-left)}

/* Preserve intrinsic photo proportions on mobile as well. */
/* Reveal the building photo's upper/left sky without changing its frame or scale. */
.intro-journey .hero-photo-two img{object-fit:cover;object-position:left top}
.intro-journey .hero-photo-three img,
.intro-journey .about-workers picture>img{object-fit:cover;object-position:center bottom}

/* Original image bytes + Figma CROP: uniform zoom inside existing frames.
   Previously exported bitmaps had the crop stretched into the source ratio. */
.intro-journey .hero-photo-three img{object-fit:cover;object-position:48.10561674% 44.50674480%;transform:scale(1.5406061151);transform-origin:48.10561674% 44.50674480%}
.intro-journey .about-workers picture>img{object-fit:cover;object-position:40.82294103% 38.13237308%;transform:scale(1.4478646838);transform-origin:40.82294103% 38.13237308%}

/* Shared PC/SP particles: continuous bottom-to-top flow. The outer dot
   rises at constant speed; its painted child sways gently on a separate clock.
   Entry/exit are outside the clipped FV, so loop resets remain invisible. */
  .intro-journey .hero > .particles{overflow:hidden}
  .intro-journey .hero > .particles > i{
    top:var(--rest-top);left:var(--particle-left);
    width:calc(var(--particle-size) * var(--fv-unit,1));
    height:calc(var(--particle-size) * var(--fv-unit,1));
    background:transparent;box-shadow:none;filter:none;opacity:1;
  }
  .intro-journey .hero > .particles > i::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.9) 0 18%,rgba(39,193,248,.32) 48%,rgba(39,193,248,.06) 100%);
    box-shadow:0 0 12px 5px rgba(39,193,248,.09);
    filter:blur(var(--particle-blur));opacity:var(--particle-opacity);
  }
  .intro-journey .hero > .particles > i:nth-child(1){--particle-left:60.62%;--rest-top:41.0%;--particle-size:3.0px;--rise-duration:19.15s;--rise-delay:-7.31s;--entry:6.1svh;--exit:8.0svh;--flow-x:-8vw;--sway:21px;--sway-duration:9.35s;--sway-delay:-6.84s;--sway-path:sgkk-particle-sway;--particle-blur:0.91px;--particle-opacity:0.534}
  .intro-journey .hero > .particles > i:nth-child(2){--particle-left:26.25%;--rest-top:72.1%;--particle-size:3.43px;--rise-duration:22.3s;--rise-delay:-17.04s;--entry:8.2svh;--exit:11.0svh;--flow-x:10vw;--sway:32px;--sway-duration:11.7s;--sway-delay:-5.43s;--sway-path:sgkk-particle-meander;--particle-blur:0.87px;--particle-opacity:0.688}
  .intro-journey .hero > .particles > i:nth-child(3){--particle-left:81.87%;--rest-top:28.1%;--particle-size:3.86px;--rise-duration:25.45s;--rise-delay:-3.71s;--entry:10.3svh;--exit:6.2svh;--flow-x:-3vw;--sway:43px;--sway-duration:14.05s;--sway-delay:-2.75s;--sway-path:sgkk-particle-wide-sway;--particle-blur:0.84px;--particle-opacity:0.424}
  .intro-journey .hero > .particles > i:nth-child(4){--particle-left:47.49%;--rest-top:59.2%;--particle-size:4.29px;--rise-duration:28.6s;--rise-delay:-15.1s;--entry:4.7svh;--exit:9.2svh;--flow-x:6vw;--sway:54px;--sway-duration:7.47s;--sway-delay:-6.93s;--sway-path:sgkk-particle-sway;--particle-blur:0.8px;--particle-opacity:0.578}
  .intro-journey .hero > .particles > i:nth-child(5){--particle-left:13.12%;--rest-top:15.2%;--particle-size:4.72px;--rise-duration:18.7s;--rise-delay:-17.01s;--entry:6.8svh;--exit:12.2svh;--flow-x:-12vw;--sway:12px;--sway-duration:9.82s;--sway-delay:-6.48s;--sway-path:sgkk-particle-meander;--particle-blur:1.09px;--particle-opacity:0.732}
  .intro-journey .hero > .particles > i:nth-child(6){--particle-left:68.74%;--rest-top:46.3%;--particle-size:5.15px;--rise-duration:21.85s;--rise-delay:-6.38s;--entry:8.9svh;--exit:7.4svh;--flow-x:1vw;--sway:23px;--sway-duration:12.17s;--sway-delay:-4.77s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.05px;--particle-opacity:0.468}
  .intro-journey .hero > .particles > i:nth-child(7){--particle-left:34.36%;--rest-top:77.3%;--particle-size:5.58px;--rise-duration:25.0s;--rise-delay:-16.84s;--entry:11.0svh;--exit:10.4svh;--flow-x:8vw;--sway:34px;--sway-duration:14.52s;--sway-delay:-1.8s;--sway-path:sgkk-particle-sway;--particle-blur:1.02px;--particle-opacity:0.622}
  .intro-journey .hero > .particles > i:nth-child(8){--particle-left:89.98%;--rest-top:33.4%;--particle-size:6.01px;--rise-duration:28.15s;--rise-delay:-1.57s;--entry:5.4svh;--exit:5.6svh;--flow-x:-8vw;--sway:45px;--sway-duration:7.94s;--sway-delay:-6.8s;--sway-path:sgkk-particle-meander;--particle-blur:0.98px;--particle-opacity:0.776}
  .intro-journey .hero > .particles > i:nth-child(9){--particle-left:55.61%;--rest-top:64.4%;--particle-size:6.44px;--rise-duration:18.25s;--rise-delay:-7.99s;--entry:7.5svh;--exit:8.6svh;--flow-x:10vw;--sway:56px;--sway-duration:10.29s;--sway-delay:-6.05s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.27px;--particle-opacity:0.512}
  .intro-journey .hero > .particles > i:nth-child(10){--particle-left:21.23%;--rest-top:20.5%;--particle-size:6.87px;--rise-duration:21.4s;--rise-delay:-17.54s;--entry:9.6svh;--exit:11.6svh;--flow-x:-3vw;--sway:14px;--sway-duration:12.64s;--sway-delay:-4.04s;--sway-path:sgkk-particle-sway;--particle-blur:1.23px;--particle-opacity:0.666}
  .intro-journey .hero > .particles > i:nth-child(11){--particle-left:76.85%;--rest-top:51.5%;--particle-size:7.3px;--rise-duration:24.55s;--rise-delay:-4.95s;--entry:4.0svh;--exit:6.8svh;--flow-x:6vw;--sway:25px;--sway-duration:14.99s;--sway-delay:-0.78s;--sway-path:sgkk-particle-meander;--particle-blur:1.2px;--particle-opacity:0.402}
  .intro-journey .hero > .particles > i:nth-child(12){--particle-left:42.48%;--rest-top:82.6%;--particle-size:7.73px;--rise-duration:27.7s;--rise-delay:-16.17s;--entry:6.1svh;--exit:9.8svh;--flow-x:-12vw;--sway:36px;--sway-duration:8.41s;--sway-delay:-6.59s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.16px;--particle-opacity:0.556}
  .intro-journey .hero > .particles > i:nth-child(13){--particle-left:8.1%;--rest-top:38.6%;--particle-size:8.16px;--rise-duration:17.8s;--rise-delay:-17.19s;--entry:8.2svh;--exit:5.0svh;--flow-x:1vw;--sway:47px;--sway-duration:10.76s;--sway-delay:-5.55s;--sway-path:sgkk-particle-sway;--particle-blur:1.45px;--particle-opacity:0.71}
  .intro-journey .hero > .particles > i:nth-child(14){--particle-left:63.72%;--rest-top:69.7%;--particle-size:8.59px;--rise-duration:20.95s;--rise-delay:-7.28s;--entry:10.3svh;--exit:8.0svh;--flow-x:8vw;--sway:58px;--sway-duration:13.11s;--sway-delay:-3.25s;--sway-path:sgkk-particle-meander;--particle-blur:1.41px;--particle-opacity:0.446}
  .intro-journey .hero > .particles > i:nth-child(15){--particle-left:29.35%;--rest-top:25.7%;--particle-size:9.02px;--rise-duration:24.1s;--rise-delay:-17.58s;--entry:4.7svh;--exit:11.0svh;--flow-x:-8vw;--sway:16px;--sway-duration:15.46s;--sway-delay:-15.15s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.38px;--particle-opacity:0.6}
  .intro-journey .hero > .particles > i:nth-child(16){--particle-left:84.97%;--rest-top:56.8%;--particle-size:9.45px;--rise-duration:27.25s;--rise-delay:-3.04s;--entry:6.8svh;--exit:6.2svh;--flow-x:10vw;--sway:27px;--sway-duration:8.88s;--sway-delay:-6.32s;--sway-path:sgkk-particle-sway;--particle-blur:1.34px;--particle-opacity:0.754}
  .intro-journey .hero > .particles > i:nth-child(17){--particle-left:50.59%;--rest-top:12.8%;--particle-size:9.88px;--rise-duration:17.35s;--rise-delay:-8.56s;--entry:8.9svh;--exit:9.2svh;--flow-x:-3vw;--sway:38px;--sway-duration:11.23s;--sway-delay:-4.99s;--sway-path:sgkk-particle-meander;--particle-blur:1.63px;--particle-opacity:0.49}
  .intro-journey .hero > .particles > i:nth-child(18){--particle-left:16.22%;--rest-top:43.9%;--particle-size:10.31px;--rise-duration:20.5s;--rise-delay:-17.95s;--entry:11.0svh;--exit:12.2svh;--flow-x:6vw;--sway:49px;--sway-duration:13.58s;--sway-delay:-2.39s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.59px;--particle-opacity:0.644}
  .intro-journey .hero > .particles > i:nth-child(19){--particle-left:71.84%;--rest-top:74.9%;--particle-size:10.74px;--rise-duration:23.65s;--rise-delay:-6.09s;--entry:5.4svh;--exit:7.4svh;--flow-x:-12vw;--sway:60px;--sway-duration:7.0s;--sway-delay:-6.36s;--sway-path:sgkk-particle-sway;--particle-blur:1.56px;--particle-opacity:0.38}
  .intro-journey .hero > .particles > i:nth-child(20){--particle-left:37.46%;--rest-top:31.0%;--particle-size:11.17px;--rise-duration:26.8s;--rise-delay:-17.13s;--entry:7.5svh;--exit:10.4svh;--flow-x:1vw;--sway:18px;--sway-duration:9.35s;--sway-delay:-5.98s;--sway-path:sgkk-particle-meander;--particle-blur:1.52px;--particle-opacity:0.534}
  .intro-journey .hero > .particles > i:nth-child(21){--particle-left:93.08%;--rest-top:62.0%;--particle-size:11.6px;--rise-duration:16.9s;--rise-delay:-0.36s;--entry:9.6svh;--exit:5.6svh;--flow-x:8vw;--sway:29px;--sway-duration:11.7s;--sway-delay:-4.35s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.81px;--particle-opacity:0.688}
  .intro-journey .hero > .particles > i:nth-child(22){--particle-left:58.71%;--rest-top:18.1%;--particle-size:12.03px;--rise-duration:20.05s;--rise-delay:-8.09s;--entry:4.0svh;--exit:8.6svh;--flow-x:-8vw;--sway:40px;--sway-duration:14.05s;--sway-delay:-1.46s;--sway-path:sgkk-particle-sway;--particle-blur:1.77px;--particle-opacity:0.424}
  .intro-journey .hero > .particles > i:nth-child(23){--particle-left:24.33%;--rest-top:49.2%;--particle-size:12.46px;--rise-duration:23.2s;--rise-delay:-18.22s;--entry:6.1svh;--exit:11.6svh;--flow-x:10vw;--sway:51px;--sway-duration:7.47s;--sway-delay:-6.24s;--sway-path:sgkk-particle-meander;--particle-blur:1.74px;--particle-opacity:0.578}
  .intro-journey .hero > .particles > i:nth-child(24){--particle-left:79.95%;--rest-top:80.2%;--particle-size:12.89px;--rise-duration:26.35s;--rise-delay:-4.41s;--entry:8.2svh;--exit:6.8svh;--flow-x:-3vw;--sway:62px;--sway-duration:9.82s;--sway-delay:-5.58s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.7px;--particle-opacity:0.732}
  .intro-journey .hero > .particles > i:nth-child(25){--particle-left:45.58%;--rest-top:36.2%;--particle-size:13.32px;--rise-duration:16.45s;--rise-delay:-9.03s;--entry:10.3svh;--exit:9.8svh;--flow-x:6vw;--sway:20px;--sway-duration:12.17s;--sway-delay:-3.65s;--sway-path:sgkk-particle-sway;--particle-blur:1.99px;--particle-opacity:0.468}
  .intro-journey .hero > .particles > i:nth-child(26){--particle-left:11.2%;--rest-top:67.3%;--particle-size:13.75px;--rise-duration:19.6s;--rise-delay:-18.25s;--entry:4.7svh;--exit:5.0svh;--flow-x:-12vw;--sway:31px;--sway-duration:14.52s;--sway-delay:-0.46s;--sway-path:sgkk-particle-meander;--particle-blur:1.95px;--particle-opacity:0.622}
  .intro-journey .hero > .particles > i:nth-child(27){--particle-left:66.82%;--rest-top:23.3%;--particle-size:14.18px;--rise-duration:22.75s;--rise-delay:-7.12s;--entry:6.8svh;--exit:8.0svh;--flow-x:1vw;--sway:42px;--sway-duration:7.94s;--sway-delay:-6.07s;--sway-path:sgkk-particle-wide-sway;--particle-blur:1.92px;--particle-opacity:0.776}
  .intro-journey .hero > .particles > i:nth-child(28){--particle-left:32.45%;--rest-top:54.4%;--particle-size:14.61px;--rise-duration:25.9s;--rise-delay:-18.0s;--entry:8.9svh;--exit:11.0svh;--flow-x:8vw;--sway:53px;--sway-duration:10.29s;--sway-delay:-5.1s;--sway-path:sgkk-particle-sway;--particle-blur:1.88px;--particle-opacity:0.512}
@media(prefers-reduced-motion:no-preference){
  .intro-journey .hero > .particles > i{
    top:calc(100% + var(--entry));
    animation:sgkk-particle-rise var(--rise-duration) linear var(--rise-delay) infinite;
  }
  .intro-journey .hero > .particles > i::before{
    animation:var(--sway-path) var(--sway-duration) ease-in-out var(--sway-delay) infinite alternate;
  }
  .intro-journey .hero > .particles > i:nth-child(even)::before{animation-direction:alternate-reverse}
}
@keyframes sgkk-particle-rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translate3d(var(--flow-x),calc(-100svh - var(--entry) - var(--exit)),0);opacity:0}
}
@keyframes sgkk-particle-sway{
  from{transform:translateX(calc(var(--sway) * -.5));opacity:calc(var(--particle-opacity) * .8)}
  to{transform:translateX(calc(var(--sway) * .5));opacity:var(--particle-opacity)}
}
@keyframes sgkk-particle-meander{
  0%{transform:translateX(calc(var(--sway) * -.35));opacity:var(--particle-opacity)}
  42%{transform:translateX(calc(var(--sway) * .6));opacity:calc(var(--particle-opacity) * .85)}
  100%{transform:translateX(calc(var(--sway) * -.15));opacity:calc(var(--particle-opacity) * .95)}
}
@keyframes sgkk-particle-wide-sway{
  from{transform:translateX(calc(var(--sway) * -.8));opacity:calc(var(--particle-opacity) * .75)}
  to{transform:translateX(calc(var(--sway) * .8));opacity:var(--particle-opacity)}
}

/* Keep the building's ambient Y motion separate from its scroll transform. */
.intro-journey .hero-city-float{
  position:absolute;
  inset:0;
  animation:sgkk-city-breathe 10s ease-in-out infinite alternate;
}
@keyframes sgkk-city-breathe{
  from{transform:translateY(-8px)}
  to{transform:translateY(8px)}
}
@media(prefers-reduced-motion:reduce){
  .intro-journey .hero-city-float{animation:none;transform:none}
}

/* Derive initial photo proportions and horizontal composition in CSS.
   JS supplies only text-dependent width and Y anchors; scroll animation overrides
   the center frame temporarily without changing these responsive baselines. */
.intro-journey .hero {
  --fv-photo-height: calc(var(--fv-photo-width) * 1.375);
  --fv-center-left: calc((100% - var(--fv-photo-width)) / 2);
  --fv-side-width: var(--fv-photo-width);
  --fv-photo-group-width: calc(100vw * 8 / 9);
  --fv-left-photo-left: calc((100% - var(--fv-photo-group-width)) / 2);
  --fv-right-photo-left: calc((100% + var(--fv-photo-group-width)) / 2 - var(--fv-side-width));
}
.intro-journey .hero .hero-photo-three {
  left: var(--fv-center-left);
  top: var(--fv-photo-top);
  width: var(--fv-photo-width);
  height: var(--fv-photo-height);
}
.intro-journey.motion-enabled .hero .hero-photo-three { border-radius: 16px; }
.intro-journey .hero .hero-photo-one,
.intro-journey .hero .hero-photo-two {
  top: var(--fv-side-top);
  width: var(--fv-side-width);
  height: var(--fv-side-width);
}
@media(max-width:760px) {
  .intro-journey .hero {
    --fv-side-width: calc(var(--fv-photo-width) * 0.6);
    --fv-photo-group-width: calc(var(--fv-photo-width) * 1.755);
  }
}

/* Tablet FV — Figma 2816:9692 (834 × 1194).
   Frame geometry only: image crops and all scroll transforms stay shared. */
@media (min-width:761px) and (max-width:1024px) {
  .intro-journey .hero {
    --fv-photo-width:min(clamp(240px,31.392vw,321.455px),27.5svh);
    --fv-photo-top:max(calc(100svh - 39.3285vw),var(--fv-tablet-photo-min-top,0px));
    --fv-side-top:calc(var(--fv-photo-top) + min(21.583vw,15.0754svh));
    --fv-photo-group-width:calc(100% - 13.4293vw);
  }
  .intro-journey .hero .hero-copy {
    top:clamp(150px,23.4506svh,280px);
    left:7.67386vw;right:auto;
    width:min(566px,calc(100% - 15.34772vw));
  }
  .intro-journey .hero-copy h1 {font-size:min(clamp(56px,7.67386vw,64px),6svh)}
  .intro-journey .hero-copy h1 .mobile-br {display:block}
  .intro-journey .hero-copy p {font-size:16px;margin-top:16px;max-width:566px}
  .intro-journey .hero .hero-city {
    --city-top:31.2395svh;
    width:max(1440px,172.6619vw);height:auto;object-fit:contain;
  }
}
