/* Hallmark · component: six-service explorer · genre: editorial
 * Existing icy palette and Manrope retained. User-controlled state transitions.
 * Pre-emit critique: P4 H4 E4 S4 R5 V4 (source review, not browser QA). */
.ice-in-motion .format-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-xl)}
.ice-in-motion .explore-button{appearance:none;font:inherit;font-size:.875rem;font-weight:600;line-height:1.4;white-space:nowrap;min-height:48px;padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-control);background:transparent;color:var(--color-ink);cursor:pointer;transition:transform var(--dur-short) var(--ease-out)}
.ice-in-motion .explore-button[aria-selected=true],.ice-in-motion .explore-button[aria-pressed=true]{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink);text-decoration:underline;text-underline-offset:5px}
.ice-in-motion .explore-button:focus-visible,.ice-in-motion .format-panel:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.ice-in-motion .explore-button:active{transform:translateY(1px)}
.ice-in-motion .explore-button:disabled{opacity:.5;cursor:not-allowed}
@media(hover:hover){.ice-in-motion .explore-button:hover{background:var(--color-panel);color:var(--color-ink)}}
.ice-in-motion .format-panel[hidden]{display:none!important}
.ice-in-motion .engine-services.is-explorer{display:block}
.ice-in-motion .engine-services.is-explorer article{padding:0;border:0}
.ice-in-motion .format-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
.ice-in-motion .format-copy{padding-top:var(--space-lg)}
.ice-in-motion .format-copy h3{font-size:clamp(1.75rem,3vw,2.75rem);letter-spacing:-.025em;line-height:1.15;max-width:18ch;overflow-wrap:anywhere}
.ice-in-motion .format-copy .service-output{padding-top:var(--space-lg);border-top:1px solid var(--color-rule)}
.ice-in-motion .format-stage{border-radius:var(--radius-panel);background:var(--color-stage);color:var(--color-stage-ink);padding:var(--space-lg);min-width:0;display:flex;flex-direction:column;min-height:440px}
.ice-in-motion .format-panel > .format-stage{align-self:start;width:100%}
.ice-in-motion .format-stage .format-caption{font-size:.875rem;color:var(--color-stage-muted);margin:0 0 var(--space-lg);max-width:none}
.ice-in-motion .format-stage h4{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.025em;max-width:22ch;margin:0 0 var(--space-lg);overflow-wrap:anywhere}
.ice-in-motion .format-stage .format-explanation{font-size:1rem;line-height:1.7;color:var(--color-stage-muted);margin:0;min-height:6.8em;max-width:52ch}
.ice-in-motion .format-sequence{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:var(--space-lg) 0 var(--space-xl);padding:0;list-style:none}
.ice-in-motion .format-sequence li{font-size:.875rem;border-bottom:1px solid var(--color-stage-muted);padding-bottom:var(--space-xs);flex:1 1 130px;line-height:1.6}
.ice-in-motion .format-demo{display:grid;gap:var(--space-lg);grid-template-columns:minmax(0,1fr);align-items:start}
.ice-in-motion .format-sample{margin:0;min-width:0}
.ice-in-motion .sample-visual{position:relative;isolation:isolate;aspect-ratio:4/5;min-height:300px;background:var(--color-stage);color:var(--color-stage-ink);overflow:clip;display:flex;align-items:end}
.ice-in-motion .sample-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);z-index:-2;transform:scale(1.02);transition:transform var(--dur-panel) var(--ease-out)}
.ice-in-motion .sample-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--color-overlay),var(--color-overlay-soft));z-index:-1}
.ice-in-motion .sample-text{padding:var(--space-lg);width:100%;background:var(--color-overlay);color:var(--color-stage-ink)}
.ice-in-motion .sample-label{display:block;font-size:.875rem;line-height:1.5;margin-bottom:var(--space-sm)}
.ice-in-motion .format-stage .sample-headline{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;white-space:pre-line;color:var(--color-stage-ink);margin:0;overflow-wrap:anywhere}
.ice-in-motion .sample-note{font-size:.875rem;line-height:1.6;color:var(--color-stage-muted);margin-top:var(--space-sm)}
.ice-in-motion .format-stage .sample-disclaimer{font-size:.875rem;line-height:1.6;color:var(--color-stage-muted);margin:var(--space-lg) 0 0;max-width:none}
.ice-in-motion [data-kind=clipping][data-step='1'] .sample-image{transform:scale(1.25);object-position:50% 30%}
.ice-in-motion [data-kind=clipping][data-step='2'] .sample-image{transform:scale(1.5);object-position:50% 30%}
.ice-in-motion [data-kind=ugc][data-step='2'] .sample-headline,.ice-in-motion [data-kind=clipping][data-step='2'] .sample-headline{background:var(--color-paper);color:var(--color-ink);padding:var(--space-sm)}
.ice-in-motion [data-kind=ai] .sample-image,.ice-in-motion [data-kind=kol] .sample-image,.ice-in-motion [data-kind=memes] .sample-image{filter:none}
.ice-in-motion [data-kind=kol] .sample-visual{align-items:center}
.ice-in-motion [data-kind=streamers][data-step='2'] .sample-image{transform:scale(1.25)}
@media(min-width:48rem){.ice-in-motion .format-demo{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}
@media(min-width:70rem){.ice-in-motion .format-panel{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:var(--space-xl)}.ice-in-motion .format-stage{padding:var(--space-xl)}}
@media(max-width:40rem){.ice-in-motion .format-tabs{gap:var(--space-xs)}.ice-in-motion .format-tabs .explore-button{padding-inline:var(--space-md)}.ice-in-motion .format-stage{padding:var(--space-md)}.ice-in-motion .engine-intro-heading{gap:var(--space-lg)}.ice-in-motion .sample-text{padding:var(--space-md)}}
@media(prefers-reduced-motion:reduce){.ice-in-motion .explore-button{transition:none}.ice-in-motion .explore-button:active{transform:none}}
@media(prefers-reduced-motion:reduce){.ice-in-motion .sample-image{transition:none}}

/* Service progression follows native scroll; the complete stage must fit. */
.ice-in-motion .service-scroll-track{position:relative}
.ice-in-motion .service-scroll-hint{font-size:.875rem!important;color:var(--color-muted)!important;margin:0 0 var(--space-md)!important}
.ice-in-motion .service-scroll-track .format-tabs{background:var(--color-section-light);color:var(--color-ink);padding-block:var(--space-sm);margin-bottom:var(--space-lg)}
.ice-in-motion .format-tabs [aria-current=true]{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink);text-decoration:underline;text-underline-offset:5px}
.ice-in-motion .is-scroll-pinned .service-scroll-stage{position:sticky;top:24px}
/* Pinned panels dissolve into the stage grid: every copy block shares one cell, every media box another. */
.ice-in-motion .is-scroll-pinned .engine-services{display:contents}
.ice-in-motion .is-scroll-pinned .format-panel{display:contents;visibility:hidden;pointer-events:none}
.ice-in-motion .is-scroll-pinned .format-panel.is-current{visibility:visible;opacity:1;pointer-events:auto}
.ice-in-motion .is-scroll-pinned .format-stage{padding:var(--space-lg)}
.ice-in-motion .is-scroll-pinned .sample-visual{height:clamp(240px,32svh,340px);min-height:240px;aspect-ratio:auto}
.ice-in-motion .is-scroll-pinned .format-copy h3{font-size:clamp(1.75rem,2.4vw,2.25rem)}
.ice-in-motion .is-scroll-stacked .format-panel{margin-bottom:var(--space-2xl);padding-bottom:var(--space-2xl)!important;border-bottom:1px solid var(--color-rule)!important;scroll-margin-top:var(--service-anchor-offset,160px)}
.ice-in-motion .is-scroll-stacked .format-tabs{position:sticky;top:12px;z-index:8}
.ice-in-motion .ice-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.ice-in-motion .ice-product-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.ice-in-motion .service-scroll-track .format-panel{transition:none}}

