:root{--bg:#050507;--text:#f7f7fa;--muted:#a5a3ae;--line:rgba(255,255,255,.13);--purple:#6927ff;--pink:#d82e9d;--orange:#ff7a2c;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-snap-type:y mandatory;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow-x:hidden}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.snap-page{position:relative}.screen{width:100%;height:100svh;min-height:100svh;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}.cursor-glow{position:fixed;z-index:90;width:300px;height:300px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(113,57,255,.14),rgba(255,88,170,.035) 32%,transparent 68%);filter:blur(8px);mix-blend-mode:screen}.scroll-progress{position:fixed;z-index:100;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));transition:width .65s cubic-bezier(.2,.7,.2,1)}
.site-header{position:fixed;z-index:80;top:0;left:0;right:0;height:78px;padding:0 4vw;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(5,5,7,.3);backdrop-filter:blur(18px)}.brand img{width:150px;display:block}.desktop-nav{display:flex;gap:32px;margin:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#bbb9c3}.desktop-nav a{transition:.25s}.desktop-nav a:hover{color:#fff}.nav-cta,.btn{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;transition:.35s}.nav-cta:hover,.btn:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.5);box-shadow:0 14px 50px rgba(104,39,255,.16)}.menu-btn{display:none;background:none;border:0}.mobile-menu{display:none}
.hero{background:#09090c}.hero-media{position:absolute;inset:0;background:#08080b}.hero-media iframe{position:absolute;width:100%;height:100%;border:0;inset:0;object-fit:cover;transform:scale(1.01);pointer-events:none}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 30%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.72)),linear-gradient(90deg,rgba(0,0,0,.45),transparent 55%);pointer-events:none}.hero-ui{position:absolute;inset:0;padding:118px 5vw 36px;display:flex;flex-direction:column;justify-content:space-between}.hero-top,.hero-bottom{display:flex;align-items:center;justify-content:space-between}.hero-status,.hero-bottom{color:#d7d5dc;font-size:9px;letter-spacing:.2em;text-transform:uppercase}.play-float{width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(5,5,7,.35);backdrop-filter:blur(12px);cursor:pointer;transition:.45s cubic-bezier(.2,.7,.2,1)}.play-float:hover{transform:scale(1.08);background:rgba(105,39,255,.3)}
.statement{display:grid;place-items:center;padding:8vw;background:#060609}.statement-inner{position:relative;z-index:2;text-align:center;max-width:1100px}.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#aaa8b3;margin:0}.statement-title,h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-.065em;font-weight:600}.statement-title{font-size:clamp(64px,9vw,150px);line-height:.88;margin:25px 0}.statement-title span,h2 span{background:linear-gradient(100deg,#7137ff,#d02ca0 54%,#ff7833);background-clip:text;-webkit-background-clip:text;color:transparent}.statement-copy{max-width:560px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.65}.statement-light{position:absolute;width:55vw;height:55vw;right:-22vw;top:-20vw;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,116,44,.28),rgba(194,43,153,.1) 35%,rgba(90,35,255,.07) 55%,transparent 68%);filter:blur(28px);animation:lightDrift 12s ease-in-out infinite alternate}
.service-screen{padding:110px 5vw 42px;display:flex;flex-direction:column;justify-content:center}.screen-head{display:grid;grid-template-columns:1fr 320px;align-items:end;gap:40px;margin-bottom:32px}.screen-head h2,.work-top h2,.about-copy h2,.cta-screen h2{font-size:clamp(44px,5.3vw,82px);line-height:.9;margin:18px 0 0}.screen-head>p:last-child,.work-top>p:last-child{color:var(--muted);font-size:13px;line-height:1.55;max-width:320px;justify-self:end}.service-cards{display:grid;gap:14px}.service-cards.landscape,.service-cards.portrait{grid-template-columns:repeat(4,1fr)}.service-card{position:relative;min-width:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#111;transform-style:preserve-3d;transition:border-color .3s,box-shadow .45s,transform .25s}.service-cards.landscape .service-card{aspect-ratio:1.55}.service-cards.portrait .service-card{aspect-ratio:.72}.service-card:hover{border-color:rgba(207,72,220,.65);box-shadow:0 24px 70px rgba(75,28,150,.2)}.service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}.service-card:hover img{transform:scale(1.07);filter:saturate(1.1)}.service-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.08) 43%,rgba(0,0,0,.8));pointer-events:none}.service-card>div{position:absolute;z-index:2;left:20px;right:20px;bottom:18px}.service-card span{font-size:9px;letter-spacing:.2em;color:#bdbac5}.service-card h3{font-family:'Space Grotesk';font-size:22px;margin:8px 0 4px;letter-spacing:-.03em}.service-card p{margin:0;color:#c1bec8;font-size:11px}.service-social{background:#09080d}.service-digital{background:#060608}
.process-screen{padding:110px 5vw 45px;display:grid;grid-template-rows:auto 1fr auto;align-items:center}.process-intro h2{font-size:clamp(48px,6vw,92px);line-height:.9;margin:20px 0 0}.process-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;align-items:center}.process-progress{position:absolute;left:2%;right:2%;top:38px;height:1px;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));transform-origin:left;animation:progressPulse 4s ease-in-out infinite}.process-step{position:relative;padding-top:85px}.process-step span{position:absolute;top:20px;left:0;width:38px;height:38px;border:1px solid rgba(255,255,255,.32);border-radius:50%;display:grid;place-items:center;font-size:9px;background:#07070a;z-index:2}.process-step h3{font-family:'Space Grotesk';font-size:28px;margin:0 0 9px}.process-step p{margin:0;color:var(--muted);font-size:12px}.process-note{justify-self:end;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#85828e}.process-note span{font-size:18px;margin-left:10px}
.work-screen{padding:110px 5vw 42px;background:#07070a}.work-top{display:grid;grid-template-columns:1fr 320px;align-items:end;gap:40px;margin-bottom:30px}.work-stage{position:relative;height:calc(100% - 165px);min-height:0}.work-card{position:absolute;overflow:hidden;border:1px solid var(--line);border-radius:20px;cursor:pointer;background:#111;transform-style:preserve-3d;transition:box-shadow .4s,border-color .3s,transform .25s}.work-card:hover{border-color:rgba(207,72,220,.7);box-shadow:0 30px 90px rgba(50,20,100,.28)}.work-main{left:0;top:0;width:66%;height:100%}.work-side{right:0;top:0;width:32%;height:48%}.work-side-bottom{top:auto;bottom:0}.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.work-card:hover img{transform:scale(1.05)}.work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75))}.work-meta{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:end;gap:12px}.work-meta span{font-family:'Space Grotesk';font-size:16px}.work-meta b{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#b5b1bc;font-weight:500}
.about-screen{display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:center;padding:8vw}.about-copy{max-width:600px}.about-copy h2{margin:22px 0}.about-copy>p:not(.eyebrow){color:var(--muted);line-height:1.7;max-width:500px;margin:0 0 30px}.about-art{height:70vh;border:1px solid var(--line);border-radius:24px;overflow:hidden;position:relative;transform-style:preserve-3d}.about-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.75)}.about-art:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(91,34,255,.24),transparent 45%,rgba(255,92,40,.2));mix-blend-mode:screen}.cp-mark{position:absolute;z-index:2;right:7%;bottom:4%;font-family:'Space Grotesk';font-size:clamp(120px,18vw,280px);font-weight:700;line-height:.8;color:rgba(255,255,255,.12);letter-spacing:-.12em}
.cta-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#08070b}.cta-bg{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 48%,rgba(106,37,255,.32),transparent 22%),radial-gradient(circle at 62% 52%,rgba(255,66,157,.28),transparent 27%),radial-gradient(circle at 48% 68%,rgba(255,116,43,.2),transparent 22%);filter:blur(24px);animation:ctaMove 10s ease-in-out infinite alternate}.cta-screen h2{font-size:clamp(62px,8vw,128px);margin:25px 0 38px;position:relative}.cta-button{position:relative;padding:16px 25px;border-radius:999px;background:#fff;color:#08080b;font-size:10px;text-transform:uppercase;letter-spacing:.16em;transition:.35s}.cta-button:hover{transform:translateY(-4px);box-shadow:0 20px 70px rgba(255,255,255,.18)}.cta-foot{position:absolute;bottom:95px;font-size:10px;letter-spacing:.16em;color:#88858f}.footer{position:absolute;left:5vw;right:5vw;bottom:25px;display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line);color:#7e7b86;font-size:10px;letter-spacing:.08em}.footer img{width:140px}
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center}.modal.is-open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(16px)}.modal-panel{position:relative;width:min(1000px,90vw);z-index:2}.modal-close{position:absolute;right:0;top:-50px;width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:#0a0a0d;font-size:24px;cursor:pointer}.modal-screen{aspect-ratio:16/9;border:1px solid var(--line);border-radius:18px;background:#09090c;overflow:hidden}.modal-screen iframe{width:100%;height:100%;border:0}.modal-actions{display:flex;justify-content:space-between;align-items:center;padding:14px 2px;color:#bdbac5;font-size:12px}.modal-actions a{color:#fff;text-transform:uppercase;letter-spacing:.14em;font-size:9px}
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}@keyframes lightDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8vw,5vh,0) scale(1.08)}}@keyframes ctaMove{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.08)}}@keyframes progressPulse{0%,100%{transform:scaleX(.2);opacity:.45}50%{transform:scaleX(1);opacity:.9}}
@media(max-width:950px){.screen-head,.work-top{grid-template-columns:1fr 1fr}.screen-head>p:last-child,.work-top>p:last-child{justify-self:start}.service-cards.landscape,.service-cards.portrait{grid-template-columns:repeat(2,1fr)}.about-screen{padding:7vw 5vw}.about-art{height:55vh}}
@media(max-width:700px){html{scroll-snap-type:y mandatory}.site-header{height:68px;padding:0 20px}.brand img{width:128px}.desktop-nav,.nav-cta{display:none}.menu-btn{display:flex;flex-direction:column;gap:6px;margin-left:auto;padding:10px}.menu-btn span{width:24px;height:1px;background:#fff}.mobile-menu{position:fixed;top:68px;left:0;right:0;z-index:75;padding:18px 22px;background:rgba(6,6,9,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);max-height:calc(100svh - 68px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.mobile-menu.is-open{display:grid}.mobile-menu a{padding:14px 0;border-bottom:1px solid var(--line);font-family:'Space Grotesk';font-size:23px}.screen{height:100svh;min-height:100svh;overflow:hidden}.hero{height:100svh}.hero-ui{padding:96px 20px 24px}.hero-top,.hero-bottom{font-size:8px}.hero-status{display:none}.play-float{width:62px;height:62px}.statement{padding:22px}.statement-title{font-size:clamp(50px,15vw,82px)}.statement-copy{font-size:14px}.service-screen{padding:92px 20px 22px}.screen-head{display:block;margin-bottom:18px}.screen-head h2{font-size:45px}.screen-head>p:last-child{font-size:11px;margin-top:12px}.service-cards.landscape,.service-cards.portrait{grid-template-columns:1fr 1fr;gap:9px}.service-cards.landscape .service-card{aspect-ratio:1}.service-cards.portrait .service-card{aspect-ratio:.68}.service-card>div{left:12px;right:12px;bottom:12px}.service-card h3{font-size:15px}.service-card p{font-size:9px}.process-screen{padding:92px 22px 25px;display:grid}.process-intro h2{font-size:49px}.process-rail{display:grid;grid-template-columns:1fr;gap:16px;margin-top:15px;padding-left:55px}.process-progress{left:18px;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(var(--purple),var(--pink),var(--orange));transform-origin:top;animation:none}.process-step{padding:0 0 5px}.process-step span{top:0;left:-55px}.process-step h3{font-size:24px}.process-note{margin-top:0}.work-screen{padding:92px 20px 22px}.work-top{display:block;margin-bottom:16px}.work-top h2{font-size:49px}.work-top>p:last-child{font-size:11px;margin-top:12px}.work-stage{height:65vh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px}.work-card{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto;height:auto}.work-main{grid-column:1/-1;grid-row:1}.work-side{grid-row:2}.work-meta{left:12px;right:12px;bottom:12px;display:block}.work-meta span{font-size:12px}.work-meta b{display:block;font-size:7px;margin-top:5px}.about-screen{display:flex;flex-direction:column;padding:92px 20px 22px;gap:20px}.about-art{order:-1;width:100%;height:43vh}.about-copy h2{font-size:45px;margin:18px 0}.about-copy>p:not(.eyebrow){font-size:12px;margin-bottom:18px}.cta-screen{padding:20px}.cta-screen h2{font-size:53px}.cta-foot{bottom:80px}.footer{left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:8px}.footer img{width:110px}.footer span:last-child{text-align:right}.cursor-glow{display:none}.modal-panel{width:94vw}.modal-close{top:-46px}.modal-screen{aspect-ratio:9/16;max-height:78vh}.modal-actions{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}.cursor-glow{display:none}}

/* Cinematic scene navigation: each section occupies one viewport and transitions like a continuous camera move. */
html,body{height:100%;overflow:hidden;scroll-snap-type:none}
.snap-page{height:100svh;min-height:100svh;overflow:hidden;position:relative;isolation:isolate}
.screen{position:absolute;inset:0;width:100%;height:100svh;min-height:100svh;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,8vh,0) scale(.94);filter:blur(9px);transition:opacity .95s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.16,1,.3,1),filter .9s ease,visibility 0s linear 1.05s;will-change:transform,opacity,filter}
.screen::before{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 42%);opacity:0;transition:opacity .9s ease}
.screen.is-current{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);filter:blur(0);transition-delay:0s}
.screen.is-current::before{opacity:1}
.screen.is-leaving{opacity:0;visibility:visible;pointer-events:none;transform:translate3d(0,-7vh,0) scale(1.025);filter:blur(11px);transition-delay:0s}
.screen:not(.is-current) .reveal{opacity:0;transform:translate3d(0,30px,0) scale(.985)}
.screen.is-current .reveal{opacity:1;transform:none}
.hero-media iframe{width:max(100vw,177.78vh);height:max(100vh,56.25vw);left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%) scale(1.02);pointer-events:none}
.hero-media{overflow:hidden}
.modal{visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s}
.modal.is-open{visibility:visible;opacity:1;transition-delay:0s}
.modal-panel{transform:translateY(22px) scale(.97);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.modal.is-open .modal-panel{transform:none;opacity:1}
.modal-screen{box-shadow:0 35px 120px rgba(0,0,0,.5)}
.modal.is-portrait .modal-panel{width:min(520px,90vw)}
.modal.is-portrait .modal-screen{aspect-ratio:9/16}

@media(max-width:700px){
  html,body{overflow:hidden}
  .snap-page,.screen{height:100svh;min-height:100svh}
  .screen{transform:translate3d(0,7vh,0) scale(.96);filter:blur(7px)}
  .screen.is-leaving{transform:translate3d(0,-5vh,0) scale(1.02);filter:blur(8px)}
  .hero-media iframe{width:max(100vw,177.78vh);height:max(100vh,56.25vw)}
  .modal.is-portrait .modal-panel{width:min(92vw,430px)}
}
@media(prefers-reduced-motion:reduce){
  .screen,.screen.is-current,.screen.is-leaving,.reveal,.modal,.modal-panel{transition:none!important;filter:none!important}
}

.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:opacity .8s ease;z-index:0}.hero-poster.is-hidden{opacity:0}.hero-media iframe{z-index:1}.hero-video-fallback{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,5,7,.32);backdrop-filter:blur(10px);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:opacity .5s ease;pointer-events:none}.hero-video-fallback.is-hidden{opacity:0}
.service-card{display:block;color:inherit;text-decoration:none}

