/* Motion and controls for the main-page design concept. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--gold-hover:#B58E37;--card-width:clamp(330px,28vw,420px)}
button{font:inherit;color:inherit;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{position:fixed;z-index:80;transition:height .45s var(--ease-out),background .4s,border-color .4s,box-shadow .4s;color:var(--white)}
.site-header>img{transition:width .45s var(--ease-out),height .45s var(--ease-out)}
.site-header.is-scrolled{height:82px;background:rgb(27 42 74 / .97);border-color:rgb(203 210 222 / .12);box-shadow:0 4px 25px rgb(16 26 46 / .08);backdrop-filter:blur(16px)}
.site-header.is-scrolled>img{width:148px;height:78px}
.site-header nav>span{position:relative;padding:9px 0;transition:color .25s}
.site-header nav>span:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.site-header nav>span:hover{color:var(--gold)}
.site-header nav>span:hover:after{transform:scaleX(1);transform-origin:left}
.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--gold);transform:scaleX(var(--page-progress,0));transform-origin:left;opacity:0;transition:opacity .3s}
.is-scrolled .reading-progress{opacity:1}
.hero-images{position:absolute;inset:0;z-index:-3;overflow:hidden;transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(1.025);transition:transform 1.2s var(--ease-out)}
.main-visual{--hero-transition:1.5s;--hero-title-exit:.3s;--hero-title-entry:1.2s}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--hero-transition) ease-in-out;overflow:hidden}
.hero-slide.is-active{opacity:1;z-index:1}
.main-visual .hero-slide picture{position:absolute;inset:0;z-index:auto}
.hero-slide .main-photo{height:100%;transform:scale(1.025)}
.motion-ready .hero-slide.is-active .main-photo{animation:hero-drift 12s var(--ease-out) both}
.hero-slide:nth-child(n+2):after{content:'';position:absolute;inset:0;background:rgb(16 26 46 / .32)}
.hero-slide:nth-child(2) .main-photo{object-position:62% center}
.hero-slide:nth-child(3) .main-photo{object-position:center}
.main-message{transform:translate3d(0,var(--hero-text-y,0px),0);opacity:var(--hero-text-opacity,1);position:relative;z-index:2;pointer-events:none}
.hero-titles{display:grid}
.hero-title{grid-area:1/1;min-width:0;opacity:0;visibility:hidden}
.hero-title.is-active{opacity:1;visibility:visible}
.hero-title.is-leaving{animation:hero-title-out var(--hero-title-exit) ease-in both}
.hero-title.is-entering{animation:hero-title-in var(--hero-title-entry) ease-in-out var(--hero-title-exit) both}
@keyframes hero-title-out{from{opacity:var(--leave-opacity,1);transform:var(--leave-transform,none);visibility:visible}to{opacity:0;transform:var(--leave-transform,none);visibility:hidden}}
@keyframes hero-title-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-title{animation:none!important;transform:none}}
.motion-ready .main-message>.display{animation:hero-in 1.05s var(--ease-out) .12s both}
.motion-ready .main-message>h1{animation:hero-in 1.15s var(--ease-out) .28s both}
.motion-ready .main-message>.main-signature{animation:hero-in 1.1s var(--ease-out) .5s both}
@keyframes hero-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-drift{from{transform:scale(1.055)}to{transform:scale(1.005)}}
.visual-arrow{width:48px;height:48px;color:var(--white);z-index:4;transition:background .3s,border-color .3s,transform .35s var(--ease-out)}
.visual-arrow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.2}
.visual-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--deep);transform:scale(1.08)}
.visual-arrow:active{transform:scale(.95)}
.visual-pagination{left:50%;transform:translateX(-50%);align-items:center;gap:8px;z-index:5;bottom:28px}
.hero-count{font-size:12px;letter-spacing:1.4px;color:var(--light);margin-right:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero-count b{color:var(--white);font-weight:500}
.hero-dot{width:34px;height:44px;display:grid;place-items:center;transition:width .5s var(--ease-out)}
.hero-dot>span{width:100%;height:2px;background:rgb(203 210 222 / .35);overflow:hidden}
.visual-pagination .hero-dot i{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.hero-dot.is-current{width:65px}
.hero-dot.is-current i{transform:scaleX(1)}
.motion-toggle{width:44px;height:44px;display:grid;place-items:center;margin-left:9px;transition:color .2s}
.motion-toggle:hover{color:var(--gold)}
.motion-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.25;grid-area:1/1}
.motion-toggle .play-icon{display:none;width:17px;height:17px}
.motion-toggle[aria-pressed=true] .play-icon{display:block}
.motion-toggle[aria-pressed=true] .pause-icon{display:none}
.scroll-cue{position:absolute;right:41px;bottom:40px;display:flex;align-items:center;gap:18px;z-index:2}
.scroll-cue>span{font-size:8px;letter-spacing:1.8px;color:var(--light)}
.scroll-cue>i{width:1px;height:37px;background:rgb(203 210 222 / .35);overflow:hidden}
.scroll-cue>i:after{content:'';display:block;width:1px;height:18px;background:var(--gold);animation:scroll-mark 2.7s ease-in-out infinite}
@keyframes scroll-mark{0%{transform:translateY(-20px)}70%,100%{transform:translateY(40px)}}
/* Reveal once, retaining content if JS or motion support is unavailable. */
.motion-ready [data-reveal]{opacity:0;translate:0 18px;transition:opacity .7s var(--ease-out) var(--reveal-delay,0ms),translate .85s var(--ease-out) var(--reveal-delay,0ms)}
.motion-ready [data-reveal].is-revealed{opacity:1;translate:0 0}
.motion-ready .gold-rule[data-reveal]{translate:none;scale:0 1;transition:scale .85s var(--ease-out)}
.motion-ready .gold-rule.is-revealed{scale:1 1}
.wide-scene>img{transform:translate3d(0,var(--scene-y,0px),0) scale(1.11);will-change:transform}
.wide-scene{isolation:isolate}
.wide-scene figcaption{transition:translate .75s var(--ease-out)}
.wide-scene:hover figcaption{translate:0 -5px}
.service-card{overflow:hidden;transition:background .4s,border-color .4s,box-shadow .45s,transform .5s var(--ease-out),opacity .85s var(--ease-out) var(--reveal-delay,0ms),translate .85s var(--ease-out) var(--reveal-delay,0ms)!important}
.service-card:before{content:'';position:absolute;left:29px;right:29px;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.service-card h3,.service-card p,.service-icon,.service-number{transition:color .35s,background .35s,transform .5s var(--ease-out)}
.service-icon:after{transition:width .4s var(--ease-out)}
.service-card:is(:hover,:focus-visible){background:var(--navy);border-color:var(--navy);box-shadow:0 14px 25px rgb(27 42 74 / .12);transform:translateY(-4px)}
.service-card:is(:hover,:focus-visible) h3{color:var(--white)}
.service-card:is(:hover,:focus-visible) p{color:var(--light)}
.service-card:is(:hover,:focus-visible) .service-icon{color:var(--gold);transform:translateY(-3px)}
.service-card:is(:hover,:focus-visible) .service-icon:after{width:29px}
.service-card:is(:hover,:focus-visible) .service-number{background:var(--gold);color:var(--deep)}
.service-card:is(:hover,:focus-visible):before{transform:scaleX(1)}
.supply-visual svg{width:100%;height:auto;display:block}
.supply-visual .supply-mobile{display:none}
.supply-visual path[stroke-dasharray]{animation:route-flow 8s linear infinite;animation-play-state:paused}
.supply-visual.is-in-view path[stroke-dasharray]{animation-play-state:running}
@keyframes route-flow{to{stroke-dashoffset:-110}}
.type-band{display:block;position:relative}
.marquee-track{display:flex;width:max-content;animation:marquee-flow 44s linear infinite;animation-play-state:paused}
.type-band.is-in-view .marquee-track{animation-play-state:running}
.type-band.filled .marquee-track{animation-duration:49s}
.marquee-track>span{flex:none;display:flex;align-items:center;gap:55px;padding-right:55px}
.marquee-track b{font-size:.7em;line-height:1;color:var(--gold);-webkit-text-stroke:0;font-weight:400;text-shadow:none}
.type-band:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-flow{to{transform:translateX(-50%)}}
/* Native scrolling preserves touch momentum and trackpad behaviour. */
.showcase-window{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;padding:12px 0 16px;margin-top:35px;-webkit-user-select:none;user-select:none}
.showcase-window::-webkit-scrollbar{display:none}
.showcase-window.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.showcase-window:is(.is-gallery-flow-ready,.is-gallery-moving,.is-gallery-interacting){scroll-snap-type:none;scroll-behavior:auto}
.showcase-track{left:0;transform:none;position:relative;padding-inline:max(20px,calc((100vw - var(--card-width)) / 2));gap:20px}
.showcase-window.is-gallery-flowing .showcase-track{will-change:transform}
.showcase-card{width:var(--card-width);flex:none;scroll-snap-align:center;scroll-snap-stop:normal;overflow:hidden;transition:transform .55s var(--ease-out),box-shadow .55s;position:relative}
/* Continuous centre emphasis composes with the existing, smaller hover lift. */
.is-gallery-flow-ready .showcase-card{transform-origin:50% 50%}
.is-gallery-flow-ready .showcase-card.is-gallery-near{will-change:scale,translate}
.showcase-card:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.product-image{height:auto;aspect-ratio:4/5;overflow:hidden;background:var(--cool)}
.product-image img{height:100%;transition:transform .9s var(--ease-out);pointer-events:none;-webkit-user-drag:none}
.showcase-card>div{transition:background .4s}
.showcase-card>div>span{transition:transform .4s var(--ease-out),color .4s}
.showcase-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgb(16 26 46 / .22)}
.showcase-card:hover .product-image img{transform:scale(1.045)}
.showcase-card:hover>div{background:var(--warm)}
.showcase-card:hover>div>span{transform:translate(3px,-3px);color:var(--gold-hover)}
.is-dragging .showcase-card{transform:none;box-shadow:none;pointer-events:none}
.gallery-controls{display:flex;align-items:center;justify-content:center;margin-top:5px}
.gallery-pagination{position:relative;display:flex;align-items:center;width:min(400px,calc(100% - 48px));height:44px;margin:0;gap:0}
.gallery-bar-track{position:absolute;left:0;right:0;top:21px;height:2px;background:rgb(203 210 222 / .3);overflow:hidden;pointer-events:none}
.gallery-bar-indicator{position:absolute;top:0;left:0;width:10%;height:100%;background:var(--gold);will-change:transform}
.gallery-bar-indicator:before,.gallery-bar-indicator:after{content:'';position:absolute;top:0;width:100%;height:100%;background:inherit}
.gallery-bar-indicator:before{left:-1000%}
.gallery-bar-indicator:after{left:1000%}
.gallery-pagination .gallery-dot{position:relative;flex:1 1 0;min-width:0;width:auto;height:44px;background:none;border:0;border-radius:0;transition:none}
.gallery-pagination .gallery-dot:focus-visible{outline:1px solid var(--gold);outline-offset:-4px}
.gallery-caption{display:flex;justify-content:center;gap:20px;margin-top:10px;font-size:10px;letter-spacing:1.5px;color:var(--light)}
.gallery-count{font-variant-numeric:tabular-nums;letter-spacing:2px}
.gallery-caption{align-items:center;min-height:32px}
.gallery-motion-toggle{width:32px;height:32px;display:grid;place-items:center;margin-left:-8px;color:var(--light);border-radius:50%;transition:color .2s,background .2s}
.gallery-motion-toggle:hover{color:var(--gold);background:rgb(255 255 255 / .06)}
.gallery-motion-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gallery-motion-toggle .gallery-play-icon{display:none}
.gallery-motion-toggle[aria-pressed=true] .gallery-pause-icon{display:none}
.gallery-motion-toggle[aria-pressed=true] .gallery-play-icon{display:block}
.gallery-motion-toggle[aria-disabled=true]{opacity:.45;cursor:default}
.section-link.light{margin-top:25px}
.field-images figure{overflow:hidden;background:var(--navy)}
.field-images img{transition:filter .6s var(--ease-out)}
.field-images figure:hover img{filter:brightness(1.06)}
.keyword-cloud > :is(span,a){transition:transform .4s var(--ease-out),background .3s,color .3s,border-color .3s}
.keyword-cloud > :is(span,a):is(:hover,:focus-visible){transform:translateY(-3px);background:var(--gold);color:var(--deep);border-color:var(--gold)}
.section-link>span,.inquiry-link{position:relative;overflow:hidden;isolation:isolate;transition:color .35s,background .35s,border-color .35s}
.section-link>span:before,.inquiry-link:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--gold);transform:translateX(-101%);transition:transform .5s var(--ease-out)}
.section-link>span:hover:before,.inquiry-link:hover:before{transform:translateX(0)}
.section-link>span:hover{color:var(--deep);border-color:var(--gold)}
.section-link b,.inquiry-link>span{transition:transform .4s var(--ease-out),color .3s}
.section-link>span:hover b{color:var(--deep);transform:translate(3px,-3px)}
.inquiry-link:before{background:var(--gold-hover)}
.inquiry-link:hover>span{transform:translate(4px,-4px)}
footer nav span{transition:color .25s,translate .3s}
footer nav span:hover{color:var(--gold);translate:3px 0}
.ambient-paused .hero-slide .main-photo,.ambient-paused .scroll-cue>i:after,.ambient-paused .marquee-track,.ambient-paused .supply-visual path[stroke-dasharray]{animation-play-state:paused!important}
@media(max-width:1050px){:root{--card-width:330px}.product-image{height:auto}.site-header.is-scrolled>img{width:140px}.scroll-cue{right:35px}.scroll-cue>span{display:none}}
@media(max-width:760px){:root{--card-width:calc(100vw - 74px)}.site-header.is-scrolled{height:98px;padding-top:2px}.site-header.is-scrolled>img{width:98px;height:54px}.site-header nav>span{padding:4px 0 9px}.site-header.is-scrolled nav{margin-top:5px}.hero-images{transform:none!important}.main-message{transform:none!important;opacity:1!important}.hero-slide:nth-child(2) .main-photo{object-position:67% center}.hero-slide:nth-child(3) .main-photo{object-position:64% center}.hero-slide:nth-child(n+2):after{background:linear-gradient(180deg,rgb(16 26 46 / .42),rgb(16 26 46 / .65) 30%,rgb(16 26 46 / .25))}.visual-arrow{width:38px;height:44px;top:53%;border:0}.visual-arrow.left{left:4px}.visual-arrow.right{right:4px}.visual-arrow:hover{background:none;color:var(--white);transform:none}.visual-arrow svg{width:18px;height:18px}.visual-pagination{bottom:20px;gap:6px}.hero-count{font-size:11px;margin-right:6px}.hero-dot{width:26px}.hero-dot.is-current{width:48px}.motion-toggle{margin-left:2px}.scroll-cue{display:none}.supply-visual .supply-desktop{display:none}.supply-visual .supply-mobile{display:block}.marquee-track>span{gap:30px;padding-right:30px}.marquee-track{animation-duration:37s}.type-band.filled .marquee-track{animation-duration:41s}.wide-scene>img{transform:none;will-change:auto}.showcase-window{margin-top:18px}.showcase-track{gap:12px}.product-image{height:auto;aspect-ratio:4/5}.gallery-controls{gap:18px;margin-top:0}.gallery-caption{font-size:10px;margin-top:10px}.service-card:before{left:16px;right:16px}.motion-ready [data-reveal]{translate:0 18px;transition-duration:.7s,.85s}}
@media(hover:none){.service-card:hover{transform:none;box-shadow:0 3px 0 var(--cool);background:var(--white)}.service-card:hover h3{color:var(--navy)}.service-card:hover p{color:var(--muted)}.service-card:hover .service-number{color:var(--white);background:var(--navy)}.service-card:hover .service-icon{color:var(--navy);transform:none}.service-card:hover:before{transform:scaleX(0)}.showcase-card:hover{transform:none;box-shadow:none}.showcase-card:hover .product-image img{transform:none}.keyword-cloud > :is(span,a):is(:hover,:focus-visible){transform:none}.showcase-window{cursor:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready [data-reveal]{opacity:1;translate:none}.motion-ready .gold-rule[data-reveal]{scale:1 1}.hero-images,.main-message,.wide-scene>img{transform:none!important}.main-message{opacity:1!important}.marquee-track{transform:none}.service-card:is(:hover,:focus-visible),.showcase-card:hover,.keyword-cloud > :is(span,a):is(:hover,:focus-visible){transform:none}.product-image img,.field-images img{transform:none!important}}

.main-visual.is-offscreen .main-photo{animation-play-state:paused!important}

.main-visual{touch-action:pan-y pinch-zoom}
@media(prefers-reduced-motion:reduce){.service-card{transition:none!important}}
@media(prefers-reduced-motion:reduce){.is-gallery-flow-ready .showcase-card{scale:1!important;translate:none!important;will-change:auto!important}}

/* Main-page actions use the same label and icon proportions as About. */
.main-page .main-action{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  gap:32px;min-width:200px;min-height:56px;padding:0 24px;
  border:1px solid transparent;border-radius:999px;
  background:var(--navy);color:var(--white);
  font-family:Pretendard,sans-serif;font-size:16px;font-weight:550;line-height:24px;
  letter-spacing:-.2px;white-space:nowrap;vertical-align:middle;
  transition:background-color .22s,color .22s,border-color .22s,scale .16s,
    opacity .7s var(--ease-out) var(--reveal-delay,0ms),translate .85s var(--ease-out) var(--reveal-delay,0ms);
}
.main-page .main-action>.button-label{
  display:block;font:inherit;line-height:24px;color:inherit;transform:none;transition:none;
}
.main-action-icon{display:block;flex:0 0 20px;width:20px;height:20px;color:var(--gold);transition:transform .25s var(--ease-out),color .22s}
.main-page .section-link.light .main-action{background:transparent;border-color:rgb(203 210 222 / .5)}
.main-page .section-link .main-action:is(:hover,:focus-visible){background:var(--gold);border-color:var(--gold);color:var(--deep)}
.main-page .main-action:is(:hover,:focus-visible) .main-action-icon{color:currentColor;transform:translate(2px,-2px)}
.main-page .main-action:active{scale:.99}
.main-page .main-action:active .main-action-icon{transform:translate(1px,-1px)}
.main-page .inquiry-link{margin-top:30px;border-radius:3px;background:var(--gold);color:var(--deep)}
.main-page .inquiry-link:before{content:none}
.main-page .inquiry-link .main-action-icon{color:currentColor}
.main-page .inquiry-link:is(:hover,:focus-visible){background:var(--gold-hover);border-color:transparent}

/* Center the small controls and keep their line weight consistent. */
.main-page :is(.visual-arrow,.motion-toggle) svg{display:block;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.main-page .visual-arrow svg{width:20px;height:20px}
.main-page .visual-arrow{transition:background-color .22s,border-color .22s,color .22s,scale .16s,opacity .22s}
.main-page .visual-arrow:is(:hover,:active){transform:none}
.main-page .visual-arrow:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.main-page .visual-arrow:active:not(:disabled){scale:.96}
.main-page .motion-toggle{border-radius:50%;transition:color .22s,background-color .22s}
.main-page .motion-toggle:is(:hover,:focus-visible){background:rgb(255 255 255 / .08);color:var(--gold)}
@media(max-width:760px){
  .main-page .visual-arrow{width:44px;height:44px}
  .main-page .visual-arrow svg{width:20px;height:20px}
  .main-page .inquiry-link{margin-top:26px}
  .main-page .main-action{transition-duration:.22s,.22s,.22s,.16s,.55s,.65s}
}