/* Real supplied media: original colour and complete frames, with no overlays. */
.ice-in-motion .supplied-media-stage{margin:0;min-height:0;align-items:stretch}
.ice-in-motion .service-media-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);align-items:center}
.ice-in-motion .service-media{display:block;width:min(100%,29.25svh,292.5px);height:auto;aspect-ratio:9/16;object-fit:contain;background:#071a22;max-width:100%;border:0;justify-self:center}
.ice-in-motion .supplied-media-stage .format-description{min-width:0}
.ice-in-motion .supplied-media-stage .format-explanation{min-height:0}
.ice-in-motion .supplied-media-stage .format-sequence{display:block;margin-bottom:0}
.ice-in-motion .supplied-media-stage .format-sequence li{padding-block:var(--space-sm)}
.ice-in-motion video.service-media:focus-visible{outline:3px solid var(--color-stage-ink);outline-offset:4px}
.ice-in-motion .supplied-media-stage[data-media-type=image] .service-media-content{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.ice-in-motion .supplied-media-stage[data-media-type=image] .service-media{background:transparent;aspect-ratio:2392/1226;width:100%}
@media(max-width:700px){.ice-in-motion .service-media-content,.ice-in-motion .supplied-media-stage[data-media-type=image] .service-media-content{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.ice-in-motion .service-media{width:min(100%,320px)}.ice-in-motion .supplied-media-stage .format-description{padding-top:var(--space-sm)}}
/* Phones: one swipeable row of service tabs keeps the sticky bar short instead of two wrapped rows. */
@media(max-width:40rem){.ice-in-motion .is-scroll-stacked .format-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;top:0}.ice-in-motion .is-scroll-stacked .format-tabs::-webkit-scrollbar{display:none}.ice-in-motion .is-scroll-stacked .format-tabs .explore-button{flex:0 0 auto}}

/* Compact composition (pinned, wide screens): heading, intro, tabs and service copy fill the left
 * column; the media box spans the full height on the right. Media scale with the viewport so the
 * box stays full instead of floating a small video in empty space. */
.ice-in-motion .is-scroll-pinned .service-scroll-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1fr) auto;column-gap:var(--space-xl);align-items:start}
.ice-in-motion .is-scroll-pinned .engine-intro-heading{grid-column:1;grid-row:1;margin:0 0 var(--space-lg);gap:var(--space-md)}
.ice-in-motion .is-scroll-pinned .engine-intro-heading h2{font-size:clamp(36px,3.2vw,64px)}
.ice-in-motion .is-scroll-pinned .service-scroll-hint{grid-column:1;grid-row:3;margin:0 0 var(--space-sm)!important}
.ice-in-motion .is-scroll-pinned .format-tabs{grid-column:1;grid-row:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:0;margin-bottom:var(--space-lg)}
.ice-in-motion .is-scroll-pinned .format-tabs .explore-button{padding-inline:var(--space-sm)}
.ice-in-motion .is-scroll-pinned .format-copy{grid-column:1;grid-row:6;align-self:end;padding-top:0}
/* Type scales up on large screens so the columns stay full rather than gappy. */
.ice-in-motion .is-scroll-pinned .engine-intro-heading>p{font-size:clamp(17px,1vw,20px);max-width:36em}
.ice-in-motion .is-scroll-pinned .format-copy h3{font-size:clamp(1.75rem,2.2vw,2.75rem);max-width:none}
.ice-in-motion .is-scroll-pinned .format-copy p:not(.service-output){font-size:clamp(16px,.95vw,19px)}
.ice-in-motion .is-scroll-pinned .format-copy p{max-width:none}
.ice-in-motion .is-scroll-pinned .format-stage h4{font-size:clamp(1.375rem,1.9vw,2.5rem)}
.ice-in-motion .is-scroll-pinned .format-stage .format-explanation{font-size:clamp(1rem,.95vw,1.2rem)}
.ice-in-motion .is-scroll-pinned .format-sequence li{font-size:clamp(.875rem,.8vw,1rem)}
.ice-in-motion .is-scroll-pinned .format-stage{grid-column:2;grid-row:1/-1;align-self:stretch;container-type:inline-size}
.ice-in-motion .is-scroll-pinned .format-stage .format-caption{margin-bottom:var(--space-md)}
.ice-in-motion .is-scroll-pinned .service-media-content{flex:1;grid-template-columns:auto minmax(0,1fr);gap:var(--space-xl);align-items:center}
.ice-in-motion .is-scroll-pinned video.service-media{width:auto;max-width:none;height:clamp(300px,min(calc(100svh - 150px),72cqi),800px);justify-self:start}
.ice-in-motion .is-scroll-pinned .format-stage h4{max-width:none}
/* Landscape stream still: full width on top, brief and deliverables side by side beneath it. */
.ice-in-motion .is-scroll-pinned .supplied-media-stage[data-media-type=image] .service-media-content{grid-template-columns:minmax(0,1fr);align-items:start;align-content:center;gap:var(--space-lg)}
.ice-in-motion .is-scroll-pinned .supplied-media-stage[data-media-type=image] .service-media{width:100%;max-height:calc(100svh - 340px);object-fit:contain;object-position:left center}
.ice-in-motion .is-scroll-pinned .supplied-media-stage[data-media-type=image] .format-description{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-xl);align-items:start}
.ice-in-motion .is-scroll-pinned .supplied-media-stage[data-media-type=image] .format-description h4{grid-column:1;margin-bottom:var(--space-sm)}
.ice-in-motion .is-scroll-pinned .supplied-media-stage[data-media-type=image] .format-explanation{grid-column:1}
.ice-in-motion .is-scroll-pinned .supplied-media-stage[data-media-type=image] .format-sequence{grid-column:2;grid-row:1/span 2;margin-top:0}
.ice-in-motion .is-scroll-pinned .supplied-media-stage[data-media-type=image] .format-sequence li:first-child{padding-top:0}
/* KOL avatars grow with the box. */
.ice-in-motion .is-scroll-pinned .kol-cluster .service-media-content{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.ice-in-motion .is-scroll-pinned .kol-cloud{max-width:min(100%,480px);padding-block:0}
.ice-in-motion .is-scroll-pinned .kol-avatar{max-width:150px}
/* Shorter laptop screens: trim spacing so the compact composition still fits the viewport. */
/* Service-page links stay a quiet footnote under the output line in every layout; short viewports tighten them below so the explorer still pins. */
.ice-in-motion .format-copy p.service-links,.ice-in-motion .is-scroll-pinned .format-copy p.service-links{font-size:14px;line-height:1.6;margin-top:var(--space-xs)}
@media(max-height:860px){.ice-in-motion .is-scroll-pinned .engine-intro-heading{margin-bottom:var(--space-sm);gap:var(--space-xs)}.ice-in-motion .is-scroll-pinned .engine-intro-heading>p{font-size:16px}.ice-in-motion .is-scroll-pinned .service-scroll-hint{margin-bottom:var(--space-xs)!important}.ice-in-motion .is-scroll-pinned .format-tabs{margin-bottom:var(--space-md)}.ice-in-motion .is-scroll-pinned .format-tabs .explore-button{min-height:40px;padding-block:var(--space-xs)}.ice-in-motion .is-scroll-pinned .format-copy h3{margin-bottom:8px}.ice-in-motion .is-scroll-pinned .format-copy .service-output{margin-top:8px;padding-top:8px}.ice-in-motion .is-scroll-pinned .format-copy p.service-links{font-size:13px;line-height:1.3;margin-top:2px}}
/* Stacked fallback on tablets and short desktops: the video hugs the box edge instead of floating centred. */
@media(min-width:701px){.ice-in-motion .is-scroll-stacked .supplied-media-stage[data-media-type=video] .service-media-content{grid-template-columns:auto minmax(0,1fr)}}