/* v7 refinements */
.site-header{transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), visibility .45s ease}
.site-header.hero-hidden{opacity:0;transform:translateY(-18px);visibility:hidden;pointer-events:none}
.hero-bottom{justify-content:space-between;gap:20px}
.sound-toggle{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(7,7,10,.42);color:#fff;backdrop-filter:blur(14px);font-size:9px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}
.sound-toggle:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45);box-shadow:0 12px 45px rgba(168,54,255,.18)}
.sound-icon{font-size:16px;line-height:1;display:inline-block;transform:rotate(-12deg)}
.sound-toggle.is-on{border-color:rgba(255,102,120,.55);box-shadow:0 0 35px rgba(255,73,120,.12)}
.landscape-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;height:calc(100% - 150px)}
.service-card.media-text{display:grid;grid-template-columns:42% 58%;height:100%;padding:0;text-align:left;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(8,8,11,.62);color:inherit;cursor:pointer;position:relative;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease}
.service-card.media-text:hover{border-color:rgba(255,255,255,.28);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.service-card.media-text>img{width:100%;height:100%;object-fit:cover;min-height:0;filter:saturate(.9);transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease}
.service-card.media-text:hover>img{transform:scale(1.045);filter:saturate(1.05)}
.card-copy{padding:25px;display:flex;flex-direction:column;justify-content:center;position:relative;background:linear-gradient(120deg,rgba(11,10,15,.96),rgba(13,10,18,.88))}
.card-copy>span,.portrait-copy>span,.digital-card span{font-size:9px;color:#b34aff;letter-spacing:.16em;margin-bottom:13px}
.card-copy h3{font-size:clamp(20px,2vw,30px);line-height:1.03;margin:0 0 12px;letter-spacing:-.04em}
.card-copy p{font-size:11px;line-height:1.65;color:#a9a5b1;max-width:390px;margin:0}
.card-copy em,.portrait-copy em{font-style:normal;text-transform:uppercase;letter-spacing:.14em;font-size:8px;color:#d79cff;margin-top:18px}
.is-disabled{cursor:default;opacity:.82}.coming-media{display:flex;align-items:center;justify-content:center;min-height:0;background:radial-gradient(circle at 50% 50%,rgba(112,38,255,.2),transparent 55%),#09090c;border-right:1px solid var(--line)}.coming-media span{font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:#77737f}
.portrait-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;height:calc(100% - 150px);align-items:stretch}
.portrait-card{padding:0;text-align:left;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#08080b;color:inherit;cursor:pointer;position:relative;display:flex;flex-direction:column;min-width:0;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease}
.portrait-card:hover{border-color:rgba(255,255,255,.28);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.portrait-card>img{width:100%;height:61%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.16,1,.3,1);filter:saturate(.9)}
.portrait-card:hover>img{transform:scale(1.045);filter:saturate(1.05)}
.portrait-copy{padding:18px 18px 17px;display:flex;flex-direction:column;flex:1;background:linear-gradient(180deg,rgba(12,11,16,.88),rgba(8,8,11,.98))}
.portrait-copy h3{font-size:clamp(14px,1.2vw,18px);line-height:1.12;margin:0 0 9px;letter-spacing:-.025em}.portrait-copy p{font-size:9.5px;line-height:1.55;color:#9d99a5;margin:0}.portrait-copy em{margin-top:auto;padding-top:12px}
.portrait-card .coming-media{height:61%;flex:none;border-right:0;border-bottom:1px solid var(--line)}
.digital-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;height:calc(100% - 150px);position:relative;z-index:2}
.digital-card{display:grid;grid-template-columns:42% 58%;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(7,7,10,.78);backdrop-filter:blur(8px);min-height:0;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease}
.digital-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28);box-shadow:0 30px 80px rgba(0,0,0,.38)}
.digital-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease}.digital-card:hover img{transform:scale(1.045);filter:saturate(1.03)}
.digital-card>div{padding:24px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(120deg,rgba(8,8,11,.95),rgba(14,9,20,.9))}.digital-card h3{font-size:clamp(18px,1.7vw,26px);line-height:1.06;letter-spacing:-.035em;margin:0 0 10px}.digital-card p{font-size:10.5px;line-height:1.62;color:#a7a3ae;margin:0;max-width:410px}.digital-backdrop{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;opacity:.055;filter:blur(24px) saturate(1.2);transform:scale(1.08);pointer-events:none}.digital-backdrop img{width:100%;height:100%;object-fit:cover}
.modal-screen iframe{background:#000}
@media(max-width:950px){.landscape-grid,.digital-grid{height:calc(100% - 175px)}.service-card.media-text,.digital-card{grid-template-columns:1fr 1fr}.portrait-row{gap:10px}.portrait-copy{padding:14px}.portrait-copy p{font-size:8.5px}}
@media(max-width:700px){.hero-bottom{display:grid;grid-template-columns:1fr auto;gap:14px}.hero-bottom>span:last-child{grid-column:1/-1}.sound-toggle{justify-self:end}.landscape-grid,.digital-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:calc(100% - 165px);gap:9px}.service-card.media-text,.digital-card{grid-template-columns:1fr}.service-card.media-text>img,.digital-card img{height:45%;min-height:0}.card-copy,.digital-card>div{padding:12px}.card-copy h3,.digital-card h3{font-size:14px}.card-copy p,.digital-card p{font-size:8px;line-height:1.45}.card-copy em{font-size:7px;margin-top:8px}.portrait-row{grid-template-columns:repeat(4,minmax(145px,1fr));overflow-x:auto;height:calc(100% - 165px);padding-bottom:8px}.portrait-card{height:100%}.portrait-card>img,.portrait-card .coming-media{height:56%}.portrait-copy h3{font-size:14px}.portrait-copy p{font-size:8px}.digital-backdrop{display:none}}

/* Cinematic motion-design process */
.process-cinematic{overflow:hidden;background:radial-gradient(circle at 72% 50%,rgba(111,37,180,.16),transparent 32%),#060608}
.process-cinematic:after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 30% 70%,rgba(255,91,62,.07),transparent 22%),radial-gradient(circle at 80% 25%,rgba(88,56,255,.08),transparent 28%);animation:processGlow 9s ease-in-out infinite alternate;pointer-events:none}
.process-orbit{position:absolute;width:58vw;height:58vw;max-width:850px;max-height:850px;right:-11vw;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.055);border-radius:50%;z-index:0;opacity:.8}
.process-orbit:before,.process-orbit:after{content:"";position:absolute;inset:11%;border:1px solid rgba(153,72,255,.12);border-radius:50%}.process-orbit:after{inset:25%;border-color:rgba(255,91,62,.11)}
.process-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:linear-gradient(90deg,#6d29ff,#ff6544);box-shadow:0 0 24px rgba(176,71,255,.8);top:50%;left:0;transform-origin:29vw center;animation:orbit 10s linear infinite}.process-orbit span:nth-child(2){animation-duration:14s;animation-delay:-3s;transform-origin:25vw center}.process-orbit span:nth-child(3){animation-duration:18s;animation-delay:-8s;transform-origin:20vw center}
.cinematic-copy{position:absolute;left:5.2vw;top:16vh;z-index:4;width:min(530px,40vw)}.cinematic-copy h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(48px,6.4vw,104px);line-height:.92;letter-spacing:-.065em;margin:16px 0 20px}.cinematic-copy h2 span{background:linear-gradient(100deg,#6d2cff,#df3a8f 58%,#ff6a3d);-webkit-background-clip:text;background-clip:text;color:transparent}.process-lead{font-size:15px;line-height:1.65;color:#9e9aa7;max-width:440px}
.process-canvas{position:absolute;inset:0;z-index:2}.process-track-line{position:absolute;left:57%;top:21%;bottom:15%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.14),transparent)}.process-track-line i{display:block;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(255,255,255,.7);position:absolute;left:-4px;top:0;animation:trackTravel 7s ease-in-out infinite}
.process-stage{position:absolute;left:52%;top:50%;width:43vw;max-width:690px;transform:translate(8%,-50%) scale(.88);opacity:0;filter:blur(12px);transition:opacity .85s cubic-bezier(.2,.75,.2,1),transform 1.05s cubic-bezier(.16,1,.3,1),filter .85s ease;pointer-events:none}.process-stage.is-active{opacity:1;transform:translate(0,-50%) scale(1);filter:blur(0);pointer-events:auto}.stage-index{font:600 12px/1 "Space Grotesk",sans-serif;letter-spacing:.18em;color:#9b5bff;margin-bottom:12px}.stage-copy>span{font:600 13px/1 "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#b4aebc}.stage-copy h3{font:600 clamp(28px,3vw,48px)/1.02 "Space Grotesk",sans-serif;letter-spacing:-.04em;margin:12px 0}.stage-copy p{font-size:14px;line-height:1.65;color:#a5a0ad;max-width:470px;margin:0 0 28px}
.brief-card,.board-card,.timeline-card,.refine-card,.deliver-card{position:relative;width:100%;height:205px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden}.brief-card{padding:24px;background:linear-gradient(135deg,rgba(113,50,220,.18),rgba(255,255,255,.025))}.mini-top,.board-header,.timeline-head{display:flex;justify-content:space-between;font:600 10px/1 "Space Grotesk";letter-spacing:.16em;color:#bdb7c5}.mini-top span{color:#72ffb0}.mini-lines{display:grid;gap:13px;margin:34px 0}.mini-lines i{height:8px;background:rgba(255,255,255,.1);border-radius:99px}.mini-lines i:nth-child(1){width:72%}.mini-lines i:nth-child(2){width:94%}.mini-lines i:nth-child(3){width:51%}.mini-tags{display:flex;gap:8px}.mini-tags b{font:500 9px/1 "Space Grotesk";padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:99px;color:#aaa4b2}
.board-card{padding:20px;background:linear-gradient(140deg,rgba(70,38,160,.2),rgba(255,255,255,.025))}.board-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;grid-template-rows:1fr 1fr;gap:7px;height:132px;margin-top:17px}.board-grid i{border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(111,42,192,.16));border:1px solid rgba(255,255,255,.08)}.board-grid i:nth-child(1){grid-row:span 2}.board-grid i:nth-child(4){grid-column:2/4}.board-note{position:absolute;right:20px;bottom:17px;font:500 8px/1 "Space Grotesk";letter-spacing:.16em;color:#7d7784}
.timeline-card{padding:20px;background:linear-gradient(135deg,rgba(20,22,30,.96),rgba(84,37,123,.2))}.timeline-ruler{display:flex;justify-content:space-between;margin:20px 0 7px;color:#777;font-size:8px}.timeline-lanes{display:grid;gap:12px}.timeline-lanes i{height:17px;border-radius:4px;background:linear-gradient(90deg,rgba(117,53,235,.7) 0 25%,rgba(255,255,255,.08) 25% 42%,rgba(235,73,135,.65) 42% 70%,rgba(255,255,255,.06) 70%);border:1px solid rgba(255,255,255,.06)}.timeline-lanes i:nth-child(2){background:linear-gradient(90deg,rgba(255,91,62,.6) 0 16%,rgba(255,255,255,.06) 16% 36%,rgba(96,67,240,.7) 36% 78%,rgba(255,255,255,.06) 78%)}.playhead{position:absolute;left:52%;top:48px;bottom:18px;width:1px;background:#ff6950;box-shadow:0 0 14px #ff6950;animation:playhead 3s ease-in-out infinite alternate}
.refine-card{padding:22px;display:grid;grid-template-columns:1fr auto;gap:24px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(106,38,150,.13))}.comment{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:18px;background:rgba(0,0,0,.18)}.comment b{font:600 9px/1 "Space Grotesk";letter-spacing:.15em;color:#9f98a7}.comment p{font:500 16px/1.35 "DM Sans";color:#f0edf2;margin:24px 0}.comment span{font:600 10px/1 "Space Grotesk";color:#76f0ac}.check-stack{display:grid;align-content:center;gap:10px}.check-stack i{width:34px;height:34px;border:1px solid rgba(118,240,172,.25);border-radius:50%;display:grid;place-items:center;font-style:normal;color:#76f0ac;background:rgba(118,240,172,.06)}
.deliver-card{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(108,38,190,.2),transparent 36%),rgba(255,255,255,.025)}.deliver-core{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;font:700 22px "Space Grotesk";background:linear-gradient(135deg,#5f24ee,#f14b65);box-shadow:0 0 55px rgba(118,46,236,.38);position:relative;z-index:3}.output{position:absolute;padding:9px 12px;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:rgba(7,7,10,.8);font:600 8px/1 "Space Grotesk";letter-spacing:.14em;color:#c4bfca;animation:outputFloat 4s ease-in-out infinite}.output-a{top:26px;left:21%}.output-b{top:52px;right:18%;animation-delay:-1s}.output-c{bottom:28px;right:25%;animation-delay:-2s}.output-d{bottom:38px;left:18%;animation-delay:-3s}
.process-footer{position:absolute;left:5.2vw;right:5.2vw;bottom:5vh;display:flex;justify-content:space-between;z-index:5;font:500 10px/1 "Space Grotesk";letter-spacing:.15em;text-transform:uppercase;color:#77717d}.process-footer b{color:#9d97a4;font-weight:500}.process-cinematic .reveal{opacity:1;transform:none}
@keyframes processGlow{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.06)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes trackTravel{50%{top:72%}100%{top:0}}@keyframes playhead{to{left:78%}}@keyframes outputFloat{50%{transform:translateY(-7px)}}
@media(max-width:900px){.cinematic-copy{left:7vw;top:12vh;width:86vw}.cinematic-copy h2{font-size:58px}.process-lead{font-size:13px;max-width:560px}.process-stage{left:7vw;top:57%;width:86vw;transform:translateY(10%) scale(.94)}.process-stage.is-active{transform:translateY(0) scale(1)}.process-orbit{width:120vw;height:120vw;right:-55vw;top:63%}.process-track-line{left:8%;right:8%;top:auto;bottom:8%;width:auto;height:1px}.process-track-line i{top:-4px;left:0;animation:none}.process-footer{bottom:3vh}.process-footer span{display:none}}

/* v9 premium refinement */
.site-header.hero-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-18px);transition:opacity .35s ease,transform .35s ease,visibility .35s}.site-header{transition:opacity .35s ease,transform .35s ease,visibility .35s}
.sound-toggle{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(7,7,10,.45);backdrop-filter:blur(14px);font-size:9px;text-transform:uppercase;letter-spacing:.16em;cursor:pointer;transition:.35s cubic-bezier(.2,.7,.2,1);box-shadow:0 8px 30px rgba(0,0,0,.2)}.sound-toggle:hover,.sound-toggle.is-on{border-color:rgba(224,91,255,.7);box-shadow:0 0 30px rgba(112,40,255,.24),inset 0 0 18px rgba(217,45,157,.08);transform:translateY(-2px)}.sound-icon{font-size:14px;line-height:1}
.landscape-grid{gap:34px!important}.service-card,.digital-card,.portrait-card{position:relative}.service-card::before,.digital-card::before,.portrait-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--angle,0deg),transparent 0 20%,rgba(105,39,255,.9) 28%,rgba(216,46,157,.95) 43%,rgba(255,122,44,.95) 58%,transparent 68%);-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;pointer-events:none;z-index:8}.service-card:hover::before,.digital-card:hover::before,.portrait-card:hover::before{opacity:1;animation:borderSpin 2.8s linear infinite}.service-card::after{z-index:1}.service-card>div,.portrait-card>div,.digital-card>div{z-index:4}.service-card h3{margin-top:10px}.card-copy p,.portrait-copy p,.digital-card p{font-size:13px;line-height:1.72;color:#cbc7d1}.card-copy,.portrait-copy{padding-top:6px}.digital-card p{font-size:13px;line-height:1.72}.digital-card>div{padding:28px}.digital-grid{gap:34px!important}.digital-card{min-height:0}.portrait-row{gap:18px!important}
@keyframes borderSpin{to{--angle:360deg}}@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.testimonial-screen{padding:105px 5vw 44px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 78% 28%,rgba(105,39,255,.13),transparent 26%),#07070a}.testimonial-head{display:grid;grid-template-columns:1fr 330px;align-items:end;gap:50px;margin-bottom:34px}.testimonial-head h2{font-size:clamp(50px,5.5vw,88px);line-height:.9;margin:18px 0 0}.testimonial-head h2 span{background:linear-gradient(100deg,#7137ff,#d02ca0 54%,#ff7833);background-clip:text;-webkit-background-clip:text;color:transparent}.testimonial-head>p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}.testimonial-glow{position:absolute;width:45vw;height:45vw;right:-15vw;bottom:-25vw;background:radial-gradient(circle,rgba(255,80,150,.13),rgba(91,38,255,.08) 35%,transparent 68%);filter:blur(24px);pointer-events:none}.trust-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px}.trust-logos span{height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.025);color:#8e8996;font:600 9px/1 'Space Grotesk';letter-spacing:.16em}.testimonial-grid{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:18px}.testimonial-card{min-height:190px;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));box-shadow:0 24px 80px rgba(0,0,0,.3);position:relative;overflow:hidden}.testimonial-card::after{content:"";position:absolute;inset:auto -20% -65% 35%;height:180px;background:radial-gradient(circle,rgba(109,39,255,.22),transparent 65%);filter:blur(18px)}.quote-mark{font:500 60px/1 'Space Grotesk';color:#b25cff;margin-bottom:4px}.testimonial-card p{font-size:17px;line-height:1.45;color:#eeeaf1;max-width:600px;margin:0 0 24px}.testimonial-person{display:grid;gap:5px;position:absolute;bottom:24px}.testimonial-person b{font:600 10px/1 'Space Grotesk';letter-spacing:.12em;text-transform:uppercase}.testimonial-person span{font-size:10px;color:#85808d}.metric-card{display:flex;flex-direction:column;justify-content:center}.metric-card strong{font:600 25px/1.05 'Space Grotesk';letter-spacing:-.04em}.metric-card>span{font-size:12px;color:#9c96a4;margin-top:7px}.metric-card b{font:600 8px/1.3 'Space Grotesk';letter-spacing:.12em;color:#b4aebc;margin-top:18px}.metric-line{height:1px;width:75%;margin-top:24px;background:linear-gradient(90deg,var(--purple),var(--pink),transparent)}
.about-contact-card{height:70vh;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));padding:28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 90px rgba(0,0,0,.3)}.contact-card-top{display:flex;justify-content:space-between;font:600 9px/1 'Space Grotesk';letter-spacing:.16em;color:#a9a3af}.contact-card-top b{color:#76f0ac;font-weight:600}.contact-form{display:grid;gap:17px}.contact-form label{display:grid;gap:8px;font:600 9px/1 'Space Grotesk';letter-spacing:.14em;text-transform:uppercase;color:#aaa4b0}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(0,0,0,.2);padding:13px 14px;color:#f4f1f6;font:400 13px/1.4 'DM Sans';outline:none;resize:none}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(172,78,255,.7);box-shadow:0 0 0 3px rgba(105,39,255,.08)}.contact-form .btn{justify-self:start;background:rgba(255,255,255,.05);cursor:pointer}.contact-details{display:grid;gap:6px;margin-bottom:24px}.contact-details span{font:600 9px/1 'Space Grotesk';letter-spacing:.16em;text-transform:uppercase;color:#8f8996}.contact-details strong{font:500 16px/1.2 'Space Grotesk';color:#f1edf4}
@media(max-width:950px){.landscape-grid{gap:24px!important}.testimonial-head{grid-template-columns:1fr 280px}.testimonial-grid{grid-template-columns:1fr 1fr}.metric-card{grid-column:1/-1}.about-contact-card{height:auto;min-height:60vh}.card-copy p,.portrait-copy p,.digital-card p{font-size:12px}}
@media(max-width:700px){.landscape-grid{gap:20px!important}.digital-grid{gap:20px!important}.portrait-row{gap:12px!important}.service-screen{padding-left:20px;padding-right:20px}.testimonial-screen{padding:92px 20px 24px;justify-content:center}.testimonial-head{display:block;margin-bottom:22px}.testimonial-head h2{font-size:45px}.testimonial-head>p{font-size:11px;margin-top:12px}.trust-logos{grid-template-columns:repeat(2,1fr);gap:8px}.trust-logos span{height:42px;font-size:7px}.testimonial-grid{grid-template-columns:1fr;gap:10px}.testimonial-card{min-height:180px;padding:22px}.testimonial-card p{font-size:14px}.metric-card{grid-column:auto;min-height:130px}.about-contact-card{width:100%;height:auto;min-height:55vh;padding:20px}.contact-card-top{font-size:7px}.contact-form{gap:13px}.contact-details strong{font-size:14px}.card-copy p,.portrait-copy p,.digital-card p{font-size:11px;line-height:1.58}.service-card h3,.digital-card h3,.portrait-copy h3{font-size:15px}}

/* Canvas & Pixel signature glow: every card gets a subtle animated perimeter, with a stronger hover state. */
.service-card::before,.digital-card::before,.portrait-card::before,
.brief-card::before,.board-card::before,.timeline-card::before,.refine-card::before,.deliver-card::before,
.testimonial-card::before,.about-contact-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--angle,0deg),transparent 0 18%,rgba(105,39,255,.85) 27%,rgba(216,46,157,.95) 43%,rgba(255,122,44,.9) 57%,transparent 69%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.24;animation:borderSpin 6s linear infinite;
  pointer-events:none;z-index:20;
}
.service-card:hover::before,.digital-card:hover::before,.portrait-card:hover::before,
.brief-card:hover::before,.board-card:hover::before,.timeline-card:hover::before,.refine-card:hover::before,.deliver-card:hover::before,
.testimonial-card:hover::before,.about-contact-card:hover::before{
  opacity:1;animation-duration:2.4s;
}
.brief-card>*,.board-card>*,.timeline-card>*,.refine-card>*,.deliver-card>*,.testimonial-card>*,.about-contact-card>*{position:relative;z-index:21}
@media (prefers-reduced-motion:reduce){
  .service-card::before,.digital-card::before,.portrait-card::before,.brief-card::before,.board-card::before,.timeline-card::before,.refine-card::before,.deliver-card::before,.testimonial-card::before,.about-contact-card::before{animation:none}
}

/* v11 reliability + mobile polish */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#050507}
.hero-media{background:#050507}
.hero-shade{pointer-events:none}
.sound-toggle{position:relative;z-index:5;cursor:pointer}
.modal-actions{justify-content:flex-start}

@media(max-width:700px){
  .site-header:not(.hero-hidden){background:transparent}
  .service-screen{padding-top:86px}
  .landscape-grid{grid-template-columns:1fr!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;height:calc(100% - 150px)!important;gap:14px!important;overflow:auto;padding:2px 2px 12px}
  .service-card.media-text{grid-template-columns:40% 60%!important;min-height:145px;aspect-ratio:auto!important}
  .service-card.media-text>img,.service-card.media-text .coming-media{height:100%!important;min-height:0}
  .card-copy{padding:15px!important;display:flex;flex-direction:column;justify-content:center}
  .card-copy h3{font-size:18px!important;line-height:1.05!important}
  .card-copy p{font-size:10px!important;line-height:1.45!important;margin-top:7px}
  .portrait-row{display:flex!important;grid-template-columns:none!important;gap:14px!important;height:calc(100% - 150px)!important;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;scroll-snap-type:x mandatory}
  .portrait-row .portrait-card{flex:0 0 78vw;width:78vw;height:100%;scroll-snap-align:start}
  .portrait-copy{padding:16px!important}
  .portrait-copy h3{font-size:19px!important}
  .portrait-copy p{font-size:10px!important;line-height:1.5!important}
  .digital-grid{grid-template-columns:1fr!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;height:calc(100% - 150px)!important;gap:14px!important;overflow:auto;padding:2px 2px 12px}
  .digital-card{grid-template-columns:40% 60%!important;min-height:145px}
  .digital-card img{height:100%!important}
  .digital-card>div{padding:15px!important;display:flex;flex-direction:column;justify-content:center}
  .digital-card h3{font-size:18px!important;line-height:1.05!important}
  .digital-card p{font-size:10px!important;line-height:1.45!important;margin-top:7px}
  .process-screen{overflow:hidden}
  .process-intro{top:9vh!important}
  .cinematic-copy h2{font-size:48px!important}
  .process-lead{font-size:11px!important;line-height:1.5!important;max-width:88vw!important}
  .process-stage{left:6vw!important;top:53%!important;width:88vw!important;height:39vh;transform:translateY(12%) scale(.94)!important;display:block!important}
  .process-stage.is-active{transform:translateY(0) scale(1)!important}
  .stage-copy{width:100%!important;max-width:none!important}
  .stage-copy h3{font-size:24px!important;line-height:1.05!important}
  .stage-copy p{font-size:10px!important;line-height:1.45!important;max-width:78vw!important}
  .brief-card,.board-card,.timeline-card,.refine-card,.deliver-card{width:100%!important;max-width:88vw!important;bottom:0!important;right:auto!important;top:auto!important;transform:none!important}
  .brief-card{height:27vh!important}
  .board-card{height:27vh!important}
  .timeline-card{height:23vh!important}
  .refine-card{height:25vh!important}
  .deliver-card{height:25vh!important}
  .process-footer{bottom:2vh!important;font-size:8px}
  .testimonial-screen{padding:88px 20px 22px!important;justify-content:center!important}
  .testimonial-head h2{font-size:43px!important;line-height:1!important}
  .trust-logos{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .testimonial-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px}
  .testimonial-card{flex:0 0 86vw;min-height:205px;scroll-snap-align:start}
  .metric-card{min-height:160px!important}
  .about-screen{padding-top:86px!important}
  .about-contact-card{min-height:0!important;height:auto!important}
  .contact-form .btn{width:100%}
  .cta-screen h2{font-size:48px!important}
}

/* v12 polish: hero controls, true horizontal desktop grids, visible animated gradient strokes */
.hero-bottom{position:relative;width:100%;height:100%;display:block!important}
.hero-bottom>span:first-child{position:absolute;left:0;bottom:0}
.hero-bottom>.sound-toggle{position:absolute;right:0;bottom:34px}
.hero-bottom>span:last-child{position:absolute;right:0;bottom:0}
.sound-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(5,5,7,.34);backdrop-filter:blur(14px);color:#eee;letter-spacing:.18em;font-size:8px;text-transform:uppercase;transition:.3s}
.sound-toggle:hover{border-color:rgba(255,255,255,.55);transform:translateY(-2px)}

/* Desktop: keep the landscape work cards in one clean horizontal row. */
.landscape-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:1fr!important;gap:34px!important;overflow:visible!important}
.portrait-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:34px!important;overflow:visible!important}

