.services-experience {
--sv-pad:clamp(1.25rem,4vw,5rem);
color:#faf5ed;
background:#090a10;
overflow:clip}
.services-experience * {
box-sizing:border-box}
.services-experience :is(h1,h2,h3,p) {
margin:0}
.services-experience :is(h1,h2) {
font-weight:550;
letter-spacing:-.065em;
line-height:.98}
.services-experience :is(h1,h2,h3) em {
display:block;
font-family:var(--font-editorial),serif;
font-weight:400;
color:var(--sv-accent,#ff7369)}
.services-experience p {
font-size:1.05rem;
line-height:1.65}
.services-experience a {
text-decoration:none}
.services-experience :is(a,button):focus-visible {
outline:3px solid #73ded4;
outline-offset:5px}
.sv-hero {
min-height:90svh;
position:relative;
isolation:isolate;
padding:clamp(8rem,14vh,11rem) var(--sv-pad) 6rem;
display:grid;
grid-template-columns:1.15fr 1fr;
align-items:center;
background:radial-gradient(ellipse at 90% 30%,#402b69,transparent 55%),radial-gradient(ellipse at 40% 100%,#462333,transparent 60%),#0c0c15}
.sv-hero:before {
content:"";
position:absolute;
inset:0;
z-index:-1;
background-image:radial-gradient(#ffffff20 1px,transparent 1px);
background-size:18px 18px;
mask-image:linear-gradient(90deg,#000,transparent)}
.sv-hero-copy {
z-index:2;
position:relative}
.sv-hero h1 {
font-size:clamp(4rem,7.2vw,8.5rem)}
.sv-hero-copy>p {
margin-top:2rem;
max-width:33rem;
color:#d5cbdd}
.sv-actions {
display:flex;
flex-wrap:wrap;
gap:1.5rem;
align-items:center;
margin-top:2rem;
font-size:1rem}
.sv-button {
display:inline-flex;
align-items:center;
gap:2rem;
justify-content:space-between;
padding:1rem 1.4rem;
background:#ff7369;
color:#100c11;
font-weight:600;
transition:background .2s}
.sv-button:hover {
background:#ffac9c}
.sv-hero-art {
height:clamp(450px,65vh,720px);
position:relative;
min-width:0;
margin-left:-3rem;
margin-right:-2vw}
.sv-work-scene {
position:absolute;
inset:-5%;
height:110%;
width:110%}
.sv-work-scene canvas {
position:absolute;
inset:0}
.sv-scene-fallback {
position:absolute;
inset:15%;
width:70%;
height:70%;
object-fit:cover;
transform:rotate(-8deg)}
.sv-work-scene.is-ready .sv-scene-fallback {
opacity:0}
.sv-astronaut {
position:absolute;
width:46%;
height:76%;
object-fit:contain;
left:28%;
top:12%;
pointer-events:none;
filter:drop-shadow(0 18px 22px #10071790)}
.sv-hero-bottom {
position:absolute;
bottom:1.5rem;
left:var(--sv-pad);
right:var(--sv-pad);
display:flex;
justify-content:space-between;
gap:2rem;
border-top:1px solid #ffffff30;
padding-top:1rem;
color:#c4b6cb;
font-size:.9rem}
.sv-capabilities {
scroll-margin-top:100px}
.sv-nav {
position:sticky;
top:75px;
z-index:10;
display:flex;
justify-content:center;
gap:clamp(1rem,4vw,4rem);
padding:1.1rem var(--sv-pad);
background:#0a0b13ee;
backdrop-filter:blur(16px);
border-block:1px solid #ffffff20}
.sv-nav a {
display:flex;
align-items:center;
gap:.6rem;
font-size:1rem;
color:#e7dfe9;
white-space:nowrap}
.sv-nav a:hover {
color:#ff7369}
.sv-nav a>span {
width:7px;
height:7px;
border-radius:50%}
.sv-chapter {
padding:clamp(3rem,6vw,6rem) var(--sv-pad);
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(2rem,6vw,7rem);
align-items:center;
scroll-margin-top:140px;
perspective:1500px;
border-bottom:1px solid #ffffff1c;
position:relative}
.sv-chapter:nth-of-type(2n) {
background:#12111d}
.sv-chapter-copy {
position:relative;
z-index:1}
.sv-service-name {
color:var(--sv-accent);
font-weight:500;
margin-bottom:1.5rem!important;
font-size:1.2rem!important}
.sv-chapter h2 {
font-size:clamp(3rem,5vw,6rem)}
.sv-chapter-copy>p:not(.sv-service-name) {
margin-top:1.5rem;
color:#bcb6c9;
max-width:33rem}
.sv-chapter ul {
list-style:none;
padding:0;
margin:1.5rem 0 2rem;
max-width:33rem}
.sv-chapter li {
padding:.65rem 0;
border-bottom:1px solid #ffffff25;
font-size:1rem}
.sv-service-link {
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:3rem;
border-bottom:1px solid var(--sv-accent);
padding:.7rem 0;
color:var(--sv-accent);
font-size:1.1rem}
.sv-service-link span {
font-size:1.5rem;
transition:transform .2s}
.sv-service-link:hover span {
transform:translate(3px,-3px)}
.sv-showcase {
position:relative;
min-width:0;
transform-origin:center;
min-height:500px;
display:grid;
align-items:center}
.sv-brand-collage {
position:relative;
aspect-ratio:1;
min-height:470px;
background:#513587;
padding:1.5rem;
overflow:hidden}
.sv-brand-collage>img {
position:absolute;
width:55%;
height:65%;
object-fit:cover;
box-shadow:0 20px 50px #13092255}
.sv-brand-collage>img:first-child {
top:5%;
left:3%;
transform:rotate(-8deg)}
.sv-brand-collage>img:nth-child(2) {
top:13%;
right:0;
transform:rotate(9deg)}
.sv-brand-collage>div {
position:absolute;
bottom:1.5rem;
left:1.5rem;
right:1.5rem;
font-size:clamp(2.5rem,4vw,5rem);
line-height:.9;
letter-spacing:-.06em;
color:#fff}
.sv-brand-collage em {
display:block;
font-family:var(--font-editorial),serif;
color:#ffd7c4}
.sv-browser {
background:#262230;
border:1px solid #ffffff35;
padding:.75rem;
border-radius:12px;
box-shadow:0 30px 80px #0006;
transform:rotate(2deg)}
.sv-browser>div:first-child {
display:flex;
justify-content:space-between;
padding:.4rem .5rem 1rem;
color:#e0dce8;
font-size:.9rem}
.sv-browser-page {
height:440px;
overflow:auto;
overscroll-behavior:contain}
.sv-browser-page img {
width:100%;
height:auto;
display:block}
.sv-phone {
background:#f4eee3;
color:#171a19;
width:min(300px,85%);
border:9px solid #282732;
border-radius:42px;
padding:1.5rem 1rem 1rem;
margin:auto;
box-shadow:25px 35px #73ded425,0 30px 70px #0006;
transform:rotate(-5deg)}
.sv-phone-camera {
width:70px;
height:16px;
border-radius:20px;
background:#15151c;
margin:-.8rem auto 1.2rem}
.sv-phone p {
font-size:.85rem}
.sv-phone h3 {
font-size:2.6rem;
line-height:1;
letter-spacing:-.06em;
margin:1rem 0}
.sv-phone h3 em {
color:#3c7167}
.sv-phone>img {
height:160px;
width:100%;
object-fit:cover;
border-radius:70px 70px 8px 8px}
.sv-phone-bottom {
display:grid;
gap:1rem;
margin-top:1rem;
font-size:.9rem}
.sv-phone-bottom button {
border:0;
padding:.8rem;
background:#163b32;
color:#fff;
border-radius:20px;
font:inherit;
cursor:pointer}
.sv-phone small {
display:block;
text-align:center;
margin-top:1rem;
color:#555;
font-size:.75rem}
.sv-chat {
padding:clamp(1.5rem,3vw,3rem);
background:linear-gradient(140deg,#292036,#14121d);
border:1px solid #ffffff30;
border-radius:12px;
box-shadow:0 25px 70px #0005}
.sv-chat-head {
display:flex;
gap:1rem;
align-items:center;
border-bottom:1px solid #ffffff20;
padding-bottom:1.5rem;
font-size:1rem}
.sv-chat-head img {
width:32px;
height:32px}
.sv-chat .sv-chat-question {
padding:1rem;
background:#5c426c;
border-radius:16px 16px 0;
margin:2rem 0 1rem 1rem;
font-size:1rem}
.sv-chat .sv-chat-answer {
color:#e0d7e8;
font-size:1rem;
min-height:150px}
.sv-chat-options {
display:flex;
flex-wrap:wrap;
gap:.6rem;
margin-top:1.5rem}
.sv-chat-options button {
border:1px solid #ffffff40;
background:transparent;
color:#e9dfe9;
border-radius:20px;
padding:.6rem .8rem;
font:inherit;
font-size:.85rem;
cursor:pointer}
.sv-chat-options button[aria-pressed=true] {
background:#ffbb80;
color:#17111d;
border-color:#ffbb80}
.sv-chat small {
display:block;
color:#b8adbc;
font-size:.8rem;
margin-top:1.2rem}
.sv-campaign {
position:relative;
min-height:510px;
overflow:hidden;
background:#ffa0ab}
.sv-campaign>img {
width:100%;
height:510px;
object-fit:cover;
display:block}
.sv-campaign>div {
position:absolute;
inset:0;
padding:2rem;
display:flex;
flex-direction:column;
justify-content:space-between;
background:linear-gradient(#140c1c75,transparent 40%,#140c1c90)}
.sv-campaign h3 {
font-size:clamp(3.7rem,6vw,7rem);
line-height:.8;
letter-spacing:-.065em;
text-shadow:0 5px 35px #12081977}
.sv-campaign h3 em {
color:#fcffc7}
.sv-campaign span {
font-size:.9rem;
margin-top:1rem}
.sv-closing {
display:grid;
grid-template-columns:1.4fr 1fr;
gap:3rem;
padding:clamp(3rem,5vw,5rem) var(--sv-pad);
background:#ff7369;
color:#110e18;
align-items:center}
.sv-closing h2 {
font-size:clamp(3rem,5vw,6rem)}
.sv-closing h2 em {
color:#fff4e9}
.sv-closing>div>p {
max-width:30rem;
margin-bottom:1.5rem}
.sv-closing .sv-button {
background:#13101c;
color:#fff}
@media(min-width:1700px) {
.services-experience {
--sv-pad:max(4vw, calc((100vw - 1650px)/2) )}
}
@media(max-width:1000px) {
.sv-hero {
grid-template-columns:1fr 1fr}
.sv-hero h1 {
font-size:clamp(3.3rem,7vw,5.5rem)}
.sv-hero-art {
margin-left:-1rem}
.sv-chapter {
gap:2rem}
.sv-chapter h2 {
font-size:3.4rem}
.sv-showcase,.sv-brand-collage {
min-height:400px}
.sv-nav {
top:70px}
.sv-chat {
padding:1.5rem}
}
@media(max-width:700px) {
.sv-hero {
grid-template-columns:1fr;
padding-top:8rem;
padding-bottom:5rem;
min-height:0}
.sv-hero h1 {
font-size:clamp(3.4rem,11vw,5rem)}
.sv-hero-art {
height:440px;
margin:1rem 0 0}
.sv-hero-bottom {
font-size:.8rem}
.sv-hero-bottom>span:last-child {
display:none}
.sv-hero-copy>p {
margin-top:1.5rem}
.sv-nav {
gap:1rem;
justify-content:space-between;
padding:1rem;
top:65px;
overflow:auto}
.sv-nav a {
font-size:.9rem;
gap:.35rem}
.sv-nav a>span {
width:5px;
height:5px}
.sv-chapter {
grid-template-columns:1fr;
gap:2rem;
padding-block:3rem}
.sv-chapter h2 {
font-size:clamp(3rem,10vw,4.5rem)}
.sv-showcase {
min-height:0}
.sv-brand-collage {
min-height:430px}
.sv-browser-page {
height:360px}
.sv-phone {
margin-block:.5rem 2rem}
.sv-chat .sv-chat-answer {
min-height:120px}
.sv-campaign,.sv-campaign>img {
height:450px;
min-height:450px}
.sv-closing {
grid-template-columns:1fr;
gap:1.5rem}
.sv-closing h2 {
font-size:3.5rem}
}
@media(prefers-reduced-motion:reduce) {
.services-experience * {
animation:none!important;
transition:none!important;
scroll-behavior:auto!important}
}