/* Studio — page-specific sections (kit styles in service-page.css). Classes are prefixed sv-studio-. */

/* ---- Hero: seven pieces of work around the title, gathered by the scroll into one film ---- */
.sv-studio-hero{padding:0;text-align:center}
.sv-studio-track{position:relative;height:225svh}
.sv-studio-frame{position:sticky;top:0;height:100svh;overflow:hidden}
.sv-studio-open{position:absolute;inset:0}
.sv-studio-intro{position:absolute;left:50%;top:50%;z-index:2;width:min(1000px,calc(100% - 40px));translate:-50% -50%;will-change:transform,opacity}
/* The title is a full sentence: smaller than the kit's hero size and balanced, so it keeps to two lines on desktop
   and the pieces around it stay clear of it. */
.sv-studio-hero h1{font-size:clamp(40px,4.3vw,62px);line-height:1.04;text-wrap:balance;max-width:960px;margin:20px auto 0}
.sv-studio-lead{font:17px/1.55 var(--display);color:#4a4a4a;max-width:600px;margin:24px auto 28px}

.sv-studio-tiles{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:1;contain:layout style}
.sv-studio-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--ar);transform:rotate(calc(var(--rot)*1deg));will-change:transform}
.sv-studio-tile-media{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#ececec;box-shadow:0 24px 48px -28px rgba(13,13,13,.45)}
.sv-studio-tile-media :is(img,video){width:100%;height:100%;object-fit:cover;display:block}
.sv-studio-tile-media.is-browser{background:#0d0d0d;display:flex;flex-direction:column}
.sv-studio-tile-media.is-browser img{flex:1;min-height:0;object-position:top}
.sv-studio-chrome{display:flex;gap:4px;align-items:center;height:14px;padding:0 7px;background:#202020;flex:none}
.sv-studio-chrome i{width:4px;height:4px;border-radius:50%;background:#555}
.sv-studio-tile-name{position:absolute;left:0;top:100%;margin-top:10px;font:12px/1.2 var(--sans);color:var(--muted);white-space:nowrap;opacity:calc(1 - var(--e,0)*5)}
/* Places around the title (desktop): x, y, width, proportion, tilt, pointer depth. */
.sv-studio-t1{--x:4%;--y:30%;--w:clamp(120px,11vw,190px);--ar:4/5;--rot:-3;--depth:1.2}
.sv-studio-t2{--x:64%;--y:9%;--w:clamp(170px,16vw,280px);--ar:1800/1012;--rot:2;--depth:.7}
.sv-studio-t3{--x:7%;--y:70%;--w:clamp(180px,18vw,300px);--ar:16/9;--rot:2.5;--depth:.9}
.sv-studio-t4{--x:82%;--y:66%;--w:clamp(110px,10vw,170px);--ar:1/1;--rot:-2.5;--depth:1.4}
.sv-studio-t5{--x:18%;--y:10%;--w:clamp(170px,15vw,260px);--ar:2/1;--rot:-2;--depth:.8}
.sv-studio-t6{--x:59%;--y:74%;--w:clamp(170px,16vw,270px);--ar:16/10;--rot:-1.5;--depth:1}
.sv-studio-t7{--x:87%;--y:24%;--w:clamp(84px,8vw,130px);--ar:9/16;--rot:3;--depth:1.3}

/* 3D cards (Three.js, see createCards in studio.js): the canvas takes over from the tiles with a cross-fade;
   the discipline names stay HTML. The tiles keep giving the layout (measured while hidden). */
.sv-studio-gl{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.sv-studio-labels{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.sv-studio-labels span{position:absolute;left:0;top:0;font:12px/1.2 var(--sans);color:var(--muted);white-space:nowrap;will-change:transform}
.is-gl .sv-studio-gl,.is-gl .sv-studio-labels{opacity:1}
.is-gl .sv-studio-tiles{opacity:0;transition:opacity .6s var(--ease)}
.is-gl-on .sv-studio-tiles{display:none}
.is-gl-on.is-measuring .sv-studio-tiles{display:block;visibility:hidden}

/* The film, where the pieces meet; its index of disciplines below. */
.sv-studio-reel{--reel-w:min(1180px,100%,calc((100svh - 250px)*16/9));position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:92px var(--sv-gutter) 34px;pointer-events:none}
.sv-studio-hero.is-reel .sv-studio-reel,.is-reel .sv-studio-reel{pointer-events:auto}
.sv-studio-screen{position:relative;width:var(--reel-w);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d0d0d;opacity:0;will-change:clip-path}
.sv-studio-film{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%}
.sv-studio-onscreen{position:absolute;left:16px;bottom:16px;display:inline-flex;gap:10px;align-items:center;padding:9px 13px;border-radius:999px;background:rgba(13,13,13,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:13px/1 var(--sans);opacity:var(--tail,0);transition:background .3s}
.sv-studio-onscreen:hover{background:rgba(13,13,13,.75)}
.sv-studio-onscreen i{font-style:normal;transition:rotate .4s var(--ease)}
.sv-studio-onscreen:hover i{rotate:45deg}
.sv-studio-index{width:var(--reel-w);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;list-style:none;margin:20px 0 0;padding:0;opacity:var(--tail,0);translate:0 calc((1 - var(--tail,0))*14px)}
.sv-studio-index a{display:grid;grid-template-columns:auto 1fr;gap:10px 8px;align-items:baseline;color:var(--ink);font:13px/1.25 var(--sans);text-align:left;opacity:.36;transition:opacity .45s var(--ease)}
.sv-studio-index li.is-on a,.sv-studio-index a:hover{opacity:1}
.sv-studio-bar{grid-column:1/-1;display:block;height:2px;background:rgba(13,13,13,.13);overflow:hidden}
.sv-studio-bar b{display:block;height:100%;background:#0d0d0d;transform:scaleX(0);transform-origin:left}
.sv-studio-n{font-size:11px;color:var(--muted)}

/* Reduced motion: no pin; the film sits under the title with its controls. */
.sv-studio-track.is-static{height:auto}
.is-static .sv-studio-frame{position:relative;height:auto;overflow:hidden}
.is-static .sv-studio-open{position:relative;height:100svh;min-height:640px}
.is-static .sv-studio-reel{position:relative;inset:auto;padding:20px var(--sv-gutter) 70px;pointer-events:auto}
.is-static .sv-studio-screen,.is-static .sv-studio-index,.is-static .sv-studio-onscreen{opacity:1;translate:none}
.is-static .sv-studio-onscreen{top:16px;bottom:auto}

/* ---- Who we are ---- */
.sv-studio-who .sv-statement{margin-bottom:70px}

.sv-studio-who .sv-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 20px;align-items:center}
.sv-studio-who .sv-logos img{height:calc(26px*var(--logo-scale,1));max-width:180px}

/* Service pill (links to the service page). */
.sv-studio-pill{display:inline-block;font:12px/1 var(--sans);color:inherit;border:1px solid color-mix(in srgb,currentColor 34%,transparent);border-radius:5px;padding:6px 8px;white-space:nowrap;transition:border-color .3s,background .3s}
.sv-studio-pill:hover{border-color:currentColor}

/* ---- Where the pieces meet ---- */
.sv-studio-cases{padding:40px var(--sv-pad) 170px}
.sv-studio-cases-head,.sv-studio-services-head,.sv-studio-inside-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:end;margin-bottom:96px}
:is(.sv-studio-cases-head,.sv-studio-services-head,.sv-studio-inside-head) .sv-label{grid-column:1/-1}
:is(.sv-studio-cases-head,.sv-studio-services-head,.sv-studio-inside-head) h2{grid-column:1/8;font-size:clamp(40px,4.6vw,70px);line-height:1;margin-top:18px}
:is(.sv-studio-cases-head,.sv-studio-services-head,.sv-studio-inside-head)>p:last-child{grid-column:9/13;font:16px/1.6 var(--display);color:var(--sv-soft);margin:0}
.sv-studio-case+.sv-studio-case{margin-top:120px}
.sv-studio-case-head{display:grid;grid-template-columns:52px auto minmax(0,1fr) auto;align-items:center;gap:14px 18px;padding-top:22px;border-top:1px solid var(--sv-line);margin-bottom:24px}
.sv-studio-case-n{font:13px/1 var(--sans);color:var(--sv-muted)}
.sv-studio-case-head h3{font-size:clamp(28px,2.6vw,40px);line-height:1}
.sv-studio-case-head h3 a{color:inherit}
.sv-studio-case-kind{font:14px/1.3 var(--sans);color:var(--sv-muted);margin:0}
.sv-studio-case-kind i{font-style:normal;margin:0 .3em;opacity:.6}
.sv-studio-uses{grid-column:2/4;display:flex;flex-wrap:wrap;gap:6px;margin:0}
.sv-studio-case-head .sv-link{grid-column:4;grid-row:1}
.sv-studio-row{display:flex;gap:16px;align-items:flex-start}
.sv-studio-piece{flex:var(--ar) 1 0;min-width:0;margin:0}
.sv-studio-piece-media{aspect-ratio:var(--ar);border-radius:10px;overflow:hidden;background:color-mix(in srgb,currentColor 7%,transparent)}
.sv-studio-piece-media :is(img,video){width:100%;height:100%;object-fit:cover;display:block}
.sv-studio-piece.is-phone .sv-studio-piece-media{border-radius:18px}
.sv-studio-piece.is-phone img{object-position:top}
.sv-studio-piece figcaption{display:flex;align-items:center;gap:9px;font:13px/1.3 var(--sans);color:var(--sv-soft);margin-top:13px}
.sv-studio-piece figcaption i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---- In our clients' words (light) ---- */
.sv-studio-voices{padding:170px var(--sv-pad) 110px}
.sv-studio-voices-head h2{font-size:clamp(40px,4.6vw,70px);line-height:1;margin-top:18px}
.sv-studio-featured{margin:80px 0 0;max-width:1180px}
.sv-studio-featured p{font:400 clamp(36px,4.6vw,70px)/1.06 var(--serif);letter-spacing:-.03em}
.sv-studio-voices footer{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:26px;font:14px/1.3 var(--sans)}
/* Three to a row; when the last row would have two, they share it (is-pair) instead of leaving an empty column. */
.sv-studio-quotes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:72px 20px;margin-top:120px}
.sv-studio-quotes blockquote{grid-column:span 2;margin:0;padding-top:24px;border-top:1px solid var(--sv-line)}
.sv-studio-quotes blockquote.is-pair{grid-column:span 3}
.sv-studio-quotes blockquote:nth-child(3n+2){margin-top:56px}
.sv-studio-quotes p{font:400 clamp(22px,1.8vw,28px)/1.25 var(--serif);letter-spacing:-.015em;padding-right:min(3vw,40px)}
.sv-studio-quotes footer{display:grid;gap:12px;margin-top:22px;font-size:13px}
.sv-studio-quote-links{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.sv-studio-case-link{font:13px/1 var(--sans);color:var(--sv-muted);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sv-studio-case-link:hover{color:var(--sv-fg)}

/* ---- How we work (light) ---- */
.sv-studio-how{padding:110px var(--sv-pad) 160px}
.sv-studio-inline{font-size:clamp(38px,5.2vw,80px);line-height:1.1;margin-top:26px;max-width:1320px}
.sv-studio-chip{display:inline-block;position:relative;vertical-align:baseline;width:1.85em;height:.82em;margin:0 .06em 0 .2em;border-radius:999px;overflow:hidden;translate:0 .08em;background:color-mix(in srgb,currentColor 8%,transparent)}
.sv-studio-chip :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sv-studio-values{list-style:none;margin:110px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sv-studio-values li{padding-top:22px;border-top:1px solid var(--sv-line)}
.sv-studio-values span{font:13px/1 var(--sans);color:var(--sv-muted)}
.sv-studio-values h3{font-size:clamp(26px,2.3vw,34px);line-height:1.08;margin:46px 0 14px}
.sv-studio-values p{font:15px/1.6 var(--display);color:var(--sv-soft);max-width:360px}
.sv-studio-process{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:16px 20px;align-items:center;margin-top:110px;padding:24px 0;border-top:1px solid var(--sv-line);border-bottom:1px solid var(--sv-line)}
.sv-studio-process ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:10px}
.sv-studio-process li{display:flex;align-items:center;font:15px/1.2 var(--sans);white-space:nowrap}
.sv-studio-process li span{font-size:11px;color:var(--sv-muted);margin-right:8px}
.sv-studio-process li:not(:last-child):after{content:"";width:clamp(16px,2.6vw,44px);height:1px;background:color-mix(in srgb,currentColor 30%,transparent);margin:0 14px}

/* ---- What we do: the seven services as a chain, then Labs ---- */
.sv-studio-services{padding:170px var(--sv-pad) 110px}
.sv-studio-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:60px 20px}
.sv-studio-chain a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;color:inherit}
.sv-studio-chain-step{grid-column:1/-1;display:flex;align-items:center;gap:12px;font:12px/1 var(--sans);color:var(--sv-muted);margin-bottom:10px}
.sv-studio-chain-step i{flex:1;height:1px;background:var(--sv-line);margin-right:-20px}
.sv-studio-chain li:nth-child(4n) .sv-studio-chain-step i,.sv-studio-chain li:last-child .sv-studio-chain-step i{margin-right:0}
.sv-studio-chain-media,.sv-studio-labs-card{grid-column:1/-1;display:block;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent);margin-bottom:12px}
.sv-studio-chain-media img{width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.1s var(--ease)}
.sv-studio-chain a:hover .sv-studio-chain-media img{scale:1.05}
.sv-studio-chain-name{font:400 24px/1.1 var(--serif);letter-spacing:-.02em}
.sv-studio-chain-note{grid-column:1;font:14px/1.4 var(--display);color:var(--sv-muted)}
.sv-studio-chain b{grid-column:2;grid-row:3;font-weight:400;transition:rotate .5s var(--ease)}
.sv-studio-chain a:hover b{rotate:45deg}
.sv-studio-labs-card{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:24px;background:#ececec radial-gradient(circle,rgba(13,13,13,.16) 1px,transparent 1.3px) 0 0/18px 18px;color:#0d0d0d;transition:background-color .4s}
.sv-studio-labs a:hover .sv-studio-labs-card{background-color:#f4f4f4}
.sv-studio-labs-name{font:400 clamp(30px,2.8vw,44px)/1 var(--serif);letter-spacing:-.03em}
.sv-studio-labs-card .tag{color:#0d0d0d}

/* ---- Inside Product Hangar: frames sized for the material still to come ---- */
.sv-studio-inside{padding:130px var(--sv-pad) 130px}
.sv-studio-inside-head>p:last-child{margin:0;max-width:none}
.sv-studio-slots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:60px 20px;align-items:start}
.sv-studio-slot.is-team{grid-column:1/9}
.sv-studio-slot.is-work{grid-column:9/13}
.sv-studio-slot.is-space{grid-column:1/6}
.sv-studio-slot.is-film{grid-column:6/13}
.sv-studio-slot .sv-needed-frame{position:relative;overflow:hidden}
.sv-studio-slot .sv-needed-frame em{position:absolute;left:16px;top:15px;z-index:1;font:11px/1.3 var(--sans);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--sv-muted);text-align:left}
.sv-studio-slot .sv-needed-frame em i{font-style:normal;opacity:.6;margin:0 .25em}
.sv-studio-slot .sv-needed-frame span{position:relative;z-index:1;font:400 clamp(22px,2vw,30px)/1.1 var(--serif);letter-spacing:-.02em;text-transform:none;color:var(--sv-fg)}
/* A faint PH glow in each empty frame, placed differently in each. */
.sv-studio-slot-glow{position:absolute;width:85%;aspect-ratio:1;background:url('/explore/services/ph-gradient.webp') center/contain no-repeat;opacity:.34;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);pointer-events:none}
.is-team .sv-studio-slot-glow{right:-22%;bottom:-38%}
.is-work .sv-studio-slot-glow{left:-30%;top:-18%;width:120%}
.is-space .sv-studio-slot-glow{left:-25%;bottom:-30%;width:100%}
.sv-studio-slot.is-film .sv-needed-frame{background:#000;border-style:solid;border-color:color-mix(in srgb,currentColor 18%,transparent)}
.sv-studio-slot.is-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.sv-studio-slot.is-film .sv-needed-frame span{align-self:end;margin-bottom:22px;color:#fff}
.sv-studio-slot.is-film .sv-needed-frame em{color:rgba(255,255,255,.6)}

@media(max-width:1100px){
 .sv-studio-chain{grid-template-columns:repeat(3,minmax(0,1fr))}
 .sv-studio-chain li:nth-child(4n) .sv-studio-chain-step i{margin-right:-20px}
 .sv-studio-chain li:nth-child(3n) .sv-studio-chain-step i{margin-right:0}
 .sv-studio-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sv-studio-quotes blockquote,.sv-studio-quotes blockquote.is-pair{grid-column:auto}
 .sv-studio-quotes blockquote:nth-child(2n+1):last-child{grid-column:1/-1}
 .sv-studio-quotes blockquote:nth-child(3n+2){margin-top:0}
 .sv-studio-quotes blockquote:nth-child(2n){margin-top:56px}
 .sv-studio-process{grid-template-columns:1fr auto}
 .sv-studio-process ol{grid-column:1/-1;grid-row:2}
}

@media(max-width:760px){
 /* Hero: the pieces sit above and below the title. */
 .sv-studio-track{height:210svh}
 .sv-studio-hero h1{font-size:34px;line-height:1.06}
 .sv-studio-lead{font-size:15px;margin:18px auto 22px;max-width:340px}
 .sv-studio-tile-name{display:none}
 .sv-studio-labels{display:none}
 .sv-studio-tile-media{border-radius:8px}
 .sv-studio-intro{top:53%}
 /* Larger pieces, the outer ones running off the edges a little. */
 .sv-studio-t1{--x:2%;--y:10%;--w:22vw}
 .sv-studio-t5{--x:25%;--y:13%;--w:36vw}
 .sv-studio-t7{--x:63%;--y:9.5%;--w:13vw}
 .sv-studio-t2{--x:78%;--y:14%;--w:27vw}
 .sv-studio-t3{--x:-3%;--y:79.5%;--w:40vw}
 .sv-studio-t4{--x:42%;--y:84%;--w:19vw}
 .sv-studio-t6{--x:64%;--y:79%;--w:37vw}
 .sv-studio-reel{--reel-w:min(100%,calc((100svh - 240px)*4/5));padding:76px var(--sv-gutter) 26px}
 .sv-studio-screen{aspect-ratio:4/5;border-radius:12px}
 .sv-studio-onscreen{left:12px;bottom:12px;padding:8px 11px;font-size:12px}
 /* Index: seven bars; the discipline on screen is named under them. */
 .sv-studio-index{position:relative;gap:5px;margin-top:16px;padding-bottom:26px}
 .sv-studio-index a{display:block}
 .sv-studio-n{display:none}
 .sv-studio-name{position:absolute;left:0;bottom:0;font-size:13px;opacity:0;transition:opacity .3s}
 .sv-studio-index li.is-on .sv-studio-name{opacity:1}
 .sv-studio-index a{opacity:1}
 .is-all .sv-studio-name,.is-all .sv-studio-index li.is-on .sv-studio-name{opacity:0}
 .is-all .sv-studio-index:after{content:attr(data-all);position:absolute;left:0;bottom:0;font:13px/1.25 var(--sans);color:var(--ink)}
 .is-static .sv-studio-open{min-height:700px}

 .sv-studio-who .sv-statement{margin-bottom:48px}
 .sv-studio-who .sv-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}
 .sv-studio-who .sv-logos img{height:calc(20px*var(--logo-scale,1));max-width:120px}

 .sv-studio-cases{padding-bottom:110px}
 .sv-studio-cases-head,.sv-studio-services-head,.sv-studio-inside-head{display:block;margin-bottom:56px}
 :is(.sv-studio-cases-head,.sv-studio-services-head,.sv-studio-inside-head) h2{font-size:40px;margin-bottom:20px}
 :is(.sv-studio-cases-head,.sv-studio-services-head,.sv-studio-inside-head)>p:last-child{font-size:15px}
 .sv-studio-case+.sv-studio-case{margin-top:80px}
 .sv-studio-case-head{grid-template-columns:36px minmax(0,1fr);gap:10px 10px}
 .sv-studio-case-head h3{grid-column:2;font-size:30px}
 .sv-studio-case-kind{grid-column:2}
 .sv-studio-uses{grid-column:1/-1}
 .sv-studio-case-head .sv-link{grid-column:1/-1;grid-row:auto}
 /* The pictures of a project become a strip to swipe, at one height. */
 .sv-studio-row{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--sv-gutter)*-1);padding:0 var(--sv-gutter);scroll-padding:0 var(--sv-gutter);scrollbar-width:none;gap:12px}
 .sv-studio-row::-webkit-scrollbar{display:none}
 .sv-studio-piece{flex:none;width:min(calc(250px*var(--ar)),76vw);scroll-snap-align:start}
 .sv-studio-piece-media{aspect-ratio:auto;height:250px}

 .sv-studio-voices{padding-top:110px;padding-bottom:80px}
 .sv-studio-voices-head h2{font-size:40px}
 .sv-studio-featured{margin-top:44px}
 .sv-studio-featured p{font-size:34px}
 .sv-studio-quotes{grid-template-columns:1fr;gap:44px;margin-top:72px}
 .sv-studio-quotes blockquote:nth-child(2n),.sv-studio-quotes blockquote:nth-child(3n+2){margin-top:0}
 .sv-studio-quotes p{font-size:24px;padding-right:0}

 .sv-studio-how{padding-top:80px;padding-bottom:120px}
 .sv-studio-inline{font-size:36px;line-height:1.15}
 .sv-studio-values{grid-template-columns:1fr;gap:36px;margin-top:64px}
 .sv-studio-values h3{margin:22px 0 10px}
 .sv-studio-process{display:block;margin-top:72px}
 .sv-studio-process ol{flex-direction:column;align-items:flex-start;margin:18px 0 22px;row-gap:12px}
 .sv-studio-process li:not(:last-child):after{display:none}

 .sv-studio-services{padding-top:120px;padding-bottom:100px}
 .sv-studio-chain{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 12px}
 .sv-studio-chain li:nth-child(n) .sv-studio-chain-step i{margin-right:-12px}
 .sv-studio-chain li:nth-child(2n) .sv-studio-chain-step i,.sv-studio-chain li:last-child .sv-studio-chain-step i{margin-right:0}
 .sv-studio-chain-name{font-size:20px}
 .sv-studio-chain-note{font-size:13px}
 .sv-studio-labs-card{padding:16px}
 .sv-studio-labs-name{font-size:24px}

 .sv-studio-inside{padding-top:100px;padding-bottom:90px}
 .sv-studio-slots{display:flex;flex-direction:column;gap:40px}
 .sv-studio-slot.is-work{width:74%;align-self:flex-end}
 .sv-studio-slot.is-space{width:86%}
}
/* Short phones: a smaller title and smaller pieces, so the two bands stay clear of it. */
@media(max-width:760px) and (max-height:760px){
 .sv-studio-hero h1{font-size:29px;margin-top:14px}
 .sv-studio-lead{font-size:14px;line-height:1.5;margin:14px auto 18px;max-width:320px}
 .sv-studio-intro{top:51%}
 .sv-studio-t1{--y:11%;--w:16vw}
 .sv-studio-t5{--y:13.5%;--w:26vw}
 .sv-studio-t7{--y:11%;--w:10vw}
 .sv-studio-t2{--y:14%;--w:19vw}
 .sv-studio-t3{--y:83%;--w:29vw}
 .sv-studio-t4{--y:85%;--w:15vw}
 .sv-studio-t6{--y:82.5%;--w:28vw}
}
@media(prefers-reduced-motion:reduce){
 .sv-studio-tile,.sv-studio-intro{will-change:auto}
}