.spg-story {
  --ice-0: #05090f;
  --ice-1: #0b1622;
  --ice-2: #12233a;
  --cyan: #7fe3ff;
  --frost: #eaf6ff;
  --warm: #ff9a4a;
  --nav-h: 52px;
}


.spg-story .ice-sec { position: relative; padding: clamp(72px, 10vw, 140px) 0; }
.spg-story .ice-dark { background: var(--ice-0); color: #b9c8d6; isolation: isolate; }
.spg-story .ice-light { background: var(--sand); }
.spg-story .ice-sec .sps-h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; max-width: 20ch; }
.spg-story .ice-dark .sps-h2 { color: #fff; }
.spg-story .ice-dark .sps-lead { color: #9fb2c4; }
.spg-story .ice-sec .sps-eyebrow { font-weight: 700; letter-spacing: .26em; }
.spg-story .ice-sec .sps-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; }
.spg-story .ice-dark .sps-eyebrow { color: var(--cyan); }
.spg-story .ice-light .sps-eyebrow { color: #1f8fa0; }
.spg-story .ice-dark .sps-ask { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); border-left-color: var(--cyan); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.spg-story .ice-dark .sps-ask p { color: #fff; }
.spg-story .ice-dark .sps-ask .sps-btn.sps-btn:not(.sps-btn--tg):not(.sps-btn--viber):not(.sps-btn--wa), .spg-story .ice-dark .sps-ask .sps-btn.sps-btn:not(.sps-btn--tg):not(.sps-btn--viber):not(.sps-btn--wa):hover { background: #fff; border-color: #fff; color: #0b1622 !important; }
.spg-story .ice-sec :where(button), .spg-story .ice-hero :where(button) { font-family: inherit; text-transform: none; letter-spacing: normal; line-height: 1.3; height: auto; min-height: 0; box-shadow: none; text-shadow: none; border-radius: 4px; }
.spg-story .ice-sec :where(h3) { text-transform: none; }

.spg-story .ice-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.spg-story .ice-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }


.spg-story .ice-glass { position: relative; border-radius: 4px; background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16); }
.spg-story .ice-glow { --mx: 50%; --my: 0%; }
.spg-story .ice-glow::after { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(127,227,255,.95), rgba(127,227,255,0) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; }
.spg-story .ice-glow:hover::after { opacity: 1; }



.spg-story .sps-rv.ice-mask { opacity: 1; transform: none; }
.spg-story .sps-rv.ice-mask > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.spg-story .sps-rv.ice-mask > * + * { transition-delay: calc(var(--i, 0) * 90ms + 180ms); }
.spg-story .sps-rv.ice-mask.is-in > * { clip-path: inset(0 0 0 0); }
.spg-story .ice-sec blockquote { background: none; border-radius: 0; box-shadow: none; font-family: inherit; quotes: none; }
.spg-story .ice-sec blockquote::before, .spg-story .ice-sec blockquote::after { content: none; display: none; }
.spg-story .sps-rv.ice-zoom { transform: scale(.88); transition: opacity 1s var(--ease), transform 1.3s var(--ease); }
.spg-story .sps-rv.ice-zoom.is-in { transform: none; }


.spg-story .ice-hero { position: relative; min-height: max(660px, calc(100svh - var(--nav-h))); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: radial-gradient(110% 80% at 72% 34%, #12304a 0%, #08141f 46%, #04080d 100%); }
.spg-story .ice-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.spg-story .ice-aurora { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.spg-story .ice-aurora--1 { width: 70vw; height: 42vw; left: 32%; top: -14%; opacity: .6; background: radial-gradient(closest-side, rgba(127,227,255,.5), transparent); animation: ice-drift 18s ease-in-out infinite alternate; }
.spg-story .ice-aurora--2 { width: 52vw; height: 30vw; left: -12%; top: 34%; opacity: .5; background: radial-gradient(closest-side, rgba(86,120,255,.4), transparent); animation: ice-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes ice-drift { from { transform: translate3d(-5%, 0, 0) scale(1); } to { transform: translate3d(7%, 5%, 0) scale(1.18); } }
.spg-story .ice-fog { position: absolute; left: -25%; right: -25%; bottom: -6%; height: 42%; background: radial-gradient(50% 60% at 50% 100%, rgba(205,238,255,.2), transparent 72%); filter: blur(18px); animation: ice-fog 30s ease-in-out infinite alternate; }
.spg-story .ice-fog--2 { bottom: 10%; height: 30%; opacity: .55; animation-duration: 44s; animation-direction: alternate-reverse; }
@keyframes ice-fog { from { transform: translate3d(-7%, 0, 0); } to { transform: translate3d(7%, -3%, 0); } }
.spg-story .ice-hero__ghost { position: absolute; z-index: 0; right: -2vw; top: 50%; translate: 0 -54%; font-size: clamp(220px, 34vw, 560px); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(127,227,255,.2); pointer-events: none; user-select: none; white-space: nowrap; animation: ice-ghost 14s ease-in-out infinite alternate; }
@keyframes ice-ghost { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3vw, 2vh, 0); } }
.spg-story .ice-hero__stage { position: absolute; z-index: 1; top: 4%; bottom: 7%; right: -3%; width: min(66%, 1000px); }
.spg-story .ice-hero__glow { position: absolute; left: 10%; right: 10%; top: 18%; bottom: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(127,227,255,.42), rgba(127,227,255,.07) 62%, transparent); filter: blur(26px); animation: ice-breathe 7s ease-in-out infinite; }
@keyframes ice-breathe { 50% { transform: scale(1.1); opacity: .7; } }
.spg-story .ice-hero__mv { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --poster-color: transparent; -webkit-box-reflect: below -16% linear-gradient(transparent 64%, rgba(255,255,255,.2)); }
.spg-story .ice-hero__floor { position: absolute; left: -10%; right: -10%; bottom: -2%; height: 40%; pointer-events: none; transform: perspective(520px) rotateX(74deg); transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, rgba(127,227,255,.16) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(127,227,255,.16) 0 1px, transparent 1px 64px);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.spg-story .ice-hero__stage::after { content: ""; position: absolute; left: 18%; right: 14%; bottom: 13%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(127,227,255,.55), rgba(127,227,255,.12) 55%, transparent); filter: blur(14px); pointer-events: none; z-index: -1; animation: ice-breathe 7s ease-in-out infinite; }
.spg-story .ice-chips { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.spg-story .ice-chip { position: absolute; display: flex; flex-direction: column; padding: 14px 18px 13px; color: #fff; animation: ice-bob 7s ease-in-out infinite; animation-delay: calc(var(--d) * -2.3s); transition: transform .8s var(--ease); will-change: transform; }
.spg-story .ice-chip b { font-size: clamp(17px, 1.7vw, 25px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.spg-story .ice-chip span { margin-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #bfd6e6; white-space: nowrap; }
.spg-story .ice-chip--a { top: 14%; left: 6%; }
.spg-story .ice-chip--b { top: 7%; right: 4%; }      
.spg-story .ice-chip--c { bottom: 18%; right: 16%; }
.spg-story .ice-chip--d { bottom: 26%; left: 12%; }
@media (min-width: 768px) { .spg-story .ice-hero:has(.ice-sws) .ice-chip--a { top: auto; bottom: 5%; left: 45%; } }   
@keyframes ice-bob { 50% { translate: 0 -14px; } }
.spg-story .ice-hero__body { position: relative; z-index: 3; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: clamp(96px, 14vh, 170px) var(--gut) clamp(64px, 10vh, 110px); }
.spg-story .ice-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); }
.spg-story .ice-hero .ice-hero__title { margin: 18px 0 0; padding: 0; font-size: clamp(46px, 7.6vw, 116px); line-height: .94; font-weight: 800; letter-spacing: -.04em; color: #fff; max-width: 9ch; text-transform: none; text-shadow: 0 10px 60px rgba(127,227,255,.25); }
.spg-story .ice-hero__title em { display: block; margin-top: .45em; font-style: normal; font-weight: 300; font-size: .34em; letter-spacing: .01em; line-height: 1.15; color: var(--frost); max-width: 22ch; }
.spg-story .ice-w { display: inline-block; white-space: nowrap; perspective: 600px; }
.spg-story .ice-c { display: inline-block; opacity: 0; transform: translateY(.55em) rotateX(-85deg); filter: blur(10px); animation: ice-letter 1s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * 48ms); }
@keyframes ice-letter { to { opacity: 1; transform: none; filter: blur(0); } }
.spg-story .ice-in { opacity: 0; transform: translateY(22px); animation: ice-up 1.1s var(--ease) forwards; animation-delay: calc(.6s + var(--i) * 130ms); }
@keyframes ice-up { to { opacity: 1; transform: none; } }
.spg-story .ice-hero__lead { margin-top: 26px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: rgba(225,238,248,.86); max-width: 46ch; }
.spg-story .ice-hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 34px; }
.spg-story .ice-price small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8fa8bc; }
.spg-story .ice-price b { display: block; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.spg-story .ice-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.spg-story .ice-scroll { position: absolute; z-index: 3; left: 50%; bottom: 20px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.spg-story .ice-scroll.ice-scroll, .spg-story .ice-scroll.ice-scroll:hover { color: rgba(255,255,255,.66) !important; }
.spg-story .ice-scroll i { position: relative; width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; }
.spg-story .ice-scroll i::before { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--cyan); animation: ice-wheel 1.8s ease-in-out infinite; }
@keyframes ice-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }


.spg-story .ice-features { padding-bottom: 0; }
.spg-story .ice-feat__head .sps-head { margin-bottom: clamp(28px, 4vw, 48px); }
.spg-story .ice-feat { position: relative; --h: 200; }
.spg-story .ice-feat__stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow: hidden; z-index: 0; }
.spg-story .ice-feat__bg { position: absolute; inset: 0; background: radial-gradient(70% 75% at 66% 52%, hsl(var(--h) 72% 24%) 0%, hsl(var(--h) 62% 10%) 52%, #04070b 100%); }
.spg-story .ice-feat__bg::after { content: ""; position: absolute; left: 30%; right: -10%; bottom: 0; height: 36%; background: repeating-linear-gradient(90deg, hsla(var(--h), 90%, 75%, .14) 0 1px, transparent 1px 70px), repeating-linear-gradient(0deg, hsla(var(--h), 90%, 75%, .14) 0 1px, transparent 1px 70px); transform: perspective(500px) rotateX(72deg); transform-origin: 50% 100%; -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent); }
.spg-story .ice-feat__mv { position: absolute; top: 0; bottom: 0; right: 0; width: 64%; height: 100%; background: transparent; --poster-color: transparent; pointer-events: none; }
.spg-story .ice-feat__count { position: absolute; right: clamp(40px, 5vw, 80px); bottom: 20px; display: flex; align-items: baseline; gap: 8px; font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,.1); pointer-events: none; }
.spg-story .ice-feat__count b { font-size: clamp(90px, 12vw, 180px); line-height: 1; }
.spg-story .ice-feat__count span { font-size: 22px; }
.spg-story .ice-feat__rail { position: absolute; right: 22px; top: 50%; translate: 0 -50%; display: grid; gap: 9px; }
.spg-story .ice-feat__rail i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); transition: height .4s var(--ease), background-color .3s, box-shadow .3s; }
.spg-story .ice-feat__rail i.is-on { height: 24px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.spg-story .ice-feat__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.spg-story .ice-feat__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #fff); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.spg-story .ice-feat__steps { position: relative; z-index: 2; max-width: var(--wrap); margin: calc(-100vh + var(--nav-h)) auto 0; padding: 0 var(--gut); }
.spg-story .ice-step { min-height: 92vh; display: flex; align-items: center; }
.spg-story .ice-step:first-child { min-height: calc(100vh - var(--nav-h)); }
.spg-story .ice-step__card { position: relative; width: min(450px, 100%); padding: 30px 30px 28px; opacity: .14; transform: translateX(-46px) scale(.96); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.spg-story .ice-step.is-on .ice-step__card { opacity: 1; transform: none; }
.spg-story .ice-step__ghost { position: absolute; right: -4px; top: -.5em; font-size: 140px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(127,227,255,.4); pointer-events: none; }
.spg-story .ice-step__n { display: block; font-size: 11px; font-weight: 700; letter-spacing: .24em; color: var(--cyan); }
.spg-story .ice-step__tag { display: inline-block; margin-top: 14px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #0b1622; background: var(--cyan); border-radius: 2px; }
.spg-story .ice-step h3 { margin-top: 14px; font-size: clamp(21px, 2vw, 28px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.spg-story .ice-step p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: #c6d4e1; }
.spg-story .ice-step__sub { display: block; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--cyan); font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; line-height: 1.3; color: var(--cyan); }
.spg-story .ice-step blockquote { margin: 16px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--cyan); font-size: 16px; font-weight: 600; font-style: italic; line-height: 1.5; color: #fff; }
.spg-story .ice-step__pic { margin-top: 18px; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 2px; }
.spg-story .ice-step__pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.spg-story .ice-step.is-on .ice-step__pic img { transform: none; }
.spg-story .ice-spot { position: relative; display: block; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; transition: opacity .5s; pointer-events: none; }
.spg-story .ice-spot.is-on { opacity: 1; }
.spg-story .ice-spot i { position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(127,227,255,.45), 0 0 26px 8px rgba(127,227,255,.75); }
.spg-story .ice-spot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cyan); animation: ice-ping 1.8s ease-out infinite; }
@keyframes ice-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.spg-story .ice-features > .sps-wrap:last-child { padding-bottom: clamp(64px, 9vw, 120px); }



.spg-story .ice-tempsec { --tc: #08263a; --tg: rgba(127,227,255,.35); --ta: #7fe3ff; overflow-x: clip; background-color: var(--tc); }
.spg-story .ice-temp__scene { position: relative; }
.spg-story .ice-temp__scene::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 70% at 78% 48%, var(--tg), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgba(255,255,255,.05), transparent 70%); }
.spg-story .ice-tempsec .sps-wrap { position: relative; z-index: 2; }

.spg-story .ice-tempsec.is-pin { padding-top: 0; }
.spg-story .ice-tempsec.is-pin .ice-temp__pin { height: 300vh; }
.spg-story .ice-tempsec.is-pin .ice-temp__scene { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: flex; align-items: center; }
.spg-story .ice-tempsec.is-pin .ice-temp__scene > .sps-wrap { width: 100%; }
.spg-story .ice-tempsec.is-pin .ice-temp__num { font-size: clamp(72px, min(13vw, 17vh), 196px); }
.spg-story .ice-tempsec.is-pin .ice-temp__read { flex-direction: column; align-items: flex-start; gap: 10px; }   
.spg-story .ice-tempsec.is-pin .ice-temp__zone { padding-bottom: 0; }
@media (min-width: 1025px) and (max-height: 820px) { .spg-story .ice-tempsec.is-pin .ice-temp .sps-lead { display: none; } }
.spg-story .ice-tempsec.is-pin .ice-temp__view { max-width: min(520px, 64vh); }
.spg-story .ice-scn .ice-scn__short { display: none; }
.spg-story .ice-tempsec .sps-eyebrow { color: var(--ta); }
.spg-story .ice-temp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.spg-story .ice-temp .sps-head { margin-bottom: clamp(20px, 3vw, 34px); }
.spg-story .ice-temp__read { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 22px; }
.spg-story .ice-temp__num { display: flex; align-items: flex-start; font-size: clamp(96px, 13vw, 196px); font-weight: 800; line-height: .82; letter-spacing: -.06em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 70px var(--tg); }
.spg-story .ice-temp__num small { margin: .08em 0 0 .06em; font-size: .28em; font-weight: 600; letter-spacing: 0; }
.spg-story .ice-temp__zone { padding-bottom: .9em; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ta); }
.spg-story .ice-range { position: relative; margin-top: 30px; }
.spg-story .ice-range input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; touch-action: pan-y; }
.spg-story .ice-range input:focus { outline: none; }
.spg-story .ice-range input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #6fdcff 0%, #bfe8f5 30%, #e9eef0 52%, #ffc28a 78%, #ff7a2e 100%); }
.spg-story .ice-range input::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #6fdcff 0%, #bfe8f5 30%, #e9eef0 52%, #ffc28a 78%, #ff7a2e 100%); }
.spg-story .ice-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(255,255,255,.2), 0 0 28px 4px var(--ta); transition: transform .2s; }
.spg-story .ice-range input::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(255,255,255,.2), 0 0 28px 4px var(--ta); }
.spg-story .ice-range input:active::-webkit-slider-thumb { transform: scale(1.15); }
.spg-story .ice-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(255,255,255,.45), 0 0 28px 4px var(--ta); }
.spg-story .ice-range__ticks { position: relative; height: 18px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); }
.spg-story .ice-range__ticks span { position: absolute; top: 0; left: calc(16px + var(--p) * (100% - 32px)); translate: -50% 0; }
.spg-story .ice-scns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.spg-story .ice-scn { position: relative; padding: 14px 16px 13px; text-align: left; color: #fff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); overflow: hidden; transition: transform .35s var(--ease), border-color .3s, background-color .3s, box-shadow .3s; }
.spg-story .ice-scn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.spg-story .ice-scn:hover::before { transform: translateX(120%); }
.spg-story .ice-scn b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.spg-story .ice-scn span { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.6); }
.spg-story .ice-scn:hover { transform: translateY(-3px); border-color: var(--ta); }
.spg-story .ice-scn.is-on { background: rgba(255,255,255,.12); border-color: var(--ta); box-shadow: inset 0 0 0 1px var(--ta), 0 14px 34px -14px var(--ta); }
.spg-story .ice-temp__note { min-height: 3.2em; margin-top: 18px; font-size: 15px; line-height: 1.55; color: #e2edf5; transition: opacity .3s; }
.spg-story .ice-temp__view { position: relative; width: 100%; max-width: 520px; margin-left: auto; aspect-ratio: 1; }
.spg-story .ice-temp__ring { position: absolute; inset: -5%; border-radius: 50%; opacity: .75; background: conic-gradient(from 0deg, var(--ta), transparent 28%, var(--ta) 52%, transparent 80%); -webkit-mask: radial-gradient(closest-side, transparent 97%, #000 98%, #000 99.4%, transparent 100%); mask: radial-gradient(closest-side, transparent 97%, #000 98%, #000 99.4%, transparent 100%); animation: ice-spin 16s linear infinite; }
@keyframes ice-spin { to { transform: rotate(360deg); } }
.spg-story .ice-temp__port { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #16324a, #070f18 75%); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 50px 110px -30px var(--tg), inset 0 0 90px rgba(0,0,0,.55); }
.spg-story .ice-temp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: saturate(.6); }
.spg-story .ice-temp__mv { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --poster-color: transparent; pointer-events: none; }
.spg-story .ice-temp__tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side, transparent 52%, var(--tg) 150%); mix-blend-mode: screen; }
.spg-story .ice-temp__badge { position: absolute; right: -2%; bottom: 8%; padding: 12px 16px; }
.spg-story .ice-temp__badge b { display: block; font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.spg-story .ice-temp__badge span { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.spg-story .ice-temp__summer { margin-top: clamp(44px, 6vw, 80px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: clamp(20px, 2.3vw, 32px); font-weight: 300; line-height: 1.3; color: #fff; max-width: 34ch; }


.spg-story .ice-ben__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.spg-story .ice-ben__top .sps-head { margin-bottom: 0; }
.spg-story .ice-ben__photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; }
.spg-story .ice-ben__photo img { width: 100%; height: 124%; object-fit: cover; }
.spg-story .ice-bens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.spg-story .ice-ben { position: relative; min-height: 310px; padding: 28px 22px 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.spg-story .sps-rv.ice-ben { transform: none; translate: 0 40px; transition: opacity .9s var(--ease) calc(var(--i) * 90ms), translate .9s var(--ease) calc(var(--i) * 90ms), transform .25s ease-out, box-shadow .4s, border-color .3s; }
.spg-story .sps-rv.ice-ben.is-in { translate: 0 0; }
.spg-story .ice-ben:hover { box-shadow: 0 30px 60px -28px rgba(8,40,60,.35); border-color: rgba(54,194,207,.5); }
.spg-story .ice-ben__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(127,227,255,.28), transparent 46%); opacity: 0; transition: opacity .4s; }
.spg-story .ice-ben:hover .ice-ben__glare { opacity: 1; }
.spg-story .ice-ben__n { position: absolute; right: 14px; top: 6px; font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(17,17,17,.12); }
.spg-story .ice-ico { width: 46px; height: 46px; fill: none; stroke: #0f6f80; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, transform .5s var(--ease); }
.spg-story .ice-ben .ice-ico * { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s var(--ease) calc(.35s + var(--i) * .12s); }
.spg-story .ice-ben.is-in .ice-ico * { stroke-dashoffset: 0; }
.spg-story .ice-ben:hover .ice-ico { stroke: #08a5c6; transform: translateY(-4px) scale(1.08); }
.spg-story .ice-ben:hover .ice-ico * { animation: ice-redraw 1.3s var(--ease); }
@keyframes ice-redraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.spg-story .ice-ben h3 { position: relative; margin-top: 22px; font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.spg-story .ice-ben p { position: relative; margin-top: 10px; font-size: 14.5px; line-height: 1.62; color: var(--text); }


.spg-story .ice-banya { padding-bottom: clamp(56px, 8vw, 100px); }
.spg-story .ice-banya__pin { position: relative; height: 260vh; }
.spg-story .ice-banya__scene { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: flex; align-items: center; overflow: hidden; background: #0a0f15; }
.spg-story .ice-banya__photo { position: absolute; inset: 0; overflow: hidden; }
.spg-story .ice-banya__photo img { width: 100%; height: 124%; object-fit: cover; }
.spg-story .ice-banya__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,9,15,.82) 0%, rgba(5,9,15,.45) 50%, rgba(5,9,15,.78) 100%), linear-gradient(180deg, rgba(5,9,15,.3), rgba(5,9,15,.6)); }
.spg-story .ice-ways { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; }
.spg-story .ice-way { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); border-radius: 4px; }
.spg-story .ice-way--concrete { background: rgba(236,232,226,.94); color: #3a3a3a; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.spg-story .ice-way--tub { color: #fff; transition: transform .8s var(--ease), box-shadow .8s; }
.spg-story .ice-way--tub.is-done { transform: scale(1.03); box-shadow: 0 0 0 1px rgba(127,227,255,.6), 0 40px 90px -30px rgba(127,227,255,.55); }
.spg-story .ice-way__k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #8a8178; }
.spg-story .ice-way--tub .ice-way__k, .spg-story .ice-fit .ice-way__k, .spg-story .ice-pick .ice-way__k { color: var(--cyan); }
.spg-story .ice-way h3 { margin-top: 8px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; color: inherit; }
.spg-story .ice-way ol { flex: 1; margin-top: 18px; display: grid; align-content: start; gap: 2px; }
.spg-story .ice-way__step { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 15.5px; font-weight: 600; opacity: .12; transform: translateX(-14px); transition: opacity .5s, transform .6s var(--ease), color .4s; }
.spg-story .ice-way__step.is-on { opacity: 1; transform: none; }
.spg-story .ice-way__step > i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; font-style: normal; font-weight: 700; }
.spg-story .ice-way--concrete .ice-way__step span { position: relative; }
.spg-story .ice-way--concrete .ice-way__step span::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 2px; background: #c2412d; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.spg-story .ice-way--concrete .ice-way__step.is-x { color: #9b948c; }
.spg-story .ice-way--concrete .ice-way__step.is-x span::after { transform: scaleX(1); }
.spg-story .ice-way--tub .ice-way__step > i { border-color: var(--cyan); color: var(--cyan); }
.spg-story .ice-way--tub .ice-way__step > i .ice-ico { width: 16px; height: 16px; stroke: var(--cyan); stroke-width: 2; }
.spg-story .ice-way--tub .ice-way__step span { display: flex; flex-direction: column; }
.spg-story .ice-way--tub .ice-way__step span b { font-size: 16px; color: #fff; }
.spg-story .ice-way--tub .ice-way__step span { font-weight: 400; font-size: 13.5px; color: #b9cbd9; }
.spg-story .ice-way__scale { margin-top: 18px; display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.spg-story .ice-way__scale b { font-size: 22px; letter-spacing: -.01em; text-transform: none; }
.spg-story .ice-way__bar { flex: 1; display: flex; gap: 4px; height: 10px; }
.spg-story .ice-way__bar i { flex: 1; border-radius: 2px; background: rgba(0,0,0,.08); transition: background-color .4s; }
.spg-story .ice-way--concrete .ice-way__bar i.is-on { background: #c2412d; }
.spg-story .ice-way--tub .ice-way__bar i { background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.spg-story .ice-way--tub .ice-way__bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), #fff); transform: scaleX(var(--d, 0)); transform-origin: 0 50%; }
.spg-story .ice-way__done { min-height: 1.5em; margin-top: 14px; font-size: 14px; color: var(--cyan); opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s var(--ease); }
.spg-story .ice-way--tub.is-done .ice-way__done { opacity: 1; transform: none; }
.spg-story .ice-banya__quote { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 880px; margin: clamp(40px, 6vw, 72px) auto 0; }
.spg-story .ice-banya__quote blockquote { margin: 0; padding: 0; font-size: clamp(19px, 2vw, 26px); line-height: 1.45; font-weight: 500; color: var(--ink); }
.spg-story .ice-banya__quote figcaption { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.spg-story .ice-banya__quote img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.spg-story .ice-banya__quote b { display: block; font-size: 15px; color: var(--ink); }


.spg-story .ice-saunasec { padding-bottom: clamp(56px, 8vw, 100px); background: radial-gradient(70% 45% at 25% 0%, #2a1a10, var(--ice-0) 62%); }
.spg-story .ice-saunasec .sps-eyebrow { color: var(--warm); }
.spg-story .ice-sauna { position: relative; height: 300vh; }
.spg-story .ice-sauna__stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow: hidden; background: radial-gradient(70% 70% at 40% 45%, #2b1d13, #070a0f 72%); }
.spg-story .ice-sauna__mv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; --poster-color: transparent; }
.spg-story .ice-sauna__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,9,15,.45), transparent 22%, transparent 55%, rgba(5,9,15,.8)); }
.spg-story .ice-sauna .ice-fx { z-index: 2; }
.spg-story .ice-sauna__pt { display: block; width: 2px; height: 2px; pointer-events: none; }
.spg-story .ice-sauna__caps { position: absolute; z-index: 3; right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); bottom: clamp(28px, 7vh, 72px); width: min(480px, calc(100% - 2 * var(--gut))); margin: 0; padding: 0; list-style: none; }
.spg-story .ice-sauna__cap { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; padding: 20px 24px 22px; color: #fff; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.spg-story .ice-sauna__cap.is-on { opacity: 1; transform: none; }
.spg-story .ice-sauna__cap span { font-size: 11px; font-weight: 700; letter-spacing: .24em; color: var(--warm); }
.spg-story .ice-sauna__cap:last-child span { color: var(--cyan); }
.spg-story .ice-sauna__cap b { display: block; margin-top: 8px; font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.spg-story .ice-sauna__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.1); }
.spg-story .ice-sauna__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--warm), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }


.spg-story .ice-scenesec { overflow: hidden; background: radial-gradient(80% 60% at 20% 0%, #0f2537, var(--ice-0) 60%); }
.spg-story .ice-scenes__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.spg-story .ice-scenes__tabs button { position: relative; overflow: hidden; padding: 13px 20px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #cfe0ee; background: transparent; border: 1px solid rgba(255,255,255,.2); transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease); }
.spg-story .ice-scenes__tabs button:hover { transform: translateY(-2px); border-color: var(--cyan); }
.spg-story .ice-scenes__tabs button i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; }
.spg-story .ice-scenes__tabs button.is-on { color: #fff; border-color: var(--cyan); background: rgba(127,227,255,.12); }
.spg-story .ice-scenes.is-auto .ice-scenes__tabs button.is-on i { animation: ice-tab 6s linear forwards; }
@keyframes ice-tab { to { transform: scaleX(1); } }
.spg-story .ice-scenes__view { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 4px; background: #000; }
.spg-story .ice-scene { position: absolute; inset: 0; margin: 0; z-index: 1; clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 1.2s var(--ease); }
.spg-story .ice-scene.was { z-index: 1; clip-path: circle(150% at 50% 50%); transition: none; }
.spg-story .ice-scene.is-on { z-index: 2; clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
.spg-story .ice-scene img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 7s linear; }
.spg-story .ice-scene.is-on img { transform: scale(1.02); }
.spg-story .ice-scene figcaption { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); max-width: 430px; padding: 22px 24px; color: #fff; opacity: 0; transform: translateY(24px); transition: opacity .7s .5s, transform .9s var(--ease) .5s; }
.spg-story .ice-scene.is-on figcaption { opacity: 1; transform: none; }
.spg-story .ice-scene figcaption span { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.spg-story .ice-scene figcaption b { display: block; margin-top: 6px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.spg-story .ice-scene figcaption p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.86); }


.spg-story .ice-launch { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.spg-story .ice-launch__line { position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--line); }
.spg-story .ice-launch__line i { display: block; height: 100%; background: linear-gradient(90deg, var(--aqua), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 1.8s var(--ease) .2s; }
.spg-story .ice-launch__step { position: relative; z-index: 1; }
.spg-story .ice-launch__n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 20px; font-weight: 800; color: var(--ink); background: #fff; border: 1px solid var(--line); transition: border-color .4s, box-shadow .4s, background-color .4s, color .4s; transition-delay: calc(.2s + var(--i) * .48s); }
.spg-story .ice-launch.is-go .ice-launch__n { color: #fff; background: #0b1622; border-color: #0b1622; box-shadow: 0 0 0 7px rgba(54,194,207,.16); }
.spg-story .ice-launch.is-go .ice-launch__line i { transform: scaleX(1); }
.spg-story .ice-launch__step b { display: block; margin-top: 22px; font-size: 19px; font-weight: 800; color: var(--ink); }
.spg-story .ice-launch__step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }
.spg-story .ice-plug { position: absolute; right: 0; top: -2px; width: 120px; height: auto; overflow: hidden; }
.spg-story .ice-plug__wall { fill: #fff; stroke: #c9c2bb; stroke-width: 2; transition: stroke .4s, fill .4s; }
.spg-story .ice-plug__hole { fill: #ece6df; }
.spg-story .ice-plug__fork { transform: translateX(-60px); transition: transform 1.1s cubic-bezier(.6, -0.3, .3, 1.4) .2s; }
.spg-story .ice-plug__fork rect { fill: #0b1622; }
.spg-story .ice-plug__fork path { fill: none; stroke: #0b1622; stroke-width: 5; stroke-linecap: round; }
.spg-story .ice-plug__fork .ice-plug__cable { stroke-width: 4; }
.spg-story .ice-plug__spark { fill: none; stroke: var(--aqua); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spg-story .ice-launch.is-go .ice-plug__fork { transform: none; transition-delay: 1.65s; }
.spg-story .ice-launch.is-go .ice-plug__wall { stroke: var(--aqua); transition-delay: 2.6s; }
.spg-story .ice-launch.is-go .ice-plug__spark { animation: ice-spark 1.4s ease-out 2.7s 2; }
@keyframes ice-spark { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
.spg-story .ice-launch__quote { margin: clamp(32px, 5vw, 56px) 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--aqua); font-size: clamp(18px, 1.8vw, 23px); font-weight: 500; line-height: 1.45; color: var(--ink); max-width: 40ch; }
.spg-story .ice-launch__quote span { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.spg-story .ice-fit { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 48px; padding: clamp(24px, 3.6vw, 44px); color: #cfe0ee; background: radial-gradient(90% 120% at 100% 0%, #16405e, #0b1622 60%); border-color: rgba(127,227,255,.2); }
.spg-story .ice-fit__head h3 { margin-top: 8px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: #fff; }
.spg-story .ice-fit__head p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.spg-story .ice-fit__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-content: start; }
.spg-story .ice-fit__form label { position: relative; display: block; }
.spg-story .ice-fit__form span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #9fb7ca; }
.spg-story .ice-fit__form input { width: 100%; height: 58px; padding: 0 50px 0 16px; font: 700 22px/1 Montserrat, Arial, sans-serif; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; transition: border-color .3s, box-shadow .3s; -moz-appearance: textfield; }
.spg-story .ice-fit__form input::-webkit-outer-spin-button, .spg-story .ice-fit__form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spg-story .ice-fit__form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(127,227,255,.18); }
.spg-story .ice-fit__form input::placeholder { color: rgba(255,255,255,.3); font-weight: 500; font-size: 16px; }
.spg-story .ice-fit__form i { position: absolute; right: 16px; bottom: 19px; font-style: normal; font-size: 13px; color: #9fb7ca; }
.spg-story .ice-fit__out { grid-column: 2; min-height: 3em; }
.spg-story .ice-fit__out p { position: relative; padding: 14px 16px 14px 46px; font-size: 15px; line-height: 1.5; color: #fff; background: rgba(255,255,255,.05); border-radius: 4px; animation: ice-pop .5s var(--ease); }
.spg-story .ice-fit__out p::before { content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border-radius: 50%; background: #9fb7ca; }
.spg-story .ice-fit__out p[data-a="ok"]::before { background: #3fd6a0; box-shadow: 0 0 14px #3fd6a0; }
.spg-story .ice-fit__out p[data-a="tight"]::before { background: #ffc24a; box-shadow: 0 0 14px #ffc24a; }
.spg-story .ice-fit__out p[data-a="door"]::before, .spg-story .ice-fit__out p[data-a="place"]::before { background: var(--warm); box-shadow: 0 0 14px var(--warm); }
@keyframes ice-pop { from { opacity: 0; transform: translateY(8px); } }
.spg-story .ice-fit__msg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.spg-story .ice-fit__msg > span { margin-right: 6px; font-size: 14px; font-weight: 600; color: #fff; }
.spg-story .ice-fit__msg .sps-btn { min-height: 46px; padding: 0 20px; }


.spg-story .ice-caresec { overflow: hidden; background: radial-gradient(70% 70% at 85% 50%, #0f2a3e, var(--ice-0) 65%); }
.spg-story .ice-care { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.spg-story .ice-care__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.spg-story .ice-care__col { padding: 22px 22px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; }
.spg-story .ice-care__col h3 { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.spg-story .ice-care__col--you h3 { color: var(--warm); }
.spg-story .ice-care__col li { position: relative; padding: 11px 0 11px 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14.5px; line-height: 1.5; color: #dbe6ef; }
.spg-story .ice-care__col li::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.spg-story .ice-care__col--you li::before { background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.spg-story .ice-dial { display: block; width: 100%; max-width: 440px; margin: 0 auto; overflow: visible; }
.spg-story .ice-dial__track { fill: none; stroke: rgba(255,255,255,.05); stroke-width: 30; }
.spg-story .ice-dial__seg { fill: none; stroke: rgba(127,227,255,.22); stroke-width: 22; }
.spg-story .is-you .ice-dial__seg { stroke: var(--warm); filter: drop-shadow(0 0 8px rgba(255,154,74,.6)); }
.spg-story .ice-dial__dot { fill: #1d3a52; animation: ice-dot 12s linear infinite paused; animation-delay: calc(var(--a) / 360 * 12s); }
@keyframes ice-dot { 0% { fill: #fff; } 6% { fill: #7fe3ff; } 40%, 100% { fill: #1f4560; } }
.spg-story .ice-dial text { fill: #8aa0b4; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; }
.spg-story .ice-dial .is-you text { fill: var(--warm); }
.spg-story .ice-dial__hand { transform-box: view-box; transform-origin: 160px 160px; animation: ice-spin 12s linear infinite paused; }
.spg-story .ice-dial__hand path { stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--cyan)); }
.spg-story .ice-dial__hand circle { fill: #fff; }
.spg-story .ice-care__dial.is-run .ice-dial__hand, .spg-story .ice-care__dial.is-run .ice-dial__dot { animation-play-state: running; }
.spg-story .ice-dial__core { fill: #0a1622; stroke: rgba(127,227,255,.25); }
.spg-story .ice-dial .ice-dial__big { fill: #fff; font-size: 34px; font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.spg-story .ice-dial .ice-dial__small { fill: #8aa0b4; font-size: 11px; letter-spacing: .14em; }
.spg-story .ice-dial__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 18px; font-size: 12px; color: #9fb2c4; }
.spg-story .ice-dial__lg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--cyan); vertical-align: -1px; }
.spg-story .ice-dial__lg--you::before { background: var(--warm); }

.spg-story .ice-dark .sps-ask.ice-care__up { margin-top: clamp(32px, 4vw, 52px); background: linear-gradient(100deg, rgba(127,227,255,.16), rgba(127,227,255,.04) 70%); border-color: rgba(127,227,255,.35); border-left: 4px solid var(--cyan); box-shadow: 0 0 40px rgba(127,227,255,.08); }
.spg-story .ice-care__up p { font-size: clamp(16px, 1.35vw, 19px); }


.spg-story .ice-lads { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 12px; align-items: end; padding-top: 40px; }
.spg-story .ice-lad { position: relative; display: flex; flex-direction: column; padding: 0 18px 20px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.spg-story .sps-rv.ice-lad { transform: none; translate: 0 40px; transition: opacity .9s var(--ease) calc(var(--i) * 90ms), translate .9s var(--ease) calc(var(--i) * 90ms), transform .55s var(--ease), box-shadow .55s, border-color .3s; }
.spg-story .sps-rv.ice-lad.is-in { translate: 0 0; }
.spg-story .ice-lad__step { position: absolute; left: 12px; top: 10px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #b7aea5; }
.spg-story .ice-lad__img { position: relative; height: calc(118px + var(--i) * 16px); margin: 0 -18px; padding: 10px 14px 0; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(90% 80% at 50% 70%, #fff, #f1ede8); border-radius: 4px 4px 0 0; }
.spg-story .ice-lad__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transform: translateY(8px) scale(.94); transition: transform .8s var(--ease); }
.spg-story .ice-lad__body { position: relative; margin-top: 22px; }
.spg-story .ice-lad__body small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #1f8fa0; }
.spg-story .ice-lad__body b { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.spg-story .ice-lad__body p { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--text); min-height: 7.8em; }
.spg-story .ice-lad__price { display: block; margin-top: 12px; font-size: 20px; font-weight: 800; color: var(--ink); }
.spg-story .ice-lad__body em { display: inline-block; margin-top: 8px; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #1f8fa0; transition: transform .3s var(--ease); }
.spg-story a.ice-lad:hover { transform: translateY(-10px); border-color: var(--aqua); box-shadow: 0 34px 60px -30px rgba(10,40,60,.4); }
.spg-story .ice-lad:hover .ice-lad__img img { transform: translateY(-30px) scale(1.12); }
.spg-story a.ice-lad:hover em { transform: translateX(6px); }
.spg-story .ice-lad.is-cur { color: #fff; background: radial-gradient(120% 90% at 50% 0%, #17405e, #0b1622 70%); border-color: transparent; box-shadow: 0 30px 60px -30px rgba(10,40,60,.6); }
.spg-story .ice-lad.is-cur .ice-lad__body b, .spg-story .ice-lad.is-cur .ice-lad__price { color: #fff; }
.spg-story .ice-lad.is-cur .ice-lad__body p { color: #c6d4e1; }
.spg-story .ice-lad.is-cur .ice-lad__body small, .spg-story .ice-lad.is-cur .ice-lad__body em { color: var(--cyan); }
.spg-story .ice-lad.is-cur .ice-lad__img { background: radial-gradient(90% 80% at 50% 70%, #fff, #dfe9ef); box-shadow: 0 0 40px rgba(127,227,255,.25); }
.spg-story .ice-lad.is-cur .ice-lad__img img { transform: translateY(-6px) scale(1.04); }
.spg-story .ice-lad.is-pick { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(54,194,207,.35), 0 34px 60px -30px rgba(10,40,60,.45); transform: translateY(-10px); }
.spg-story .ice-lad.is-pick .ice-lad__img img { transform: translateY(-30px) scale(1.12); }
.spg-story .ice-pick { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2.3fr); gap: 20px 40px; padding: clamp(22px, 3vw, 36px); color: #fff; background: radial-gradient(100% 140% at 0% 0%, #16405e, #0b1622 60%); border-color: rgba(127,227,255,.2); }
.spg-story .ice-pick__head h3 { margin-top: 8px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; color: #fff; }
.spg-story .ice-pick__qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.spg-story .ice-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.spg-story .ice-q legend { display: flex; gap: 8px; margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: #fff; }
.spg-story .ice-q legend i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #0b1622; font-size: 11px; font-style: normal; }
.spg-story .ice-q > div { display: flex; flex-direction: column; gap: 6px; }
.spg-story .ice-q button { padding: 10px 12px; text-align: left; font-size: 13px; font-weight: 500; color: #cfe0ee; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); transition: border-color .3s, background-color .3s, color .3s, transform .3s var(--ease); }
.spg-story .ice-q button:hover { border-color: var(--cyan); transform: translateX(4px); }
.spg-story .ice-q button.is-on { color: #fff; background: rgba(127,227,255,.16); border-color: var(--cyan); }
.spg-story .ice-pick__out { grid-column: 1 / -1; }
.spg-story .ice-pick__out p { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 17px; font-weight: 700; color: #fff; animation: ice-pop .5s var(--ease); }


@media (max-width: 1024px) {
  .spg-story .ice-hero__stage { width: 72%; right: -10%; opacity: .9; }
  .spg-story .ice-feat__stage { z-index: 3; height: 46vh; height: 46svh; top: 50px; }
  .spg-story .ice-feat__mv { width: 100%; }
  .spg-story .ice-feat__count { right: auto; left: var(--gut); bottom: 8px; }
  .spg-story .ice-feat__count b { font-size: 64px; }
  .spg-story .ice-feat__rail { right: 12px; }
  .spg-story .ice-feat__steps { margin-top: 0; }
  .spg-story .ice-step, .spg-story .ice-step:first-child { min-height: 64vh; align-items: flex-start; padding-top: 22px; }
  .spg-story .ice-step__card { width: 100%; max-width: 560px; transform: translateY(26px); opacity: .3; }
  .spg-story .ice-temp { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-temp__view { max-width: 420px; margin: 0 auto; }
  
  .spg-story .ice-tempsec.is-pin .ice-temp { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "read view" "range range" "scns scns" "note note"; gap: 10px 16px; }
  .spg-story .ice-tempsec.is-pin .ice-temp__ctl { display: contents; }
  .spg-story .ice-tempsec.is-pin .ice-temp .sps-head { grid-area: head; margin-bottom: 4px; }
  .spg-story .ice-tempsec.is-pin .ice-temp .sps-lead { display: none; }
  .spg-story .ice-tempsec.is-pin .ice-temp__read { grid-area: read; flex-direction: column; align-items: flex-start; gap: 8px; }
  .spg-story .ice-tempsec.is-pin .ice-temp__zone { padding-bottom: 0; }
  .spg-story .ice-tempsec.is-pin .ice-temp__view { grid-area: view; width: min(40vw, 300px); width: min(40vw, 32svh, 300px); margin: 0; }
  .spg-story .ice-tempsec.is-pin .ice-temp__badge { display: none; }
  .spg-story .ice-tempsec.is-pin .ice-range { grid-area: range; margin-top: 4px; }
  .spg-story .ice-tempsec.is-pin .ice-scns { grid-area: scns; margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spg-story .ice-tempsec.is-pin .ice-temp__note { grid-area: note; margin-top: 0; }
  .spg-story .ice-bens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spg-story .ice-ben { min-height: 0; }
  .spg-story .ice-ben__top { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-banya__pin { height: auto; }
  .spg-story .ice-banya__scene { position: relative; top: auto; height: auto; padding: 44px 0; }
  .spg-story .ice-ways { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .spg-story .ice-launch__line { display: none; }
  .spg-story .ice-fit, .spg-story .ice-care, .spg-story .ice-pick { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-fit__out { grid-column: auto; }
  .spg-story .ice-lads { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 40%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 44px var(--gut) 10px; }
  .spg-story .ice-lads::-webkit-scrollbar { display: none; }
  .spg-story .ice-lad { scroll-snap-align: start; }
  .spg-story .ice-pick__qs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .spg-story .ice-sec { padding: 64px 0; }
  .spg-story .ice-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .spg-story .ice-hero__stage { position: relative; inset: auto; width: auto; height: min(52vh, 440px); margin: 8px -6% 0; opacity: 1; }
  .spg-story .ice-hero__glow { left: 14%; right: 14%; }
  .spg-story .ice-chip { padding: 9px 12px 8px; }
  .spg-story .ice-chip b { font-size: 15px; }
  .spg-story .ice-chip span { font-size: 8.5px; letter-spacing: .12em; }
  .spg-story .ice-chip--a { top: 4%; left: 7%; }
  .spg-story .ice-chip--b { top: auto; bottom: 17%; right: 7%; }    
  .spg-story .ice-chip--c { bottom: 3%; left: 7%; right: auto; }
  .spg-story .ice-hero__body { padding: 0 var(--gut) 76px; }
  .spg-story .ice-hero .ice-hero__title { font-size: 46px; margin-top: 12px; }
  .spg-story .ice-hero__title em { font-size: 19px; }
  .spg-story .ice-hero__lead { margin-top: 18px; font-size: 15px; }
  .spg-story .ice-hero__buy { margin-top: 24px; }
  .spg-story .ice-hero__cta { width: 100%; }
  .spg-story .ice-hero__cta .sps-btn { flex: 1 1 100%; }
  .spg-story .ice-scroll { display: none; }
  .spg-story .ice-step__card { padding: 22px 20px 20px; }
  .spg-story .ice-step__ghost { font-size: 92px; }
  .spg-story .ice-step h3 { font-size: 21px; }
  .spg-story .ice-step p { font-size: 14.5px; }
  .spg-story .ice-temp__num { font-size: 104px; }
  .spg-story .ice-scns { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-scn { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .spg-story .ice-scn span { margin-top: 0; flex: none; }
  .spg-story .ice-temp__badge { right: 0; bottom: 2%; }
  
  .spg-story .ice-tempsec.is-pin .ice-temp__pin { height: 260vh; }
  .spg-story .ice-tempsec.is-pin .ice-temp__scene { height: calc(100vh - var(--nav-h) - 60px); height: calc(100svh - var(--nav-h) - 60px); }
  .spg-story .ice-tempsec.is-pin .sps-h2 { font-size: 26px; }
  .spg-story .ice-tempsec.is-pin .ice-temp__num { font-size: 68px; }
  .spg-story .ice-tempsec.is-pin .ice-temp__view { width: min(44vw, 200px); width: min(44vw, 26svh); }
  .spg-story .ice-tempsec.is-pin .ice-scn { display: block; padding: 9px 8px 8px; text-align: center; }
  .spg-story .ice-tempsec.is-pin .ice-scn > b:first-child { display: none; }
  .spg-story .ice-tempsec.is-pin .ice-scn .ice-scn__short { display: block; font-size: 12.5px; }
  .spg-story .ice-tempsec.is-pin .ice-scn span { margin-top: 3px; font-size: 11px; }
  .spg-story .ice-tempsec.is-pin .ice-temp__note { min-height: 2.9em; font-size: 13.5px; line-height: 1.45; }
  .spg-story .ice-sauna { height: 280vh; }
  .spg-story .ice-sauna__stage { height: calc(100vh - var(--nav-h) - 60px); height: calc(100svh - var(--nav-h) - 60px); }
  .spg-story .ice-sauna__caps { top: 14px; bottom: auto; }               
  .spg-story .ice-sauna__cap { top: 0; bottom: auto; padding: 14px 16px 16px; transform: translateY(-16px); }
  .spg-story .ice-sauna__shade { background: linear-gradient(180deg, rgba(5,9,15,.75), transparent 35%, transparent 70%, rgba(5,9,15,.5)); }
  .spg-story .ice-sauna__cap b { font-size: 20px; }
  .spg-story .ice-bens { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-ben__n { font-size: 52px; }
  .spg-story .ice-ben__photo { aspect-ratio: 4 / 3; }
  .spg-story .ice-way__step { font-size: 14.5px; padding: 7px 0; }
  .spg-story .ice-scenes__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)) 14px; padding: 0 var(--gut); }
  .spg-story .ice-scenes__tabs::-webkit-scrollbar { display: none; }
  .spg-story .ice-scenes__tabs button { flex: none; padding: 11px 14px; font-size: 11px; }
  .spg-story .ice-scenes__view { aspect-ratio: 4 / 5; }
  .spg-story .ice-scene figcaption { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 16px 16px; }
  .spg-story .ice-launch { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-plug { width: 104px; }
  .spg-story .ice-fit__form { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-fit__msg .sps-btn { flex: 1 1 30%; padding: 0 10px; }
  .spg-story .ice-care__cols { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-dial { max-width: 300px; }
  .spg-story .ice-lads { grid-auto-columns: 74%; }
}
@media (prefers-reduced-motion: reduce) {
  .spg-story .ice-c, .spg-story .ice-in { opacity: 1; transform: none; filter: none; }
  .spg-story .sps-rv.ice-mask > * { clip-path: none; }
  .spg-story .sps-rv.ice-ben, .spg-story .sps-rv.ice-lad { translate: none; }
  .spg-story .ice-step__card { opacity: 1; transform: none; }
  .spg-story .ice-way__step { opacity: 1; transform: none; }
  .spg-story .ice-plug__fork { transform: none; }
}


.spg-story .ice-athsec { overflow: hidden; background: radial-gradient(80% 55% at 85% 0%, #10304a, var(--ice-0) 62%); }
.spg-story .ice-athsec > .sps-wrap, .spg-story .ice-ath-rail, .spg-story .ice-marq { position: relative; z-index: 2; }
.spg-story .ice-ath__sport { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }

.spg-story .ice-ath-hero__media img, .spg-story .ice-ath-hero__media video, .spg-story .ice-ath__media img, .spg-story .ice-ath__media video, .spg-story .ice-proof__media img, .spg-story .ice-proof__media video, .spg-story .ice-proof__inset img, .spg-story .ice-proof__inset video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spg-story .ice-ath-hero__media video, .spg-story .ice-ath__media video, .spg-story .ice-proof__media video, .spg-story .ice-proof__inset video { opacity: 0; transition: opacity .9s var(--ease); }
.spg-story .ice-ath-hero__media.is-play video, .spg-story .ice-ath__media.is-play video, .spg-story .ice-proof__media.is-play video, .spg-story .ice-proof__inset.is-play video { opacity: 1; }


.spg-story .ice-ath-hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.spg-story .ice-ath-hero__ghost { position: absolute; z-index: 0; right: 1%; top: 0; margin-top: -.62em; font-size: clamp(170px, 27vw, 420px); font-weight: 800; line-height: .9; letter-spacing: .02em; color: rgba(127,227,255,.08); pointer-events: none; user-select: none; white-space: nowrap; will-change: transform; }
.spg-story .ice-ath-hero__stage { position: relative; z-index: 1; width: min(100%, calc(74vh * .75)); justify-self: end; }
.spg-story .ice-ath-hero__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: #0b1622; box-shadow: 0 60px 120px -50px rgba(127,227,255,.45), 0 0 0 1px rgba(255,255,255,.1); }
.spg-story .ice-ath-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5,9,15,.55)), linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%) no-repeat; background-size: 100% 100%, 250% 100%; background-position: 0 0, 160% 0; transition: background-position 1.6s var(--ease); }
.spg-story .ice-ath-hero__stage.is-in .ice-ath-hero__media::after { background-position: 0 0, -60% 0; transition-delay: .5s; }
.spg-story .ice-ath-chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.spg-story .ice-ath-chips .ice-chip { background: linear-gradient(140deg, rgba(14,32,48,.72), rgba(8,18,28,.5)); }
.spg-story .ice-ath-chip--a { top: 7%; right: -16%; }
.spg-story .ice-ath-chip--b { bottom: 19%; left: -14%; }
.spg-story .ice-ath-chip--c { bottom: 4%; right: -10%; }
.spg-story .ice-ath-hero__card { z-index: 2; margin: 0; padding: clamp(26px, 3vw, 46px); color: #fff; }
.spg-story .ice-ath-hero .ice-ath-hero__name { margin-top: 12px; font-size: clamp(40px, 5.2vw, 76px); font-weight: 800; line-height: .95; letter-spacing: -.04em; color: #fff; text-shadow: 0 10px 50px rgba(127,227,255,.3); }
.spg-story .ice-ath-hero__card blockquote { margin: 22px 0 0; padding: 0; font-size: clamp(19px, 1.9vw, 27px); font-weight: 500; line-height: 1.4; color: #e8f3fb; }
.spg-story .ice-ath-hero__card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.spg-story .ice-ath-hero__card figcaption b { font-size: 16px; font-weight: 800; color: #fff; }
.spg-story .ice-ath-hero__card figcaption span { font-size: 13px; color: #9fb7ca; }


.spg-story .ice-marq { margin-top: clamp(56px, 7vw, 100px); padding: 16px 0; overflow: hidden; border-block: 1px solid rgba(255,255,255,.08); -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.spg-story .ice-marq__track { display: flex; width: max-content; animation: ice-marq 46s linear infinite paused; }
.spg-story .ice-athsec.is-run .ice-marq__track { animation-play-state: running; }
.spg-story .ice-athsec.is-run .ice-marq:hover .ice-marq__track { animation-play-state: paused; }
.spg-story .ice-marq__track > span { flex: none; display: flex; align-items: baseline; }
.spg-story .ice-marq b { margin-left: 30px; font-size: clamp(34px, 5vw, 76px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; color: rgba(255,255,255,.16); transition: color .3s; }
.spg-story .ice-marq b:hover { color: #fff; }
.spg-story .ice-marq i { position: relative; margin-left: 14px; padding-right: 30px; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: var(--cyan); }
.spg-story .ice-marq i::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
@keyframes ice-marq { to { transform: translateX(-50%); } }


.spg-story .ice-ath-rail { margin-top: clamp(36px, 4vw, 56px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.spg-story .ice-ath-rail::-webkit-scrollbar { display: none; }
.spg-story .ice-ath-rail.is-drag { cursor: grabbing; }
.spg-story .ice-ath-track { display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content; padding: 34px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 34px; }
.spg-story .ice-ath { flex: none; width: clamp(262px, 23vw, 330px); transition: opacity .9s var(--ease), transform .9s var(--ease), scale .6s var(--ease), filter .6s; }
.spg-story .ice-ath__in { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: #0b1622; box-shadow: 0 40px 70px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); transition: transform .25s ease-out, box-shadow .5s; }
.spg-story .ice-ath__in:hover, .spg-story .ice-ath.is-mid .ice-ath__in { box-shadow: 0 50px 90px -40px rgba(127,227,255,.5), 0 0 0 1px rgba(127,227,255,.45); }
.spg-story .ice-ath__media { position: absolute; inset: 0 -9%; transform: translate3d(calc(var(--o, 0) * -12%), 0, 0); }
.spg-story .ice-ath__media img { transform: scale(1.02); transition: transform 1.4s var(--ease); }
.spg-story .ice-ath__in:hover .ice-ath__media img { transform: scale(1.1); }
.spg-story .ice-ath__in::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,9,15,.35) 0%, transparent 22%, transparent 42%, rgba(5,9,15,.85) 100%); }
.spg-story .ice-ath__n { position: absolute; z-index: 2; left: 14px; top: 8px; font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: rgba(255,255,255,.3); pointer-events: none; }
.spg-story .ice-ath__plate { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; padding: 14px 15px 13px; color: #fff; transform: translate3d(calc(var(--o, 0) * 14px), 0, 0); }
.spg-story .ice-ath__plate h3 { margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.spg-story .ice-ath__plate small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: #a9bfd0; }
.spg-story .ice-ath__plate p { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; font-style: italic; line-height: 1.45; color: #eef6fc; }
.spg-story .ice-ath-ctl { display: flex; align-items: center; gap: 14px; }
.spg-story .ice-ath-ctl button { flex: none; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.24); cursor: pointer; transition: border-color .3s, background-color .3s, transform .4s var(--ease); }
.spg-story .ice-ath-ctl button:hover { border-color: var(--cyan); background: rgba(127,227,255,.14); transform: scale(1.08); }
.spg-story .ice-ath-ctl button[data-dir="-1"] svg { transform: scaleX(-1); }
.spg-story .ice-ath-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spg-story .ice-ath-bar { flex: 1; height: 2px; background: rgba(255,255,255,.12); }
.spg-story .ice-ath-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #fff); transform-origin: 0 50%; transform: scaleX(var(--p, .1)); }
.spg-story .ice-ath-hint { order: -1; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #7f93a6; white-space: nowrap; }


.spg-story .ice-ath-proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: clamp(48px, 6vw, 84px); }
.spg-story .ice-proof { display: flex; flex-direction: column; overflow: hidden; color: #c6d4e1; }
.spg-story .ice-proof__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.spg-story .ice-proof__media { position: absolute; inset: 0; }
.spg-story .ice-proof__media img { transition: transform 1.4s var(--ease); }
.spg-story .ice-proof:hover .ice-proof__media img { transform: scale(1.06); }
.spg-story .ice-proof__inset { position: absolute; z-index: 2; left: 14px; bottom: 14px; width: 27%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 24px 50px -16px rgba(0,0,0,.7), 0 0 30px rgba(127,227,255,.25); animation: ice-bob 7s ease-in-out infinite; animation-delay: -3s; }
.spg-story .ice-proof__live { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 6px 10px 6px 24px; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: #d8242b; border-radius: 2px; }
.spg-story .ice-proof__live::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; animation: ice-live 1.2s ease-in-out infinite; }
@keyframes ice-live { 50% { opacity: .2; } }
.spg-story .ice-proof__big { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: 12px 16px 11px; color: #fff; animation: ice-bob 7s ease-in-out infinite; }
.spg-story .ice-proof__big b { display: block; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.spg-story .ice-proof__big span { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #cfe0ee; }
.spg-story .ice-proof__body { padding: clamp(20px, 2.4vw, 30px); }
.spg-story .ice-proof h3 { margin-top: 8px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: #fff; }
.spg-story .ice-proof p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.spg-story .ice-proof blockquote { margin: 16px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--cyan); font-size: 16px; font-weight: 600; font-style: italic; color: #fff; }
.spg-story .ice-proof blockquote span { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; font-style: normal; color: #8fa8bc; }
.spg-story .ice-ath-note { margin-top: 26px; max-width: 86ch; font-size: 12.5px; line-height: 1.6; color: #7f93a6; }

@media (pointer: coarse) {
  .spg-story .ice-ath-rail { cursor: auto; scroll-snap-type: x mandatory; }
  .spg-story .ice-ath { scroll-snap-align: center; }
  .spg-story .ice-ath:not(.is-mid) { scale: .94; filter: brightness(.7); }
}
@media (max-width: 1024px) {
  .spg-story .ice-ath-hero { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-ath-hero__stage { width: min(100%, 520px); justify-self: center; }
  .spg-story .ice-ath-hero__card { margin-top: -90px; }
  .spg-story .ice-ath-hero__ghost { margin-top: -.5em; }
}
@media (max-width: 767px) {
  .spg-story .ice-ath-hero__stage { width: 100%; }
  .spg-story .ice-ath-chip--a { top: 4%; right: 4%; }
  .spg-story .ice-ath-chip--b { bottom: 27%; left: 4%; }
  .spg-story .ice-ath-chip--c { bottom: 15%; right: 4%; }
  .spg-story .ice-ath-hero__card { margin: -70px 10px 0; padding: 22px 20px 20px; }
  .spg-story .ice-ath-hero .ice-ath-hero__name { font-size: 40px; }
  .spg-story .ice-ath-hero__card blockquote { font-size: 18px; margin-top: 16px; }
  .spg-story .ice-ath { width: 76vw; }
  .spg-story .ice-ath-ctl button { width: 44px; height: 44px; }
  .spg-story .ice-ath-hint { display: none; }
  .spg-story .ice-ath-proofs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .spg-story .ice-marq__track { animation: none; }
  .spg-story .ice-ath__media, .spg-story .ice-ath__plate { transform: none; }
  .spg-story .ice-proof__big, .spg-story .ice-proof__live::before, .spg-story .ice-proof__inset { animation: none; }
}


.spg-story .ice-sws { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.spg-story .ice-sw { display: flex; flex-direction: column; gap: 8px; }
.spg-story .ice-sw__k { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #8fa8bc; }
.spg-story .ice-sw__opts { display: inline-flex; padding: 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.spg-story .ice-sw__opts > * { padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-align: center; }
.spg-story .ice-sw__opts > b { background: #fff; color: #0b1622; }
.spg-story .ice-sw .ice-sw__opts > a, .spg-story .ice-sw .ice-sw__opts > a:visited { color: #cfe0ee !important; text-decoration: none !important; transition: color .3s, background-color .3s; }
.spg-story .ice-sw .ice-sw__opts > a:hover, .spg-story .ice-sw .ice-sw__opts > a:focus-visible { color: #fff !important; background: rgba(127,227,255,.18); }


.spg-story .ice-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.spg-story .ice-split--flip .ice-split__media { order: 2; }
.spg-story .ice-split__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--ice-1); }
.spg-story .ice-split__media img { width: 100%; height: 124%; object-fit: cover; }
.spg-story .ice-split__body .sps-h2 { max-width: 16ch; }
.spg-story .ice-split__pts { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.spg-story .ice-split__pts li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0; }
.spg-story .ice-split__pts li > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-style: normal; font-weight: 800; color: #0f6f80; background: #fff; border: 1px solid var(--line); }
.spg-story .ice-split__pts .ice-ico { width: 24px; height: 24px; stroke-width: 1.7; }
.spg-story .ice-split__pts b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.spg-story .ice-split__pts span { font-size: 15px; line-height: 1.6; color: var(--muted); }
.spg-story .ice-split__quote { margin: 30px 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--aqua); font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; line-height: 1.45; color: var(--ink); max-width: 42ch; }
.spg-story .ice-split__quote span { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.spg-story .ice-split__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.spg-story .ice-dark .ice-split__pts li > i { color: var(--cyan); background: rgba(127,227,255,.08); border-color: rgba(127,227,255,.3); }
.spg-story .ice-dark .ice-split__pts .ice-ico { stroke: var(--cyan); }
.spg-story .ice-dark .ice-split__pts b, .spg-story .ice-dark .ice-split__quote { color: #fff; }
.spg-story .ice-dark .ice-split__pts span, .spg-story .ice-dark .ice-split__quote span { color: #9fb2c4; }
.spg-story .ice-path { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 6vw, 72px); counter-reset: icepath; }
.spg-story .ice-path__step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px 24px; border-radius: 4px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.spg-story .ice-path__step + .ice-path__step::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 1px; background: var(--line); }
.spg-story .ice-path__step small { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #1f8fa0; }
.spg-story .ice-path__step b { font-size: 19px; font-weight: 800; color: var(--ink); }
.spg-story .ice-path__step span { font-size: 14px; line-height: 1.55; color: var(--muted); }
.spg-story .ice-path__step.is-cur { border-color: var(--aqua); box-shadow: inset 0 0 0 1px var(--aqua); }
.spg-story a.ice-path__step.ice-path__step, .spg-story a.ice-path__step.ice-path__step:hover { color: var(--ink) !important; text-decoration: none !important; }
.spg-story a.ice-path__step:hover { transform: translateY(-4px); border-color: var(--aqua); box-shadow: 0 24px 40px -28px rgba(0,0,0,.35); }
.spg-story a.ice-path__step b::after { content: " →"; color: #1f8fa0; }
@media (max-width: 1024px) {
  .spg-story .ice-split { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-split--flip .ice-split__media { order: 0; }
  .spg-story .ice-split__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .spg-story .ice-sws { gap: 12px; margin-top: 20px; }
  .spg-story .ice-sw { flex: 1 1 100%; }
  .spg-story .ice-sw__opts { display: flex; }
  .spg-story .ice-sw__opts > * { flex: 1 1 0; padding: 10px 12px; font-size: 13px; }
  .spg-story .ice-split__media { aspect-ratio: 4 / 3; }
  .spg-story .ice-split__pts li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .spg-story .ice-split__pts li > i { width: 40px; height: 40px; }
  .spg-story .ice-split__pts b { font-size: 16px; }
  .spg-story .ice-split__pts span { font-size: 14.5px; }
  .spg-story .ice-split__cta .sps-btn { flex: 1 1 100%; }
  .spg-story .ice-path { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .spg-story .ice-path__step + .ice-path__step::before { left: 50%; top: -10px; width: 1px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .spg-story a.ice-path__step:hover { transform: none; }
}


.spg-story .ice-b2bsec { overflow-x: clip; }   
.spg-story .ice-b2b { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 28px; margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.spg-story .ice-b2b__tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--nav-h) + 20px); }
.spg-story .ice-b2b__tab { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 44px 13px 14px; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line); transition: background-color .35s, color .35s, border-color .35s, transform .35s var(--ease); cursor: pointer; }
.spg-story .ice-b2b__tab .ice-ico { flex: none; width: 26px; height: 26px; fill: none; stroke: #1f8fa0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.spg-story .ice-b2b__tab i { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .08em; color: #b7aea5; }
.spg-story .ice-b2b__tab:hover { border-color: var(--aqua); transform: translateX(4px); }
.spg-story .ice-b2b__tab.is-on { color: #fff; background: radial-gradient(120% 140% at 0% 0%, #17405e, #0b1622 70%); border-color: transparent; box-shadow: 0 20px 40px -24px rgba(10,40,60,.6); transform: translateX(8px); }
.spg-story .ice-b2b__tab.is-on .ice-ico { stroke: var(--cyan); }
.spg-story .ice-b2b__tab.is-on i { color: var(--cyan); }
.spg-story .ice-b2b__tab:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.spg-story .ice-b2b__view { min-width: 0; }
.spg-story .ice-b2b__panel { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.spg-story .ice-b2b__panel[hidden] { display: none; }
.spg-story .ice-b2b__panel.is-on { animation: ice-b2b-in .7s var(--ease); }
@keyframes ice-b2b-in { from { opacity: 0; transform: translateY(16px); } }
.spg-story .ice-b2b__photo { position: relative; margin: 0; aspect-ratio: 16 / 7; overflow: hidden; background: #0b1622; }
.spg-story .ice-b2b__photo img { width: 100%; height: 100%; object-fit: cover; }
.spg-story .ice-b2b__panel.is-on .ice-b2b__photo img { animation: ice-b2b-zoom 7s var(--ease) both; }
@keyframes ice-b2b-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.spg-story .ice-b2b__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,9,15,.55)); pointer-events: none; }
.spg-story .ice-b2b__photo figcaption { position: absolute; z-index: 1; left: 20px; bottom: 18px; max-width: calc(100% - 40px); padding: 12px 16px; color: #fff; }
.spg-story .ice-b2b__photo figcaption span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--cyan); }
.spg-story .ice-b2b__photo figcaption b { display: block; margin-top: 4px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.spg-story .ice-b2b__body { padding: clamp(20px, 2.6vw, 32px); }
.spg-story .ice-b2b__intro { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--text); max-width: 64ch; }
.spg-story .ice-b2b__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.spg-story .ice-b2b__col { padding: 16px 16px 8px; background: var(--sand); border-radius: 4px; border-top: 3px solid var(--aqua); }
.spg-story .ice-b2b__col--venue { border-top-color: #0b1622; }
.spg-story .ice-b2b__col--why { border-top-color: var(--warm); }
.spg-story .ice-b2b__col h4 { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #1f8fa0; }
.spg-story .ice-b2b__col--venue h4 { color: #0b1622; }
.spg-story .ice-b2b__col--why h4 { color: #c4621c; }
.spg-story .ice-b2b__col ul { margin: 0; padding: 0; list-style: none; }
.spg-story .ice-b2b__col li { position: relative; margin: 0; padding: 9px 0 9px 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--text); list-style: none; }
.spg-story .ice-b2b__col li:first-child { border-top: 0; }
.spg-story .ice-b2b__col li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.spg-story .ice-b2b__col--venue li::before { background: #0b1622; }
.spg-story .ice-b2b__col--why li::before { background: var(--warm); }
.spg-story .ice-b2b__panel.is-on .ice-b2b__col { animation: ice-b2b-in .7s var(--ease) both; }
.spg-story .ice-b2b__panel.is-on .ice-b2b__col--venue { animation-delay: .08s; }
.spg-story .ice-b2b__panel.is-on .ice-b2b__col--why { animation-delay: .16s; }
.spg-story .ice-b2b__cta { margin-top: 20px; }
.spg-story .ice-b2b__note { margin-top: 18px; font-size: 13px; color: var(--muted); }

.spg-story .ice-phonesec { overflow: hidden; background: radial-gradient(70% 70% at 90% 30%, #123352, var(--ice-0) 62%); }
.spg-story .ice-phone { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.spg-story .ice-phone__list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.spg-story .ice-phone__list li { margin: 0; list-style: none; }
.spg-story .ice-phone__item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; width: 100%; padding: 14px 16px 16px; text-align: left; color: #b9c8d6; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); overflow: hidden; cursor: pointer; transition: background-color .35s, border-color .35s, color .35s; }
.spg-story .ice-phone__item i { grid-row: 1 / 3; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .08em; color: rgba(127,227,255,.55); padding-top: 3px; }
.spg-story .ice-phone__item b { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; }
.spg-story .ice-phone__item span { font-size: 14px; line-height: 1.55; }
.spg-story .ice-phone__item em { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; }
.spg-story .ice-phone__item:hover { border-color: rgba(127,227,255,.5); }
.spg-story .ice-phone__item.is-on { background: rgba(127,227,255,.09); border-color: rgba(127,227,255,.45); }
.spg-story .ice-phone__item.is-on i { color: var(--cyan); }
.spg-story .ice-phone__item.is-on em { opacity: 1; }
.spg-story .ice-phone__item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.spg-story .ice-phone__stage { position: relative; }
.spg-story .ice-phone__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; border: 10px solid #10161e; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 90px -40px rgba(0,0,0,.9), 0 0 80px -20px rgba(127,227,255,.35); }
.spg-story .ice-phone__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.spg-story .ice-phone__clip.is-on { opacity: 1; }
.spg-story .ice-phone__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.spg-story .ice-phone__bar i { display: block; height: 100%; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.spg-story .ice-phone__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.spg-story .ice-phone__chips span { padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #dbe6ef; }
.spg-story .ice-phone__note { margin-top: 14px; font-size: 12.5px; color: #7f93a6; }

.spg-story .ice-ensec { --heat: 0.33; --ta: rgba(255,154,74,.7); overflow: hidden; background: radial-gradient(60% 70% at 85% 60%, rgba(255,154,74,calc(.08 + var(--heat) * .22)), transparent 70%), radial-gradient(70% 70% at 10% 20%, #10283c, var(--ice-0) 60%); }
.spg-story .ice-en { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.spg-story .ice-en__read { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; margin-top: 26px; }
.spg-story .ice-en__num { display: flex; align-items: baseline; gap: 12px; font-size: clamp(72px, 9vw, 128px); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.spg-story .ice-en__num small { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #9fb2c4; max-width: 9ch; line-height: 1.25; }
.spg-story .ice-en__water { padding-bottom: 8px; font-size: 14px; color: #9fb2c4; }
.spg-story .ice-en__water b { display: block; font-size: 22px; font-weight: 800; color: var(--cyan); }
.spg-story .ice-en__range input::-webkit-slider-runnable-track { background: linear-gradient(90deg, #6fdcff, #e9eef0 40%, #ffc28a 75%, #ff7a2e); }
.spg-story .ice-en__range input::-moz-range-track { background: linear-gradient(90deg, #6fdcff, #e9eef0 40%, #ffc28a 75%, #ff7a2e); }
.spg-story .ice-en__air { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 13px; color: #9fb2c4; }
.spg-story .ice-en__air b { font-size: 18px; font-weight: 800; color: #fff; }
.spg-story .ice-en__calc { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.spg-story .ice-en__calc label { position: relative; display: block; max-width: 320px; }
.spg-story .ice-en__calc span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #9fb7ca; }
.spg-story .ice-en__calc input { width: 100%; height: 52px; padding: 0 96px 0 16px; font: 700 20px/1 Montserrat, Arial, sans-serif; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; -moz-appearance: textfield; }
.spg-story .ice-en__calc input::-webkit-outer-spin-button, .spg-story .ice-en__calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spg-story .ice-en__calc input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(127,227,255,.18); }
.spg-story .ice-en__calc input::placeholder { color: rgba(255,255,255,.3); font-weight: 500; font-size: 15px; }
.spg-story .ice-en__calc i { position: absolute; right: 14px; bottom: 17px; font-style: normal; font-size: 12.5px; color: #9fb7ca; }
.spg-story .ice-en__cost { min-height: 1.6em; margin-top: 12px; font-size: 15px; color: #dbe6ef; }
.spg-story .ice-en__cost b { color: #fff; }
.spg-story .ice-en__chart { padding: clamp(18px, 2.4vw, 30px); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; }
.spg-story .ice-en__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; height: clamp(220px, 26vw, 320px); margin: 0; padding: 0; list-style: none; }
.spg-story .ice-en__bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; margin: 0; list-style: none; cursor: pointer; }
.spg-story .ice-en__bar b { font-size: 15px; font-weight: 800; color: #9fb2c4; transition: color .4s, transform .4s var(--ease); }
.spg-story .ice-en__bar i { display: block; width: 100%; max-width: 74px; height: calc(var(--h) * 82%); min-height: 6px; margin-top: 8px; border-radius: 4px 4px 0 0; background: linear-gradient(0deg, rgba(127,227,255,.25), rgba(127,227,255,.5)); transform-origin: 50% 100%; transition: background .4s, box-shadow .4s; }
.spg-story .ice-en__chart.sps-rv .ice-en__bar i { transform: scaleY(0); transition: transform 1.1s var(--ease), background .4s, box-shadow .4s; }
.spg-story .ice-en__chart.sps-rv.is-in .ice-en__bar i { transform: none; }
.spg-story .ice-en__bar span { margin-top: 10px; font-size: 13px; font-weight: 700; color: #9fb2c4; }
.spg-story .ice-en__bar.is-on b { color: #fff; transform: translateY(-4px); }
.spg-story .ice-en__bar.is-on i { background: linear-gradient(0deg, #6fdcff, #ffc28a 70%, #ff7a2e); box-shadow: 0 0 30px rgba(255,154,74,.35); }
.spg-story .ice-en__bar.is-on span { color: #fff; }
.spg-story .ice-en__src { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; line-height: 1.55; color: #7f93a6; }
.spg-story .ice-en__src span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--warm); }

@media (max-width: 1024px) {
  .spg-story .ice-b2b { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .spg-story .ice-b2b__tabs { position: relative; top: auto; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 6px; }
  .spg-story .ice-b2b__tabs::-webkit-scrollbar { display: none; }
  .spg-story .ice-b2b__tab { flex: none; width: auto; padding: 11px 14px; font-size: 13px; }
  .spg-story .ice-b2b__tab i { display: none; }
  .spg-story .ice-b2b__tab:hover, .spg-story .ice-b2b__tab.is-on { transform: none; }
  .spg-story .ice-b2b__photo { aspect-ratio: 16 / 9; }
  .spg-story .ice-b2b__cols { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-phone, .spg-story .ice-en { grid-template-columns: minmax(0, 1fr); }
  .spg-story .ice-phone__text { display: contents; }                     
  .spg-story .ice-phone .sps-head { order: 0; }
  .spg-story .ice-phone__stage { order: 1; }
  .spg-story .ice-phone__list { order: 2; margin-top: 0; }
  .spg-story .ice-b2b__cta .sps-btn { white-space: normal; text-align: center; }
}
@media (max-width: 767px) {
  .spg-story .ice-b2b__photo { aspect-ratio: 4 / 3; }
  .spg-story .ice-b2b__photo figcaption { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .spg-story .ice-b2b__body { padding: 18px 16px 20px; }
  .spg-story .ice-b2b__intro { font-size: 15px; }
  .spg-story .ice-b2b__cta .sps-btn { width: 100%; }
  .spg-story .ice-phone__screen { border-width: 6px; border-radius: 12px; }
  .spg-story .ice-phone__item { padding: 12px 14px 14px; }
  .spg-story .ice-phone__item b { font-size: 15px; }
  .spg-story .ice-phone__item span { font-size: 13.5px; }
  .spg-story .ice-en__num { font-size: 76px; }
  .spg-story .ice-en__bars { height: 200px; gap: 8px; }
  .spg-story .ice-en__bar b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .spg-story .ice-b2b__panel.is-on, .spg-story .ice-b2b__panel.is-on .ice-b2b__col, .spg-story .ice-b2b__panel.is-on .ice-b2b__photo img { animation: none; }
  .spg-story .ice-b2b__tab, .spg-story .ice-b2b__tab:hover, .spg-story .ice-b2b__tab.is-on { transform: none; }
  .spg-story .ice-en__chart.sps-rv .ice-en__bar i { transform: none; transition: none; }
  .spg-story .ice-phone__clip { transition: none; }
}

.spg-story .ice-athsec .ice-ath-rail:has(.ice-ath-track:empty), .spg-story .ice-athsec .ice-ath-rail:has(.ice-ath-track:empty) + .ice-ath-ctl { display: none; }

@media (min-width: 1025px) {
  .spg-story .ice-ath-track:not(:has(> .ice-ath:nth-child(4))) { margin-inline: auto; }
  .spg-story .ice-athsec .ice-ath-rail:not(:has(.ice-ath:nth-child(4))) + .ice-ath-ctl { visibility: hidden; }
}