/* Always-on animated gradient perimeter. */
.service-card,.digital-card,.portrait-card,.brief-card,.board-card,.timeline-card,.refine-card,.deliver-card,.testimonial-card,.about-contact-card{isolation:isolate}
.service-card::before,.digital-card::before,.portrait-card::before,.brief-card::before,.board-card::before,.timeline-card::before,.refine-card::before,.deliver-card::before,.testimonial-card::before,.about-contact-card::before{
  content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;pointer-events:none;z-index:30;opacity:.7;
  background:conic-gradient(from var(--angle,0deg),transparent 0 12%,rgba(105,39,255,.98) 23%,rgba(216,46,157,1) 40%,rgba(255,122,44,1) 55%,transparent 68%,rgba(105,39,255,.85) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:borderSpin 5.5s linear infinite;
  transition:opacity .35s,filter .35s;
}
.service-card::after,.digital-card::after,.portrait-card::after{z-index:1}
.service-card:hover::before,.digital-card:hover::before,.portrait-card:hover::before,.brief-card:hover::before,.board-card:hover::before,.timeline-card:hover::before,.refine-card:hover::before,.deliver-card:hover::before,.testimonial-card:hover::before,.about-contact-card:hover::before{opacity:1;filter:drop-shadow(0 0 7px rgba(181,62,255,.65))}

@media(max-width:950px) and (min-width:701px){.landscape-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important}.portrait-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important}}
@media(max-width:700px){
  .hero-bottom>span:first-child{left:0;bottom:0}
  .hero-bottom>.sound-toggle{right:0;bottom:38px}
  .hero-bottom>span:last-child{right:0;bottom:0}
  .landscape-grid{grid-template-columns:1fr!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;gap:14px!important;overflow:auto!important}
  .portrait-row{display:flex!important;grid-template-columns:none!important;gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important}
  .portrait-row .portrait-card{flex:0 0 78vw;width:78vw}
}

/* v13 visual correction pass */
@property --cp-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Force true horizontal desktop rows, never a stacked grid. */
@media (min-width: 951px){
  .landscape-grid,
  .portrait-row{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:1fr !important;
    gap:34px !important;
    overflow:visible !important;
  }
  .landscape-grid .service-card,
  .portrait-row .service-card{
    width:auto !important;
    min-width:0 !important;
  }
}

/* Make the signature gradient stroke unmistakable and continuously animated. */
.service-card,
.digital-card,
.brief-card,
.board-card,
.timeline-card,
.refine-card,
.deliver-card,
.testimonial-card,
.about-contact-card{
  --cp-angle:0deg;
  border:1.5px solid transparent !important;
  background-clip:padding-box !important;
}

.service-card::before,
.digital-card::before,
.portrait-card::before,
.brief-card::before,
.board-card::before,
.timeline-card::before,
.refine-card::before,
.deliver-card::before,
.testimonial-card::before,
.about-contact-card::before{
  content:"";
  position:absolute;
  inset:-1.5px;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(
    from var(--cp-angle),
    rgba(105,39,255,0) 0deg,
    rgba(105,39,255,.98) 55deg,
    rgba(216,46,157,1) 125deg,
    rgba(255,122,44,1) 185deg,
    rgba(105,39,255,.98) 250deg,
    rgba(105,39,255,0) 325deg,
    rgba(105,39,255,0) 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.9 !important;
  animation:cpBorderSpin 4.8s linear infinite !important;
  pointer-events:none;
  z-index:40;
}

.service-card::after,
.digital-card::after,
.portrait-card::after{
  pointer-events:none;
}

@keyframes cpBorderSpin{
  to{--cp-angle:360deg}
}

/* A soft halo behind the stroke, without washing out the card artwork. */
.service-card,
.digital-card,
.portrait-card,
.brief-card,
.board-card,
.timeline-card,
.refine-card,
.deliver-card,
.testimonial-card,
.about-contact-card{
  box-shadow:0 0 0 1px rgba(255,255,255,.035), 0 18px 55px rgba(0,0,0,.22);
}
.service-card:hover,
.digital-card:hover,
.portrait-card:hover,
.brief-card:hover,
.board-card:hover,
.timeline-card:hover,
.refine-card:hover,
.deliver-card:hover,
.testimonial-card:hover,
.about-contact-card:hover{
  box-shadow:0 0 22px rgba(105,39,255,.16),0 0 55px rgba(216,46,157,.10),0 28px 85px rgba(0,0,0,.38) !important;
}

@media (max-width:700px){
  .landscape-grid{
    display:grid !important;
    grid-auto-flow:row !important;
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
  }
  .portrait-row{
    display:flex !important;
    grid-auto-flow:initial !important;
    grid-template-columns:none !important;
  }
  .portrait-row .portrait-card{flex:0 0 78vw !important;width:78vw !important}
}

@media (prefers-reduced-motion:reduce){
  .service-card::before,.digital-card::before,.portrait-card::before,
  .brief-card::before,.board-card::before,.timeline-card::before,
  .refine-card::before,.deliver-card::before,.testimonial-card::before,
  .about-contact-card::before{animation:none !important}
}

/* v14 final visual pass: explicit horizontal rails + unmistakable animated edge light */
@media (min-width: 951px){
  .landscape-grid{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:36px !important;
    width:100% !important;
    height:calc(100% - 150px) !important;
    overflow:visible !important;
  }
  .landscape-grid > .service-card{
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    height:100% !important;
    grid-column:auto !important;
    grid-row:auto !important;
  }
  .portrait-row{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:36px !important;
    width:100% !important;
    height:calc(100% - 150px) !important;
    overflow:visible !important;
  }
  .portrait-row > .portrait-card{
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    height:100% !important;
  }
}

/* Make the gradient perimeter visibly travel around every card. */
.service-card,
.digital-card,
.portrait-card,
.brief-card,
.board-card,
.timeline-card,
.refine-card,
.deliver-card,
.testimonial-card,
.about-contact-card{
  --cp-angle:0deg;
  position:relative;
}

.service-card::before,
.digital-card::before,
.portrait-card::before,
.brief-card::before,
.board-card::before,
.timeline-card::before,
.refine-card::before,
.deliver-card::before,
.testimonial-card::before,
.about-contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  padding:2px;
  border-radius:inherit;
  background:conic-gradient(
    from var(--cp-angle),
    transparent 0deg 285deg,
    rgba(105,39,255,.15) 300deg,
    rgba(105,39,255,1) 315deg,
    rgba(216,46,157,1) 332deg,
    rgba(255,122,44,1) 345deg,
    rgba(255,255,255,.95) 352deg,
    transparent 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  z-index:50;
  pointer-events:none;
  opacity:.95;
  animation:cpEdgeTravel 4.2s linear infinite;
}

/* soft glow follows the same moving highlight */
.service-card::marker{display:none}
.service-card,
.digital-card,
.portrait-card,
.brief-card,
.board-card,
.timeline-card,
.refine-card,
.deliver-card,
.testimonial-card,
.about-contact-card{
  box-shadow:0 0 0 1px rgba(255,255,255,.025),
             0 18px 55px rgba(0,0,0,.22);
}

@keyframes cpEdgeTravel{
  0%{--cp-angle:0deg}
  100%{--cp-angle:360deg}
}

@media (hover:hover) and (min-width:701px){
  .service-card:hover::before,
  .digital-card:hover::before,
  .portrait-card:hover::before,
  .brief-card:hover::before,
  .board-card:hover::before,
  .timeline-card:hover::before,
  .refine-card:hover::before,
  .deliver-card:hover::before,
  .testimonial-card:hover::before,
  .about-contact-card:hover::before{
    opacity:1;
    filter:drop-shadow(0 0 5px rgba(105,39,255,.9))
           drop-shadow(0 0 12px rgba(216,46,157,.45));
    animation-duration:2.2s;
  }
  .service-card:hover,
  .digital-card:hover,
  .portrait-card:hover,
  .brief-card:hover,
  .board-card:hover,
  .timeline-card:hover,
  .refine-card:hover,
  .deliver-card:hover,
  .testimonial-card:hover,
  .about-contact-card:hover{
    box-shadow:0 0 25px rgba(105,39,255,.18),
               0 0 65px rgba(216,46,157,.10),
               0 28px 85px rgba(0,0,0,.38);
  }
}

@media (max-width:700px){
  .landscape-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    overflow:auto !important;
  }
  .landscape-grid > .service-card{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
  }
  .portrait-row{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    overflow-x:auto !important;
  }
  .portrait-row > .portrait-card{
    flex:0 0 78vw !important;
    width:78vw !important;
    height:100% !important;
  }
}

/* v15 layout + signature dual animated glow system */
:root{--cp-purple:#6d39ff;--cp-pink:#ee35c7;--cp-orange:#ff7b35;--cp-blue:#5a72ff}

/* Creative & Content: true 2 x 2 landscape grid on desktop */
@media (min-width:951px){
  .service-content .landscape-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:28px!important;
    height:calc(100% - 148px)!important;
    overflow:visible!important;
  }
  .service-content .landscape-grid>.service-card{
    width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;
    aspect-ratio:auto!important;
  }
  .service-social .portrait-row{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    gap:28px!important;height:calc(100% - 148px)!important;overflow:visible!important;
  }
  .service-social .portrait-row>.portrait-card{
    flex:1 1 0!important;width:0!important;height:100%!important;min-width:0!important;
  }
}

/* A subtle full perimeter base keeps the rest of the edge alive between the moving highlights. */
.service-card,.digital-card,.portrait-card,.brief-card,.board-card,.timeline-card,.refine-card,.deliver-card,.testimonial-card,.about-contact-card{
  border:1px solid rgba(190,100,255,.20)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 14px 44px rgba(0,0,0,.24),0 0 28px rgba(105,39,255,.035);
}

/* Two independent moving light segments, exactly 180 degrees apart. */
.service-card::before,.service-card::after,
.digital-card::before,.digital-card::after,
.portrait-card::before,.portrait-card::after,
.brief-card::before,.brief-card::after,
.board-card::before,.board-card::after,
.timeline-card::before,.timeline-card::after,
.refine-card::before,.refine-card::after,
.deliver-card::before,.deliver-card::after,
.testimonial-card::before,.testimonial-card::after,
.about-contact-card::before,.about-contact-card::after{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  padding:2px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  z-index:60!important;
}

/* Primary stroke */
.service-card::before,.digital-card::before,.portrait-card::before,.brief-card::before,.board-card::before,.timeline-card::before,.refine-card::before,.deliver-card::before,.testimonial-card::before,.about-contact-card::before{
  background:conic-gradient(from var(--cp-angle-a,0deg),transparent 0deg 292deg,rgba(105,39,255,.30) 304deg,rgba(105,39,255,1) 316deg,rgba(238,53,199,1) 332deg,rgba(255,123,53,1) 345deg,rgba(255,255,255,.95) 352deg,transparent 360deg)!important;
  animation:cpDualA 4.6s linear infinite!important;
  filter:drop-shadow(0 0 4px rgba(109,57,255,.95)) drop-shadow(0 0 11px rgba(238,53,199,.55)) drop-shadow(0 0 22px rgba(255,123,53,.22))!important;
}
/* 180-degree offset stroke */
.service-card::after,.digital-card::after,.portrait-card::after,.brief-card::after,.board-card::after,.timeline-card::after,.refine-card::after,.deliver-card::after,.testimonial-card::after,.about-contact-card::after{
  background:conic-gradient(from var(--cp-angle-b,180deg),transparent 0deg 292deg,rgba(105,39,255,.30) 304deg,rgba(105,39,255,1) 316deg,rgba(238,53,199,1) 332deg,rgba(255,123,53,1) 345deg,rgba(255,255,255,.95) 352deg,transparent 360deg)!important;
  animation:cpDualB 4.6s linear infinite!important;
  filter:drop-shadow(0 0 4px rgba(109,57,255,.95)) drop-shadow(0 0 11px rgba(238,53,199,.55)) drop-shadow(0 0 22px rgba(255,123,53,.22))!important;
}

@keyframes cpDualA{to{--cp-angle-a:360deg}}
@keyframes cpDualB{to{--cp-angle-b:540deg}}

/* Keep media and copy above the glow layers. */
.service-card>img,.digital-card>img,.portrait-card>img,.service-card>div,.digital-card>div,.portrait-card>div{position:relative;z-index:4}
.service-card:hover,.digital-card:hover,.portrait-card:hover,.brief-card:hover,.board-card:hover,.timeline-card:hover,.refine-card:hover,.deliver-card:hover,.testimonial-card:hover,.about-contact-card:hover{
  box-shadow:0 0 24px rgba(109,57,255,.24),0 0 54px rgba(238,53,199,.16),0 0 88px rgba(255,123,53,.07),0 28px 85px rgba(0,0,0,.42)!important;
}
@media(max-width:700px){
  .service-content .landscape-grid{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;gap:14px!important;overflow:auto!important}
  .service-social .portrait-row{display:flex!important;flex-wrap:nowrap!important;gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important}
  .service-social .portrait-row>.portrait-card{flex:0 0 78vw!important;width:78vw!important}
}

/* v16 requested polish: working dual 180° glow animation, centered play controls,
   branded vertical thumbnails, typography-led section notes, and richer client trust. */
@property --cp-angle-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --cp-angle-b {
  syntax: '<angle>';
  inherits: false;
  initial-value: 180deg;
}

/* Make the two moving edge lights actually animate. The second segment is locked 180° behind the first. */
.service-card::before,.digital-card::before,.portrait-card::before,
.brief-card::before,.board-card::before,.timeline-card::before,.refine-card::before,.deliver-card::before,
.testimonial-card::before,.about-contact-card::before{
  background:conic-gradient(from var(--cp-angle-a),
    transparent 0deg 294deg,
    rgba(105,39,255,.22) 304deg,
    rgba(105,39,255,1) 316deg,
    rgba(238,53,199,1) 331deg,
    rgba(255,123,53,1) 345deg,
    rgba(255,255,255,.98) 352deg,
    transparent 360deg) !important;
  animation:cpDualA 4.8s linear infinite !important;
  filter:drop-shadow(0 0 4px rgba(109,57,255,1))
         drop-shadow(0 0 10px rgba(238,53,199,.72))
         drop-shadow(0 0 24px rgba(255,123,53,.36)) !important;
}
.service-card::after,.digital-card::after,.portrait-card::after,
.brief-card::after,.board-card::after,.timeline-card::after,.refine-card::after,.deliver-card::after,
.testimonial-card::after,.about-contact-card::after{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  padding:2px !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  z-index:60 !important;
  background:conic-gradient(from var(--cp-angle-b),
    transparent 0deg 294deg,
    rgba(105,39,255,.22) 304deg,
    rgba(105,39,255,1) 316deg,
    rgba(238,53,199,1) 331deg,
    rgba(255,123,53,1) 345deg,
    rgba(255,255,255,.98) 352deg,
    transparent 360deg) !important;
  animation:cpDualB 4.8s linear infinite !important;
  filter:drop-shadow(0 0 4px rgba(109,57,255,1))
         drop-shadow(0 0 10px rgba(238,53,199,.72))
         drop-shadow(0 0 24px rgba(255,123,53,.36)) !important;
}
@keyframes cpDualA { to { --cp-angle-a:360deg; } }
@keyframes cpDualB { to { --cp-angle-b:540deg; } }

/* Keep a low-intensity bloom around the whole perimeter so the cards never feel dead between passes. */
.service-card,.digital-card,.portrait-card,.brief-card,.board-card,.timeline-card,.refine-card,.deliver-card,.testimonial-card,.about-contact-card{
  box-shadow:0 0 0 1px rgba(185,105,255,.08),
             0 0 18px rgba(105,39,255,.08),
             0 18px 55px rgba(0,0,0,.22) !important;
}

/* Typography-led section descriptions. */
.screen-head > .type-note{
  position:relative;
  max-width:390px !important;
  color:#b8b3bf !important;
  font-family:'DM Sans',sans-serif;
  font-size:13px !important;
  line-height:1.55 !important;
  letter-spacing:-.01em;
  padding-left:20px;
}
.screen-head > .type-note::before{
  content:"";
  position:absolute;
  left:0;top:.2em;bottom:.2em;width:2px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--purple),var(--pink),var(--orange));
  box-shadow:0 0 18px rgba(216,46,157,.42);
}
.type-note .type-word{
  display:inline-block;
  margin-right:.12em;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.42em;
  line-height:.88;
  font-weight:600;
  letter-spacing:-.045em;
  color:#f5f2f7;
  background:linear-gradient(100deg,#fff 0%,#d6d0df 42%,#a7a0b0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.service-content .type-note .type-word:nth-child(1){background:linear-gradient(100deg,#fff,#bda8ff);-webkit-background-clip:text;background-clip:text}
.service-social .type-note .type-word:nth-child(1),.service-social .type-note .type-word:nth-child(3){background:linear-gradient(100deg,#8f6cff,#f33ac5,#ff7b35);-webkit-background-clip:text;background-clip:text}
.service-digital .type-note .type-word{background:linear-gradient(100deg,#f4f0ff,#b76aff,#ff6b86);-webkit-background-clip:text;background-clip:text}

/* Thumbnail regions + play controls: the button is centered inside the actual image region. */
.service-card.media-text{grid-template-columns:42% 58% !important}
.service-card.media-text .thumb{
  position:relative !important;
  left:auto !important;right:auto !important;bottom:auto !important;
  width:100% !important;height:100% !important;
  min-width:0;min-height:0;overflow:hidden;
  padding:0 !important;
  z-index:3 !important;
  background:#08080b;
}
.service-card.media-text .thumb img{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;
}
.play-badge{
  position:absolute !important;
  left:50% !important;top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  padding-left:2px;
  background:rgba(5,5,8,.52);
  border:1px solid rgba(255,255,255,.68);
  color:#fff;
  font-size:13px;
  line-height:1;
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 5px rgba(5,5,8,.12),0 0 24px rgba(184,66,255,.32);
  z-index:15 !important;
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
.service-card:hover .play-badge{transform:translate(-50%,-50%) scale(1.08) !important;box-shadow:0 0 0 5px rgba(5,5,8,.12),0 0 34px rgba(238,53,199,.55),0 0 55px rgba(105,39,255,.25);background:rgba(9,7,14,.62)}
.service-card.media-text .card-copy{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;height:100%;padding:26px !important;z-index:5 !important;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(9,8,12,.97),rgba(18,9,24,.88))}
.service-card.media-text .card-copy h3{font-size:clamp(21px,2vw,30px);margin:0 0 10px}
.service-card.media-text .card-copy p{font-size:12px;line-height:1.65;max-width:470px}

/* Portrait thumbnails get the same cinematic treatment as the landscape set. */
.portrait-card .thumb{
  position:relative !important;
  width:100% !important;height:61% !important;flex:none !important;
  overflow:hidden !important;padding:0 !important;
  left:auto !important;right:auto !important;bottom:auto !important;
  z-index:3 !important;
  background:#08080b;
}
.portrait-card .thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(104,39,255,.20),transparent 36%,rgba(255,82,154,.16) 67%,rgba(255,116,44,.22)),linear-gradient(180deg,transparent 45%,rgba(4,4,7,.16));
  mix-blend-mode:screen;
}
.portrait-card .thumb img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;filter:saturate(.92) contrast(1.03) !important}
.portrait-card .portrait-copy{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;height:39%;padding:20px 20px 18px !important;z-index:5 !important;background:linear-gradient(145deg,rgba(9,8,12,.98),rgba(18,8,23,.92));display:flex;flex-direction:column;justify-content:center}
.portrait-card .portrait-copy h3{font-size:18px;line-height:1.04;margin:0 0 8px}
.portrait-card .portrait-copy p{font-size:10.5px;line-height:1.55;margin:0}

/* Hide the baked-in play symbol underneath our centered control with a controlled vignette. */
.portrait-card .thumb::before,.service-card.media-text .thumb::before{
  content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(5,5,8,.58);filter:blur(2px);z-index:10;pointer-events:none;
}

/* More engaging client-trust screen, without changing its information architecture. */
.testimonial-screen::before{
  content:"TRUST";
  position:absolute;
  right:3vw;top:9vh;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(110px,18vw,300px);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.09em;
  color:rgba(255,255,255,.018);
  pointer-events:none;
  transform:translateY(0);
  animation:trustFloat 12s ease-in-out infinite alternate;
}
.testimonial-head,.trust-logos,.testimonial-grid{position:relative;z-index:3}
.trust-logos span{position:relative;overflow:hidden;transition:transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease}
.trust-logos span::after{content:"";position:absolute;top:-20%;left:-40%;width:25%;height:140%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:trustSweep 6s linear infinite}
.trust-logos span:nth-child(2)::after{animation-delay:-1.2s}.trust-logos span:nth-child(3)::after{animation-delay:-2.4s}.trust-logos span:nth-child(4)::after{animation-delay:-3.6s}.trust-logos span:nth-child(5)::after{animation-delay:-4.8s}
.trust-logos span:hover{transform:translateY(-3px);border-color:rgba(221,70,214,.32);box-shadow:0 0 25px rgba(105,39,255,.12)}
.testimonial-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .35s ease}
.testimonial-card.featured{background:radial-gradient(circle at 78% 18%,rgba(105,39,255,.12),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018))}
.testimonial-card.featured::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--purple),var(--pink),var(--orange),transparent);filter:blur(.2px);opacity:.85}
.metric-card strong{font-size:clamp(32px,3vw,54px)!important;letter-spacing:-.065em}
.metric-card strong::after{content:"";display:inline-block;width:9px;height:9px;margin:0 0 6px 5px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--orange));box-shadow:0 0 18px rgba(238,53,199,.55)}
@keyframes trustSweep{0%{left:-45%}100%{left:135%}}
@keyframes trustFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2vw,2vh,0) scale(1.025)}}

