@font-face {font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/manrope-400.f8dc62fdd1.woff') format('woff');}
@font-face {font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/manrope-500.7a7b1bff01.woff') format('woff');}
@font-face {font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/manrope-600.6204dc8b7c.woff') format('woff');}
@font-face {font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/manrope-700.537aa3014f.woff') format('woff');}
@font-face {font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/manrope-800.2bc95dfc1f.woff') format('woff');}


:root{--purple:#8c52ff;--purple-dark:#6c35d4;--ink:#201c2b;--muted:#6d687a;--line:#e8e5ee;--soft:#f7f6fb;--white:#fff;--radius:24px;--font:"Manrope",Arial,Helvetica,sans-serif;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{max-width:100%;display:block}svg{display:block;flex-shrink:0}button{color:inherit}::selection{background:#e6d9ff;color:#371d65}:focus-visible{outline:3px solid var(--purple);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.12;letter-spacing:-.04em}h1{font-size:clamp(2.75rem,5.4vw,5rem);font-weight:650}h2{font-size:clamp(2rem,3.5vw,3.25rem);font-weight:620}h3{font-size:1.45rem;font-weight:600}p{color:var(--muted)}.container{width:min(var(--max),calc(100% - 88px));margin-inline:auto}.section{padding-block:104px}.eyebrow{display:flex;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.14em;font-weight:600;text-transform:uppercase;color:var(--purple-dark);margin-bottom:22px}.eyebrow:before{content:"";width:24px;height:1px;background:currentColor}.pill{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;line-height:1.5;border:1px solid var(--line);padding:5px 10px;border-radius:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;background:var(--purple);color:#fff;border:1px solid var(--purple);border-radius:9px;padding:15px 22px;min-height:52px;font-weight:550;font-size:.925rem;line-height:1.4;transition:background .2s,transform .2s}.button:hover{background:var(--purple-dark);border-color:var(--purple-dark);transform:translateY(-2px)}.button.dark{background:var(--ink);border-color:var(--ink)}.button.dark:hover{background:#392d4b}.button.outline{background:transparent;border-color:var(--line);color:var(--ink)}.button.outline:hover{border-color:var(--purple);background:#f4eeff}.button.white{background:#fff;border-color:#fff;color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:.875rem;font-weight:550}.text-link:hover{color:var(--purple-dark)}.skip-link{position:fixed;top:-100px;left:20px;z-index:1000;background:white;padding:12px 20px}.skip-link:focus{top:15px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}.nav-wrap{height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.logo-crop{width:185px;height:51px;position:relative;overflow:hidden;display:block}.logo-crop img{width:225px;height:225px;max-width:none;position:absolute;left:-23px;top:-93px}.main-nav{display:flex;gap:30px;align-items:center}.nav-link{font-size:.875rem;display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:16px 0;white-space:nowrap;position:relative}.nav-link:hover,.nav-link[aria-current=page]{color:var(--purple-dark)}.nav-link[aria-current=page]:after{position:absolute;content:"";height:2px;bottom:5px;left:0;right:0;background:var(--purple)}.nav-dropdown{position:relative}.dropdown-panel{position:absolute;left:-24px;top:calc(100% + 10px);min-width:285px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 45px #201c2b12;visibility:hidden;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s,visibility .2s}.dropdown-panel:before{content:"";position:absolute;top:-16px;height:18px;width:100%;left:0}.dropdown-panel a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;font-size:.875rem}.dropdown-panel a:hover{background:var(--soft);color:var(--purple-dark)}.dropdown-panel small{display:block;color:var(--muted);font-size:.75rem}.nav-dropdown.open .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}.nav-cta{font-size:.8125rem;padding:12px 18px;min-height:46px;gap:18px}.menu-toggle{display:none;border:1px solid var(--line);background:white;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center}.hero{padding-block:75px 67px;position:relative}.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:24px}.hero h1{max-width:700px}.hero h1 em{font-style:normal;color:var(--purple)}.hero-description{font-size:1.075rem;max-width:450px;line-height:1.8;margin-top:27px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:32px}.hero-note{display:flex;align-items:center;gap:8px;margin-top:29px;font-size:.75rem;color:var(--muted)}.hero-note svg{color:var(--purple-dark)}.hero-art{position:relative;aspect-ratio:1/1;isolation:isolate;border-radius:36px;background:var(--soft)}.hero-art>img{width:100%;height:100%;object-fit:cover;border-radius:36px}.art-caption{position:absolute;top:24px;left:24px;font-size:.75rem;letter-spacing:.13em;color:#70697c}.art-tag{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);padding:11px 15px;border-radius:10px;font-size:.8125rem;box-shadow:0 8px 28px #2921350a;border:1px solid #eee8f4}.art-tag svg{color:var(--purple)}.art-tag.one{left:-22px;bottom:90px;transform:rotate(-5deg)}.art-tag.two{right:-15px;top:88px;transform:rotate(5deg)}.art-footer{position:absolute;bottom:24px;right:24px;display:flex;align-items:center;gap:12px;color:#7b7189;font-size:.75rem;letter-spacing:.09em}.art-footer span{width:24px;height:1px;background:#afa3bb}.capability-strip{border-block:1px solid var(--line);padding-block:24px}.capability-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.strip-label{font-size:.75rem;color:var(--muted);line-height:1.5;max-width:140px;flex-shrink:0}.capability-items{display:flex;flex-wrap:wrap;align-items:center;gap:35px;justify-content:space-between;flex:1}.capability-items span{display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:550;white-space:nowrap}.capability-items svg{color:#867c98}.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:40px}.section-top p{max-width:355px;font-size:.9375rem}.section-top h2{max-width:570px}.section-top .eyebrow{margin-bottom:18px}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service-card{display:flex;flex-direction:column;padding:29px 26px 25px;border:1px solid var(--line);border-radius:16px;min-height:315px;transition:transform .25s,border-color .25s,box-shadow .25s}.service-card:hover{transform:translateY(-5px);border-color:#b394ee;box-shadow:0 14px 30px #29213508}.service-icon{width:49px;height:49px;display:flex;align-items:center;justify-content:center;background:#f3edff;border-radius:12px;color:var(--purple-dark);margin-bottom:28px}.service-card h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.025em}.service-card p{font-size:.875rem;line-height:1.75;margin-top:13px;margin-bottom:25px}.service-card .text-link{margin-top:auto;font-size:.8125rem;justify-content:space-between}.service-card.featured{background:#f8f5ff;border-color:#e5d8fc}.card-tag{margin-top:18px;font-size:.75rem;color:var(--purple-dark)}.work-section{background:var(--soft)}.case-card{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.case-visual{background:#22202d;padding:44px;display:flex;align-items:center;justify-content:center;min-height:390px}.case-browser{width:100%;background:#fff;border-radius:10px;overflow:hidden;transform:rotate(-3deg);box-shadow:0 30px 70px #0003}.browser-bar{background:#f0eef5;display:flex;align-items:center;gap:5px;padding:12px 15px;font-size:.625rem;color:#81758e}.browser-bar i{width:5px;height:5px;background:#c2bacf;border-radius:50%}.browser-bar span{margin-left:15px}.browser-content{padding:30px 24px 26px}.browser-label{font-size:.625rem;letter-spacing:.1em;color:#8750e4}.browser-heading{font-size:1.8rem;line-height:1.2;font-weight:650;letter-spacing:-.05em;max-width:300px;margin-top:15px}.browser-heading span{color:var(--purple)}.browser-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}.browser-lines span{background:#f7f3fd;color:#7b50c1;font-size:.5625rem;padding:16px 8px;border-radius:6px;text-align:center}.case-copy{padding:46px;display:flex;flex-direction:column;align-items:flex-start}.case-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.case-copy h3{font-size:1.85rem}.case-copy p{font-size:.9375rem;margin-top:18px}.case-status{display:flex;align-items:flex-start;gap:11px;padding:15px;background:var(--soft);border-radius:9px;margin-block:25px;font-size:.8125rem;color:var(--muted)}.case-status svg{color:var(--purple-dark);margin-top:3px}.case-copy .text-link{margin-top:auto}.approach-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:start}.approach-intro p{margin-top:24px;max-width:420px;font-size:.9375rem}.approach-intro .text-link{margin-top:28px}.principle{padding:24px 0;border-bottom:1px solid var(--line);display:flex;gap:22px}.principle:first-child{padding-top:0}.principle-num{font-size:.75rem;color:var(--purple-dark);padding-top:5px}.principle h3{font-size:1.15rem;letter-spacing:-.02em}.principle p{font-size:.875rem;line-height:1.75;margin-top:10px}.process-section{padding-block:75px;background:#25212f;color:#fff}.process-section .eyebrow{color:#b99aff}.process-section h2{max-width:530px}.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:42px}.process-step{border-top:1px solid #ffffff26;padding-top:25px}.process-step span{font-size:.75rem;color:#b798f2}.process-step h3{font-size:1.1rem;letter-spacing:-.025em;margin:14px 0 12px}.process-step p{font-size:.875rem;color:#b5afc2;line-height:1.7}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:95px}.faq-intro p{max-width:330px;margin-top:22px;font-size:.9375rem}.faq-intro .text-link{margin-top:28px}.faq-list details{border-bottom:1px solid var(--line);padding-block:22px}.faq-list details:first-child{padding-top:0}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;font-weight:550;font-size:.9375rem;line-height:1.5}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary .faq-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--purple)}.faq-list details[open] .faq-icon{transform:rotate(45deg)}.faq-list details p{font-size:.875rem;line-height:1.8;padding-top:17px;padding-right:35px}.cta-section{padding-bottom:75px}.cta-box{background:var(--purple);border-radius:20px;padding:52px 58px;display:flex;justify-content:space-between;align-items:center;gap:40px;color:#fff;position:relative;overflow:hidden}.cta-box h2{font-size:clamp(2rem,3.3vw,2.9rem);max-width:630px}.cta-box p{color:#f0e7ff;margin-top:16px;font-size:.9375rem;max-width:540px}.cta-box .button{flex-shrink:0}.site-footer{border-top:1px solid var(--line);padding-top:55px}.footer-grid{display:grid;grid-template-columns:2fr 1.1fr 1fr 1.2fr;gap:45px;padding-bottom:45px}.footer-brand .brand{align-items:flex-start;width:max-content}.footer-brand p{font-size:.8125rem;max-width:235px;margin-top:22px}.footer-title{font-size:.8125rem;font-weight:600;letter-spacing:0;margin:12px 0 17px}.footer-links{display:flex;flex-direction:column;gap:9px;font-size:.8125rem;color:var(--muted)}.footer-links a:hover{color:var(--purple-dark)}.footer-bottom{border-top:1px solid var(--line);padding-block:20px;display:flex;justify-content:space-between;gap:20px;font-size:.75rem;color:var(--muted)}.footer-bottom a{display:flex;align-items:center;gap:8px}.breadcrumb{padding-top:28px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.75rem}.breadcrumb a:hover{color:var(--purple-dark)}.inner-hero{padding-block:55px 75px}.inner-hero h1{font-size:clamp(2.6rem,5vw,4.5rem);max-width:760px}.inner-hero h1 em{color:var(--purple);font-style:normal}.inner-hero p{max-width:600px;font-size:1.0625rem;margin-top:25px;line-height:1.8}.inner-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:80px}.inner-hero .hero-actions{margin-top:30px}.hero-aside{border:1px solid var(--line);background:var(--soft);padding:32px;border-radius:20px}.hero-aside .eyebrow{font-size:.75rem;margin-bottom:16px}.hero-aside h2{font-size:1.6rem;line-height:1.3}.hero-aside p{font-size:.875rem;margin-top:16px}.check-list{padding:0;list-style:none;margin:24px 0 0;display:flex;flex-direction:column;gap:14px}.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;line-height:1.6}.check-list svg{color:var(--purple-dark);margin-top:3px}.hero-aside .aside-note{font-size:.75rem;border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.section.soft{background:var(--soft)}.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.detail-card{padding:30px;border:1px solid var(--line);border-radius:16px;background:white}.detail-card .service-icon{margin-bottom:24px}.detail-card h3{font-size:1.2rem;line-height:1.35}.detail-card p{font-size:.875rem;line-height:1.8;margin-top:14px}.detail-card ul{font-size:.8125rem;color:var(--muted);padding-left:17px;margin-bottom:0;line-height:1.9}.subnav{background:white;border-block:1px solid var(--line)}.subnav .container{display:flex;gap:35px;flex-wrap:wrap;padding-block:17px}.subnav a{font-size:.8125rem;color:var(--muted)}.subnav a:hover{color:var(--purple-dark)}.metric-board{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:white}.board-header{display:flex;align-items:center;justify-content:space-between;padding:25px 30px;border-bottom:1px solid var(--line);gap:15px}.board-header h3{font-size:1.1rem;letter-spacing:-.02em}.board-content{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;padding:36px}.board-content h3{font-size:1.55rem;line-height:1.3}.board-content p{font-size:.9375rem;margin-top:20px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}.metric{padding:20px;background:var(--soft);border-radius:10px}.metric small{font-size:.75rem;color:var(--muted)}.metric strong{display:block;font-size:1.25rem;font-weight:550;margin-top:10px}.metric span{display:block;font-size:.75rem;color:var(--muted);margin-top:5px}.board-note{padding:18px 30px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);background:#fcfbfe}.review-empty{display:flex;gap:22px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:30px}.review-empty>svg{color:var(--purple-dark)}.review-empty h3{font-size:1.2rem}.review-empty p{font-size:.9375rem;margin-top:12px;max-width:700px}.review-empty .text-link{margin-top:20px}.about-statement{max-width:920px;font-size:clamp(1.5rem,2.7vw,2.5rem);line-height:1.4;letter-spacing:-.035em}.about-statement span{color:var(--purple)}.about-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}.about-facts div{border-top:1px solid var(--line);padding-top:23px}.about-facts strong{display:block;font-size:1.1rem;font-weight:550}.about-facts p{font-size:.875rem;margin-top:10px}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:start}.contact-info h2{font-size:2.5rem}.contact-info>p{margin-top:23px}.contact-methods{display:grid;gap:20px;margin-top:35px}.contact-method{display:flex;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}.contact-method svg{color:var(--purple-dark);margin-top:5px}.contact-method small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:3px}.contact-method a,.contact-method span{font-size:.9375rem;overflow-wrap:anywhere}.contact-method a:hover{color:var(--purple-dark)}.brief-form{padding:35px;background:var(--soft);border:1px solid var(--line);border-radius:20px}.brief-form h2{font-size:1.5rem}.brief-form>p{font-size:.875rem;margin-top:10px;margin-bottom:25px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}.field label{font-size:.8125rem;font-weight:550}.field input,.field textarea,.field select{width:100%;border:1px solid #dcd6e5;border-radius:8px;background:white;min-height:48px;padding:12px 14px;color:var(--ink);font-size:1rem}.field input::placeholder,.field textarea::placeholder{color:#8b8298}.field textarea{resize:vertical;min-height:135px}.form-note{font-size:.75rem!important;margin-top:14px!important}.form-action{display:flex;gap:12px;align-items:center}.form-action .button{flex:1}.form-status{font-size:.8125rem;color:var(--purple-dark);margin-top:18px}.copy-button{background:transparent;border:1px solid #dcd6e5;border-radius:8px;width:50px;height:52px;display:flex;align-items:center;justify-content:center}.copy-button:hover{border-color:var(--purple)}.prose{max-width:850px}.prose h2{font-size:1.5rem;margin-top:35px;line-height:1.35}.prose p,.prose li{font-size:.9375rem;color:var(--muted);margin-top:15px;line-height:1.8}.prose li{margin-top:8px}.prose a{color:var(--purple-dark);text-decoration:underline}.not-found{text-align:center;padding-block:100px}.not-found h1{color:var(--purple);font-size:6rem}.not-found h2{font-size:2rem;margin:20px 0}.not-found .button{margin-top:28px}
@media(min-width:1600px){.hero{padding-block:95px 85px}}
@media(max-width:1100px){.container{width:calc(100% - 56px)}.main-nav{gap:20px}.services-grid{grid-template-columns:repeat(2,1fr)}.service-card{min-height:280px}.hero h1{font-size:4rem}.hero-description{font-size:1rem}.capability-items{gap:22px}.capability-items span{font-size:.75rem}.approach-grid{gap:55px}.faq-layout{gap:55px}.case-copy{padding:34px}.case-visual{padding:30px}.footer-grid{gap:30px}.inner-hero-grid{gap:40px}.contact-grid{gap:40px}.hero-actions{gap:20px}.hero-actions .button{gap:16px;padding-inline:18px}}
@media(max-width:900px){.nav-wrap{height:80px}.main-nav{gap:16px}.nav-cta{display:none}.hero-grid{gap:30px}.hero h1{font-size:3.35rem}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.art-tag{font-size:.75rem;padding:9px 11px}.art-tag.one{left:-12px;bottom:70px}.art-tag.two{right:-10px;top:65px}.art-caption{font-size:.5625rem;left:18px}.art-footer{display:none}.capability-inner{flex-direction:column;align-items:flex-start;gap:15px}.strip-label{max-width:none}.capability-items{width:100%}.capability-items span{font-size:.875rem}.section{padding-block:75px}.section-top{gap:35px}.section-top p{max-width:300px}.three-grid{grid-template-columns:1fr 1fr}.process-steps{grid-template-columns:1fr 1fr;gap:30px}.case-card{grid-template-columns:1fr 1fr}.case-copy h3{font-size:1.5rem}.case-visual{min-height:370px;padding:22px}.browser-heading{font-size:1.4rem}.browser-content{padding:25px 20px}.browser-lines{gap:6px}.browser-lines span{font-size:.5rem;padding:12px 4px}.cta-box{padding:40px}.cta-box h2{font-size:2.25rem}.footer-grid{grid-template-columns:1.4fr 1fr;gap:35px}.inner-hero-grid{grid-template-columns:1.15fr .85fr;gap:30px}.hero-aside{padding:25px}.hero-aside h2{font-size:1.4rem}.board-content{gap:30px;padding:28px}.contact-grid{grid-template-columns:.85fr 1.15fr;gap:30px}.brief-form{padding:25px}.form-row{grid-template-columns:1fr;gap:0}.form-action .button{font-size:.8125rem;gap:12px}}
@media(max-width:760px){.container{width:calc(100% - 40px)}.nav-wrap{height:76px}.logo-crop{width:161px;height:44px}.logo-crop img{width:197px;height:197px;left:-20px;top:-81px}.menu-toggle{display:flex}.main-nav{position:absolute;left:0;right:0;top:76px;background:#fff;display:none;padding:15px 20px 25px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px #21193108;max-height:calc(100dvh - 76px);overflow:auto}.main-nav.mobile-open{display:block}.main-nav .nav-link{width:100%;font-size:1rem;padding:14px 0;justify-content:space-between;border-bottom:1px solid var(--line)}.nav-link[aria-current=page]:after{display:none}.dropdown-panel{display:block;position:static;visibility:visible;opacity:1;transform:none;box-shadow:none;border:0;min-width:0;padding:5px 0 10px}.dropdown-panel:before{display:none}.dropdown-panel a{padding:12px 8px;font-size:.875rem}.dropdown-panel small{display:none}.nav-dropdown:not(.open) .dropdown-panel{display:none}.nav-dropdown:focus-within:not(.open) .dropdown-panel,.nav-dropdown:hover:not(.open) .dropdown-panel{display:none}.hero{padding-block:45px}.hero-grid{grid-template-columns:1fr;gap:38px}.hero h1{font-size:clamp(2.7rem,8.7vw,4.3rem);letter-spacing:-.055em}.hero .eyebrow{margin-bottom:21px;font-size:.75rem}.hero-description{margin-top:24px;font-size:1rem;max-width:480px}.hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:22px}.hero-actions .button{font-size:.875rem;padding-inline:17px}.hero-actions .text-link{font-size:.8125rem;gap:8px}.hero-note{margin-top:24px;font-size:.75rem}.hero-art{max-width:480px;width:100%;justify-self:center;aspect-ratio:1.18;border-radius:22px}.hero-art>img{border-radius:22px}.art-tag.one{left:13px;bottom:40px}.art-tag.two{right:12px;top:65px}.art-tag{font-size:.75rem}.art-caption{font-size:.625rem;top:21px;left:23px}.capability-strip{padding-block:22px}.capability-items{display:grid;grid-template-columns:1fr 1fr;gap:17px 10px}.capability-items span{font-size:.75rem;gap:7px}.capability-items svg{width:17px;height:17px}.strip-label{font-size:.75rem}.section{padding-block:62px}.section-top{flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:30px}.section-top p{max-width:450px;font-size:.875rem}.eyebrow{font-size:.75rem;margin-bottom:17px}.section-top .eyebrow{margin-bottom:16px}.services-grid{grid-template-columns:1fr 1fr;gap:12px}.service-card{padding:23px 19px;min-height:295px}.service-card h3{font-size:1.075rem}.service-card p{font-size:.8125rem;margin-top:12px}.service-icon{width:43px;height:43px;margin-bottom:22px}.service-card .text-link{font-size:.75rem;gap:5px}.service-card .text-link svg{width:16px}.case-card{grid-template-columns:1fr}.case-visual{min-height:320px;padding:35px}.case-browser{max-width:360px}.browser-heading{font-size:1.8rem}.browser-lines span{font-size:.625rem;padding:17px 6px}.case-copy{padding:30px 25px}.case-copy h3{font-size:1.7rem}.case-copy p{font-size:.875rem}.approach-grid,.faq-layout{grid-template-columns:1fr;gap:40px}.approach-intro p{margin-top:22px}.process-section{padding-block:60px}.process-steps{gap:30px 25px;margin-top:35px}.process-step h3{font-size:1rem;line-height:1.3}.process-step p{font-size:.8125rem}.faq-intro p{max-width:400px}.faq-list details{padding-block:20px}.faq-list summary{font-size:.875rem}.faq-list details p{font-size:.875rem;padding-right:0}.cta-section{padding-bottom:55px}.cta-box{padding:34px 28px;flex-direction:column;align-items:flex-start;gap:27px;border-radius:16px}.cta-box h2{font-size:2rem}.cta-box p{font-size:.875rem}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 24px;padding-bottom:30px}.footer-brand{grid-column:1/-1}.footer-brand p{max-width:320px;margin-top:18px}.footer-title{margin-top:0}.site-footer{padding-top:38px}.footer-bottom{flex-direction:column;gap:10px}.breadcrumb{padding-top:22px;font-size:.75rem}.inner-hero{padding-block:35px 50px}.inner-hero-grid{grid-template-columns:1fr;gap:35px}.inner-hero h1{font-size:clamp(2.55rem,8vw,3.5rem)}.inner-hero p{font-size:1rem;margin-top:22px}.inner-hero .hero-actions{gap:18px}.hero-aside{padding:28px}.hero-aside h2{font-size:1.5rem}.hero-aside p{font-size:.875rem}.hero-aside .aside-note{font-size:.75rem}.three-grid{grid-template-columns:1fr}.detail-card{padding:26px}.detail-card .service-icon{margin-bottom:20px}.detail-card h3{font-size:1.2rem}.subnav .container{gap:15px 23px;padding-block:15px}.subnav a{font-size:.75rem}.board-header{padding:20px;flex-wrap:wrap}.board-content{grid-template-columns:1fr;padding:25px;gap:25px}.board-content h3{font-size:1.4rem}.board-content p{font-size:.875rem;margin-top:15px}.metric{padding:16px}.metric strong{font-size:1.1rem}.board-note{padding:20px 25px}.review-empty{padding:25px;gap:15px}.review-empty>svg{width:24px}.review-empty p{font-size:.875rem}.about-facts{grid-template-columns:1fr;gap:25px;margin-top:30px}.about-facts strong{font-size:1rem}.contact-grid{grid-template-columns:1fr;gap:35px}.contact-info h2{font-size:2rem}.contact-info>p{font-size:.9375rem}.form-row{grid-template-columns:1fr 1fr;gap:15px}.brief-form{padding:25px}.brief-form h2{font-size:1.4rem}.form-action .button{font-size:.875rem}.prose h2{font-size:1.3rem}.not-found{padding-block:65px}}
@media(max-width:380px){.container{width:calc(100% - 32px)}.hero h1{font-size:2.55rem}.hero-actions{gap:17px}.services-grid{grid-template-columns:1fr}.service-card{min-height:260px}.service-card p{font-size:.875rem}.service-card .text-link{font-size:.8125rem}.capability-items span{font-size:.75rem}.form-row{grid-template-columns:1fr;gap:0}.form-action .button{font-size:.8125rem;padding-inline:12px}.process-steps{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:25px 15px}.footer-links{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover,.service-card:hover{transform:none}}

/* Legible brand colors and progressive responsive refinements. */
.button{background:#8142ed;border-color:#8142ed}.cta-box{background:#7435df}.cta-box p{color:#f5efff}.footer-links{overflow-wrap:anywhere}.board-content .text-link{margin-top:22px}.contact-info h1{font-size:clamp(2.6rem,4.7vw,4.3rem)}
@media(max-width:760px){.contact-info h1{font-size:clamp(2.6rem,8.3vw,3.6rem)}.hero-art>img{object-fit:contain}.art-footer{display:none}}

/* Shared edges and appearance tokens for every route. */
:root {
  color-scheme: light;
  --page: #fff;
  --surface: #fff;
  --header-surface: rgba(255,255,255,.97);
  --featured-surface: #f8f5ff;
  --icon-surface: #f3edff;
  --hover-surface: #f4eeff;
  --note-surface: #fcfbfe;
  --field-border: #dcd6e5;
  --placeholder: #8b8298;
  --contrast-hover: #392d4b;
  --gutter: 44px;
  --layout-gap: 64px;
  --header-height: 92px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #131117;
  --surface: #1c1823;
  --header-surface: #131117;
  --ink: #f4effa;
  --muted: #b9afc7;
  --line: #383041;
  --soft: #231e2c;
  --purple: #ac82ff;
  --purple-dark: #c3a1ff;
  --featured-surface: #281e3b;
  --icon-surface: #322346;
  --hover-surface: #30233f;
  --note-surface: #201a29;
  --field-border: #51445f;
  --placeholder: #a296b1;
  --contrast-hover: #fff;
}
html { scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-height) + 24px); }
body { background: var(--page); }
h1, h2, h3 { overflow-wrap: break-word; }
.container { width: min(var(--max), calc(100% - var(--gutter) - var(--gutter))); }
.container.prose { max-width: var(--max); }
.prose > * { max-width: 850px; }
.hero-grid, .inner-hero-grid, .approach-grid, .faq-layout, .contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
}
.hero-grid > *, .inner-hero-grid > *, .approach-grid > *, .faq-layout > *, .contact-grid > *, .footer-grid > * { min-width: 0; }
.case-card, .board-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-copy, .case-visual { padding: 40px; }
.case-browser { transform: none; color: #201c2b; }
.browser-heading { color: #201c2b; }
.browser-heading span { color: #8c52ff; }
.services-grid, .three-grid { grid-auto-rows: 1fr; }
.hero-art { max-width: none; width: 100%; }
.art-tag.one { left: 24px; transform: none; }
.art-tag.two { right: 24px; transform: none; }
.site-header { background: var(--header-surface); }
.nav-wrap { height: var(--header-height); }
.main-nav { margin-inline: auto; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand { display: inline-flex; flex-direction: row; }
.theme-toggle, .menu-close {
  width: 44px; height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--page); color: var(--ink); padding: 0;
  transition: background-color .2s, border-color .2s, color .2s;
}
.theme-toggle:hover, .menu-close:hover { background: var(--hover-surface); border-color: var(--purple); }
.theme-sun { display: none; }
[data-theme="dark"] .theme-sun { display: flex; }
[data-theme="dark"] .theme-moon { display: none; }
.menu-toggle { background: var(--page); }
.skip-link, .dropdown-panel, .case-card, .detail-card, .metric-board, .subnav { background: var(--surface); }
.service-card.featured { background: var(--featured-surface); border-color: var(--line); }
.service-icon { background: var(--icon-surface); }
.board-note { background: var(--note-surface); }
.art-tag { background: var(--surface); border-color: var(--line); max-width: calc(100% - 40px); }
.art-caption, .art-footer { color: var(--muted); }
.field input, .field textarea, .field select { background: var(--surface); border-color: var(--field-border); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.copy-button { border-color: var(--field-border); }
.button:hover { background: #6c35d4; border-color: #6c35d4; }
.button.dark { background: var(--ink); border-color: var(--ink); color: var(--page); }
.button.dark:hover { background: var(--contrast-hover); border-color: var(--contrast-hover); }
.button.outline:hover { background: var(--hover-surface); border-color: var(--purple); }
.button.white { background: #fff; border-color: #fff; color: #201c2b; }
.button.white:hover { background: #f3edff; border-color: #f3edff; }
/* An explicit compositing surface avoids Safari's black clipped-image backdrop. */
[data-theme="dark"] .logo-crop { background: var(--page); isolation: isolate; }
[data-theme="dark"] .logo-crop img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
[data-theme="dark"] .hero-art > img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: lighten; }
[data-theme="dark"] .process-section { background: #1b1625; }
[data-theme="dark"] .case-visual { background: #292135; }
[data-theme="dark"] ::selection { background: #674195; color: #fff; }
body, .site-header, .service-card, .case-card, .detail-card, .metric-board, .hero-aside,
.brief-form, .work-section, .section.soft, .service-icon, .board-note, .metric, .subnav,
.field input, .field textarea, .field select {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.service-card { transition: transform .25s, box-shadow .25s, border-color .22s, background-color .22s; }
.faq-icon { transition: transform .28s cubic-bezier(.22,1,.36,1); }
.animated-details[data-expanded="false"] .faq-icon { transform: rotate(0); }
.animated-details[data-expanded="true"] .faq-icon { transform: rotate(45deg); }
.details-content { display: flow-root; }

/* Native modal keeps keyboard focus inside the full-screen navigation. */
.menu-is-open, .menu-is-open body { overflow: hidden; overscroll-behavior: none; }
.mobile-menu {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  background: var(--page); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu:not([open]) { display: none; }
.mobile-menu::backdrop { background: rgba(16,12,24,.55); }
.mobile-menu-inner { display: flex; flex-direction: column; min-height: 100%; }
.mobile-menu-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--header-height); flex-shrink: 0;
  position: sticky; top: 0; z-index: 2;
  background: var(--page); border-bottom: 1px solid var(--line);
}
.mobile-nav { padding-top: 24px; }
.mobile-nav-link, .mobile-services > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 0; font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: 550; letter-spacing: -.035em; line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.mobile-nav-link[aria-current="page"], .mobile-nav-link:hover { color: var(--purple-dark); }
.mobile-nav-link > svg { color: var(--purple-dark); }
.mobile-services > summary { list-style: none; cursor: pointer; border: 0; }
.mobile-services > summary::-webkit-details-marker { display: none; }
.mobile-services { border-bottom: 1px solid var(--line); }
.mobile-services .faq-icon { color: var(--purple-dark); }
.mobile-services .details-content { padding-bottom: 15px; }
.mobile-services .details-content a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 15px; font-size: .9375rem; border-radius: 9px;
}
.mobile-services .details-content a > svg { color: var(--purple-dark); }
.mobile-services .details-content a > svg:last-child { margin-left: auto; }
.mobile-services .details-content a:hover,
.mobile-services .details-content a[aria-current="page"] { background: var(--hover-surface); }
.mobile-menu-bottom { margin-top: auto; padding: 30px 0 max(28px, env(safe-area-inset-bottom)); }
.mobile-theme-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: .875rem; color: var(--muted); }
.mobile-menu-bottom > .button { width: 100%; justify-content: space-between; }

@media (max-width: 1100px) {
  :root { --gutter: 28px; --layout-gap: 40px; }
  .header-actions .nav-cta { display: none; }
  .case-copy, .case-visual { padding: 30px; }
}
@media (max-width: 960px) {
  :root { --header-height: 80px; }
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --layout-gap: 36px; --header-height: 76px; }
  .hero-grid, .inner-hero-grid, .approach-grid, .faq-layout, .contact-grid,
  .case-card, .board-content { grid-template-columns: minmax(0, 1fr); }
  .hero-art { aspect-ratio: 1.25; }
  .art-tag.one { left: 20px; }
  .art-tag.two { right: 20px; }
  .art-caption { left: 20px; }
  .case-copy, .case-visual { padding: 28px; }
  .services-grid, .three-grid { grid-auto-rows: auto; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .header-actions { gap: 8px; }
  .nav-wrap { gap: 16px; }
  .logo-crop { width: 145px; height: 40px; }
  .logo-crop img { width: 176px; height: 176px; left: -18px; top: -73px; }
  .case-copy, .case-visual { padding: 24px; }
  .mobile-nav { padding-top: 15px; }
  .mobile-nav-link, .mobile-services > summary { padding-block: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* A full first viewport with room for content at larger text sizes. */
.site-header { height: var(--header-height); }
.hero {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding-block: clamp(32px, 5svh, 72px);
  display: flex; align-items: center;
}
.hero-art { aspect-ratio: auto; height: clamp(360px, 66svh, 700px); }
/* Blend the pale studio backdrop into the card without cropping the ribbon. */
.hero-art > img { object-fit: contain; filter: brightness(1.04); mix-blend-mode: darken; }
.hero h1 { font-size: clamp(3rem, 5.8vw, 5.35rem); }

/* Stable flex layout; the outer items glide between expanded and compact edges. */
@media (min-width: 961px) {
  .site-header { --nav-duration: .65s; --nav-ease: cubic-bezier(.22,1,.36,1); background: transparent; border: 0; pointer-events: none; }
  .site-header::before {
    content: ""; position: absolute; left: 50%; top: 0;
    width: 100%; height: var(--header-height); transform: translateX(-50%);
    border-radius: 0; background: var(--header-surface);
    box-shadow: 0 0 0 transparent, inset 0 0 0 1px transparent;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    transition: width var(--nav-duration) var(--nav-ease), height var(--nav-duration) var(--nav-ease),
      top var(--nav-duration) var(--nav-ease), border-radius var(--nav-duration) var(--nav-ease),
      background-color .22s, box-shadow var(--nav-duration) var(--nav-ease);
  }
  .site-header .nav-wrap {
    position: relative; padding-inline: 20px; pointer-events: auto;
    height: var(--header-height); transform: translateY(0);
    transition: height var(--nav-duration) var(--nav-ease), transform var(--nav-duration) var(--nav-ease);
  }
  .site-header .nav-wrap > .brand,
  .site-header .nav-wrap > .header-actions {
    transition: transform var(--nav-duration) var(--nav-ease);
  }
  .site-header .nav-wrap > .brand { transform: translate3d(-20px,0,0); }
  .site-header .nav-wrap > .header-actions { transform: translate3d(20px,0,0); }
  .site-header.is-condensed .nav-wrap > .brand,
  .site-header.is-condensed .nav-wrap > .header-actions { transform: translate3d(0,0,0); }
  .site-header.is-condensed::before {
    width: min(var(--max), calc(100% - var(--gutter) - var(--gutter)));
    height: 72px; top: 14px; border-radius: 18px;
    box-shadow: 0 24px 50px -24px #201c2b40, inset 0 0 0 1px var(--line);
  }
  .site-header.is-condensed .nav-wrap { height: 72px; transform: translateY(14px); }
  .site-header .nav-cta { white-space: nowrap; }
  [data-theme="dark"] .site-header.is-condensed::before {
    box-shadow: 0 24px 50px -24px #0009, inset 0 0 0 1px var(--line);
  }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .site-header .nav-cta { display: none; }
}
@media (max-width: 760px) {
  .hero { align-items: flex-start; padding-block: 28px; }
  .hero-grid { gap: clamp(18px, 3svh, 28px); }
  .hero h1 { font-size: clamp(2.5rem, 9vw, 3.9rem); }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero-description { font-size: .9375rem; line-height: 1.7; margin-top: 16px; }
  .hero-actions { margin-top: 20px; gap: 12px; }
  .hero-actions .button { font-size: .8125rem; gap: 8px; padding: 13px 12px; min-height: 46px; }
  .hero-actions .text-link { font-size: .8125rem; gap: 6px; }
  .hero-note { margin-top: 18px; line-height: 1.5; }
  .hero-art { height: clamp(210px, 32svh, 360px); }
  .hero-art .art-tag.one { bottom: 14px; left: 16px; }
  .hero-art .art-tag.two { display: none; }
  .hero-art .art-caption { top: 14px; left: 16px; }
}
@media (max-width: 380px) {
  .hero-actions .text-link > svg { display: none; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .hero { padding-block: 16px; }
  .hero-grid { gap: 14px; }
  .hero-art { height: clamp(180px, 28svh, 220px); }
  .hero-note { display: none; }
}
@media (min-width: 761px) and (max-height: 600px) {
  .hero { padding-block: 20px; }
  .hero h1 { font-size: clamp(2rem, 3.9vw, 2.75rem); }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero-description { font-size: .9375rem; line-height: 1.6; margin-top: 14px; }
  .hero-actions { margin-top: 18px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .hero-actions .button { min-height: 44px; padding: 12px 16px; }
  .hero-note { display: none; }
  .hero-art { height: clamp(180px, calc(100svh - var(--header-height) - 48px), 420px); }
  .art-tag.one { bottom: 22px; }
  .art-tag.two { top: 54px; }
}

/* Six comparable packages share the site container and theme tokens. */
.backlink-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.backlink-card {
  display: flex; flex-direction: column; padding: 32px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
}
.backlink-card-accent { background: var(--featured-surface); border-color: var(--purple); }
.package-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 42px; margin-bottom: 14px; }
.package-topline > svg { color: var(--purple-dark); }
.package-label { font-size: .75rem; line-height: 1.6; color: var(--purple-dark); max-width: 175px; }
.backlink-card h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); overflow-wrap: anywhere; }
.package-description { font-size: .875rem; line-height: 1.8; margin-top: 18px; min-height: 100px; }
.package-price { font-size: 2.35rem; font-weight: 700; letter-spacing: -.035em; padding-block: 24px; border-bottom: 1px solid var(--line); }
.package-price span { display: block; margin-top: 8px; font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.backlink-card .check-list { flex: 1; margin-top: 24px; gap: 14px; }
.backlink-card .check-list li { font-size: .875rem; }
.backlink-card .button { margin-top: 30px; width: 100%; padding-inline: 18px; justify-content: space-between; gap: 12px; }
.package-note { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; margin-top: 24px; border: 1px solid var(--line); border-radius: 12px; }
.package-note > svg { color: var(--purple-dark); margin-top: 4px; }
.package-note p { font-size: .875rem; }
.faq-list details p a { color: var(--purple-dark); text-decoration: underline; text-underline-offset: 3px; }
.field[hidden] { display: none; }
.package-delivery { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .8rem; color: var(--muted); }
.package-delivery svg, .package-note > svg { flex-shrink: 0; }
.package-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 40px; }
.package-terms h3 { font-size: 1.1rem; margin-bottom: 12px; }
.package-terms p { font-size: .875rem; line-height: 1.85; }
.backlink-card { scroll-margin-top: 130px; min-width: 0; }
@media (max-width: 1100px) {
  .backlink-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backlink-card { padding: 28px; }
}
@media (max-width: 650px) {
  .backlink-grid, .package-terms { grid-template-columns: minmax(0, 1fr); }
  .backlink-card { padding: 26px; }
  .backlink-card h3 { font-size: 1.8rem; }
  .package-topline { min-height: 0; }
  .package-label { max-width: none; }
  .package-description { min-height: 0; }
  .package-note { padding: 20px; }
}

/* Project stories share the same page edges and a consistent surface rhythm. */
.inner-hero { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--page), var(--featured-surface)); }
.hero-aside { background: var(--surface); box-shadow: 0 16px 45px -30px #6c35d440; }
.faq-list { display: grid; gap: 12px; align-content: start; }
.faq-list details, .faq-list details:first-child { padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.faq-list details[data-expanded="true"] { border-color: var(--purple); background: var(--featured-surface); }
.faq-list summary { font-size: 1rem; }
.faq-list details p { font-size: 1rem; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.case-card + .project-grid { margin-top: 24px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.project-cover { padding: 32px; background: #e9e4ff; color: #302252; }
.project-fixu .project-cover { background: #14271f; color: #ddf4e7; }
.project-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .875rem; }
.project-wordmark { font-size: clamp(4rem,7vw,6rem); font-weight: 650; letter-spacing: -.075em; line-height: 1.2; padding-block: 24px 12px; }
.project-wordmark > span { color: #8c52ff; }
.project-fixu .project-wordmark > span { color: #79dfa7; }
.project-cover p { color: inherit; font-size: 1rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.project-tags span { font-size: .875rem; border: 1px solid currentColor; border-radius: 30px; padding: 4px 12px; }
.project-copy { display: flex; flex-direction: column; padding: 30px 32px; }
.project-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-heading h3 { font-size: 1.7rem; }
.project-heading > span { color: var(--muted); font-size: .875rem; }
.project-copy p { margin-block: 18px 26px; font-size: 1rem; }
.project-copy .text-link { justify-content: space-between; color: var(--purple-dark); margin-top: auto; }
.project-card { display: flex; flex-direction: column; }
.project-copy { flex: 1; }
.work-more { display: flex; justify-content: flex-end; margin-top: 30px; }
.portfolio-hero h1 { max-width: 100%; font-size: clamp(2.8rem,6vw,5.5rem); }
.portfolio-hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.portfolio-hero-bottom .text-link { flex-shrink: 0; }
.portfolio-seo { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 24px; padding: 36px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.portfolio-seo p { max-width: 680px; margin-top: 18px; }
.portfolio-seo .button { flex-shrink: 0; }
.comparison { margin: 0; }
.comparison-stage { position: relative; height: 40rem; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; isolation: isolate; background: #eeedf1; }
.comparison-design { position: absolute; inset: 0; color: #25212c; }
.design-before { background: #eeedf1; }
.design-after { background: #17131f; color: #fff; clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.demo-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 40px; border-bottom: 1px solid #8d829933; }
.demo-nav > span { display: flex; align-items: center; gap: 16px; font-size: .875rem; }
.demo-nav strong { font-size: 1.3rem; letter-spacing: -.05em; }
.design-after .demo-nav strong span { color: #b38aff; }
.demo-body { padding: 35px 40px; }
.demo-body small { font-size: .875rem; letter-spacing: .12em; }
.demo-body h3 { margin-top: 18px; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.12; }
.demo-body h3 em { color: #b38aff; font-style: normal; }
.demo-body p { font-size: 1rem; color: inherit; max-width: 500px; margin-top: 18px; }
.demo-button { display: inline-flex; align-items: center; gap: 24px; padding: 10px 18px; background: #d1cdd6; font-size: .875rem; margin-top: 22px; }
.design-after .demo-button { background: #8650e9; border-radius: 8px; }
.demo-services { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 32px; font-size: .875rem; }
.demo-services > span { display: flex; align-items: center; gap: 9px; }
.design-before .demo-body { font-family: Arial, sans-serif; }
.design-before .demo-body h3 { font-weight: 400; letter-spacing: 0; }
.comparison-divider { position: absolute; inset-block: 0; left: var(--reveal); width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 10px #0004; }
.comparison-divider > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ded5ed; border-radius: 50%; background: #fff; color: #6030b5; font-size: 1.6rem; line-height: 1; }
.comparison-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparison-stage:focus-within { outline: 3px solid var(--purple); outline-offset: 5px; }
.comparison-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.comparison-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.comparison-controls button:first-child svg { transform: rotate(180deg); }
.comparison-controls button:hover { background: var(--hover-surface); border-color: var(--purple); }
.comparison-controls > span, .comparison figcaption { color: var(--muted); font-size: .875rem; }
.comparison figcaption { margin-top: 16px; max-width: 780px; }
@media (max-width: 960px) {
  .portfolio-seo { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .project-grid { grid-template-columns: minmax(0,1fr); }
  .project-cover, .project-copy, .portfolio-seo { padding: 26px; }
  .portfolio-hero-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .comparison-stage { height: 40rem; }
  .demo-nav { padding: 18px 22px; }
  .demo-nav > span { display: none; }
  .demo-body { padding: 30px 22px; }
  .demo-body h3 { font-size: 2.2rem; }
  .demo-services { gap: 14px; margin-top: 26px; }
  .demo-services > span { font-size: .875rem; }
  .demo-services svg { display: none; }
  .comparison-controls { gap: 8px; }
  .comparison-controls > span { font-size: .75rem; }
  .faq-list details, .faq-list details:first-child { padding: 20px; }
  .faq-list summary { gap: 16px; }
}

/* Consistent motion on entry and exit, with the existing reduced-motion override. */
a, button, summary, .button, .theme-toggle, .menu-close, .copy-button,
.comparison-controls button, .faq-list details {
  transition: color .24s ease, background-color .24s ease, border-color .24s ease,
    box-shadow .24s ease, opacity .24s ease, transform .24s cubic-bezier(.22,1,.36,1);
}
.text-link > svg, .service-card .service-icon {
  transition: transform .28s cubic-bezier(.22,1,.36,1), color .24s ease, background-color .24s ease;
}
.text-link:hover > svg { transform: translateX(4px); }
.project-card, .detail-card, .backlink-card { transition: border-color .24s ease, box-shadow .28s ease, background-color .24s ease; }
.project-card:hover, .project-card:focus-within, .backlink-card:hover { border-color: var(--purple); box-shadow: 0 16px 40px -28px #8c52ff80; }
.faq-list summary:hover, .mobile-services summary:hover { color: var(--purple-dark); }
.prose a:hover, .faq-list a:hover, .principle a:hover { color: var(--ink); }
.principle p a { color: var(--purple-dark); text-decoration: underline; text-underline-offset: 3px; }
.service-card:hover .service-icon { transform: translateY(-3px); }
.comparison-controls button:hover { transform: translateY(-2px); }
.faq-section.soft { background: var(--soft); border-block: 1px solid var(--line); }
.faq-section.soft + .cta-section { padding-top: clamp(32px, 5vw, 64px); }

/* Both comparison layers determine height, avoiding clipping at larger text sizes. */
.comparison-stage { display: grid; height: auto; }
.comparison-design { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; }
.comparison-range { z-index: 3; }
.comparison-divider { z-index: 2; }
.demo-nav-note { padding: 5px 10px; border: 1px solid #8d829944; border-radius: 6px; }
.demo-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; }
.demo-copy { min-width: 0; }
.demo-copy h3 { font-size: clamp(2rem,3.5vw,3.25rem); }
.demo-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; font-size: .875rem; }
.demo-project-panel { padding: 24px; border: 1px solid #c1bbc9; background: #e4e1e8; }
.demo-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .75rem; letter-spacing: .08em; }
.demo-project-panel > strong { display: block; font-size: 1.6rem; line-height: 1.3; margin-block: 22px; }
.demo-task { display: flex; align-items: center; gap: 12px; padding-block: 16px; border-top: 1px solid #8d829944; }
.demo-task > span { font-size: .75rem; }
.demo-task > div { flex: 1; min-width: 0; }
.demo-task b { font-size: .875rem; font-weight: 500; }
.demo-task small { display: block; font-size: .875rem; letter-spacing: 0; }
.design-after .demo-project-panel { border-color: #665080; background: #2b203a; border-radius: 16px; box-shadow: 0 25px 40px -30px #0008; }
.design-after .demo-panel-top, .design-after .demo-task > span, .design-after .demo-task svg { color: #c5a5ff; }
.design-after .demo-task small { color: #c3b6d2; }
.design-before .demo-body h3 em { color: inherit; }
.demo-service-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 36px; }
.demo-service-cards > div { padding: 20px; border: 1px solid #c1bbc9; }
.demo-service-cards strong { display: block; margin-top: 12px; font-size: 1rem; }
.demo-service-cards p { font-size: .875rem; line-height: 1.6; margin-top: 8px; }
.design-after .demo-service-cards > div { border-radius: 12px; border-color: #493955; background: #211a2b; }
.design-after .demo-service-cards svg { color: #b38aff; }
.design-after .demo-service-cards p { color: #c3b6d2; }
.demo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #8d829944; font-size: .875rem; }
.demo-bottom > span { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .demo-hero-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .demo-project-panel { padding: 20px; }
  .demo-project-panel > strong { font-size: 1.35rem; }
  .demo-task { padding-block: 12px; }
  .demo-service-cards { grid-template-columns: minmax(0,1fr); }
  .demo-service-cards > div { padding: 16px; }
  .demo-service-cards strong { margin-top: 0; }
  .demo-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Animate only the ribbon layer; preserve the card and its blended backdrop. */
.hero-art { overflow: hidden; }
.hero-art > img { transform-origin: 50% 48%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art > img {
    animation: ribbon-drift 14s ease-in-out infinite;
    animation-play-state: paused;
  }
  .hero-art.is-moving > img { animation-play-state: running; }
}
@keyframes ribbon-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(7deg); }
  50% { transform: translateY(-12px) rotate(0deg); }
  75% { transform: translateY(-6px) rotate(-7deg); }
}
@media (max-width: 760px) {
  .hero-art > img { animation-name: ribbon-drift-mobile; }
}
@keyframes ribbon-drift-mobile {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(5deg); }
  50% { transform: translateY(-6px) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(-5deg); }
}

/* SEO service page: editorial hierarchy, shared edges, bespoke proposal. */
.seo-page { --seo-accent: #b995ff; }
.seo-page .breadcrumb { padding-bottom: 0; }
.seo-hero { padding-block: 48px 72px; }
.seo-hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 64px; }
.seo-hero-grid > *, .seo-outreach-grid > *, .seo-partnership-grid > * { min-width: 0; }
.seo-hero h1 { font-size: clamp(2.8rem, 4.5vw, 4.6rem); line-height: 1.13; letter-spacing: -.055em; margin: 0; }
.seo-page em { font-style: normal; color: var(--purple); }
.seo-hero-copy > p { max-width: 550px; margin-top: 28px; font-size: 1.04rem; line-height: 1.9; }
.seo-hero-foot { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); margin-top: 26px; }
.seo-hero-foot svg { color: var(--purple-dark); }
.seo-jumpnav { border-block: 1px solid var(--line); background: var(--surface); }
.seo-jumpnav .container { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.seo-jumpnav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px; font-size: .8rem; border-right: 1px solid var(--line); transition: color .24s, background-color .24s; }
.seo-jumpnav a:first-child { border-left: 1px solid var(--line); }
.seo-jumpnav a:hover, .seo-jumpnav a:focus-visible { color: var(--purple-dark); background: var(--hover-surface); }
.seo-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 42px; }
.seo-page h2 { font-size: clamp(2rem,3.05vw,3rem); line-height: 1.23; letter-spacing: -.045em; }
.seo-section-heading > p { max-width: 370px; font-size: .92rem; }
.seo-scope-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 20px; }
.seo-scope-card { grid-column: span 3; border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; background: var(--surface); transition: border-color .25s, background-color .25s, box-shadow .25s; }
.seo-scope-card:hover { border-color: var(--purple); background: var(--note-surface); box-shadow: 0 18px 35px -28px #8c52ff70; }
.seo-scope-featured { grid-column: span 6; padding: 34px; background: var(--featured-surface); }
.seo-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; color: var(--purple-dark); }
.seo-card-top span { font-size: .7rem; letter-spacing: .08em; color: var(--muted); }
.seo-scope-card h3 { font-size: 1.2rem; margin-bottom: 12px; letter-spacing: -.03em; }
.seo-scope-featured h3 { font-size: 1.6rem; }
.seo-scope-card > strong { font-size: .82rem; line-height: 1.7; font-weight: 550; }
.seo-scope-card > p { font-size: .84rem; line-height: 1.85; margin-top: 13px; margin-bottom: 24px; }
.seo-card-tags { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: .7rem; color: var(--purple-dark); }
.seo-roadmap { background: var(--soft); border-block: 1px solid var(--line); }
.seo-roadmap-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; list-style: none; padding: 0; margin: 54px 0 0; }
.seo-roadmap-grid li { padding-top: 22px; border-top: 1px solid var(--line); }
.seo-step-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--icon-surface); border: 1px solid var(--line); color: var(--purple-dark); border-radius: 50%; font-size: .8rem; margin-bottom: 22px; }
.seo-roadmap-grid h3 { font-size: 1.12rem; margin-bottom: 12px; }
.seo-roadmap-grid p { font-size: .875rem; }
.seo-outreach-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 90px; align-items: center; }
.seo-outreach h2 { margin-bottom: 24px; }
.seo-outreach-grid > div > p { max-width: 520px; font-size: .95rem; }
.seo-outreach-points { display: grid; gap: 25px; margin-top: 34px; }
.seo-outreach-points > div { display: flex; align-items: flex-start; gap: 18px; }
.seo-outreach-points svg { color: var(--purple-dark); margin-top: 4px; }
.seo-outreach-points h3 { font-size: .98rem; margin-bottom: 5px; }
.seo-outreach-points p { font-size: .85rem; }
.seo-proposal { padding: 42px; border-radius: 24px; background: linear-gradient(145deg,#472279,#7839cc); border: 1px solid #9c6ad2; color: #fff; box-shadow: 0 24px 54px -34px #4a2083a0; }
.seo-proposal-label { font-size: .62rem; letter-spacing: .15em; color: #e3cafb; }
.seo-proposal-symbol { display: flex; align-items: center; justify-content: center; margin-top: 36px; margin-bottom: 26px; width: 78px; height: 78px; border: 1px solid #ffffff35; border-radius: 22px; background: #ffffff0e; }
.seo-proposal h3 { font-size: clamp(2rem,3vw,2.8rem); line-height: 1.2; letter-spacing: -.04em; }
.seo-proposal > p { color: #eee3fc; font-size: .93rem; line-height: 1.8; margin-top: 22px; }
.seo-proposal ul { padding: 25px 0; margin: 25px 0; list-style: none; display: grid; gap: 14px; border-block: 1px solid #ffffff2e; }
.seo-proposal li { display: flex; align-items: flex-start; gap: 10px; font-size: .78rem; }
.seo-proposal .button { width: 100%; justify-content: space-between; }
.seo-proposal-note { display: block; text-align: center; font-size: .71rem; color: #e3cafb; margin-top: 16px; }
.seo-partnership { background: var(--featured-surface); border-block: 1px solid var(--line); }
.seo-partnership-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.seo-partnership-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; }
.seo-partnership-links .text-link { font-size: .8rem; }
.seo-page .faq-section.soft { background: var(--page); }
.seo-page .faq-list details { background: var(--surface); }
.seo-final { padding-block: clamp(32px, 5vw, 64px) 90px; }
.seo-final-inner { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 48px; border: 1px solid var(--line); border-radius: 24px; background: var(--soft); }
.seo-final-inner p { max-width: 580px; margin-top: 20px; font-size: .93rem; }
.seo-final-inner > .button { flex-shrink: 0; }
@media (max-width: 1100px) {
 .seo-hero-grid { gap: 38px; }
 .seo-scope-card { grid-column: span 6; }
 .seo-outreach-grid { gap: 48px; }
 .seo-proposal { padding: 32px; }
}
@media (max-width: 800px) {
 .seo-hero-grid, .seo-outreach-grid, .seo-partnership-grid { grid-template-columns: minmax(0,1fr); gap: 38px; }
 .seo-hero { padding-block: 32px 48px; }
 .seo-hero h1 { font-size: clamp(2.65rem,6.8vw,4rem); }
 .seo-hero-copy > p { max-width: 620px; }
 .seo-hero .hero-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
 .seo-jumpnav .container { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .seo-jumpnav a { padding: 17px 14px; }
 .seo-jumpnav a:nth-child(3) { border-left: 1px solid var(--line); }
 .seo-jumpnav a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
 .seo-section-heading { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
 .seo-section-heading > p { max-width: 600px; }
 .seo-roadmap-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 30px; }
 .seo-final { padding-bottom: 60px; }
 .seo-final-inner { padding: 32px; flex-direction: column; align-items: flex-start; gap: 26px; }
}
@media (max-width: 540px) {
 .seo-hero-copy > .eyebrow { font-size: .66rem; }
 .seo-hero-copy > p { font-size: .95rem; margin-top: 22px; }
 .seo-hero-foot { font-size: .72rem; align-items: flex-start; }
 .seo-page h2 { font-size: 2rem; }
 .seo-jumpnav a { font-size: .7rem; gap: 5px; padding-inline: 10px; }
 .seo-scope-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .seo-scope-card { grid-column: auto; padding: 26px; }
 .seo-scope-card h3, .seo-scope-featured h3 { font-size: 1.35rem; }
 .seo-roadmap-grid { gap: 28px 22px; }
 .seo-roadmap-grid h3 { font-size: 1rem; }
 .seo-roadmap-grid p { font-size: .81rem; }
 .seo-proposal { padding: 30px 26px; }
 .seo-partnership-links { gap: 22px; }
 .seo-final-inner { padding: 30px 24px; }
}
@media (max-width: 360px) {
 .seo-hero h1 { font-size: 2.45rem; }
 .seo-roadmap-grid { grid-template-columns: minmax(0,1fr); }
}

/* A lightweight, animated signal sculpture; all movement uses transform/opacity. */
.seo-signal {
 --signal-ink: #5d3295; --signal-line: #8757c12e; --signal-glass: #ffffffbf;
 position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 1.05;
 border-radius: 32px; border: 1px solid #cdb5ec73;
 background: radial-gradient(ellipse at 52% 47%, #d9c2ff99, transparent 63%), linear-gradient(145deg,#fcfaff,#f1e9fb 65%,#e7ddf6);
 box-shadow: 0 26px 65px -44px #6032a572, inset 0 1px 0 #fff;
 color: var(--signal-ink);
}
[data-theme="dark"] .seo-signal {
 --signal-ink: #dac2ff; --signal-line: #bd88ff35; --signal-glass: #342345db;
 background: radial-gradient(ellipse at 52% 47%, #5c308276, transparent 65%), linear-gradient(145deg,#251a31,#170f23 68%,#21152e);
 border-color: #593b7369; box-shadow: 0 26px 65px -44px #100619, inset 0 1px 0 #e7d0ff0c;
}
.seo-signal::before {
 content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
 background-image: radial-gradient(var(--signal-line) 1px,transparent 1px); background-size: 22px 22px;
 -webkit-mask-image: radial-gradient(ellipse,#000 15%,transparent 74%); mask-image: radial-gradient(ellipse,#000 15%,transparent 74%);
}
.seo-signal-label { position: absolute; left: 28px; top: 26px; font-size: .62rem; letter-spacing: .2em; font-weight: 650; opacity: .8; }
.seo-signal-spark { position: absolute; right: 28px; top: 25px; color: var(--signal-ink); opacity: .7; }
.seo-signal-stage { position: absolute; width: 92%; aspect-ratio: 1; top: 52%; left: 50%; transform: translate(-50%,-50%); }
.seo-signal-halo { position: absolute; width: 68%; aspect-ratio: 1; left: 16%; top: 16%; border-radius: 50%; background: radial-gradient(circle,#a765ef40,transparent 67%); animation: signal-glow 6s ease-in-out infinite; }
.seo-signal-wave { position: absolute; inset: 12%; border: 1px solid var(--signal-line); box-shadow: inset 0 0 18px #a679df07; border-radius: 50%; opacity: .5; animation: signal-expand 6s cubic-bezier(.2,.55,.35,1) infinite; }
.seo-signal-wave.wave-two { animation-delay: -2s; }
.seo-signal-wave.wave-three { animation-delay: -4s; }
.seo-signal-track { position: absolute; inset: 14%; border: 1px solid var(--signal-line); border-radius: 50%; transform: rotate(-30deg) scaleY(.6); }
.seo-signal-track.track-two { transform: rotate(42deg) scaleY(.6); opacity: .65; }
.seo-signal-comet { position: absolute; inset: 12%; border-radius: 50%; animation: signal-orbit 24s linear infinite; }
.seo-signal-comet::before { content: ''; position: absolute; width: 7px; height: 7px; top: 50%; left: -3px; background: #a16aef; border-radius: 50%; box-shadow: 0 0 14px #b187ff; }
.seo-signal-comet.comet-two { inset: 23%; animation-duration: 30s; animation-direction: reverse; opacity: .6; }
.seo-signal-comet.comet-two::before { width: 4px; height: 4px; }
.seo-signal-center { position: absolute; inset: 33%; perspective: 650px; z-index: 3; }
.seo-signal-tile {
 width: 100%; height: 100%; position: relative; display: grid; place-items: center; border-radius: 29%;
 background: linear-gradient(145deg,#c797ff 0%,#9656e6 27%,#7035bf 63%,#482080 100%);
 border: 1px solid #d7b6ff; box-shadow: inset 2px 2px 0 #ffffff50,inset -3px -4px 0 #32105a75, 12px 20px 26px -14px #57227c90;
 transform: rotateX(12deg) rotateY(-14deg) rotateZ(-10deg); animation: signal-levitate 7s ease-in-out infinite;
}
.seo-signal-tile::before { content: ''; position: absolute; inset: 8%; border-radius: 23%; border: 1px solid #e6cfff4d; background: linear-gradient(145deg,#ffffff1c,transparent 54%); }
.seo-signal-tile > svg { position: relative; width: 62%; height: 62%; color: #fff; filter: drop-shadow(0 4px 2px #47207660); }
.seo-signal-satellite { position: absolute; z-index: 4; width: 14%; aspect-ratio: 1; }
.seo-signal-satellite > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 27%; background: var(--signal-glass); border: 1px solid var(--signal-line); box-shadow: 0 10px 24px -17px #56228696,inset 0 1px 0 #ffffff38; animation: signal-hover 6s ease-in-out infinite; }
.seo-signal-satellite svg { width: 46%; height: 46%; }
.satellite-code { left: 20%; top: 13%; transform: rotate(-9deg); }
.satellite-file { right: 11%; top: 29%; transform: rotate(9deg); }
.satellite-file > span { animation-delay: -1.5s; }
.satellite-chart { right: 24%; bottom: 12%; transform: rotate(-7deg); }
.satellite-chart > span { animation-delay: -3s; }
.satellite-globe { left: 9%; bottom: 30%; transform: rotate(8deg); }
.satellite-globe > span { animation-delay: -4.5s; }
.seo-signal-detail { position: absolute; bottom: 25px; left: 28px; right: 28px; display: flex; align-items: center; gap: 7px; }
.seo-signal-detail::before { content: ''; width: 24px; height: 2px; border-radius: 2px; background: #9d6add; }
.seo-signal-detail span { width: 4px; height: 4px; border-radius: 50%; background: #af83e7; opacity: .6; }
.seo-signal-detail::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,var(--signal-line),transparent); margin-left: 8px; }
.seo-signal:not(.is-moving) *, .seo-signal:not(.is-moving) *::before { animation-play-state: paused; }
@keyframes signal-expand {
 0% { transform: scale(.44); opacity: 0; }
 18% { opacity: .8; }
 82% { opacity: .24; }
 100% { transform: scale(1.32); opacity: 0; }
}
@keyframes signal-levitate {
 0%,100% { transform: translateY(4px) rotateX(12deg) rotateY(-14deg) rotateZ(-10deg); }
 50% { transform: translateY(-7px) rotateX(4deg) rotateY(7deg) rotateZ(-4deg); }
}
@keyframes signal-hover { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-5px); } }
@keyframes signal-orbit { to { transform: rotate(360deg); } }
@keyframes signal-glow { 0%,100% { opacity: .5; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@media (max-width: 800px) { .seo-signal { aspect-ratio: 1.16; } .seo-signal-stage { width: 80%; } }
@media (max-width: 540px) {
 .seo-signal { aspect-ratio: 1.02; border-radius: 24px; }
 .seo-signal-stage { width: 94%; top: 53%; }
 .seo-signal-label { top: 22px; left: 22px; font-size: .55rem; }
 .seo-signal-spark { top: 20px; right: 22px; }
 .seo-signal-detail { bottom: 21px; left: 22px; right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
 .seo-signal *, .seo-signal *::before { animation: none !important; }
 .seo-signal-wave { transform: scale(1.05); opacity: .45; }
 .seo-signal-wave.wave-two { transform: scale(.78); opacity: .3; }
 .seo-signal-wave.wave-three { transform: scale(.55); opacity: .2; }
}

/* Refined SEO sections: visual service stories and a clear project timeline. */
.seo-page .section { padding-block: clamp(64px,7.2vw,104px); }
.seo-page h2 { text-wrap: balance; }
.seo-intro-strip { background: var(--featured-surface); border-bottom: 1px solid var(--line); padding-block: 27px; }
.seo-intro-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.seo-intro-strip p { font-size: .95rem; line-height: 1.5; color: var(--ink); }
.seo-intro-strip p > span { display: block; color: var(--purple-dark); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 10px; }
.seo-intro-strip strong { display: block; font-weight: 600; }
.seo-intro-strip ul { display: flex; flex-wrap: wrap; gap: 20px 38px; list-style: none; padding: 0; margin: 0; }
.seo-intro-strip li { display: flex; align-items: center; gap: 11px; font-size: .79rem; }
.seo-intro-strip svg { color: var(--purple-dark); }
.seo-scope-grid { gap: 22px; }
.seo-scope-card { position: relative; overflow: hidden; border-radius: 22px; transition: transform .3s, border-color .3s, background-color .3s, box-shadow .3s; }
.seo-scope-featured { background: linear-gradient(155deg,var(--surface),var(--featured-surface)); }
.seo-card-top { margin-bottom: 23px; }
.seo-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; border: 1px solid var(--line); color: var(--purple-dark) !important; background: var(--icon-surface); }
.seo-scope-art { height: 138px; position: relative; display: flex; align-items: center; justify-content: center; margin: -5px 0 28px; color: var(--purple-dark); background: radial-gradient(ellipse,var(--icon-surface),transparent 70%); }
.seo-mini-page { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; width: 95px; height: 118px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 5px 12px 25px -18px #7840be7a; transform: rotate(-7deg); transition: transform .5s; }
.seo-mini-page i { height: 3px; width: 40px; background: var(--line); border-radius: 2px; }
.seo-mini-page i:last-child { width: 27px; align-self: flex-start; margin-left: 27px; }
.seo-mini-path { width: 75px; height: 1px; background: linear-gradient(90deg,var(--purple),var(--line)); position: relative; }
.seo-mini-path::after { content: ''; position: absolute; left: 48%; top: -3px; width: 7px; height: 7px; background: var(--purple); border-radius: 50%; box-shadow: 0 0 14px #b381ef80; }
.seo-mini-stack { display: flex; flex-direction: column; gap: 10px; }
.seo-mini-stack > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.content-art { flex-direction: column; gap: 12px; }
.seo-mini-search { width: min(90%,260px); display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); transform: rotate(-3deg); transition: transform .5s; }
.seo-mini-search > i { height: 4px; width: 48%; background: var(--line); border-radius: 5px; }
.seo-mini-search > span { margin-left: auto; }
.seo-mini-document { position: relative; width: min(80%,220px); padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transform: rotate(3deg); transition: transform .5s; }
.seo-mini-document i { display: block; width: 66%; height: 3px; margin-bottom: 7px; border-radius: 2px; background: var(--line); }
.seo-mini-document i:first-child { background: var(--purple); width: 38%; }
.seo-mini-document i:last-of-type { width: 52%; margin-bottom: 0; }
.seo-mini-document > span { position: absolute; right: 15px; top: 19px; }
.seo-scope-caption { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; padding-top: 25px; border-top: 1px solid var(--line); }
.seo-scope-caption svg { color: var(--purple-dark); margin-top: 3px; }
.seo-scope-caption p { font-size: .82rem; max-width: 780px; }
.seo-scope-caption a { text-decoration: underline; text-underline-offset: 4px; transition: color .2s; }
.seo-scope-caption a:hover { color: var(--purple-dark); }
.seo-roadmap { background: radial-gradient(ellipse at 8% 18%,#46276280,transparent 60%),#1b1325; color: #f8f2ff; border-color: #3f2c50; }
.seo-roadmap-layout { display: grid; grid-template-columns: 1fr 1.12fr; gap: 80px; align-items: start; }
.seo-roadmap-intro .eyebrow { color: #c7a1fc; }
.seo-roadmap-intro h2 em { color: #c7a1fc; }
.seo-roadmap-intro > p { font-size: .95rem; color: #c9bad6; margin-top: 25px; max-width: 380px; }
.seo-process-seal { display: flex; align-items: center; gap: 15px; margin-block: 34px; }
.seo-process-seal > svg { box-sizing: content-box; padding: 16px; border-radius: 17px; background: #b77df411; border: 1px solid #a17fc03d; color: #c6a1f8; }
.seo-process-seal strong, .seo-process-seal span { display: block; font-size: .8rem; }
.seo-process-seal strong { font-weight: 600; }
.seo-process-seal span { color: #c9bad6; margin-top: 4px; }
.seo-roadmap-intro .text-link { color: #d1b5fc; font-size: .86rem; }
.seo-roadmap-grid { display: block; margin: 0; }
.seo-roadmap-grid li { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 22px; border: none; padding: 0 0 38px; }
.seo-roadmap-grid li:not(:last-child)::before { content: ''; position: absolute; top: 46px; bottom: 0; left: 22px; width: 1px; background: linear-gradient(#9969c78a,#5a3c733d); }
.seo-roadmap-grid li:last-child { padding-bottom: 0; }
.seo-roadmap .seo-step-number { position: relative; z-index: 1; margin: 0; width: 46px; height: 46px; background: #31213f; border-color: #6b4985; color: #dbc2fc; box-shadow: 0 0 0 6px #1e152a; }
.seo-roadmap-grid h3 { font-size: 1.3rem; padding-top: 5px; margin-bottom: 10px; }
.seo-roadmap-grid p { color: #c9bad6; font-size: .88rem; max-width: 430px; }
.seo-step-output { display: flex; gap: 8px; align-items: center; color: #d3b1ff; font-size: .72rem; margin-top: 14px; }
.seo-outreach-points > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.seo-outreach-points { gap: 0; margin-top: 24px; }
.seo-outreach-points > div:first-child { border-top: 1px solid var(--line); }
.seo-outreach-points > div > svg { box-sizing: content-box; padding: 10px; background: var(--icon-surface); border: 1px solid var(--line); border-radius: 12px; margin-top: 0; }
.seo-proposal { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at top right,#ae68ed50,transparent 60%),linear-gradient(150deg,#402363,#7135b7); }
.seo-proposal::before, .seo-proposal::after { content: ''; position: absolute; z-index: -1; width: 310px; height: 310px; border: 1px solid #e7c8ff1f; border-radius: 50%; right: -160px; top: 35px; }
.seo-proposal::after { width: 390px; height: 390px; right: -200px; top: -5px; }
.seo-proposal-symbol { transform: rotate(-7deg); box-shadow: 7px 9px 25px -15px #0e071c; }
.seo-partnership { background: var(--featured-surface); }
.seo-business-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.seo-business-card { position: relative; display: flex; flex-direction: column; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .3s; }
.seo-business-icon { display: grid; place-items: center; width: 64px; height: 64px; color: var(--purple-dark); background: var(--icon-surface); border: 1px solid var(--line); border-radius: 21px; transform: rotate(-6deg); margin-bottom: 30px; transition: transform .4s; }
.seo-business-card h3 { font-size: 1.22rem; letter-spacing: -.03em; margin-bottom: 17px; }
.seo-business-card p { font-size: .86rem; line-height: 1.9; margin-bottom: 27px; }
.seo-business-focus { margin-top: auto; border-top: 1px solid var(--line); padding-top: 18px; color: var(--purple-dark); font-size: .73rem; }
.seo-delivery { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 42px; padding-top: 38px; border-top: 1px solid var(--line); align-items: center; }
.seo-delivery .eyebrow { font-size: .65rem; margin-bottom: 13px; }
.seo-delivery h3 { font-size: 1.5rem; letter-spacing: -.04em; margin-bottom: 13px; }
.seo-delivery p { font-size: .86rem; max-width: 470px; }
.seo-delivery ul { list-style: none; display: grid; gap: 15px; padding: 0; margin: 0; }
.seo-delivery li { display: flex; gap: 12px; align-items: flex-start; font-size: .83rem; }
.seo-delivery svg { color: var(--purple-dark); margin-top: 3px; }
.seo-page .faq-list details { border-radius: 15px; margin-bottom: 12px; padding: 22px 24px; border: 1px solid var(--line); transition: border-color .25s, background-color .25s, box-shadow .25s; }
.seo-page .faq-list details[open] { background: var(--featured-surface); border-color: var(--purple); box-shadow: 0 15px 30px -28px #62389490; }
.seo-page .faq-list summary { font-size: .9rem; line-height: 1.65; }
.seo-page .faq-list details p { padding-right: 0; }
.seo-page .faq-list details:last-child { margin-bottom: 0; }
.seo-final-inner { position: relative; isolation: isolate; overflow: hidden; border-color: #8354b9; background: radial-gradient(ellipse at 85% 10%,#8751c650,transparent 65%),linear-gradient(135deg,#301f48,#5d3391); color: #fff; padding: clamp(30px,4vw,56px); }
.seo-final-inner::before, .seo-final-inner::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; border: 1px solid #dfb6ff20; width: 430px; height: 430px; right: -180px; bottom: -250px; }
.seo-final-inner::after { width: 540px; height: 540px; right: -235px; bottom: -305px; }
.seo-final-inner .eyebrow { color: #dac1fc; font-size: .68rem; }
.seo-final-inner h2 { font-size: clamp(1.9rem,3vw,3rem); }
.seo-final-inner p { color: #e4d5f5; }
.seo-final-actions { flex-shrink: 0; }
.seo-final-actions > span { display: block; font-size: .72rem; color: #dcc8f3; margin-top: 16px; text-align: center; }
@media (hover: hover) {
 .seo-scope-card:hover, .seo-business-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: 0 18px 36px -29px #6842b284; }
 .seo-scope-card:hover .seo-mini-page { transform: translateY(-3px) rotate(-2deg); }
 .seo-scope-card:hover .seo-mini-search, .seo-scope-card:hover .seo-mini-document { transform: rotate(0); }
 .seo-business-card:hover .seo-business-icon { transform: rotate(0) translateY(-3px); }
 .seo-page .faq-list details:hover { border-color: var(--purple); }
}
@media (max-width: 1100px) {
 .seo-roadmap-layout { gap: 45px; }
 .seo-intro-strip ul { gap: 15px 24px; }
 .seo-business-card { padding: 26px; }
 .seo-final-inner { gap: 28px; }
}
@media (max-width: 800px) {
 .seo-intro-strip .container { align-items: flex-start; flex-direction: column; gap: 24px; }
 .seo-intro-strip strong { display: inline; }
 .seo-intro-strip ul { gap: 18px 25px; }
 .seo-roadmap-layout { grid-template-columns: minmax(0,1fr); gap: 44px; }
 .seo-roadmap-intro > p { max-width: 580px; }
 .seo-roadmap-intro .text-link { margin-top: 0; }
 .seo-business-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .seo-business-card { display: grid; grid-template-columns: 66px minmax(0,1fr); column-gap: 25px; }
 .seo-business-icon { grid-row: span 3; margin: 0; }
 .seo-business-card p { margin-bottom: 18px; }
 .seo-business-focus { grid-column: 2; }
 .seo-delivery { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .seo-final-inner { align-items: flex-start; }
}
@media (max-width: 540px) {
 .seo-intro-strip ul { display: grid; gap: 17px; }
 .seo-intro-strip li { font-size: .79rem; }
 .seo-card-top { margin-bottom: 21px; }
 .seo-scope-art { height: 126px; margin-bottom: 24px; }
 .seo-scope-card > p { font-size: .86rem; }
 .seo-roadmap-grid li { gap: 19px; padding-bottom: 32px; }
 .seo-roadmap-grid h3 { font-size: 1.14rem; }
 .seo-roadmap-grid p { font-size: .85rem; }
 .seo-step-output { align-items: flex-start; font-size: .7rem; }
 .seo-business-card { display: flex; padding: 28px; }
 .seo-business-icon { margin-bottom: 26px; }
 .seo-page .faq-list details { padding: 20px; }
 .seo-page .faq-list summary { font-size: .875rem; }
 .seo-final-actions { width: 100%; }
 .seo-final-actions > .button { width: 100%; justify-content: space-between; }
}

/* Service and home experiences share the brand grid and existing SEO motion language. */
.studio-page .section, .studio-home .section { padding-block: clamp(64px,7.2vw,104px); }
.studio-page em, .studio-home .section-top em { font-style: normal; color: var(--purple); }
.studio-page h2, .studio-home h2 { font-size: clamp(2rem,3.05vw,3rem); line-height: 1.23; letter-spacing: -.045em; text-wrap: balance; }
.studio-page .section-top > p { font-size: .94rem; max-width: 370px; }
.studio-hero { padding-block: 42px 70px; }
.studio-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: center; }
.studio-hero-grid > *, .studio-focus-grid > *, .studio-related-card > * { min-width: 0; }
.studio-hero h1 { font-size: clamp(2.7rem,4.35vw,4.5rem); line-height: 1.15; letter-spacing: -.05em; text-wrap: balance; }
.studio-hero-grid > div > p { font-size: 1.02rem; line-height: 1.9; margin-top: 26px; max-width: 560px; }
.studio-hero-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; color: var(--muted); font-size: .78rem; }
.studio-hero-note svg { color: var(--purple-dark); margin-top: 3px; }
.studio-jumpnav { background: var(--surface); border-block: 1px solid var(--line); }
.studio-jumpnav .container { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.studio-jumpnav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 20px; font-size: .8rem; border-right: 1px solid var(--line); transition: background-color .25s,color .25s; }
.studio-jumpnav a:first-child { border-left: 1px solid var(--line); }
.studio-jumpnav a:hover { color: var(--purple-dark); background: var(--hover-surface); }
.studio-scope-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.studio-scope-card { position: relative; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); transition: transform .3s,border-color .3s,box-shadow .3s; }
.studio-scope-card:first-child { background: linear-gradient(140deg,var(--surface),var(--featured-surface)); }
.studio-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 29px; }
.studio-card-top > span { display: grid; place-items: center; width: 53px; height: 53px; border-radius: 17px; background: var(--icon-surface); color: var(--purple-dark); border: 1px solid var(--line); transform: rotate(-5deg); transition: transform .4s; }
.studio-card-top small { color: var(--muted); font-size: .68rem; }
.studio-scope-card h3 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 18px; }
.studio-scope-card p { font-size: .89rem; line-height: 1.9; }
.studio-focus { background: var(--featured-surface); border-block: 1px solid var(--line); }
.studio-focus-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.studio-focus-grid > div > p { margin-top: 27px; font-size: .97rem; line-height: 1.95; }
.studio-focus-grid .text-link { font-size: .84rem; margin-top: 29px; }
.studio-delivery-card { padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 26px 46px -38px #62428560; }
.studio-delivery-heading { display: flex; gap: 15px; align-items: center; }
.studio-delivery-heading svg { color: var(--purple-dark); }
.studio-delivery-heading h3 { font-size: 1.25rem; line-height: 1.4; }
.studio-focus-grid .studio-delivery-card > p { font-size: .87rem; margin-top: 18px; }
.studio-delivery-card ul { list-style: none; padding: 26px 0; margin: 25px 0 0; border-top: 1px solid var(--line); display: grid; gap: 19px; }
.studio-delivery-card li { display: flex; align-items: flex-start; gap: 11px; font-size: .87rem; }
.studio-delivery-card li svg { color: var(--purple-dark); margin-top: 3px; }
.studio-delivery-note { display: block; padding-top: 19px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--muted); }
.studio-process .seo-roadmap-intro h2 em { color: #c7a1fc; }
.studio-case-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; }
.studio-case { border-top: 1px solid var(--line); padding-top: 28px; }
.studio-case > span { display: grid; place-items: center; width: 65px; height: 65px; margin-bottom: 26px; background: var(--icon-surface); border: 1px solid var(--line); border-radius: 21px; color: var(--purple-dark); }
.studio-case h3 { font-size: 1.3rem; margin-bottom: 16px; }
.studio-case p { font-size: .9rem; }
.studio-related { background: var(--soft); border-block: 1px solid var(--line); }
.studio-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.studio-related-card { display: flex; gap: 20px; align-items: flex-start; padding: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: 20px; transition: border-color .25s,box-shadow .25s; }
.studio-related-icon { display: grid; place-items: center; padding: 13px; border-radius: 15px; background: var(--icon-surface); color: var(--purple-dark); }
.studio-related-card h3 { font-size: 1.2rem; line-height: 1.35; margin-bottom: 13px; }
.studio-related-card p { font-size: .85rem; }
.studio-related-arrow { flex-shrink: 0; color: var(--purple-dark); transition: transform .3s; margin-left: auto; }
.studio-final { padding-block: clamp(32px,5vw,64px) 80px; }
.studio-page .faq-list details, .studio-home .faq-list details { padding: 22px 24px; border: 1px solid var(--line); border-radius: 15px; margin-bottom: 12px; background: var(--surface); transition: border-color .25s,background-color .25s; }
.studio-page .faq-list details[open], .studio-home .faq-list details[open] { background: var(--featured-surface); border-color: var(--purple); }
.studio-page .faq-list summary, .studio-home .faq-list summary { font-size: .9rem; line-height: 1.65; }
.studio-page .faq-list details p, .studio-home .faq-list details p { padding-right: 0; }
.studio-page .faq-list details:last-child, .studio-home .faq-list details:last-child { margin-bottom: 0; }
.studio-visual { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.04; border: 1px solid var(--line); border-radius: 32px; background: radial-gradient(ellipse at 50% 50%,#c497f52b,transparent 70%),linear-gradient(145deg,var(--surface),var(--featured-surface)); box-shadow: 0 26px 65px -45px #6839996b; color: var(--purple-dark); }
.studio-visual::before { content: ''; position: absolute; inset: 11%; border: 1px solid var(--line); border-radius: 50%; opacity: .7; }
.studio-visual::after { content: ''; position: absolute; inset: 22%; border: 1px dashed var(--line); border-radius: 50%; z-index: -1; }
.studio-art-label { position: absolute; left: 27px; top: 25px; font-size: .59rem; letter-spacing: .18em; color: var(--purple-dark); }
.studio-art-spark { position: absolute; right: 26px; top: 24px; }
.studio-art-stage { position: absolute; width: 88%; aspect-ratio: 1; left: 50%; top: 53%; transform: translate(-50%,-50%); }
.studio-art-foot { position: absolute; bottom: 25px; left: 27px; right: 27px; display: flex; align-items: center; gap: 8px; }
.studio-art-foot span { width: 24px; height: 2px; background: var(--purple); border-radius: 4px; }
.studio-art-foot i { width: 4px; height: 4px; background: var(--purple); border-radius: 50%; opacity: .4; }
.studio-web-window { position: absolute; width: 77%; left: 8%; top: 19%; aspect-ratio: 1.3; border: 1px solid var(--field-border); border-radius: 17px; background: var(--surface); box-shadow: 12px 22px 32px -20px #62417b75; transform: rotate(-7deg); }
.studio-browser-dots { height: 12%; min-height: 24px; display: flex; gap: 5px; align-items: center; padding-inline: 12px; border-bottom: 1px solid var(--line); }
.studio-browser-dots i { width: 4px; height: 4px; background: var(--purple); opacity: .45; border-radius: 50%; }
.studio-web-content { display: flex; gap: 12%; height: 53%; padding: 8% 9% 0; }
.studio-web-lines { width: 48%; display: flex; flex-direction: column; gap: 9%; padding-top: 5%; }
.studio-web-lines i { height: 5%; min-height: 3px; border-radius: 2px; background: var(--field-border); }
.studio-web-lines i:first-child { height: 9%; width: 80%; background: var(--purple); }
.studio-web-lines i:nth-child(3) { width: 72%; }
.studio-web-lines b { height: 20%; width: 59%; background: #8c52ff; border-radius: 5px; margin-top: 8%; }
.studio-web-shape { width: 43%; aspect-ratio: 1; display: grid; place-items: center; background: var(--icon-surface); border-radius: 15px; }
.studio-web-shape > span { width: 65%; aspect-ratio: 1; border: 14px solid #a774ed; border-radius: 30%; transform: rotate(35deg); box-shadow: inset 4px 4px 0 #dec0ff,4px 4px 0 #6f399c; }
.studio-web-tiles { display: flex; gap: 8%; height: 27%; padding: 8% 9% 0; }
.studio-web-tiles i { flex: 1; border-radius: 5px; background: var(--icon-surface); border: 1px solid var(--line); }
.studio-phone { position: absolute; width: 23%; aspect-ratio: .53; right: 6%; top: 42%; background: var(--surface); border: 3px solid var(--purple-dark); border-radius: 16px; box-shadow: 7px 12px 24px -12px #562b8999; padding: 10% 5% 5%; transform: rotate(9deg); }
.studio-phone > i { position: absolute; top: 6%; left: 36%; right: 36%; height: 3%; background: var(--purple-dark); border-radius: 5px; }
.studio-phone-shape { position: absolute; width: 63%; aspect-ratio: 1; top: 22%; left: 18%; background: linear-gradient(140deg,#bf8dff,#7339b3); border-radius: 30% 50% 40% 50%; transform: rotate(-15deg); }
.studio-phone > span { position: absolute; left: 19%; right: 19%; height: 3%; top: 69%; background: var(--field-border); border-radius: 2px; }
.studio-phone > span + span { top: 77%; right: 32%; }
.studio-phone > b { position: absolute; bottom: 9%; left: 19%; right: 19%; height: 6%; background: var(--purple); border-radius: 4px; }
.studio-art-chip { position: absolute; display: grid; place-items: center; width: 15%; aspect-ratio: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 25%; box-shadow: 0 15px 28px -20px #643a898c; }
.studio-chip-code { top: 3%; right: 14%; transform: rotate(8deg); }
.studio-chip-pointer { bottom: 13%; left: 14%; transform: rotate(-9deg); }
.studio-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--field-border); }
.studio-flow-pulse { color: var(--purple); stroke-dasharray: 12 230; animation: studio-data-flow 7s linear infinite; }
.studio-flow-core { position: absolute; left: 36%; top: 35%; width: 29%; aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(135deg,#b383fa,#7b45c6 55%,#52287e); border: 1px solid #c8a1f8; color: white; border-radius: 28%; box-shadow: inset 2px 2px 0 #ffffff33,inset -3px -4px 0 #30144766,10px 18px 24px -15px #5e347a8c; transform: rotate(-9deg); }
.studio-flow-core svg { width: 52%; height: 52%; }
.studio-flow-node { position: absolute; display: grid; place-items: center; width: 15%; aspect-ratio: 1; background: var(--surface); border: 1px solid var(--field-border); border-radius: 26%; box-shadow: 0 12px 24px -19px #4a27639e; }
.flow-node-a { left: 10%; top: 18%; transform: rotate(-9deg); }
.flow-node-b { right: 10%; top: 17%; transform: rotate(9deg); }
.flow-node-c { left: 10%; bottom: 17%; transform: rotate(7deg); }
.flow-node-d { right: 11%; bottom: 17%; transform: rotate(-7deg); }
.studio-flow-caption { position: absolute; top: 6%; left: 42%; display: flex; gap: 6px; }
.studio-flow-caption i { width: 4px; height: 4px; border-radius: 50%; background: var(--purple); opacity: .4; }
.studio-social-post { position: absolute; width: 55%; aspect-ratio: .79; left: 20%; top: 12%; padding: 5%; border-radius: 18px; border: 1px solid var(--field-border); background: var(--surface); box-shadow: 11px 22px 30px -18px #5c347b70; transform: rotate(-5deg); }
.studio-social-back { position: absolute; width: 49%; aspect-ratio: .77; top: 11%; left: 24%; background: var(--icon-surface); border: 1px solid var(--field-border); border-radius: 18px; transform: rotate(10deg); }
.studio-post-profile { display: flex; align-items: center; gap: 9px; height: 12%; margin-bottom: 10%; }
.studio-post-profile i { height: 100%; aspect-ratio: 1; background: var(--purple); border-radius: 50%; opacity: .5; }
.studio-post-profile span { width: 41%; height: 4px; border-radius: 2px; background: var(--field-border); }
.studio-post-profile b { margin-left: auto; width: 3px; height: 3px; background: var(--muted); border-radius: 50%; }
.studio-post-art { position: relative; height: 53%; border-radius: 11px; background: linear-gradient(135deg,#ac76e7,#7744b3); overflow: hidden; }
.studio-post-art span { position: absolute; width: 85%; aspect-ratio: 1; border: 19px solid #dbc0fc; border-radius: 34%; left: 22%; top: 15%; transform: rotate(40deg); box-shadow: inset 4px 2px 0 #ad79e6,5px 5px 0 #663893; }
.studio-post-art i { position: absolute; width: 30%; aspect-ratio: 1; background: #bc8fed; border-radius: 50%; top: -11%; left: -8%; }
.studio-post-actions { display: flex; align-items: center; gap: 8px; margin-top: 9%; }
.studio-post-actions i { width: 10px; height: 13px; border: 1px solid var(--purple); margin-left: auto; }
.studio-post-lines { margin-top: 9%; display: grid; gap: 7px; }
.studio-post-lines i { height: 3px; width: 81%; background: var(--line); border-radius: 2px; }
.studio-post-lines i:last-child { width: 53%; }
.studio-calendar { position: absolute; width: 32%; aspect-ratio: 1.05; right: 2%; bottom: 11%; padding: 5%; border: 1px solid var(--field-border); background: var(--surface); border-radius: 16px; transform: rotate(9deg); box-shadow: 8px 14px 24px -16px #4d2a6b80; }
.studio-calendar > span { display: block; margin-bottom: 15%; }
.studio-calendar > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.studio-calendar i { aspect-ratio: 1; background: var(--icon-surface); border: 1px solid var(--line); border-radius: 3px; }
.studio-calendar i.scheduled { background: var(--purple); border-color: var(--purple); opacity: .7; }
.studio-chip-message { left: 3%; bottom: 24%; transform: rotate(-13deg); }
.studio-chip-bolt { top: 4%; right: 11%; transform: rotate(12deg); }
.studio-float { animation: studio-levitate 7s ease-in-out infinite; }
.studio-float-slow { animation: studio-levitate 8s ease-in-out -3s infinite; }
.studio-visual:not(.is-moving) *, .studio-visual:not(.is-moving) *::before { animation-play-state: paused; }
@keyframes studio-levitate { 0%,100% { translate: 0 4px; } 50% { translate: 0 -7px; } }
@keyframes studio-data-flow { to { stroke-dashoffset: -484; } }
@media (hover: hover) {
 .studio-scope-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: 0 18px 34px -28px #7a42ab78; }
 .studio-scope-card:hover .studio-card-top > span { transform: rotate(0); }
 .studio-related-card:hover { border-color: var(--purple); box-shadow: 0 16px 28px -26px #63339080; }
 .studio-related-card:hover .studio-related-arrow { transform: translate(3px,-3px); }
 .studio-page .faq-list details:hover, .studio-home .faq-list details:hover { border-color: var(--purple); }
}
@media (max-width: 1100px) {
 .studio-hero-grid { gap: 40px; }
 .studio-scope-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .studio-focus-grid { gap: 40px; }
 .studio-scope-card { padding: 28px; }
 .studio-related-card { padding: 25px; gap: 16px; }
}
@media (max-width: 800px) {
 .studio-hero-grid, .studio-focus-grid { grid-template-columns: minmax(0,1fr); gap: 38px; }
 .studio-hero { padding-block: 30px 48px; }
 .studio-hero h1 { font-size: clamp(2.65rem,6.7vw,4rem); }
 .studio-hero .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
 .studio-visual { aspect-ratio: 1.15; }
 .studio-art-stage { width: 78%; }
 .studio-jumpnav .container { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .studio-jumpnav a { padding: 17px 14px; }
 .studio-jumpnav a:nth-child(3) { border-left: 1px solid var(--line); }
 .studio-jumpnav a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
 .studio-case-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .studio-related-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .studio-final { padding-bottom: 60px; }
}
@media (max-width: 540px) {
 .studio-hero h1 { font-size: clamp(2.35rem,9.1vw,3rem); }
 .studio-hero-grid > div > p { font-size: .97rem; }
 .studio-page .section-top > p { max-width: none; font-size: .89rem; }
 .studio-hero-note { font-size: .72rem; }
 .studio-visual { aspect-ratio: 1.04; border-radius: 24px; }
 .studio-art-label { left: 22px; top: 23px; font-size: .53rem; }
 .studio-art-stage { width: 94%; }
 .studio-art-spark { top: 21px; right: 22px; }
 .studio-art-foot { left: 22px; bottom: 22px; }
 .studio-art-chip svg, .studio-flow-node svg { width: 48%; height: 48%; }
 .studio-web-shape > span { border-width: 10px; }
 .studio-post-art span { border-width: 13px; }
 .studio-post-actions svg { width: 15px; height: 15px; }
 .studio-calendar { padding: 4%; }
 .studio-calendar > span svg { width: 15px; height: 15px; }
 .studio-calendar > div { gap: 3px; }
 .studio-jumpnav a { font-size: .72rem; padding-inline: 11px; }
 .studio-scope-grid { grid-template-columns: minmax(0,1fr); gap: 17px; }
 .studio-scope-card { padding: 27px; }
 .studio-delivery-card { padding: 28px; }
 .studio-page h2, .studio-home h2 { font-size: 2rem; }
 .studio-related-card { padding: 24px; gap: 14px; }
 .studio-related-icon { padding: 10px; }
 .studio-related-icon svg { width: 20px; height: 20px; }
 .studio-related-card h3 { font-size: 1.07rem; }
 .studio-related-card p { font-size: .82rem; }
 .studio-page .faq-list details, .studio-home .faq-list details { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .studio-visual *, .studio-visual *::before { animation: none !important; } }

/* Home: meaningful service groups, connected capabilities, and clear project paths. */
.studio-home .capability-strip { background: var(--featured-surface); border-block: 1px solid var(--line); }
.home-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.studio-home .home-service-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 25px; padding: 38px; min-height: 0; background: var(--surface); display: flex; flex-direction: column; }
.home-service-card::before { content: ''; position: absolute; z-index: -1; right: -55px; top: -55px; width: 170px; height: 170px; border: 1px solid var(--line); border-radius: 50%; opacity: .7; }
.home-service-card::after { content: ''; position: absolute; z-index: -1; right: -85px; top: -85px; width: 230px; height: 230px; border: 1px solid var(--line); border-radius: 50%; opacity: .4; }
.studio-home .home-service-card.featured { background: linear-gradient(140deg,var(--surface),var(--featured-surface)); border-color: var(--purple); }
.home-service-top { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 29px; }
.home-service-top > span:last-child { color: var(--muted); font-size: .7rem; }
.home-service-icon { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 20px; color: var(--purple-dark); background: var(--icon-surface); border: 1px solid var(--line); transform: rotate(-6deg); transition: transform .4s; }
.studio-home .home-service-card h3 { font-size: 1.65rem; line-height: 1.3; }
.studio-home .home-service-card p { font-size: .95rem; line-height: 1.9; margin-top: 19px; margin-bottom: 0; }
.home-service-tags { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 25px 0 30px; }
.home-service-tags li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: .66rem; color: var(--muted); background: var(--note-surface); }
.studio-home .home-service-card .text-link { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); justify-content: space-between; font-size: .88rem; width: 100%; }
.home-bridge { padding-block: clamp(50px,6vw,80px); background: radial-gradient(ellipse at 85% 45%,#57307872,transparent 60%),#1b1325; color: #faf5ff; border-block: 1px solid #442c55; }
.home-bridge .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.home-bridge .eyebrow, .home-bridge em { color: #cbaaef; font-style: normal; }
.home-bridge p { color: #d3c4e1; font-size: .97rem; margin-top: 26px; max-width: 580px; }
.home-bridge .text-link { margin-top: 28px; color: #d5b8f8; font-size: .86rem; }
.home-ecosystem { position: relative; aspect-ratio: 1.2; max-width: 410px; width: 100%; justify-self: center; }
.home-ecosystem-line { position: absolute; width: 67%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-20deg); border: 1px solid #aa77cd50; border-radius: 28%; }
.home-ecosystem-line::before { content: ''; position: absolute; inset: 18%; border-radius: 25%; border: 1px dashed #9b6dc444; }
.home-ecosystem-core { position: absolute; width: 29%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-9deg); display: grid; place-items: center; border: 1px solid #b586e2; background: linear-gradient(145deg,#9e65d9,#512a75); border-radius: 27%; color: white; box-shadow: inset 2px 2px 0 #ffffff33,9px 14px 25px -14px #0d0619; }
.home-eco-node { position: absolute; display: grid; place-items: center; width: 17%; aspect-ratio: 1; background: #322041; border: 1px solid #805d9b; border-radius: 25%; color: #d5b1f9; }
.home-eco-a { left: 13%; top: 14%; transform: rotate(-11deg); }
.home-eco-b { right: 12%; top: 16%; transform: rotate(10deg); }
.home-eco-c { left: 14%; bottom: 12%; transform: rotate(7deg); }
.home-eco-d { right: 13%; bottom: 12%; transform: rotate(-8deg); }
.studio-home .work-section { background: var(--soft); }
.studio-home .project-card { border-radius: 24px; }
.studio-home .project-cover { min-height: 265px; }
.studio-home .project-copy { padding: 32px; }
.studio-home .work-more { padding-top: 26px; margin-top: 24px; border-top: 1px solid var(--line); }
.studio-home .approach-grid { align-items: start; }
.studio-home .principle { padding: 27px 0; gap: 24px; }
.studio-home .principle-num { display: grid; place-items: center; min-width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 50%; background: var(--icon-surface); color: var(--purple-dark); font-size: .75rem; }
.studio-home .principle h3 { font-size: 1.23rem; }
.studio-home .principle p { font-size: .88rem; }
.studio-home .process-section { background: radial-gradient(ellipse at 15% 0,#4c286580,transparent 65%),#1b1325; color: #f7f0fe; padding-block: 80px; }
.studio-home .process-section .eyebrow { color: #c7a1fc; }
.studio-home .process-steps { gap: 30px; }
.studio-home .process-step { padding: 26px 0 0; border-top: 1px solid #684982; }
.studio-home .process-step > span { display: inline-grid; place-items: center; width: 45px; height: 45px; background: #342040; border: 1px solid #6f4b8e; border-radius: 50%; color: #d7bafa; font-size: .8rem; margin-bottom: 21px; }
.studio-home .process-step h3 { font-size: 1.16rem; }
.studio-home .process-step p { color: #cfbddf; font-size: .88rem; }
.studio-home .cta-section, .page-hakkimizda .cta-section, .page-calismalarimiz .cta-section { padding-top: clamp(32px,5vw,64px); }
.studio-home .cta-box, .page-hakkimizda .cta-box, .page-calismalarimiz .cta-box { background: radial-gradient(ellipse at top right,#a25ee140,transparent 65%),linear-gradient(140deg,#3f225e,#743cad); border: 1px solid #9164b8; border-radius: 25px; }
.studio-home .cta-box h2 { color: #fff; }
/* Supporting pages retain their content and working controls. */
.page-hakkimizda .inner-hero { padding-block: 50px 72px; }
.page-hakkimizda .about-facts { gap: 24px; }
.page-hakkimizda .about-facts > div { border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: var(--surface); }
.page-hakkimizda .about-statement { max-width: 1000px; }
.page-hakkimizda .principle { padding-block: 26px; }
.page-hakkimizda .review-empty { border-radius: 20px; background: var(--featured-surface); padding: 32px; }
.page-iletisim .brief-form { border-radius: 25px; border: 1px solid var(--line); background: linear-gradient(155deg,var(--surface),var(--featured-surface)); box-shadow: 0 25px 54px -40px #6f43994d; }
.page-iletisim .contact-method { padding-block: 21px; }
.page-iletisim .contact-method > svg { box-sizing: content-box; padding: 13px; border-radius: 15px; background: var(--icon-surface); border: 1px solid var(--line); color: var(--purple-dark); }
.page-iletisim .contact-info > p { max-width: 490px; line-height: 1.9; }
.page-iletisim .field input, .page-iletisim .field select, .page-iletisim .field textarea { border-radius: 11px; }
.page-calismalarimiz .project-card { border-radius: 24px; }
@media (hover: hover) { .home-service-card:hover .home-service-icon { transform: rotate(0); } }
@media (max-width: 1100px) {
 .home-bridge .container { gap: 40px; }
 .studio-home .home-service-card { padding: 30px; }
 .studio-home .home-service-card h3 { font-size: 1.4rem; }
}
@media (max-width: 800px) {
 .home-bridge .container { grid-template-columns: minmax(0,1fr); gap: 35px; }
 .home-ecosystem { max-width: 360px; }
 .studio-home .home-service-card p { font-size: .9rem; }
 .studio-home .process-section { padding-block: 64px; }
 .studio-home .project-copy { padding: 27px; }
}
@media (max-width: 600px) {
 .home-service-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .studio-home .home-service-card { padding: 28px; }
 .studio-home .home-service-card h3 { font-size: 1.45rem; }
 .home-service-top { margin-bottom: 26px; }
 .home-service-tags { margin-block: 22px 25px; }
 .home-service-tags li { font-size: .65rem; }
 .home-service-icon { width: 58px; height: 58px; border-radius: 19px; }
 .home-bridge p { font-size: .93rem; }
 .home-ecosystem { max-width: 310px; }
 .studio-home .project-cover { min-height: 240px; }
 .studio-home .principle { gap: 17px; }
 .studio-home .principle h3 { font-size: 1.12rem; }
 .studio-home .process-step h3 { font-size: 1.05rem; }
 .studio-home .process-step p { font-size: .82rem; }
 .page-hakkimizda .inner-hero { padding-block: 30px 50px; }
 .page-iletisim .contact-method > svg { padding: 10px; }
}