@font-face{font-family:DM;src:url('/assets/dm-sans.woff2') format('woff2');font-display:block;font-weight:100 1000} @font-face{font-family:Inter;src:url('/assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:block} @font-face{font-family:Waldenburg;src:url('/assets/waldenburg-book.woff2') format('woff2');font-weight:300;font-style:normal;font-display:block} @font-face{font-family:Waldenburg;src:url('/assets/waldenburg-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block} .updated-hawl{width:100%;background:#0e0f11;color:#e3e5f1;--paper:#0e0f11;--ink:#e3e5f1;--muted:#91939d;--line:#303034;--soft:#1c1e21;font-family:Inter,Arial,sans-serif;} @scope (.updated-hawl){ :root{--paper:#fbfbf8;--ink:#20211e;--muted:#8c8e86;--line:#dddfd7;--green:#c6f28a;--soft:#f0f1eb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #668f36;outline-offset:5px}button{background:none;border:0}p{margin:0;line-height:1.55}h1,h2,h3,h4{margin:0;font-weight:500}img{display:block;max-width:100%}.wrap{width:calc(100% - 112px);max-width:1440px;margin-inline:auto}.muted{color:var(--muted)}.label{font-size:11px;font-weight:500;letter-spacing:.065em;line-height:1.5}.section{padding-block:100px}.header{height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 56px;background:rgba(251,251,248,.95);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.logo{display:flex;align-items:center;font-size:33px;font-weight:750;letter-spacing:-1.9px;gap:8px}.registered{font-size:13px;align-self:flex-start;padding-top:7px;letter-spacing:0}.brandmark{position:relative;width:25px;height:25px;display:inline-block;margin-right:3px}.brandmark i{position:absolute;width:12px;height:12px;background:var(--ink);border-radius:2px}.brandmark i:first-child{top:0;left:0}.brandmark i:nth-child(2){top:9px;left:9px}.brandmark i:nth-child(3){top:18px;left:18px;width:7px;height:7px}.header nav{display:flex;gap:32px;font-size:13px}.header nav a{color:#60635a}.header nav a:hover{color:var(--ink)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:var(--ink);color:#e3e5f1;border:1px solid var(--ink);padding:17px 24px;border-radius:100px;font-size:13px;transition:background .2s,transform .2s}.button:hover{background:#41473b;transform:translateY(-2px)}.button.small{padding:11px 19px;gap:23px}.button.light{background:transparent;color:var(--ink);border-color:#c8cbc1}.button.light:hover{background:var(--ink);color:#e3e5f1}.text-link{display:inline-flex;gap:17px;align-items:center;font-size:13px;border-bottom:1px solid transparent;padding-bottom:3px}.text-link:hover{border-bottom-color:var(--ink)}.live-dot{display:inline-block;width:7px;height:7px;background:#87b64d;border-radius:50%;flex-shrink:0}.hero{padding-top:53px;padding-bottom:55px}.hero-meta{display:flex;justify-content:space-between;align-items:center;color:#777b70;font-size:10px;letter-spacing:.055em}.hero-meta>span:first-child{display:flex;align-items:center;gap:10px}.hero h1{font-size:clamp(46px,5.55vw,92px);line-height:1.065;letter-spacing:-.055em;max-width:1180px;margin:40px 0 42px;font-weight:450}.thoughtful{position:relative;white-space:nowrap}.underline{position:absolute;bottom:1px;left:0;width:100%;height:9px;border-bottom:3px solid #a6cf6e;border-radius:50%;transform:rotate(-2deg)}.accent{color:#8db653}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}.hero-tagline{font-size:22px;letter-spacing:-.025em;line-height:1.35}.hero-description>p{font-size:15px;max-width:495px;color:#666b61}.actions{display:flex;align-items:center;gap:27px;margin-top:24px}.micro{display:block;font-size:10px;color:#8b8e84;margin-top:14px}.section-line{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-line>span{font-size:11px;color:#858a7d}.work{padding-top:25px}.gallery{position:relative;height:clamp(310px,40vw,570px);margin-top:18px;touch-action:pan-y;cursor:grab;overflow:hidden}.gallery:active{cursor:grabbing}.gallery canvas{width:100%;height:100%;display:none}.gallery.ready canvas{display:block}.gallery-fallback{height:100%;display:flex;gap:12px;overflow:auto;align-items:center;padding-inline:5vw}.gallery-fallback img{height:85%;width:auto;max-width:none}.gallery.ready .gallery-fallback{position:absolute;width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden}.gallery-bottom{display:flex;justify-content:space-between;gap:25px;padding-block:21px;border-bottom:1px solid var(--line);font-size:11px}.gallery-bottom>div:first-child{display:flex;align-items:center;gap:12px}.gallery-controls{display:flex;align-items:center;gap:16px}.gallery-controls button{padding:4px 2px;font-size:11px}.gallery-controls button:hover{color:#6b8d3e}.gallery-controls button:first-of-type,.gallery-controls button:nth-of-type(2){font-size:18px}.drag-hint{color:#9a9d93;margin-right:9px}.brands{padding-block:57px 64px;text-align:center}.brands .label{color:#8a8e82;font-size:10px}.brand-window{overflow-x:auto;scrollbar-width:none;margin-top:32px}.brand-track{display:flex;width:max-content;animation:brands 38s linear infinite}.brand-window:hover .brand-track,.brand-window:focus-within .brand-track{animation-play-state:paused}.brand-set{display:flex;align-items:center;justify-content:space-around;gap:78px;padding-right:78px}.brand-set span{font-size:28px;font-weight:650;letter-spacing:-1.2px;white-space:nowrap;color:#494f43}.brand-set span:nth-child(4){font-weight:400;letter-spacing:-1.6px}.brand-set span:nth-child(5){font-weight:850;letter-spacing:-2px}.services{border-top:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;margin:46px 0}.section-heading h3,.process-intro h3,.faq h3{font-size:clamp(34px,3.65vw,56px);line-height:1.09;letter-spacing:-.045em;font-weight:450}.section-heading>p{font-size:15px;color:#777c6e;max-width:430px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service{min-width:0}.service-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}.service-top>span:last-child{color:#8b8f83;font-size:20px}.service-art{height:245px;background:var(--soft);border-radius:8px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:23px}.service h4{font-size:21px;letter-spacing:-.025em;margin-bottom:12px}.service p{font-size:13px;color:#7d8275;max-width:330px}.service-tags{font-size:10px;display:block;margin-top:20px;color:#9a9e92}.product-art{background:#e7ecdf}.mini-sidebar{background:#22281f;width:32px;height:162px;display:flex;flex-direction:column;gap:18px;padding:18px 10px;border-radius:7px 0 0 7px;box-shadow:0 13px 25px #25351a16}.mini-sidebar i{width:9px;height:7px;border:1px solid #728767;border-radius:2px}.mini-sidebar i:first-child{background:var(--green);border-color:var(--green)}.mini-dashboard{height:162px;width:215px;background:#fcfdf9;border-radius:0 7px 7px 0;padding:14px;box-shadow:0 13px 25px #25351a16}.mini-dashboard>span{font-size:8px;color:#a3a99b;display:flex;justify-content:space-between}.mini-dashboard strong{font-size:19px;font-weight:500;letter-spacing:-.8px;display:block;margin-top:7px}.chart{display:flex;align-items:end;gap:9px;height:62px;margin:7px 0 9px}.chart i{flex:1;background:#dfe8d5;border-radius:2px 2px 0 0;height:38%}.chart i:nth-child(2){height:48%}.chart i:nth-child(3){height:42%}.chart i:nth-child(4){height:72%}.chart i:nth-child(5){height:58%}.chart i:nth-child(6){height:84%}.chart i:last-child{height:100%;background:#9fca65}.mini-row{display:flex;gap:8px}.mini-row span{height:9px;background:#f0f2ec;flex:1;border-radius:2px}.website-art{background:#ece6df}.mini-site{background:#fffaf3;width:265px;height:177px;padding:15px;position:relative;border-radius:6px;box-shadow:0 14px 24px #85614314;transform:rotate(-4deg)}.mini-nav{display:flex;justify-content:space-between;font-size:6px;align-items:center}.mini-nav b{font-size:11px}.mini-site>strong{display:block;font-size:24px;letter-spacing:-1px;line-height:1.05;font-weight:500;margin-top:22px}.mini-site>strong span{color:#e4a26e}.mini-orbit{font-size:74px;position:absolute;right:16px;top:57px;color:#de8f54;line-height:1;transform:rotate(-12deg)}.mini-pill{font-size:6px;background:#20211e;color:#e3e5f1;border-radius:20px;padding:7px 9px;display:inline-block;margin-top:17px}.build-art{background:#e7e8ef;flex-direction:column;gap:0}.build-chip{border:1px solid #d9dbe5;background:#f8f8fc;font-size:12px;padding:16px 22px;border-radius:9px;display:flex;align-items:center;gap:24px;transform:rotate(-6deg);box-shadow:0 10px 20px #26254809}.build-chip i{width:16px;height:16px;border:1px dashed #afb3c2;border-radius:3px}.build-chip.dark{background:#292c34;color:#e3e5f1;border-color:#292c34;transform:rotate(5deg);z-index:1}.build-chip.dark i{background:var(--green);border:0}.build-path{height:30px;width:1px;border-right:1px dashed #bfc3d0}.build-chip b{font-weight:400;color:#b7bac4}.build-caption{font-size:9px;color:#9c9fac;margin-top:26px}.supporting{display:flex;align-items:center;gap:25px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:39px;padding-top:24px;font-size:11px}.supporting>span:first-child{margin-right:auto}.subscription{border-top:1px solid var(--line)}.subscription-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:60px}.subscription-steps article{border-top:1px solid var(--line);padding-top:18px}.step-num{font-size:12px;color:#929787}.subscription-steps h4{font-size:22px;letter-spacing:-.03em;margin:27px 0 12px}.subscription-steps p{font-size:13px;color:#858a7d;max-width:290px}.subscription-note{margin-top:45px;color:#7e8574;font-size:11px;display:flex;gap:10px;align-items:center}.pricing{background:#f0f2e9}.cost-comparison{display:grid;grid-template-columns:1fr 100px 1fr;gap:45px;border-top:1px solid #d5d9ca;border-bottom:1px solid #d5d9ca;padding:36px 0 35px;margin-top:54px}.cost-comparison .label{color:#8b917f;display:flex;align-items:center;gap:9px}.cost-comparison strong{font-size:64px;letter-spacing:-.065em;font-weight:450;line-height:1.2}.cost-comparison strong>span{font-size:36px}.hire-cost strong{color:#969e87}.cost-comparison>div>div{display:flex;align-items:baseline;gap:16px;margin-top:17px}.cost-comparison>div>div>span{font-size:13px;color:#879078;white-space:nowrap}.cost-comparison p{font-size:12px;color:#929982;margin-top:10px}.compare-arrow{font-size:52px;align-self:center;color:#aab19d;font-weight:300}.comparison-note{font-size:10px;color:#939a88;max-width:820px;margin:19px 0 48px;line-height:1.65}.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.plan{padding:37px;background:#fafbf7;border:1px solid #d9dfcf;border-radius:9px}.plan.pro{background:#e1eccf;border-color:#cfddba}.plan-top{display:flex;justify-content:space-between;align-items:center}.plan h4{font-size:25px;letter-spacing:-.035em}.plan-symbol{font-size:33px;color:#a9b595}.plan-badge{font-size:10px;border:1px solid #c2cfae;padding:7px 10px;border-radius:20px;color:#7b896b}.plan-description{font-size:14px;color:#8b9580;margin:20px 0 28px}.plan-price{font-size:45px;letter-spacing:-.045em}.plan-price>span{font-size:12px;color:#8b9580;letter-spacing:0;margin-left:10px}.plan ul{list-style:none;padding:24px 0;margin:24px 0;border-top:1px solid #d9dfcf;font-size:12px;color:#727d64;display:grid;gap:15px}.plan li:before{content:'✓';margin-right:12px;color:#82996a}.plan .button{width:100%}.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:50px}.process-intro>p{font-size:14px;color:#858b7d;max-width:320px;margin-top:25px}.process-object{display:flex;align-items:center;width:290px;margin-top:60px;font-size:11px}.process-object>span{background:#eef2e7;padding:14px 18px;border-radius:50px;white-space:nowrap}.process-object>span:last-child{background:var(--green)}.process-object i{flex:1;height:1px;background:#c2cdb1}.process-list article{display:flex;gap:26px;border-top:1px solid var(--line);padding:25px 0 29px}.process-list article>span{font-size:11px;color:#989e8e;padding-top:4px}.process-list h4{font-size:21px;letter-spacing:-.03em}.process-list p{font-size:13px;color:#858b7d;margin:12px 0}.process-output{font-size:10px;color:#a2a797}.feedback{background:#eef0e9}.quote-layout{display:grid;grid-template-columns:1fr 3fr;gap:60px;margin-top:50px}.quote-icon{font-size:140px;line-height:1;color:#b5c49c}.quote-layout blockquote{font-size:clamp(27px,3.2vw,48px);letter-spacing:-.04em;line-height:1.2;margin:0;max-width:860px;font-weight:450}.quote-person{display:flex;align-items:center;gap:12px;margin-top:34px;font-size:12px}.avatar{width:39px;height:39px;background:#d9e1cd;border-radius:50%;display:grid;place-items:center;color:#7c8c68;font-size:11px}.quote-person strong{font-weight:500}.quote-person>div>span{display:block;color:#919a85;font-size:10px;margin-top:4px}.quote-person>a{margin-left:25px;font-size:20px;color:#91a27b}.one-project{display:grid;grid-template-columns:.8fr 1.3fr 1fr;gap:50px;align-items:start;padding-block:60px;border-bottom:1px solid var(--line)}.one-project h3{font-size:27px;letter-spacing:-.04em;line-height:1.2}.one-project p{font-size:13px;color:#8b9281}.one-project .text-link{margin-top:20px}.faq{display:grid;grid-template-columns:1fr 1.25fr;gap:80px}.faq h3{margin-top:30px}.questions details{border-bottom:1px solid var(--line)}.questions details:first-child{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:14px;padding:23px 0}summary::-webkit-details-marker{display:none}summary>span{color:#929987;font-size:21px;line-height:1}details[open] summary>span{transform:rotate(45deg)}details p{font-size:13px;color:#8b9281;padding:0 30px 22px 0;max-width:540px}.contact{border-top:1px solid var(--line);padding-block:44px 70px}.contact h2{font-size:clamp(68px,10vw,155px);line-height:.96;letter-spacing:-.07em;margin:47px 0 45px;position:relative;font-weight:450}.contact-star{position:absolute;right:7%;top:8%;color:var(--green);font-size:140px}.contact-bottom{display:flex;align-items:center;gap:30px}.email{font-size:14px;color:#77826b}.contact-bottom p{margin-left:auto;font-size:12px;color:#9aa18f}footer{border-top:1px solid var(--line);padding-block:29px;display:flex;align-items:center;gap:35px}footer>.logo{font-size:27px}footer>span{font-size:10px;color:#9aa18f}footer>div{display:flex;gap:24px;margin-left:auto;font-size:11px;color:#7c8571}.skip{position:fixed;top:-100px;left:20px;padding:15px;background:var(--ink);color:#e3e5f1;z-index:100}.skip:focus{top:12px}dialog{border:0;background:var(--paper);border-radius:12px;width:min(1100px,95vw);max-height:95dvh;padding:20px;box-shadow:0 20px 90px #0004}dialog::backdrop{background:#171b17cc;backdrop-filter:blur(10px)}.viewer-top,.viewer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px}.viewer-top{padding-bottom:15px}.viewer-top h2{font-size:14px}.viewer-top button{padding:8px}.viewer-bottom{justify-content:center;padding-top:15px}.viewer-bottom button{font-size:22px;padding:8px 20px}#viewer-image{width:100%;max-height:73dvh;object-fit:contain;background:#eeefe8}@keyframes brands{to{transform:translateX(-50%)}} @media(min-width:1600px){.hero h1{max-width:1300px}} @media(max-width:1000px){.wrap{width:calc(100% - 64px)}.header{padding-inline:32px}.hero h1{font-size:64px}.section-heading{gap:40px}.service-grid{gap:16px}.service-art{height:195px}.mini-site{width:215px;transform:scale(.85) rotate(-4deg)}.product-art>div{transform:scale(.82)}.mini-sidebar{margin-right:-19px}.mini-dashboard{margin-left:-19px}.service h4{font-size:18px}.process-layout{gap:40px}.cost-comparison{gap:20px;grid-template-columns:1fr 40px 1fr}.cost-comparison strong{font-size:49px}.plan{padding:28px}.one-project{gap:25px;grid-template-columns:.7fr 1.1fr 1fr}.faq{gap:40px}.gallery-bottom{flex-wrap:wrap}.contact-star{font-size:100px}} @media(max-width:680px){html{scroll-padding-top:75px}.wrap{width:calc(100% - 40px)}.header{height:70px;padding-inline:20px}.logo{font-size:29px}.brandmark{transform:scale(.85);margin-right:0}.header nav{gap:17px;font-size:11px}.header nav a:first-child{display:none}.button.small{padding:9px 12px;font-size:11px;gap:10px}.hero{padding-top:31px;padding-bottom:28px}.hero-meta{font-size:8px;letter-spacing:.02em}.hero-meta>span:last-child{display:none}.hero h1{font-size:clamp(41px,10.5vw,62px);margin:28px 0 27px;line-height:1.08;letter-spacing:-.05em}.underline{border-bottom-width:2px;height:6px}.hero-bottom{grid-template-columns:1fr;gap:20px}.hero-tagline{font-size:20px}.hero-tagline br{display:none}.hero-description>p{font-size:13px;max-width:440px}.actions{margin-top:20px;gap:22px}.button{padding:14px 20px;font-size:12px;gap:22px}.micro{font-size:9px}.work{padding-top:20px}.section-line>span{font-size:9px;text-align:right;max-width:150px}.label{font-size:9px}.gallery{height:300px;margin-top:9px}.gallery-bottom{padding-block:13px;gap:12px;font-size:10px}.gallery-controls{width:100%;justify-content:flex-end;gap:18px}.drag-hint{margin-right:auto;font-size:9px}.gallery-bottom>div:first-child{gap:9px}.brands{padding-block:35px 42px}.brand-window{margin-top:25px;overflow-x:auto;scrollbar-width:none}.brand-set{gap:40px;padding-right:40px}.brand-set span{font-size:23px}.section{padding-block:55px}.section-heading{grid-template-columns:1fr;gap:22px;margin:30px 0}.section-heading h3,.process-intro h3,.faq h3{font-size:36px}.section-heading>p{font-size:13px;max-width:380px}.service-grid{grid-template-columns:1fr;gap:35px}.service-art{height:240px}.mini-site{width:265px;transform:rotate(-4deg)}.product-art>div{transform:none}.mini-sidebar{margin-right:0}.mini-dashboard{margin-left:0}.service h4{font-size:22px}.service p{max-width:450px}.service-tags{margin-top:13px}.supporting{gap:15px;font-size:10px;margin-top:30px}.supporting>span:first-child{width:100%}.subscription-steps{grid-template-columns:1fr;gap:25px;margin-top:35px}.subscription-steps article{display:grid;grid-template-columns:30px 1fr;gap:8px 10px}.subscription-steps h4{font-size:21px;margin:0}.subscription-steps p{grid-column:2;max-width:none}.step-num{padding-top:3px}.subscription-note{margin-top:30px;font-size:10px}.cost-comparison{grid-template-columns:1fr;gap:22px;margin-top:35px;padding-block:26px}.cost-comparison strong{font-size:54px}.cost-comparison>div>div{margin-top:8px}.compare-arrow{display:none}.hire-cost{padding-bottom:22px;border-bottom:1px solid #d5d9ca}.comparison-note{font-size:9px;margin-bottom:27px}.plan-grid{grid-template-columns:1fr}.plan{padding:27px}.plan-price{font-size:42px}.plan-description{font-size:13px}.plan-badge{font-size:9px}.process-layout{grid-template-columns:1fr;gap:34px;margin-top:31px}.process-intro h3 br:last-of-type{display:none}.process-intro>p{max-width:none}.process-object{margin-top:26px}.process-list article{gap:20px;padding-block:23px}.process-list h4{font-size:21px}.quote-layout{grid-template-columns:1fr;gap:3px;margin-top:30px}.quote-icon{font-size:70px;height:44px}.quote-layout blockquote{font-size:29px}.one-project{grid-template-columns:1fr;gap:19px;padding-block:40px}.one-project h3{font-size:30px}.one-project>div>p{max-width:350px}.faq{grid-template-columns:1fr;gap:30px}.faq h3{margin-top:23px}summary{font-size:13px;padding-block:21px}.contact{padding-block:30px 45px}.contact h2{font-size:78px;margin-block:38px}.contact-star{font-size:77px;right:1%;top:10%}.contact-bottom{flex-wrap:wrap;gap:20px}.email{font-size:12px}.contact-bottom p{display:none}footer{gap:17px;flex-wrap:wrap;padding-block:24px}footer>div{width:100%;margin:0;gap:22px;font-size:10px}dialog{padding:12px;border-radius:8px}.viewer-top h2{font-size:12px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand-track{animation:none}.brand-window{overflow-x:auto}.button{transition:none}} /* ElevenCreative reference scale. Measurements at a 1280px viewport: Waldenburg 48/52 hero, 36/42 headings; Inter 16/24 body; 64px page gutters, 48px column gaps, 44px primary buttons. */ :root{--paper:#fdfcfc;--ink:#000;--muted:#777;--line:#ebebeb;--soft:#f5f4f3;--green:#c6f28a} body{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px;background:var(--paper)} p{line-height:24px}h1,h2,h3{font-family:Waldenburg,Arial,sans-serif;font-weight:300}h4{font-family:Inter,Arial,sans-serif;font-weight:400} .wrap{width:calc(100% - 128px);max-width:1312px}.header{height:64px;padding-inline:max(64px,calc((100% - 1312px)/2));background:rgba(253,252,252,.96);border-color:var(--line)}.logo{font-family:Inter,Arial,sans-serif;font-size:25px;letter-spacing:-1.2px;font-weight:700}.registered{font-size:9px;padding-top:3px}.brandmark{width:21px;height:21px;transform:scale(.75);transform-origin:center}.header nav{gap:32px;font-size:14px;line-height:21px}.header nav a{color:#000} .button,.button.small{height:44px;padding:0 20px;gap:14px;font-size:16px;line-height:24px;font-weight:400;border-radius:9999px;justify-content:center;transition:background .2s}.button.small{height:36px;font-size:14px;padding-inline:14px}.button:hover{transform:none;background:#262626}.button.light{background:#fff;border-color:#e5e5e5;color:#000;box-shadow:0 1px 2px #00000008}.button.light:hover{background:#f5f5f5;color:#000}.text-link{font-size:16px;line-height:24px}.micro{font-size:14px;line-height:21px;font-style:italic;color:#808080;margin-top:8px} .hero{padding-block:72px 40px}.hero-meta{font-size:12px;line-height:18px;color:#777;letter-spacing:0}.hero-grid{display:grid;grid-template-columns:minmax(0,1.44fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:40px}.hero h1{font-size:48px;line-height:52px;letter-spacing:-.02em;font-weight:300;margin:0;max-width:652px}.hero-description>p{font-size:16px;line-height:24px;letter-spacing:.01em;color:#000;max-width:452px}.hero-description .hero-tagline{font-size:16px;line-height:24px;letter-spacing:.01em;color:#777;margin-top:24px;max-width:452px}.hero .actions{gap:12px;margin-top:32px;flex-wrap:wrap}.hero-bottom{display:block}.underline{display:none}.accent{color:#000} .label{font-family:Inter,Arial,sans-serif;font-size:14px;font-weight:400;line-height:21px;letter-spacing:0}.section-line>span{font-size:14px;line-height:21px;color:#777;max-width:none}.section{padding-block:96px}.section-line{gap:24px}.section-heading{grid-template-columns:1fr 1fr;gap:48px;margin:32px 0 48px;align-items:start}.section-heading h3,.process-intro h3,.faq h3{font-size:36px;line-height:42px;letter-spacing:0;font-weight:300}.section-heading h3 .muted,.process-intro h3 .muted,.faq h3 .muted{color:#000}.section-heading>p{font-size:16px;line-height:24px;letter-spacing:.01em;color:#777;max-width:503px} .work{padding-top:0}.work .section-line{padding-top:16px}.gallery{margin-top:16px;height:clamp(300px,35vw,480px)}.gallery-bottom{font-size:14px;line-height:21px;padding-block:16px;border-color:var(--line)}.gallery-controls{gap:18px}.gallery-controls button{font-size:14px;line-height:21px}.drag-hint{font-size:14px}.brands{padding-block:48px 64px}.brands .label{font-size:14px;color:#777}.brand-window{margin-top:32px}.brand-set{gap:80px;padding-right:80px}.brand-set span{font-size:26px;color:#222}.service-grid{gap:16px}.service{background:#f5f4f3;border:1px solid #eeeeed;border-radius:24px;overflow:hidden;padding:28px;display:flex;flex-direction:column}.service-top{padding-bottom:20px}.service-top .label{font-size:12px;color:#777}.service-art{height:240px;margin-inline:-28px;border-radius:0;margin-bottom:28px;background:#f5f4f3}.service h4{font-size:20px;line-height:27px;letter-spacing:0;margin-bottom:8px}.service p{font-size:14px;line-height:21px;color:#777;max-width:none}.service-tags{font-size:12px;line-height:18px;color:#888;margin-top:20px}.supporting{font-size:14px;line-height:21px;gap:24px;margin-top:32px;padding-top:24px}.supporting>span:first-child{color:#777}.services,.subscription{border-color:var(--line)} .subscription-steps{gap:48px;margin-top:48px}.subscription-steps article{border-color:var(--line);padding-top:24px}.step-num{font-size:14px;line-height:21px;color:#888}.subscription-steps h4{font-size:20px;line-height:27px;letter-spacing:0;margin:24px 0 12px}.subscription-steps p{font-size:16px;line-height:24px;color:#777;max-width:none}.subscription-note{font-size:14px;line-height:21px;color:#777;margin-top:32px} .pricing{background:var(--paper);border-block:1px solid var(--line)}.cost-comparison{border:1px solid var(--line);border-radius:24px;padding:32px;gap:48px;grid-template-columns:1fr 48px 1fr;background:#f5f4f3;margin-top:48px}.cost-comparison .label{font-size:14px;color:#777}.cost-comparison strong{font-family:Waldenburg,Arial,sans-serif;font-size:48px;line-height:52px;letter-spacing:-.02em;font-weight:300}.cost-comparison strong>span{font-size:32px}.hire-cost strong{color:#888}.cost-comparison>div>div>span{font-size:14px;line-height:21px;color:#777}.cost-comparison p{font-size:14px;line-height:21px;color:#777}.compare-arrow{font-size:36px;color:#aaa}.comparison-note{font-size:12px;line-height:18px;color:#888;margin:16px 0 32px;max-width:none}.plan-grid{gap:16px}.plan{padding:32px;border-radius:24px;border:1px solid var(--line);background:#fff}.plan.pro{background:#f5f4f3;border-color:var(--line)}.plan h4{font-size:24px;line-height:30px;letter-spacing:0}.plan-symbol{font-size:28px;color:#777}.plan-badge{font-size:12px;line-height:18px;color:#777;border-color:#dedede;background:#fff;padding:4px 10px}.plan-description{font-size:16px;line-height:24px;color:#777;margin:16px 0 24px}.plan-price{font-family:Waldenburg,Arial,sans-serif;font-size:48px;line-height:52px;letter-spacing:-.02em;font-weight:300}.plan-price>span{font-family:Inter,Arial,sans-serif;font-size:14px;line-height:21px;color:#777}.plan ul{font-size:14px;line-height:21px;color:#555;border-color:var(--line);gap:16px;padding:24px 0;margin:24px 0}.plan li:before{color:#555}.plan .button{height:44px} .process-layout{gap:48px;margin-top:40px}.process-intro>p{font-size:16px;line-height:24px;color:#777;max-width:430px}.process-object{font-size:14px;width:340px}.process-object>span{background:#f5f4f3;padding:12px 18px}.process-object>span:last-child{background:#eee}.process-object i{background:#ddd}.process-list article{gap:24px;padding:24px 0;border-color:var(--line)}.process-list article>span{font-size:14px;line-height:21px;color:#888}.process-list h4{font-size:20px;line-height:27px;letter-spacing:0}.process-list p{font-size:16px;line-height:24px;color:#777}.process-output{font-size:12px;line-height:18px;color:#888}.feedback{background:#f5f4f3;border-radius:0}.quote-layout{grid-template-columns:1fr 3fr;gap:48px;margin-top:48px}.quote-icon{font-family:Waldenburg,Arial,sans-serif;font-size:100px;color:#bbb}.quote-layout blockquote{font-family:Waldenburg,Arial,sans-serif;font-size:36px;line-height:42px;letter-spacing:0;font-weight:300}.quote-person{font-size:14px;line-height:21px;margin-top:32px}.quote-person>div>span{font-size:12px;line-height:18px;color:#777}.avatar{background:#e9e8e7;color:#777;font-size:12px}.quote-person>a{color:#777} .one-project{grid-template-columns:.7fr 1fr 1fr;gap:48px;padding-block:64px}.one-project h3{font-size:28px;line-height:34px;letter-spacing:0}.one-project p{font-size:16px;line-height:24px;color:#777}.faq{grid-template-columns:1fr 1fr;gap:48px}.faq h3{margin-top:24px}.questions details{border-color:var(--line)}summary{font-size:16px;line-height:24px;padding:24px 0}details p{font-size:14px;line-height:21px;color:#777;padding-bottom:24px}.contact{padding-block:64px 80px}.contact h2{font-size:48px;line-height:52px;letter-spacing:-.02em;margin:32px 0}.contact h2 br{display:none}.contact h2 .muted{color:#000}.contact-bottom{gap:24px}.email{font-size:16px;line-height:24px;color:#777}.contact-bottom p{font-size:14px;line-height:21px;color:#777}footer{padding-block:32px}footer>.logo{font-size:24px}footer>span,footer>div{font-size:12px;line-height:18px;color:#777}dialog{border-radius:24px}.viewer-top h2{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px} @media(min-width:1440px){.hero h1{max-width:760px}} @media(max-width:1023px){.wrap{width:calc(100% - 64px)}.header{padding-inline:32px}.hero{padding-top:64px}.hero-grid{grid-template-columns:1.2fr 1fr;gap:32px}.hero h1{font-size:40px;line-height:46px}.hero-description>p{font-size:16px}.service-grid{grid-template-columns:1fr 1fr}.service:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:32px}.service:last-child .service-top{grid-column:1/-1}.service:last-child .service-art{grid-row:2/5;grid-column:1;margin:0;border-radius:16px}.service:last-child h4,.service:last-child p,.service:last-child .service-tags{grid-column:2}.section-heading{gap:32px}.process-layout,.faq{gap:32px}.cost-comparison{gap:24px;grid-template-columns:1fr 36px 1fr}.one-project{gap:32px;grid-template-columns:1fr 1fr}.one-project>.label{grid-column:1/-1}} @media(max-width:680px){html{scroll-padding-top:76px}.wrap{width:calc(100% - 40px)}.header{height:64px;padding-inline:20px}.header nav{font-size:12px;gap:16px}.button.small{font-size:12px;height:36px;padding-inline:14px}.hero{padding-block:40px 32px}.hero-meta{font-size:11px;line-height:16px}.hero-grid{grid-template-columns:1fr;gap:32px;margin-top:24px}.hero h1{font-size:36px;line-height:42px;letter-spacing:-.02em}.hero .actions{margin-top:24px;gap:8px}.button{font-size:14px;line-height:21px;height:44px;padding-inline:18px}.micro{font-size:12px;line-height:18px}.hero-description>p,.hero-description .hero-tagline{font-size:16px;line-height:24px}.hero-description .hero-tagline{margin-top:16px}.section{padding-block:64px}.section-line>.label,.label{font-size:12px;line-height:18px}.section-line>span{font-size:12px;line-height:18px;max-width:160px}.section-heading{grid-template-columns:1fr;gap:20px;margin:24px 0 32px}.section-heading h3,.process-intro h3,.faq h3{font-size:28px;line-height:34px}.section-heading>p{font-size:16px;line-height:24px}.gallery{height:300px}.gallery-bottom{font-size:12px;line-height:18px}.gallery-controls button,.drag-hint{font-size:12px}.gallery-controls{gap:16px}.brands{padding-block:32px 48px}.brands .label{font-size:12px}.brand-set{gap:48px;padding-right:48px}.brand-set span{font-size:24px}.service-grid{grid-template-columns:1fr;gap:16px}.service{padding:24px;border-radius:24px}.service:last-child{display:flex;grid-column:auto}.service:last-child .service-art{margin:0 -24px 24px;border-radius:0}.service-art{margin-inline:-24px;margin-bottom:24px;height:240px}.service p{font-size:14px;line-height:21px}.service h4{font-size:20px;line-height:27px}.service-tags{font-size:12px;line-height:18px}.supporting{font-size:12px;line-height:18px;gap:16px}.subscription-steps{grid-template-columns:1fr;gap:24px;margin-top:32px}.subscription-steps article{grid-template-columns:24px 1fr;gap:8px 16px}.subscription-steps h4{font-size:20px;line-height:27px;margin:0}.subscription-steps p{font-size:16px;line-height:24px}.subscription-note{font-size:12px;line-height:18px}.cost-comparison{grid-template-columns:1fr;gap:24px;padding:24px;margin-top:32px}.hire-cost{border-color:#e5e5e5;padding-bottom:24px}.cost-comparison strong{font-size:40px;line-height:46px}.cost-comparison .label,.cost-comparison p{font-size:14px;line-height:21px}.comparison-note{font-size:12px;line-height:18px;margin-bottom:24px}.plan-grid{grid-template-columns:1fr;gap:16px}.plan{padding:24px}.plan-price{font-size:40px;line-height:46px}.plan-description{font-size:16px;line-height:24px}.plan-badge{font-size:10px}.plan ul{font-size:14px;line-height:21px}.process-layout{grid-template-columns:1fr;gap:32px;margin-top:32px}.process-intro>p{font-size:16px;line-height:24px}.process-object{width:min(340px,100%);font-size:12px}.process-list article{gap:16px}.process-list h4{font-size:20px;line-height:27px}.process-list p{font-size:16px;line-height:24px}.quote-layout{grid-template-columns:1fr;gap:0;margin-top:32px}.quote-icon{font-size:72px;height:45px}.quote-layout blockquote{font-size:28px;line-height:34px}.one-project{grid-template-columns:1fr;gap:20px;padding-block:48px}.one-project h3{font-size:28px;line-height:34px}.one-project p{font-size:16px;line-height:24px}.faq{grid-template-columns:1fr;gap:32px}.faq h3{margin-top:20px}summary{font-size:16px;line-height:24px;padding-block:20px}.contact{padding-block:48px}.contact h2{font-size:36px;line-height:42px;margin:24px 0}.contact-bottom{gap:20px}.email{font-size:14px;line-height:21px}footer{padding-block:24px}footer>div{font-size:12px;line-height:18px}} /* Approved direction from the user's Figma. First block: header and hero. */ .figma-header{height:auto;padding:12px 0;border:1px solid var(--line);position:sticky;top:0;background:rgba(253,252,252,.96);backdrop-filter:blur(14px)} .header-inner{width:calc(100% - 128px);max-width:1152px;margin:auto;display:flex;align-items:center;justify-content:space-between} .figma-header .logo{display:flex;flex:none;line-height:0} .figma-header .logo img{width:85.842px;height:20px;max-width:none} .header-navigation{display:flex;align-items:center;justify-content:space-between;width:760px;gap:32px} .figma-header nav{display:flex;gap:32px;font-family:Inter,Arial,sans-serif;font-size:14px;line-height:21px;font-weight:500} .figma-header nav a:first-child{display:block} .header-actions{display:flex;gap:8px;align-items:center} .figma-header .button.small{height:40px;padding:8px 20px;font-family:Inter,Arial,sans-serif;font-size:14px;font-weight:500;line-height:24px;white-space:nowrap} .figma-header .button.outline{border:1px solid #000;background:transparent;color:#000} .figma-header .button.outline:hover{background:#f5f4f3} .figma-hero{max-width:1152px;padding:48px 0} .figma-hero .hero-grid{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:80px;margin:0;padding:8px 0;min-height:192px;overflow:visible} .figma-hero .hero-primary{display:flex;flex-direction:column;gap:24px;flex:none;width:520px} .availability{display:flex;align-items:center;gap:12px;font-family:Inter,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:.16px;color:#777} .availability img{width:16px;height:16px;max-width:none} .figma-hero h1{font-family:Inter,Arial,sans-serif;font-size:40px;font-weight:500;line-height:44px;letter-spacing:-1.2px;margin:0;max-width:520px} .figma-hero .hero-description{flex:none;width:400px} .figma-hero .hero-description p{font-family:Inter,Arial,sans-serif;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.16px;color:#777;max-width:none;margin:0} .hero-objects{position:absolute;left:calc(60% + 38.3px);top:-9.34px;width:170px;height:110px;pointer-events:none} .hero-objects img{position:absolute;max-width:none;object-fit:cover} .hero-orb{left:15px;top:14px;width:78.126px;height:81.175px;transform:rotate(-30deg)} .hero-hand{left:82px;top:13px;width:58.272px;height:81px;transform:rotate(31.39deg)} @media(max-width:1100px){.header-navigation{width:auto;flex:1;margin-left:80px}.header-inner{width:calc(100% - 64px)}.figma-hero .hero-grid{gap:48px}.figma-hero .hero-primary{width:50%}.figma-hero .hero-description{width:38%}.hero-objects{left:62%}} @media(max-width:800px){.header-navigation{margin-left:32px;gap:24px}.figma-header nav{gap:16px}.figma-header .button.small{padding-inline:14px;font-size:12px}.figma-hero h1{font-size:36px;line-height:40px}.figma-hero .hero-grid{gap:32px}.figma-hero .hero-description{width:42%}} @media(max-width:680px){.figma-header{padding:14px 0 12px}.header-inner{width:calc(100% - 40px);position:relative;align-items:flex-start;gap:20px;padding-bottom:34px}.figma-header .logo{padding-top:8px}.header-navigation{display:contents;margin:0}.figma-header nav{position:absolute;bottom:0;left:0;gap:24px;font-size:12px;line-height:20px}.header-actions{margin-left:auto;gap:6px}.figma-header .button.small{height:36px;padding:6px 12px;font-size:11px}.figma-hero{padding:36px 0 32px}.figma-hero .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:32px;padding:0;min-height:0}.figma-hero .hero-primary,.figma-hero .hero-description{width:100%}.figma-hero .hero-primary{gap:20px}.figma-hero h1{font-size:34px;line-height:38px;letter-spacing:-1.02px;max-width:520px}.figma-hero .hero-description{position:relative;padding-top:94px}.hero-objects{left:0;top:auto;bottom:80px;transform:scale(.9);transform-origin:left bottom}.availability{font-size:12px}.figma-hero .hero-description p{max-width:400px}} /* Portfolio rail: give the full edge flare room inside the drawing surface. */ .work{padding:0;width:100%;} .work .gallery{margin:0;height:clamp(480px,46vw,630px);overflow:visible;} @media(max-width:680px){.work .gallery{height:384px;}} /* Updated Figma header, node 511:8546. Reserve the divider space to avoid a scroll jump. */ .figma-header{border:0;border-bottom:1px solid transparent;transition:border-color .18s ease;} .figma-header.is-scrolled{border-bottom-color:var(--line);} .figma-header .logo img{width:69px;height:16.076px;} .figma-header nav{line-height:20px;} @media(min-width:681px){.header-navigation{display:contents;}} .hero-objects{pointer-events:auto;cursor:pointer;} .hero-objects img{transition:filter .2s ease;} .hero-objects:hover img{filter:brightness(1.06);} .rock-rain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:21;} .rock-particle{position:absolute;line-height:1;user-select:none;will-change:transform,opacity;} /* Client logos, a seamless rightward counterpoint to the portfolio rail. */ .brands{padding:32px 0 48px;} .brands .brand-window{margin:0;width:100%;overflow:hidden;} .brands .brand-track{animation:client-logos 90s linear infinite;} .brands .brand-set{gap:56px;padding-right:56px;} .client-logo{display:block;flex:none;width:130px;height:50px;background:#85858f;mask-image:var(--logo);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:var(--logo);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;} .client-logo img{width:100%;height:100%;object-fit:contain;opacity:0;} .logo-coinbase-1,.logo-okx-1,.logo-kaspersky-1{height:22px;width:105px;} .logo-okx-1{width:68px;} .logo-beeline-1,.logo-emirates{width:66px;height:48px;} @keyframes client-logos{from{transform:translateX(-50%)}to{transform:translateX(0)}} @media(max-width:680px){.brands{padding:24px 0 32px;}.brands .brand-set{gap:32px;padding-right:32px;}} @media(prefers-reduced-motion:reduce){.brands .brand-track{animation:none;}.brands .brand-window{overflow-x:auto;}} .logo-tao{width:110px;height:21px;} .logo-inference-labs{width:134px;height:27.54px;} .logo-toffee{width:93px;height:22px;} /* Tighter optical spacing for logos with built-in transparent margins. */ .brands .brand-set{gap:32px;padding-right:32px;} .logo-cisco{width:88px;} .logo-whitebit{width:104px;} .logo-yandex{width:104px;} .logo-hapday,.logo-ender{width:116px;} @media(max-width:680px){.brands .brand-set{gap:24px;padding-right:24px;}} .figma-services{max-width:1152px;padding:96px 0;font-family:Inter,Arial,sans-serif;} .figma-services .section-heading{grid-template-columns:390px 1fr;align-items:start;gap:0;margin:32px 0 48px;min-height:84px;} .figma-services .section-heading h3{font-family:Inter,Arial,sans-serif;font-size:24px;line-height:28px;letter-spacing:-.72px;font-weight:500;text-transform:lowercase;} .figma-services .section-heading>p{font-size:14px;line-height:20px;letter-spacing:.16px;max-width:480px;text-transform:lowercase;} .figma-services .service-grid{gap:16px;} .figma-services .service{height:506px;padding:28px;border:0;border-radius:24px;gap:16px;} .figma-services .service-top{display:flex;justify-content:flex-start;gap:16px;padding:0;font-size:12px;line-height:18px;color:#777;} .figma-services .service-top>span:last-child{font-size:12px;color:#777;} .figma-services .service-art{flex:none;width:100%;height:268px;margin:0;border-radius:16px;overflow:visible;} .figma-services .service-copy{text-transform:lowercase;} .figma-services .service h4{font-size:20px;font-weight:500;line-height:24px;letter-spacing:-.6px;margin:0 0 8px;} .figma-services .service p{font-size:14px;line-height:21px;} .figma-services .service-tags{font-size:14px;line-height:21px;margin-top:16px;color:#777;} .figma-services .supporting{border:0;margin-top:32px;padding:0;text-transform:lowercase;font-size:14px;line-height:20px;} .abstract-art{perspective:700px;cursor:pointer;isolation:isolate;} .sculpture{position:relative;display:block;width:180px;height:180px;transform-style:preserve-3d;transform:rotateX(var(--rx,-12deg)) rotateY(var(--ry,-16deg));transition:transform .4s ease;z-index:1;} .sculpture i{position:absolute;display:block;transition:transform .65s cubic-bezier(.2,.8,.2,1);} .sculpture-shadow{position:absolute;bottom:35px;width:130px;height:20px;background:#23202630;border-radius:50%;filter:blur(13px);transform:rotate(-8deg);} .sphere{inset:28px;border-radius:50%;background:radial-gradient(circle at 32% 24%,#f5d8ff 0%,#ce81f4 26%,#a638e0 52%,#40114f 80%,#151217 100%);box-shadow:inset -8px -10px 14px #160a2a88,inset 3px 3px 5px #ffffffaa,8px 14px 24px #28143120;} .orbit-ring{inset:6px;border:13px solid #28242c;border-top-color:#99969e;border-left-color:#56505e;border-radius:50%;transform:rotateX(65deg) rotateY(-20deg);box-shadow:inset 2px 3px 3px #ffffff88,3px 5px 0 #131017;} .satellite{width:32px;height:32px;border-radius:50%;left:152px;top:66px;background:radial-gradient(circle at 30% 25%,#fff,#c9c6d0 30%,#48434e 65%,#151117);box-shadow:4px 8px 10px #0002;} .star-front,.star-back{inset:12px;clip-path:polygon(40% 0,60% 0,66% 29%,91% 13%,100% 30%,76% 50%,100% 70%,91% 87%,66% 71%,60% 100%,40% 100%,34% 71%,9% 87%,0 70%,24% 50%,0 30%,9% 13%,34% 29%);border-radius:20px;} .star-back{background:linear-gradient(120deg,#87828c,#17131c 65%);transform:translate(7px,12px) translateZ(-12px);} .star-front{background:linear-gradient(135deg,#eee9f3 0%,#99929e 23%,#26222b 55%,#100d14 73%,#746b7e);filter:drop-shadow(1px 1px 1px #fff);} .star-core{inset:65px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f3c8ff,#c276ef 35%,#5f177d 80%);box-shadow:inset 1px 2px 4px #fff8,4px 6px 0 #131017;transform:translateZ(14px);} .slab{width:138px;height:110px;left:21px;top:35px;border-radius:22px;transform:rotateX(48deg) rotateZ(-28deg);border:1px solid #ffffff80;box-shadow:4px 7px 0 #211928,8px 16px 18px #0002;} .slab-bottom{background:linear-gradient(135deg,#9f96a8,#302735 65%,#17111d);transform:translateY(35px) rotateX(48deg) rotateZ(-28deg);} .slab-middle{background:linear-gradient(135deg,#eee8f2,#817687 50%,#35293f);} .slab-top{background:linear-gradient(135deg,#f1c7ff,#c26de9 42%,#8034ab 80%);transform:translateY(-35px) rotateX(48deg) rotateZ(-28deg);} .art-orbit.is-expanded .orbit-ring{transform:rotateX(25deg) rotateY(40deg) scale(1.12);} .art-orbit.is-expanded .satellite{transform:translate(-135px,-60px);} .art-star.is-expanded .star-front{transform:rotate(90deg);} .art-star.is-expanded .star-back{transform:translate(7px,12px) rotate(-45deg);} .art-layers.is-expanded .slab-top{transform:translateY(-64px) rotateX(48deg) rotateZ(-8deg);} .art-layers.is-expanded .slab-bottom{transform:translateY(64px) rotateX(48deg) rotateZ(-48deg);} @media(max-width:1000px){.figma-services .section-heading{grid-template-columns:1fr 1.4fr;gap:32px;}.figma-services .service{padding:22px;height:auto;min-height:506px;}.figma-services .sculpture{scale:.85;}} @media(max-width:680px){.figma-services{padding:64px 0;}.figma-services .section-heading{grid-template-columns:1fr;gap:20px;margin:0 0 32px;}.figma-services .service{padding:28px;min-height:506px;}.figma-services .service:last-child{display:flex;}.figma-services .sculpture{scale:1;}.figma-services .supporting{gap:16px;}} @media(prefers-reduced-motion:reduce){.sculpture,.sculpture i{transition:none;}.sculpture{transform:none;}} /* Abstract signal diagrams inspired by the X advertising reference. */ .kinetic-diagram{width:220px;height:220px;max-width:100%;stroke:#222;stroke-width:1.25;overflow:visible;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .45s ease;} .kinetic-diagram .diagram-dash{stroke:#8e8895;stroke-dasharray:5 7;animation:signal-dash 8s linear infinite;} .kinetic-diagram .node-shell{fill:#f5f4f3;stroke:#222;} .kinetic-diagram .node-fill{fill:#b76be7;stroke:#b76be7;} .kinetic-diagram .green-node,.kinetic-diagram .traveler{fill:#a4cf74;stroke:#709646;} .signal-node{animation:signal-slide 6s ease-in-out infinite;} .node-1{animation-delay:-2s;animation-direction:reverse;} .node-2{animation-delay:-4s;} .orbit-system{transform-origin:120px 120px;animation:signal-orbit 24s linear infinite;} .pulse-core{transform-box:fill-box;transform-origin:center;animation:signal-pulse 3s ease-in-out infinite;} .traveler{animation:signal-travel 4s ease-in-out infinite;} .traveler-2{animation-delay:-1.3s;} .traveler-3{animation-delay:-2.6s;} .abstract-art.is-expanded .kinetic-diagram{--dx:0px;--dy:-8px;scale:1.08;} .abstract-art:hover .diagram-dash{stroke:#9871b4;} @keyframes signal-dash{to{stroke-dashoffset:-96;}} @keyframes signal-slide{0%,100%{transform:translateX(-18px);}50%{transform:translateX(18px);}} @keyframes signal-orbit{to{transform:rotate(360deg);}} @keyframes signal-pulse{0%,100%{scale:1;}50%{scale:1.35;}} @keyframes signal-travel{0%{transform:translate(0,0);opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{transform:translate(170px,0);opacity:0;}} @media(prefers-reduced-motion:reduce){.kinetic-diagram *{animation:none!important;}.kinetic-diagram{transition:none;}} /* Meaningful, reversible assemblies. The full card is the hover target. */ .meaning-diagram{width:240px;height:240px;max-width:100%;overflow:visible;stroke-width:1.3;} .meaning-guide{stroke:#91939d;stroke-dasharray:3 6;opacity:.38;transition:opacity .55s ease;} .assembly-outline{stroke:#27222c;fill:#f5f4f3;stroke-dasharray:4 5;transition:fill .7s ease,stroke-dasharray .7s ease;} .assembly-piece,.identity-piece,.build-piece{transition:transform .85s cubic-bezier(.22,.7,.18,1),fill .65s ease,stroke .65s ease;transition-delay:var(--delay,0ms);} .assembly-piece{fill:#d1e7b7;stroke:#749452;} .piece-1,.piece-4,.piece-6{fill:#dbc2ec;stroke:#9e70bd;} .central-piece{fill:#26222b;stroke:#26222b;} .service:hover .assembly-piece{transform:translate(var(--move-x,0px),var(--move-y,0px));fill:#b9df91;stroke:#8ab960;} .service:hover .central-piece{fill:#26222b;stroke:#26222b;} .service:hover .assembly-outline{fill:#e6efd9;stroke-dasharray:0 0;} .service:hover .meaning-guide{opacity:0;} .brand-boundary{stroke:#91939d;stroke-dasharray:4 6;opacity:0;transition:opacity .7s ease;} .identity-shape{fill:#c6dea9;stroke:#83a264;transform:rotate(var(--start-angle));transition:transform .85s cubic-bezier(.22,.7,.18,1),fill .7s ease,stroke .7s ease,rx .7s ease;} .identity-1 .identity-shape{fill:#26222b;stroke:#26222b;} .identity-2 .identity-shape{fill:#d5b5ed;stroke:#9870b6;} .identity-3 .identity-shape{fill:#f5f4f3;stroke:#26222b;} .service:hover .identity-piece{transform:translate(var(--move-x),var(--move-y));} .service:hover .identity-shape{transform:rotate(0deg);fill:#b875df;stroke:#9a55bf;rx:12px;} .service:hover .brand-boundary{opacity:1;} .build-frame{stroke:#26222b;stroke-dasharray:4 5;opacity:.55;transition:opacity .65s ease,stroke-dasharray .65s ease;} .build-piece{fill:#f5f4f3;stroke:#77717e;} .build-piece-0{fill:#26222b;stroke:#26222b;} .build-piece-1{fill:#c5dfa6;stroke:#87a869;} .build-piece-2{fill:#d8bbeb;stroke:#aa7ac8;} .build-piece-3{fill:#e0dbe4;stroke:#aaa3b1;} .service:hover .build-piece{transform:translate(var(--move-x),var(--move-y));} .service:hover .build-frame{opacity:1;stroke-dasharray:0 0;} .build-check{stroke:#29232e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;opacity:0;transition:stroke-dashoffset .5s ease 1s,opacity .3s ease 1s;} .service:hover .build-check{stroke-dashoffset:0;opacity:1;} @media(hover:none){.service:active .assembly-piece,.service:active .identity-piece,.service:active .build-piece{transform:translate(var(--move-x,0px),var(--move-y,0px));}} @media(prefers-reduced-motion:reduce){.meaning-diagram *{transition:none!important;}} /* Reveal the same dashed boundary only after each assembly settles. */ .assembly-outline,.brand-boundary,.build-frame{fill:none;stroke:#91939d;stroke-width:1.3;stroke-dasharray:4 6;opacity:0;transition:opacity .3s ease;} .service:hover .assembly-outline,.service:hover .brand-boundary,.service:hover .build-frame{fill:none;stroke:#91939d;stroke-dasharray:4 6;opacity:1;transition-delay:.65s;} @media(prefers-reduced-motion:reduce){.service:hover .assembly-outline,.service:hover .brand-boundary,.service:hover .build-frame{transition-delay:0s;}} .meaning-diagram{transform:scale(1);transform-origin:center;transition:transform .75s cubic-bezier(.22,.7,.18,1);} .service:hover .meaning-diagram{transform:scale(1.3);} @media(prefers-reduced-motion:reduce){.meaning-diagram{transition:none;}} /* Subscription process, within the established 1152px content grid. */ .wrap{max-width:1152px;} .subscription-flow{padding:96px 0;font-family:Inter,Arial,sans-serif;} .flow-heading{display:grid;grid-template-columns:390px 1fr;gap:0;margin-bottom:56px;} .flow-heading h2{font-family:Inter,Arial,sans-serif;font-size:24px;line-height:28px;letter-spacing:-.72px;font-weight:500;text-transform:lowercase;} .flow-heading>p{max-width:480px;font-size:14px;line-height:20px;letter-spacing:.16px;color:#777;text-transform:lowercase;} .flow-track{height:48px;position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 0 32px;width:calc(66.6667% + 16px);} .flow-line{position:absolute;left:24px;right:24px;top:24px;height:1px;background:repeating-linear-gradient(to right,#c4bfca 0 4px,transparent 4px 10px);} .flow-station{width:48px;height:48px;border:1px solid #dedbe1;border-radius:14px;background:#f5f4f3;display:flex;justify-content:center;align-items:center;position:relative;font-size:12px;color:#777;} .flow-task{position:absolute;width:10px;height:10px;border-radius:3px;background:#b875df;top:19px;left:24px;animation:flow-progress 9s cubic-bezier(.4,0,.2,1) infinite;z-index:1;} .flow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;} .flow-steps article{padding-right:32px;display:flex;flex-direction:column;align-items:flex-start;} .flow-label{font-size:12px;line-height:18px;color:#777;margin-bottom:16px;} .flow-steps h3{font-family:Inter,Arial,sans-serif;font-size:20px;line-height:24px;letter-spacing:-.6px;font-weight:500;margin:0 0 12px;text-transform:lowercase;} .flow-steps p{font-size:14px;line-height:21px;color:#777;text-transform:lowercase;} .flow-link,.flow-detail{font-size:12px;line-height:18px;margin-top:24px;text-transform:lowercase;} .flow-link{display:inline-flex;gap:12px;border-bottom:1px solid #ccc;padding-bottom:3px;} .flow-detail{color:#777;} .flow-terms{display:flex;gap:32px;flex-wrap:wrap;border-top:1px solid #ebebeb;margin-top:48px;padding-top:24px;font-size:12px;line-height:18px;color:#777;text-transform:lowercase;} .flow-terms span{display:flex;align-items:center;gap:10px;} .flow-terms span:before{content:'';width:5px;height:5px;background:#98b775;border-radius:50%;} @keyframes flow-progress{0%,8%{left:24px;opacity:0;}14%{opacity:1;}40%,50%{left:50%;opacity:1;}78%,88%{left:calc(100% - 29px);opacity:1;}94%,100%{left:calc(100% - 29px);opacity:0;}} @media(max-width:1000px){.flow-heading{grid-template-columns:1fr 1.4fr;gap:32px;}} @media(max-width:680px){.subscription-flow{padding:64px 0;}.flow-heading{grid-template-columns:1fr;gap:20px;margin-bottom:32px;}.flow-track{display:none;}.flow-steps{grid-template-columns:1fr;gap:32px;}.flow-steps article{padding:0 0 28px;border-bottom:1px solid #ebebeb;}.flow-label{margin-bottom:12px;}.flow-link,.flow-detail{margin-top:16px;}.flow-terms{border:0;margin-top:24px;padding:0;gap:16px;flex-direction:column;}} @media(prefers-reduced-motion:reduce){.flow-task{animation:none;left:50%;}} .pricing-refresh{background:transparent;padding:96px 0;border-top:1px solid #ebebeb;font-family:Inter,Arial,sans-serif;} .price-heading{display:grid;grid-template-columns:390px 1fr;margin-bottom:48px;} .price-heading h2{font-family:Inter,Arial,sans-serif;font-size:24px;line-height:28px;font-weight:500;letter-spacing:-.72px;text-transform:lowercase;} .price-heading p{max-width:480px;font-size:14px;line-height:20px;letter-spacing:.16px;color:#777;text-transform:lowercase;} .price-comparison{background:#f5f4f3;border-radius:24px;padding:32px;margin-bottom:24px;} .price-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:14px;line-height:20px;text-transform:lowercase;} .price-row-top strong{font-size:32px;line-height:38px;letter-spacing:-.96px;font-weight:500;} .price-row-top>div>span{color:#777;font-size:14px;} .price-row-top .live-dot{margin-right:8px;} .price-bar{height:16px;border-radius:5px;margin:16px 0 10px;} .hire-bar{width:100%;background:repeating-linear-gradient(135deg,#cecad1 0 2px,#e4e1e7 2px 8px);} .subscription-bar{width:46.1538%;background:#c2df9e;position:relative;overflow:hidden;} .subscription-bar span{position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffffff70 50%,transparent 80%);animation:price-shimmer 6s ease-in-out infinite;} .price-row p{color:#777;font-size:12px;line-height:18px;} .subscription-row{margin-top:28px;} .price-saving{margin-top:28px;padding-top:20px;border-top:1px solid #dedbe1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;line-height:18px;} .price-saving span:last-child{color:#777;} .price-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .price-plan{position:relative;isolation:isolate;overflow:hidden;background:#f5f4f3;border-radius:24px;padding:32px;display:flex;flex-direction:column;border:1px solid transparent;} .price-plan-top{display:flex;align-items:center;justify-content:space-between;gap:16px;} .price-plan h3{font-family:Inter,Arial,sans-serif;font-size:20px;line-height:24px;font-weight:500;letter-spacing:-.6px;text-transform:lowercase;} .price-plan-note{font-size:12px;color:#777;line-height:18px;text-transform:lowercase;} .price-plan-intro{font-size:14px;line-height:21px;color:#777;max-width:370px;margin:20px 0 24px;text-transform:lowercase;} .price-plan-amount{font-size:40px;line-height:48px;font-weight:500;letter-spacing:-1.2px;} .price-plan-amount span{font-size:14px;line-height:20px;color:#777;letter-spacing:0;} .price-plan ul{list-style:none;margin:28px 0 32px;padding:24px 0 0;border-top:1px solid #dedbe1;font-size:14px;line-height:21px;display:flex;flex-direction:column;gap:12px;text-transform:lowercase;} .price-plan li{display:flex;gap:12px;align-items:baseline;} .price-plan li:before{content:'+';color:#777;} .price-plan .button{width:100%;height:40px;padding:8px 20px;font-size:14px;line-height:24px;margin-top:auto;text-transform:lowercase;} .price-plan-pro{background:#211d26;color:#faf9fb;border-color:#42334f;} .price-plan-pro .price-plan-note,.price-plan-pro .price-plan-intro,.price-plan-pro .price-plan-amount span{color:#bdb5c5;} .price-plan-pro ul{border-color:#45394f;} .price-plan-pro li:before{color:#c2df9e;} .price-plan-pro .button{background:#d8b4ef;color:#211d26;border-color:#d8b4ef;} .price-plan-pro .button:hover{background:#e4cbf3;} .price-plan-note i{display:inline-block;width:6px;height:6px;background:#c2df9e;border-radius:50%;margin-right:6px;} .pro-aura{position:absolute;z-index:-1;right:-70px;top:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,#ad68e055,transparent 68%);animation:pro-breathe 7s ease-in-out infinite;pointer-events:none;} .price-footnote{font-size:12px;line-height:18px;color:#777;margin-top:20px;text-transform:lowercase;} @keyframes pro-breathe{0%,100%{transform:translate(0,0);opacity:.6;}50%{transform:translate(-70px,50px);opacity:1;}} @keyframes price-shimmer{0%,30%{transform:translateX(-100%);}70%,100%{transform:translateX(100%);}} @media(max-width:1000px){.price-heading{grid-template-columns:1fr 1.4fr;gap:32px;}} @media(max-width:680px){.pricing-refresh{padding:64px 0;}.price-heading{grid-template-columns:1fr;gap:20px;margin-bottom:32px;}.price-comparison{padding:24px;}.price-row-top{align-items:flex-start;flex-direction:column;gap:8px;}.price-row-top strong{font-size:28px;line-height:34px;}.price-plans{grid-template-columns:1fr;}.price-plan{padding:24px;}.price-plan-top{gap:10px;}.price-plan-note{font-size:11px;}.price-plan-amount{font-size:36px;line-height:44px;}} @media(prefers-reduced-motion:reduce){.pro-aura,.subscription-bar span{animation:none;}} /* KMR Waldenburg Buch for headings; body copy retains Inter. */ h1,h2,h3,h4, .figma-hero h1, .figma-services .section-heading h3, .figma-services .service h4, .flow-heading h2, .flow-steps h3, .price-heading h2, .price-plan h3{ font-family:Waldenburg,Arial,sans-serif; font-weight:300; } .figma-hero h1{line-height:42px;} .figma-services .section-heading h3,.flow-heading h2,.price-heading h2{line-height:26px;} .figma-services .service h4,.flow-steps h3,.price-plan h3{line-height:22px;} @media(max-width:800px){.figma-hero h1{line-height:38px;}} @media(max-width:680px){.figma-hero h1{line-height:36px;}} /* Hover swaps the orb and gently separates the two hero objects. */ .hero-objects img{transition:transform .5s cubic-bezier(.22,.7,.18,1),opacity .3s ease;} .hero-orb-green{left:6px;top:8px;width:92px;height:92px;opacity:0;transform:translateX(0) rotate(-12deg);} .hero-objects:hover .hero-orb{opacity:0;transform:translateX(-12px) rotate(-36deg);} .hero-objects:hover .hero-orb-green{opacity:1;transform:translateX(-12px) rotate(-18deg);} .hero-objects:hover .hero-hand{transform:translateX(14px) rotate(37deg);} .hero-objects:hover img{filter:none;} @media(prefers-reduced-motion:reduce){.hero-objects img{transition:none;}} /* Match the visible alpha bounds of both orb assets and share their motion. */ .hero-objects .hero-orb{left:15px;top:14px;width:78.126px;height:81.175px;} .hero-objects .hero-orb-green{left:15.31px;top:14.40px;width:80.83px;height:80.51px;} .hero-objects .hero-orb,.hero-objects .hero-orb-green{ transform:translateX(0) rotate(-30deg); transform-origin:50% 50%; transition:transform .65s cubic-bezier(.22,.7,.18,1),opacity .12s cubic-bezier(.4,0,.2,1); } .hero-objects:hover .hero-orb,.hero-objects:hover .hero-orb-green{transform:translateX(-12px) rotate(-34deg);} @media(prefers-reduced-motion:reduce){.hero-objects .hero-orb,.hero-objects .hero-orb-green{transition:none;}} /* Compact, illustrated plan cards inspired by the supplied reference. */ .price-plans{max-width:920px;margin-inline:auto;gap:20px;} .price-comparison{max-width:920px;margin-inline:auto;} .price-footnote{max-width:920px;margin-inline:auto;} .price-plan{padding:0;display:flex;background:#f3f3f3;} .price-plan-top{padding:28px 28px 0;} .price-plan-intro{margin:12px 28px 0;min-height:63px;max-width:350px;} .plan-visual{height:240px;position:relative;overflow:hidden;margin-top:8px;background:radial-gradient(ellipse at 50% 85%,#c4e5a7a0,transparent 67%);} .plan-visual svg{display:block;width:100%;height:100%;overflow:visible;} .plan-thread{stroke:#8eb96c;stroke-width:1;transform-origin:200px 180px;animation:plan-thread-drift 12s ease-in-out infinite;} .plan-emblem rect{fill:#f5f5f5;stroke:#8eb96c;stroke-width:1.3;} .plan-emblem path{stroke:#637f4c;stroke-width:1.5;stroke-linecap:round;} .price-plan-amount{padding:24px 28px 0;background:#f3f3f3;position:relative;} .price-plan ul{margin:20px 28px 28px;padding-top:20px;} .price-plan .button{width:calc(100% - 56px);margin:0 28px 28px;} .price-plan-pro{background:#211d26;} .price-plan-pro .price-plan-amount{background:#211d26;} .plan-visual-pro{background:radial-gradient(ellipse at 50% 85%,#ad67da70,transparent 67%);} .plan-visual-pro .plan-thread{stroke:#c697e6;animation-delay:-6s;} .plan-visual-pro .plan-emblem rect{fill:#29212f;stroke:#d8b4ef;} .plan-visual-pro .plan-emblem path{stroke:#d8b4ef;} .pro-aura{width:250px;height:250px;top:90px;right:10px;opacity:.5;} @keyframes plan-thread-drift{0%,100%{transform:rotate(-5deg) scale(.98);}50%{transform:rotate(5deg) scale(1.04);}} @media(max-width:680px){.price-plan-top{padding:24px 24px 0;}.price-plan-intro{margin:12px 24px 0;}.price-plan-amount{padding:24px 24px 0;}.price-plan ul{margin:20px 24px 24px;}.price-plan .button{width:calc(100% - 48px);margin:0 24px 24px;}.plan-visual{height:210px;}.price-plan-note{max-width:145px;text-align:right;}} @media(prefers-reduced-motion:reduce){.plan-thread{animation:none;}} /* Equal, neutral plan cards pending the new 3D artwork. */ .price-plan-pro{background:#f3f3f3;color:var(--ink);border-color:transparent;} .price-plan-pro .price-plan-amount{background:#f3f3f3;} .price-plan-pro .price-plan-note,.price-plan-pro .price-plan-intro,.price-plan-pro .price-plan-amount span{color:#777;} .price-plan-pro ul{border-color:#dedbe1;} .price-plan-pro li:before{color:#777;} .price-plan .button,.price-plan-pro .button{justify-content:center;background:transparent;color:var(--ink);border:1px solid #c8cbc1;} .price-plan .button:hover,.price-plan-pro .button:hover{background:#e8e6e9;transform:none;} .price-plan-amount{padding-top:28px;} .price-plan-top{position:relative;min-height:100px;align-items:center;padding-top:20px;} .price-plan-icon{display:block;width:100px;height:100px;object-fit:contain;flex:none;margin:-10px -8px -10px 16px;} .price-plan-intro{margin-top:12px;} @media(max-width:680px){.price-plan-icon{width:88px;height:88px;}.price-plan-top{min-height:92px;}} .price-plans{position:relative;} .price-plan-top{min-height:0;padding:28px 28px 0;} .price-plan{transition:background-color .65s ease;} .price-plan-amount,.price-plan-pro .price-plan-amount{background:transparent;} .price-plan.tap-highlight{background:#f3efd9;} .price-plan-pro.tap-highlight{background:#e3eef5;} .plan-tap-hand{position:absolute;width:64px;height:89px;object-fit:contain;top:-45px;left:calc(100% - 100px);z-index:2;pointer-events:none;opacity:0;transform:rotate(125deg);} @media(max-width:680px){.price-plan-top{padding:24px 24px 0;}} .plan-tap-hand{width:90px;height:90px;transform:rotate(0deg);} /* Main section titles share the larger 32px hierarchy. */ .figma-services .section-heading h3, .flow-heading h2, .price-heading h2{ font-size:32px; line-height:34px; letter-spacing:-.96px; } /* Dark direction preview. Preserve artwork and accent colors. */ :root{--paper:#0e0f11;--ink:#e3e5f1;--muted:#91939d;--line:#303034;--soft:#1c1e21;color-scheme:dark;} body{background:#0e0f11;color:#e3e5f1;} .header,.figma-header{background:rgba(14,15,17,.96);color:#e3e5f1;} .figma-header .logo img{filter:invert(1);} .figma-header nav a,.header nav a{color:#e3e5f1;} .figma-header .button.small{background:#e3e5f1;color:#0e0f11;border-color:#e3e5f1;} .figma-header .button.outline{background:transparent;color:#e3e5f1;border-color:#e3e5f1;} .figma-header .button.outline:hover{background:#29292d;} .figma-hero h1,.figma-services .section-heading h3,.flow-heading h2,.price-heading h2{color:#e3e5f1;} .figma-hero .hero-description p,.availability,.section-heading>p,.flow-heading>p,.price-heading p{color:#91939d;} .figma-services .service,.price-comparison,.price-plan,.price-plan-pro{background:#1c1e21;color:#e3e5f1;border-color:transparent;} .figma-services .service-art{background:transparent;} .figma-services .service h4,.flow-steps h3,.price-plan h3{color:#e3e5f1;} .figma-services .service p,.figma-services .service-tags,.figma-services .service-top,.figma-services .service-top>span:last-child, .price-plan-intro,.price-plan-note,.price-plan-pro .price-plan-intro,.price-plan-pro .price-plan-note, .price-plan-amount span,.price-plan-pro .price-plan-amount span,.price-row p,.price-row-top>div>span,.price-saving span:last-child,.price-footnote,.flow-label,.flow-steps p,.flow-detail,.flow-terms{color:#91939d;} .price-plan-amount,.price-plan-pro .price-plan-amount{background:transparent;} .price-plan ul,.price-plan-pro ul,.price-saving,.flow-terms,.subscription,.services,.process,.testimonials{border-color:#36363c;} .price-plan .button,.price-plan-pro .button{color:#e3e5f1;border-color:#626169;background:transparent;} .price-plan .button:hover,.price-plan-pro .button:hover{background:#343439;} .price-plan-pro.tap-highlight{background:#263e50;} .price-plan.tap-highlight{background:#44402a;} .hire-bar{background:repeating-linear-gradient(135deg,#65616b 0 2px,#39373f 2px 8px);} .flow-station{background:#1c1e21;border-color:#414046;color:#91939d;} .flow-line{background:repeating-linear-gradient(to right,#625d68 0 4px,transparent 4px 10px);} .client-logo{background:#91939d;} .meaning-guide{stroke:#77717e;} .assembly-outline,.brand-boundary,.build-frame,.service:hover .assembly-outline,.service:hover .brand-boundary,.service:hover .build-frame{stroke:#91939d;} .central-piece,.service:hover .central-piece{fill:#e3e5f1;stroke:#e3e5f1;} .identity-1 .identity-shape,.build-piece-0{fill:#e3e5f1;stroke:#e3e5f1;} .identity-3 .identity-shape,.build-piece{fill:#1c1e21;stroke:#91939d;} .build-piece-0{fill:#e3e5f1;stroke:#e3e5f1;} .build-piece-1{fill:#c5dfa6;stroke:#87a869;}.build-piece-2{fill:#d8bbeb;stroke:#aa7ac8;}.build-piece-3{fill:#77717e;stroke:#91939d;} .subscription-flow,.pricing-refresh,.process,.faq,.one-project,footer{border-color:#303034;} .button{background:#e3e5f1;border-color:#e3e5f1;color:#0e0f11;} .button.light{background:transparent;color:#e3e5f1;border-color:#626169;} .button:hover{background:#dedbe2;color:#0e0f11;} .contact{background:#1c1e21;} .contact h2,.process-intro h3,.faq h3,.one-project h3{color:#e3e5f1;} } .rock-rain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1000}.rock-particle{position:absolute;line-height:1;user-select:none} [data-framer-root]>.updated-hawl:first-of-type{padding-top:72px;} .updated-hawl:has(.figma-hero){padding-top:72px;} #subscription-contact { border:1px solid #34363b; border-radius:24px; background:#1c1e21; color:#e3e5f1; padding:32px; width:min(480px,calc(100vw - 32px)); font:14px/1.5 Inter,sans-serif; } #subscription-contact::backdrop { background:rgba(0,0,0,.65); } #subscription-contact h2 {font:500 20px/1.3 Inter,sans-serif; margin-bottom:8px;} #subscription-contact p {color:#91939d; margin-bottom:24px;} #subscription-contact label {display:block; color:#91939d; font-size:12px; margin:16px 0;} #subscription-contact input,#subscription-contact textarea {display:block; width:100%; margin-top:6px; padding:12px; border:1px solid #34363b; border-radius:8px; background:#0e0f11; color:#e3e5f1; font:14px Inter,sans-serif;} #subscription-contact button[type=submit] {width:100%; border:0; border-radius:8px; padding:12px; background:#82f277; cursor:pointer; font:500 12px Inter,sans-serif;} #subscription-contact .contact-close {position:absolute; right:16px; top:12px; background:none; border:0; color:#91939d; font-size:24px; cursor:pointer;} /* Shared palette and typography across the live baseline and updated blocks. */ :root {--hawl-background:#0e0f11;--hawl-card:#1c1e21;--hawl-text:#e3e5f1;--hawl-muted:#91939d;color-scheme:dark;} html,body,#main {background:var(--hawl-background);color:var(--hawl-text);font-family:Inter,Arial,sans-serif;} .updated-hawl {background:var(--hawl-background);--paper:var(--hawl-background);--soft:var(--hawl-card);--ink:var(--hawl-text);--muted:var(--hawl-muted);} .framer-text {--framer-font-family:Inter,Arial,sans-serif!important;font-family:Inter,Arial,sans-serif!important;} .hawl-section-title {--framer-font-family:Waldenburg,Arial,sans-serif!important;font-family:Waldenburg,Arial,sans-serif!important;--framer-font-weight:300!important;font-weight:300!important;--framer-font-size:32px!important;font-size:32px!important;--framer-line-height:34px!important;line-height:34px!important;} .hawl-section-title .framer-text {font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;} /* Hero emphasis from Figma node 533:10214. */ .updated-hawl .figma-hero h1 {color:#e3e5f1;} .updated-hawl .figma-hero h1 .hero-title-secondary {color:rgba(227,229,241,.5);} /* Availability beacon: a steady centre with a soft expanding halo. */ .updated-hawl .availability {position:relative;} .updated-hawl .availability img {position:relative;z-index:1;} .updated-hawl .availability::before {content:"";position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:rgba(130,242,119,.25);pointer-events:none;animation:availability-beacon 2.4s ease-out infinite;} @keyframes availability-beacon {0%{transform:scale(.85);opacity:.8;}75%,100%{transform:scale(2.1);opacity:0;}} @media(prefers-reduced-motion:reduce){.updated-hawl .availability::before{animation:none;opacity:.3;}} .framer-14x5va7 .brand-ribbon {width:max-content!important;max-width:none!important;flex:none;animation:brand-ribbon-right var(--brand-duration,100s) linear infinite;} .framer-14x5va7 .brand-ribbon > li {flex:none;} @keyframes brand-ribbon-right {from{transform:translateX(calc(-50% - 5px));}to{transform:translateX(0);}} @media(prefers-reduced-motion:reduce){.framer-14x5va7 .brand-ribbon{animation:none;}} /* Figma 533:10244: two-tone section heading and compact card spacing. */ .updated-hawl .figma-services .section-heading h3 .service-title-secondary{color:rgba(227,229,241,.5);} .updated-hawl .figma-services .service-grid{gap:8px;} /* Front-facing moulded pieces, preserving the existing assembly motion. */ .updated-hawl .meaning-diagram .assembly-piece, .updated-hawl .meaning-diagram .identity-shape, .updated-hawl .meaning-diagram .build-piece { fill:var(--volume-face)!important;stroke:var(--volume-rim)!important;stroke-width:3px;paint-order:stroke fill; filter:drop-shadow(0 3px 0 #08090a) drop-shadow(0 5px 2px rgba(0,0,0,.4)); } .updated-hawl .how-it-works{max-width:960px;padding:96px 0 112px;--how-progress:0;} .updated-hawl .how-intro{text-align:center;max-width:480px;margin:0 auto 96px;} .updated-hawl .how-intro h2{font:500 40px/44px Inter,Arial,sans-serif;letter-spacing:-.4px;color:#e3e5f1;margin:0 0 20px;} .updated-hawl .how-intro h2 span{color:rgba(227,229,241,.5);} .updated-hawl .how-intro p{font:400 14px/20px Inter,Arial,sans-serif;color:#91939d;letter-spacing:-.42px;} .updated-hawl .how-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:28px;padding:12px 24px;border-radius:40px;background:#e3e5f1;color:#0e0f11;font:500 14px/20px Inter,Arial,sans-serif;transition:background .2s;} .updated-hawl .how-cta:hover{background:#82f277;} .updated-hawl .how-timeline{position:relative;} .updated-hawl .how-track{position:absolute;top:0;left:8px;right:8px;height:8px;border-radius:8px;background:#1c1e21;overflow:hidden;} .updated-hawl .how-track>span{display:block;width:100%;height:100%;transform:scaleX(var(--how-progress));transform-origin:left;background:linear-gradient(90deg,#82f277,#e677f2);border-radius:inherit;} .updated-hawl .how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:55.5px;list-style:none;padding:0;margin:0;} .updated-hawl .how-steps li{position:relative;padding-top:80px;} .updated-hawl .how-steps li:nth-child(2){text-align:center;} .updated-hawl .how-steps li:nth-child(3){text-align:right;} .updated-hawl .how-marker{position:absolute;top:-4px;left:0;width:16px;height:16px;border:3px solid #0e0f11;background:#555861;border-radius:50%;transition:background .25s,box-shadow .25s;} .updated-hawl .how-steps li:nth-child(2) .how-marker{left:calc(50% - 8px);} .updated-hawl .how-steps li:nth-child(3) .how-marker{left:auto;right:0;} .updated-hawl .how-marker:after{content:"";position:absolute;top:22px;left:4px;height:40px;border-left:1px dashed #393b42;} .updated-hawl .how-steps li.is-reached .how-marker{background:#82f277;box-shadow:0 0 16px #82f27730;} .updated-hawl .how-steps li:last-child.is-reached .how-marker{background:#e677f2;box-shadow:0 0 16px #e677f230;} .updated-hawl .how-number{font:500 12px/18px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .how-steps h3{font:500 20px/24px Inter,Arial,sans-serif;color:#e3e5f1;letter-spacing:-.6px;margin:8px 0 12px;} .updated-hawl .how-steps p{font:400 14px/20px Inter,Arial,sans-serif;color:#91939d;letter-spacing:-.42px;} @media(max-width:680px){.updated-hawl .how-it-works{padding:64px 0;}.updated-hawl .how-intro{margin-bottom:56px;}.updated-hawl .how-steps{grid-template-columns:1fr;gap:32px;padding-left:36px;}.updated-hawl .how-steps li,.updated-hawl .how-steps li:nth-child(2),.updated-hawl .how-steps li:nth-child(3){text-align:left;padding-top:0;}.updated-hawl .how-marker,.updated-hawl .how-steps li:nth-child(2) .how-marker,.updated-hawl .how-steps li:nth-child(3) .how-marker{left:-36px;right:auto;top:2px;}.updated-hawl .how-marker:after{display:none;}.updated-hawl .how-track{left:4px;right:auto;top:10px;bottom:10px;width:8px;height:auto;}.updated-hawl .how-track>span{transform:scaleY(var(--how-progress));transform-origin:top;background:linear-gradient(#82f277,#e677f2);}} .updated-hawl .client-pricing{max-width:1152px;padding:96px 0;} .updated-hawl .pricing-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:40px;} .updated-hawl .pricing-intro h2{font:300 32px/34px Waldenburg,Arial,sans-serif;letter-spacing:-.96px;color:#e3e5f1;} .updated-hawl .pricing-intro h2 span{color:rgba(227,229,241,.5);} .updated-hawl .pricing-intro>p,.updated-hawl .cost-caption,.updated-hawl .client-plan-description,.updated-hawl .cost-result p,.updated-hawl .pricing-note{font:400 14px/21px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .cost-story{padding:36px;border-radius:24px;background:#1c1e21;--cost-reveal:0;} .updated-hawl .cost-story-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;} .updated-hawl .cost-label{font:500 14px/20px Inter,Arial,sans-serif;color:#e3e5f1;display:flex;align-items:center;gap:8px;} .updated-hawl .cost-label i{width:8px;height:8px;border-radius:50%;background:#82f277;} .updated-hawl .cost-amount{font:300 40px/44px Waldenburg,Arial,sans-serif;letter-spacing:-1.2px;margin:16px 0 8px;} .updated-hawl .cost-amount small,.updated-hawl .client-plan-price small{font:400 14px/20px Inter,Arial,sans-serif;color:#91939d;letter-spacing:0;} .updated-hawl .cost-chart{display:grid;gap:20px;margin:36px 0;} .updated-hawl .cost-bar-row{display:grid;grid-template-columns:110px 1fr 64px;gap:20px;align-items:center;font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .cost-bar-row strong{font-weight:500;color:#e3e5f1;text-align:right;} .updated-hawl .cost-bar-track{height:32px;overflow:hidden;border-radius:8px;background:#0e0f11;} .updated-hawl .cost-bar{height:100%;border-radius:8px;transform:scaleX(var(--cost-reveal));transform-origin:left;} .updated-hawl .cost-bar-hire{width:100%;background:repeating-linear-gradient(120deg,#555861 0 2px,#34363c 2px 8px);} .updated-hawl .cost-bar-hawl{width:46.0615%;background:linear-gradient(90deg,#82f277,#b1ffa8);} .updated-hawl .cost-result{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid #34363c;padding-top:24px;align-items:center;} .updated-hawl .cost-counter{font:300 40px/44px Waldenburg,Arial,sans-serif;color:#82f277;letter-spacing:-1.2px;} .updated-hawl .client-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:960px;margin:32px auto 0;} .updated-hawl .client-plan{display:flex;flex-direction:column;background:#1c1e21;border-radius:24px;padding:32px;} .updated-hawl .client-plan-top h3{font:500 20px/24px Inter,Arial,sans-serif;letter-spacing:-.6px;} .updated-hawl .client-plan-top>span{display:block;font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;margin-top:8px;} .updated-hawl .client-plan-description{margin:20px 0;min-height:42px;} .updated-hawl .client-plan-price{font:300 40px/44px Waldenburg,Arial,sans-serif;letter-spacing:-1.2px;margin-bottom:24px;} .updated-hawl .client-plan ul{list-style:none;padding:24px 0;margin:0 0 24px;border-top:1px solid #34363c;display:grid;gap:16px;font:400 14px/21px Inter,Arial,sans-serif;} .updated-hawl .client-plan li{position:relative;padding-left:20px;} .updated-hawl .client-plan li:before{content:'+';position:absolute;left:0;color:#91939d;} .updated-hawl .client-plan-cta{margin-top:auto;width:100%;padding:12px 16px;border:1px solid #555861;border-radius:40px;color:#e3e5f1;background:transparent;font:500 14px/20px Inter,Arial,sans-serif;transition:background .2s,color .2s;} .updated-hawl .client-plan-cta:hover{background:#e3e5f1;color:#0e0f11;} .updated-hawl .client-plan-pro .client-plan-cta:hover{background:#e677f2;color:#0e0f11;} .updated-hawl .pricing-note{max-width:600px;text-align:center;margin:24px auto 0;} @media(max-width:680px){.updated-hawl .client-pricing{padding:64px 0;}.updated-hawl .pricing-intro,.updated-hawl .cost-story-top,.updated-hawl .cost-result,.updated-hawl .client-plan-grid{grid-template-columns:1fr;gap:24px;}.updated-hawl .cost-story,.updated-hawl .client-plan{padding:24px;}.updated-hawl .cost-bar-row{grid-template-columns:1fr 48px;gap:8px;}.updated-hawl .cost-bar-row>span{grid-column:1/-1;}.updated-hawl .cost-amount,.updated-hawl .client-plan-price,.updated-hawl .cost-counter{font-size:36px;}} .updated-hawl .pricing-alternative{max-width:1152px;padding:80px 0 96px;border-top:1px solid #34363c;} .updated-hawl .alternate-summary{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:32px;} .updated-hawl .alternate-label{font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .alternate-summary h2{font:300 32px/34px Waldenburg,Arial,sans-serif;letter-spacing:-.96px;margin-top:12px;color:#e3e5f1;} .updated-hawl .alternate-summary h2 span{color:rgba(227,229,241,.5);} .updated-hawl .alternate-cost{display:grid;grid-template-columns:1fr 1px 1fr;gap:12px 24px;} .updated-hawl .alternate-cost>div>span{font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .alternate-cost strong{display:block;font:300 32px/38px Waldenburg,Arial,sans-serif;color:#e3e5f1;margin-top:8px;white-space:nowrap;} .updated-hawl .alternate-cost>div:last-of-type strong{color:#82f277;} .updated-hawl .alternate-cost small{font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;margin-left:8px;} .updated-hawl .alternate-divider{background:#34363c;} .updated-hawl .alternate-cost>p{grid-column:1/-1;color:#91939d;font:400 12px/18px Inter,Arial,sans-serif;} .updated-hawl .alternate-plan-grid{max-width:none;margin:0;gap:8px;} .updated-hawl .alternate-plan-grid .client-plan{padding:28px;} .updated-hawl .alternate-plan-grid .client-plan-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;} .updated-hawl .alternate-plan-grid .client-plan-description{max-width:380px;} .updated-hawl .alternate-plan-grid .client-plan-price{margin:4px 0 20px;} .updated-hawl .alternate-plan-grid .client-plan li:before{content:'·';font-size:20px;color:#82f277;} .updated-hawl .alternate-plan-grid .client-plan-pro li:before{color:#e677f2;} .updated-hawl .alternate-plan-grid .client-plan-cta{border-radius:12px;} .updated-hawl .alternate-footer{display:flex;justify-content:space-between;gap:24px;margin-top:20px;color:#91939d;font:400 12px/18px Inter,Arial,sans-serif;} @media(max-width:680px){.updated-hawl .pricing-alternative{padding:64px 0;}.updated-hawl .alternate-summary{grid-template-columns:1fr;gap:28px;}.updated-hawl .alternate-cost{gap:12px 16px;}.updated-hawl .alternate-plan-grid .client-plan-top{display:block;}.updated-hawl .alternate-footer{flex-direction:column;gap:8px;}} .updated-hawl .pricing-lab{max-width:1152px;padding:96px 0;border-top:1px solid #34363c;} .updated-hawl .lab-heading{text-align:center;max-width:650px;margin:0 auto 40px;} .updated-hawl .lab-heading>span{font:400 12px/18px Inter,sans-serif;color:#91939d;} .updated-hawl .lab-heading h2{font:300 32px/34px Waldenburg,sans-serif;letter-spacing:-.96px;margin:16px 0;} .updated-hawl .lab-heading em{font-style:normal;color:rgba(227,229,241,.5);} .updated-hawl .lab-heading p,.updated-hawl .lab-description,.updated-hawl .lab-bottom,.updated-hawl .lab-assumption{font:400 14px/21px Inter,sans-serif;color:#91939d;} .updated-hawl .lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .updated-hawl .lab-grid-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:32px auto 0;} .updated-hawl .lab-card{padding:28px;border:1px solid #34363c;border-radius:24px;background:#1c1e21;display:flex;flex-direction:column;position:relative;overflow:hidden;} .updated-hawl .lab-pro{border-color:#e677f255;} .updated-hawl .lab-pro:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 100%,#e677f214,transparent 65%);} .updated-hawl .lab-card h3,.updated-hawl .lab-data h3{font:500 20px/24px Inter,sans-serif;letter-spacing:-.6px;} .updated-hawl .lab-symbol{color:#82f277;margin-bottom:20px;}.updated-hawl .lab-pro .lab-symbol{color:#e677f2;} .updated-hawl .lab-card svg,.updated-hawl .lab-bottom svg{width:20px;height:20px;flex:none;} .updated-hawl .lab-description{min-height:42px;margin:12px 0 24px;} .updated-hawl .lab-price{font:300 36px/40px Waldenburg,sans-serif;padding:20px 0;border-block:1px solid #34363c;} .updated-hawl .lab-price small{font:400 12px/18px Inter,sans-serif;color:#91939d;margin-left:8px;} .updated-hawl .lab-card ul{list-style:none;margin:24px 0 32px;padding:0;display:grid;gap:16px;} .updated-hawl .lab-card li{display:flex;gap:12px;font:400 14px/21px Inter,sans-serif;color:#91939d;} .updated-hawl .lab-card li svg{color:#e3e5f1;} .updated-hawl .lab-button{position:relative;width:100%;margin-top:auto;border:1px solid #555861;border-radius:40px;padding:12px 16px;background:#292b30;color:#e3e5f1;font:500 14px/20px Inter,sans-serif;transition:background .2s,color .2s;} .updated-hawl .lab-button:hover{background:#82f277;color:#0e0f11;}.updated-hawl .lab-pro .lab-button:hover{background:#e677f2;} .updated-hawl .lab-bottom{display:flex;justify-content:space-between;gap:32px;margin-top:16px;border:1px solid #34363c;border-radius:16px;padding:20px 24px;} .updated-hawl .lab-bottom>span{display:flex;align-items:center;gap:12px;}.updated-hawl .lab-bottom p{max-width:480px;font-size:12px;} .updated-hawl .lab-calculator{border:1px solid #34363c;border-radius:24px;overflow:hidden;background:#1c1e21;} .updated-hawl .lab-control{padding:28px;display:grid;grid-template-columns:1fr auto;gap:20px;font:500 14px/20px Inter,sans-serif;} .updated-hawl .lab-control output{font-variant-numeric:tabular-nums;color:#82f277;} .updated-hawl .lab-control input{grid-column:1/-1;width:100%;accent-color:#82f277;cursor:pointer;} .updated-hawl .lab-ticks{grid-column:1/-1;display:flex;justify-content:space-between;font:400 12px/18px Inter,sans-serif;color:#91939d;} .updated-hawl .lab-data{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #34363c;} .updated-hawl .lab-bars,.updated-hawl .lab-breakdown{padding:28px;}.updated-hawl .lab-breakdown{border-left:1px solid #34363c;} .updated-hawl .lab-data h3{margin-bottom:28px;} .updated-hawl .lab-data-row{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:24px;font:400 14px/20px Inter,sans-serif;color:#91939d;} .updated-hawl .lab-data-row strong{font-weight:500;color:#e3e5f1;font-variant-numeric:tabular-nums;} .updated-hawl .lab-data-track{grid-column:1/-1;height:8px;background:#0e0f11;border-radius:8px;overflow:hidden;} .updated-hawl .lab-data-track i{display:block;height:100%;background:#555861;border-radius:8px;transition:width .25s;} .updated-hawl .lab-data-track .lab-green{background:#82f277;}.updated-hawl .lab-data-track .lab-pink{background:#e677f2;} .updated-hawl .lab-breakdown dl{margin:0 0 28px;font:400 14px/20px Inter,sans-serif;color:#91939d;} .updated-hawl .lab-breakdown dl>div{display:flex;justify-content:space-between;margin:16px 0;}.updated-hawl .lab-breakdown dd{margin:0;color:#e3e5f1;} .updated-hawl .lab-saving{font:300 40px/44px Waldenburg,sans-serif;color:#82f277;} .updated-hawl .lab-breakdown p{font:400 12px/18px Inter,sans-serif;color:#91939d;} .updated-hawl .lab-assumption{padding:20px 28px;border-top:1px solid #34363c;font-size:12px;line-height:18px;} @media(max-width:800px){.updated-hawl .lab-grid{grid-template-columns:1fr;}.updated-hawl .lab-description{min-height:0;}.updated-hawl .lab-bottom{flex-direction:column;gap:12px;}} @media(max-width:680px){.updated-hawl .pricing-lab{padding:64px 0;}.updated-hawl .lab-data{grid-template-columns:1fr;}.updated-hawl .lab-breakdown{border-left:0;border-top:1px solid #34363c;}} /* Selected pricing: annual comparison followed by three borderless plans. */ .updated-hawl .client-pricing>.lab-grid{margin-top:32px;gap:8px;} .updated-hawl .client-pricing .lab-card{border:0;background:#1c1e21;} .updated-hawl .client-pricing .lab-pro:before{display:none;} .updated-hawl .client-pricing .lab-button{border:0;background:#292b30;} .updated-hawl .client-pricing .lab-button:hover{background:#82f277;color:#0e0f11;} .updated-hawl .client-pricing .lab-pro .lab-button:hover{background:#e677f2;} .updated-hawl .client-pricing .lab-price{border-top:0;} /* Pricing emphasis stays inside the Pro card without adding an outline. */ .updated-hawl .client-pricing>.lab-grid{margin-top:8px;} .updated-hawl .client-pricing .lab-pro:before{display:block;content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 85%,rgba(230,119,242,.16),rgba(230,119,242,.04) 45%,transparent 75%);opacity:.6;animation:pro-soft-glow 6s ease-in-out infinite;} .updated-hawl .client-pricing .lab-pro>*{position:relative;} @keyframes pro-soft-glow{0%,100%{opacity:.5;}50%{opacity:1;}} @media(prefers-reduced-motion:reduce){.updated-hawl .client-pricing .lab-pro:before{animation:none;opacity:.7;}} .updated-hawl .client-pricing .lab-pro:before{animation:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(ellipse at 65% 70%,rgba(230,119,242,.22),rgba(130,242,119,.07) 55%,transparent 85%);} .updated-hawl .client-pricing .lab-pro.demo-lit:before{opacity:1;} .updated-hawl .client-pricing .lab-pro .pro-demo-cursor{position:absolute;width:100px;height:100px;object-fit:contain;top:4px;right:24px;z-index:3;pointer-events:none;opacity:0;transform:translate(18px,24px) rotate(180deg);} .updated-hawl .client-pricing .lab-pro.demo-click .pro-demo-cursor{animation:pro-cursor-click 1.3s ease-in-out both;} .updated-hawl .client-pricing .lab-pro.demo-lit .lab-symbol{filter:drop-shadow(0 0 8px #e677f288);transition:filter .4s;} .updated-hawl .client-pricing .lab-pro.demo-feedback{animation:pro-click-response .4s ease;} @keyframes pro-cursor-click{0%{opacity:0;transform:translate(18px,24px) rotate(180deg);}30%,48%{opacity:1;transform:translate(0,0) rotate(180deg);}58%{opacity:1;transform:translate(0,-5px) rotate(180deg) scale(.93);}70%{opacity:1;transform:translate(0,0) rotate(180deg);}100%{opacity:0;transform:translate(12px,18px) rotate(180deg);}} @keyframes pro-click-response{0%,100%{transform:scale(1);}45%{transform:scale(.993);}} /* A single lilac light rises from the bottom of Pro while activated. */ .updated-hawl .client-pricing .lab-pro:before{background:linear-gradient(to top,rgba(185,133,242,.32) 0%,rgba(185,133,242,.19) 24%,rgba(185,133,242,.06) 52%,rgba(185,133,242,0) 78%);background-size:100% 120%;background-position:50% 0%;animation:pro-lilac-rise 4s ease-in-out infinite;} @keyframes pro-lilac-rise{0%,100%{background-position:50% 0%;}50%{background-position:50% 100%;}} @media(prefers-reduced-motion:reduce){.updated-hawl .client-pricing .lab-pro:before{animation:none;}} .updated-hawl .client-pricing .lab-pro.demo-lit .lab-price{color:#ffd954;} .updated-hawl .client-pricing .lab-price del{display:block;font:400 14px/20px Inter,sans-serif;color:#91939d;margin-top:8px;} .updated-hawl .client-pricing .pro-discount{display:inline-block;font:500 12px/18px Inter,sans-serif;color:#ffd954;background:#ffd95415;border-radius:8px;padding:4px 8px;margin-top:8px;} .updated-hawl .client-pricing .lab-pro .lab-price{min-height:120px;transition:color .3s;} .updated-hawl .client-pricing .lab-pro .lab-price{min-height:0;position:relative;padding-right:78px;white-space:nowrap;} .updated-hawl .client-pricing .lab-pro .lab-price small{display:block;margin-left:0;} .updated-hawl .client-pricing .lab-pro .pro-discount{position:absolute;right:0;top:24px;margin:0;} .updated-hawl .client-pricing .lab-pro .lab-price small{display:inline;margin-left:8px;} .updated-hawl .client-pricing .lab-price{display:flex;align-items:baseline;gap:8px;white-space:nowrap;} .updated-hawl .client-pricing .lab-price small,.updated-hawl .client-pricing .lab-pro .lab-price small{margin:0;flex:none;} .updated-hawl .client-pricing .plan-amount{font-variant-numeric:tabular-nums;} /* Lowercase typography throughout the page, including dynamic states. */ body,body *{text-transform:lowercase!important;} .updated-hawl .figma-services .service h4{font-family:Inter,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:500;letter-spacing:-.54px;} .updated-hawl .client-pricing .lab-button{background:#e3e5f1;color:#0e0f11;} .updated-hawl .client-pricing .lab-button:hover{background:#82f277;color:#0e0f11;} .updated-hawl .client-pricing .lab-pro .lab-button:hover{background:#e677f2;color:#0e0f11;} .updated-hawl .collaboration{max-width:1152px;padding:96px 0;display:grid;grid-template-columns:380px minmax(0,1fr);gap:80px;align-items:start;} .updated-hawl .collab-intro{position:sticky;top:120px;} .updated-hawl .collab-label,.updated-hawl .collab-position{font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .collab-intro h2,.updated-hawl .fit-heading h2{font:300 32px/34px Waldenburg,Arial,sans-serif;letter-spacing:-.96px;margin:20px 0;color:#e3e5f1;} .updated-hawl .collab-intro h2 span,.updated-hawl .fit-heading h2 span{color:rgba(227,229,241,.5);} .updated-hawl .collab-intro>p,.updated-hawl .collab-item p,.updated-hawl .fit-heading>p,.updated-hawl .fit-card p,.updated-hawl .fit-footer p{font:400 14px/21px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .collab-meter{height:4px;border-radius:4px;background:#1c1e21;margin:36px 0 12px;max-width:200px;overflow:hidden;} .updated-hawl .collab-meter span{display:block;width:100%;height:100%;transform:scaleX(var(--collab-progress,.142857));transform-origin:left;background:#82f277;transition:transform .4s ease;} .updated-hawl .collab-list{display:grid;} .updated-hawl .collab-item{display:grid;grid-template-columns:28px 1fr;gap:20px;padding:32px 0;min-height:205px;border-bottom:1px solid #34363c;} .updated-hawl .collab-item:first-child{padding-top:0;} .updated-hawl .collab-item:last-child{border-bottom:0;} .updated-hawl .collab-number{font:400 12px/24px Inter,Arial,sans-serif;color:#91939d;transition:color .3s;} .updated-hawl .collab-item h3,.updated-hawl .fit-card h3{font:500 18px/24px Inter,Arial,sans-serif;letter-spacing:-.54px;color:#e3e5f1;margin:0 0 12px;} .updated-hawl .collab-item small,.updated-hawl .fit-card small{display:block;font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;margin-top:20px;} .updated-hawl .collab-item.is-current .collab-number{color:#82f277;} .updated-hawl .client-fit{max-width:1152px;padding:96px 0;} .updated-hawl .fit-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:32px;} .updated-hawl .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .updated-hawl .fit-card{padding:28px;background:#1c1e21;border-radius:24px;display:flex;flex-direction:column;} .updated-hawl .fit-card>span{font:500 12px/18px Inter,Arial,sans-serif;color:#82f277;margin-bottom:24px;} .updated-hawl .fit-card:nth-child(even)>span{color:#e677f2;} .updated-hawl .fit-card small{margin-top:auto;padding-top:24px;} .updated-hawl .fit-footer{display:flex;align-items:center;justify-content:space-between;gap:48px;margin-top:24px;} .updated-hawl .fit-footer p{max-width:640px;} .updated-hawl .fit-footer .how-cta{margin-top:0;flex:none;} @media(max-width:900px){.updated-hawl .collaboration{grid-template-columns:300px minmax(0,1fr);gap:32px;}} @media(max-width:680px){.updated-hawl .collaboration,.updated-hawl .fit-heading,.updated-hawl .fit-grid{grid-template-columns:1fr;gap:24px;}.updated-hawl .collaboration,.updated-hawl .client-fit{padding:64px 0;}.updated-hawl .collab-intro{position:static;}.updated-hawl .collab-item{min-height:0;padding:28px 0;}.updated-hawl .fit-footer{flex-direction:column;align-items:start;gap:20px;}} @media(prefers-reduced-motion:reduce){.updated-hawl .collab-meter span{transition:none;}} /* Collaboration geometry from Figma 538:10374. */ .updated-hawl .collab-list{gap:40px;} .updated-hawl .collab-item,.updated-hawl .collab-item:first-child,.updated-hawl .collab-item:last-child{min-height:0;padding:0 0 40px;grid-template-columns:80px minmax(0,1fr);gap:20px;border-bottom:1px solid #34363c;} .updated-hawl .collab-number{font:400 40px/40px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .collab-item h3{font:500 18px/24px Inter,Arial,sans-serif;margin-bottom:12px;letter-spacing:-.54px;} .updated-hawl .collab-item p{font:400 14px/21px Inter,Arial,sans-serif;} .updated-hawl .collab-icons{position:relative;width:80px;height:84px;margin-top:48px;} .updated-hawl .collab-icon{position:absolute;inset:0;width:80px;height:84px;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s ease,transform .35s ease;} .updated-hawl .collab-icon.is-visible{opacity:1;transform:translateY(0) scale(1);} @media(max-width:680px){.updated-hawl .collab-item,.updated-hawl .collab-item:first-child,.updated-hawl .collab-item:last-child{grid-template-columns:52px minmax(0,1fr);gap:16px;padding-bottom:28px;}.updated-hawl .collab-list{gap:28px;}.updated-hawl .collab-number{font-size:32px;line-height:36px;}.updated-hawl .collab-icons{margin-top:28px;}} @media(prefers-reduced-motion:reduce){.updated-hawl .collab-icon{transition:none;}} .updated-hawl .collab-icons{width:160px;height:160px;} .updated-hawl .collab-icon{width:160px;height:160px;object-fit:contain;} .updated-hawl .client-reviews{max-width:1152px;padding:96px 0;} .updated-hawl .reviews-heading{text-align:center;margin:0 auto 40px;} .updated-hawl .reviews-heading>span{font:400 12px/18px Inter,sans-serif;color:#91939d;} .updated-hawl .reviews-heading h2{font:300 32px/34px Waldenburg,sans-serif;letter-spacing:-.96px;margin:16px 0;} .updated-hawl .reviews-heading em{font-style:normal;color:rgba(227,229,241,.5);} .updated-hawl .reviews-heading>p{font:400 14px/21px Inter,sans-serif;color:#91939d;} .updated-hawl .review-stage{display:grid;} .updated-hawl .review-slide{grid-area:1/1;display:grid;grid-template-columns:288px minmax(0,1fr);gap:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease;} .updated-hawl .review-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;} .updated-hawl .review-portrait{width:288px;height:360px;object-fit:cover;border-radius:24px;image-rendering:auto;} .updated-hawl .review-content{background:#1c1e21;border-radius:24px;padding:32px;display:flex;flex-direction:column;} .updated-hawl .review-author{display:flex;justify-content:space-between;gap:24px;align-items:start;} .updated-hawl .review-author h3{font:500 18px/24px Inter,sans-serif;letter-spacing:-.54px;} .updated-hawl .review-author p{font:400 12px/18px Inter,sans-serif;color:#91939d;margin-top:6px;} .updated-hawl .review-link{display:flex;align-items:center;gap:8px;color:#e3e5f1;font:600 18px/24px Inter,sans-serif;} .updated-hawl .review-link span{font:400 12px/18px Inter,sans-serif;color:#91939d;} .updated-hawl .review-link:hover{color:#82f277;} .updated-hawl .review-content blockquote{font:400 16px/25px Inter,sans-serif;color:#e3e5f1;margin:28px 0;white-space:pre-line;} .updated-hawl .review-company{display:flex;align-items:center;gap:12px;margin-top:auto;font:500 14px/20px Inter,sans-serif;} .updated-hawl .review-company>span{font:400 12px/18px Inter,sans-serif;color:#91939d;} .updated-hawl .review-controls{display:flex;align-items:center;gap:24px;margin-top:20px;font:400 12px/18px Inter,sans-serif;color:#91939d;} .updated-hawl .review-controls>div{display:flex;gap:8px;} .updated-hawl .review-prev,.updated-hawl .review-next{width:48px;height:36px;background:#e3e5f1;color:#0e0f11;border:0;border-radius:40px;} .updated-hawl .review-prev:hover,.updated-hawl .review-next:hover{background:#82f277;} .updated-hawl .review-pause{margin-left:auto;background:none;color:#91939d;font:400 12px/18px Inter,sans-serif;} @media(max-width:680px){.updated-hawl .client-reviews{padding:64px 0;}.updated-hawl .review-slide{grid-template-columns:1fr;}.updated-hawl .review-portrait{width:120px;height:120px;}.updated-hawl .review-content{padding:24px;}.updated-hawl .review-author{gap:12px;}.updated-hawl .review-link span{display:none;}.updated-hawl .review-content blockquote{font-size:14px;line-height:21px;}} @media(prefers-reduced-motion:reduce){.updated-hawl .review-slide{transition:none;}} /* Figma testimonial composition adapted to the 1152px site container. */ .updated-hawl .reviews-heading{margin-bottom:48px;} .updated-hawl .review-slide{grid-template-columns:288px minmax(0,1fr) 220px;gap:8px;height:372px;} .updated-hawl .review-photo{position:relative;height:372px;border-radius:28px;overflow:hidden;} .updated-hawl .review-portrait{width:288px;height:372px;border-radius:28px;} .updated-hawl .review-photo:after{content:'';position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,#0e0f1180);pointer-events:none;} .updated-hawl .review-photo-controls{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:1;} .updated-hawl .review-photo-controls button{width:44px;height:24px;background:#ffffff29;color:#e3e5f1;backdrop-filter:blur(2px);} .updated-hawl .review-content{padding:40px;border-radius:28px;height:372px;min-width:0;} .updated-hawl .review-author h3{font:500 16px/24px Inter,sans-serif;} .updated-hawl .review-author p{font:400 14px/21px Inter,sans-serif;} .updated-hawl .review-brand{font:500 14px/20px Inter,sans-serif;color:#e3e5f1;max-width:130px;text-align:right;} .updated-hawl .review-content blockquote{font:400 18px/27px Inter,sans-serif;margin:32px 0 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555861 transparent;} .updated-hawl .review-sidebar{display:grid;grid-template-rows:1fr 1fr;gap:8px;} .updated-hawl .review-fact{background:#1c1e21;border-radius:28px;padding:28px 24px;display:flex;flex-direction:column;justify-content:end;gap:12px;} .updated-hawl .review-fact>span{font:400 14px/21px Inter,sans-serif;color:#91939d;} .updated-hawl .review-fact strong{font:300 24px/28px Waldenburg,sans-serif;} .updated-hawl .review-controls{margin-top:16px;} @media(max-width:1000px){.updated-hawl .review-slide{grid-template-columns:220px minmax(0,1fr) 170px;}.updated-hawl .review-portrait{width:220px;}.updated-hawl .review-content{padding:24px;}.updated-hawl .review-fact{padding:24px 16px;}.updated-hawl .review-author{flex-direction:column;gap:8px;}.updated-hawl .review-brand{text-align:left;}} @media(max-width:680px){.updated-hawl .review-slide{grid-template-columns:120px minmax(0,1fr);height:auto;align-content:start;}.updated-hawl .review-photo,.updated-hawl .review-portrait{width:120px;height:160px;}.updated-hawl .review-photo-controls{bottom:12px;}.updated-hawl .review-sidebar{height:160px;grid-column:2;grid-row:1;}.updated-hawl .review-fact{padding:12px 16px;border-radius:20px;gap:4px;}.updated-hawl .review-fact strong{font-size:18px;line-height:22px;}.updated-hawl .review-fact>span{font-size:12px;line-height:18px;}.updated-hawl .review-link span{display:inline;}.updated-hawl .review-content{grid-column:1/-1;grid-row:2;height:360px;}.updated-hawl .review-author{flex-direction:row;}.updated-hawl .review-content blockquote{font-size:14px;line-height:21px;}} /* Reviewer selector and the updated Figma quote/metrics layout. */ .updated-hawl .review-avatars{display:flex;justify-content:center;gap:8px;margin:0 0 48px;} .updated-hawl .review-avatar{position:relative;width:48px;height:48px;padding:4px;border:0;background:transparent;cursor:pointer;opacity:.4;transition:opacity .25s;} .updated-hawl .review-avatar.is-active,.updated-hawl .review-avatar:hover{opacity:1;} .updated-hawl .review-avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover;} .updated-hawl .review-avatar svg{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg);fill:none;stroke:#82f277;stroke-width:2;stroke-dasharray:138.23;stroke-dashoffset:calc(138.23 * (1 - var(--progress,0)));opacity:0;} .updated-hawl .review-avatar.is-active svg{opacity:1;} .updated-hawl .review-avatar:focus-visible{outline:2px solid #e3e5f1;outline-offset:3px;border-radius:50%;} .updated-hawl .review-slide{grid-template-columns:minmax(0,1fr) 242px;height:390px;} .updated-hawl .review-content{height:390px;padding:40px;} .updated-hawl .review-author{flex-direction:row;align-items:center;gap:16px;justify-content:start;} .updated-hawl .review-author .review-portrait{width:48px;height:48px;border-radius:50%;flex:none;} .updated-hawl .review-author>div:not(.review-brand){min-width:0;} .updated-hawl .review-author h3{display:flex;align-items:center;gap:12px;font:500 20px/28px Inter,sans-serif;} .updated-hawl .review-author p{margin-top:2px;} .updated-hawl .review-brand{margin-left:auto;max-width:140px;flex-shrink:0;} .updated-hawl .review-company-logo{max-width:120px;width:auto;height:28px;object-fit:contain;} .updated-hawl .review-content blockquote{margin:40px 0 0;font:400 16px/24px Inter,sans-serif;color:#91939d;} .updated-hawl .review-fact{justify-content:center;padding:28px;gap:12px;} .updated-hawl .review-fact strong{font:300 40px/44px Waldenburg,sans-serif;color:#e3e5f1;} .updated-hawl .review-fact small{font:400 11px/16px Inter,sans-serif;color:#91939d;} @media(max-width:800px){.updated-hawl .review-slide{grid-template-columns:minmax(0,1fr) 190px;}.updated-hawl .review-content{padding:24px;}.updated-hawl .review-author h3{font-size:16px;line-height:24px;}.updated-hawl .review-author{gap:12px;}.updated-hawl .review-brand{max-width:90px;}.updated-hawl .review-company-logo{max-width:90px;}.updated-hawl .review-fact{padding:20px;}} @media(max-width:680px){.updated-hawl .review-slide{grid-template-columns:1fr;height:auto;}.updated-hawl .review-content{grid-column:1;grid-row:1;height:420px;}.updated-hawl .review-sidebar{grid-column:1;grid-row:2;grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:auto;}.updated-hawl .review-author{flex-wrap:wrap;}.updated-hawl .review-brand{margin-left:64px;max-width:120px;}.updated-hawl .review-avatars{margin-bottom:24px;}.updated-hawl .review-content blockquote{margin-top:24px;}.updated-hawl .review-fact{min-height:150px;}} /* Open testimonial layout from Figma 541:16615. */ .updated-hawl .client-reviews{max-width:960px;} .updated-hawl .review-slide{display:flex;flex-direction:column;gap:48px;height:auto;min-width:0;} .updated-hawl .review-slide>blockquote{margin:0;font:500 20px/32px Inter,sans-serif;letter-spacing:-.54px;color:#e3e5f1;white-space:pre-line;} .updated-hawl .review-footer{display:flex;justify-content:space-between;align-items:center;gap:32px;} .updated-hawl .review-author{gap:24px;flex-wrap:nowrap;} .updated-hawl .review-brand{margin:0;max-width:140px;text-align:left;} .updated-hawl .review-company-logo{height:32px;max-width:118px;} .updated-hawl .review-divider{flex:none;} .updated-hawl .review-author h3{font:500 20px/32px Inter,sans-serif;gap:8px;} .updated-hawl .review-author p{font:400 14px/21px Inter,sans-serif;} .updated-hawl .review-sidebar{display:flex;gap:40px;align-items:center;height:auto;} .updated-hawl .review-fact{padding:0;background:none;border-radius:0;gap:0;min-height:0;} .updated-hawl .review-fact+.review-fact{padding-left:40px;border-left:1px solid #292b2e;} .updated-hawl .review-fact strong{font:500 20px/32px Inter,sans-serif;} .updated-hawl .review-fact>span{font:400 14px/21px Inter,sans-serif;white-space:nowrap;} .updated-hawl .review-link img{width:20px;height:20px;} @media(max-width:800px){.updated-hawl .review-footer{flex-wrap:wrap;}.updated-hawl .review-sidebar{gap:24px;}.updated-hawl .review-fact+.review-fact{padding-left:24px;}.updated-hawl .review-slide>blockquote{font-size:18px;line-height:28px;}.updated-hawl .review-author h3{font-size:18px;}} @media(max-width:480px){.updated-hawl .review-slide{gap:32px;}.updated-hawl .review-author{gap:16px;}.updated-hawl .review-company-logo{max-width:80px;height:26px;}.updated-hawl .review-author h3{font-size:16px;line-height:24px;}.updated-hawl .review-author p{font-size:12px;line-height:18px;}.updated-hawl .review-footer{gap:24px;}} .updated-hawl .review-fact .review-metric-example{margin-top:4px;font:400 11px/16px Inter,sans-serif;color:#91939d;} .updated-hawl .review-fact strong{color:#82F277;} /* Updated Figma reviewer footer typography (544:16998). */ .updated-hawl .review-author h3{font-size:18px;line-height:24px;letter-spacing:-.182px;} .updated-hawl .review-author p{font-size:14px;line-height:21px;letter-spacing:-.182px;} .updated-hawl .review-fact strong{font-size:20px;line-height:24px;letter-spacing:-.182px;} .updated-hawl .review-fact>span{font-size:14px;line-height:21px;} .updated-hawl .review-company-logo{filter:brightness(0) invert(1);} /* Audience scenarios: a single table with six text-only cells. */ .updated-hawl .fit-heading{display:flex;flex-direction:column;gap:16px;text-align:center;margin:0 auto 48px;} .updated-hawl .fit-heading h2{margin:0;} .updated-hawl .fit-heading>p{max-width:528px;} .updated-hawl .fit-table{background:#1c1e21;border-radius:28px;overflow:hidden;} .updated-hawl .fit-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:16px 24px;} .updated-hawl .fit-card{background:transparent;border-radius:0;padding:36px 28px;text-align:center;justify-content:center;position:relative;} .updated-hawl .fit-card h3{font:500 18px/24px Inter,sans-serif;letter-spacing:-.3px;margin:0 0 12px;} .updated-hawl .fit-card p{font:400 14px/21px Inter,sans-serif;max-width:290px;margin:0 auto;} .updated-hawl .fit-card:nth-child(-n+3){border-bottom:1px solid #303237;} .updated-hawl .fit-card:not(:nth-child(3n)):after{content:'';position:absolute;right:0;top:32px;bottom:32px;width:1px;background:#303237;} .updated-hawl .fit-social-proof{display:flex;align-items:center;justify-content:center;gap:20px;padding:24px;background:#24262a;} .updated-hawl .fit-customer-photos{display:flex;padding-left:8px;} .updated-hawl .fit-customer-photos img{width:32px;height:32px;object-fit:cover;border-radius:50%;margin-left:-8px;box-shadow:0 0 0 3px #24262a;} .updated-hawl .fit-social-proof p{font:400 14px/21px Inter,sans-serif;color:#91939d;margin:0;} .updated-hawl .fit-social-proof strong{font-weight:500;color:#e3e5f1;} @media(max-width:800px){.updated-hawl .fit-card{padding:28px 20px;}.updated-hawl .fit-grid{padding:8px 16px;}} @media(max-width:680px){.updated-hawl .fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}.updated-hawl .fit-card:nth-child(-n+4){border-bottom:1px solid #303237;}.updated-hawl .fit-card:not(:nth-child(3n)):after{display:none;}.updated-hawl .fit-card:nth-child(odd):after{display:block;}.updated-hawl .fit-social-proof{gap:16px;padding:24px 16px;}.updated-hawl .fit-heading{margin-bottom:32px;}} @media(max-width:420px){.updated-hawl .fit-grid{grid-template-columns:1fr;}.updated-hawl .fit-card:not(:last-child){border-bottom:1px solid #303237;}.updated-hawl .fit-card:nth-child(odd):after{display:none;}.updated-hawl .fit-card{padding:28px 16px;}.updated-hawl .fit-social-proof{flex-direction:column;gap:12px;}} /* Audience split layout: introduction left, six scenarios right. */ .updated-hawl .client-fit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:80px;align-items:start;} .updated-hawl .fit-heading{align-items:flex-start;text-align:left;margin:0;gap:20px;} .updated-hawl .fit-heading h2{max-width:350px;} .updated-hawl .fit-heading>p{max-width:340px;} .updated-hawl .fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;padding:0;} .updated-hawl .fit-card{padding:0;text-align:left;justify-content:flex-start;} .updated-hawl .fit-card:nth-child(n){border:0;} .updated-hawl .fit-card:nth-child(n):after{display:none;} .updated-hawl .fit-card h3{margin:0 0 12px;} .updated-hawl .fit-card p{max-width:none;margin:0;} .updated-hawl .fit-social-proof{background:none;padding:0;margin-top:20px;justify-content:flex-start;gap:16px;flex-wrap:wrap;} .updated-hawl .fit-customer-photos img{box-shadow:0 0 0 3px #0e0f11;} @media(max-width:900px){.updated-hawl .client-fit{gap:40px;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);}.updated-hawl .fit-grid{gap:32px 24px;}} @media(max-width:680px){.updated-hawl .client-fit{grid-template-columns:1fr;gap:40px;}.updated-hawl .fit-heading h2,.updated-hawl .fit-heading>p{max-width:480px;}.updated-hawl .fit-social-proof{flex-direction:row;align-items:center;margin-top:8px;}.updated-hawl .fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:420px){.updated-hawl .fit-grid{grid-template-columns:1fr;gap:28px;}} /* Figma 548:17421: exact desktop proportions and compact audience typography. */ .updated-hawl .client-fit{max-width:960px;grid-template-columns:380px minmax(0,1fr);gap:80px;padding:96px 0;} .updated-hawl .fit-heading{gap:20px;} .updated-hawl .fit-heading h2,.updated-hawl .fit-heading>p{max-width:none;width:380px;} .updated-hawl .fit-grid{gap:40px 32px;grid-template-rows:minmax(95px,auto) minmax(137px,auto) minmax(137px,auto);} .updated-hawl .fit-card h3{display:flex;align-items:flex-start;gap:8px;font:500 14px/24px Inter,sans-serif;letter-spacing:-.182px;color:#d0d6e0;margin:0 0 8px;} .updated-hawl .fit-category-icon{flex:none;margin-top:4px;} .updated-hawl .fit-card p{font:400 14px/21px Inter,sans-serif;letter-spacing:-.182px;color:#8a8f98;max-width:220px;} .updated-hawl .fit-social-proof{margin-top:12px;gap:16px;flex-wrap:nowrap;} .updated-hawl .fit-customer-photos{padding:0;opacity:.8;filter:grayscale(1);} .updated-hawl .fit-customer-photos img{width:20px;height:20px;margin:0 -2px 0 0;border:3px solid #0e0f11;box-shadow:none;box-sizing:border-box;} .updated-hawl .fit-social-proof p,.updated-hawl .fit-social-proof strong{font:500 14px/20px Inter,sans-serif;letter-spacing:-.084px;color:#5c5c5c;} @media(max-width:1000px){.updated-hawl .client-fit{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:48px;}.updated-hawl .fit-heading h2,.updated-hawl .fit-heading>p{width:auto;}} @media(max-width:680px){.updated-hawl .client-fit{grid-template-columns:1fr;gap:40px;padding:64px 0;}.updated-hawl .fit-grid{grid-template-rows:none;}.updated-hawl .fit-card p{max-width:none;}} /* Updated category hierarchy: icon above the 16px heading. */ .updated-hawl .client-fit{max-width:1152px;grid-template-columns:380px minmax(0,1fr);} .updated-hawl .fit-grid{grid-template-rows:none;align-items:start;} .updated-hawl .fit-card{gap:8px;} .updated-hawl .fit-card>.fit-category-icon{margin:4px 0 4px 4px;} .updated-hawl .fit-card h3{display:block;font-size:16px;line-height:24px;margin:0;white-space:nowrap;} .updated-hawl .fit-card p{max-width:none;color:#91939d;letter-spacing:normal;} @media(max-width:1120px){.updated-hawl .client-fit{grid-template-columns:300px minmax(0,1fr);gap:40px;}} @media(max-width:960px){.updated-hawl .client-fit{grid-template-columns:1fr;gap:40px;}.updated-hawl .fit-heading h2,.updated-hawl .fit-heading>p{max-width:380px;}} @media(max-width:620px){.updated-hawl .fit-grid{grid-template-columns:1fr;}.updated-hawl .fit-card h3{white-space:normal;}} /* Match the 960px Figma section container. */ .updated-hawl .client-fit{max-width:960px;} .updated-hawl .fit-card h3{white-space:normal;} .updated-hawl .fit-customer-photos{filter:none;} .updated-hawl .fit-customer-photos img{width:24px;height:24px;border:0;} /* Figma 548:17422: section divider and full-opacity customer photos. */ .updated-hawl .client-fit{border-top:1px solid #36363c;} .updated-hawl .fit-customer-photos{opacity:1;} .updated-hawl .fit-social-proof p,.updated-hawl .fit-social-proof strong{font:400 14px/21px Inter,sans-serif;letter-spacing:normal;color:#91939d;} /* Preserve Figma's 24px portrait plus 3px outside stroke at retina resolution. */ .updated-hawl .fit-social-proof{align-items:center;} .updated-hawl .fit-customer-photos{display:flex;align-items:center;gap:0;opacity:1;filter:none;isolation:isolate;} .updated-hawl .fit-customer-photos img{width:30px;height:30px;flex:0 0 30px;max-width:none;margin:0;border:0;box-shadow:none;opacity:1;filter:none;} .updated-hawl .fit-customer-photos img+img{margin-left:-8px;} /* Subscription FAQ: quiet introduction and an accessible disclosure list. */ .updated-hawl .client-faq{max-width:960px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:80px;padding:96px 0;border-top:1px solid #36363c;align-items:start;} .updated-hawl .faq-intro{display:flex;flex-direction:column;align-items:flex-start;position:sticky;top:120px;} .updated-hawl .faq-eyebrow{font:400 12px/18px Inter,sans-serif;color:#91939d;margin-bottom:20px;} .updated-hawl .faq-intro h2{font:300 32px/34px Waldenburg,Inter,sans-serif;letter-spacing:-.96px;color:#e3e5f1;margin:0;} .updated-hawl .faq-intro h2 span{color:rgba(227,229,241,.5);} .updated-hawl .faq-intro>p{font:400 14px/21px Inter,sans-serif;color:#91939d;margin:20px 0 28px;max-width:300px;} .updated-hawl .faq-contact{display:inline-flex;align-items:center;gap:24px;padding:14px 20px;background:#e3e5f1;color:#0e0f11;border:0;border-radius:999px;font:500 14px/20px Inter,sans-serif;transition:background .2s,transform .2s;} .updated-hawl .faq-contact:hover{background:#82f277;transform:translateY(-2px);} .updated-hawl .faq-contact-note{font:400 12px/18px Inter,sans-serif;color:#91939d;margin-top:12px;} .updated-hawl .faq-questions{display:flex;flex-direction:column;gap:8px;min-width:0;} .updated-hawl .faq-item{background:#1c1e21;border:0;border-radius:16px;overflow:hidden;} .updated-hawl .faq-item summary{display:flex;align-items:center;gap:14px;padding:22px 24px;list-style:none;cursor:pointer;margin:0;font:500 16px/24px Inter,sans-serif;color:#e3e5f1;} .updated-hawl .faq-item summary::-webkit-details-marker{display:none;} .updated-hawl .faq-number{font:400 12px/18px Inter,sans-serif;color:#91939d;flex:0 0 20px;transition:color .2s;} .updated-hawl .faq-question{flex:1;} .updated-hawl .faq-toggle{position:relative;flex:0 0 16px;width:16px;height:16px;color:#91939d;} .updated-hawl .faq-toggle:before,.updated-hawl .faq-toggle:after{content:"";position:absolute;top:7px;left:2px;width:12px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .2s,color .2s;} .updated-hawl .faq-toggle:after{transform:rotate(90deg);} .updated-hawl .faq-item[open] .faq-toggle:after{transform:rotate(0deg);} .updated-hawl .faq-item[open] .faq-toggle,.updated-hawl .faq-item[open] .faq-number,.updated-hawl .faq-item summary:hover .faq-toggle{color:#82f277;} .updated-hawl .faq-answer{padding:0 24px 24px 58px;} .updated-hawl .faq-answer p{font:400 14px/22px Inter,sans-serif;color:#91939d;margin:0;} .updated-hawl .faq-item[open] .faq-answer{animation:faq-answer-in .25s ease-out;} @keyframes faq-answer-in{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:translateY(0);}} @media(max-width:1000px){.updated-hawl .client-faq{grid-template-columns:280px minmax(0,1fr);gap:40px;}} @media(max-width:700px){.updated-hawl .client-faq{grid-template-columns:1fr;gap:32px;padding:64px 0;}.updated-hawl .faq-intro{position:static;}.updated-hawl .faq-intro>p{max-width:380px;}.updated-hawl .faq-item summary{padding:20px;gap:10px;}.updated-hawl .faq-answer{padding:0 20px 22px 50px;}} @media(prefers-reduced-motion:reduce){.updated-hawl .faq-answer,.updated-hawl .faq-contact{animation:none!important;transition:none;}} /* Keep legacy global summary rules outside the new FAQ. */ .updated-hawl .faq-item summary>span{transform:none;} .updated-hawl .faq-item .faq-question{font:500 16px/24px Inter,sans-serif;color:#e3e5f1;} .updated-hawl .faq-item .faq-toggle{font-size:16px;line-height:16px;} .updated-hawl .faq-answer p{padding-bottom:0;} /* Figma 555:4887: heading above guidance and a divided question list. */ .updated-hawl .client-faq{display:flex;flex-direction:column;gap:48px;max-width:960px;padding:96px 0;border:0;} .updated-hawl .faq-section-heading{display:flex;flex-direction:column;gap:16px;width:100%;} .updated-hawl .faq-section-heading h2{font:500 48px/56px Inter,sans-serif;letter-spacing:-.48px;color:#e3e5f1;margin:0;} .updated-hawl .faq-section-heading h2 span{color:rgba(255,255,255,.5);} .updated-hawl .faq-section-heading p{font:400 14px/21px Inter,sans-serif;color:#91939d;max-width:528px;margin:0;} .updated-hawl .faq-body{display:grid;grid-template-columns:minmax(0,380px) minmax(0,500px);gap:80px;width:100%;align-items:start;} .updated-hawl .faq-guidance{display:flex;flex-direction:column;gap:24px;} .updated-hawl .faq-headset{width:200px;height:200px;object-fit:cover;} .updated-hawl .faq-guidance-text{display:flex;flex-direction:column;gap:22px;align-items:flex-start;max-width:272px;} .updated-hawl .faq-guidance h3{font:500 24px/32px Inter,sans-serif;letter-spacing:-.96px;color:#e3e5f1;margin:0;} .updated-hawl .faq-guidance h3 span{color:rgba(255,255,255,.5);} .updated-hawl .faq-contact{padding:12px 24px;height:44px;gap:0;border-radius:40px;} .updated-hawl .faq-questions{gap:10px;width:100%;max-width:500px;justify-self:end;} .updated-hawl .faq-item{background:none;border-radius:0;overflow:visible;position:relative;padding-bottom:10px;} .updated-hawl .faq-item:not(:last-child):after{content:"";display:block;height:1px;background:url('/assets/figma/faq-divider.svg') center/100% 1px no-repeat;margin-top:10px;} .updated-hawl .faq-item:last-child{padding-bottom:0;} .updated-hawl .faq-item summary{padding:16px 16px 16px 0;gap:4px;min-height:56px;border-radius:20px;} .updated-hawl .faq-item .faq-question{color:#d0d6e0;letter-spacing:-.182px;} .updated-hawl .faq-item .faq-toggle{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;} .updated-hawl .faq-toggle:before,.updated-hawl .faq-toggle:after{display:none;} .updated-hawl .faq-toggle img{max-width:none;} .updated-hawl .faq-toggle .faq-minus{display:none;} .updated-hawl .faq-item[open] .faq-plus{display:none;} .updated-hawl .faq-item[open] .faq-minus{display:block;} .updated-hawl .faq-answer{padding:0 16px 16px 0;margin-top:-8px;} .updated-hawl .faq-answer p{line-height:21px;} @media(max-width:1000px){.updated-hawl .faq-body{grid-template-columns:260px minmax(0,500px);justify-content:space-between;gap:32px;}} @media(max-width:700px){.updated-hawl .client-faq{gap:32px;padding:64px 0;}.updated-hawl .faq-section-heading h2{font-size:32px;line-height:38px;}.updated-hawl .faq-body{grid-template-columns:1fr;gap:32px;}.updated-hawl .faq-guidance{flex-direction:row;align-items:center;gap:20px;}.updated-hawl .faq-headset{width:120px;height:120px;}.updated-hawl .faq-guidance h3{font-size:20px;line-height:26px;letter-spacing:-.6px;}.updated-hawl .faq-guidance-text{gap:16px;}.updated-hawl .faq-item summary{padding-left:0;padding-right:0;}.updated-hawl .faq-answer{padding-left:0;padding-right:0;}} .updated-hawl .faq-item{padding-bottom:0;} .faq-emoji-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1000;} .faq-emoji-particle{position:absolute;line-height:1;user-select:none;will-change:transform,opacity;filter:drop-shadow(0 3px 5px rgba(0,0,0,.2));} /* Let conversation particles emerge behind the mascot. */ .updated-hawl .faq-mascot-stage{position:relative;width:200px;height:200px;flex:none;isolation:isolate;} .updated-hawl .faq-mascot-stage .faq-headset{position:relative;z-index:1;} .updated-hawl .faq-mascot-stage .faq-emoji-layer{position:absolute;inset:0;overflow:visible;z-index:0;} @media(max-width:700px){.updated-hawl .faq-mascot-stage{width:120px;height:120px;}} .updated-hawl .faq-mascot-stage,.updated-hawl .faq-headset{background:transparent;box-shadow:none;} /* Keep guidance alongside the questions, bounded by the FAQ section. */ .updated-hawl .faq-guidance{position:sticky;top:96px;align-self:start;} @media(max-width:700px){.updated-hawl .faq-guidance{position:static;}} /* Hero update from Figma 541:14689. */ .updated-hawl .figma-hero{max-width:960px;padding:56px 0;} .updated-hawl .figma-hero .hero-grid{min-height:192px;padding:0;gap:0;align-items:flex-end;} .updated-hawl .figma-hero .hero-primary{width:380px;gap:24px;} .updated-hawl .figma-hero h1{font:500 40px/44px Inter,sans-serif;letter-spacing:-.4px;font-optical-sizing:auto;font-variation-settings:'opsz' 32;max-width:520px;margin:0;} .updated-hawl .figma-hero .hero-description{width:480px;padding:0;} .updated-hawl .figma-hero .hero-description p{font:400 14px/20px Inter,sans-serif;letter-spacing:.16px;max-width:none;} .updated-hawl .figma-hero .hero-objects{left:480px;top:-17.34px;bottom:auto;transform:none;width:170px;height:110px;} @media(max-width:1000px) and (min-width:681px){.updated-hawl .figma-hero .hero-primary{width:40%;}.updated-hawl .figma-hero .hero-description{width:50%;}.updated-hawl .figma-hero .hero-objects{left:50%;}} @media(max-width:680px){.updated-hawl .figma-hero{padding:36px 0 32px;}.updated-hawl .figma-hero .hero-grid{align-items:stretch;gap:32px;min-height:0;}.updated-hawl .figma-hero .hero-primary,.updated-hawl .figma-hero .hero-description{width:100%;}.updated-hawl .figma-hero h1{font-size:34px;line-height:38px;letter-spacing:-.34px;}.updated-hawl .figma-hero .hero-description{padding-top:94px;}.updated-hawl .figma-hero .hero-objects{left:0;top:auto;bottom:80px;transform:scale(.9);transform-origin:left bottom;}} /* Larger hero objects from Figma 541:14683, approximately +30%. */ .updated-hawl .figma-hero .hero-objects{width:221.15px;height:143.1px;} .updated-hawl .hero-objects .hero-orb{left:19.586px;top:18.308px;width:101.468px;height:105.371px;} .updated-hawl .hero-objects .hero-orb-green{left:19.98px;top:18.83px;width:105.15px;height:104.73px;} .updated-hawl .hero-objects .hero-hand{left:106.831px;top:16.909px;width:75.451px;height:105.371px;} @media(max-width:680px){.updated-hawl .figma-hero .hero-description{padding-top:126px;}} /* Align the brand ribbon and its divider with the 960px hero. */ .framer-MqQPz .framer-14x5va7{width:calc(100% - 64px)!important;max-width:960px!important;margin-inline:auto;} .updated-hawl .figma-services{position:relative;border-top:0;} .updated-hawl .figma-services:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,960px);height:1px;background:#36363c;} @media(max-width:680px){.framer-MqQPz .framer-14x5va7{width:calc(100% - 40px)!important;}} /* Figma 541:14864: a narrower introduction above the wider service cards. */ .updated-hawl .figma-services{max-width:1152px;padding:96px 0;} .updated-hawl .figma-services .section-heading{width:100%;max-width:960px;margin:0 auto 48px;grid-template-columns:1fr 1fr;gap:0;min-height:0;align-items:start;} .updated-hawl .figma-services .section-heading h3{font:500 40px/44px Inter,sans-serif;letter-spacing:-.4px;font-optical-sizing:auto;font-variation-settings:'opsz' 32;} .updated-hawl .figma-services .section-heading>p{font:400 14px/20px Inter,sans-serif;letter-spacing:.16px;max-width:480px;} .updated-hawl .figma-services .service-grid{width:100%;max-width:1152px;margin-inline:auto;gap:8px;align-items:start;} .updated-hawl .figma-services .service{height:auto;min-height:0;padding:28px;gap:16px;} .updated-hawl .figma-services .service-copy p{margin:8px 0 0;font:400 14px/21px Inter,sans-serif;} @media(max-width:680px){.updated-hawl .figma-services{padding:64px 0;}.updated-hawl .figma-services .section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:32px;}.updated-hawl .figma-services .section-heading h3{font-size:32px;line-height:36px;}.updated-hawl .figma-services .service-grid{grid-template-columns:1fr;}} /* Services H3: 32px type with a 36px line height. */ .updated-hawl .figma-services .section-heading h3{font-size:32px;line-height:36px;} /* Flat service illustrations using the site's existing accent palette. */ .updated-hawl .meaning-diagram .assembly-piece,.updated-hawl .meaning-diagram .identity-shape,.updated-hawl .meaning-diagram .build-piece{filter:none;stroke:none!important;stroke-width:0;fill:#82f277!important;} .updated-hawl .meaning-diagram .piece-1,.updated-hawl .meaning-diagram .piece-4,.updated-hawl .meaning-diagram .piece-6{fill:#e677f2!important;} .updated-hawl .meaning-diagram .central-piece{fill:#e3e5f1!important;} .updated-hawl .service:hover .meaning-diagram .assembly-piece{fill:#82f277!important;} .updated-hawl .service:hover .meaning-diagram .central-piece{fill:#e3e5f1!important;} .updated-hawl .meaning-diagram .identity-1 .identity-shape{fill:#e3e5f1!important;} .updated-hawl .meaning-diagram .identity-2 .identity-shape{fill:#e677f2!important;} .updated-hawl .meaning-diagram .identity-3 .identity-shape{fill:none!important;stroke:#91939d!important;stroke-width:1.3;} .updated-hawl .service:hover .meaning-diagram .identity-shape{fill:#e677f2!important;stroke:none!important;} .updated-hawl .meaning-diagram .build-piece-0{fill:#e3e5f1!important;} .updated-hawl .meaning-diagram .build-piece-1{fill:#82f277!important;} .updated-hawl .meaning-diagram .build-piece-2{fill:#e677f2!important;} .updated-hawl .meaning-diagram .build-piece-3{fill:#91939d!important;} /* Prices — Figma 541:15041. */ .updated-hawl .client-pricing{max-width:1152px;padding:96px 0;} .updated-hawl .client-pricing .cost-story{max-width:960px;margin:0 auto;padding:0;background:transparent;border-radius:0;display:flex;justify-content:space-between;gap:48px;} .updated-hawl .price-comparison-copy{width:380px;flex:none;display:flex;flex-direction:column;gap:72px;} .updated-hawl .client-pricing .pricing-intro{display:block;margin:0;} .updated-hawl .client-pricing .pricing-intro h2{font:500 32px/36px Inter,Arial,sans-serif;letter-spacing:-.32px;margin:0 0 16px;} .updated-hawl .client-pricing .pricing-intro>p{font:400 14px/20px Inter,Arial,sans-serif;letter-spacing:.16px;} .updated-hawl .client-pricing .cost-result{display:block;padding:0;border:0;} .updated-hawl .client-pricing .cost-counter{display:block;font:500 40px/44px Inter,Arial,sans-serif;letter-spacing:-.4px;color:#e3e5f1;} .updated-hawl .client-pricing .cost-result p{margin-top:8px;} .updated-hawl .price-comparison-data{width:400px;min-width:0;display:flex;flex-direction:column;gap:41px;} .updated-hawl .client-pricing .cost-amount{font:500 40px/44px Inter,Arial,sans-serif;letter-spacing:-.4px;margin:0 0 8px;white-space:nowrap;} .updated-hawl .client-pricing .cost-amount small{font-size:14px;} .updated-hawl .client-pricing .cost-caption{font:400 14px/20px Inter,Arial,sans-serif;} .updated-hawl .client-pricing .cost-chart{display:grid;gap:8px;margin:0;} .updated-hawl .client-pricing .cost-bar{height:24px;border-radius:4px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:none;background:transparent;} .updated-hawl .client-pricing .cost-bar:before{content:'';position:absolute;inset:0;background:#242424;transform:scaleX(var(--cost-reveal));transform-origin:left;} .updated-hawl .client-pricing .cost-bar-hawl{width:46.0615%;border-radius:8px;} .updated-hawl .client-pricing .cost-bar-hawl:before{background:linear-gradient(90deg,#82f277,#b1ffa8);} .updated-hawl .client-pricing .cost-bar span{position:relative;font:500 12px/22px Inter,Arial,sans-serif;color:#91939d;opacity:var(--cost-reveal);} .updated-hawl .client-pricing .cost-bar-hawl span{color:#0e0f11;} .updated-hawl .cost-subscription-caption{display:flex;gap:16px;align-items:baseline;margin-top:16px;font:400 14px/20px Inter,Arial,sans-serif;} .updated-hawl .cost-subscription-caption>span{color:#82f277;white-space:nowrap;} .updated-hawl .client-pricing>.lab-grid{margin-top:88px;} .updated-hawl .client-pricing .lab-card{min-height:551px;} .updated-hawl .client-pricing .lab-symbol{height:43px;margin:0;} .updated-hawl .client-pricing .lab-description{min-height:78px;margin:0;padding:12px 0 24px;} .updated-hawl .client-pricing .lab-price{height:81px;flex:none;} @media(max-width:1000px) and (min-width:681px){.updated-hawl .price-comparison-copy{width:44%;}.updated-hawl .price-comparison-data{width:46%;}.updated-hawl .client-pricing .cost-caption{white-space:normal;}.updated-hawl .cost-subscription-caption{flex-wrap:wrap;gap:4px 16px;}} @media(max-width:680px){.updated-hawl .client-pricing{padding:64px 0;}.updated-hawl .client-pricing .cost-story{flex-direction:column;gap:40px;}.updated-hawl .price-comparison-copy,.updated-hawl .price-comparison-data{width:100%;}.updated-hawl .price-comparison-copy{gap:28px;}.updated-hawl .client-pricing>.lab-grid{margin-top:48px;}.updated-hawl .cost-subscription-caption{flex-wrap:wrap;gap:4px 16px;}} /* Cost bars: matching geometry and stronger visual contrast. */ .updated-hawl .client-pricing .cost-chart{gap:12px;} .updated-hawl .client-pricing .cost-bar,.updated-hawl .client-pricing .cost-bar-hawl{height:36px;border-radius:8px;} .updated-hawl .client-pricing .cost-bar-hire:before{background:repeating-linear-gradient(120deg,#626570 0 2px,#34363c 2px 10px);} .updated-hawl .client-pricing .cost-bar-hawl:before{background:linear-gradient(90deg,#82f277,#b1ffa8);} .updated-hawl .client-pricing .cost-bar span{font:500 12px/20px Inter,Arial,sans-serif;color:#e3e5f1;} .updated-hawl .client-pricing .cost-bar-hawl span{color:#0e0f11;} /* Annual comparison: persistent tracks and staggered fills. */ .updated-hawl .client-pricing .cost-bar-track{height:36px;border-radius:8px;background:#292b30;overflow:hidden;} .updated-hawl .client-pricing .cost-bar{height:36px;border-radius:8px;transition:none;} .updated-hawl .client-pricing .cost-bar-hire{width:calc(100% * var(--cost-hire,0));} .updated-hawl .client-pricing .cost-bar-hawl{width:calc(46.0615% * var(--cost-hawl,0));} .updated-hawl .client-pricing .cost-bar:before{transform:none;} .updated-hawl .client-pricing .cost-bar span{opacity:var(--cost-hire,0);white-space:nowrap;} .updated-hawl .client-pricing .cost-hawl-logo{position:relative;width:54px;height:auto;flex:none;filter:brightness(0);opacity:var(--cost-hawl,0);} /* Figma 555:5193: no tracks, with a temporary sparkle trail. */ .updated-hawl .client-pricing .cost-chart{position:relative;gap:8px;} .updated-hawl .client-pricing .cost-bar,.updated-hawl .client-pricing .cost-bar-hawl{height:32px;border-radius:8px;} .updated-hawl .client-pricing .cost-bar-hire:before{background:#242424;} .updated-hawl .client-pricing .cost-bar-hire span{color:#8b8b8b;font:500 12px/22px Inter,Arial,sans-serif;} .updated-hawl .client-pricing .cost-bar-hawl{width:calc(42.5% * var(--cost-hawl,0));} .updated-hawl .client-pricing .cost-hawl-logo{width:45.504px;height:12px;filter:none;} .updated-hawl .client-pricing .cost-bar-hawl:after{content:'';position:absolute;top:0;bottom:0;right:0;width:22px;background:linear-gradient(90deg,transparent,#ffffffaa);opacity:0;} .updated-hawl .cost-filling .cost-bar-hawl:after{opacity:1;} .updated-hawl .cost-spark{position:absolute;left:calc(42.5% * var(--cost-hawl,0));top:48px;color:#b1ffa8;font-style:normal;font-size:12px;pointer-events:none;opacity:0;filter:drop-shadow(0 0 4px #82f277);} .updated-hawl .cost-filling .cost-spark{animation:cost-spark-flight .75s ease-out infinite;animation-delay:calc(var(--spark-index) * -.125s);} @keyframes cost-spark-flight{0%{opacity:0;transform:translate(-2px,8px) scale(.3);}20%{opacity:1;}100%{opacity:0;transform:translate(calc((var(--spark-index) - 2.5) * 8px),calc(-20px - var(--spark-index) * 4px)) scale(.15) rotate(80deg);}} @media(prefers-reduced-motion:reduce){.updated-hawl .cost-spark{display:none;}} /* Working together — Figma 541:15284. */ .updated-hawl .collaboration{max-width:960px;grid-template-columns:380px minmax(0,1fr);gap:80px;padding:96px 0;} .updated-hawl .collab-intro h2{font:500 40px/44px Inter,Arial,sans-serif;letter-spacing:-.4px;} .updated-hawl .collab-item.is-active .collab-number{color:#82f277;} @media(max-width:1000px) and (min-width:681px){.updated-hawl .collaboration{grid-template-columns:38% minmax(0,1fr);gap:40px;}} @media(max-width:680px){.updated-hawl .collaboration{grid-template-columns:1fr;gap:32px;padding:64px 0;}.updated-hawl .collab-intro h2{font-size:34px;line-height:38px;}} /* Hawl burns down from full width and retains its glowing edge. */ .updated-hawl .client-pricing .cost-bar-hawl{width:calc(100% * var(--cost-burn,1));} .updated-hawl .client-pricing .cost-hawl-logo{opacity:1;} .updated-hawl .cost-spark{left:calc(100% * var(--cost-burn,1));} .updated-hawl .cost-filling .cost-bar-hawl:after{opacity:1;width:16px;background:linear-gradient(90deg,transparent,#eaffdc);animation:cost-burning-edge 1.2s ease-in-out infinite;} @keyframes cost-burning-edge{0%,100%{opacity:.45;filter:blur(1px);}50%{opacity:.95;filter:blur(2px);}} @media(prefers-reduced-motion:reduce){.updated-hawl .cost-filling .cost-bar-hawl:after{animation:none;opacity:0;}} /* Updated unique category icons and title — Figma 548:17422. */ .updated-hawl .client-fit{grid-template-columns:380px minmax(0,1fr);gap:80px;} .updated-hawl .fit-heading h2{font:500 40px/44px Inter,Arial,sans-serif;letter-spacing:-.4px;margin:0;} .updated-hawl .fit-card>.fit-category-icon{width:20px;height:20px;margin:0;} .updated-hawl .fit-card h3{color:#e3e5f1;letter-spacing:-.54px;} @media(max-width:1000px){.updated-hawl .client-fit{grid-template-columns:1fr;gap:40px;}} @media(max-width:680px){.updated-hawl .fit-heading h2{font-size:34px;line-height:38px;}} .updated-hawl .fit-card>.fit-category-icon{margin-bottom:4px;} /* Draft recent project spotlight. */ .updated-hawl .recent-project{max-width:1152px;padding:96px 0;} .updated-hawl .recent-project-heading{max-width:960px;margin:0 auto 48px;display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:end;} .updated-hawl .recent-eyebrow{display:block;font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .recent-project-heading h2{font:500 40px/44px Inter,Arial,sans-serif;letter-spacing:-.4px;margin:20px 0 0;color:#e3e5f1;} .updated-hawl .recent-project-heading h2 span{color:rgba(227,229,241,.5);} .updated-hawl .recent-project-heading>p,.updated-hawl .recent-project-story p{font:400 14px/21px Inter,Arial,sans-serif;color:#91939d;} .updated-hawl .recent-project-preview{margin:0;border-radius:24px;overflow:hidden;background:#1c1e21;} .updated-hawl .recent-project-preview img{width:100%;height:auto;display:block;} .updated-hawl .recent-project-details{max-width:960px;margin:32px auto 0;display:grid;grid-template-columns:380px 1fr;gap:80px;} .updated-hawl .recent-project-overview h3{font:500 24px/28px Inter,Arial,sans-serif;letter-spacing:-.24px;color:#e3e5f1;margin:12px 0 20px;} .updated-hawl .recent-project-tags{display:flex;flex-wrap:wrap;gap:8px;} .updated-hawl .recent-project-tags span{font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;background:#1c1e21;border-radius:24px;padding:6px 12px;} .updated-hawl .recent-project-story{display:grid;gap:24px;} .updated-hawl .recent-project-story p{margin-top:8px;} @media(max-width:1000px){.updated-hawl .recent-project-heading,.updated-hawl .recent-project-details{grid-template-columns:1fr 1fr;gap:40px;}} @media(max-width:680px){.updated-hawl .recent-project{padding:64px 0;}.updated-hawl .recent-project-heading,.updated-hawl .recent-project-details{grid-template-columns:1fr;gap:24px;}.updated-hawl .recent-project-heading{margin-bottom:32px;}.updated-hawl .recent-project-heading h2{font-size:34px;line-height:38px;}.updated-hawl .recent-project-preview{border-radius:16px;}} /* TaoBot recent work — Figma 559:6017. */ .updated-hawl .recent-project{padding-top:96px;padding-bottom:0;} .updated-hawl .recent-project-preview{position:relative;height:auto;aspect-ratio:1152/486;} .updated-hawl .recent-project-preview img{position:absolute;max-width:none;object-fit:cover;} .updated-hawl .recent-project-preview .recent-preview-backdrop{width:157.2917%;height:207%;left:-28.6458%;top:-15.8436%;} .updated-hawl .recent-project-preview .recent-preview-browser{width:92.3611%;height:auto;left:3.81944%;top:11.5226%;} .updated-hawl .recent-project-preview .recent-preview-fade{width:100%;height:21.8107%;left:0;bottom:0;backdrop-filter:blur(1px);} .updated-hawl .recent-project-details{margin-top:40px;padding-bottom:96px;border-bottom:1px solid #36363c;align-items:start;} .updated-hawl .recent-project-link{display:flex;align-items:center;gap:8px;width:max-content;margin-top:24px;color:#82f277;font:500 14px/20px Inter,Arial,sans-serif;} .updated-hawl .recent-project-link img{width:20px;height:20px;} .updated-hawl .recent-project-link:hover{color:#b1ffa8;} .updated-hawl .recent-project-story h4{font:500 16px/24px Inter,Arial,sans-serif;letter-spacing:-.54px;color:#e3e5f1;margin:0;} @media(max-width:680px){.updated-hawl .recent-project{padding-top:64px;}.updated-hawl .recent-project-details{margin-top:32px;padding-bottom:64px;}} .updated-hawl .recent-project-preview .recent-preview-fade{opacity:.18;} .updated-hawl .recent-project-preview .recent-preview-fade{mask-image:linear-gradient(transparent,#000);} .updated-hawl .recent-project-platform{font:400 14px/21px Inter,Arial,sans-serif;color:#91939d;margin:0 0 20px;max-width:340px;} .updated-hawl .recent-project-link img{width:10px;height:10px;} /* Scroll reveal and a short sticky pause for the project preview. */ .updated-hawl .recent-project-stage{padding-bottom:240px;position:relative;} .updated-hawl .recent-project-stage .recent-project-preview{position:sticky;top:96px;} .updated-hawl .recent-project-preview .recent-preview-browser{transform:translateY(var(--project-rise,0px));will-change:transform;} @media(max-width:680px){.updated-hawl .recent-project-stage{padding-bottom:120px;}.updated-hawl .recent-project-stage .recent-project-preview{top:88px;}} @media(prefers-reduced-motion:reduce){.updated-hawl .recent-project-stage{padding-bottom:0;}.updated-hawl .recent-project-stage .recent-project-preview{position:relative;top:auto;}.updated-hawl .recent-project-preview .recent-preview-browser{transform:none;}} /* Keep the original 40px caption gap; motion stays inside the preview. */ .updated-hawl .recent-project-stage{padding-bottom:0;} .updated-hawl .recent-project-stage .recent-project-preview{position:relative;top:auto;} /* Constant gentle levitation, with no entrance movement. */ .updated-hawl .recent-project-preview .recent-preview-browser{transform:none;animation:recent-project-float 7s ease-in-out infinite;} @keyframes recent-project-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}} @media(prefers-reduced-motion:reduce){.updated-hawl .recent-project-preview .recent-preview-browser{animation:none;transform:none;}} /* Shared typography: Inter headings and 14/21 supporting copy. */ .updated-hawl h1,.updated-hawl h2,.updated-hawl h3,.updated-hawl h4{font-family:Inter,Arial,sans-serif;font-feature-settings:"calt" 0,"liga" 0;} .updated-hawl .reviews-heading h2{font:500 32px/36px Inter,Arial,sans-serif;letter-spacing:-.96px;margin:0 0 16px;} .updated-hawl .reviews-heading>p{max-width:528px;margin-inline:auto;font-feature-settings:"ss11" 1,"calt" 0,"liga" 0;} .updated-hawl .figma-hero .hero-description p,.updated-hawl .figma-services .section-heading>p,.updated-hawl .how-it-works .how-intro>p,.updated-hawl .how-it-works .how-steps p{line-height:21px;} .cosmos-cta{position:relative;isolation:isolate;overflow:hidden;min-height:520px;display:grid;place-items:center;padding:100px 24px;background:#0e0f11;} .cosmos-tiles{position:absolute;inset:0;z-index:-1;mask-image:linear-gradient(black 30%,transparent 100%);} .cosmos-tiles img{position:absolute;left:var(--x);top:var(--y);width:74px;height:64px;object-fit:cover;border-radius:12px;opacity:.55;box-shadow:0 8px 24px #0006;transform:translate(-50%,-50%) rotate(var(--angle));animation:cosmos-drift 9s ease-in-out infinite;animation-delay:var(--delay);} .cosmos-cta-content{text-align:center;position:relative;z-index:1;} .updated-hawl .cosmos-cta h2{font:500 20px/28px Inter,Arial,sans-serif;letter-spacing:-.6px;margin:0 0 24px;} .cosmos-main-button{display:inline-flex;align-items:center;justify-content:center;gap:24px;font:500 44px/52px Inter,Arial,sans-serif;letter-spacing:-1.32px;padding:28px 44px;border-radius:100px;background:linear-gradient(#f0f1f8,#e3e5f1);color:#0e0f11;box-shadow:inset 0 2px 0 #fff5;transition:background .3s,transform .3s,box-shadow .3s;} .cosmos-main-button span{font-size:30px;transition:transform .3s;}.cosmos-main-button:hover{background:#82f277;box-shadow:0 0 60px #82f27720;transform:scale(1.025);}.cosmos-main-button:hover span{transform:translate(4px,-4px);} .cosmos-email{display:table;margin:24px auto 0;border:1px solid #36363c;border-radius:99px;padding:14px 24px;font:500 14px/20px Inter,Arial,sans-serif;color:#e3e5f1;background:#0e0f11c9;transition:border-color .2s;}.cosmos-email:hover{border-color:#91939d;} .updated-hawl .cosmos-footer{max-width:960px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:24px 0 40px;} .cosmos-socials,.cosmos-legal{display:flex;gap:20px;font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;}.cosmos-legal{justify-content:flex-end;}.cosmos-footer a:hover{color:#e3e5f1;} .cosmos-brand{position:relative;width:28px;height:28px;display:block;}.cosmos-brand span{position:absolute;width:12px;height:12px;background:#e3e5f1;border-radius:0 0 0 6px;left:2px;top:2px;}.cosmos-brand span+span{left:14px;top:14px;border-radius:0 6px 0 0;} .cosmos-footer p{grid-column:1/-1;text-align:center;font:400 11px/18px Inter,Arial,sans-serif;color:#91939d;margin:12px 0 0;} @keyframes cosmos-drift{50%{transform:translate(-50%,calc(-50% - 16px)) rotate(calc(var(--angle) + 8deg));}} @media(max-width:680px){.cosmos-cta{min-height:420px;padding:80px 20px;}.cosmos-main-button{font-size:26px;line-height:32px;letter-spacing:-.78px;padding:22px 26px;gap:14px;}.cosmos-main-button span{font-size:22px;}.cosmos-cta h2{font-size:18px!important;}.cosmos-tiles img{width:48px;height:44px;opacity:.3;}.updated-hawl .cosmos-footer{grid-template-columns:1fr;justify-items:center;gap:20px;}.cosmos-brand{grid-row:1;}.cosmos-socials{flex-wrap:wrap;justify-content:center;}.cosmos-footer p{margin:0;}} @media(prefers-reduced-motion:reduce){.cosmos-tiles img{animation:none;}.cosmos-main-button,.cosmos-main-button span{transition:none;}} /* Shared 40px CTA from Figma, scoped to How it Works and FAQ. */ .updated-hawl .how-it-works .how-cta,.updated-hawl .client-faq .faq-contact{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;min-height:40px;padding:10px 24px;border:0;border-radius:40px;background:#e3e5f1;color:#0e0f11;font:500 14px/20px Inter,Arial,sans-serif;letter-spacing:0;transition:background-color .2s ease,transform .2s ease;} .updated-hawl .how-it-works .how-cta:hover,.updated-hawl .client-faq .faq-contact:hover{background:#82f277;transform:translateY(-2px);} @media(prefers-reduced-motion:reduce){.updated-hawl .how-it-works .how-cta,.updated-hawl .client-faq .faq-contact{transition:none;}.updated-hawl .how-it-works .how-cta:hover,.updated-hawl .client-faq .faq-contact:hover{transform:none;}} .sun-footer{position:relative;isolation:isolate;overflow:hidden;min-height:640px;height:100svh;max-height:1100px;background:#0e0f11;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#e3e5f1;} .footer-sun{position:absolute;z-index:-1;left:50%;bottom:-180px;width:1357.19px;height:1016.69px;transform:translate(-50%,75%) scale(.65);opacity:0;transform-origin:50% 100%;} .footer-sun img{width:1357.19px;height:1016.69px;max-width:none;} .sun-cta{text-align:center;position:relative;padding:0 24px;opacity:0;transform:translateY(20px);} .sun-cta>p{font:400 16px/21px Inter,Arial,sans-serif;color:#ffffff80;margin-bottom:28px;} .sun-cta h2{font:500 clamp(48px,8.47vw,128px)/1 Inter,Arial,sans-serif;letter-spacing:-.018125em;color:#e3e5f1;} .sun-cta h2 a{display:inline-block;transition:text-shadow .25s;}.sun-cta h2 a:hover{text-shadow:0 0 30px #fff8;} .sun-footer-links{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - 112px);max-width:1300px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;padding:20px 32px;font:400 14px/21px Inter,Arial,sans-serif;} .sun-footer-links p{font:inherit;}.sun-socials{display:flex;gap:32px;}.sun-socials img{width:24px;height:24px;}.sun-legal{display:flex;justify-content:flex-end;gap:24px;}.sun-footer-links a:hover{opacity:.7;} .sun-footer.is-visible .sun-cta{animation:sun-title-in 1s ease-out forwards;} .sun-footer.is-visible .footer-sun{animation:sun-rise 4.5s cubic-bezier(.22,.65,.25,1) .15s forwards;} @keyframes sun-title-in{to{opacity:1;transform:none;}} @keyframes sun-rise{0%{opacity:0;transform:translate(-50%,75%) scale(.65);}30%{opacity:1;}65%{opacity:1;transform:translate(-50%,32%) scale(1);}100%{opacity:1;transform:translate(-50%,20%) scale(2.3);}} @media(max-width:680px){.sun-footer{min-height:560px;}.sun-cta h2{max-width:500px;}.sun-footer-links{width:calc(100% - 40px);padding:0;grid-template-columns:1fr;justify-items:center;gap:20px;font-size:12px;}.sun-socials{grid-row:1;gap:24px;}.sun-legal{justify-content:center;}.sun-cta{margin-bottom:100px;}} @media(prefers-reduced-motion:reduce){.sun-cta{opacity:1;transform:none;}.sun-footer.is-visible .sun-cta,.sun-footer.is-visible .footer-sun{animation:none;}.footer-sun{opacity:1;transform:translate(-50%,32%);}} /* Sunrise settles at the horizon; color waves only run on CTA interaction. */ @keyframes sun-rise{0%{opacity:0;transform:translate(-50%,75%) scale(.65);}100%{opacity:1;transform:translate(-50%,32%) scale(1);}} .footer-sun:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-radial-gradient(ellipse at 50% 58%,#ff495500 0 8%,#e677f2aa 12%,#82f27788 20%,#ffc852aa 28%,#ff495500 36%);border-radius:50%;filter:blur(35px);mix-blend-mode:screen;mask-image:radial-gradient(ellipse,#000 30%,transparent 68%);} .sun-footer:has(.sun-cta a:hover) .footer-sun:after,.sun-footer:has(.sun-cta a:focus-visible) .footer-sun:after{opacity:.85;animation:sun-color-waves 3s linear infinite;} @keyframes sun-color-waves{0%{transform:scale(.6);filter:blur(35px) hue-rotate(0deg);}50%{transform:scale(1.05);filter:blur(40px) hue-rotate(140deg);}100%{transform:scale(1.4);filter:blur(35px) hue-rotate(360deg);}} @media(prefers-reduced-motion:reduce){.sun-footer .footer-sun:after{animation:none!important;}} .editorial-footer{background:#82f277;color:#e3e5f1;overflow:hidden;} .editorial-panel{position:relative;z-index:2;background:#0e0f11;border-radius:0 0 48px 48px;padding:96px 0 48px;} .editorial-layout{max-width:1152px;display:grid;grid-template-columns:1fr 1fr;gap:80px;} .editorial-cta h2{font:500 clamp(36px,3.5vw,56px)/1.08 Inter,Arial,sans-serif;letter-spacing:-1.68px;}.editorial-cta em{font-style:normal;color:#91939d;} .editorial-cta p{font:400 14px/21px Inter,Arial,sans-serif;color:#91939d;max-width:340px;margin:24px 0;} .editorial-start{display:inline-flex;gap:24px;align-items:center;justify-content:center;height:40px;padding:10px 24px;border-radius:40px;background:#e3e5f1;color:#0e0f11;font:500 14px/20px Inter,Arial,sans-serif;transition:background .2s,transform .2s;}.editorial-start:hover{background:#82f277;transform:translateY(-2px);} .editorial-columns{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:24px;}.editorial-columns nav{display:flex;flex-direction:column;gap:12px;}.editorial-columns h3{font:400 14px/21px Inter,Arial,sans-serif;color:#91939d;margin-bottom:4px;}.editorial-columns a{font:400 14px/21px Inter,Arial,sans-serif;}.editorial-columns a:hover{color:#82f277;} .editorial-company{margin-top:96px;font:400 12px/18px Inter,Arial,sans-serif;color:#91939d;}.editorial-company img{margin-bottom:20px;}.editorial-company p{font:inherit;margin:4px 0;}.editorial-company a{display:inline-block;margin:4px 0 16px;}.editorial-company a:hover{color:#82f277;} .editorial-reveal{position:relative;min-height:300px;padding:44px 56px 24px;color:#0e0f11;display:flex;align-items:center;justify-content:center;gap:32px;overflow:hidden;} .editorial-word{font:600 clamp(140px,28vw,400px)/.85 Inter,Arial,sans-serif;letter-spacing:-.07em;opacity:0;transform:translateY(70%);} .editorial-star{font:400 clamp(70px,12vw,170px)/1 Inter,Arial,sans-serif;opacity:0;transform:translateY(80px) rotate(-90deg);} .editorial-caption{position:absolute;bottom:16px;left:56px;right:56px;display:flex;justify-content:space-between;font:400 12px/18px Inter,Arial,sans-serif;} .editorial-reveal.is-visible .editorial-word{animation:editorial-word-in 1.3s cubic-bezier(.22,1,.36,1) forwards;}.editorial-reveal.is-visible .editorial-star{animation:editorial-star-in 1.5s cubic-bezier(.22,1,.36,1) .15s forwards;} @keyframes editorial-word-in{to{opacity:1;transform:translateY(0);}}@keyframes editorial-star-in{to{opacity:1;transform:translateY(0) rotate(0);}} @media(max-width:900px){.editorial-layout{gap:40px;grid-template-columns:1fr;}.editorial-company{margin-top:48px;}.editorial-cta h2{font-size:48px;}.editorial-panel{padding-top:64px;}.editorial-reveal{min-height:250px;}} @media(max-width:540px){.editorial-panel{border-radius:0 0 28px 28px;}.editorial-cta h2{font-size:36px;letter-spacing:-1px;}.editorial-columns{gap:16px;}.editorial-columns a,.editorial-columns h3{font-size:12px;}.editorial-reveal{padding:40px 20px;gap:16px;min-height:210px;}.editorial-word{font-size:31vw;}.editorial-star{font-size:14vw;}.editorial-caption{left:20px;right:20px;font-size:10px;}} @media(prefers-reduced-motion:reduce){.editorial-word,.editorial-star{opacity:1;transform:none;animation:none!important;}.editorial-start{transition:none;}.editorial-start:hover{transform:none;}} /* The lower brand panel stays anchored while the upper footer reveals it. */ .editorial-footer{position:relative;isolation:isolate;overflow:clip;} .editorial-reveal{position:sticky;bottom:0;z-index:0;background:#82f277;} .editorial-panel{z-index:2;} .editorial-reveal .editorial-word,.editorial-reveal .editorial-star{opacity:1;transform:none;animation:none!important;} .editorial-reveal-slot{position:relative;z-index:0;} .editorial-reveal-slot .editorial-reveal{position:fixed;bottom:0;left:0;width:100%;visibility:hidden;} /* Lassie footer structure: a scrolling 517px panel over a fixed 29vw wordmark. */ #main{position:relative;z-index:1;background:transparent!important;} .framer-MqQPz.framer-238HO.framer-1y9ya35{background:transparent!important;} .updated-hawl:has(.editorial-footer){background:transparent;} .editorial-footer{overflow:visible;isolation:auto;background:transparent;color:#090909;margin-bottom:29vw;} .editorial-panel{background:#fff;border-radius:0 0 64px 64px;padding:80px 32px 24px;min-height:517px;} .editorial-layout{max-width:2120px;width:100%;grid-template-columns:1fr 1fr;gap:0;min-height:413px;} .editorial-cta h2{font-size:48px;line-height:1.15;letter-spacing:-1.2px;}.editorial-cta em{color:#090909;font-style:italic;} .editorial-cta p{display:none;}.editorial-start{margin-top:32px;background:#090909;color:#e3e5f1;border-radius:12px;} .editorial-right{display:flex;flex-direction:column;justify-content:space-between;} .editorial-columns{gap:32px;grid-template-columns:repeat(3,1fr);}.editorial-columns h3{color:#777;}.editorial-columns a{color:#111;}.editorial-columns a:hover{color:#555;} .editorial-company{margin-top:64px;color:#111;font-family:monospace;}.editorial-company img{filter:grayscale(1) brightness(0);}.editorial-company p{font-family:monospace;} .editorial-reveal{position:fixed!important;left:0;bottom:0;width:100%;height:29vw;min-height:0;padding:2vw 32px;background:linear-gradient(#e8f4f6,#c5eaf1);z-index:0;color:#e3e5f1;visibility:hidden;clip-path:none!important;display:flex;gap:2vw;} .editorial-reveal.is-revealing{visibility:visible;} .editorial-reveal .editorial-word{font-size:32vw;font-weight:500;line-height:.8;opacity:1;transform:none;}.editorial-reveal .editorial-star{font-size:12vw;opacity:1;transform:none;}.editorial-caption{display:none;} @media(max-width:900px){.editorial-panel{padding:40px 24px 24px;min-height:517px;border-radius:0 0 56px 56px;}.editorial-layout{grid-template-columns:1fr 1fr;min-height:453px;gap:32px;}.editorial-cta h2{font-size:36px;}.editorial-columns{gap:16px;}.editorial-columns a,.editorial-columns h3{font-size:12px;}.editorial-reveal{min-height:0;}} @media(max-width:600px){.editorial-footer{margin-bottom:30vw;}.editorial-panel{border-radius:0 0 32px 32px;padding:32px 16px 24px;}.editorial-layout{grid-template-columns:1fr;gap:40px;}.editorial-company{margin-top:48px;}.editorial-reveal{height:30vw;padding:2vw 16px;}.editorial-cta h2{font-size:36px;}} .updated-hawl footer.editorial-footer{display:block;padding:0;width:100%;} .updated-hawl .editorial-footer>.editorial-panel{display:block;width:100%;color:#090909;} .updated-hawl .editorial-layout.wrap{width:100%;margin:0 auto;} .editorial-cta h2{color:#090909;} /* Rebuilt footer, Figma 570:17632. */ .updated-hawl .editorial-footer{margin-bottom:306px;} .updated-hawl .editorial-footer>.editorial-panel{background:#0e0f11;color:#e3e5f1;border-radius:0 0 56px 56px;padding:80px 0 40px;min-height:432px;} .updated-hawl .editorial-layout.wrap{width:calc(100% - 112px);max-width:960px;grid-template-columns:380px 500px;gap:80px;min-height:0;} .editorial-cta{min-height:312px;display:flex;flex-direction:column;align-items:flex-start;} .editorial-cta h2{font:500 40px/44px Inter,Arial,sans-serif;letter-spacing:-.4px;color:#e3e5f1;}.editorial-cta em{font-style:normal;color:#ffffff80;} .editorial-cta p{display:block;font:400 14px/21px Inter,Arial,sans-serif;color:#91939d;margin:16px 0 24px;max-width:none;} .editorial-start{margin:0;background:#e3e5f1;color:#0e0f11;border-radius:40px;} .editorial-cta .editorial-copyright{margin: auto 0 0;padding-top:32px;white-space:nowrap;} .editorial-right{gap:64px;justify-content:flex-start;} .editorial-columns{display:flex;justify-content:space-between;gap:24px;}.editorial-columns nav{gap:7px;}.editorial-columns h3{color:#91939d;font:400 14px/21px Inter,Arial,sans-serif;margin-bottom:3px;}.editorial-columns a{color:#e3e5f1;font:400 14px/21px Inter,Arial,sans-serif;}.editorial-columns a:hover{color:#82f277;} .editorial-company{margin:0;padding:20px 0 4px;font:400 14px/20px Inter,Arial,sans-serif;color:#91939d;}.editorial-company img{filter:none;margin-bottom:16px;}.editorial-company p{font:inherit;margin:0 0 4px;}.editorial-company a{color:#e3e5f1;font:inherit;margin:0;} .editorial-reveal{height:306px;background:linear-gradient(to bottom,#fff 22.042%,#82f277);background-size:100% calc(100% + 376px);background-position:bottom;padding:0;display:block;overflow:hidden;} .editorial-wordmark{position:absolute;left:50%;transform:translateX(-50%);top:41px;width:calc(100% - 112px);max-width:960px;height:auto;} @media(max-width:1050px){.updated-hawl .editorial-layout.wrap{grid-template-columns: minmax(0,380px) minmax(0,500px);gap:40px;}} @media(max-width:760px){.updated-hawl .editorial-layout.wrap{width:calc(100% - 40px);grid-template-columns:1fr;gap:48px;}.updated-hawl .editorial-footer>.editorial-panel{padding:64px 0 40px;border-radius:0 0 32px 32px;}.editorial-cta h2{font-size:36px;line-height:40px;}.editorial-right{gap:40px;}.editorial-cta .editorial-copyright{order:4;}.editorial-columns{gap:20px;}.editorial-columns a,.editorial-columns h3{font-size:14px;}} .editorial-reveal{height:362px;} .editorial-wordmark{top:97px;} @media(max-width:760px){.editorial-reveal{height:calc(20.238095vw + 32px);}.editorial-wordmark{top:calc(2.71164vw + 32px);}} /* Compact mobile reveal with the wordmark cropped at the lower edge. */ @media(max-width:680px){ body .updated-hawl footer.editorial-footer{margin-bottom:146px!important;} body .editorial-reveal{height:146px!important;min-height:146px!important;} body .editorial-reveal{padding-top:41px!important;} body .editorial-reveal .editorial-wordmark{top:41px;bottom:auto;} body.home-mobile-root .editorial-reveal .editorial-wordmark{top:41px;} }