/* The 11th Step — art direction taken from the campaign: bleached sky, linen, deep ink,
   butter scribble, and the UV camera's black and yellow. Base rules are the complete design
   without JavaScript or motion; .s11-motion only adds pinning, .s11-live only adds the lens. */
.s11-page{--s-sky:#a1c7eb;--s-sky2:#cfe6f8;--s-linen:#f1eadd;--s-ink:#0e2529;--s-butter:#f0e39c;--s-uv:#f6e48b;--s-lilac:#dfccf7;--s-wall:#e4dbd4;--s-gut:clamp(1.25rem,3.2vw,3.5rem);background:var(--s-linen)}
.s11-page .site-header{position:absolute;inset:0 0 auto;z-index:20;color:var(--s-ink);background:linear-gradient(180deg,#a1c7ebf2 0%,#a1c7ebbf 55%,#a1c7eb00 100%)}
.s11{--case-paper:var(--s-linen);--case-ink:var(--s-ink);--case-accent:var(--s-ink);--case-line:#0e252933;--case-muted:var(--s-ink);padding-top:0;overflow:clip}
.s11-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.s11-tag{font:700 clamp(1.7rem,3.1vw,3.2rem)/1 'DM Sans',Arial,sans-serif;letter-spacing:-.045em;-webkit-text-stroke:.01em currentColor;margin:0;color:inherit}
.s11-pin{position:relative}

/* —— Opening: the campaign's key visual, with the title handed over to live type —— */
.s11-hero{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh;min-height:100svh;background:linear-gradient(178deg,var(--s-sky) 0%,#b4d6f2 58%,var(--s-sky2) 100%);color:var(--s-ink)}
.s11-hero-photo{cursor:crosshair;position:relative;margin:0;height:100vh;height:100svh;aspect-ratio:.885;overflow:clip;background:var(--s-sky)}
.s11-hero-photo>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:0 50%}
.s11-hero-copy{container-type:inline-size;display:flex;flex-direction:column;min-width:0;padding:clamp(5rem,12svh,6.5rem) var(--s-gut) 1.25rem}
.s11-hero .case-topline{grid-template-columns:auto 1fr auto;gap:1.5rem}
.s11-hero .case-topline>span:nth-child(2){justify-self:start}
.s11-lockup{position:relative;margin-block:auto;padding-block:1rem}
.s11-title{position:relative;z-index:1;margin:0;font:700 min(40cqw,23svh)/.83 'DM Sans',Arial,sans-serif;letter-spacing:-.062em;-webkit-text-stroke:.014em currentColor;color:var(--s-ink)}
.s11-title span{display:block}
.s11-scribble{position:absolute;overflow:visible;pointer-events:none}
.s11-scribble path{fill:none;stroke:var(--s-butter);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.s11-lockup .s11-scribble{left:-6%;top:22%;width:96%;height:auto;z-index:0}
.s11-intro{position:relative;z-index:1;max-width:31rem;margin-top:auto}
.s11-intro .case-category{margin-bottom:.6rem;color:var(--s-ink);font-weight:700}
.s11-intro p{font-size:clamp(1rem,1.3vw,1.28rem);line-height:1.42;letter-spacing:-.022em;text-wrap:pretty}
/* A note about the viewfinder only exists where there is one */
.s11-intro p.s11-note{display:none;margin-top:.6rem;font-size:.78rem;line-height:1.3;letter-spacing:0}
.s11-hero .case-caption-line{margin-top:1.25rem;padding-top:.75rem;color:var(--s-ink)}
.s11-hero .case-caption-line>span:last-child{color:var(--s-ink)}

/* —— Context: the world the idea walks into —— */
.s11-context{background:linear-gradient(180deg,var(--s-sky2) 0%,var(--s-sky) 100%);color:var(--s-ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);gap:1rem var(--s-gut);padding:clamp(4rem,14svh,9rem) var(--s-gut) clamp(2rem,6svh,4rem)}
.s11-context p{max-width:24em;font:500 clamp(1.5rem,3.05vw,3.4rem)/1.12 'DM Sans',Arial,sans-serif;letter-spacing:-.035em;text-wrap:pretty}

/* —— Idea: ten steps done, one missing. Complete, it is UV yellow; with motion it starts on the sky and floods —— */
.s11-idea{background:var(--s-uv);color:var(--s-ink)}
.s11-idea .s11-stick{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);grid-template-rows:auto 1fr auto;gap:clamp(1rem,2.4svh,1.75rem) var(--s-gut);padding:clamp(1.5rem,5svh,3.25rem) var(--s-gut)}
.s11-idea .s11-stick>*{position:relative;z-index:1}
.s11-idea .s11-stick>.s11-flood{position:absolute;inset:0;z-index:0;background:var(--s-uv);clip-path:circle(0 at 100% 100%);visibility:hidden;pointer-events:none}
.s11-idea-lead{max-width:24em;font:500 clamp(1.5rem,3.05vw,3.4rem)/1.12 'DM Sans',Arial,sans-serif;letter-spacing:-.035em;text-wrap:pretty}
.s11-idea-q{grid-column:1/-1;align-self:end;font:700 clamp(2.5rem,min(7vw,12svh),10.5rem)/.98 'DM Sans',Arial,sans-serif;letter-spacing:-.052em;-webkit-text-stroke:.01em currentColor;max-width:17.5em;text-wrap:balance}
.s11-cells{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:clamp(4px,.55vw,9px);height:clamp(5rem,17svh,10rem);margin-top:clamp(.75rem,2svh,1.5rem)}
.s11-cells i{display:block;border-radius:clamp(4px,.45vw,8px);background:var(--s-ink)}
.s11-cells i:nth-child(11){background:transparent;box-shadow:inset 0 0 0 2px var(--s-ink)}
.s11-cells b{z-index:2;position:absolute;right:0;top:0;bottom:0;width:calc((100% - 10*clamp(4px,.55vw,9px))/11);display:grid;place-items:center;font:700 clamp(1.5rem,5vw,5rem)/1 'DM Sans',Arial,sans-serif;letter-spacing:-.06em;color:var(--s-ink)}
.s11-cells .s11-scribble{display:none}
/* The eleventh cell is a button once there is something for it to do */
.s11-go{position:absolute;right:0;top:0;bottom:0;z-index:3;width:max(44px,calc((100% - 10*clamp(4px,.55vw,9px))/11));padding:0;border:0;border-radius:clamp(4px,.45vw,8px);background:transparent;color:var(--s-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.s11-go:focus-visible{outline:3px solid var(--s-ink);outline-offset:3px}
.s11-go span{position:absolute;right:calc(100% + .6rem);top:50%;padding:.55rem .85rem;border-radius:99px;background:var(--s-uv);color:var(--s-ink);font:700 clamp(.82rem,1.05vw,1.05rem)/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.01em;white-space:nowrap;transform:translateY(-50%) translateX(.5rem);opacity:0;pointer-events:none;box-shadow:0 8px 22px -8px #0e252980;transition:opacity .25s,transform .35s cubic-bezier(.2,1.5,.4,1)}
.s11-go.is-ready span{opacity:1;transform:translateY(-50%);pointer-events:auto}
.s11-go.is-ready::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 #f6e48b;animation:s11-call 1.7s ease-out infinite}
.s11-go.is-ready:hover::before{animation-duration:.9s}
@keyframes s11-call{0%{box-shadow:0 0 0 0 #f6e48be6}80%,100%{box-shadow:0 0 0 clamp(8px,1.4vw,20px) #f6e48b00}}

/* —— Execution: the whole sentence in one breath, on the wall of the photograph that follows —— */
.s11-exec-note{background:var(--s-uv);color:var(--s-ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);gap:1rem var(--s-gut);padding:clamp(3rem,9svh,6rem) var(--s-gut) clamp(2rem,5svh,3.5rem)}
.s11-exec-a{max-width:22em;font:700 clamp(1.7rem,3.7vw,4.2rem)/1.2 'DM Sans',Arial,sans-serif;letter-spacing:-.045em;text-wrap:pretty;line-height:1.34}
.s11-k{padding:0 .2em .05em;margin-inline:-.04em;border-radius:.16em;background:linear-gradient(var(--s-ink),var(--s-ink)) no-repeat 0 0/100% 100%;color:var(--s-uv);white-space:nowrap;transition:background-size .5s cubic-bezier(.6,0,.2,1),color .2s .14s}
.s11-k.is-wait{background-size:0 100%;color:inherit}
.s11-k:nth-of-type(2){transition-delay:.14s,.28s}
.s11-k:nth-of-type(3){transition-delay:.28s,.42s}
.s11-k:nth-of-type(4){transition-delay:.42s,.56s}
.s11-exec-b{grid-column:2;max-width:32em;font:500 clamp(1.05rem,1.7vw,1.7rem)/1.3 'DM Sans',Arial,sans-serif;letter-spacing:-.025em;text-wrap:pretty}
.s11-camera{background:var(--s-uv)}

/* Plates */
.s11-board{background:var(--s-ink)}
.s11-board .s11-stick{position:relative}
.s11-plate{margin:0}
.s11-plate a{display:block;height:100%}
.s11 .s11-plate img{display:block;width:100%;height:100%;max-height:none;object-fit:fill}

/* —— App: white, weightless, UV 11. The torn strip sits where it sits on the board: at the top of the app —— */
.s11-app{isolation:isolate;position:relative;background:#fff;color:var(--s-ink);padding:0 var(--s-gut) clamp(2rem,6svh,4rem)}
.s11-paper{position:relative;z-index:2;margin:0 auto;width:fit-content;max-width:min(62rem,100%);text-wrap:balance;transform:translateY(-26%) rotate(-1.2deg);padding:clamp(1.3rem,2.6vw,2.6rem) clamp(1.5rem,3.4vw,3.6rem);background:#f6f2ea;color:#16181a;font:700 clamp(1.25rem,2.75vw,3rem)/1.14 Georgia,'Times New Roman',serif;letter-spacing:-.015em;filter:drop-shadow(0 18px 26px #0e252940);clip-path:polygon(0 4%,5% 1%,11% 4%,18% 1%,27% 3%,36% .6%,46% 3.6%,57% 1%,66% 3.4%,76% .8%,85% 3.4%,93% 1%,100% 4%,99.4% 24%,100% 48%,99.2% 72%,100% 96%,92% 99%,84% 96.4%,73% 99.4%,62% 96.6%,51% 99.2%,40% 96.4%,29% 99.4%,19% 96.8%,9% 99.4%,0 96%,.6% 72%,0 48%,.8% 24%)}
.s11-index{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .22em;margin-top:clamp(0rem,1svh,1rem);font:700 clamp(3.6rem,min(11.4vw,23svh),15rem)/.9 'DM Sans',Arial,sans-serif;letter-spacing:-.065em;-webkit-text-stroke:.012em currentColor}
.s11-index span{white-space:nowrap}
.s11-index strong{display:inline-block;padding:0 .05em .22em 0;margin-bottom:-.22em;white-space:nowrap;font-weight:inherit;background:linear-gradient(90deg,#2fb35a 0%,#e8d62a 34%,#f08a24 62%,#df2020 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke-color:transparent}
.s11-nb{white-space:nowrap}
.s11-app-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(.75rem,2svh,1.25rem);margin-top:clamp(1rem,3svh,2.25rem)}
.s11-app-side{display:contents}
.s11-card{order:1}
.s11-app-img{order:2;margin:0 calc(var(--s-gut)*-1);mix-blend-mode:multiply}
.s11-notifs{order:3}
/* The image no longer carries the messages. Stacked, the crop stops where its empty sky begins and gives the devices the width. */
.s11-app-img a{display:block;overflow:hidden;aspect-ratio:1092/673}
.s11 .s11-app-img img{display:block;width:128.2%;max-width:none;height:auto;margin:-17.4% 0 0 -14.1%}
/* The card and the notifications from the Samsung Health image, set as live type */
.s11-card{display:grid;gap:.42rem;padding:1.25rem 1.4rem 1.4rem;border-radius:1.5rem;background:var(--s-lilac);color:#14141a;font-size:clamp(1rem,1.25vw,1.25rem);line-height:1.25;box-shadow:0 22px 48px -18px #1a1a3a4d}
.s11-card strong{font-size:1.08em;letter-spacing:.01em;margin-bottom:.55rem}
.s11-card em{font-style:normal;font-weight:700;color:#c8102e}
.s11-notifs{display:grid;gap:inherit}
.s11-notif{position:relative;padding:1rem 1.25rem 1.1rem;border-radius:1.5rem;background:#fff;color:#14141a;font-size:clamp(1rem,1.15vw,1.3rem);line-height:1.22;letter-spacing:-.015em;box-shadow:0 0 0 1px #0e252914,0 22px 48px -18px #1a1a3a4d}
.s11-notif p{margin:0;padding-right:1.2rem;font-weight:500}
.s11-notif b{font-weight:700}
.s11-notif:nth-child(2){transition-delay:.08s}
.s11-notif:nth-child(3){transition-delay:.16s}
/* Tablets: the card and the messages share a row above the image */
@media(min-width:700px){
 .s11-app-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(.6rem,1svh,.9rem);align-items:start}
 .s11-card,.s11-notifs{order:0}
}
/* Wide screens: one composition. The messages sit where the image used to carry them, in the page's language, and the card lifts off the phone's own tile. */
@media(min-width:1024px) and (min-aspect-ratio:5/4){
 .s11-app-grid{display:block;position:relative;container-type:inline-size;max-width:1500px;margin-inline:auto;margin-top:clamp(.25rem,1svh,1rem)}
 .s11-app-side,.s11-notifs{display:contents}
 .s11-app-img{margin:0}
 .s11-app-img a{aspect-ratio:auto}
 .s11 .s11-app-img img{width:100%;margin:0}
 .s11-card,.s11-notif{position:absolute;z-index:2}
 .s11-card{left:31.2cqw;top:20.2cqw;width:18.95cqw;min-height:16cqw;gap:.32cqw;padding:1.3cqw 1.45cqw;border-radius:1.6cqw;font-size:clamp(.82rem,1.12cqw,1.1rem);box-shadow:0 2.2cqw 4cqw -1cqw #1a1a3a66;transform-origin:70% 50%}
 .s11-card strong{margin-bottom:.45cqw}
 .s11-notif{width:18.2cqw;padding:1.15cqw 1.3cqw 1.5cqw;border-radius:1.5cqw;font-size:clamp(.82rem,1.14cqw,1.12rem);line-height:1.24}
 .s11-notif p{padding-right:0}
 .s11-notif .s11-heart{right:.8cqw;bottom:.7cqw;width:1.15cqw;height:1.15cqw;min-width:14px;min-height:14px}
 .s11-notif:nth-child(1){left:64.4cqw;top:8cqw}
 .s11-notif:nth-child(2){left:27.4cqw;top:2.2cqw}
 .s11-notif:nth-child(3){left:11.6cqw;top:12.2cqw}
 .s11-app-grid .s11-card[data-state=wait]{transform:scale(.7)}
}

/* —— The bluff: the poster says it, the viewfinder checks —— */
.s11-bluff{background:var(--panel);color:#fff}
.s11-bluff .s11-stick{position:relative;display:flex;flex-direction:column}
.s11-panel{position:relative;isolation:isolate;padding:clamp(2rem,6svh,4rem) var(--s-gut) 1.5rem;background:var(--panel)}
.s11-quote{margin:0;font:700 clamp(2.5rem,min(6.3vw,12.5svh),11rem)/.96 'DM Sans',Arial,sans-serif;letter-spacing:-.05em;-webkit-text-stroke:.008em currentColor;text-wrap:balance;hanging-punctuation:first}
.s11-bluff[data-bluff] .s11-plate{order:2}
.s11-heart{position:absolute;right:1rem;bottom:1rem;width:1.05rem;height:1.05rem;fill:none;stroke:#1a8fe0;stroke-width:2.6}
.s11-steps{order:4;position:relative;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:clamp(3px,.45vw,8px);height:clamp(3rem,10svh,6.5rem);margin:0 var(--s-gut) 2rem}
.s11-steps i{display:block;border-radius:clamp(3px,.4vw,7px);background:#ffffff1f;box-shadow:inset 0 0 0 1.5px #ffffff59;transition:background .22s,box-shadow .22s}
.s11-steps i.on{background:#fff;box-shadow:none}
.s11-steps i:nth-child(11).on{background:var(--s-uv)}
.s11-steps b{position:absolute;right:0;top:0;bottom:0;width:calc((100% - 10*clamp(3px,.45vw,8px))/11);display:grid;place-items:center;font:700 clamp(1.3rem,3.6vw,3.6rem)/1 'DM Sans',Arial,sans-serif;letter-spacing:-.06em;color:var(--s-ink);opacity:0;transition:opacity .22s}
.is-found .s11-steps b{opacity:1}

.s11 .s11-facts{grid-template-columns:repeat(2,minmax(0,1fr));background:var(--s-sky);border:0;max-width:none;width:100%;margin:0;padding:clamp(2rem,6svh,4rem) var(--s-gut) clamp(3rem,8svh,5rem);color:var(--s-ink);font-size:clamp(1rem,1.3vw,1.3rem);line-height:1.3}
.s11 .s11-facts p,.s11 .s11-facts .original-context{color:var(--s-ink);font-size:inherit}
.s11 .s11-facts h2{color:var(--s-ink);font:700 clamp(1.2rem,1.9vw,2rem)/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.03em;margin-bottom:.75rem}
.s11 .case-next-art{background:var(--s-linen);border-top:0}
.s11 .case-next-art>div>span:first-child,.s11 .case-next-arrow{color:var(--s-ink)}
.s11 .case-next-art strong{font-family:'DM Sans',Arial,sans-serif;font-weight:700;letter-spacing:-.05em}

/* —— Lens, added by samsung.js —— */
.s11-uv{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;pointer-events:none;clip-path:inset(100%);z-index:1}
.s11-hero-photo .s11-uv{object-fit:cover;object-position:0 50%}
/* Bluff 2: the grey dissolves above the print's brand line, which stays as printed */
[data-bluff="2"] .s11-uv{-webkit-mask-image:linear-gradient(#000 71%,transparent 76.5%);mask-image:linear-gradient(#000 71%,transparent 76.5%)}
.s11-frame{position:absolute;left:0;top:0;z-index:5;border:1.5px solid #ffffffd9;border-radius:14px;pointer-events:none;transition:opacity .25s}
.s11-frame>u{position:absolute;width:15%;aspect-ratio:1;border:2px solid #fff;text-decoration:none}
.s11-frame>u:nth-of-type(1){left:8%;top:6.5%;border-right:0;border-bottom:0}
.s11-frame>u:nth-of-type(2){right:8%;top:6.5%;border-left:0;border-bottom:0}
.s11-frame>u:nth-of-type(3){left:8%;bottom:6.5%;border-right:0;border-top:0}
.s11-frame>u:nth-of-type(4){right:8%;bottom:6.5%;border-left:0;border-top:0}
.s11-bar{position:absolute;left:8%;right:8%;bottom:2.2%;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px;height:clamp(10px,3.4%,20px);padding:2px;background:#0000005c;border-radius:2px}
.s11-bar>s{display:block;background:#ffffff40;text-decoration:none}
.s11-bar>s.on{background:#fff}
.s11-bar>s:last-child.on{background:var(--s-uv)}
.s11-frame.is-coarse{pointer-events:auto;touch-action:pan-y;cursor:grab}
.s11-frame-poster{transition:none;border:0;border-radius:0}
.s11-frame-poster>u{width:11%;border-width:calc(2px*var(--k))}
.s11-frame-poster .s11-bar{top:5.2%;bottom:auto;left:20%;right:20%;padding:calc(2px*var(--k));gap:calc(2px*var(--k));height:calc(10px*var(--k))}
[data-bluff="2"] .s11-frame-poster>u:nth-of-type(3),[data-bluff="2"] .s11-frame-poster>u:nth-of-type(4){bottom:11.5%}
/* The third frame is on a face, not a poster: it keeps the rule all the way round */
[data-bluff="3"] .s11-frame-poster{border:calc(1.5px*var(--k)) solid #ffffffd9;border-radius:calc(8px*var(--k))}
.s11-scanline{position:absolute;left:0;top:0;z-index:4;height:calc(2px*var(--k,1));background:var(--s-uv);transform-origin:0 50%;pointer-events:none;box-shadow:0 0 0 .5px #0e252940}
.s11-ask{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.45rem .7rem;border-radius:.6rem;background:#0c0c0cb8;color:#fff;font-size:.78rem;line-height:1.2;white-space:nowrap}
.s11-shutter{position:absolute;left:50%;bottom:clamp(.9rem,3svh,1.75rem);z-index:7;width:62px;height:62px;margin-left:-31px;padding:0;border-radius:50%;background:#ffffff26;border:3px solid #fff;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(2px)}
.s11-shutter::after{content:"";width:44px;height:44px;border-radius:50%;background:#fff;transition:transform .16s}
.s11-shutter:hover::after{transform:scale(.9)}
.s11-shutter:active::after{transform:scale(.78)}
.s11-shutter:focus-visible,.s11-mode button:focus-visible{outline:3px solid var(--s-uv);outline-offset:3px}
.s11-mode{position:absolute;left:50%;top:clamp(4.6rem,10svh,5.75rem);z-index:7;transform:translateX(-50%);display:flex;padding:3px;border-radius:99px;background:#0c0c0cb8;font-size:.8rem;line-height:1}
.s11-mode button{min-width:60px;min-height:44px;padding:0 .9rem;border:0;border-radius:99px;background:transparent;color:#fff;cursor:pointer}
.s11-mode button[aria-pressed=true]{background:#ffffff33;color:var(--s-uv);font-weight:700}
.s11-hint{position:absolute;left:calc(50% + 44px);bottom:clamp(1.2rem,3.6svh,2.2rem);z-index:6;margin:0;padding:.5rem .8rem .55rem;border-radius:.75rem;background:#0c0c0cb8;color:#fff;font-size:.78rem;line-height:1.25;max-width:calc(50% - 56px)}
.s11-hint[hidden]{display:none}
.s11-hint span{display:block}
.s11-hint small{display:block;font-size:.75rem;opacity:.85}
.s11-quote{position:relative}
.s11-callout{left:0;top:calc(100% + .06em);width:min(100%,8.4em);height:.26em}
.s11-callout path{vector-effect:non-scaling-stroke;stroke-width:5px;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1)}
.s11-callout.is-drawn path{stroke-dashoffset:0}
.s11-notif[data-state],.s11-card[data-state]{transition:opacity .28s,transform .42s cubic-bezier(.2,1.5,.4,1)}
.s11-notif[data-state=wait],.s11-card[data-state=wait]{opacity:0!important;transform:translateY(14px) scale(.94)}
/* The disclosure stays beside every simulated view, not only in the opening */
.s11-sim{position:absolute;right:1rem;top:calc(var(--band,0px) + 1rem);z-index:8;padding:.3rem .55rem;border-radius:.5rem;background:#0c0c0cb8;color:#fff;font-size:.72rem;line-height:1.25;pointer-events:none}
.s11-bluff .s11-cue{top:calc(var(--band,0px) + 3.25rem)}
/* Stage-level cue and focus ring: the link is bigger than the screen while zoomed */
.s11-cue{position:absolute;right:1rem;top:calc(var(--band,0px) + 1rem);z-index:8;padding:.55rem .85rem;border-radius:.6rem;background:#0c0c0ce0;color:#fff;font-size:.875rem;line-height:1.2;opacity:0;pointer-events:none;transition:opacity .2s}
.s11-stick.is-hover .s11-cue,.s11-stick.is-focus .s11-cue{opacity:1}
.s11-stick.is-focus::after{content:"";position:absolute;inset:5px;z-index:8;border:3px solid var(--s-uv);border-radius:6px;box-shadow:0 0 0 3px #0e2529,inset 0 0 0 2px #0e2529;pointer-events:none}
.s11-motion .s11-plate a:focus-visible{outline:0}
.s11-motion .s11-plate [data-board-label]::after{display:none}
.s11-board .s11-cue{top:auto;bottom:1rem;background:var(--s-linen);color:var(--s-ink)}
@media(hover:none){.s11-board .s11-cue{opacity:1}}

/* —— Pinned choreography. Only applied when motion is welcome. —— */
.s11-motion .s11-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:clip}
.s11-motion .s11-plate{position:absolute;left:0;top:0;transform-origin:0 0}
.s11-motion .s11-idea{height:calc(100vh + 110vh);height:calc(100svh + 110svh)}
.s11-motion .s11-camera{height:calc(100vh + 80vh);height:calc(100svh + 80svh)}
.s11-motion .s11-board{height:calc(100vh + 70vh);height:calc(100svh + 70svh)}
.s11-bluff .s11-shutter{width:50px;height:50px;margin-left:-25px}
.s11-bluff .s11-shutter::after{width:34px;height:34px}
.s11-motion .s11-bluff .s11-stick{background:var(--panel)}
.s11-motion .s11-panel{position:absolute;z-index:3;top:0;bottom:0;width:38%;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(2rem,7svh,4.5rem)}
/* Three bluffs, three ways of calling them */
.s11-motion .s11-bluff[data-bluff="1"]{height:calc(100vh + 120vh);height:calc(100svh + 120svh)}
.s11-motion .s11-bluff[data-bluff="1"] .s11-panel{left:0}
.s11-motion .s11-bluff[data-bluff="2"]{height:calc(100vh + 95vh);height:calc(100svh + 95svh)}
.s11-motion .s11-bluff[data-bluff="2"] .s11-panel{left:0;right:0;bottom:auto;width:auto;padding:clamp(1rem,3.4svh,2.25rem) var(--s-gut) clamp(.9rem,3svh,2rem)}
.s11-motion .s11-bluff[data-bluff="2"] .s11-quote{font-size:clamp(2.2rem,min(6.55vw,11svh),10.5rem);text-wrap:nowrap}
.s11-motion .s11-bluff[data-bluff="3"]{height:calc(100vh + 100vh);height:calc(100svh + 100svh)}
.s11-motion .s11-bluff[data-bluff="3"] .s11-panel{left:0;width:46%;padding-right:12%;background:none}
.s11-motion .s11-bluff[data-bluff="3"] .s11-panel::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--scrim,1);background:linear-gradient(90deg,#1b1211e8 0%,#1b1211c4 56%,#1b121100 100%)}
.s11-motion .s11-steps{position:absolute;z-index:7;left:0;right:0;bottom:clamp(1rem,3svh,1.75rem);margin:0 var(--s-gut)}
.s11-motion .s11-steps i{background:#0e25294d}
.s11-motion .s11-steps i.on{background:#fff}
.s11-motion .s11-steps i:nth-child(11).on{background:var(--s-uv)}
.s11-motion .s11-title span{animation:s11-rise .9s cubic-bezier(.16,1,.3,1) both}
.s11-motion .s11-title span:nth-child(2){animation-delay:.07s}
.s11-motion .s11-title span:nth-child(3){animation-delay:.14s}
.s11-motion .s11-lockup .s11-scribble path{stroke-dasharray:1;stroke-dashoffset:1;animation:s11-draw 1.5s .35s cubic-bezier(.6,0,.2,1) forwards}
/* With the lens running, the ring waits for the eleventh cell */
.s11-motion.s11-live .s11-lockup .s11-scribble path{animation:none;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1)}
.s11-motion.s11-live .s11-lockup.is-scanned .s11-scribble path{stroke-dashoffset:0}
.s11-motion .s11-idea{background:var(--s-sky)}
.s11-motion .s11-cells i:nth-child(11){background:#ffffff4d;box-shadow:inset 0 0 0 2px var(--s-ink)}
.s11-motion .s11-cells b{opacity:0}
.s11-motion .s11-cells i{background:#0e25291c}
@keyframes s11-rise{from{transform:translateY(.32em);opacity:0}to{transform:none;opacity:1}}
@keyframes s11-draw{to{stroke-dashoffset:0}}

/* —— Portrait (phones, tablets upright). A landscape phone keeps the two-column opening. —— */
@media(max-aspect-ratio:5/4){
 .s11-hero{grid-template-columns:minmax(0,1fr);min-height:0}
 .s11-hero-photo{width:100%;height:auto;aspect-ratio:.8}
 .s11-hero-photo>img,.s11-hero-photo .s11-uv{object-position:7.4% 50%}
 .s11-hero-copy{padding:0 1.25rem 1.25rem}
 .s11-hero .case-topline{order:3;margin-top:1.25rem;padding-top:.75rem;border-top:1px solid var(--case-line)}
 .s11-lockup{order:0;margin-block:max(-.1em,-.5rem) .5rem;padding-block:0;pointer-events:none} /* the title overlaps the photo's edge: it must not take the camera bar's taps */
 .s11-title{font-size:min(25.6vw,16svh);line-height:.86;margin-top:max(-.2em,-1rem)}
 .s11-title span:nth-child(-n+2){display:inline}
 .s11-title span:nth-child(3){display:block}
 .s11-lockup .s11-scribble{left:-3%;top:-22%;width:104%}
 .s11-intro{order:1;margin-top:.5rem}
 .s11-hero .case-caption-line{order:2;margin-top:1rem}
 /* The photo's bottom edge is a camera bar, like the phones': mode, shutter, what it found */
 .s11-mode{top:auto;left:.6rem;bottom:1.9rem;transform:none;font-size:.72rem}
 .s11-mode button{min-width:0;min-height:44px;padding:0 .62rem}
 .s11-hero .s11-shutter{bottom:1.6rem;width:54px;height:54px;margin-left:-27px}
 .s11-hero .s11-shutter::after{width:38px;height:38px}
 .s11-hint{left:calc(50% + 36px);right:.6rem;bottom:1.9rem;min-height:44px;display:flex;align-items:center;padding:.3rem .55rem;font-size:.75rem;white-space:normal}
 .s11-hint small{display:none}
 .s11-js .s11-intro p.s11-note{display:block}
 .s11-bluff .s11-shutter{bottom:1rem;left:auto;right:1rem;margin:0}
 .s11-context,.s11-exec-note{grid-template-columns:minmax(0,1fr)}
 .s11-exec-b{grid-column:1}
 .s11-idea .s11-stick{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
 .s11-idea-lead{font-size:clamp(1.1rem,min(5.4vw,2.7svh),2.2rem);line-height:1.2}
 .s11-idea-q{font-size:clamp(2rem,min(11.6vw,6.2svh),5rem);line-height:1;margin-top:.5rem;align-self:center}
 .s11-cells b{font-size:clamp(1.05rem,6vw,3rem)}
 .s11-cells{margin-top:auto;height:clamp(4.5rem,13svh,8rem)}
 .s11-callout path{stroke-width:3.5px}
 .s11-index{font-size:clamp(3.2rem,20vw,9rem);gap:0 .3em;line-height:.88}
 .s11-index strong{display:block}
 .s11-notif{padding:1.2rem 1.4rem 1.4rem;font-size:1.05rem}
 .s11-quote{font-size:clamp(2.3rem,min(12.6vw,7svh),5rem)}
 .s11-motion .s11-panel,.s11-motion .s11-bluff[data-bluff="1"] .s11-panel{left:0;right:0;top:0;bottom:auto;width:100%;padding:clamp(1rem,3svh,1.75rem) 1.25rem .75rem}
 .s11-motion .s11-bluff[data-bluff="2"] .s11-quote{font-size:clamp(2.3rem,min(12.6vw,7svh),5rem);text-wrap:balance}
 .s11-motion .s11-bluff[data-bluff="3"] .s11-panel{width:100%;padding:clamp(1rem,3svh,1.75rem) 1.25rem 4rem}
 .s11-motion .s11-bluff[data-bluff="3"] .s11-panel::before{background:linear-gradient(180deg,#1b1211e8 0%,#1b1211c4 56%,#1b121100 100%)}
 .s11-motion .s11-steps{bottom:.75rem;height:3.25rem;margin:0 1rem;gap:3px}
 .s11-motion .s11-steps b{width:calc((100% - 30px)/11);font-size:1.15rem}
 .s11-motion .s11-camera{height:calc(100vh + 150vh);height:calc(100svh + 150svh)}
 .s11-motion .s11-board{height:calc(100vh + 190vh);height:calc(100svh + 190svh)}
 .s11 .s11-facts{grid-template-columns:1fr}
}
@media(max-aspect-ratio:5/4) and (min-width:700px){
 /* The cover carries its own lettering to the right of her: the crop stops short of it, and the title gets the room left */
 .s11-hero-photo{aspect-ratio:.885}
 .s11-hero-photo>img,.s11-hero-photo .s11-uv{object-position:0 50%}
 .s11-title{font-size:min(20vw,13svh)}
 /* The ring stays around the title: at this width its full size ran over the intro */
 .s11-lockup .s11-scribble{left:-2%;top:-12%;width:76%}
}
/* Landscape phones: short stages, so the display sizes follow the height */
@media(max-height:500px) and (min-aspect-ratio:5/4){
 .s11-hero-copy{padding-top:3.5rem;padding-bottom:.5rem}
 .s11-title{font-size:min(36cqw,25svh)}
 .s11-intro p{font-size:.82rem;line-height:1.25}
 .s11-intro .case-category{margin-bottom:.15rem;font-size:.75rem}
 .s11-hero .case-caption-line,.s11-hero .case-topline{font-size:.72rem}
 .s11-hero .case-caption-line{margin-top:.4rem;padding-top:.3rem}
 .s11-mode{top:3.4rem}
 .s11-mode button{min-height:36px}
 .s11-hint{display:none}
 .s11-shutter{width:44px;height:44px;margin-left:-22px}
 .s11-shutter::after{width:30px;height:30px}
 .s11-cells{height:clamp(2.5rem,14svh,4rem)}
 .s11-idea-q{font-size:min(6vw,11svh)}
 .s11-motion .s11-steps{height:2.5rem;bottom:.5rem}
 .s11-ask{font-size:.68rem}
}
/* Reduced motion: the design complete and still. Style.css already drops transitions and animations. */
@media(prefers-reduced-motion:reduce){
 .s11-title span,.s11-scribble path{animation:none}
 .s11-notif[data-state],.s11-card[data-state]{transition:none}
 .s11-go.is-ready::before{animation:none}
 .s11-callout{display:none}
}