/* SingIndustry: editorial engineering system — graphite, spatial media, measured motion. */
:root{--night:#080809;--paper:#080809;--ink:#f2f2f5;--line:#ffffff16;--muted:#8e8e99;--soft:#0e0e10}body{background:#080809;color:#f2f2f5}.site-header{height:98px;padding-top:15px}.nav-shell{width:calc(100% - 56px);max-width:1376px;padding:0 26px;height:70px;border-radius:60px;transition:background .4s,box-shadow .4s}.site-header.scrolled,.inner-page .site-header{background:transparent;border:0;backdrop-filter:none}.site-header.scrolled .nav-shell,.inner-page .site-header .nav-shell{background:#111114e6;backdrop-filter:blur(25px);box-shadow:0 0 0 1px #ffffff08,0 10px 40px #0002}.brand{font-size:23px;font-weight:500}.site-header nav>a{font-size:12px;color:#b1b1bc}.site-header nav .nav-cta{padding:11px 20px}.site-header nav{gap:22px}.shell{max-width:1400px;padding-inline:68px}.section{padding-block:120px}.kicker{font-size:11px;letter-spacing:1.6px;color:#90909d}.dim{color:#797980}.button-white{background:#eeeef1;color:#111115}.button-dark{background:#eeeef1;color:#111115}.button-dark:hover{background:#c6bbf8;color:#111115}.button-outline{border:1px solid #ffffff24;background:#11111255;color:#dfdfe8}.button-outline:hover{background:#24222c;border-color:#817394}.dark-text{color:#d5d4de}.text-button{color:#d5d4de;font-size:14px}.button{min-height:57px;padding:16px 26px}.text-button:after{display:none}.text-button{position:relative}.text-button:hover{color:#c5b4ff}.e-hero{position:relative;isolation:isolate;min-height:760px;height:100svh;max-height:1000px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#15132255,transparent 60%),#080809}.e-hero-content{position:relative;text-align:center;padding-top:75px;width:100%;z-index:2}.hero-tag{margin-bottom:35px;font-size:10px;color:#aaa7b8}.hero-tag .signal{background:#c9b7ff;box-shadow:0 0 12px #a98ada7d}.e-hero h1{font-size:clamp(55px,6.5vw,96px);line-height:1.05;letter-spacing:-.065em;font-weight:450}.e-hero h1 em{font-style:normal;color:#a89fbe}.e-hero p{max-width:655px;margin:31px auto 0;font-size:18px;line-height:1.8;color:#92929f;letter-spacing:-.3px}.e-hero .actions{justify-content:center;margin-top:31px;gap:15px}.e-capability{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:25px;font-size:14px;color:#bbb4cc;min-height:29px}.capability-prefix{font-family:monospace;font-size:10px;letter-spacing:1px;color:#5d586c}.e-capability #rotating-capability{display:inline-block;transition:opacity .25s,transform .25s}.e-capability .changing{opacity:0;transform:translateY(8px)}.hero-base{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:62px;font-size:9px;color:#696674;letter-spacing:1px}.hero-base>span{display:flex;gap:14px;align-items:center}.hero-base i{width:30px;height:1px;background:#47414f}.intelligence-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.8;mask-image:linear-gradient(transparent 25%,#000 65%)}.motion-toggle{border-color:#ffffff15;background:#14131655;color:#8d879d;font-size:10px}.media-reel{height:125svh;max-height:1350px;min-height:850px;position:relative;margin-top:-10px}.media-pin{position:sticky;top:105px;height:calc(100svh - 140px);max-height:880px;min-height:570px;display:flex;align-items:center;justify-content:center;overflow:hidden}.media-frame{position:relative;margin:0;width:calc(100% - 70px);height:100%;overflow:hidden;border-radius:18px;border:1px solid #ffffff12;transform:scale(var(--media-scale,.84));transform-origin:center center;will-change:transform;background:#0c0c10}.media-frame>img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;transform:scale(1.06) translateY(var(--media-shift,0px));will-change:transform}.media-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050507a0,transparent 65%),linear-gradient(0deg,#050507a0,transparent 40%);pointer-events:none}.media-overlay{position:absolute;left:55px;bottom:65px;z-index:2;max-width:500px}.media-overlay h2{font-size:clamp(38px,4.2vw,64px);font-weight:450;letter-spacing:-.05em;color:#e5e4ed}.media-overlay .kicker{font-size:10px;color:#a39caf;margin-bottom:17px}.media-overlay>a{margin-top:27px}.media-frame figcaption{position:absolute;right:28px;bottom:24px;font-size:9px;z-index:2;color:#85818e}.media-cross{position:absolute;color:#878192;font-family:monospace;font-size:22px;z-index:2}.cross-a{left:28px;top:23px}.cross-b{right:28px;top:23px}.e-credibility{padding:75px 0 90px;text-align:center}.e-credibility .kicker{font-size:10px;letter-spacing:1.5px}.trust-logos{display:flex;justify-content:space-between;align-items:center;gap:55px;padding:35px 0 0}.trust-logos>div{height:70px;flex:1;display:flex;justify-content:center;align-items:center;border-radius:4px;background:#ececf0;padding:12px 18px;opacity:.65;transition:opacity .3s,transform .3s}.trust-logos>div:hover{opacity:1;transform:translateY(-3px)}.trust-logos img{height:100%;width:100%;object-fit:contain;filter:grayscale(1)}.manifesto{height:135svh;min-height:850px;max-height:1400px;padding:55px 0}.manifesto-pin{position:sticky;top:190px;display:grid;grid-template-columns:.65fr 1.9fr;gap:70px;padding-bottom:100px}.manifesto-label .kicker{font-size:10px}.manifesto-label>a{font-size:23px;letter-spacing:-.7px}.scroll-copy{font-size:clamp(27px,2.8vw,42px);line-height:1.5;letter-spacing:-1.3px;color:#d4d2df}.scroll-copy .word{transition:color .1s;color:#45434c}.scroll-copy .word.lit{color:#e6e4ed}.manifesto-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:35px;gap:25px}.manifesto-bottom>span{font-size:9px;letter-spacing:1.4px;color:#6a6576}.manifesto-bottom a{font-size:12px}.statement-ribbon{overflow:hidden;padding:5px 0 80px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.statement-ribbon>div{display:flex;align-items:center;width:max-content;gap:40px;animation:ribbon 55s linear infinite}.statement-ribbon span{font-size:clamp(70px,11vw,160px);letter-spacing:-.065em;line-height:1.15;font-weight:400;color:#27242e}.statement-ribbon i{font-size:55px;color:#77708b;font-style:normal}.center-heading{text-align:center;max-width:880px;margin:0 auto 85px}.center-heading h2{font-size:clamp(45px,5.5vw,80px);line-height:1.08;font-weight:450}.center-heading h2>span{color:#797681}.center-heading p{max-width:640px;font-size:18px;color:#8f8a9b;line-height:1.8;margin:25px auto 0}.e-work{padding-top:25px}.project-stories{position:relative}.project-story{display:grid;grid-template-columns:1.1fr .8fr;gap:80px;align-items:center;padding:50px 0 100px;position:relative;background:#080809}.story-image{display:block;position:relative;aspect-ratio:1.2;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#323242,#15141c 65%);border:1px solid #ffffff0f}.story-image-inner{position:absolute;inset:40px 35px 0;transform:perspective(1100px) rotateY(-7deg) rotateX(5deg);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.65,.3,1)}.story-image img{width:100%;height:100%;object-fit:contain;object-position:center center;filter:saturate(.8);transition:filter .7s;will-change:transform}.story-image:hover .story-image-inner{transform:perspective(1100px) rotateY(0deg) rotateX(0deg) scale(1.045)}.story-image:hover img{filter:saturate(1)}.project-story:nth-child(2) .story-image{background:radial-gradient(ellipse at 50% 40%,#19252a,#111719)}.project-story:nth-child(3) .story-image{background:radial-gradient(ellipse at 50% 40%,#282625,#151312)}.story-image-tag{position:absolute;left:22px;top:20px;font-size:10px;letter-spacing:1px;color:#a29aac}.story-image-arrow{position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff25;border-radius:50%;background:#17151ba0;font-size:22px}.story-copy{padding-bottom:10px}.story-copy .kicker{font-size:10px;margin-bottom:28px}.story-copy h3{font-size:clamp(35px,4vw,57px);font-weight:450;line-height:1.08;margin-bottom:22px}.story-copy>p{font-size:22px;letter-spacing:-.5px;line-height:1.5;color:#b0a8bb}.story-copy>p.story-detail{font-size:16px;letter-spacing:0;color:#827b8d;margin:21px 0}.story-tags{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:24px;padding-top:24px;border-top:1px solid #ffffff14}.story-tags>span{font-size:11px;color:#766d84}.story-copy>a{margin-top:30px;font-size:13px}.e-work .all-work-link{margin-top:0;font-size:23px;color:#8c819d;padding:25px 0}.all-work-link>span{font-size:13px;letter-spacing:0}.editorial-heading{display:grid;grid-template-columns:.65fr 1.9fr;gap:70px;margin-bottom:75px}.editorial-heading h2{font-size:clamp(40px,4.6vw,66px)}.editorial-heading p{max-width:600px;margin-top:25px;color:#918899;font-size:17px;line-height:1.8}.expertise-mosaic{padding-top:55px}.mosaic-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:500px 350px;gap:20px}.mosaic-card{position:relative;border-radius:15px;padding:36px;border:1px solid #ffffff12;background:linear-gradient(140deg,#16141b,#0e0e11);overflow:hidden;display:flex;flex-direction:column;transition:border-color .4s,transform .4s}.mosaic-card:hover{border-color:#bba0ee45;transform:translateY(-4px)}.mosaic-card .kicker{font-size:9px;margin-bottom:25px;color:#80738f}.mosaic-card h3{font-size:39px;font-weight:450;letter-spacing:-1.6px;line-height:1.12}.mosaic-card p{font-size:15px;color:#8b8096;line-height:1.8;margin-top:20px}.architecture-card{grid-row:span 2;padding:40px 35px}.architecture-card h3{font-size:47px}.architecture-map{margin:65px 0 50px;position:relative}.architecture-map>div{border:1px solid #574461;border-radius:8px;padding:22px 17px;font-size:10px;letter-spacing:1.3px;color:#ad9cbc;background:linear-gradient(115deg,#211b2a,#131019);margin-bottom:23px;transform:perspective(700px) rotateY(-12deg);transition:transform .7s;position:relative}.architecture-map>div:not(:last-child):after{content:'';height:24px;border-left:1px dashed #725683;position:absolute;bottom:-24px;left:50%}.architecture-map>div>span{float:right;color:#b99eda;font-size:15px}.architecture-card:hover .architecture-map>div{transform:perspective(700px) rotateY(0)}.mosaic-link{margin-top:auto;display:block;font-size:12px;color:#bba9ce}.intelligence-card{grid-column:span 2;padding:0}.intelligence-card>img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;transition:transform 1s}.intelligence-card:hover>img{transform:scale(1.05)}.intelligence-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#08060dea,transparent 85%),linear-gradient(90deg,#08070c70,transparent)}.intelligence-card>div{position:absolute;left:35px;bottom:30px;z-index:1}.intelligence-card h3{font-size:35px;line-height:1.15;margin-bottom:22px}.intelligence-card .kicker{color:#bba4d2}.delivery-card{padding:28px}.delivery-card h3{font-size:28px}.delivery-card p{font-size:13px;margin-top:15px}.delivery-timeline{display:flex;justify-content:space-between;gap:7px;border-top:1px solid #4c3d5a;padding-top:18px;margin-top:40px}.delivery-timeline>span{font-size:9px;color:#9d8aac;position:relative}.delivery-timeline i{width:5px;height:5px;background:#b197d7;border-radius:50%;position:absolute;top:-21px;left:0}.delivery-card .mosaic-link{margin-top:28px}.experience-card{background:radial-gradient(ellipse at 100% 0,#3c304840,transparent 75%),#111016;padding:30px}.experience-card>strong{font-size:100px;font-weight:400;letter-spacing:-8px;line-height:1.05;margin-top:10px}.experience-card i{font-style:normal;color:#a490b7}.experience-card p{font-size:14px;margin:15px 0}.ai-story{background:#0b0a0e;border-block:1px solid #ffffff08}.ai-sticky h2{font-size:clamp(58px,6vw,84px);font-weight:450}.ai-story .kicker{font-size:10px}.ai-story h3{font-weight:450}.ai-step>p{color:#918699;font-size:16px}.ai-sticky>p{color:#9c91a5}.ai-cap-list{font-size:13px;color:#7c6d8a}.ai-quality>span{font-size:13px}.stack-section{overflow:hidden}.stack-section .center-heading{margin-bottom:55px;max-width:850px}.stack-section .center-heading>.text-button{margin-top:26px}.stack-marquees{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);overflow:hidden}.stack-track{display:flex;width:max-content;animation:stack-scroll 42s linear infinite}.stack-group{display:flex;gap:18px;padding-right:18px;flex-shrink:0}.stack-group>span{display:flex;gap:15px;align-items:center;border:1px solid #ffffff12;border-radius:12px;background:#111014;padding:18px 25px;font-size:15px;color:#b9b2c2;min-width:180px;white-space:nowrap}.stack-group i{display:grid;place-items:center;border:1px solid #bdb0d026;width:33px;height:33px;border-radius:7px;font:12px monospace;color:#a59bba;background:#211b2a}.stack-reverse{animation-direction:reverse;margin-top:17px;animation-duration:49s}.stack-marquees:hover .stack-track{animation-play-state:paused}.stack-note{text-align:center;color:#665d71;font-size:12px;margin-top:30px}.service-layout{display:grid;grid-template-columns:.8fr 1.4fr;gap:100px;align-items:start}.service-intro{position:sticky;top:160px}.service-intro h2{font-size:48px}.service-intro p{font-size:16px;color:#918497;margin:25px 0 30px;max-width:340px}.service-disclosure{border-top:1px solid #ffffff1c}.service-disclosure:last-child{border-bottom:1px solid #ffffff1c}.service-disclosure summary{display:flex;align-items:center;gap:19px;list-style:none;padding:29px 0;cursor:pointer}.service-disclosure summary::-webkit-details-marker{display:none}.service-disclosure summary>span{font-size:10px;color:#716379;align-self:flex-start;margin-top:7px}.service-disclosure summary h3{font-size:27px;line-height:1.2;letter-spacing:-1px;color:#b5a8bf;transition:color .25s}.service-disclosure summary>i{font-style:normal;font-size:28px;margin-left:auto;color:#7e6e8a;transition:transform .3s}.service-disclosure[open] summary h3{color:#eee6f2}.service-disclosure[open] summary>i{transform:rotate(45deg);color:#c2a4df}.service-body{padding:0 0 35px 32px}.service-body p{color:#918397;font-size:16px;line-height:1.8;margin-bottom:15px;max-width:630px}.service-body ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:10px 0;margin:20px 0 25px}.service-body li{color:#b1a1bd;font-size:13px}.service-body li:before{content:'↗';margin-right:10px;color:#705b83}.service-body>a{font-size:13px}.event-vertical{background:#0e0c11;border-block:1px solid #ffffff0a}.event-grid h2{font-size:45px}.event-grid p{font-size:16px;color:#918299}.event-tags>span{border-color:#ffffff15;color:#92809b}.event-screen{background:#18141e;border-color:#3c3045}.event-screen h3{color:#cbb8db}.event-flow>span{background:#201728;border-color:#46334f;color:#b6a0c5}.event-screen-top{color:#9f89ac}.event-screen-bottom{border-color:#ffffff0f;color:#83718b}.event-pass{background:#21172a;border:1px solid #54395c}.industry-section{background:#080809}.industry-buttons button{border-color:#ffffff12;color:#796b83}.industry-buttons button[aria-selected=true]{color:#e3d3ed}.industry-buttons button>span{color:#60486f}.industry-panels h3{color:#c8b5d7}.industry-panels p{color:#94839e}.industry-art{background:radial-gradient(ellipse,#38283c55,transparent 65%)}.industry-art i{border-color:#695074;background:#30203555}.industry-art>span{color:#a788b7}.process-section{background:#0d0b0f;border-block:1px solid #ffffff0a}.process-step{border-color:#51355f}.process-step:before{box-shadow:0 0 0 5px #0d0b0f}.process-step.visible{border-top-color:#664279}.process-step h3{color:#c8b5d7}.process-step p{color:#8e7c99}.why-proof{background:#15111a;border:1px solid #ffffff10}.why-layout p{color:#8f7f9a}.why-points>span{color:#aa95b6}.insights-section{background:#0d0b0f;border-block:1px solid #ffffff0a}.insight-card{border-color:#3b2847}.insight-card .kicker{color:#887092}.insight-card h3{color:#c8b7d6}.insight-card:hover h3{color:#e6d1f4}.insight-card .text-button{color:#b294c4}.faq-section .service-layout{grid-template-columns:.8fr 1.4fr}.faq-section h2{font-size:45px}.faq-list details{border-bottom:1px solid #ffffff14}.faq-list summary{list-style:none;font-size:19px;letter-spacing:-.3px;padding:24px 0;display:flex;gap:20px;justify-content:space-between;color:#bfb0cc;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:24px;line-height:1;transition:transform .3s;color:#7c618d}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list p{color:#907f9a;font-size:16px;line-height:1.85;padding:0 0 27px}.closing{background:#0b080e;padding-block:150px}.closing h2{font-weight:450}.closing h2>span{color:#b4a3c4}.closing .kicker{color:#8e759e}.closing-bottom>p{color:#a08caf}.site-footer{background:#0b080e;border-color:#ffffff10}.footer-top .brand{font-size:31px}.footer-top{padding-bottom:60px}.footer-columns .footer-email{font-size:45px}.sg-time{color:#c3a4d4;margin-left:12px;font-variant-numeric:tabular-nums}.footer-columns .kicker{color:#806889}.footer-columns a,.footer-columns p{color:#a38db0;font-size:14px}.footer-bottom{color:#786083}.footer-top>p{color:#9b85a8}.editorial-cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:94px;height:94px;border-radius:50%;background:#e8dfffeb;color:#28202f;display:grid;place-items:center;text-align:center;font-size:9px;letter-spacing:1px;opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .2s,transform .3s;backdrop-filter:blur(15px)}.editorial-cursor.active{opacity:1;transform:translate(-50%,-50%) scale(1)}.page-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(var(--page-progress,0));transform-origin:left;background:#ab8bcc;z-index:300;opacity:.8}.inner-hero{background:radial-gradient(ellipse at 80% 0,#271c3250,transparent 70%),#0c0b0f}.inner-hero h1{font-weight:450}.inner-hero .dim{color:#a997bc}.capabilities{background:#0d0b10}.capability-card{background:#131016;border-color:#ffffff12}.capability-card h2,.capability-card h3{color:#d2c1df}.capability-card p{color:#9c88a7}.capability-card:hover{border-color:#77568d;background:#19131f}.tags>span{border-color:#584162;color:#a78ab8}.cap-art span{background:linear-gradient(130deg,#3b284d,#17101e);border-color:#73528b}.cap-art b{color:#b997d0}.page-intro p,.detail-grid p,.detail-grid ul{color:#a08baa}.detail-grid h3{color:#ccb4dc}.page-visual{background:#18121d}.project-facts p{color:#9b85a7}.project-facts>div{border-color:#483251}.project-disclosure{color:#807087}.filter-bar button{background:#15101b;color:#a58db3;border-color:#44304f}.filter-bar button[aria-pressed=true]{background:#dbc9e6;color:#26172f}.work-meta .kicker{color:#8c709a}.work-meta>p{color:#ad93bc}.work-visual{background:#30233c}.full-industry-grid article{background:#120d17;border-color:#422e4c}.full-industry-grid h3{color:#b097be}.full-industry-grid p{color:#9c83aa}.article-content p,.legal-copy p{color:#ad96ba}.contact-details{color:#ae94bc}.contact-details>a{color:#d6bce4}.field label{color:#b79dc5}.field input,.field textarea,.field select{background:#19101f;color:#e0cdeb;border-color:#60416d}.form-note{color:#8f749d}.form-status{background:#291b33;color:#d1b7df}.form-status.error{background:#311c24;color:#e2b1c3}.inner-page .insight-card h2{color:#d0b6df}.legal-copy a{color:#d5b1e9;text-decoration:underline}.motion-paused .scroll-copy .word{color:#e6e4ed}.motion-paused .media-frame{transform:none}.motion-paused .statement-ribbon>div,.motion-paused .stack-track{animation-play-state:paused}.motion-paused .editorial-cursor{display:none}
@keyframes ribbon{to{transform:translateX(-50%)}}@keyframes stack-scroll{to{transform:translateX(-50%)}}
@media(min-width:1450px){.mosaic-grid{grid-template-rows:520px 370px}.e-hero h1{font-size:98px}.e-hero-content{padding-top:100px}}@media(max-width:1200px){.site-header nav{gap:14px}.site-header nav>a{font-size:11px}.shell{padding-inline:46px}.e-hero h1{font-size:76px}.manifesto-pin,.editorial-heading{gap:45px}.mosaic-grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:450px 340px;gap:15px}.mosaic-card{padding:26px}.intelligence-card{padding:0}.architecture-card h3{font-size:39px}.architecture-map{margin-top:55px}.delivery-card h3{font-size:24px}.delivery-timeline>span{font-size:8px}.experience-card>strong{font-size:90px}.project-story{gap:55px}.story-copy h3{font-size:42px}.service-layout{gap:60px}.service-disclosure summary h3{font-size:24px}}
@media(max-width:1000px){.site-header{padding-top:8px;height:84px}.nav-shell{height:65px;width:calc(100% - 30px);padding:0 18px}.site-header nav{top:80px;left:15px;right:15px;gap:0;border-radius:18px;background:#121017f7;padding:20px;max-height:calc(100svh - 100px)}.site-header nav>a{font-size:17px;padding:12px 7px}.site-header nav .nav-cta{padding:12px 20px}.site-header.scrolled .nav-shell{background:#121017eb}.nav-toggle{border-color:#64566f;font-size:12px}.e-hero{min-height:780px;max-height:1000px}.e-hero h1{font-size:65px}.hero-base{margin-top:65px}.e-hero p{max-width:610px}.media-pin{top:100px;min-height:500px}.media-frame{width:calc(100% - 40px)}.media-overlay{left:35px;bottom:55px}.media-reel{min-height:780px}.manifesto{min-height:720px;max-height:1100px}.manifesto-pin{grid-template-columns:.65fr 1.9fr;gap:35px;top:160px}.scroll-copy{font-size:29px;letter-spacing:-.8px}.manifesto-bottom{align-items:flex-start;flex-direction:column;gap:18px}.project-story{gap:40px}.story-copy h3{font-size:37px}.story-copy>p{font-size:19px}.story-copy>p.story-detail{font-size:15px}.story-tags{margin-top:20px;padding-top:20px}.story-image-inner{inset:30px 20px 0}.mosaic-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto 350px 300px}.architecture-card{grid-row:span 2}.intelligence-card{grid-column:span 1;min-height:400px}.intelligence-card>div{left:25px;bottom:25px}.intelligence-card h3{font-size:29px}.architecture-map{margin:50px 0}.experience-card{grid-column:span 2;flex-direction:row;justify-content:space-between;align-items:center;gap:30px}.experience-card .kicker{max-width:130px}.experience-card>strong{font-size:110px}.experience-card .mosaic-link{margin-top:0;max-width:100px}.experience-card p{max-width:150px}.service-layout{grid-template-columns:.75fr 1.25fr;gap:40px}.service-intro h2{font-size:39px}.service-disclosure summary h3{font-size:22px}.service-disclosure summary{gap:12px;padding:24px 0}.service-body{padding-left:25px}.service-body p{font-size:15px}.editorial-cursor{display:none}.trust-logos{gap:23px}.trust-logos>div{padding:9px 13px;height:58px}.stack-group>span{padding:15px 20px;min-width:155px;font-size:14px}.faq-section h2{font-size:38px}.faq-list summary{font-size:17px}}
@media(max-width:750px){.shell{padding-inline:28px}.section{padding-block:80px}.e-hero{min-height:760px}.e-hero h1{font-size:clamp(47px,8.7vw,67px);line-height:1.08}.e-hero-content{padding-top:65px}.hero-tag{font-size:9px;margin-bottom:30px}.e-hero p{font-size:17px;max-width:550px;margin-top:27px}.hero-base{margin-top:65px;font-size:8px;letter-spacing:.6px}.hero-base i{width:18px}.e-capability{font-size:13px}.media-reel{height:auto;min-height:0;max-height:none;margin:0 0 25px;padding-inline:15px}.media-pin{position:relative;top:auto;height:65svh;min-height:400px;max-height:620px}.media-frame{width:100%;transform:none!important;border-radius:13px}.media-frame>img{object-position:60% center;transform:none!important}.media-overlay{left:27px;bottom:37px;max-width:340px}.media-overlay h2{font-size:39px}.media-overlay .kicker{font-size:8px}.media-overlay>a{font-size:12px;margin-top:19px}.media-frame figcaption{font-size:7px;bottom:15px;right:18px}.cross-a,.cross-b{top:17px;font-size:17px}.e-credibility{padding:60px 0}.trust-logos{gap:14px;flex-wrap:wrap;justify-content:center;padding-top:20px}.trust-logos>div{flex-basis:26%;max-width:160px;flex-grow:0;height:55px;opacity:.75}.e-credibility .kicker{font-size:9px}.manifesto{height:auto;min-height:0;max-height:none;padding:75px 0 85px}.manifesto-pin{position:relative;top:auto;display:block;padding-bottom:0}.manifesto-label{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.manifesto-label .kicker{margin:0;font-size:9px}.manifesto-label>a{font-size:16px}.scroll-copy{font-size:29px;line-height:1.55;letter-spacing:-.8px}.manifesto-bottom{flex-direction:row;align-items:center;margin-top:30px}.manifesto-bottom>span{font-size:8px}.manifesto-bottom>a{font-size:11px}.statement-ribbon{padding-bottom:45px}.statement-ribbon span{font-size:90px}.statement-ribbon i{font-size:35px}.statement-ribbon>div{gap:28px}.center-heading{margin-bottom:45px}.center-heading h2{font-size:47px}.center-heading p{font-size:16px;max-width:540px}.project-story{grid-template-columns:1fr;gap:30px;padding:20px 0 65px}.story-image{aspect-ratio:1.3}.story-image-inner{inset:30px 40px 0}.story-copy .kicker{font-size:10px;margin-bottom:17px}.story-copy h3{font-size:43px}.story-copy>p{font-size:21px}.story-copy>p.story-detail{font-size:16px;max-width:520px}.story-tags{gap:8px 15px}.story-tags>span{font-size:12px}.story-copy>a{margin-top:25px}.e-work .all-work-link{font-size:18px;gap:25px}.all-work-link>span{font-size:12px;max-width:95px}.editorial-heading{display:block;margin-bottom:45px}.editorial-heading h2{font-size:43px}.editorial-heading p{font-size:16px;max-width:530px}.mosaic-grid{gap:15px;grid-template-rows:auto auto auto}.mosaic-card{padding:27px}.architecture-card{grid-row:span 1;grid-column:span 2}.architecture-card h3{font-size:43px}.architecture-card h3 br:nth-child(2){display:none}.architecture-card p{max-width:400px;font-size:16px}.architecture-map{display:flex;gap:12px;margin:30px 0}.architecture-map>div{flex:1;margin:0;padding:20px 13px;font-size:8px;letter-spacing:.6px;transform:none}.architecture-map>div:not(:last-child):after{display:none}.intelligence-card{grid-column:span 2;height:460px;padding:0}.intelligence-card h3{font-size:36px}.intelligence-card>div{left:30px;bottom:30px}.delivery-card{grid-column:span 1;min-height:370px}.delivery-card h3{font-size:28px}.delivery-card p{font-size:14px}.delivery-timeline{display:block;margin-top:24px;padding-top:0;border:0}.delivery-timeline>span{display:block;font-size:11px;padding:8px 0 8px 15px}.delivery-timeline i{top:14px}.experience-card{grid-column:span 1;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:370px}.experience-card>strong{font-size:90px;margin-top:15px}.experience-card p{font-size:15px;max-width:200px}.experience-card .mosaic-link{margin-top:auto;max-width:none}.experience-card .kicker{max-width:none}.stack-group>span{min-width:150px;font-size:13px;padding:13px 16px}.stack-group{gap:12px;padding-right:12px}.service-layout{grid-template-columns:1fr;gap:35px}.service-intro{position:relative;top:auto}.service-intro h2{font-size:45px}.service-intro p{max-width:540px}.service-disclosure summary h3{font-size:25px}.service-body p{font-size:16px}.service-body li{font-size:13px}.faq-section .service-layout{grid-template-columns:1fr;gap:35px}.faq-section h2{font-size:40px}.faq-list summary{font-size:19px}.closing{padding-block:90px}.site-footer .footer-top .brand{font-size:27px}.footer-columns .footer-email{font-size:38px}.process-step p{font-size:14px}.service-body ul{gap:14px}}
@media(max-width:480px){.shell{padding-inline:23px}.brand{font-size:20px}.e-hero{min-height:730px;height:100svh;max-height:880px}.e-hero-content{padding-top:65px}.e-hero h1{font-size:clamp(43px,10.8vw,54px);letter-spacing:-.055em}.e-hero h1 .hero-line:last-child{max-width:345px;margin:auto}.e-hero h1 em{display:block}.e-hero p{font-size:16px;line-height:1.8;max-width:340px;margin-top:25px}.hero-tag{font-size:8px;letter-spacing:1px;white-space:nowrap}.hero-tag .signal{width:5px;height:5px;margin-right:7px}.e-capability{font-size:12px;gap:9px;margin-top:20px}.capability-prefix{font-size:8px}.e-hero .actions{gap:10px;margin-top:26px}.e-hero .button{font-size:12px;min-height:50px;padding:13px 18px;gap:14px}.hero-base{margin-top:47px}.hero-base>span{font-size:7px;gap:9px}.motion-toggle{font-size:8px;padding:6px 9px}.intelligence-field{opacity:.55}.media-pin{height:520px;min-height:400px}.media-overlay{left:22px;bottom:35px;max-width:280px}.media-overlay h2{font-size:35px}.media-frame>img{object-position:63% center}.media-frame:after{background:linear-gradient(0deg,#080609d9,transparent 70%)}.media-frame figcaption{font-size:6px}.media-overlay .kicker{font-size:7px}.trust-logos>div{height:47px;padding:8px 11px}.trust-logos{gap:11px}.e-credibility .kicker{font-size:8px}.manifesto{padding:60px 0 70px}.scroll-copy{font-size:26px;line-height:1.5;letter-spacing:-.7px}.manifesto-label>a{font-size:14px}.manifesto-label .kicker{font-size:8px}.manifesto-bottom{align-items:flex-start;gap:20px}.manifesto-bottom>span{font-size:7px;flex-shrink:0}.manifesto-bottom>a{font-size:10px;max-width:140px}.statement-ribbon span{font-size:75px}.statement-ribbon>div{gap:23px}.statement-ribbon i{font-size:30px}.center-heading h2{font-size:40px}.center-heading .kicker{font-size:9px}.center-heading p{font-size:16px}.e-work{padding-top:30px}.story-image{aspect-ratio:1.05}.story-image-inner{inset:30px 25px 0}.story-image-tag{font-size:9px;left:19px}.story-copy h3{font-size:38px}.story-copy>p{font-size:20px}.story-copy>p.story-detail{font-size:15px;line-height:1.8}.story-tags>span{font-size:10px}.story-copy>a{font-size:13px}.project-story{gap:26px;padding-bottom:55px}.story-image-arrow{width:37px;height:37px;font-size:19px}.e-work .all-work-link{font-size:17px;padding:20px 0}.editorial-heading h2{font-size:38px}.architecture-card h3{font-size:39px}.architecture-card p{font-size:15px}.architecture-map{display:block;margin:28px 0}.architecture-map>div{margin:12px 0;padding:18px;font-size:10px}.architecture-map>div:not(:last-child):after{display:block;height:13px;bottom:-13px}.intelligence-card{height:430px}.intelligence-card h3{font-size:32px}.intelligence-card>div{left:24px;bottom:25px}.delivery-card,.experience-card{grid-column:span 2;min-height:0}.delivery-card h3{font-size:32px;max-width:300px}.delivery-card p{font-size:15px}.delivery-timeline{display:flex;border-top:1px solid #4c3d5a;margin:28px 0;padding-top:17px}.delivery-timeline>span{padding:0;font-size:9px}.delivery-timeline i{top:-20px}.delivery-card .mosaic-link{margin-top:20px}.experience-card{min-height:320px}.experience-card>strong{font-size:100px}.experience-card .kicker{margin-bottom:10px}.experience-card p{max-width:none}.experience-card .mosaic-link{margin-top:15px}.mosaic-link{font-size:13px}.stack-section .center-heading h2{font-size:37px}.stack-note{font-size:11px;padding-inline:25px}.service-intro h2{font-size:39px}.service-disclosure summary{gap:12px;padding:23px 0}.service-disclosure summary h3{font-size:22px}.service-disclosure summary>i{font-size:23px}.service-body{padding:0 0 28px 25px}.service-body p{font-size:15px}.service-body ul{grid-template-columns:1fr 1fr;gap:12px}.service-body li{font-size:12px}.service-body li:before{margin-right:6px}.service-body>a{font-size:12px}.event-grid h2{font-size:35px}.faq-section h2{font-size:37px}.faq-list summary{font-size:17px}.faq-list p{font-size:15px}.footer-columns .kicker{font-size:10px}.footer-columns a,.footer-columns p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.scroll-copy .word{color:#e6e4ed}.media-frame,.media-frame>img{transform:none!important}.statement-ribbon>div,.stack-track{animation:none}.intelligence-field,.editorial-cursor{display:none}.manifesto{height:auto;min-height:0;padding:80px 0}.manifesto-pin{position:relative;top:auto}.media-reel{height:auto;min-height:0;padding-bottom:50px}.media-pin{position:relative;top:auto;height:70svh;min-height:450px}.story-image-inner{transform:none!important}}

/* ============================================================================
   SingIndustry design-system layer v5 — voilaah-grade typography, marquees,
   numbered service rows, veil transitions, GSAP hooks. Appended after the base
   editorial skin; later rules intentionally win at equal specificity.
   ========================================================================== */
:root{--elev-1:#0e0f14;--elev-2:#14151d;--elev-3:#1b1c26;--hairline:#ffffff14;--accent:#8c6aff;--ease-out:cubic-bezier(.22,1,.36,1)}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* Display serif accents (Instrument Serif italic pairs with Inter) */
.e-hero h1 em,.inner-hero h1 .dim,.closing h2 span,.center-heading h2 span,.editorial-heading h2 .dim,.section-heading h2 .dim,.service-intro h2 .dim,.event-grid h2 .dim,.why-layout h2 .dim,.faq-section h2 .dim,.stack-section h2 .dim,.ai-sticky .gradient-text{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.03em}
.e-hero h1 em{color:#bfaee6}
.closing h2 span{color:#c3ade2}
.center-heading h2 span,.editorial-heading h2 .dim,.section-heading h2 .dim,.service-intro h2 .dim,.event-grid h2 .dim,.why-layout h2 .dim,.faq-section h2 .dim,.stack-section h2 .dim{color:#a493c4}

/* Line-mask utilities for split-text reveals (b/i wrappers, style-neutral) */
.line-mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;font-weight:inherit;font-style:inherit;font-family:inherit}
.split-line{display:block;font-weight:inherit;font-style:inherit;font-family:inherit}
.gsap-on .hero-line{animation:none}

/* Intro veil + page transitions */
.page-veil{position:fixed;inset:0;z-index:400;background:#0a0912;display:grid;place-items:center}
.page-veil.is-gone{display:none}
.page-veil span{font-size:clamp(26px,4vw,42px);font-weight:500;letter-spacing:-1.5px;color:#eeeaf6}
.page-veil b{color:#a98aff;font-weight:500}

/* Buttons: background wipe + refined hover */
.button{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease-out),color .3s}
.button:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#cbbaff;translate:0 101%;transition:translate .5s var(--ease-out)}
.button:hover:after{translate:0 0}
.button-white:hover{background:#eeeef1;color:#111115}
.button-outline:after{background:#241f30}
.button-outline:hover{background:#11111255;color:#e6ddf6;border-color:#8f7cae}
.button-dark:after{background:#c6bbf8}
.button-dark:hover{background:#eeeef1}
.text-button{transition:color .3s,transform .3s}

/* Client-logo marquee */
.trust-marquee{overflow:hidden;margin-top:38px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.trust-track{display:flex;width:max-content;animation:stack-scroll 38s linear infinite}
.trust-logos{display:flex;justify-content:flex-start;flex-wrap:nowrap;align-items:center;gap:26px;padding:0 13px}
.trust-logos>div{width:212px;height:74px;flex:0 0 auto;display:flex;justify-content:center;align-items:center;border-radius:6px;background:#ececf0;padding:14px 22px;opacity:.62;transition:opacity .3s,transform .3s}
.trust-logos>div:hover{opacity:1;transform:translateY(-3px)}
.trust-marquee:hover .trust-track{animation-play-state:paused}

/* Numbered service rows (voilaah-style) */
.service-lines{border-bottom:1px solid var(--hairline)}
.service-line{position:relative;display:flex;align-items:center;gap:30px;padding:32px 6px;border-top:1px solid var(--hairline);transition:background .35s}
.service-line .line-index{font-family:monospace;font-size:11px;color:#6f6180;align-self:flex-start;margin-top:10px;transition:color .3s}
.line-body{display:flex;flex-direction:column;gap:9px}
.service-line h3{font-size:clamp(25px,2.55vw,42px);font-weight:450;letter-spacing:-1.4px;line-height:1.12;color:#b3a6c0;transition:color .35s,transform .45s var(--ease-out)}
.line-tags{display:flex;flex-wrap:wrap;gap:6px 16px}
.line-tags>span{font-size:11px;color:#6f6580;transition:color .3s}
.line-arrow{margin-left:auto;width:47px;height:47px;flex:0 0 auto;border:1px solid #ffffff1e;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#c9b4e6;opacity:0;transform:translate(-10px,10px) rotate(-12deg);transition:opacity .35s,transform .45s var(--ease-out),background .3s}
.service-line:hover h3,.service-line:focus-visible h3{color:#f0e9f8;transform:translateX(12px)}
.service-line:hover .line-index{color:#a98aff}
.service-line:hover .line-tags>span{color:#9d8fae}
.service-line:hover .line-arrow,.service-line:focus-visible .line-arrow{opacity:1;transform:translate(0,0) rotate(0);background:#1b1524}
.service-hover-card{position:fixed;left:0;top:0;z-index:190;width:230px;height:150px;margin:-170px 0 0 30px;border-radius:14px;border:1px solid #ffffff22;display:grid;place-items:end start;padding:16px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#f2ecfa;pointer-events:none;opacity:0;scale:.75;transition:opacity .3s,scale .4s var(--ease-out);box-shadow:0 30px 80px #00000080}
.service-hover-card.active{opacity:1;scale:1}
.service-hover-card[data-mesh="1"]{background:radial-gradient(ellipse at 20% 15%,#8c6aff66,transparent 60%),radial-gradient(ellipse at 90% 90%,#566bff55,transparent 60%),#171226}
.service-hover-card[data-mesh="2"]{background:radial-gradient(ellipse at 80% 10%,#9ae6ec44,transparent 55%),radial-gradient(ellipse at 10% 90%,#8c6aff55,transparent 60%),#111a22}
.service-hover-card[data-mesh="3"]{background:radial-gradient(ellipse at 50% 0%,#566bff66,transparent 60%),radial-gradient(ellipse at 90% 100%,#8c6aff44,transparent 55%),#12142a}
.service-hover-card[data-mesh="4"]{background:radial-gradient(ellipse at 15% 80%,#ff8a6a44,transparent 55%),radial-gradient(ellipse at 85% 15%,#8c6aff55,transparent 60%),#1d1420}
.service-hover-card[data-mesh="5"]{background:radial-gradient(ellipse at 85% 85%,#6affc244,transparent 55%),radial-gradient(ellipse at 15% 10%,#566bff55,transparent 60%),#101a1c}
.service-hover-card[data-mesh="6"]{background:radial-gradient(ellipse at 50% 100%,#8c6aff55,transparent 60%),radial-gradient(ellipse at 100% 0%,#9ae6ec33,transparent 50%),#161226}
.service-hover-card[data-mesh="7"]{background:radial-gradient(ellipse at 10% 50%,#e66aff33,transparent 55%),radial-gradient(ellipse at 90% 50%,#566bff55,transparent 60%),#1a1224}

/* Horizontal pinned work showcase (desktop, JS-enhanced only) */
@media(min-width:1001px){
.gsap-on .project-stories{overflow:hidden}
}

/* Bigger display typography (desktop only; mobile keeps tuned base sizes) */
@media(min-width:1001px){
.e-hero h1{font-size:clamp(72px,7.1vw,116px);letter-spacing:-.06em}
.closing h2{font-size:clamp(64px,8vw,132px);line-height:1;letter-spacing:-.055em}
.center-heading h2{font-size:clamp(50px,5.8vw,86px)}
.inner-hero h1{font-size:clamp(52px,7vw,102px)}
.footer-columns .footer-email{font-size:52px}
}

/* Closing CTA: masked Singapore night backdrop + generous rhythm */
.closing{background:linear-gradient(0deg,#0b080ef0 15%,#0b080ecf),url('../images/engineering/singapore-night.webp') center 68%/cover no-repeat #0b080e;padding-block:165px}
.closing .kicker{color:#a18db4}
.closing-bottom>p{font-size:18px}

/* Contact form focus polish */
.field input,.field textarea,.field select{border-radius:8px;border:1px solid #3a2a46;transition:border-color .3s,background .3s,box-shadow .3s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#8c6aff;background:#1d1329;box-shadow:0 14px 44px -20px #8c6aff66}

/* Inner-hero split lines need the same masks */
.inner-hero h1 .line-mask{padding-bottom:.14em;margin-bottom:-.14em}

/* Small screens: marquee + rows tuned down */
@media(max-width:750px){
.trust-logos{gap:14px;padding:0 7px}
.trust-logos>div{width:150px;height:56px;padding:10px 14px}
.service-line{gap:16px;padding:26px 2px}
.service-line h3{font-size:26px}
.line-arrow{width:38px;height:38px;font-size:17px}
.service-hover-card{display:none}
.closing{padding-block:100px}
}
@media(max-width:480px){
.trust-logos>div{width:128px;height:50px}
.service-line h3{font-size:23px}
.line-tags>span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
.trust-track{animation:none;flex-wrap:wrap;width:auto}
.trust-logos{flex-wrap:wrap;justify-content:center}
.page-veil{display:none}
.button:after{display:none}
}
.site-header nav .nav-cta[aria-current=page]{color:#111115}
@media(min-width:1001px){.approach-track{grid-template-columns:repeat(5,1fr);gap:30px}}

/* Hero skyline video backdrop (poster-only until motion.js loads it on desktop) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:0;opacity:.42;filter:saturate(.8) brightness(.92)}
.hero-shade{position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,#080809 2%,#080809a6 34%,#080809d6 72%,#080809 98%)}
@media(max-width:750px){.hero-video{opacity:.3}}
@media(prefers-reduced-motion:reduce){.hero-video{opacity:.3}}

/* Insight cover art — vivid gradient art now; drop generated images at
   assets/images/blog/insight-<key>.webp and they take over automatically */
.insight-art{display:block;height:220px;border-radius:14px;margin-bottom:26px;border:1px solid #ffffff14;position:relative;overflow:hidden;background-size:cover;background-position:center;transition:transform .5s var(--ease-out)}
.insight-card:hover .insight-art{transform:translateY(-4px) scale(1.015)}
.insight-art.art-ai-production{background-image:url('../images/blog/insight-ai-production.webp'),radial-gradient(ellipse at 18% 20%,#ff9d5c99,transparent 52%),radial-gradient(ellipse at 82% 30%,#8c6affcc,transparent 55%),radial-gradient(ellipse at 55% 95%,#43d9c1aa,transparent 55%),linear-gradient(150deg,#221436,#101024)}
.insight-art.art-build-integrate{background-image:url('../images/blog/insight-build-integrate.webp'),radial-gradient(ellipse at 80% 85%,#5cc8ffaa,transparent 55%),radial-gradient(ellipse at 15% 25%,#566bffcc,transparent 55%),radial-gradient(ellipse at 60% 10%,#c86aff77,transparent 50%),linear-gradient(150deg,#131a35,#0e1020)}
.insight-art.art-reliable-systems{background-image:url('../images/blog/insight-reliable-systems.webp'),radial-gradient(ellipse at 25% 80%,#ff6a8e99,transparent 52%),radial-gradient(ellipse at 85% 20%,#ffc65c88,transparent 50%),radial-gradient(ellipse at 60% 50%,#8c6aff99,transparent 60%),linear-gradient(150deg,#241226,#120e1e)}
@media(max-width:750px){.insight-art{height:190px}}
.insight-art{width:100%;align-self:stretch}

/* Event sections: concert atmosphere backdrop (generated artwork, heavily shaded) */
.event-vertical{background:linear-gradient(90deg,#0e0c11ef 32%,#0e0c11a0),linear-gradient(0deg,#0e0c11 2%,#0e0c1180 45%,#0e0c11 98%),url('../images/bg/event-concert.webp') center 35%/cover no-repeat #0e0c11}
.inner-hero.event-hero{background:linear-gradient(90deg,#0c0b0fe8 25%,#0c0b0fb8),linear-gradient(0deg,#0c0b0f 3%,#0c0b0f8f 50%,#0c0b0fd9 100%),url('../images/bg/event-concert.webp') center 30%/cover no-repeat #0c0b0f}

/* v10 polish: crisp colourful client logos, real tech-stack logos, livelier hero */
.trust-logos>div{background:#fff;opacity:.95;width:224px;height:82px;padding:16px 26px;border-radius:10px;box-shadow:0 6px 24px #00000038}
.trust-logos>div:hover{opacity:1;transform:translateY(-4px)}
.trust-logos img{filter:none;height:100%;width:100%;object-fit:contain}
.stack-group>span{gap:14px;padding:17px 24px;background:#131218;border-color:#ffffff16}
.stack-group>span img{width:27px;height:27px;object-fit:contain;flex:0 0 auto}
.stack-group>span:hover{border-color:#8c6aff55;background:#181624}
.hero-badge{display:inline-grid;place-items:center;width:.62em;height:.62em;margin-left:.08em;border-radius:.16em;background:linear-gradient(135deg,#8c6aff,#566bff);color:#fff;font-style:normal;font-size:.78em;line-height:1;vertical-align:.06em;box-shadow:0 8px 34px #8c6aff66,inset 0 0 18px #ffffff22;transform:rotate(-7deg);animation:badge-bob 5.5s ease-in-out infinite}
@keyframes badge-bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(5deg) translateY(-.08em)}}
.e-capability{font-size:16px;gap:14px;min-height:38px}
.e-capability #rotating-capability{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:27px;letter-spacing:-.4px;background:linear-gradient(100deg,#cdbcff,#8fa1ff 55%,#9ae6ec);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:750px){.trust-logos>div{width:160px;height:60px;padding:11px 16px}.e-capability #rotating-capability{font-size:22px}.stack-group>span img{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.hero-badge{animation:none}}

/* Media reel video + voilaah-style monochrome floating client logos */
.media-frame>video{width:100%;height:100%;object-fit:cover;object-position:50% 54%;transform:scale(1.02)}
.trust-logos>div{background:none;box-shadow:none;border:0;width:205px;height:74px;padding:8px 14px;opacity:.78;border-radius:0}
.trust-logos>div:hover{opacity:1;transform:translateY(-2px)}
.trust-logos img{filter:grayscale(1) invert(1) contrast(1.45) brightness(1.35);mix-blend-mode:screen}
@media(max-width:750px){.trust-logos>div{width:150px;height:56px}}
.trust-logos img[src*="changi-airport-group"]{filter:grayscale(1) brightness(1.15)}

/* Seamless product reel beneath the client logos, expanding with the scroll. */
.e-credibility:has(+ .homepage-showcase){background:#000;padding-bottom:0}
.homepage-showcase{background:#000;overflow:hidden;padding:clamp(64px,7vw,104px) 24px 64px}
.homepage-showcase-video{display:block;width:min(1100px,100%);height:auto;aspect-ratio:16/9;object-fit:contain;margin:0 auto;transform:scale(var(--showcase-scale,.62));transform-origin:center top;will-change:transform}
@media(max-width:750px){.homepage-showcase{padding:48px 16px 36px}.homepage-showcase-video{transform:none;will-change:auto}}
@media(prefers-reduced-motion:reduce){.homepage-showcase-video{transform:none;will-change:auto}}

/* ---------- Real imagery: event vertical + industries (owner-supplied generated renders) ---------- */
.event-visual{position:relative;margin:0;border-radius:14px;overflow:hidden;border:1px solid #ffffff14;background:#18141e;box-shadow:0 30px 60px #00000066,0 0 0 1px #00000040;transform:rotate(-1.2deg)}
.event-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.event-visual figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;font-size:9px;letter-spacing:1.6px;color:#d9cce6;background:linear-gradient(0deg,#0e0c11e6,#0e0c1100)}

.event-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff0d,transparent 40%);mix-blend-mode:screen}
.industry-art.has-image{height:auto;aspect-ratio:16/9;margin-bottom:26px;border-radius:12px;overflow:hidden;background:#15111a;border:1px solid #ffffff12;box-shadow:0 20px 40px #0000004d}
.industry-art.has-image img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.industry-art.has-image:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#08080999,transparent 55%)}
.industry-panels [role=tabpanel]:not([hidden]) .industry-art.has-image img{animation:industry-image-in .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes industry-image-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1.02)}}
@media(max-width:750px){.event-visual{max-width:520px;margin:0 auto;transform:none}.industry-art.has-image{aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.event-visual{transform:none}.industry-panels [role=tabpanel]:not([hidden]) .industry-art.has-image img{animation:none}}

/* ---------- Brand: SVG mark in nav, horizontal lockup in footer ---------- */
.brand img{width:36px;height:36px;object-fit:contain;object-position:center;background:transparent;border-radius:0;flex-shrink:0}
.brand-dot{color:#c8323f}
.brand.brand-lockup img{width:auto;height:54px;max-width:240px}
@media(max-width:1000px){.brand img{width:31px;height:31px}}
@media(max-width:480px){.brand img{width:28px;height:28px}.brand.brand-lockup img{height:44px}}

/* ---------- Services v2: index ---------- */
.services-hero{padding:150px 0 100px;min-height:74vh;display:flex;align-items:center}
.services-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.75) contrast(1.05)}
.services-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0c0b0ff2 28%,#0c0b0f8c 70%,#0c0b0f66),linear-gradient(0deg,#0c0b0f 0,#0c0b0f55 35%,#0c0b0fb8 100%)}
.services-hero .shell,.service-hero .shell{position:relative;z-index:1}
.services-hero p,.service-hero p{max-width:640px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;max-width:760px}
.hero-chips a,.hero-chips span{font-size:12px;letter-spacing:.2px;padding:8px 13px;border:1px solid #ffffff1f;border-radius:100px;color:#cabdd7;background:#ffffff08;transition:background .3s,border-color .3s,color .3s}
.hero-chips a:hover{background:#ffffff14;border-color:#a493c4;color:#fff}
.inner-hero .kicker a{color:inherit}.inner-hero .kicker a:hover{color:#d9cbe6}
.services-intro{padding-bottom:40px}
.services-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px;border-top:1px solid #ffffff12;padding-top:36px}
.services-stats strong{display:block;font-size:42px;font-weight:450;letter-spacing:-1.6px;color:#e6d9ef;line-height:1.05}
.services-stats strong i{font-style:normal;color:#a493c4}
.services-stats span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8a7c95}
.service-index-section{padding-top:60px}
.service-index{border-top:1px solid #ffffff12}
.service-row{display:grid;grid-template-columns:70px 1.15fr 1fr;gap:50px;padding:58px 0;border-bottom:1px solid #ffffff12;position:relative;scroll-margin-top:100px}
.service-row>span{font-size:13px;color:#7e6e8b;letter-spacing:1px;padding-top:14px;font-variant-numeric:tabular-nums}
.service-row h2{font-size:38px;line-height:1.08;letter-spacing:-1.3px;color:#e3d6ec;margin-bottom:10px;font-weight:450}
.service-row .row-tagline{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:22px;color:#a493c4;margin-bottom:18px}
.service-row p{color:#94839e;font-size:15.5px;line-height:1.75;max-width:520px}
.service-row .text-button{margin-top:26px}
.service-row .kicker{margin-bottom:14px}
.row-includes{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:0 0 22px;padding:0;list-style:none}
.row-includes li{font-size:13.5px;color:#b3a2c1;padding-left:16px;position:relative;line-height:1.45}
.row-includes li:before{content:'';position:absolute;left:0;top:10px;width:7px;height:1px;background:#a493c4}
.service-row .tags>span{border-color:#3f2f49;color:#8f7d9c}
.commitment-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.commitment{border-top:1px solid #4b3856;padding-top:22px}
.commitment>span{font-size:10px;color:#8b7a98;letter-spacing:1.4px}
.commitment h3{font-size:19px;color:#d2c1df;margin:18px 0 12px;letter-spacing:-.4px;line-height:1.2}
.commitment p{font-size:13.5px;color:#8f7e9b;line-height:1.7}
.stack-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.stack-split h2{font-size:44px}
.stack-split p{color:#94839e;margin:22px 0 26px;line-height:1.75}
.stack-cloud{display:flex;flex-wrap:wrap;gap:10px}
.stack-cloud span{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid #ffffff14;border-radius:8px;background:#15111a;color:#c2b1cf;font-size:13px;transition:border-color .3s,transform .3s}
.stack-cloud span:hover{border-color:#77568d;transform:translateY(-2px)}
.stack-cloud img{width:18px;height:18px;opacity:.9}
.vertical-callout{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center;padding:64px;border-radius:18px;border:1px solid #ffffff12;background:linear-gradient(90deg,#14101ae8 40%,#14101a99),linear-gradient(0deg,#14101a 0,#14101a80),url('../images/bg/event-concert.webp') center 40%/cover no-repeat #14101a;color:inherit;transition:border-color .4s,transform .4s}
.vertical-callout:hover{border-color:#77568d;transform:translateY(-3px)}
.vertical-callout h2{font-size:40px;color:#e6d9ef;margin-bottom:18px}
.vertical-callout p{color:#a897b5;line-height:1.75;max-width:520px;margin-bottom:24px}
.callout-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.callout-tags span{font-size:12px;padding:8px 13px;border:1px solid #ffffff1f;border-radius:100px;color:#cabdd7;background:#ffffff08}

/* ---------- Services v2: detail ---------- */
.service-hero{padding-bottom:90px}
.service-hero-media{position:relative;margin:64px 0 0;border-radius:14px;overflow:hidden;border:1px solid #ffffff14;aspect-ratio:21/9;background:#18141e;box-shadow:0 30px 60px #00000066}
.service-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.service-hero-media figcaption{position:absolute;right:16px;bottom:12px;font-size:10px;color:#9b8aa8;background:#0e0c11b3;padding:5px 9px;border-radius:4px}
.service-includes{padding-top:40px}
.include-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.include-card{background:#131016;border:1px solid #ffffff12;border-radius:12px;padding:28px 26px;transition:border-color .3s,transform .3s,background .3s}
.include-card:hover{border-color:#77568d;background:#19131f;transform:translateY(-4px)}
.include-card h3{font-size:20px;color:#d2c1df;letter-spacing:-.4px;margin-bottom:12px;line-height:1.2}
.include-card p{font-size:14px;color:#98879f;line-height:1.7;margin-bottom:18px}
.include-card ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.include-card li{font-size:12.5px;color:#b3a2c1;padding-left:14px;position:relative;line-height:1.4}
.include-card li:before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#7b5f8f}
.service-pillars{background:#0b080e;border-block:1px solid #ffffff0a}
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:44px 0}
.pillar+.pillar{border-top:1px solid #ffffff0f}
.pillar:nth-of-type(even) .pillar-media{order:2}
.pillar-media{aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid #ffffff12;background:radial-gradient(ellipse at 30% 30%,#3a2848,#15111a 70%);display:grid;place-items:center;position:relative}
.pillar-media img{width:100%;height:100%;object-fit:cover;display:block}
.pillar-media b{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:140px;color:#a493c44d;line-height:1}
.pillar h3{font-size:34px;line-height:1.1;letter-spacing:-1px;color:#e0d2ea;margin-bottom:18px;font-weight:450}
.pillar p{color:#98879f;line-height:1.8;margin-bottom:24px}
.pillar ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.pillar li{font-size:14px;color:#c0afcd;padding-left:20px;position:relative}
.pillar li:before{content:'✓';position:absolute;left:0;top:1px;color:#a493c4;font-size:12px}
.phase-grid{display:grid;grid-template-columns:repeat(var(--phases,3),1fr);gap:18px}
.phase{background:#0f0c13;border:1px solid #ffffff10;border-radius:12px;padding:28px;display:flex;flex-direction:column}
.phase>span{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.4px;color:#8b7a98}
.phase>span b{font-weight:500;color:#b79dc5;font-size:12px}
.phase h3{font-size:22px;color:#d8c8e3;margin:26px 0 12px;letter-spacing:-.5px;line-height:1.15}
.phase p{font-size:14px;color:#94839e;line-height:1.7;margin-bottom:20px}
.phase ul{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px}
.phase li{font-size:11.5px;padding:5px 9px;border:1px solid #ffffff14;border-radius:4px;color:#b3a2c1}
.related-work{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.related-card{display:block;border-radius:12px;overflow:hidden;border:1px solid #ffffff12;background:#131016;color:inherit;transition:border-color .3s,transform .3s}
.related-card:hover{border-color:#77568d;transform:translateY(-4px)}
.related-card img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;display:block;background:#1d1524}
.related-card div{padding:22px 24px 26px}
.related-card .kicker{margin-bottom:8px}
.related-card h3{font-size:22px;color:#d8c8e3;letter-spacing:-.5px}
.related-card p{color:#94839e;font-size:14px;margin-top:6px}
.motion-paused .services-video{display:none}

@media(max-width:1200px){.service-row{grid-template-columns:56px 1.1fr 1fr;gap:36px}.service-row h2{font-size:34px}.commitment-grid{grid-template-columns:repeat(3,1fr)}.stack-split{gap:50px}}
@media(max-width:1000px){.services-hero{min-height:0;padding:130px 0 80px}.services-stats{grid-template-columns:repeat(2,1fr)}.service-row{grid-template-columns:1fr;gap:26px;padding:44px 0}.service-row>span{padding-top:0}.include-grid,.phase-grid{grid-template-columns:repeat(2,1fr)}.pillar{grid-template-columns:1fr;gap:30px}.pillar:nth-of-type(even) .pillar-media{order:0}.stack-split{grid-template-columns:1fr;gap:34px}.stack-split h2{font-size:38px}.vertical-callout{grid-template-columns:1fr;padding:44px}.callout-tags{justify-content:flex-start}.vertical-callout h2{font-size:34px}}
@media(max-width:750px){.commitment-grid{grid-template-columns:1fr 1fr}.include-grid,.phase-grid,.related-work{grid-template-columns:1fr}.service-row h2{font-size:30px}.row-includes{grid-template-columns:1fr}.services-video{opacity:.3}.service-hero-media{aspect-ratio:16/10;margin-top:44px}}
@media(max-width:480px){.commitment-grid{grid-template-columns:1fr}.services-stats{gap:14px}.services-stats strong{font-size:34px}.vertical-callout{padding:30px 22px}.pillar h3{font-size:28px}.pillar ul,.include-card ul{grid-template-columns:1fr}.hero-chips a,.hero-chips span{font-size:11px;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){.services-video{display:none}}
@media(prefers-reduced-motion:reduce){.trust-track{animation:none;width:auto;display:block}.trust-logos[aria-hidden]{display:none}.trust-logos{flex-wrap:wrap;justify-content:center;gap:22px 40px;padding:0 20px}.trust-marquee{mask-image:none}}

/* ---------- Services v2.1: icons, imagery, audiences ---------- */
.ico{width:22px;height:22px;flex-shrink:0;display:inline-block;vertical-align:middle}
.ico-sm{width:16px;height:16px}.ico-xs{width:13px;height:13px;margin-right:6px;opacity:.85}
.icon-tile{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#2c2038,#17111e);border:1px solid #ffffff14;color:#c8aee0;box-shadow:inset 0 1px 0 #ffffff10;flex-shrink:0}
.icon-tile-lg{width:56px;height:56px;border-radius:14px}.icon-tile-lg .ico{width:26px;height:26px}
.kicker-icon{display:inline-flex;align-items:center;gap:8px}.kicker-icon .ico{color:#a493c4}
.hero-chips a .ico,.hero-chips span .ico{color:#a493c4}
.hero-chips a,.hero-chips span{display:inline-flex;align-items:center}
.faq-aside{margin-top:22px;color:#8f7e9b;font-size:14px}.faq-aside a{color:#c8aee0;text-decoration:underline;text-underline-offset:3px}
.inner-hero .kicker i{font-style:normal;color:#5e4f6b;margin:0 4px}
/* detail hero split */
.service-hero{padding:120px 0 90px}
.service-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.service-hero-copy h1{font-size:clamp(44px,5.2vw,74px)}
.service-hero-visual{position:relative;margin:0}
.hero-frame{border-radius:18px;overflow:hidden;border:1px solid #ffffff18;background:#18141e;box-shadow:0 40px 80px #00000080,0 0 0 1px #00000040;transform:rotate(1.5deg);aspect-ratio:4/3}
.hero-frame img{width:100%;height:100%;object-fit:cover;display:block}

.hero-float{position:absolute;left:-26px;bottom:-22px;display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;border-radius:14px;background:#15111acc;border:1px solid #ffffff1a;backdrop-filter:blur(14px);box-shadow:0 20px 40px #00000066;max-width:320px}
.hero-float b{display:block;font-size:14px;font-weight:500;color:#e6d9ef;letter-spacing:-.2px}
.hero-float small{display:block;font-size:11px;color:#9b8aa8;margin-top:3px;line-height:1.4}
/* include cards + audience */
.include-card .icon-tile{margin-bottom:20px}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.audience-card{position:relative;padding:30px 28px;border-radius:14px;border:1px solid #ffffff12;background:linear-gradient(180deg,#141018,#0f0c13);overflow:hidden;transition:border-color .3s,transform .3s}
.audience-card:before{content:'';position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#4a3560 0,transparent 65%);opacity:.5}
.audience-card:hover{border-color:#77568d;transform:translateY(-4px)}
.audience-card h3{font-size:21px;color:#d8c8e3;letter-spacing:-.4px;margin:22px 0 10px;line-height:1.2;position:relative}
.audience-card p{font-size:14px;color:#98879f;line-height:1.7;position:relative}
/* pillars with figure */
.pillar-media{margin:0}

/* phases */
.phase-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.phase-meta{font-size:10px;letter-spacing:1.4px;color:#8b7a98;text-align:right}
.phase-meta b{display:block;font-weight:500;color:#b79dc5;font-size:13px;margin-bottom:2px}
/* index rows with visuals */
.service-row{grid-template-columns:260px 1.05fr .95fr;gap:44px;align-items:start}
.row-visual{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid #ffffff12;background:linear-gradient(135deg,#2a1f36,#120e17)}
.row-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.service-row:hover .row-visual img{transform:scale(1.05)}
.row-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b080ecc,transparent 55%)}
.row-num{position:absolute;left:14px;top:12px;font-size:12px;letter-spacing:1px;color:#d8c8e3;background:#0e0c11b3;padding:4px 8px;border-radius:4px;z-index:1;font-variant-numeric:tabular-nums}
.row-visual .icon-tile{position:absolute;left:14px;bottom:14px;z-index:1;width:40px;height:40px;border-radius:10px;background:#15111acc;backdrop-filter:blur(8px)}
.row-includes li{padding-left:0;display:flex;align-items:center;gap:9px}.row-includes li:before{display:none}.row-includes .ico{color:#a493c4}
.services-stats>div .ico{color:#a493c4;margin-bottom:14px}
.commitment{position:relative}.commitment .icon-tile{margin-bottom:18px}.commitment-num{position:absolute;right:0;top:22px;font-size:10px;color:#6f5f7c;letter-spacing:1.4px}
.step-v2 .step-head{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#a592bc}.step-v2 .step-head .ico{color:#a493c4}
.callout-tags span{display:inline-flex;align-items:center}
.cap-v2{padding-top:30px}.cap-v2 .icon-tile{margin-bottom:22px}.cap-v2 h3{margin-top:0}
@media(max-width:1200px){.service-row{grid-template-columns:220px 1fr 1fr;gap:32px}}
@media(max-width:1000px){.service-hero-grid{grid-template-columns:1fr;gap:56px}.service-hero{padding-top:110px}.hero-frame{transform:none}.hero-float{left:16px;bottom:-18px}.service-row{grid-template-columns:1fr}.row-visual{max-width:420px}.audience-grid{grid-template-columns:1fr 1fr}}
@media(max-width:750px){.audience-grid{grid-template-columns:1fr}.hero-float{position:static;margin-top:24px;max-width:none}.service-hero-visual figcaption{top:auto;bottom:12px;right:12px}}
.row-includes{grid-template-columns:1fr;gap:9px}

/* ---------- Services index v3 (reference-structured) ---------- */
.vs-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;text-align:center;padding:120px 24px 80px}
.vs-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.vs-hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#000 0,#00000066 30%,#00000033 70%,#00000099 100%)}
.vs-hero-content{position:relative;z-index:1;max-width:900px}
.vs-hero h1{font-size:clamp(64px,10vw,150px);line-height:1;letter-spacing:-.04em;font-weight:500;color:#fff;margin-bottom:26px}
.vs-hero p{font-size:clamp(18px,1.7vw,24px);line-height:1.5;color:#e3e1ea;max-width:820px;margin:0 auto}
.vs-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);color:#ffffffb3;z-index:1;animation:vs-bob 2s ease-in-out infinite}
.vs-scroll svg{width:22px;height:22px}
@keyframes vs-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.vs-statement{padding:150px 24px 120px;background:#000}
.vs-statement .scroll-copy{text-align:center;max-width:1000px;margin:0 auto;font-size:clamp(30px,3.4vw,46px);line-height:1.32;letter-spacing:-.02em;font-weight:500;color:#fff}
.vs-statement .scroll-copy .tail{color:#6b6b73}
.vs-pixel{padding:100px 24px 120px;background:#000}
.pixel-scene{position:relative;display:flex;align-items:center;justify-content:center;gap:0;max-width:1140px;margin:0 auto;padding:80px 0 90px;min-height:420px}
.pixel-grid{display:flex;gap:34px;align-items:center}
.pixel-glyph{--px:34px;display:grid;grid-auto-rows:var(--px)}
.pixel-glyph i{display:block;width:var(--px);height:var(--px);background:#141414}
.pixel-glyph i.on{background:#fff}
.pixel-glyph i.dim{background:#2a2a2a}
.pixel-glyph i.off{background:transparent}
.vs-pixel p{max-width:1140px;margin:0 auto;color:#8f8f97;font-size:15px}
.vs-services{padding:130px 24px 80px;background:#000}
.vs-heading{text-align:center;max-width:760px;margin:0 auto 60px}
.vs-heading h2{font-size:clamp(46px,6vw,76px);letter-spacing:-.035em;line-height:1;font-weight:500;color:#fff;margin-bottom:22px}
.vs-heading p{font-size:19px;line-height:1.6;color:#8f8f97}
.vs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1290px;margin:0 auto}
.vs-card{position:relative;display:flex;flex-direction:column;padding:32px 32px 80px;border-radius:14px;border:1px solid #1e1e22;background:#0a0a0b;color:inherit;transition:border-color .35s,transform .35s,background .35s}
.vs-card:hover{border-color:#3a3a42;background:#0f0f11;transform:translateY(-4px)}
.vs-card-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tint) 18%,#000);color:var(--tint);margin-bottom:34px}
.vs-card-icon .ico{width:22px;height:22px}
.vs-card h3{font-size:24px;letter-spacing:-.02em;color:#fff;font-weight:500;margin-bottom:14px}
.vs-card p{font-size:16px;line-height:1.55;color:#b4b3bc;margin-bottom:24px}
.vs-card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.vs-card li{display:flex;align-items:center;gap:12px;font-size:16px;color:#e9e8ee}
.vs-card li .ico{width:22px;height:22px;color:#22c55e}
.vs-card-arrow{position:absolute;right:26px;bottom:26px;width:40px;height:40px;border-radius:50%;border:1px solid #2b2b31;display:grid;place-items:center;color:#d8d7df;transition:background .3s,border-color .3s,transform .3s}
.vs-card-arrow svg{width:14px;height:14px}
.vs-card:hover .vs-card-arrow{background:#fff;color:#000;border-color:#fff;transform:translate(2px,-2px)}
.vs-approach{padding:110px 24px 120px;background:#000}
.vs-approach .vs-heading h2{letter-spacing:-.035em}
.timeline{position:relative;max-width:1290px;margin:0 auto;padding:10px 0}
.timeline:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#2a2a30;transform:translateX(-50%)}
.tl-step{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;margin-bottom:64px}
.tl-step:last-child{margin-bottom:0}
.tl-card{border:1px solid #232328;border-radius:14px;background:#0a0a0b;padding:34px 40px}
.tl-card h3{font-size:27px;font-weight:500;letter-spacing:-.03em;color:#fff;margin-bottom:16px;line-height:1.15}
.tl-card p{font-size:16px;line-height:1.65;color:#b4b3bc}
.tl-step:nth-child(odd) .tl-card{grid-column:1;text-align:right}
.tl-step:nth-child(even) .tl-card{grid-column:3;text-align:left}
.tl-num{grid-column:2;grid-row:1;justify-self:center;width:64px;height:64px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:17px;font-weight:500;letter-spacing:-.02em;position:relative;z-index:1}
.vs-marquee{padding:48px 0;overflow:hidden;background:#000;border-block:1px solid #111}
.vs-marquee-track{display:flex;width:max-content;animation:stack-scroll 40s linear infinite}
.vs-marquee-track span{letter-spacing:-.03em;font-weight:500;font-size:clamp(40px,6vw,88px);color:#1f1f23;white-space:nowrap;padding-right:60px;line-height:1}
.vs-faq{padding:130px 24px;background:#000}
.vs-faq .shell{max-width:1024px}
.vs-faq-head{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.vs-faq-head .kicker{color:#7a7a84;font-size:11px;letter-spacing:2px}
.vs-faq-head h2{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.03em;line-height:1.08;color:#fff;font-weight:500}
.vs-faq-head p{color:#6f6f78;font-size:17px;line-height:1.55;padding-bottom:6px}
.vs-faq-head p a{color:#c8c7d0;text-decoration:underline;text-underline-offset:3px}
.vs-faq-list details{border:1px solid #232328;border-radius:12px;background:#0a0a0b;margin-bottom:14px;padding:0 24px}
.vs-faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-size:19px;font-weight:500;color:#f2f1f6}
.vs-faq-list summary::-webkit-details-marker{display:none}
.vs-faq-list summary span{font-size:26px;line-height:1;color:#a9a8b2;transition:transform .3s}
.vs-faq-list details[open] summary span{transform:rotate(45deg)}
.vs-faq-list p{color:#a3a2ab;font-size:16px;line-height:1.75;padding:0 0 26px;max-width:860px}
.vs-cta{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#000;padding:120px 24px}
.vs-cta .shell{position:relative;z-index:2;max-width:900px}
.vs-cta h2{font-size:clamp(56px,7.6vw,110px);line-height:.98;letter-spacing:-.04em;font-weight:600;color:#fff;margin-bottom:34px}
.vs-cta p{font-size:19px;line-height:1.6;color:#b9b8c1;max-width:760px;margin:0 auto 40px}
.vs-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 32px;border-radius:100px;border:1px solid #ffffff2e;background:#ffffff0f;color:#fff;font-size:16px;font-weight:500;backdrop-filter:blur(10px);transition:background .3s,transform .3s}
.vs-btn:hover{background:#fff;color:#000;transform:translateY(-3px)}
.vs-btn svg{width:18px;height:18px}
.motion-paused .vs-hero video,.motion-paused .vs-shape,.motion-paused .vs-marquee-track,.motion-paused .pixel-scene .ball{animation-play-state:paused}
@media(max-width:1000px){.vs-grid{grid-template-columns:1fr 1fr;gap:20px}.tl-step{grid-template-columns:56px 1fr;margin-bottom:34px}.tl-step:nth-child(odd) .tl-card,.tl-step:nth-child(even) .tl-card{grid-column:2;text-align:left}.tl-num{grid-column:1;width:44px;height:44px;font-size:15px}.timeline:before{left:28px}.vs-faq-head{grid-template-columns:1fr;gap:16px}.pixel-glyph{--px:22px}.pixel-grid{gap:20px}.pixel-scene{min-height:300px}.pixel-scene .paddle{height:120px;width:12px}.vs-shape.sphere{width:220px;height:220px;right:4%}.vs-shape.tri{width:180px;height:160px}.vs-shape.cube{width:110px;height:110px;left:8%}}
@media(max-width:750px){.vs-grid{grid-template-columns:1fr}.vs-hero{min-height:88vh}.vs-statement{padding:100px 20px 80px}.pixel-glyph{--px:14px}.pixel-grid{gap:12px}.pixel-scene{min-height:220px;padding:50px 0 60px}.pixel-scene .paddle{height:80px;width:9px}.pixel-scene .ball{width:18px;height:18px}.tl-card{padding:24px}.tl-card h3{font-size:24px}.vs-cta{min-height:80vh}.vs-shape.tri{left:10%;top:55%}}
@media(prefers-reduced-motion:reduce){.vs-hero video{display:none}.vs-shape,.vs-scroll,.pixel-scene .ball,.vs-marquee-track{animation:none}}
.pixel-scene{overflow:hidden}
@media(max-width:750px){.pixel-glyph{--px:10px}.pixel-grid{gap:8px}.pixel-scene{padding:40px 22px 50px;min-height:180px}.pixel-scene .paddle{height:60px;width:7px}.pixel-scene .ball{width:14px;height:14px}}
@media(max-width:480px){.pixel-glyph{--px:8px}.pixel-grid{gap:6px}}

/* Services hero: video stays clearly visible; legibility comes from a scrim behind the text only */
.vs-hero video{opacity:1;filter:saturate(.92) contrast(1.02) brightness(.92)}
.vs-hero-shade{background:linear-gradient(180deg,#00000073 0,#00000026 22%,#00000026 62%,#000000b3 100%)}
.vs-hero-tint{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 48% at 50% 52%,#00000094 0,#0000005e 45%,transparent 78%)}
.vs-hero-content h1{text-shadow:0 2px 40px #000000b3,0 1px 3px #00000080}
.vs-hero-content p{text-shadow:0 1px 24px #000000cc,0 1px 2px #00000099;color:#efedf3}

/* Pixel readout: zero -> live, with a build-progress track */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pixel-scene{flex-direction:column;gap:38px;padding:70px 0 80px}
.pixel-grid{gap:26px;flex-wrap:nowrap}
.pixel-glyph i.dim{background:#26262b}
.pixel-glyph i.on{background:#fff}
.pixel-track{position:relative;width:min(100%,760px);height:2px;background:repeating-linear-gradient(90deg,#2a2a30 0 14px,transparent 14px 26px)}
.pixel-runner{position:absolute;top:-5px;left:0;width:12px;height:12px;background:#fff;box-shadow:0 0 18px #ffffff80;animation:pixel-run 5.5s cubic-bezier(.55,0,.3,1) infinite}
@keyframes pixel-run{0%{left:0;opacity:.25}12%{opacity:1}78%{left:calc(100% - 12px);opacity:1}90%,100%{left:calc(100% - 12px);opacity:.25}}
@media(max-width:1000px){.pixel-grid{gap:16px}.pixel-scene{gap:30px;padding:56px 0 60px}}
@media(max-width:750px){.pixel-grid{gap:10px}.pixel-track{height:2px}.pixel-runner{width:9px;height:9px;top:-4px}@keyframes pixel-run{0%{left:0;opacity:.25}12%{opacity:1}78%{left:calc(100% - 9px);opacity:1}90%,100%{left:calc(100% - 9px);opacity:.25}}}
@media(max-width:480px){.pixel-grid{gap:7px}}
@media(prefers-reduced-motion:reduce){.pixel-runner{animation:none;left:calc(100% - 12px)}}
.pixel-glyph i{background:transparent}
.pixel-glyph i.dim{background:#34343d}
.pixel-glyph i.on{background:#fff}
.pixel-track{width:min(100%,1040px);background:repeating-linear-gradient(90deg,#2e2e35 0 16px,transparent 16px 30px)}
@media(max-width:1000px){.pixel-track{width:min(100%,640px)}}
@media(max-width:750px){.pixel-grid{gap:9px}.pixel-track{width:min(100%,360px)}}
@media(max-width:480px){.pixel-glyph{--px:11px}.pixel-grid{gap:7px}.pixel-track{width:min(100%,300px)}}
/* Fluid pixel cell so the readout always fits its container */
.pixel-scene,.pixel-glyph{--px:clamp(6px,2.4vw,34px)}
.pixel-grid{gap:calc(var(--px) * .7)}




/* Services hero: scrubbed inset into a rounded card (vars driven by motion.js) */
.vs-hero{clip-path:inset(0 var(--hero-x,0px) var(--hero-b,0px) var(--hero-x,0px) round var(--hero-r,0px));will-change:clip-path}
@media(max-width:1000px){.vs-hero{clip-path:none}}
@media(prefers-reduced-motion:reduce){.vs-hero{clip-path:none}}

/* ---------- Closing CTA: drifting chromatic shapes behind crisp text ---------- */
.vs-cta{isolation:isolate}
.vs-shape{position:absolute;z-index:0;pointer-events:none;will-change:transform;filter:drop-shadow(-3px 0 0 #ff2d5599) drop-shadow(3px 0 0 #3dffb080) blur(.2px)}
.vs-shape.sphere{left:8%;top:14%;width:clamp(150px,20vw,300px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffc2f0,#ff5fc4 32%,#9b4dff 68%,#3d1f5c);box-shadow:0 0 110px 30px #a44bff4d;animation:vs-drift-a 26s ease-in-out infinite}
.vs-shape.tri{right:12%;top:10%;width:clamp(130px,17vw,250px);aspect-ratio:1.12/1;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(165deg,#ffb3ec,#c86bff 45%,#6a2fb0);box-shadow:0 0 90px 24px #c86bff40;animation:vs-drift-b 31s ease-in-out infinite}
.vs-shape.cube{left:26%;bottom:9%;width:clamp(95px,12vw,175px);aspect-ratio:1;background:linear-gradient(140deg,#ff9ad9,#8a5bff 60%,#43257a);box-shadow:0 0 80px 20px #8a5bff40;animation:vs-drift-c 23s ease-in-out infinite}
.vs-shape.cube:before{content:'';position:absolute;inset:13%;background:linear-gradient(140deg,#ffd2f0,#a77bff);opacity:.55}
@keyframes vs-drift-a{0%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(34vw,16vh,0) rotate(40deg)}50%{transform:translate3d(58vw,-6vh,0) rotate(-25deg)}75%{transform:translate3d(22vw,24vh,0) rotate(18deg)}100%{transform:translate3d(0,0,0) rotate(0)}}
@keyframes vs-drift-b{0%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(-40vw,22vh,0) rotate(-35deg)}50%{transform:translate3d(-62vw,4vh,0) rotate(28deg)}75%{transform:translate3d(-18vw,-9vh,0) rotate(-14deg)}100%{transform:translate3d(0,0,0) rotate(0)}}
@keyframes vs-drift-c{0%{transform:translate3d(0,0,0) rotate(-8deg)}25%{transform:translate3d(30vw,-22vh,0) rotate(26deg)}50%{transform:translate3d(6vw,-38vh,0) rotate(-18deg)}75%{transform:translate3d(-16vw,-12vh,0) rotate(12deg)}100%{transform:translate3d(0,0,0) rotate(-8deg)}}
.vs-cta-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 70% 52% at 50% 46%,#0b080ee6 0,#0b080eb3 48%,transparent 80%),linear-gradient(180deg,#0b080e 0,transparent 18%,transparent 82%,#0b080e 100%)}
.vs-cta .shell{z-index:2}
.vs-cta h2{text-shadow:0 2px 40px #0b080ee6,0 1px 4px #0b080e99}
.vs-cta p{text-shadow:0 1px 26px #0b080ecc}
.motion-paused .vs-shape{animation-play-state:paused}
@media(max-width:750px){.vs-shape.sphere{left:4%;top:12%}.vs-shape.tri{right:6%}.vs-shape.cube{left:14%}}
@media(prefers-reduced-motion:reduce){.vs-shape{animation:none}}
.vs-cta-scrim{background:radial-gradient(ellipse 56% 42% at 50% 46%,#0b080ed9 0,#0b080e8c 54%,transparent 80%),linear-gradient(180deg,#0b080e 0,transparent 16%,transparent 84%,#0b080e 100%)}
.vs-shape{filter:drop-shadow(-4px 0 0 #ff2d55b3) drop-shadow(4px 0 0 #3dffb099) saturate(1.15)}
.vs-shape.sphere{box-shadow:0 0 130px 38px #a44bff66}
.vs-shape.tri{box-shadow:0 0 110px 30px #c86bff59}
.vs-shape.cube{box-shadow:0 0 95px 26px #8a5bff59}


/* ---------- Services lifecycle: one cinematic composition ---------- */
.vs-lifecycle{background:#000;padding:0 24px;overflow-x:clip}
.lcx{position:relative;min-height:100svh;display:grid;align-content:center;max-width:1220px;margin:0 auto}
.lcx-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.lcx-stage{position:relative;z-index:1;display:grid;gap:clamp(26px,4.4vh,58px)}
.lcx-row{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,4vw,80px)}

.lcx-roll{display:block;overflow:hidden}
.lcx-reel{display:block;will-change:transform}
.lcx-reel>span{display:block;white-space:nowrap}

.lcx-num{flex:0 0 auto}
.lcx-num,.lcx-num .lcx-reel>span{height:1.14em}
.lcx-num{font-size:clamp(62px,13vw,215px);line-height:1;letter-spacing:-.05em;font-weight:450;color:#2f2b36;font-variant-numeric:tabular-nums}
.lcx-num .lcx-reel>span{line-height:1}

.lcx-word{flex:0 1 auto;text-align:right}
.lcx-word,.lcx-word .lcx-reel>span{height:1.22em}
.lcx-word{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(54px,11.4vw,168px);line-height:1.02;letter-spacing:-.02em;color:#f2eff7}
.lcx-word .lcx-reel>span{line-height:1.02}

.lcx-line{position:relative;height:1px;width:100%}
.lcx-line i{position:absolute;top:0;left:0;display:block;height:1px}
.lcx-line .lcx-line-base{width:100%;background:#ffffff12}
.lcx-line .lcx-line-fill{width:var(--lcx-pos,6%);background:linear-gradient(90deg,#3d2c50,#a493c4);opacity:.85}
.lcx-line .lcx-point{left:var(--lcx-pos,6%);top:-2.5px;width:6px;height:6px;border-radius:50%;background:#efe7f7;box-shadow:0 0 12px 3px #c8aee0a6,0 0 34px 10px #a493c445;transform:translateX(-50%)}

.lcx-labels{text-align:center}
.lcx-labels,.lcx-labels .lcx-reel>span{height:1.9em}
.lcx-labels{font-size:clamp(12.5px,1.2vw,17px);line-height:1.9;letter-spacing:.14em;text-transform:uppercase;color:#7e7887}
.lcx-labels .lcx-reel>span{line-height:1.9}

.lcx-outro{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;pointer-events:none}
.lcx-outro p{font-size:clamp(30px,4vw,62px);line-height:1.14;letter-spacing:-.03em;font-weight:450;color:#fff;max-width:16ch;margin:0 auto}
.lcx-outro em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.04em;color:#c8aee0;display:inline-block;margin-top:.12em}

@media(max-width:1000px){
 /* No GSAP pin on mobile: the shell provides the scroll room and the composition sticks. */
 .vs-lifecycle .shell{min-height:250svh}
 .lcx{position:sticky;top:0;min-height:100svh}
 .lcx-row{flex-direction:column;align-items:flex-start;gap:clamp(6px,1.4vh,16px)}
 .lcx-word{text-align:left;font-size:clamp(46px,12.5vw,96px)}
 .lcx-num{font-size:clamp(52px,14vw,110px)}
 .lcx-labels{text-align:left}
 .lcx-outro p{max-width:14ch}
}
@media(max-width:480px){.lcx-labels{letter-spacing:.1em;font-size:11.5px}}
@media(prefers-reduced-motion:reduce){
 .vs-lifecycle .shell{min-height:0}
 .lcx{position:static;min-height:0;padding:clamp(70px,9vh,120px) 0}
 .lcx-reel{transform:none!important}
 .lcx-line .lcx-line-fill{width:100%}
 .lcx-line .lcx-point{display:none}
 .lcx-outro{position:static;margin-top:clamp(40px,6vh,80px);text-align:left}
 .lcx-outro p{margin:0}
 .lcx-stage{opacity:1!important}
}
@media(max-width:560px){
 /* Longest label ("AI · Agents · Automation · Computer Vision") needs two lines on a narrow phone;
    the reel keeps a fixed two-line box so every step still steps by exactly one slide. */
 .lcx-labels .lcx-reel>span{white-space:normal}
 .lcx-labels,.lcx-labels .lcx-reel>span{height:3.8em}
 .lcx-labels{font-size:11px;letter-spacing:.09em;line-height:1.9}
}

/* ---------- Service detail pages: per-service accent + colourful cards ---------- */
main{--svc:#a493c4}
.service-hero .kicker a{color:#a99bbd}
.service-hero .kicker a:hover{color:var(--svc)}
.service-hero-copy .hero-chips span .ico{color:var(--svc)}
.service-hero-copy .hero-chips span{border-color:color-mix(in srgb,var(--svc) 26%,#ffffff14)}

/* White concept-interface hero */
.service-hero-visual.is-ui{position:relative;padding:0}
.service-hero-visual.is-ui .product-ui{position:relative;z-index:1;transform:perspective(1200px) rotateX(6deg) rotateY(-4deg);box-shadow:0 50px 90px #00000080,0 0 0 1px #ffffff1a}
.service-hero-visual.is-ui:hover .product-ui{transform:perspective(1200px) rotateX(2deg) rotateY(-1deg) translateY(-6px)}
.hero-ui-glow{position:absolute;inset:-14% -10% -22% -10%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--svc) 42%,transparent) 0,transparent 68%);filter:blur(28px);opacity:.6}
.service-hero-visual.is-ui .hero-float{z-index:2}

/* Include / audience / phase cards pick up their own tint */
.include-card,.audience-card,.phase{--tint:var(--svc)}
.include-card .icon-tile,.audience-card .icon-tile,.phase .icon-tile{
  background:linear-gradient(140deg,color-mix(in srgb,var(--tint) 26%,#0b0810),color-mix(in srgb,var(--tint) 8%,#0b0810));
  border-color:color-mix(in srgb,var(--tint) 32%,transparent);
  color:color-mix(in srgb,var(--tint) 88%,#fff);
  box-shadow:inset 0 1px 0 #ffffff12,0 8px 24px color-mix(in srgb,var(--tint) 18%,transparent)}
.include-card:hover,.audience-card:hover{border-color:color-mix(in srgb,var(--tint) 46%,transparent);
  box-shadow:0 22px 48px color-mix(in srgb,var(--tint) 14%,transparent)}
.include-card li:before{background:color-mix(in srgb,var(--tint) 70%,#6b5f78)}
.audience-card:before{background:radial-gradient(circle,color-mix(in srgb,var(--tint) 55%,transparent) 0,transparent 66%);opacity:.35}
.phase>.phase-top .phase-meta b{color:color-mix(in srgb,var(--tint) 82%,#fff)}
.phase li{border-color:color-mix(in srgb,var(--tint) 22%,#ffffff12)}
.phase:hover{border-color:color-mix(in srgb,var(--tint) 34%,transparent)}
.phase{transition:border-color .35s}

/* Accent the running section numbers and links */
.service-includes .kicker,.service-audience .kicker,.service-pillars .kicker,.service-process .kicker,
.service-stack .kicker,.service-work .kicker,.faq-section .kicker{color:#8a8296}
.service-includes .kicker:first-letter{color:var(--svc)}
.pillar li:before{color:var(--svc)}
.pillar .kicker-icon .ico{color:var(--svc)}
.stack-cloud span:hover{border-color:color-mix(in srgb,var(--svc) 42%,transparent)}
.related-card:hover{border-color:color-mix(in srgb,var(--svc) 42%,transparent)}
.faq-aside a{color:color-mix(in srgb,var(--svc) 76%,#fff)}

@media(max-width:1000px){.service-hero-visual.is-ui .product-ui{transform:none}}
@media(prefers-reduced-motion:reduce){.service-hero-visual.is-ui .product-ui{transform:none;transition:none}}
.service-hero-visual.is-ui .hero-float{left:-22px;bottom:-42px;background:#15111acc;border-color:color-mix(in srgb,var(--svc) 24%,#ffffff1a)}
.service-hero-visual.is-ui .hero-float .icon-tile{background:linear-gradient(140deg,color-mix(in srgb,var(--svc) 30%,#0b0810),color-mix(in srgb,var(--svc) 10%,#0b0810));border-color:color-mix(in srgb,var(--svc) 34%,transparent);color:color-mix(in srgb,var(--svc) 88%,#fff)}
.hero-ui-glow{opacity:.75;inset:-18% -12% -26% -12%}
.service-hero{padding-bottom:clamp(96px,9vw,136px)}
@media(max-width:1000px){.service-hero-visual.is-ui .hero-float{left:0;bottom:auto;position:static;margin-top:26px}}

/* ---------- Detail page refinements: circular icons, pill tags, ghost marquee ---------- */
.include-card .icon-tile,.audience-card .icon-tile,.phase .icon-tile,.service-hero-visual .hero-float .icon-tile{border-radius:50%}
.include-card .icon-tile,.audience-card .icon-tile{width:52px;height:52px}
.audience-card .icon-tile-lg{width:58px;height:58px}

/* Tags as pills rather than bulleted lists */
.include-card ul{display:flex;flex-wrap:wrap;gap:7px;grid-template-columns:none}
.include-card li{padding:7px 18px;border:1px solid color-mix(in srgb,var(--tint) 24%,#ffffff12);border-radius:100px;
  font-size:12px;color:#c2b6cd;background:color-mix(in srgb,var(--tint) 7%,transparent);line-height:1.4;white-space:nowrap}
.include-card li:before{display:none}


.service-hero{position:relative;overflow:hidden}
.service-hero .shell{position:relative;z-index:1}

/* ---------- Capability index at the foot of each detail page ---------- */
.cap-index{background:#000;border-top:1px solid #ffffff0a}
.cap-index-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.cap-nav h2{font-size:clamp(26px,2.4vw,34px);font-weight:450;letter-spacing:-.03em;color:#fff;margin-bottom:28px}
.cap-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cap-nav a{font-size:16px;color:#6d6878;transition:color .3s}
.cap-nav a:hover{color:#cfc7dc}
.cap-nav .is-current a{color:var(--svc,#a493c4)}
.cap-rows>h2{font-size:clamp(34px,4.2vw,58px);line-height:1.08;letter-spacing:-.035em;font-weight:450;color:#fff;margin-bottom:clamp(34px,4vw,54px)}
.cap-rows>h2 .dim{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.03em;color:#a493c4}
.cap-rows ul{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff12}
.cap-rows li{border-bottom:1px solid #ffffff12}
.cap-rows li a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,2vw,28px);
  padding:clamp(20px,2.2vw,28px) clamp(12px,1.6vw,22px);color:inherit;border-radius:12px;transition:background .35s}
.cap-rows li a:hover{background:#ffffff08}
.cap-row-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--tint) 34%,#0b0810),color-mix(in srgb,var(--tint) 10%,#0b0810));
  border:1px solid color-mix(in srgb,var(--tint) 30%,transparent);
  color:color-mix(in srgb,var(--tint) 92%,#fff);transition:transform .4s,box-shadow .4s}
.cap-row-icon .ico{width:22px;height:22px}
.cap-rows li a:hover .cap-row-icon{transform:scale(1.06);box-shadow:0 0 26px color-mix(in srgb,var(--tint) 28%,transparent)}
.cap-row-text b{display:block;font-size:clamp(19px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;color:#f2f0f6;line-height:1.2}
.cap-row-text small{display:block;font-size:14.5px;color:#7c7688;margin-top:5px}
.cap-row-go{width:44px;height:44px;border-radius:50%;border:1px solid #2c2c33;display:grid;place-items:center;color:#b6aec4;
  transition:background .3s,color .3s,border-color .3s,transform .3s;flex-shrink:0}
.cap-row-go svg{width:15px;height:15px}
.cap-rows li a:hover .cap-row-go{background:#fff;color:#000;border-color:#fff;transform:translate(2px,-2px)}
@media(max-width:900px){
 .cap-index-grid{grid-template-columns:1fr;gap:44px}
 .cap-nav ul{display:flex;flex-wrap:wrap;gap:10px 18px}
 .cap-nav a{font-size:14.5px}
 .cap-rows li a{grid-template-columns:auto 1fr;padding:18px 10px}
 .cap-row-go{display:none}
 .cap-row-icon{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){.cap-rows li a,.cap-row-icon,.cap-row-go{transition:none}}

/* ---------- Header: slimmer, quieter nav bar ---------- */
.site-header{height:78px;padding-top:12px}
.nav-shell{height:56px;padding:0 10px 0 20px;border-radius:40px;max-width:1240px;width:calc(100% - 48px)}
.brand{font-size:19px;letter-spacing:-.6px;gap:9px}
.brand img{width:27px;height:27px}
.brand-dot{color:#c8323f}
.site-header nav{gap:30px}
.site-header nav a{font-size:14.5px;color:#b9b4c2;letter-spacing:-.1px;transition:color .25s}
.site-header nav a:hover{color:#fff}
.site-header nav a[aria-current=page]{color:#fff}
.nav-cta{padding:10px 18px;font-size:14px;margin-left:6px}
.nav-cta[aria-current=page]{color:#111}
@media(max-width:1100px){.site-header nav{gap:20px}.site-header nav a{font-size:13.8px}}
@media(max-width:1000px){
 .site-header{height:70px;padding-top:9px}
 .nav-shell{height:54px;width:calc(100% - 26px);padding:0 8px 0 16px}
 .site-header nav{top:68px;left:13px;right:13px}
}

/* ---------- Nav: contracts on scroll, pulling logo and CTA inward ---------- */
.nav-shell{transition:max-width .6s cubic-bezier(.33,0,.12,1),height .45s cubic-bezier(.33,0,.12,1),background .4s,box-shadow .4s}
.site-header.scrolled .nav-shell{max-width:940px;height:52px}
/* wordmark folds away, leaving the monogram */
.brand>span{display:inline-block;overflow:hidden;white-space:nowrap;max-width:240px;opacity:1;
  transition:max-width .55s cubic-bezier(.33,0,.12,1),opacity .3s ease,margin-left .55s cubic-bezier(.33,0,.12,1)}
.site-header.scrolled .brand>span{max-width:0;opacity:0;margin-left:-9px}
.brand img{transition:width .45s cubic-bezier(.33,0,.12,1),height .45s cubic-bezier(.33,0,.12,1)}
.site-header.scrolled .brand img{width:25px;height:25px}
.site-header nav{transition:gap .55s cubic-bezier(.33,0,.12,1)}
.site-header.scrolled nav{gap:26px}
@media(max-width:1000px){
 .site-header.scrolled .nav-shell{max-width:none;height:50px}
 .site-header.scrolled .brand>span{max-width:240px;opacity:1;margin-left:0}
 .site-header.scrolled .brand img{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){
 .nav-shell,.brand>span,.brand img,.site-header nav{transition:none}
}

/* ---------- Nav: links pinned to the centre, only logo and CTA move ---------- */
@media(min-width:1001px){
 .nav-shell{position:relative}
 .site-header nav{display:flex;align-items:center;gap:0}
 /* centred on the shell, which stays centred as it contracts — so the links never move */
 .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
   display:flex;align-items:center;gap:30px;white-space:nowrap}
 .site-header.scrolled nav{gap:0}
 .site-header nav,.site-header.scrolled nav{transition:none}
}
@media(max-width:1000px){
 .nav-links{display:flex;flex-direction:column;align-items:stretch}
 .site-header nav .nav-links a{font-size:18px;padding:14px 0;border-bottom:1px solid #ffffff0b}
}

/* ---------- Selected work: vertical scenes, image settles out of a 3D tilt ---------- */
.project-stories{display:grid;gap:clamp(40px,7vw,110px)}
.project-story{padding:0;background:transparent;align-items:center;gap:clamp(40px,6vw,96px)}
.story-image{perspective:1400px;aspect-ratio:1.32;border:0;background:none;border-radius:0;overflow:visible}
.story-image-inner{position:absolute;inset:0;border-radius:16px;overflow:hidden;transform-origin:50% 60%;
  border:1px solid #ffffff12;background:radial-gradient(ellipse at 50% 0,#323242,#15141c 65%);
  box-shadow:0 50px 90px #00000073;transition:box-shadow .6s}
.story-image:hover .story-image-inner{box-shadow:0 60px 110px #00000091}
.story-image-inner img{width:100%;height:100%;object-fit:cover;display:block}
.story-image-tag{z-index:2;left:20px;top:18px;background:#0d0b10b3;padding:5px 10px;border-radius:100px;backdrop-filter:blur(8px)}
.story-image-arrow{z-index:2}
.story-index{display:flex;align-items:center;gap:16px;margin-top:clamp(26px,3vw,40px);
  font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:#6f6780;font-variant-numeric:tabular-nums}
.story-index i{display:block;width:clamp(48px,6vw,96px);height:1px;background:#ffffff1f}
@media(min-width:1001px){.project-story{min-height:82vh}}
@media(max-width:1000px){
 .project-story{grid-template-columns:1fr;gap:28px}
 .story-image{perspective:none;aspect-ratio:1.4}
 .story-image-inner{transform:none!important}
}
@media(prefers-reduced-motion:reduce){.story-image-inner{transform:none!important}}

/* ---------- Selected work: quieter scenes, image given room to breathe ---------- */
.project-story{grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px)}
.story-image{aspect-ratio:1.3;max-width:640px;width:100%;justify-self:end}
.story-copy{max-width:420px}
.story-copy h3{font-size:clamp(32px,3.4vw,50px);line-height:1.06;letter-spacing:-.03em;margin-bottom:18px}
.story-copy>p{font-size:17px;letter-spacing:0;line-height:1.62;color:#9a93a5;max-width:400px}
.story-index{margin-top:clamp(30px,3.4vw,46px)}
@media(max-width:1000px){
 .story-image{max-width:none;justify-self:stretch}
 .story-copy{max-width:none}
 .story-copy h3{font-size:clamp(28px,7vw,40px)}
}

/* Scene mockups carry their own dark ground and shadow — drop the card chrome */
.story-image-inner{border:0;background:transparent;box-shadow:none;border-radius:14px}
.story-image:hover .story-image-inner{box-shadow:none}
.story-image{aspect-ratio:4/3;max-width:660px}

/* ---------- Case studies: listing ---------- */
.cs-hero{padding:clamp(150px,18vw,220px) 24px clamp(70px,8vw,110px);text-align:center;background:#000}
.cs-hero .kicker{display:block;margin-bottom:26px;color:#7a7a84}
.cs-hero h1{font-size:clamp(58px,9.5vw,140px);line-height:.98;letter-spacing:-.045em;font-weight:450;color:#fff}
.cs-hero h1 span{color:#5f5a68}
.cs-hero p{max-width:640px;margin:34px auto 0;font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:#8f8f97}
.cs-scroll{display:inline-grid;place-items:center;margin-top:46px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff1f;color:#b9b4c2;animation:cs-bob 2.2s ease-in-out infinite}
.cs-scroll svg{width:18px;height:18px}
@keyframes cs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.cs-list-section{background:#000;padding:clamp(20px,4vw,60px) 24px clamp(110px,13vw,190px)}
.cs-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,8vw,150px);row-gap:clamp(70px,9vw,130px);max-width:1240px;margin:0 auto}
.cs-item{display:block;color:inherit;width:100%;max-width:560px}
.cs-item:nth-child(odd){justify-self:start}
.cs-item:nth-child(even){justify-self:end;margin-top:clamp(140px,20vw,300px)}
.cs-media{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#121015}
.cs-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cs-item:hover .cs-media img{transform:scale(1.09)}
.cs-open{position:absolute;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#000;font-size:18px;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .4s,transform .4s}
.cs-item:hover .cs-open,.cs-item:focus-visible .cs-open{opacity:1;transform:none}
.cs-caption{margin-top:24px}
.cs-caption h2{font-size:clamp(24px,2.3vw,34px);font-weight:450;letter-spacing:-.025em;line-height:1.15;color:#f2f0f6}
.cs-caption small{display:block;margin-top:8px;font-size:14px;color:#7c7688}
@media(max-width:900px){.cs-list{grid-template-columns:1fr;row-gap:64px}.cs-item,.cs-item:nth-child(even){justify-self:stretch;margin-top:0;max-width:none}}

/* ---------- Case studies: detail ---------- */
.cs-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:100svh;padding-top:92px;box-sizing:border-box;background:#000}
.cs-stage{grid-column:1;grid-row:1;padding:0 12px 22px 24px;min-height:0;outline:none}
.cs-slides{position:relative;height:100%;border-radius:18px;overflow:hidden;background:#0f0d12;animation:cs-in 1.1s cubic-bezier(.2,.7,.2,1) both}
.cs-slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.035);transition:opacity .75s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.cs-slide.is-active{opacity:1;transform:none}
.cs-slide img{width:100%;height:100%;object-fit:contain;display:block}
.cs-shade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,#000000b3,transparent);pointer-events:none;z-index:1}
.cs-slide-caption{position:absolute;left:28px;bottom:26px;margin:0;font-size:clamp(15px,1.3vw,19px);color:#f2f0f6;z-index:2}
.cs-arrow{position:absolute;top:50%;z-index:3;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:#1a171fcc;color:#fff;cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(8px);transition:background .3s,color .3s}
.cs-arrow:hover{background:#fff;color:#000}
.cs-arrow svg{width:18px;height:18px}
.cs-arrow-prev{left:22px}.cs-arrow-next{right:22px}
.cs-dots{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.cs-dot{width:7px;height:7px;border-radius:100px;border:0;padding:0;background:#ffffff66;cursor:pointer;transition:width .4s,background .4s}
.cs-dot[aria-current=true]{width:26px;background:#fff}
.cs-info{grid-column:2;grid-row:1;min-height:0;overflow-y:auto;padding:4px clamp(28px,4vw,64px) 40px clamp(20px,3vw,44px);scrollbar-width:thin;scrollbar-color:#2b2831 transparent}
.cs-info>*{animation:cs-rise .9s cubic-bezier(.2,.7,.2,1) both}
.cs-info>*:nth-child(2){animation-delay:.06s}.cs-info>*:nth-child(3){animation-delay:.12s}.cs-info>*:nth-child(4){animation-delay:.18s}.cs-info>*:nth-child(5){animation-delay:.24s}.cs-info>*:nth-child(6){animation-delay:.3s}.cs-info>*:nth-child(7){animation-delay:.36s}
@keyframes cs-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cs-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.cs-back{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:2px;color:#b9b4c2;margin:18px 0 38px;transition:color .25s}
.cs-back:hover{color:#fff}
.cs-back svg{width:15px;height:15px}
.cs-info h1{font-size:clamp(34px,3.4vw,54px);line-height:1.07;letter-spacing:-.03em;font-weight:450;color:#fff}
.cs-info h1 span{display:block;color:#5f5a68}
.cs-meta{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;margin:44px 0 0;padding:0}
.cs-meta div{margin:0}
.cs-meta dt{font-size:11px;letter-spacing:1.8px;color:#6f6780;margin-bottom:8px}
.cs-meta dd{margin:0;font-size:14px;color:#e6e2ee;letter-spacing:.4px;text-transform:uppercase;line-height:1.5}
.cs-meta dd a{color:#e6e2ee;text-decoration:underline;text-underline-offset:3px;text-transform:none}
.cs-block{margin-top:46px}
.cs-block h2{font-size:11px;letter-spacing:1.8px;color:#6f6780;font-weight:500;margin-bottom:14px}
.cs-block p{font-size:16px;line-height:1.75;color:#b4b0bc;margin:0 0 14px}
.cs-deliver{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.cs-deliver li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:#d8d3df}
.cs-deliver .ico{color:#a493c4;margin-top:2px;flex-shrink:0}
.cs-cta{display:inline-flex;gap:12px;align-items:center;margin-top:48px;font-size:14px;color:#fff;border-bottom:1px solid #ffffff33;padding-bottom:6px}
.cs-bar{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff12;padding:18px 24px 20px;font-size:12px;letter-spacing:2px;color:#b9b4c2}
.cs-bar a{color:#b9b4c2;display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.cs-bar a:hover{color:#fff}
.cs-bar svg{width:14px;height:14px}
.cs-bar-pn{display:flex;align-items:center;gap:18px}
.cs-bar-pn i{font-style:normal;color:#4a4552}
.cs-bar-count{color:#5f5a68;font-variant-numeric:tabular-nums}
@media(max-width:1000px){
 .cs-detail{height:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding-top:84px}
 .cs-stage{grid-column:1;grid-row:1;padding:0 16px 8px}
 .cs-slides{height:auto;aspect-ratio:4/3}
 .cs-info{grid-column:1;grid-row:2;overflow:visible;padding:8px 20px 40px}
 .cs-bar{grid-row:3;position:sticky;bottom:0;z-index:5;background:#000000e6;backdrop-filter:blur(12px);padding:14px 20px}
 .cs-bar-count{display:none}
 .cs-arrow{width:40px;height:40px}.cs-arrow-prev{left:12px}.cs-arrow-next{right:12px}
}
@media(max-width:560px){.cs-meta,.cs-deliver{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cs-slide,.cs-media img,.cs-open{transition:none}.cs-scroll,.cs-info>*,.cs-slides{animation:none}}
@media(max-width:1000px){.cs-slide-caption{left:18px;bottom:40px;font-size:14px}.cs-dots{bottom:16px}}
/* main already sits below the fixed header, so the split view fills what is left of the viewport */
@media(min-width:1001px){.cs-detail{height:calc(100svh - var(--header,88px));padding-top:10px}}

/* ---------- Case studies: stronger motion ---------- */
.cs-line{display:block;font-weight:inherit}
.cs-letter{display:inline-block;font-style:normal;will-change:transform,filter}
.cs-media{transform-origin:50% 60%;will-change:transform}
/* image hover zoom moves to the frame, since GSAP now drives the image's own scale */
.cs-item:hover .cs-media img{transform:none}
.cs-item .cs-media{transition:box-shadow .5s}
.cs-item:hover .cs-media{box-shadow:0 30px 70px #00000080}
/* detail: image clip-reveals behind a violet wash, then settles */
.cs-slides{animation:cs-clip 1.25s cubic-bezier(.7,0,.2,1) both}
@keyframes cs-clip{from{clip-path:inset(0 0 100% 0 round 18px)}to{clip-path:inset(0 0 0% 0 round 18px)}}
.cs-slides::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,#6b4a8a,#241830);animation:cs-wash 1.5s .45s cubic-bezier(.4,0,.2,1) both}
@keyframes cs-wash{from{opacity:1}to{opacity:0}}
.cs-slide img{transform:scale(1.14);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cs-slide.is-active img{transform:scale(1)}
.cs-slide.is-active:first-child img{animation:cs-zoom 2s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes cs-zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes cs-rise{from{opacity:0;transform:translateY(42px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.cs-slides,.cs-slides::after,.cs-slide img{animation:none;transition:none;transform:none}.cs-slides::after{display:none}}

/* ---------- Case study detail: page scrolls naturally ----------
   The info column used to be its own scroll box, but Lenis drives the wheel for the
   whole document, so wheel input skipped the column and ran on to the footer.
   Now the page itself scrolls: the image stays pinned, details flow, bar stays at the bottom. */
@media(min-width:1001px){
 .cs-detail{height:auto;min-height:calc(100svh - var(--header,88px));grid-template-rows:auto auto;align-items:start;padding-top:10px}
 .cs-stage{position:sticky;top:calc(var(--header,88px) + 10px);align-self:start;height:calc(100svh - var(--header,88px) - 88px);padding-bottom:18px}
 .cs-slides{height:100%}
 .cs-info{overflow:visible;min-height:calc(100svh - var(--header,88px) - 88px);padding-bottom:90px}
 .cs-bar{position:sticky;bottom:0;z-index:6;align-self:end;background:#000000eb;backdrop-filter:blur(14px)}
}
/* sticky limits use the margin box, so this releases the pinned image just above the bottom bar instead of under it */
@media(min-width:1001px){.cs-stage{margin-bottom:64px}}

/* ---------- Case study headline stat ---------- */
.cs-stats{display:flex;flex-wrap:wrap;gap:22px 48px;margin:38px 0 0;padding:26px 0 0;border-top:1px solid #ffffff14}
.cs-stat strong{display:block;font-size:clamp(40px,4.2vw,64px);line-height:1;letter-spacing:-.04em;font-weight:450;color:#fff;font-variant-numeric:tabular-nums}
.cs-stat strong span{background:linear-gradient(100deg,#fff 30%,#c8aee0);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-stat small{display:block;margin-top:10px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#8e86a0}

/* ---------- Footer: contact + offices only (page links live in the menu) ---------- */
.site-footer .footer-columns.footer-lean{grid-template-columns:1.7fr 1fr 1fr;gap:50px;align-items:start}
.site-footer .footer-lean>div,.site-footer .footer-lean>div:last-child{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.site-footer .footer-lean>div p,.site-footer .footer-lean>div:last-child p{margin-top:0;line-height:1.7}
@media(max-width:1000px){.site-footer .footer-columns.footer-lean{grid-template-columns:1fr 1fr;gap:40px 30px}.site-footer .footer-lean>div:first-child{grid-column:1/-1}}
@media(max-width:560px){.site-footer .footer-columns.footer-lean{grid-template-columns:1fr;gap:34px}}

/* ---------- Event Technology: hub + Pre-Event / On-Site pages ---------- */
.evt-fallback{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--svc) 34%,#15111a),#0d0b11 72%)}
.evt-fallback:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 72%)}
.evt-fallback .ico{position:relative;width:86px;height:86px;color:color-mix(in srgb,var(--svc) 78%,#fff);filter:drop-shadow(0 0 30px color-mix(in srgb,var(--svc) 60%,transparent))}
.evt-fallback b{position:absolute;left:24px;bottom:12px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:92px;line-height:1;color:color-mix(in srgb,var(--svc) 38%,transparent)}
.hero-frame{position:relative}
.evt-hero .hero-frame .evt-fallback .ico{width:120px;height:120px}

/* sticky service jump bar */
.evt-jump{position:sticky;top:calc(var(--header,88px) - 4px);z-index:20;background:#0b0a0ee8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block:1px solid #ffffff0f}
.evt-jump-track{display:flex;gap:6px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.evt-jump-track::-webkit-scrollbar{display:none}
.evt-jump a{flex:none;font-size:12.5px;padding:8px 14px;border-radius:100px;color:#b9abc6;border:1px solid #ffffff14;white-space:nowrap;transition:color .3s,border-color .3s,background .3s}
.evt-jump a:hover,.evt-jump a.is-active{color:#fff;border-color:color-mix(in srgb,var(--svc) 60%,transparent);background:color-mix(in srgb,var(--svc) 16%,transparent)}

/* service rows */
.evt-row{scroll-margin-top:170px}
.evt-row p.evt-detail{font-size:15px;color:#877991;margin-top:-8px}
.evt-row .pillar-media img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.evt-row:hover .pillar-media img{transform:scale(1.04)}

/* journey steps */
.evt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.evt-step{position:relative;padding:26px 20px 26px;border-radius:14px;background:#131016;border:1px solid #ffffff12;transition:border-color .35s,transform .35s}
.evt-step:hover{border-color:color-mix(in srgb,var(--svc) 45%,transparent);transform:translateY(-4px)}
.evt-step span{display:block;font-size:12px;letter-spacing:1.6px;color:var(--svc);margin-bottom:40px}
.evt-step h3{font-size:19px;color:#e7ddef;margin-bottom:10px;letter-spacing:-.3px}
.evt-step p{font-size:13.5px;color:#98879f;line-height:1.6}
@media(max-width:1100px){.evt-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.evt-steps{grid-template-columns:1fr}.evt-step span{margin-bottom:18px}}

/* hub: two phase panels */
.evt-phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.evt-phase{--svc:var(--tint);position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#131016;border:1px solid #ffffff12;color:inherit;transition:border-color .4s,transform .4s}
.evt-phase:hover{border-color:color-mix(in srgb,var(--tint) 55%,transparent);transform:translateY(-6px)}
.evt-phase-media{position:relative;aspect-ratio:16/10;overflow:hidden;margin:0}
.evt-phase-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.evt-phase:hover .evt-phase-media img{transform:scale(1.06)}
.evt-phase-body{padding:30px 32px 34px}
.evt-phase h3{font-size:clamp(32px,3.2vw,46px);color:#f2eef7;letter-spacing:-.03em;font-weight:450;margin-bottom:12px}
.evt-phase p{color:#98879f;max-width:470px}
.evt-phase ul{list-style:none;padding:0;margin:22px 0 28px;display:flex;flex-wrap:wrap;gap:7px}
.evt-phase li{font-size:12px;padding:6px 11px;border-radius:100px;border:1px solid color-mix(in srgb,var(--tint) 30%,#ffffff14);color:#cabdd7}
.evt-phase-go{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:#fff}
.evt-phase-go i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tint);color:#0b0a0e;transition:transform .4s}
.evt-phase:hover .evt-phase-go i,.evt-next-card:hover .evt-phase-go i{transform:rotate(45deg)}

/* hub: capability cards */
.evt-caps+.evt-caps{padding-top:0}
.evt-inline{color:var(--svc);white-space:nowrap}
.evt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.evt-card{position:relative;display:block;padding:30px 28px;border-radius:16px;background:#131016;border:1px solid #ffffff12;color:inherit;transition:border-color .35s,transform .35s,background .35s}
.evt-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--tint) 50%,transparent);background:#18131d}
.evt-card .icon-tile{width:52px;height:52px;border-radius:14px;margin-bottom:22px;background:color-mix(in srgb,var(--tint) 15%,#131016);border-color:color-mix(in srgb,var(--tint) 30%,transparent);color:var(--tint)}
.evt-card h3{font-size:20px;color:#ece3f3;letter-spacing:-.4px;margin-bottom:12px;line-height:1.2}
.evt-card p{font-size:14px;color:#98879f;line-height:1.7;margin-bottom:18px}
.evt-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.evt-card li{font-size:13px;color:#b9abc6;padding-left:20px;position:relative}
.evt-card li:before{content:'→';position:absolute;left:0;color:var(--tint)}
.evt-card-go{position:absolute;top:28px;right:24px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff1a;color:#cabdd7;opacity:0;transform:translate(-6px,6px);transition:opacity .35s,transform .35s,border-color .35s,color .35s}
.evt-card-go svg{width:14px;height:14px}
.evt-card:hover .evt-card-go{opacity:1;transform:none;border-color:var(--tint);color:var(--tint)}
/* a lone last card in a row of three spreads across the row */
.evt-grid .evt-card:last-child:nth-child(3n+1){grid-column:1/-1;display:grid;grid-template-columns:52px 1.3fr 1fr;gap:0 36px;align-items:center}
.evt-grid .evt-card:last-child:nth-child(3n+1) .icon-tile{margin:0;align-self:start}
.evt-grid .evt-card:last-child:nth-child(3n+1) p{margin-bottom:0}
@media(max-width:1000px){
 .evt-phase-grid{grid-template-columns:1fr}
 .evt-grid{grid-template-columns:1fr 1fr}
 .evt-grid .evt-card:last-child:nth-child(3n+1){grid-column:auto;display:block}
 .evt-grid .evt-card:last-child:nth-child(3n+1) .icon-tile{margin-bottom:22px}
 .evt-grid .evt-card:last-child:nth-child(3n+1) p{margin-bottom:18px}
 .evt-grid .evt-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:640px){.evt-grid{grid-template-columns:1fr}.evt-phase-body{padding:24px 22px 28px}.evt-card-go{display:none}}


/* phase pages: link to the other phase */
.evt-next{padding-block:0 clamp(90px,10vw,140px)}
.evt-next-card{--svc:var(--tint);display:grid;grid-template-columns:1fr 1fr;border-radius:22px;overflow:hidden;background:#131016;border:1px solid #ffffff12;color:inherit;transition:border-color .4s,transform .4s}
.evt-next-card:hover{border-color:color-mix(in srgb,var(--tint) 55%,transparent);transform:translateY(-6px)}
.evt-next-media{position:relative;margin:0;min-height:340px;overflow:hidden}
.evt-next-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.evt-next-body{padding:clamp(30px,4vw,60px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.evt-next-body h2{font-size:clamp(38px,4.4vw,62px);color:#f2eef7;margin-bottom:14px}
.evt-next-body p{color:#98879f;max-width:430px;margin-bottom:28px}
@media(max-width:1000px){.evt-next-card{grid-template-columns:1fr}.evt-next-media{min-height:0;aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.evt-phase,.evt-card,.evt-step,.evt-next-card,.evt-phase-media img,.evt-row .pillar-media img{transition:none}}
/* event photography is 3:2 — show it whole instead of cropping to 4:3 */
.evt-page .pillar-media,.evt-page .hero-frame{aspect-ratio:3/2}
.evt-hero .hero-frame{transform:rotate(1deg)}

/* ---------- About page (reference-structured) ---------- */
.about-page .vs-statement{padding-bottom:60px}


.ab-values{background:#000;padding-block:clamp(90px,10vw,140px)}
.ab-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1280px;margin:0 auto}
.ab-value{padding:24px 24px 30px;border:1px solid #ffffff1c;border-radius:12px;background:#000;transition:background .35s,border-color .35s}
.ab-value:hover{background:#111013;border-color:#ffffff40}
.ab-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#1c1b1f;color:#fff;margin-bottom:22px;transition:background .35s}
.ab-ico .ico{width:22px;height:22px}
.ab-value:hover .ab-ico{background:#3a3940}
.ab-value h3{font-size:21px;font-weight:450;letter-spacing:-.01em;color:#fff;margin-bottom:12px}
.ab-value p{font-size:15.5px;line-height:1.65;color:#8f8d98}

.ab-stack{background:#000;padding-block:clamp(60px,7vw,100px) clamp(90px,10vw,140px);overflow:hidden}
.ab-pixel{overflow:hidden;margin-bottom:clamp(90px,11vw,170px)}
.ab-pixel-track{display:flex;width:max-content;animation:stack-scroll 40s linear infinite}
.ab-pixel-track span{font-family:'Doto',ui-monospace,monospace;font-weight:900;font-size:clamp(64px,9vw,132px);line-height:1;letter-spacing:-.02em;color:#2c2b30;white-space:nowrap;padding-right:.45em}
.ab-stack-head{max-width:780px}
.ab-stack-head h2{font-size:clamp(40px,4.6vw,64px);line-height:1.05;letter-spacing:-.035em;font-weight:500;color:#fff;margin-bottom:24px}
.ab-stack-head p{font-size:18px;line-height:1.6;color:#8f8d98;margin-bottom:34px;max-width:680px}
.ab-logos{margin-top:clamp(50px,6vw,80px);display:grid;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ab-logo-row{display:flex;width:max-content;animation:stack-scroll 48s linear infinite}
.ab-logo-row.is-reverse{animation-direction:reverse;animation-duration:54s}
.ab-logo{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:150px;height:120px;margin-right:18px;border:1px solid #ffffff14;border-radius:16px;background:linear-gradient(180deg,#141317,#0b0a0d);color:#c9c7d1;font-size:14px;font-weight:500;transition:border-color .3s,color .3s}
.ab-logo:hover{border-color:#ffffff40;color:#fff}
.ab-logo img{width:38px;height:38px}
.ab-logos:hover .ab-logo-row{animation-play-state:paused}
.ab-services{border-top:0}

.motion-paused .ab-pixel-track,.motion-paused .ab-logo-row{animation-play-state:paused}
@media(max-width:900px){.ab-value-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ab-value-grid{grid-template-columns:1fr}.ab-logo{width:120px;height:100px;font-size:12.5px}.ab-logo img{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.ab-pixel-track,.ab-logo-row{animation:none}.ab-value{transition:none}}

/* About: 1995 — NOW timeline line between the statement and the cards */
.ab-timeline-wrap{background:#000;padding-block:clamp(30px,5vw,60px) 0}
.ab-timeline{display:flex;align-items:center;gap:24px;font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#8c8a94}
.ab-timeline i{flex:1;height:1px;background:#ffffff26;position:relative;overflow:hidden}
.ab-timeline i:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff 50%,transparent);transform:translateX(-100%);animation:ab-sweep 4.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes ab-sweep{to{transform:translateX(100%)}}
.motion-paused .ab-timeline i:after{animation-play-state:paused}
@media(max-width:640px){.ab-timeline{gap:14px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.ab-timeline i:after{animation:none}}

/* ======================================================================
   Mobile rhythm pass (phones): tighter section spacing, no empty screens
   ====================================================================== */
.cs-word{display:inline-block;white-space:nowrap;font-weight:inherit}
@media(max-width:750px){
 .section{padding-block:56px}
 .section-heading{margin-bottom:32px}
 .closing{padding-block:72px}
 .service-hero{padding-top:96px;padding-bottom:56px}
 .vs-statement{padding:64px 20px 48px}
 .vs-approach{padding:48px 20px 64px}
 .vs-faq{padding:64px 20px}
 .vs-faq-head{margin-bottom:32px}
 .vs-heading{margin-bottom:36px}
 .vs-cta{min-height:0;padding-block:96px}
 .cs-hero{padding:118px 20px 44px}
 .cs-hero h1{font-size:clamp(44px,13vw,66px)}
 .cs-list-section{padding-bottom:72px}
 .about-page .vs-statement{padding-bottom:36px}
 .ab-timeline-wrap{padding-block:16px 0}
 .ab-values{padding-block:56px}
 .ab-stack{padding-block:36px 60px}
 .ab-pixel{margin-bottom:44px}
 .ab-logos{margin-top:36px}
 .evt-next{padding-block:0 60px}
 .site-footer .footer-top{padding-bottom:36px}
 .site-footer .footer-columns a{display:inline-block;padding-block:6px}
 .site-footer .footer-bottom a{display:inline-block;padding-block:8px}
}
/* Services lifecycle on phones and tablets: a short readable list instead of 2.5 screens of pinned scroll */
@media(max-width:1000px){
 .vs-lifecycle{padding-block:56px}
 .vs-lifecycle>.shell{min-height:0!important}
 .vs-lifecycle .lcx{position:static;min-height:0;display:block}
 .vs-lifecycle .lcx-fx,.vs-lifecycle .lcx-stage,.vs-lifecycle .lcx-outro{display:none!important}
 .vs-lifecycle .lcx>ul.sr-only{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;list-style:none;border-top:1px solid #ffffff14}
 .vs-lifecycle .lcx>ul.sr-only li{padding:20px 0;border-bottom:1px solid #ffffff14;font-size:clamp(21px,6vw,30px);line-height:1.3;letter-spacing:-.02em;color:#ece9f2}
 .vs-lifecycle .lcx>ul.sr-only li:last-child{border-bottom:0;padding-top:28px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(26px,7.4vw,36px);color:#c8aee0}
}

/* Mobile rhythm pass, round 2 */
@media(max-width:750px){
 .vs-services{padding:56px 20px 48px}
 .ab-services{padding-top:36px}
 .project-story{grid-template-columns:1fr!important;gap:18px!important;padding:6px 0 40px!important}
 .story-copy h3{font-size:clamp(28px,8vw,36px)}
}

/* contact form honeypot (hidden from people, visible to naive bots) */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Cold-load smoothness: hero text stays invisible (space kept, no layout shift) until motion.js
   starts the intro in the same frame. html.intro-pending is set in <head> and has a 2.5s failsafe. */
.intro-pending .e-hero-content > *,
.intro-pending .vs-hero-content,
.intro-pending .vs-scroll,
.intro-pending .cs-hero .shell,
.intro-pending .service-hero-copy,
.intro-pending .inner-hero:not(.service-hero) .shell{visibility:hidden}