@media(max-width:700px){
  .screen-head > .type-note{max-width:none !important;padding-left:14px;font-size:10.5px !important;line-height:1.48 !important;margin-top:12px}
  .type-note .type-word{font-size:1.22em}
  .service-card.media-text{grid-template-columns:40% 60% !important}
  .service-card.media-text .card-copy{padding:14px !important}
  .service-card.media-text .card-copy h3{font-size:16px !important}
  .service-card.media-text .card-copy p{font-size:9.5px !important;line-height:1.45 !important}
  .play-badge{width:42px;height:42px;font-size:11px}
  .portrait-card .thumb{height:58% !important}
  .portrait-card .portrait-copy{height:42% !important;padding:15px !important}
  .portrait-card .portrait-copy h3{font-size:17px !important}
  .portrait-card .portrait-copy p{font-size:9.5px !important;line-height:1.48 !important}
  .testimonial-screen::before{font-size:120px;right:-2vw;top:12vh}
}

/* v17: supplied portfolio thumbnails already include their single centered play control */
.play-badge{display:none!important;}


/* v18 locked visual updates: client trust redesign only */
.testimonial-screen{position:relative}
.trust-showcase{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.72fr);gap:18px;min-height:310px;margin-bottom:18px}
.trust-feature{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 28px 90px rgba(0,0,0,.34);position:relative}
.trust-feature-media{position:relative;min-height:300px;overflow:hidden}
.trust-feature-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.trust-feature:hover .trust-feature-media img{transform:scale(1.06)}
.trust-media-overlay{position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(7,7,10,.65)),linear-gradient(180deg,transparent 55%,rgba(7,7,10,.55))}
.trust-chip{position:absolute;left:18px;top:18px;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(5,5,8,.42);backdrop-filter:blur(12px);font:600 8px/1 'Space Grotesk';letter-spacing:.16em;color:#f2eff6}
.trust-feature-copy{position:relative;padding:30px 30px 28px;display:flex;flex-direction:column;justify-content:center}
.trust-feature-copy .quote-mark{margin-bottom:10px}
.trust-feature-copy p{font-size:17px;line-height:1.48;color:#eeeaf1;margin:0;max-width:520px}
.trust-feature-copy .testimonial-person{position:static;margin-top:24px}
.trust-side{display:grid;grid-template-rows:1fr 1fr;gap:18px;min-width:0}
.trust-visual-card{position:relative;min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:#0b0b0f;box-shadow:0 22px 65px rgba(0,0,0,.28)}
.trust-visual-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.trust-visual-card:hover img{transform:scale(1.06);filter:saturate(1.08)}
.trust-visual-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,5,8,.9) 100%);pointer-events:none}
.trust-visual-card>div{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:12px}
.trust-visual-card span{font:600 8px/1 'Space Grotesk';letter-spacing:.16em;text-transform:uppercase;color:#a7a1ae}
.trust-visual-card b{font:600 15px/1.1 'Space Grotesk';color:#fff}
.trust-proof-row{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px}
.proof-label{font:600 8px/1.2 'Space Grotesk';letter-spacing:.18em;color:#77717e;white-space:nowrap}
.trust-proof-row .trust-logos{margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.trust-proof-row .trust-logos span{height:42px}
@media(max-width:950px){
 .trust-showcase{grid-template-columns:1fr;min-height:0}
 .trust-side{grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:190px}
 .trust-feature{min-height:310px}
 .trust-proof-row{grid-template-columns:1fr;gap:12px}
}
@media(max-width:700px){
 .testimonial-screen{padding-top:88px!important}
 .testimonial-head h2{font-size:43px!important}
 .trust-showcase{gap:12px;margin-bottom:14px}
 .trust-feature{grid-template-columns:1fr;min-height:0}
 .trust-feature-media{height:31vh;min-height:190px}
 .trust-feature-copy{padding:20px}
 .trust-feature-copy p{font-size:14px;line-height:1.48}
 .trust-feature-copy .testimonial-person{margin-top:18px}
 .trust-side{height:150px;gap:12px}
 .trust-visual-card{border-radius:17px}
 .trust-visual-card>div{left:12px;right:12px;bottom:12px;display:block}
 .trust-visual-card b{display:block;font-size:11px;margin-top:5px}
 .trust-proof-row .trust-logos{grid-template-columns:repeat(2,1fr)!important;gap:8px}
 .trust-proof-row .trust-logos span{height:38px}
 .proof-label{font-size:7px}
}

/* v20: Reels section only - larger, more legible section copy + gradient emphasis. */
.screen-head > .type-note{
  font-size:clamp(15px,1.15vw,18px) !important;
  line-height:1.48 !important;
  max-width:430px !important;
}
.service-content .type-note .type-word,
.service-social .type-note .type-word,
.service-digital .type-note .type-word{
  font-size:1.12em !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  letter-spacing:-.035em;
  background:linear-gradient(100deg,#8f6cff 0%,#d62fba 52%,#ff7835 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
@media(max-width:700px){
  .screen-head > .type-note{font-size:12.5px !important;line-height:1.5 !important}
  .type-note .type-word{font-size:1.12em !important}
}

/* v21: approved hero banner state + click-to-play transition */
.hero-media{overflow:hidden;background:#050507}
.hero-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:2;display:block;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.hero-banner-play{position:absolute;left:50%;top:90%;width:138px;height:138px;transform:translate(-50%,-50%);z-index:8;border:0;border-radius:50%;background:transparent;cursor:pointer}
.hero-banner-play::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(105,39,255,.08),transparent 58%);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 34px rgba(216,46,157,.16);transition:transform .45s ease,box-shadow .45s ease}
.hero-banner-play:hover::after{transform:scale(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 44px rgba(216,46,157,.34),0 0 70px rgba(105,39,255,.18)}
.hero-video{opacity:0;z-index:1;transition:opacity .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hero-ui{opacity:0;pointer-events:none;transition:opacity .5s ease}
.hero.is-playing .hero-banner{opacity:0;transform:scale(1.025);filter:blur(5px)}
.hero.is-playing .hero-banner-play{opacity:0;pointer-events:none}
.hero.is-playing .hero-video{opacity:1;z-index:4;pointer-events:auto}
.hero.is-playing .hero-ui{opacity:1;pointer-events:auto;z-index:9}
.site-header{transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1),background .45s ease}
.site-header.hero-playing{opacity:0;transform:translateY(-18px);pointer-events:none}
@media(max-width:700px){
  .hero-banner{object-fit:contain;object-position:center center}
  .hero-banner-play{width:104px;height:104px;top:89%}
}
.site-header.hero-banner-active{background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
/* v25: the approved hero artwork already contains its own header/navigation. Keep the real header hit areas aligned but visually invisible while the banner is showing, so the artwork is never covered or resized by the site chrome. */
.site-header.hero-banner-active .brand img,.site-header.hero-banner-active .desktop-nav,.site-header.hero-banner-active .nav-cta,.site-header.hero-banner-active .menu-btn{opacity:0!important}
@media(max-width:700px){.site-header.hero-banner-active .menu-btn{opacity:0!important}}



/* v22 Reels refinement: keep titles unchanged; increase only card description readability. */
.service-social .portrait-card .portrait-copy p{
  font-size:14px !important;
  line-height:1.58 !important;
}
@media(max-width:700px){
  .service-social .portrait-card .portrait-copy p{
    font-size:11.5px !important;
    line-height:1.55 !important;
  }
}


/* v23: Client Trust redesign only. Everything else remains locked. */
.trust-screen{
  position:relative;
  overflow:hidden;
  padding:92px 5vw 34px!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 12% 50%,rgba(105,39,255,.10),transparent 27%),
    radial-gradient(circle at 88% 35%,rgba(255,72,154,.08),transparent 25%),
    #07070a!important;
}
.trust-inner{width:100%;max-width:1500px;margin:0 auto;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;min-height:100%;}
.trust-bg-word{
  position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  font:700 clamp(120px,14vw,235px)/.72 'Space Grotesk',sans-serif;
  letter-spacing:-.12em;color:transparent;
  -webkit-text-stroke:1px rgba(151,76,255,.30);
  text-shadow:0 0 24px rgba(105,39,255,.14),0 0 72px rgba(216,46,157,.08);
  opacity:.92;pointer-events:none;z-index:1;white-space:normal;
}
.trust-bg-word::after{content:"";position:absolute;inset:12% 4%;background:linear-gradient(100deg,rgba(105,39,255,.20),rgba(216,46,157,.16),rgba(255,122,44,.14));filter:blur(26px);opacity:.32;z-index:-1;}
.trust-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.62fr);gap:7vw;align-items:center;margin-bottom:26px;position:relative;z-index:4;}
.trust-heading-copy h2{font-size:clamp(48px,5.4vw,82px);line-height:.92;letter-spacing:-.045em;margin:0;max-width:760px;}
.trust-heading-copy h2 span{background:linear-gradient(100deg,#7137ff,#d02ca0 54%,#ff7833);background-clip:text;-webkit-background-clip:text;color:transparent;}
.trust-heading>p{color:#b3aeb9;font-size:14px;line-height:1.65;margin:0;max-width:430px;border-left:3px solid transparent;border-image:linear-gradient(#d02ca0,#ff7833) 1;padding-left:22px;}
.trust-logo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative;z-index:4;}
.trust-logo-card{
  height:105px;border-radius:16px;position:relative;overflow:hidden;display:grid;place-items:center;padding:18px 24px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 50px rgba(0,0,0,.24);
  isolation:isolate;transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
.trust-logo-card::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--trust-angle,0deg),rgba(105,39,255,.0) 0deg,rgba(105,39,255,.95) 55deg,rgba(216,46,157,1) 125deg,rgba(255,122,44,.95) 185deg,rgba(105,39,255,.95) 250deg,rgba(105,39,255,0) 325deg,rgba(105,39,255,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.52;animation:trustBorderSpin 5.2s linear infinite;pointer-events:none;z-index:3;}
.trust-logo-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 110%,rgba(105,39,255,.16),transparent 60%);opacity:.7;z-index:0;pointer-events:none;}
.trust-logo-card:hover{transform:translateY(-4px);box-shadow:0 0 25px rgba(105,39,255,.14),0 0 55px rgba(216,46,157,.10),0 24px 65px rgba(0,0,0,.35);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018));}
.trust-logo-card:hover::before{opacity:1;animation-duration:2.5s;}
.trust-logo-card img{position:relative;z-index:2;max-width:92%;max-height:72px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.18));}
.trust-logo-card:nth-child(3) img{max-width:86%;max-height:68px}
.trust-logo-card:nth-child(6) img{max-width:80%;max-height:58px}
.trust-logo-card:nth-child(7) img{max-width:84%;max-height:60px}
.trust-logo-card:nth-child(8) img{max-width:88%;max-height:60px}
.trust-logo-card:nth-child(9) img{max-width:62%;max-height:76px}
.trust-logo-card:nth-child(10) img{max-width:90%;max-height:58px}
.trust-bottom{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);position:relative;z-index:4;}
.trust-bottom-copy{display:grid;gap:7px}.trust-bottom-copy span{font:500 10px/1 'Space Grotesk';letter-spacing:.28em;color:#aaa4b1}.trust-bottom-copy strong{font:600 clamp(24px,2.1vw,34px)/1.05 'Space Grotesk';letter-spacing:-.035em;background:linear-gradient(100deg,#7137ff,#d02ca0 54%,#ff7833);background-clip:text;-webkit-background-clip:text;color:transparent;}
.trust-metrics{display:grid;grid-template-columns:repeat(3,1fr);}.trust-metrics>div{display:grid;justify-items:center;gap:7px;padding:0 20px;border-left:1px solid rgba(255,255,255,.13)}.trust-metrics>div:first-child{border-left:0}.trust-metrics strong{font:600 clamp(26px,2.5vw,38px)/1 'Space Grotesk';letter-spacing:-.05em;background:linear-gradient(100deg,#7137ff,#d02ca0 60%,#ff7833);background-clip:text;-webkit-background-clip:text;color:transparent}.trust-metrics span{font:500 9px/1 'Space Grotesk';letter-spacing:.25em;color:#a9a3ae}
@property --trust-angle{syntax:'<angle>';inherits:false;initial-value:0deg}@keyframes trustBorderSpin{to{--trust-angle:360deg}}
@media(max-width:1100px) and (min-width:701px){.trust-heading{gap:4vw}.trust-logo-grid{gap:9px}.trust-logo-card{height:92px;padding:14px}.trust-bottom{gap:25px}.trust-heading>p{font-size:12px}}
@media(max-width:700px){
  .trust-screen{padding:86px 20px 22px!important;overflow:auto!important;justify-content:center!important;}
  .trust-inner{min-height:0;padding:8px 0 10px;}
  .trust-bg-word{left:-6px;top:50%;transform:translateY(-50%);font-size:27vw;line-height:.72;-webkit-text-stroke:1px rgba(151,76,255,.24)}
  .trust-heading{display:block;margin-bottom:18px}.trust-heading-copy h2{font-size:43px;line-height:.95;max-width:90vw}.trust-heading>p{font-size:11px;line-height:1.55;margin-top:15px;padding-left:15px;max-width:92vw}
  .trust-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.trust-logo-card{height:82px;border-radius:13px;padding:11px 10px}.trust-logo-card img{max-width:92%;max-height:48px}.trust-logo-card:nth-child(3) img{max-width:94%;max-height:46px}.trust-logo-card:nth-child(7) img{max-width:92%;max-height:45px}.trust-logo-card:nth-child(9) img{max-width:66%;max-height:55px}.trust-logo-card:nth-child(10) img{max-width:94%;max-height:46px}
  .trust-bottom{grid-template-columns:1fr;gap:20px;margin-top:18px;padding-top:17px}.trust-bottom-copy strong{font-size:24px}.trust-metrics{grid-template-columns:repeat(3,1fr)}.trust-metrics>div{padding:0 8px}.trust-metrics strong{font-size:24px}.trust-metrics span{font-size:7px;letter-spacing:.16em}
}

/* v24 responsive device artwork: landscape desktop + portrait mobile. */
.hero-banner-picture{position:absolute;inset:0;display:block;z-index:2}
.hero-banner-picture .hero-banner{position:absolute}
.trust-mobile-banner{display:none}
@media(max-width:700px){
  .hero-banner-picture .hero-banner{object-fit:contain;object-position:center center}
}


/* v26: final hero interaction polish. Approved artwork stays intact; controls align to its baked UI. */
.hero-banner-play{left:50%;top:80.8%;width:208px;height:208px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:8;outline:none}
.hero-banner-play::after{display:none!important}
.hero-banner-play::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2.5px;background:conic-gradient(from var(--play-angle,0deg),#7137ff 0deg,#d62fba 110deg,#ff7833 190deg,#7137ff 300deg,#7137ff 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 7px rgba(210,55,190,.42)) drop-shadow(0 0 14px rgba(105,55,255,.18));animation:playStrokeSpin 2.8s linear infinite;pointer-events:none}
.hero-banner-play:hover::before{filter:drop-shadow(0 0 9px rgba(210,55,190,.65)) drop-shadow(0 0 18px rgba(105,55,255,.3))}
@property --play-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes playStrokeSpin{to{--play-angle:360deg}}
.hero-scroll-anim{position:absolute;left:5.15%;top:86.5%;width:32px;height:66px;z-index:8;pointer-events:none;opacity:.95;border-radius:18px;box-shadow:0 0 16px rgba(105,55,255,.16);animation:scrollPulse 2.2s ease-in-out infinite}
.hero-scroll-anim::before{content:"";position:absolute;left:50%;top:9px;width:2px;height:15px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.2));animation:scrollDot 1.5s ease-in-out infinite}
.hero-scroll-anim::after{content:"";position:absolute;left:50%;bottom:4px;width:9px;height:9px;border-right:2px solid rgba(255,255,255,.9);border-bottom:2px solid rgba(255,255,255,.9);transform:translateX(-50%) rotate(45deg);animation:scrollChevron 1.5s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.65;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes scrollDot{0%,100%{opacity:.35;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,8px)}}
@keyframes scrollChevron{0%,100%{opacity:.35;transform:translate(-50%,-2px) rotate(45deg)}50%{opacity:1;transform:translate(-50%,4px) rotate(45deg)}}
@media(max-width:700px){.hero-banner-play{width:152px;height:152px;top:88.1%}.hero-scroll-anim{left:7.8%;top:87.2%;width:28px;height:58px}}
@media(prefers-reduced-motion:reduce){.hero-banner-play::before,.hero-scroll-anim,.hero-scroll-anim::before,.hero-scroll-anim::after{animation:none!important}}

/* v27: remove duplicate hero control artwork. The approved banners already contain the final visible Play and Scroll UI. Keep only an invisible aligned Play hit-area. */
.hero-banner-play{background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;}
.hero-banner-play::before,.hero-banner-play::after{display:none!important;content:none!important;}
.hero-scroll-anim{display:none!important;animation:none!important;}
.hero-scroll-anim::before,.hero-scroll-anim::after{display:none!important;animation:none!important;content:none!important;}


/* v29 requested: remove TRUST background word; keep Client Trust layout unchanged. */
.trust-bg-word{display:none!important}

/* v29 requested: approved Plan card content only. Keep the existing animated outer stroke. */
.board-card-reference{padding:0!important;overflow:hidden!important;background:#0d0b16!important}
.board-card-reference>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit}

/* v29 requested: Play stroke + hover glow. Size and alignment remain locked to the existing hit-area. */
.hero-banner-play{background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important}
.hero-banner-play::before{display:block!important;content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:conic-gradient(from var(--play-angle,0deg),rgba(113,55,255,.05),#7137ff 18%,#d62fba 46%,#ff7833 67%,#7137ff 88%,rgba(113,55,255,.05));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 5px rgba(210,55,190,.35));animation:playStrokeSpin 3.2s linear infinite;pointer-events:none}
.hero-banner-play:hover::before{filter:drop-shadow(0 0 8px rgba(210,55,190,.72)) drop-shadow(0 0 18px rgba(105,55,255,.34))}

/* v29 requested: neon scroll animation without drawing duplicate arrows. */
.hero-scroll-anim{display:block!important;position:absolute;z-index:8;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(216,46,157,.20) 0%,rgba(105,39,255,.14) 35%,rgba(255,122,44,.08) 58%,transparent 72%);filter:blur(1px);animation:scrollNeonPulse 2.4s ease-in-out infinite}
.hero-scroll-anim::before,.hero-scroll-anim::after{display:none!important;content:none!important}
@keyframes scrollNeonPulse{0%,100%{opacity:.28;transform:translateY(0) scale(.92)}50%{opacity:.82;transform:translateY(-5px) scale(1.06)}}
@media(max-width:700px){.hero-banner-play::before{padding:1.8px}.hero-scroll-anim{transform-origin:center}}
@media(prefers-reduced-motion:reduce){.hero-banner-play::before,.hero-scroll-anim{animation:none!important}}

/* v30: interaction-only correction. Keep locked Play size/alignment and banner artwork unchanged. */
.hero-banner-play{
  transition:box-shadow .35s ease,filter .35s ease !important;
}
.hero-banner-play:hover{
  box-shadow:
    0 0 18px rgba(113,55,255,.55),
    0 0 38px rgba(214,47,186,.42),
    0 0 68px rgba(255,120,51,.22) !important;
  filter:brightness(1.08) !important;
}
.hero-banner-play:hover::before{
  filter:
    drop-shadow(0 0 7px rgba(113,55,255,.95))
    drop-shadow(0 0 15px rgba(214,47,186,.82))
    drop-shadow(0 0 28px rgba(255,120,51,.45)) !important;
}

/* Scroll: glow-only animation over the existing baked scroll artwork. No extra arrows or circles. */
.hero-scroll-anim{
  display:block !important;
  background:linear-gradient(180deg,
    rgba(113,55,255,.02) 0%,
    rgba(113,55,255,.18) 26%,
    rgba(214,47,186,.24) 52%,
    rgba(255,120,51,.16) 78%,
    rgba(255,120,51,.02) 100%) !important;
  box-shadow:
    0 0 10px rgba(113,55,255,.22),
    0 0 22px rgba(214,47,186,.14),
    0 0 34px rgba(255,120,51,.08) !important;
  filter:blur(3px) !important;
  opacity:.28 !important;
  animation:cpScrollGlow 2.15s ease-in-out infinite !important;
  transform-origin:50% 50% !important;
}
.hero-scroll-anim::before,.hero-scroll-anim::after{
  display:none !important;
  content:none !important;
}
@keyframes cpScrollGlow{
  0%,100%{
    opacity:.18;
    transform:translateY(5px) scaleY(.88);
    filter:blur(4px);
    box-shadow:0 0 8px rgba(113,55,255,.16),0 0 18px rgba(214,47,186,.10),0 0 28px rgba(255,120,51,.05);
  }
  50%{
    opacity:.72;
    transform:translateY(-5px) scaleY(1.08);
    filter:blur(2px);
    box-shadow:0 0 14px rgba(113,55,255,.42),0 0 30px rgba(214,47,186,.28),0 0 48px rgba(255,120,51,.16);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-banner-play:hover{filter:none !important;}
  .hero-scroll-anim{animation:none !important;}
}

/* v31: restore the locked Play-button alignment to the baked banner artwork. */
.hero-banner-play{left:48.4% !important;top:80.8% !important;}
@media(max-width:700px){.hero-banner-play{left:49.3% !important;top:88.1% !important;}}

/* v32: Play hover glow alignment fix. Glow belongs to the visible neon ring, not the hit area. */
.hero-banner-play{
  box-shadow:none !important;
  filter:none !important;
}
.hero-banner-play:hover{
  box-shadow:none !important;
  filter:none !important;
}
.hero-banner-play:hover::before{
  filter:
    drop-shadow(0 0 5px rgba(113,55,255,.95))
    drop-shadow(0 0 11px rgba(214,47,186,.78))
    drop-shadow(0 0 20px rgba(255,120,51,.42)) !important;
}

/* V33: final Play hover glow. Use the locked transparent hit-area only as a glow source.
   No extra disc/circle is drawn, so the glow stays perfectly centered on the visible Play ring. */
.hero-banner-play:hover{
  box-shadow:
    0 0 14px rgba(113,55,255,.55),
    0 0 28px rgba(214,47,186,.48),
    0 0 48px rgba(255,120,51,.30),
    inset 0 0 10px rgba(214,47,186,.08) !important;
  filter:none !important;
}
.hero-banner-play:hover::before{
  filter:
    drop-shadow(0 0 8px rgba(113,55,255,.95))
    drop-shadow(0 0 18px rgba(214,47,186,.90))
    drop-shadow(0 0 32px rgba(255,120,51,.55)) !important;
}
@media(prefers-reduced-motion:reduce){
  .hero-banner-play:hover{box-shadow:none !important;}
}

/* V34: Play hover glow must share the exact visible button geometry.
   Do not use box-shadow on the transparent hit area because that creates an offset/oversized circle.
   The glow is rendered by the button's own pseudo-element, centered on the same bounds as the neon ring. */
.hero-banner-play{
  box-shadow:none !important;
  filter:none !important;
  isolation:isolate;
}
.hero-banner-play::before{
  z-index:1;
  filter:drop-shadow(0 0 5px rgba(113,55,255,.38)) drop-shadow(0 0 11px rgba(214,47,186,.26)) !important;
}
.hero-banner-play::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  padding:2px !important;
  background:conic-gradient(from var(--play-angle,0deg),#7137ff 0deg,#d62fba 110deg,#ff7833 190deg,#7137ff 300deg,#7137ff 360deg) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  opacity:0 !important;
  filter:blur(10px) !important;
  transform:scale(1) !important;
  transition:opacity .28s ease,filter .28s ease !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.hero-banner-play:hover::after,
.hero-banner-play:focus-visible::after{
  opacity:.9 !important;
  filter:blur(10px) drop-shadow(0 0 8px rgba(113,55,255,.65)) drop-shadow(0 0 16px rgba(214,47,186,.52)) drop-shadow(0 0 25px rgba(255,120,51,.34)) !important;
}
.hero-banner-play:hover::before,
.hero-banner-play:focus-visible::before{
  filter:drop-shadow(0 0 8px rgba(113,55,255,.95)) drop-shadow(0 0 18px rgba(214,47,186,.9)) drop-shadow(0 0 32px rgba(255,120,51,.55)) !important;
}
@media(prefers-reduced-motion:reduce){
  .hero-banner-play::after{transition:none !important;}
}


/* V36: approved hero interaction polish. Keep V35 Play geometry/logic intact. */
/* Top-bar hover glow: the artwork already contains the labels, so the real header
   supplies only the aligned interactive glow without introducing duplicate text. */
.hero-banner-active .desktop-nav a,
.hero-banner-active .nav-cta{
  opacity:0!important;
  color:transparent!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transition:opacity .2s ease, color .25s ease, border-color .25s ease, box-shadow .35s ease, text-shadow .35s ease!important;
}
.hero-banner-active .desktop-nav a:hover,
.hero-banner-active .nav-cta:hover{
  opacity:1!important;
  color:transparent!important;
  border-color:transparent!important;
  text-shadow:
    0 0 5px rgba(113,55,255,.95),
    0 0 11px rgba(214,47,186,.72),
    0 0 18px rgba(255,120,51,.45)!important;
  filter:drop-shadow(0 0 5px rgba(113,55,255,.55)) drop-shadow(0 0 12px rgba(214,47,186,.35))!important;
}
.hero-banner-active .nav-cta:hover{
  border-color:rgba(214,47,186,.6)!important;
  box-shadow:0 0 12px rgba(113,55,255,.45),0 0 26px rgba(214,47,186,.22)!important;
}

/* Replace the baked basic scroll cue with the approved two-pair / three-step arrow system. */
.hero-scroll-anim{
  display:block!important;
  position:absolute!important;
  z-index:10!important;
  pointer-events:none!important;
  width:48px!important;
  height:92px!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  animation:none!important;
}
.hero-scroll-anim::before,
.hero-scroll-anim::after{display:none!important;content:none!important}
.scroll-pair{
  position:absolute;
  left:50%;
  width:28px;
  height:25px;
  transform:translateX(-50%);
}
.scroll-pair.pair-1{top:0}
.scroll-pair.pair-2{top:53px}
.scroll-pair span{
  position:absolute;
  left:50%;
  width:19px;
  height:19px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  border-radius:1px;
  transform:translateX(-50%) rotate(45deg);
  background:transparent;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.75));
}
.scroll-pair span:nth-child(1){top:-3px}
.scroll-pair span:nth-child(2){top:7px}
.scroll-pair.pair-1 span:nth-child(1){animation:scrollArrowGlow 1.8s ease-in-out infinite .0s}
.scroll-pair.pair-1 span:nth-child(2){animation:scrollArrowGlow 1.8s ease-in-out infinite .18s}
.scroll-pair.pair-2 span:nth-child(1){animation:scrollArrowGlow 1.8s ease-in-out infinite .36s}
.scroll-pair.pair-2 span:nth-child(2){animation:scrollArrowGlow 1.8s ease-in-out infinite .54s}
@keyframes scrollArrowGlow{
  0%,100%{opacity:.28;border-color:#7137ff;filter:drop-shadow(0 0 2px rgba(113,55,255,.18));transform:translate(-50%,0) rotate(45deg)}
  24%{opacity:.42;border-color:#7137ff;filter:drop-shadow(0 0 4px rgba(113,55,255,.32));transform:translate(-50%,2px) rotate(45deg)}
  38%{opacity:1;border-color:#d62fba;filter:drop-shadow(0 0 6px rgba(214,47,186,.95)) drop-shadow(0 0 12px rgba(214,47,186,.55));transform:translate(-50%,4px) rotate(45deg)}
  52%{opacity:.92;border-color:#ff7833;filter:drop-shadow(0 0 7px rgba(255,120,51,.88));transform:translate(-50%,5px) rotate(45deg)}
  76%{opacity:.34;border-color:#ff7833;filter:drop-shadow(0 0 3px rgba(255,120,51,.3));transform:translate(-50%,7px) rotate(45deg)}
}
@media(max-width:700px){
  .hero-scroll-anim{width:44px!important;height:84px!important}
  .scroll-pair{width:25px;height:22px}
  .scroll-pair.pair-2{top:48px}
  .scroll-pair span{width:17px;height:17px;border-width:2.5px}
  .scroll-pair span:nth-child(1){top:-2px}
  .scroll-pair span:nth-child(2){top:7px}
}
@media(prefers-reduced-motion:reduce){
  .scroll-pair span{animation:none!important;opacity:.8!important}
}

/* V36a: allow the real hero hit-layer to receive hover while remaining visually silent. */
.site-header.hero-banner-active .desktop-nav,
.site-header.hero-banner-active .nav-cta{opacity:1!important}
.hero-banner-active .desktop-nav a:hover,
.hero-banner-active .nav-cta:hover{color:rgba(255,255,255,.01)!important}
.hero-banner-active .menu-btn:hover{
  filter:drop-shadow(0 0 5px rgba(113,55,255,.8)) drop-shadow(0 0 12px rgba(214,47,186,.55)) drop-shadow(0 0 20px rgba(255,120,51,.3));
}

/* V41: use the same global site header on the initial hero banner.
   The hero artwork has no baked-in header, so the real site header is shown.
   It is hidden again when the showreel starts via .hero-playing. */
.site-header.hero-banner-active{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  background:rgba(5,5,7,.30)!important;
  border-bottom-color:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.site-header.hero-banner-active .brand img,
.site-header.hero-banner-active .desktop-nav,
.site-header.hero-banner-active .nav-cta,
.site-header.hero-banner-active .menu-btn{
  opacity:1!important;
}
/* Keep hero top-bar controls free of hover glow/effects. */
.site-header.hero-banner-active .desktop-nav a,
.site-header.hero-banner-active .desktop-nav a:hover,
.site-header.hero-banner-active .nav-cta,
.site-header.hero-banner-active .nav-cta:hover{
  color:#bbb9c3!important;
  text-shadow:none!important;
  filter:none!important;
  transform:none!important;
  box-shadow:none!important;
}
.site-header.hero-banner-active .nav-cta,
.site-header.hero-banner-active .nav-cta:hover{
  border-color:rgba(255,255,255,.22)!important;
  background:transparent!important;
}
.site-header.hero-banner-active .desktop-nav a:hover{color:#bbb9c3!important;}
@media(max-width:700px){
  .site-header.hero-banner-active .menu-btn,
  .site-header.hero-banner-active .menu-btn:hover{filter:none!important;}
}

/* V42: Hero banner uses the same hover behavior as the global header. */
.site-header.hero-banner-active .desktop-nav a:hover{
  color:#fff!important;
  text-shadow:0 0 7px rgba(113,55,255,.85),0 0 15px rgba(214,47,186,.55),0 0 24px rgba(255,120,51,.30)!important;
  filter:drop-shadow(0 0 5px rgba(113,55,255,.45)) drop-shadow(0 0 10px rgba(214,47,186,.22))!important;
}
.site-header.hero-banner-active .nav-cta:hover{
  color:#fff!important;
  border-color:rgba(255,255,255,.50)!important;
  box-shadow:0 0 14px rgba(113,55,255,.40),0 0 28px rgba(214,47,186,.20)!important;
  transform:translateY(-3px)!important;
}

/* V43: restore normal hero-nav visibility while preserving the existing global hover behavior. */
.site-header.hero-banner-active .desktop-nav a{
  opacity:1!important;
  visibility:visible!important;
  color:#bbb9c3!important;
  text-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.site-header.hero-banner-active .nav-cta{
  opacity:1!important;
  visibility:visible!important;
}

/* V43: move the approved scroll arrow system approximately 20px to the right. */
.hero-scroll-anim{left:calc(5.15% + 20px)!important;}
@media(max-width:700px){
  .hero-scroll-anim{left:calc(7.8% + 20px)!important;}
}

/* v44: mobile crop correction pass. Desktop stays unchanged. */
@media (max-width:700px){
  /* Keep image-led cards readable instead of forcing desktop-style side crops. */
  .landscape-grid,
  .digital-grid{
    height:calc(100% - 150px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    gap:16px!important;
    padding:4px 2px 18px!important;
  }
  .service-card.media-text,
  .digital-card{
    grid-template-columns:44% 56%!important;
    min-height:154px!important;
    height:auto!important;
  }
  .service-card.media-text>img,
  .service-card.media-text .coming-media,
  .digital-card img{
    width:100%!important;
    height:100%!important;
    min-height:154px!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .card-copy,
  .digital-card>div{
    min-width:0!important;
    overflow:visible!important;
    padding:16px!important;
  }
  .card-copy h3,
  .digital-card h3{
    font-size:16px!important;
    line-height:1.08!important;
  }
  .card-copy p,
  .digital-card p{
    font-size:10px!important;
    line-height:1.48!important;
    margin-top:8px!important;
  }

  /* Portrait reel cards: preserve the artwork, then give copy enough room. */
  .portrait-row{
    height:calc(100% - 150px)!important;
    gap:16px!important;
    padding:4px 2px 18px!important;
  }
  .portrait-row .portrait-card{
    flex:0 0 82vw!important;
    width:82vw!important;
    height:100%!important;
  }
  .portrait-card .thumb{
    height:61%!important;
    min-height:0!important;
  }
  .portrait-card .thumb img{
    object-fit:cover!important;
    object-position:center center!important;
  }
  .portrait-card .portrait-copy{
    height:39%!important;
    min-height:0!important;
    padding:16px 15px!important;
    justify-content:center!important;
  }
  .service-social .portrait-card .portrait-copy h3{
    font-size:17px!important;
    line-height:1.08!important;
    margin-bottom:8px!important;
  }
  .service-social .portrait-card .portrait-copy p{
    font-size:11.5px!important;
    line-height:1.5!important;
  }

  /* Process: the wide approved Plan board must fit inside the portrait card. */
  .process-stage{
    top:51%!important;
    width:88vw!important;
    height:43vh!important;
    transform:translateY(10%) scale(.94)!important;
  }
  .process-stage.is-active{transform:translateY(0) scale(1)!important}
  .stage-copy{position:relative!important;z-index:4!important}
  .stage-copy h3{font-size:23px!important}
  .stage-copy p{font-size:10.5px!important;line-height:1.48!important}
  .brief-card,.board-card,.timeline-card,.refine-card,.deliver-card{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .brief-card{height:25vh!important}
  .board-card{height:25vh!important;background:#0b0b10!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .board-card img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important}
  .timeline-card{height:22vh!important}
  .refine-card,.deliver-card{height:23vh!important}

  /* Prevent the contact form and CTA from clipping at short phone heights. */
  .about-screen{overflow-y:auto!important;overflow-x:hidden!important}
  .about-contact-card{overflow:visible!important}
  .cta-screen{overflow:hidden!important;padding-left:20px!important;padding-right:20px!important}
  .cta-screen h2{max-width:90vw!important}
}

/* V46: portrait-only process stage position. Keep the intro heading/description unchanged. */
@media (max-width:700px){
  .process-cinematic .process-stage{
    top:calc(51% - 100px)!important;
  }
}

/* V47: Creative & Content cards scroll horizontally on mobile only.
   Desktop (2x2 grid) and the tablet 4-across range are untouched — this is scoped to
   #services so it wins over the older mobile vertical-stack rules, and only applies
   under the same 700px mobile breakpoint used everywhere else on the site. */
@media (max-width:700px){
  #services .landscape-grid{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    align-items:stretch!important;
    gap:14px!important;
    height:calc(100% - 150px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:4px 2px 18px!important;
    scroll-snap-type:x mandatory!important;
  }
  #services .landscape-grid>.service-card{
    flex:0 0 82vw!important;
    width:82vw!important;
    min-width:0!important;
    height:100%!important;
    scroll-snap-align:start!important;
  }

  /* Match the Reels & Ads (portrait-card) internal layout exactly: image on top,
     copy below, same proportions/padding/type sizes — instead of the desktop
     side-by-side thumb+text split. */
  #services .service-card.media-text{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
  }
  #services .service-card.media-text .thumb{
    width:100%!important;
    height:61%!important;
    flex:none!important;
    min-height:0!important;
  }
  #services .service-card.media-text .card-copy{
    height:39%!important;
    min-height:0!important;
    padding:16px 15px!important;
    justify-content:center!important;
  }
  #services .service-card.media-text .card-copy h3{
    font-size:17px!important;
    line-height:1.08!important;
    margin:0 0 8px!important;
  }
  #services .service-card.media-text .card-copy p{
    font-size:11.5px!important;
    line-height:1.5!important;
  }
}

/* V50: Brand & Digital cards — same treatment as Creative & Content, mobile only.
   Horizontal swipe-scroll container + Reels & Ads internal card proportions. */
@media (max-width:700px){
  #brand-digital .digital-grid{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    align-items:stretch!important;
    gap:14px!important;
    height:calc(100% - 150px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:4px 2px 18px!important;
    scroll-snap-type:x mandatory!important;
  }
  #brand-digital .digital-grid>.digital-card{
    flex:0 0 82vw!important;
    width:82vw!important;
    min-width:0!important;
    height:100%!important;
    scroll-snap-align:start!important;
  }
  #brand-digital .digital-card{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
  }
  #brand-digital .digital-card img{
    width:100%!important;
    height:61%!important;
    flex:none!important;
    min-height:0!important;
    object-fit:cover!important;
  }
  #brand-digital .digital-card>div{
    height:39%!important;
    min-height:0!important;
    padding:16px 15px!important;
    justify-content:center!important;
  }
  #brand-digital .digital-card h3{
    font-size:17px!important;
    line-height:1.08!important;
    margin:0 0 8px!important;
  }
  #brand-digital .digital-card p{
    font-size:11.5px!important;
    line-height:1.5!important;
  }
}

/* V54: About/Contact section — mobile only. Whole section (heading, copy, and the
   full contact form) is sized to fit within a single 100svh screen, no scrolling
   needed. Heading size now matches the Process screen's "From idea to impact."
   (49px, same tight line-height) — everything else was trimmed slightly to make
   room so the total still fits a short phone (~660px usable height). Content is
   centered vertically to use any extra room on taller phones gracefully. Desktop
   is untouched (all rules scoped to this breakpoint and to
   .about-screen/.about-contact-card only). */
@media (max-width:700px){
  .about-screen .about-copy>p.eyebrow{display:none!important}
  .about-screen{
    padding:60px 20px 12px!important;
    justify-content:center!important;
    gap:10px!important;
    overflow:hidden!important;
  }
  .about-art{display:none!important}
  .about-copy h2{font-size:49px!important;line-height:.95!important;margin:0 0 6px!important}
  .about-copy>p:not(.eyebrow){font-size:11px!important;line-height:1.4!important;margin:0 0 8px!important}
  .contact-details{gap:3px!important;margin-bottom:10px!important}
  .contact-details span{font-size:7px!important}
  .contact-details strong{font-size:12px!important}
  .about-copy .btn{padding:9px 15px!important;font-size:8.5px!important}

  .about-contact-card{
    margin-bottom:0!important;
    padding:12px!important;
    gap:8px!important;
  }
  .contact-card-top{margin-bottom:0!important}
  .contact-card-top span,.contact-card-top b{font-size:6.5px!important}
  .contact-form{gap:7px!important}
  .contact-form label{gap:3px!important;font-size:6.5px!important}
  .contact-form input,.contact-form textarea{padding:7px 10px!important;font-size:11px!important}
  .contact-form textarea{height:36px!important}
  .contact-form .btn{padding:9px 15px!important;font-size:8.5px!important;margin-top:0!important}
}


/* V55: mobile contact-form focus mode. The form becomes a keyboard-safe panel while
   a field is being edited, so every field can be reached without the page/card being
   trapped below the iOS keyboard. Desktop is intentionally untouched. */
@media (max-width:700px){
  .about-screen.form-focus-mode{
    overflow:hidden!important;
  }
  .about-screen.form-focus-mode .about-copy{
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .about-screen.form-focus-mode .about-contact-card{
    position:fixed!important;
    left:20px!important;
    right:20px!important;
    top:72px!important;
    bottom:auto!important;
    width:auto!important;
    height:calc(var(--cp-vv-height, 100svh) - 84px)!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    padding:16px!important;
    overflow:hidden!important;
    z-index:75!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
  }
  .about-screen.form-focus-mode .contact-form{
    gap:12px!important;
    padding-bottom:8px!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    align-content:start!important;
  }
  .about-screen.form-focus-mode .contact-form input,
  .about-screen.form-focus-mode .contact-form textarea{
    min-height:42px!important;
    padding:10px 12px!important;
    font-size:16px!important;
    line-height:1.35!important;
  }
  .about-screen.form-focus-mode .contact-form textarea{
    min-height:86px!important;
    height:86px!important;
  }
  .about-screen.form-focus-mode .contact-form label{
    gap:5px!important;
    font-size:7px!important;
  }
}


/* V56: discreet WhatsApp contact control and inquiry confirmation. */
.whatsapp-float{
  position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;z-index:1200;text-decoration:none;
  background:rgba(10,10,14,.72);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 16px rgba(210,80,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:.78;transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.whatsapp-float svg{width:21px;height:21px;fill:#d8d4df}
.whatsapp-float:hover{opacity:1;transform:translateY(-2px);border-color:rgba(255,255,255,.35);box-shadow:0 10px 28px rgba(0,0,0,.34),0 0 22px rgba(210,80,255,.24)}
.form-success{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:1300;display:flex;flex-direction:column;gap:5px;max-width:min(420px,calc(100vw - 40px));padding:14px 18px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(12,11,16,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 38px rgba(0,0,0,.35);transition:opacity .25s ease,transform .25s ease}
.form-success.show{opacity:1;transform:translate(-50%,0)}
.form-success strong{font-size:13px}.form-success span{font-size:11px;color:#aaa6b1}
.about-screen.form-focus-mode ~ .whatsapp-float{opacity:0;pointer-events:none}
@media(max-width:700px){
  .whatsapp-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:42px;height:42px;opacity:.72}
  .whatsapp-float svg{width:20px;height:20px}
  .form-success{bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);padding:12px 15px}
}

/* V58: Desktop-only contact footer composition. Mobile remains unchanged. */
@media (min-width:701px){
  .cta-foot{display:none}
  .cta-contact-list{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);width:min(360px,28vw);display:grid;grid-template-columns:1fr;align-items:center;gap:14px;z-index:4}
  .cta-contact-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;color:#bdb9c5;transition:color .25s,transform .25s}
  .cta-contact-item:hover{color:#fff;transform:translateY(-1px)}
  .cta-contact-label{min-width:0;text-align:center;color:#77737e;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
  .cta-contact-item strong{min-width:0;text-align:center;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
  .footer{left:5vw;right:5vw;bottom:24px;height:118px;padding-top:18px;display:block;border-top:1px solid var(--line);color:#7e7b86;font-size:9px;letter-spacing:.1em}
  .footer-brand-block{position:absolute;right:0;top:18px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .footer-brand-block img{width:128px;display:block}
  .footer-brand-block span{font-size:9px;letter-spacing:.08em;color:#77737e}
  .footer-social{position:absolute;left:0;top:18px;width:110px;display:grid;grid-template-columns:repeat(3,30px);grid-auto-rows:30px;gap:10px}
  .social-icon{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:#fff;transition:transform .25s,filter .25s,box-shadow .3s}
  .social-icon:hover{filter:brightness(1.18);box-shadow:0 0 22px rgba(255,255,255,.14);transform:translateY(-2px)}
  .social-icon svg{width:15px;height:15px;fill:currentColor;stroke:none}
  .social-instagram svg{fill:none;stroke:currentColor;stroke-width:1.7}
  .social-linkedin{color:#0A66C2}.social-twitter{color:#1DA1F2}.social-youtube{color:#FF0000}
  .social-facebook{color:#1877F2}.social-instagram{color:#E4405F}.social-pinterest{color:#E60023}
}

/* V62: Desktop contact rows. Keep label/value on one line, stacked below divider. */
@media (min-width:701px){
  .cta-contact-list{
    top:auto!important;
    bottom:44px!important;
    width:min(560px,38vw)!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .cta-contact-item{
    flex-direction:row!important;
    align-items:baseline!important;
    justify-content:center!important;
    gap:10px!important;
    width:100%!important;
  }
  .cta-contact-label{
    width:68px!important;
    flex:0 0 68px!important;
    text-align:right!important;
  }
  .cta-contact-label::after{content:':'!important;}
  .cta-contact-item strong{
    flex:0 1 auto!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
}

/* V66: Mobile-only Contact end screen cleanup. Desktop remains locked to V63. */
@media (max-width:700px){
  .cta-screen{padding:76px 20px 18px!important;justify-content:flex-start!important;overflow:hidden!important;background:#08070b!important;}
  .cta-screen .cta-bg{display:block!important;inset:-25%!important;opacity:1!important;filter:blur(24px)!important;z-index:0!important;}
  .cta-screen .eyebrow{position:relative;z-index:2;margin-top:20px!important;}
  .cta-screen h2{position:relative;z-index:2;font-size:48px!important;line-height:.92!important;margin:28px 0 24px!important;max-width:100%!important;}
  .cta-screen .cta-button{position:relative;z-index:3;padding:15px 23px!important;font-size:9px!important;}
  .cta-screen .cta-foot{display:none!important;}
  .cta-contact-list{
    position:absolute!important;
    left:50%!important;
    top:57%!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:min(350px,calc(100% - 40px))!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    z-index:5!important;
    margin:0!important;
  }
  .cta-contact-item{
    display:flex!important;
    flex-direction:row!important;
    align-items:baseline!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:0!important;
    color:#bdb9c5!important;
    text-align:left!important;
  }
  .cta-contact-label{
    width:54px!important;
    flex:0 0 54px!important;
    text-align:right!important;
    color:#8d8994!important;
    font-size:7px!important;
    letter-spacing:.12em!important;
  }
  .cta-contact-label::after{content:':'!important;}
  .cta-contact-item strong{
    flex:0 1 auto!important;
    min-width:0!important;
    text-align:left!important;
    white-space:nowrap!important;
    font-family:'DM Sans',sans-serif!important;
    font-size:10px!important;
    font-weight:500!important;
    letter-spacing:0!important;
  }
  .cta-screen .footer{
    position:absolute!important;
    left:20px!important;
    right:20px!important;
    bottom:18px!important;
    height:82px!important;
    padding-top:13px!important;
    display:block!important;
    border-top:1px solid var(--line)!important;
    z-index:6!important;
  }
  .cta-screen .footer-social{
    position:absolute!important;
    left:0!important;
    top:13px!important;
    width:104px!important;
    display:grid!important;
    grid-template-columns:repeat(3,27px)!important;
    grid-auto-rows:27px!important;
    gap:8px!important;
  }
  .cta-screen .footer .social-icon{
    width:27px!important;
    height:27px!important;
  }
  .cta-screen .footer .social-icon svg{width:14px!important;height:14px!important;}
  .cta-screen .footer-brand-block{
    position:absolute!important;
    right:0!important;
    top:13px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:7px!important;
  }
  .cta-screen .footer-brand-block img{width:92px!important;}
  .cta-screen .footer-brand-block span{font-size:7px!important;letter-spacing:.06em!important;color:#77737e!important;}
}

/* V67: Mobile end-screen final alignment refinements. Desktop remains unchanged. */
@media (max-width:700px){
  /* Keep the contact stack lower and visually balanced with the CTA. */
  .cta-contact-list{top:61%!important;}

  /* Restore recognizable original social brand colors without moving the icons. */
  .cta-screen .footer .social-linkedin{color:#0A66C2!important;}
  .cta-screen .footer .social-twitter{color:#1DA1F2!important;}
  .cta-screen .footer .social-youtube{color:#FF0000!important;}
  .cta-screen .footer .social-facebook{color:#1877F2!important;}
  .cta-screen .footer .social-instagram{color:#E4405F!important;}
  .cta-screen .footer .social-pinterest{color:#E60023!important;}

  /* Give the right-side brand block more clearance from the WhatsApp control. */
  .cta-screen .footer-brand-block{right:42px!important;}
}

/* V68: mobile social icons - recognizable brand-color UI, placement unchanged */
@media (max-width:700px){
  .cta-screen .footer-social{opacity:1!important;visibility:visible!important;filter:none!important;}
  .cta-screen .footer .social-icon{
    opacity:1!important;
    visibility:visible!important;
    background:rgba(8,7,12,.62)!important;
    border-color:rgba(255,255,255,.16)!important;
    box-shadow:0 4px 14px rgba(0,0,0,.18)!important;
  }
  .cta-screen .footer .social-icon svg{
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
  }
  .cta-screen .footer .social-linkedin{color:#0A66C2!important;}
  .cta-screen .footer .social-twitter{color:#1DA1F2!important;}
  .cta-screen .footer .social-youtube{color:#FF0000!important;}
  .cta-screen .footer .social-facebook{color:#1877F2!important;}
  .cta-screen .footer .social-instagram{color:#E4405F!important;}
  .cta-screen .footer .social-pinterest{color:#E60023!important;}
  .cta-screen .footer .social-linkedin svg,
  .cta-screen .footer .social-twitter svg,
  .cta-screen .footer .social-youtube svg,
  .cta-screen .footer .social-facebook svg,
  .cta-screen .footer .social-pinterest svg{fill:currentColor!important;stroke:none!important;}
  .cta-screen .footer .social-instagram svg{fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;}
}

/* V69: Mobile end-screen vertical composition refinement. Desktop untouched. */
@media (max-width:700px){
  .cta-screen .eyebrow{
    position:absolute!important;
    left:20px!important;
    right:20px!important;
    top:30%!important;
    margin:0!important;
    z-index:2!important;
  }
  .cta-screen h2{
    position:absolute!important;
    left:20px!important;
    right:20px!important;
    top:35%!important;
    margin:0!important;
    z-index:2!important;
  }
  .cta-screen .cta-button{
    position:absolute!important;
    left:50%!important;
    bottom:112px!important;
    transform:translateX(-50%)!important;
    z-index:7!important;
  }
  .cta-screen .cta-button:hover{
    transform:translateX(-50%) translateY(-2px)!important;
  }
}

/* V70: Mobile end-screen composition correction. Desktop untouched. */
@media (max-width:700px){
  /* Keep the headline in its current centered position. */
  .cta-screen .eyebrow{top:30%!important;}
  .cta-screen h2{top:35%!important;}

  /* CTA sits directly beneath the heading instead of at the bottom. */
  .cta-screen .cta-button{
    top:47%!important;
    bottom:auto!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
  .cta-screen .cta-button:hover{
    transform:translateX(-50%) translateY(-2px)!important;
  }

  /* Contact rows sit immediately above the footer divider. */
  .cta-contact-list{
    top:auto!important;
    bottom:106px!important;
  }
}

/* V72: Move only the mobile Start a project button 50px downward. Desktop untouched. */
@media (max-width:700px){
  .cta-screen .cta-button{
    top:calc(47% + 50px)!important;
    bottom:auto!important;
  }
}

/* V75: Hide hero scroll cue only while the showreel is playing. Initial hero banner remains unchanged. */
.hero.is-playing .hero-scroll-anim{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.hero.is-playing .hero-bottom > span{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* V76: Full-screen project inquiry modal. End screen styling remains untouched. */
.project-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
.project-modal.is-open{visibility:visible;opacity:1;pointer-events:auto}
.project-modal-backdrop{position:absolute;inset:0;background:rgba(4,4,7,.88);backdrop-filter:blur(22px)}
.project-modal-panel{position:relative;z-index:2;width:min(1080px,90vw);max-height:90svh;overflow:auto;padding:48px 54px;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:linear-gradient(145deg,rgba(20,17,28,.96),rgba(7,7,10,.97));box-shadow:0 40px 140px rgba(0,0,0,.6),0 0 90px rgba(101,39,190,.12);transform:translateY(22px) scale(.98);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.project-modal.is-open .project-modal-panel{transform:translateY(0) scale(1)}
.project-modal-panel:before{display:none!important}
.project-modal-close{position:absolute;right:22px;top:20px;width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;font-size:25px;line-height:1;cursor:pointer;z-index:3;transition:.3s}.project-modal-close:hover{transform:rotate(90deg);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.project-modal-head{max-width:700px;margin-bottom:30px}.project-modal-head .eyebrow{margin:0}.project-modal-head h2{font-family:'Space Grotesk';font-size:clamp(46px,5vw,74px);line-height:.9;letter-spacing:-.055em;margin:16px 0}.project-modal-head h2 span{background:linear-gradient(100deg,#7137ff,#d02ca0 54%,#ff7833);background-clip:text;-webkit-background-clip:text;color:transparent}.project-modal-head>p:last-child{margin:0;color:#9e98a7;font-size:13px;line-height:1.6;max-width:500px}
.project-modal-form{grid-template-columns:1fr 1fr;gap:18px 20px}.project-modal-form label:nth-child(5),.project-modal-form label:nth-child(6),.project-modal-form label:nth-child(7),.project-modal-form .btn{grid-column:1/-1}.project-modal-form .btn{margin-top:4px}
.project-modal-form .btn:disabled{opacity:.55;cursor:wait;transform:none!important}
.contact-form select{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(0,0,0,.2);padding:13px 14px;color:#f4f1f6;font:400 13px/1.4 'DM Sans';outline:none}.contact-form select:focus{border-color:rgba(172,78,255,.7);box-shadow:0 0 0 3px rgba(105,39,255,.08)}.contact-form select option{background:#101014;color:#f4f1f6}.phone-field{display:grid;grid-template-columns:145px 1fr;gap:8px}.phone-field select{padding-left:10px;padding-right:8px}.project-modal-form textarea{min-height:110px}
@media(max-width:700px){
  .project-modal{align-items:stretch}.project-modal-panel{width:100%;max-height:none;height:100svh;border:0;border-radius:0;padding:88px 20px 32px;overflow-y:auto;background:linear-gradient(145deg,rgba(18,16,25,.98),rgba(5,5,8,.99))}.project-modal-panel:before{display:none!important}.project-modal-close{right:18px;top:18px}.project-modal-head{margin-bottom:28px}.project-modal-head h2{font-size:45px;margin:14px 0}.project-modal-head>p:last-child{font-size:11px}.project-modal-form{grid-template-columns:1fr;gap:14px}.project-modal-form label:nth-child(5),.project-modal-form label:nth-child(6),.project-modal-form label:nth-child(7),.project-modal-form .btn{grid-column:auto}.phone-field{grid-template-columns:112px 1fr;gap:7px}.project-modal-form input,.project-modal-form select,.project-modal-form textarea{padding:12px 13px}.project-modal-form textarea{min-height:125px}
}

/* V79: About/Contact form cleanup and viewport-fit fix. Only the contact form card is affected. */
.about-contact-card::before,
.about-contact-card::after{
  display:none!important;
  content:none!important;
  animation:none!important;
  background:none!important;
  filter:none!important;
}
.about-contact-card{
  border:1px solid rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important;
}

@media (min-width:701px){
  .about-contact-card{
    height:calc(100svh - 180px)!important;
    min-height:0!important;
    padding:24px!important;
    justify-content:flex-start!important;
    gap:16px!important;
    overflow:hidden!important;
  }
  .about-contact-card .contact-form{
    gap:11px!important;
  }
  .about-contact-card .contact-form label{
    gap:5px!important;
  }
  .about-contact-card .contact-form input,
  .about-contact-card .contact-form select{
    padding:10px 12px!important;
  }
  .about-contact-card .contact-form textarea{
    height:74px!important;
    min-height:74px!important;
    padding:10px 12px!important;
  }
  .about-contact-card .contact-form .btn{
    padding:10px 16px!important;
    margin-top:0!important;
  }
}

@media (max-width:700px){
  .about-contact-card::before,
  .about-contact-card::after{
    display:none!important;
  }
  .about-contact-card{
    border:1px solid rgba(255,255,255,.13)!important;
    overflow:hidden!important;
  }
}


/* V80: Mobile About/Inquiry layout refinement. Remove redundant conversation CTA space,
   keep the heading below the fixed header, and fit the full inquiry form on-screen.
   Desktop layout is unchanged. */
@media (max-width:700px){
  .about-screen{
    padding:86px 20px 14px!important;
    justify-content:flex-start!important;
    gap:12px!important;
    overflow:hidden!important;
    min-height:100svh!important;
    height:100svh!important;
    box-sizing:border-box!important;
  }
  .about-copy{
    flex:none!important;
    width:100%!important;
  }
  .about-copy h2{
    font-size:clamp(39px,11.8vw,49px)!important;
    line-height:.94!important;
    margin:0 0 7px!important;
  }
  .about-copy>p:not(.eyebrow){
    font-size:clamp(10px,2.8vw,12px)!important;
    line-height:1.38!important;
    margin:0!important;
    max-width:100%!important;
  }
  .about-contact-card{
    flex:1 1 auto!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:10px!important;
    gap:6px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .contact-card-top{
    flex:none!important;
  }
  .contact-card-top span,.contact-card-top b{font-size:6px!important;}
  .contact-form{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    gap:5px!important;
  }
  .contact-form label{
    gap:2px!important;
    font-size:6px!important;
    min-height:0!important;
  }
  .contact-form input,.contact-form select{
    height:34px!important;
    min-height:34px!important;
    padding:6px 9px!important;
    font-size:11px!important;
    box-sizing:border-box!important;
  }
  .phone-field{
    grid-template-columns:110px 1fr!important;
    gap:6px!important;
    min-height:34px!important;
  }
  .contact-form textarea{
    height:58px!important;
    min-height:58px!important;
    padding:7px 9px!important;
    font-size:11px!important;
    box-sizing:border-box!important;
  }
  .contact-form .btn{
    padding:8px 14px!important;
    min-height:34px!important;
    height:34px!important;
    font-size:8px!important;
    margin-top:0!important;
    align-self:end!important;
  }
}

/* Short mobile viewports: tighten only the inquiry form so the submit button
   remains visible without introducing a page-level or form-level scroll. */
@media (max-width:700px) and (max-height:760px){
  .about-screen{padding-top:78px!important;gap:9px!important;}
  .about-copy h2{font-size:39px!important;margin-bottom:5px!important;}
  .about-copy>p:not(.eyebrow){font-size:10px!important;line-height:1.34!important;}
  .about-contact-card{padding:9px!important;gap:5px!important;}
  .contact-form{gap:4px!important;}
  .contact-form input,.contact-form select{height:30px!important;min-height:30px!important;padding:5px 8px!important;font-size:10px!important;}
  .phone-field{grid-template-columns:100px 1fr!important;gap:5px!important;min-height:30px!important;}
  .contact-form textarea{height:48px!important;min-height:48px!important;padding:6px 8px!important;font-size:10px!important;}
  .contact-form .btn{height:30px!important;min-height:30px!important;padding:7px 12px!important;font-size:7.5px!important;}
}


/* V82: Remove the old mobile keyboard focus transformation. The inquiry form keeps
   its normal geometry while iOS handles viewport panning for the focused control. */
@media(max-width:700px){
  .about-screen.form-focus-mode{
    overflow:hidden!important;
  }
  .about-screen.form-focus-mode .about-copy{
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .about-screen.form-focus-mode .about-contact-card{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    padding:10px!important;
    overflow:hidden!important;
    z-index:auto!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
  }
  .about-screen.form-focus-mode .contact-form{
    gap:5px!important;
    padding-bottom:0!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:visible!important;
    -webkit-overflow-scrolling:auto!important;
    overscroll-behavior:auto!important;
    align-content:start!important;
  }
  .about-screen.form-focus-mode .contact-form input,
  .about-screen.form-focus-mode .contact-form select,
  .about-screen.form-focus-mode .contact-form textarea{
    min-height:0!important;
    font-size:11px!important;
    line-height:1.35!important;
  }
  .about-screen.form-focus-mode .contact-form input,
  .about-screen.form-focus-mode .contact-form select{
    height:34px!important;
    padding:6px 9px!important;
  }
  .about-screen.form-focus-mode .contact-form textarea{
    min-height:58px!important;
    height:58px!important;
    padding:7px 9px!important;
  }
  .about-screen.form-focus-mode .contact-form label{
    gap:2px!important;
    font-size:6px!important;
  }
}

/* V84: unify Brand & Digital thumbnail color treatment with the Creative/Reels visual language. */
.digital-card img{
  filter:saturate(.92) contrast(1.04) brightness(.92) !important;
  transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.digital-card:hover img{
  filter:saturate(1.04) contrast(1.06) brightness(.98) !important;
}

/* V85: Client Trust mobile uses the same live/coded composition as desktop, reflowed vertically. */
@media(max-width:700px){
  .trust-screen{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    justify-content:flex-start!important;
    padding:92px 20px 28px!important;
  }
  .trust-screen .trust-inner{
    display:flex!important;
    width:100%!important;
    min-height:0!important;
    justify-content:flex-start!important;
  }
  .trust-screen .trust-bg-word{display:block!important;z-index:1!important;}
  .trust-screen .trust-heading,
  .trust-screen .trust-logo-grid,
  .trust-screen .trust-bottom{position:relative!important;z-index:4!important;}
  .trust-heading{grid-template-columns:1fr!important;gap:0!important;margin-bottom:18px!important;}
  .trust-heading-copy h2{font-size:43px!important;line-height:.95!important;}
  .trust-heading>p{font-size:11px!important;line-height:1.55!important;margin-top:14px!important;padding-left:15px!important;max-width:100%!important;}
  .trust-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
  .trust-logo-card{height:82px!important;border-radius:13px!important;padding:11px 10px!important;}
  .trust-logo-card img{max-width:92%!important;max-height:48px!important;}
  .trust-logo-card:nth-child(3) img{max-width:94%!important;max-height:46px!important;}
  .trust-logo-card:nth-child(6) img{max-width:86%!important;max-height:46px!important;}
  .trust-logo-card:nth-child(7) img{max-width:92%!important;max-height:45px!important;}
  .trust-logo-card:nth-child(8) img{max-width:92%!important;max-height:45px!important;}
  .trust-logo-card:nth-child(9) img{max-width:66%!important;max-height:55px!important;}
  .trust-logo-card:nth-child(10) img{max-width:94%!important;max-height:46px!important;}
  .trust-bottom{grid-template-columns:1fr!important;gap:20px!important;margin-top:18px!important;padding-top:17px!important;}
  .trust-bottom-copy strong{font-size:24px!important;}
  .trust-metrics{grid-template-columns:repeat(3,1fr)!important;}
  .trust-metrics>div{padding:0 8px!important;}
  .trust-metrics strong{font-size:24px!important;}
  .trust-metrics span{font-size:7px!important;letter-spacing:.16em!important;}
}


/* V89: Main heading typography cleanup. No site-wide heading animation. */
.statement-title,
.screen-head h2,
.work-top h2,
.process-intro h2,
.trust-heading-copy h2,
.about-copy h2,
.cta-screen h2,
.project-modal-head h2 {
  color:#fff !important;
  overflow:visible !important;
  line-height:1.04 !important;
  padding-top:.04em;
  padding-bottom:.10em;
}
.statement-title span,
.screen-head h2 span,
.work-top h2 span,
.process-intro h2 span,
.trust-heading-copy h2 span,
.about-copy h2 span,
.cta-screen h2 span,
.project-modal-head h2 span {
  color:#fff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#fff !important;
}
.eyebrow {
  overflow:visible !important;
  line-height:1.45 !important;
  min-height:1.45em;
  padding-top:2px;
  padding-bottom:2px;
}
.screen-head,
.screen-head>div,
.work-top,
.work-top>div,
.process-intro,
.about-copy,
.cta-screen,
.project-modal-head {
  overflow:visible !important;
}
@media(max-width:700px){
  .statement-title,
  .screen-head h2,
  .work-top h2,
  .process-intro h2,
  .trust-heading-copy h2,
  .about-copy h2,
  .cta-screen h2,
  .project-modal-head h2 {
    line-height:1.05 !important;
    padding-top:.05em;
    padding-bottom:.12em;
  }
}

/* V91: spacing, mobile CTA, and WhatsApp icon refinement. */
@media (min-width:701px){
  /* Give service cards a little more breathing room from the bottom edge. */
  .service-screen{
    padding-bottom:70px!important;
  }
}

/* WhatsApp uses the familiar official green treatment with a white glyph. */
.whatsapp-float{
  background:#25D366!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 18px rgba(37,211,102,.22)!important;
  opacity:1!important;
}
.whatsapp-float svg{fill:#fff!important}
.whatsapp-float:hover{
  border-color:rgba(255,255,255,.4)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.34),0 0 24px rgba(37,211,102,.34)!important;
}

@media(max-width:700px){
  /* Keep the mobile header compact while exposing the same primary CTA as desktop. */
  .site-header .nav-cta{
    display:inline-flex!important;
    margin-left:auto!important;
    margin-right:2px!important;
    padding:9px 11px!important;
    gap:7px!important;
    font-size:8px!important;
    letter-spacing:.12em!important;
    white-space:nowrap!important;
  }
  .site-header .menu-btn{
    margin-left:2px!important;
  }
  .whatsapp-float{
    background:#25D366!important;
    opacity:1!important;
  }
  .whatsapp-float svg{fill:#fff!important}
}

/* CPv91: mobile-only footer and WhatsApp alignment refinements. Desktop remains untouched. */
@media (max-width:700px){
  /* Keep the floating WhatsApp control clear of the hero artwork and copy. */
  .whatsapp-float{
    top:82px!important;
    bottom:auto!important;
    right:16px!important;
    width:42px!important;
    height:42px!important;
  }

  /* Remove the footer brand logo and copyright line on mobile only. */
  .cta-screen .footer-brand-block{
    display:none!important;
  }

  /* Put every social icon on one horizontal baseline with the mobile WhatsApp control. */
  .cta-screen .footer-social{
    left:0!important;
    right:auto!important;
    top:auto!important;
    bottom:0!important;
    width:auto!important;
    display:grid!important;
    grid-template-columns:repeat(6,27px)!important;
    grid-template-rows:27px!important;
    grid-auto-rows:27px!important;
    gap:6px!important;
    align-items:center!important;
  }
}

/* CP91: mobile-only social icon size and centering. No desktop changes. */
@media (max-width:700px){
  .cta-screen .footer-social{
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    width:auto!important;
    transform:translateX(-50%)!important;
    display:grid!important;
    grid-template-columns:repeat(6,44px)!important;
    grid-template-rows:44px!important;
    grid-auto-rows:44px!important;
    gap:8px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .cta-screen .footer .social-icon{
    width:44px!important;
    height:44px!important;
  }
  .cta-screen .footer .social-icon svg{
    width:22px!important;
    height:22px!important;
  }
}

/* SEO_v02: visitor-facing service navigation */
.services-nav{position:relative;display:flex;align-items:center}.services-trigger{display:flex;align-items:center;gap:7px}.services-trigger span{font-size:12px;opacity:.7;transition:transform .25s}.services-nav:hover .services-trigger span{transform:rotate(180deg)}.services-dropdown{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);width:320px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(7,7,12,.96);backdrop-filter:blur(22px);box-shadow:0 24px 80px rgba(0,0,0,.45);display:grid;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}.services-nav:hover .services-dropdown,.services-nav:focus-within .services-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.services-dropdown a{display:block!important;padding:11px 12px;border-radius:10px;font-size:10px;letter-spacing:.1em}.services-dropdown a:hover{background:rgba(136,92,246,.13);color:#fff}.service-directory{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}.service-directory-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:14px}.service-directory-head span{font-family:'Space Grotesk';font-size:22px}.service-directory-head p{margin:0;color:var(--muted);font-size:11px}.service-directory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.service-directory-grid a{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);transition:.3s}.service-directory-grid a:hover{transform:translateY(-3px);border-color:rgba(136,92,246,.55);background:rgba(136,92,246,.07)}.service-directory-grid strong{display:block;font-family:'Space Grotesk';font-size:13px}.service-directory-grid span{display:block;margin-top:6px;color:var(--muted);font-size:9px;line-height:1.4}.mobile-services{display:grid;gap:0}.mobile-services-title{padding:14px 0 8px;font-family:'Space Grotesk';font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#a99bca}.mobile-services a{font-size:14px!important;padding:11px 0!important;border-bottom:0!important;color:#c9c6d2}.mobile-services a:hover{color:#fff}
@media(max-width:950px){.service-directory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.services-nav{display:none}.service-directory{margin-top:20px;padding-top:20px}.service-directory-head{display:block}.service-directory-head span{font-size:18px}.service-directory-head p{margin-top:6px}.service-directory-grid{grid-template-columns:1fr 1fr;gap:8px}.service-directory-grid a{padding:12px}.service-directory-grid strong{font-size:11px}.service-directory-grid span{font-size:8px}}

/* SEO_v03: desktop Services opens on hover; click remains usable. */
.services-nav{position:relative;display:flex;align-items:center;height:100%;}
.services-trigger{display:inline-flex;align-items:center;gap:7px;}
.services-dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);width:280px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(8,7,13,.97);backdrop-filter:blur(22px);box-shadow:0 25px 80px rgba(0,0,0,.48),0 0 50px rgba(110,42,255,.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s ease;}
.services-dropdown:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
.services-nav:hover .services-dropdown,.services-nav:focus-within .services-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.services-dropdown a{display:block!important;padding:12px 13px;border-radius:11px;letter-spacing:.03em!important;text-transform:none!important;font-size:12px!important;color:#c9c6d0!important;}
.services-dropdown a:hover{background:linear-gradient(90deg,rgba(136,92,246,.16),rgba(236,72,153,.08));color:#fff!important;}
@media(max-width:700px){.services-nav{display:block}.services-dropdown{display:none!important}.desktop-nav{display:none}}

/* SEO_v04: compact Services screen so the complete Explore Services directory fits within one desktop viewport. */
@media (min-width:951px){
  #services.service-content{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    overflow:hidden!important;
    padding-top:96px!important;
    padding-bottom:28px!important;
    justify-content:flex-start!important;
  }
  #services.service-content .screen-head{
    margin-bottom:20px!important;
    flex:0 0 auto!important;
  }
  #services.service-content .screen-head h2{
    font-size:clamp(42px,4.7vw,70px)!important;
    margin-top:10px!important;
  }
  #services.service-content .screen-head>p:last-child{
    max-width:300px!important;
    font-size:12px!important;
  }
  #services.service-content .landscape-grid{
    height:360px!important;
    flex:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
    overflow:visible!important;
  }
  #services.service-content .landscape-grid>.service-card{
    height:auto!important;
    min-height:0!important;
  }
  #services.service-content .service-card.media-text .card-copy{
    padding:20px!important;
  }
  #services.service-content .service-card.media-text .card-copy h3{
    font-size:clamp(20px,1.65vw,27px)!important;
    margin-bottom:8px!important;
  }
  #services.service-content .service-card.media-text .card-copy p{
    font-size:11px!important;
    line-height:1.5!important;
    max-width:430px!important;
  }
  #services.service-content .service-directory{
    margin-top:22px!important;
    padding-top:18px!important;
    flex:0 0 auto!important;
  }
  #services.service-content .service-directory-head{
    margin-bottom:10px!important;
  }
  #services.service-content .service-directory-head span{
    font-size:19px!important;
  }
  #services.service-content .service-directory-head p{
    font-size:10px!important;
  }
  #services.service-content .service-directory-grid{
    gap:8px!important;
  }
  #services.service-content .service-directory-grid a{
    padding:11px 14px!important;
    min-height:54px!important;
  }
  #services.service-content .service-directory-grid strong{
    font-size:12px!important;
  }
  #services.service-content .service-directory-grid span{
    margin-top:3px!important;
    font-size:8px!important;
  }
}

.services-divider{height:1px;background:rgba(255,255,255,.09);margin:7px 4px}.services-dropdown .services-divider+ a{margin-top:1px}

#modalVideo{display:none;width:100%;max-height:78vh;aspect-ratio:16/9;background:#000;border-radius:18px} .modal-screen{display:flex;align-items:center;justify-content:center}

/* v26: approved hero artwork should fit the viewport without cover-cropping. */
.hero-banner{object-fit:contain!important;object-position:center center!important;transform:none!important;}
.hero.is-playing .hero-banner{transform:none!important;}

/* FINAL: Services desktop layout aligned to the approved reference.
   Keep the reference screenshot out of the site; only use the existing portfolio thumbnails. */
@media (min-width: 951px){
  #services.service-content .landscape-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:30px !important;
    width:100% !important;
    height:calc(100% - 190px) !important;
    overflow:visible !important;
  }

  #services.service-content .landscape-grid > .service-card.media-text{
    display:grid !important;
    grid-template-columns:42% 58% !important;
    grid-template-rows:1fr !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    align-self:stretch !important;
  }

  #services.service-content .service-card.media-text .thumb{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    grid-column:1 !important;
    grid-row:1 !important;
  }

  #services.service-content .service-card.media-text .card-copy{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    grid-column:2 !important;
    grid-row:1 !important;
    padding:28px 30px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  #services.service-content .service-card.media-text .card-copy h3{
    font-size:clamp(22px,1.75vw,30px) !important;
    line-height:1.05 !important;
    margin:0 0 12px !important;
    max-width:100% !important;
  }

  #services.service-content .service-card.media-text .card-copy p{
    font-size:12px !important;
    line-height:1.62 !important;
    max-width:430px !important;
    margin:0 !important;
  }
}


/* V14: universal back-to-top and hero playback control */
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:150;width:44px;height:44px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(7,7,11,.82);backdrop-filter:blur(14px);color:#fff;display:grid;place-items:center;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .25s,visibility .25s,transform .25s,box-shadow .25s}.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}.back-to-top:hover{box-shadow:0 0 28px rgba(150,75,255,.3);transform:translateY(-2px)}
.hero-play-pause{position:absolute;z-index:8;left:50%;bottom:28px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(4,4,8,.58);backdrop-filter:blur(12px);color:#fff;font-size:12px;display:grid;place-items:center;cursor:pointer;opacity:.82;transition:.25s}.hero-play-pause:hover{opacity:1;box-shadow:0 0 20px rgba(150,75,255,.3)}
@media(max-width:700px){.back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:42px;height:42px}.hero-play-pause{bottom:22px;width:32px;height:32px}}


/* V15 reliability: shared homepage footer styling on every page. */
.site-footer-shared{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  margin:70px 5vw 25px!important;
  padding-top:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border-top:1px solid var(--line)!important;
  color:#7e7b86!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
}
.site-footer-shared .footer-brand-block{display:flex;align-items:center;gap:14px}
.site-footer-shared .footer-brand-block img{width:140px!important}
.site-footer-shared .footer-social{display:flex;align-items:center;gap:10px}
.site-footer-shared .footer .social-icon,.site-footer-shared .social-icon{display:grid;place-items:center}
@media(max-width:700px){
  .site-footer-shared{
    margin:50px 20px 18px!important;
    height:82px!important;
    padding-top:13px!important;
    display:block!important;
    border-top:1px solid var(--line)!important;
  }
  .site-footer-shared .footer-social{
    position:absolute!important;left:0!important;top:13px!important;width:104px!important;
    display:grid!important;grid-template-columns:repeat(3,27px)!important;grid-auto-rows:27px!important;gap:8px!important;
  }
  .site-footer-shared .social-icon{width:27px!important;height:27px!important}
  .site-footer-shared .social-icon svg{width:14px!important;height:14px!important}
  .site-footer-shared .footer-brand-block{
    position:absolute!important;right:42px!important;top:13px!important;display:flex!important;
    flex-direction:column!important;align-items:flex-end!important;gap:7px!important;
  }
  .site-footer-shared .footer-brand-block img{width:92px!important}
  .site-footer-shared .footer-brand-block span{font-size:7px!important;letter-spacing:.06em!important;color:#77737e!important}
  .site-footer-shared .social-linkedin{color:#0A66C2!important}.site-footer-shared .social-twitter{color:#1DA1F2!important}
  .site-footer-shared .social-youtube{color:#FF0000!important}.site-footer-shared .social-facebook{color:#1877F2!important}
  .site-footer-shared .social-instagram{color:#E4405F!important}.site-footer-shared .social-pinterest{color:#E60023!important}
  .site-footer-shared .social-linkedin svg,.site-footer-shared .social-twitter svg,.site-footer-shared .social-youtube svg,
  .site-footer-shared .social-facebook svg,.site-footer-shared .social-pinterest svg{fill:currentColor!important;stroke:none!important}
  .site-footer-shared .social-instagram svg{fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
}
/* Keep the floating controls above every page section and modal-adjacent layer. */
.back-to-top{z-index:9999!important}
.whatsapp-float{z-index:9998!important}

/* V26: homepage CTA text treatment + separated floating controls. */
.statement-title{
  background:linear-gradient(105deg,#7137ff 0%,#c52fd0 28%,#ff6f6f 52%,#ff9a3d 72%,#2f8cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.statement-title span{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:inherit;
  color:inherit;
}
.whatsapp-float{bottom:84px!important;}
@media(max-width:700px){
  .whatsapp-float{bottom:74px!important;}
}

/* V27: branded CTA heading gradient, larger supporting copy, and universal WhatsApp green. */
.statement-title,
.statement-title span{
  background:linear-gradient(105deg,#7137ff 0%,#c52fd0 28%,#ff6f6f 52%,#ff9a3d 72%,#2f8cff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}
.statement-copy{font-size:18px!important;line-height:1.65!important}
.whatsapp-float{
  background:#25D366!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 18px rgba(37,211,102,.22)!important;
  opacity:1!important;
}
.whatsapp-float svg{fill:#fff!important}
@media(max-width:700px){
  .statement-copy{font-size:16px!important;line-height:1.6!important}
  .whatsapp-float{background:#25D366!important;opacity:1!important}
  .whatsapp-float svg{fill:#fff!important}
}

/* V28: continuous CTA heading gradient + separated floating controls. */
.statement-title{
  background:linear-gradient(105deg,#7137ff 0%,#c52fd0 28%,#ff6f6f 52%,#ff9a3d 72%,#2f8cff 100%) !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
.statement-title span{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:inherit !important;
  color:inherit !important;
}
/* Keep WhatsApp clearly above Back to Top with a visible gap. */
.whatsapp-float{bottom:92px !important;}
@media(max-width:700px){
  .whatsapp-float{bottom:108px !important;}
}

/* V31: Inner-page footer contact block mirrors the homepage contact treatment. */
.site-footer-shared{position:relative!important;min-height:126px!important;}
.site-footer-contact{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr;gap:14px;align-items:center;justify-items:center;width:min(360px,28vw);z-index:3;}
.site-footer-contact-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;color:#bdb9c5;text-decoration:none;transition:color .25s,transform .25s;}
.site-footer-contact-item:hover{color:#fff;transform:translateY(-1px);}
.site-footer-contact-label{min-width:0;text-align:center;color:#77737e;font-size:8px;letter-spacing:.18em;text-transform:uppercase;}
.site-footer-contact-label::after{content:':';}
.site-footer-contact-item strong{min-width:0;text-align:center;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.01em;white-space:nowrap;color:inherit;}
@media(max-width:700px){
  .site-footer-shared{min-height:170px!important;height:170px!important;}
  .site-footer-contact{top:50%;width:min(350px,calc(100% - 40px));gap:9px;}
  .site-footer-contact-item{flex-direction:column;align-items:center;justify-content:center;gap:4px;}
  .site-footer-contact-label{width:auto;flex:0 0 auto;text-align:center;font-size:7px;}
  .site-footer-contact-item strong{font-size:10px;text-align:center;white-space:normal;}
}

/* Mobile footer cleanup: hide contact details and footer brand only on mobile. */
@media (max-width:700px){
  .site-footer-shared .site-footer-contact,
  .site-footer-shared .footer-brand-block{
    display:none !important;
  }
}


/* v37: hero controls are coded UI, not baked into the poster artwork. */
.hero-banner-cleanup{position:absolute;inset:0;z-index:7;pointer-events:none;background:
  radial-gradient(ellipse 15% 15% at 49.9% 81.5%,rgba(7,7,12,.96) 0%,rgba(7,7,12,.88) 45%,rgba(7,7,12,0) 72%),
  radial-gradient(ellipse 9% 5% at 8% 93%,rgba(5,5,10,.94) 0%,rgba(5,5,10,.78) 52%,rgba(5,5,10,0) 78%),
  linear-gradient(180deg,transparent 86%,rgba(4,4,8,.48) 100%);
}
.hero-banner-play{left:50%!important;top:81%!important;width:118px!important;height:118px!important;transform:translate(-50%,-50%)!important;z-index:8!important;display:grid!important;place-items:center!important;border:0!important;border-radius:50%!important;background:rgba(5,5,10,.62)!important;box-shadow:0 0 0 2px rgba(113,55,255,.9),0 0 28px rgba(210,55,190,.22),inset 0 0 24px rgba(0,0,0,.22)!important;backdrop-filter:blur(7px);cursor:pointer;opacity:1!important;pointer-events:auto!important;}
.hero-banner-play::before{content:""!important;position:absolute!important;inset:-2px!important;border-radius:50%!important;padding:2px!important;background:conic-gradient(from 0deg,#7137ff,#d62fba,#ff7833,#7137ff)!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask-composite:exclude!important;filter:drop-shadow(0 0 7px rgba(210,55,190,.4))!important;animation:playStrokeSpin 3.2s linear infinite!important;display:block!important;}
.hero-banner-play::after{display:none!important;}
.hero-banner-play:hover{transform:translate(-50%,-50%) scale(1.06)!important;box-shadow:0 0 0 2px rgba(255,255,255,.28),0 0 38px rgba(210,55,190,.36),inset 0 0 24px rgba(0,0,0,.22)!important;}
.hero-play-icon{position:relative;z-index:2;width:0;height:0;margin-left:6px;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:20px solid #fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.hero-play-label{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);white-space:nowrap;font:500 12px/1 'DM Sans',sans-serif;letter-spacing:.02em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);}
.hero-banner-scroll{position:absolute;left:3.4%;bottom:5.8%;z-index:8;color:#fff;font:500 12px/1 'DM Sans',sans-serif;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.8);pointer-events:none;}
.hero-banner-scroll span{display:inline-block;margin-left:5px;font-size:17px;line-height:.5;animation:scrollArrow 1.5s ease-in-out infinite;}
@keyframes scrollArrow{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(4px);opacity:1}}
.hero.is-playing .hero-banner-cleanup,.hero.is-playing .hero-banner-play,.hero.is-playing .hero-banner-scroll{opacity:0!important;pointer-events:none!important;}
.hero.is-playing .hero-banner-cleanup{display:none!important;}
.hero.is-playing .hero-banner-play{display:none!important;}
.hero.is-playing .hero-banner-scroll{display:none!important;}
.hero.is-playing ~ .whatsapp-float{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
@media(max-width:700px){
  .hero-banner-cleanup{background:radial-gradient(ellipse 16% 11% at 48.5% 89%,rgba(5,5,10,.97) 0%,rgba(5,5,10,.9) 46%,rgba(5,5,10,0) 75%),radial-gradient(ellipse 11% 4.5% at 13% 93%,rgba(5,5,10,.96) 0%,rgba(5,5,10,.82) 52%,rgba(5,5,10,0) 78%),linear-gradient(180deg,transparent 88%,rgba(4,4,8,.5) 100%)}
  .hero-banner-play{top:89.3%!important;width:106px!important;height:106px!important;}
  .hero-play-icon{border-top-width:11px;border-bottom-width:11px;border-left-width:17px;}
  .hero-play-label{top:calc(100% + 11px);font-size:11px;}
  .hero-banner-scroll{left:5%;bottom:5.5%;font-size:11px;}
}
@media(prefers-reduced-motion:reduce){.hero-banner-scroll span,.hero-banner-play::before{animation:none!important;}}


/* V38: restore the animated arrow stack above the coded Scroll to Explore cue and lower the coded hero Play button. */
.hero-banner-play{top:86%!important;}
.hero-banner-scroll{
  bottom:5.8%;
  padding-top:28px;
  line-height:1;
}
.hero-scroll-arrows{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:1px;
}
.hero-scroll-arrows i{
  display:block;
  width:8px;
  height:8px;
  border-right:1.5px solid rgba(255,255,255,.92);
  border-bottom:1.5px solid rgba(255,255,255,.92);
  transform:rotate(45deg);
  animation:heroScrollArrow 1.35s ease-in-out infinite;
  opacity:.35;
}
.hero-scroll-arrows i:nth-child(1){animation-delay:0s}
.hero-scroll-arrows i:nth-child(2){animation-delay:.16s}
.hero-scroll-arrows i:nth-child(3){animation-delay:.32s}
.hero-scroll-label{display:block}
@keyframes heroScrollArrow{
  0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.25}
  45%{transform:translateY(2px) rotate(45deg);opacity:1}
  70%{transform:translateY(4px) rotate(45deg);opacity:.65}
}
@media(max-width:700px){
  .hero-banner-play{top:91.5%!important;}
  .hero-banner-scroll{bottom:5.5%;padding-top:25px;}
  .hero-scroll-arrows{width:30px;height:22px;}
  .hero-scroll-arrows i{width:7px;height:7px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-scroll-arrows i{animation:none!important;opacity:.7;}
}

/* V39: center the animated scroll arrows over the Scroll to explore label, add a small gap, use branded gradient arrows, and enlarge Watch Showreel text. */
.hero-banner-scroll{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:max-content;
  gap:7px;
  padding-top:0;
}
.hero-scroll-arrows{
  position:static;
  width:34px;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
}
.hero-scroll-arrows i{
  width:12px;
  height:8px;
  border:0;
  background:linear-gradient(135deg,#7137ff 0%,#d62fba 55%,#ff7833 100%);
  clip-path:polygon(0 0,50% 55%,100% 0,100% 35%,50% 100%,0 35%);
  transform:none;
  animation:heroScrollArrowGradient 1.35s ease-in-out infinite;
  opacity:.35;
}
.hero-scroll-arrows i:nth-child(1){animation-delay:0s}
.hero-scroll-arrows i:nth-child(2){animation-delay:.16s}
.hero-scroll-arrows i:nth-child(3){animation-delay:.32s}
.hero-scroll-label{
  display:block;
  font-size:15px;
  line-height:1;
  white-space:nowrap;
}
@keyframes heroScrollArrowGradient{
  0%,100%{transform:translateY(-2px);opacity:.25}
  45%{transform:translateY(2px);opacity:1}
  70%{transform:translateY(4px);opacity:.65}
}
.hero-play-label{
  font-size:16px;
  font-weight:600;
}
@media(max-width:700px){
  .hero-banner-scroll{
    gap:6px;
    padding-top:0;
  }
  .hero-scroll-arrows{
    width:30px;
    gap:2px;
  }
  .hero-scroll-arrows i{
    width:10px;
    height:7px;
  }
  .hero-scroll-label{font-size:14px}
  .hero-play-label{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .hero-scroll-arrows i{animation:none!important;opacity:.7}
}


/* V39: homepage footer social grid and universal back-to-top visibility. */
.cta-screen .footer-social{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:18px!important;
  bottom:auto!important;
  width:110px!important;
  transform:none!important;
  display:grid!important;
  grid-template-columns:repeat(3,30px)!important;
  grid-template-rows:repeat(2,30px)!important;
  grid-auto-rows:30px!important;
  gap:10px!important;
  align-items:center!important;
  justify-content:start!important;
}
.cta-screen .footer .social-icon{width:30px!important;height:30px!important}
@media(max-width:700px){
  .cta-screen .footer-social{
    left:0!important; right:auto!important; top:13px!important; bottom:auto!important;
    width:104px!important; transform:none!important;
    display:grid!important; grid-template-columns:repeat(3,27px)!important;
    grid-template-rows:repeat(2,27px)!important; grid-auto-rows:27px!important;
    gap:8px!important; justify-content:start!important;
  }
  .cta-screen .footer .social-icon{width:27px!important;height:27px!important}
}

/* V41: approved hero artwork + inner-page footer social grid. Home footer remains unchanged. */
@media (min-width:701px){
  .site-footer-shared .footer-social{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:18px!important;
    width:100px!important;
    display:grid!important;
    grid-template-columns:repeat(3,28px)!important;
    grid-auto-rows:28px!important;
    gap:8px!important;
    align-items:center!important;
    justify-items:center!important;
  }
  .site-footer-shared .social-icon{
    width:28px!important;
    height:28px!important;
  }
  .site-footer-shared .social-icon svg{
    width:15px!important;
    height:15px!important;
  }
}

@media (max-width:700px){
  .site-footer-shared .footer-social{
    left:0!important;
    right:auto!important;
    top:13px!important;
    width:104px!important;
    grid-template-columns:repeat(3,27px)!important;
    grid-auto-rows:27px!important;
    gap:8px!important;
  }
}

/* V42: definitive inner-page social footer layout. Home CTA footer is intentionally excluded. */
.site-footer-shared .footer-social{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:18px!important;
  bottom:auto!important;
  width:104px!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,30px)!important;
  grid-template-rows:repeat(2,30px)!important;
  grid-auto-rows:30px!important;
  column-gap:8px!important;
  row-gap:8px!important;
  align-items:center!important;
  justify-items:center!important;
  justify-content:start!important;
  transform:none!important;
}
.site-footer-shared .footer-social .social-icon{
  width:30px!important;
  height:30px!important;
  margin:0!important;
}
.site-footer-shared .footer-social .social-icon svg{
  width:15px!important;
  height:15px!important;
}
@media(max-width:700px){
  .site-footer-shared .footer-social{
    left:0!important;
    right:auto!important;
    top:13px!important;
    bottom:auto!important;
    width:104px!important;
    grid-template-columns:repeat(3,27px)!important;
    grid-template-rows:repeat(2,27px)!important;
    grid-auto-rows:27px!important;
    column-gap:8px!important;
    row-gap:8px!important;
    justify-content:start!important;
    transform:none!important;
  }
  .site-footer-shared .footer-social .social-icon{
    width:27px!important;
    height:27px!important;
  }
}

/* V45: restore the seven requested gradient words after the global heading reset. */
.statement-title span,
.screen-head h2 span,
.process-intro h2 span,
.trust-heading-copy h2 span,
.about-copy h2 span {
  background:linear-gradient(100deg,#7137ff,#d02ca0 54%,#ff7833) !important;
  background-clip:text !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/* V52: mobile-only footer social icons in one centered row. Desktop unchanged. */
@media (max-width:700px){
  .site-footer-shared .footer-social{
    left:50%!important;
    right:auto!important;
    top:13px!important;
    bottom:auto!important;
    width:auto!important;
    height:30px!important;
    display:grid!important;
    grid-template-columns:repeat(6,27px)!important;
    grid-template-rows:27px!important;
    grid-auto-rows:27px!important;
    column-gap:8px!important;
    row-gap:0!important;
    align-items:center!important;
    justify-content:center!important;
    transform:translateX(-50%)!important;
  }
  .site-footer-shared .footer-social .social-icon{
    width:27px!important;
    height:27px!important;
  }
  .site-footer-shared .footer-social .social-icon svg{
    width:14px!important;
    height:14px!important;
  }
}

/* V53: mobile-only footer social row. Keep desktop layouts unchanged. */
@media (max-width:700px){
  .cta-screen .footer-social,
  .site-footer-shared .footer-social{
    left:50%!important;
    right:auto!important;
    top:13px!important;
    bottom:auto!important;
    width:auto!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    grid-auto-rows:none!important;
  }
  .cta-screen .footer .social-icon,
  .site-footer-shared .footer-social .social-icon{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
  }
  .cta-screen .footer .social-icon svg,
  .site-footer-shared .footer-social .social-icon svg{
    width:22px!important;
    height:22px!important;
  }
}

/* v54: mobile-only hero showreel control refinement. Keep desktop unchanged. */
@media(max-width:700px){
  .hero-banner-play{width:88px!important;height:88px!important;}
  .hero-play-icon{border-top-width:9px!important;border-bottom-width:9px!important;border-left-width:14px!important;margin-left:4px!important;}
  .hero-play-label{top:calc(100% + 9px)!important;font-size:12px!important;}
}


/* SEO_v66 approved changes 5 & 6: animated branded gradient strokes */
.nav-cta.project-trigger,
.final-cta .project-trigger,
.project-trigger,
.hero-banner-play{
  position:relative;
  isolation:isolate;
}
.nav-cta.project-trigger::before,
.final-cta .project-trigger::before,
.project-trigger::before,
.hero-banner-play::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(120deg,#7c3aed,#ec4899,#f59e0b,#7c3aed);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:cpV66Gradient 3.5s ease infinite;
  pointer-events:none;
  z-index:-1;
}
.hero-banner-play::before{
  inset:1px;
  border-radius:50%;
  padding:2px;
  z-index:1;
}
@keyframes cpV66Gradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* WhatsApp is hidden only during hero video playback. */
body.hero-video-playing .whatsapp-float{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* SEO_v67: Home-page text clipping fix only */
.home,
#home,
.screen-head,
.screen-head > div,
.type-note,
.statement-inner,
.trust-inner,
.trust-heading,
.trust-heading-copy{
  min-width:0;
}
.screen-head > div,
.trust-heading-copy{
  overflow:visible;
}
.screen-head > h2,
.screen-head h2,
.statement-title,
.trust-heading-copy h2,
.process-intro h2,
.cta-screen h2{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
}
.screen-head > .type-note{
  width:100%;
  max-width:390px !important;
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}
.type-note .type-word{
  max-width:100%;
  white-space:normal;
}
@media(max-width:700px){
  .screen-head > .type-note{
    max-width:100% !important;
    padding-left:18px;
  }
  .screen-head h2,
  .trust-heading-copy h2,
  .process-intro h2{
    overflow-wrap:anywhere;
  }
}
/* Keep the decorative TRUST lettering inside the visual frame so it doesn't
   look like accidental cropped text at the viewport edge. */
.trust-bg-word{
  left:clamp(10px,2vw,28px);
}


/* SEO_v68: Home text clipping fix.
   The full-screen scene container was clipping text that legitimately extends
   a few pixels beyond its internal layout box. Keep the page itself locked to
   the viewport, but allow Home scene content to render fully. Child media/cards
   retain their own overflow rules, so this does not change their visual frames. */
html,body.home-page{overflow:hidden!important;}
.home-page .snap-page{overflow:visible!important;}
.home-page .screen{overflow:visible!important;}
.home-page .hero-media,
.home-page .hero,
.home-page .hero-banner-picture,
.home-page .hero-banner,
.home-page .service-card,
.home-page .portrait-row,
.home-page .digital-grid,
.home-page .trust-logo-card,
.home-page .trust-feature,
.home-page .cta-bg{
  overflow:hidden;
}
.home-page .screen-head h2,
.home-page .statement-title,
.home-page .process-intro h2,
.home-page .trust-heading-copy h2,
.home-page .about-copy h2,
.home-page .cta-screen h2{
  overflow:visible!important;
  max-width:none;
}
.home-page .screen-head > .type-note{
  overflow:visible!important;
}


/* SEO_v70: cropping fix without changing any font sizes.
   The problem was caused by section-level overflow clipping and composited
   filter/transform surfaces, not typography. */
.home-page .screen,
.home-page .snap-page{
  overflow:visible!important;
}
.home-page #services.service-content{
  overflow:visible!important;
}
.home-page .screen.is-current,
.home-page .screen.is-leaving{
  filter:none!important;
  contain:none!important;
}
.home-page .statement-inner,
.home-page .screen-head,
.home-page .screen-head > div,
.home-page .process-intro,
.home-page .process-intro > *,
.home-page .trust-inner,
.home-page .trust-heading,
.home-page .trust-heading-copy,
.home-page .about-copy,
.home-page .cta-screen{
  overflow:visible!important;
  contain:none!important;
}
/* Preserve clipping only where it is intentionally part of image/card frames. */
.home-page .hero-media,
.home-page .hero-banner-picture,
.home-page .hero-banner,
.home-page .service-card,
.home-page .portrait-row,
.home-page .digital-grid,
.home-page .trust-logo-card,
.home-page .cta-bg{
  overflow:hidden;
}

/* Rebuild Start a Project as a clean animated gradient-fill button. */
.home-page .cta-button.project-trigger{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  box-sizing:border-box!important;
  min-width:210px!important;
  min-height:52px!important;
  padding:16px 26px!important;
  border:0!important;
  border-radius:999px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  color:#fff!important;
  background:linear-gradient(115deg,#7137ff 0%,#c52fd0 30%,#ff6f6f 55%,#ff7833 75%,#7137ff 100%)!important;
  background-size:300% 300%!important;
  animation:cpV70ButtonGradient 4s ease-in-out infinite!important;
  box-shadow:0 12px 38px rgba(113,55,255,.24),0 0 30px rgba(210,47,186,.12)!important;
}
.home-page .cta-button.project-trigger::before,
.home-page .cta-button.project-trigger::after{
  display:none!important;
}
.home-page .cta-button.project-trigger span{
  color:#fff!important;
  opacity:1!important;
  white-space:nowrap!important;
}
@keyframes cpV70ButtonGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media(max-width:700px){
  .home-page .cta-button.project-trigger{
    min-width:200px!important;
    min-height:50px!important;
    padding:15px 22px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .home-page .cta-button.project-trigger{animation:none!important;}
}


/* SEO_v71: final 2px bottom clearance on the Home statement, without resizing text. */
.home-page .statement-inner{
  transform:translateY(-8px)!important;
}
.home-page .cta-button.project-trigger{
  z-index:5!important;
}
.home-page .cta-button.project-trigger span{
  position:relative!important;
  z-index:6!important;
}


/* SEO_v72: fix gradient-text compositing artifacts without changing typography. */
.home-page .statement-title span,
.home-page .screen-head h2 span,
.home-page .process-intro h2 span,
.home-page .trust-heading-copy h2 span,
.home-page .about-copy h2 span,
.home-page .cta-screen h2 span{
  display:inline-block!important;
  vertical-align:baseline!important;
  -webkit-box-decoration-break:clone!important;
  box-decoration-break:clone!important;
  background-repeat:no-repeat!important;
  background-origin:border-box!important;
  background-clip:text!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  overflow:visible!important;
  isolation:isolate!important;
}


/* SEO_v73: eliminate Chromium background-clip/text + negative-letter-spacing artifact.
   No font sizes, fonts, layout dimensions, or wording are changed. */
.home-page .statement-title,
.home-page .statement-title span,
.home-page .screen-head h2,
.home-page .screen-head h2 span,
.home-page .process-intro h2,
.home-page .process-intro h2 span,
.home-page .trust-heading-copy h2,
.home-page .trust-heading-copy h2 span,
.home-page .about-copy h2,
.home-page .about-copy h2 span,
.home-page .cta-screen h2,
.home-page .cta-screen h2 span,
.home-page .type-note .type-word,
.home-page .cinematic-copy h2 span{
  letter-spacing:normal!important;
}


/* SEO_v74: three precise Home text fixes, no font-size changes. */

/* 1. Keep punctuation attached to the gradient word. */
.home-page .service-social .screen-head h2 span{
  white-space:nowrap!important;
}

/* 2. The enlarged inline gradient type uses a tight .88 line-height.
   Restore a normal line box so descenders such as y/g/p are never clipped. */
.home-page .type-note .type-word{
  line-height:1!important;
  vertical-align:baseline!important;
  overflow:visible!important;
}

/* 3. The final CTA headline is intentionally plain white.
   V72 made all h2 spans gradient-capable, which made this white span
   transparent when it had no gradient background. */
.home-page .cta-screen h2 span{
  display:inline!important;
  background:none!important;
  background-clip:initial!important;
  -webkit-background-clip:initial!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
}


/* SEO_v75: match Home Marketing/Promotion service description to service-section copy scale. */
@media(max-width:700px){
  .home-page .service-content .screen-head > .type-note{
    font-size:15px !important;
    line-height:1.5 !important;
  }
}