:root{--paper:#f5f5f3;--white:#fff;--ink:#171717;--soft:#727272;--line:#e4e4e1;--orange:#bd6a32;--mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Manrope',sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5}a{color:inherit;text-decoration:none}button{font:inherit}.shell{width:min(1180px,calc(100% - 64px));margin:auto}.micro{font:9px var(--mono);letter-spacing:.04em;color:#777;text-transform:uppercase}.topbar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #e4e4e1}.brand{font:700 16px var(--display);letter-spacing:-.07em;display:flex;gap:8px;align-items:center}.brand-mark{width:17px;height:17px;display:grid;place-items:center;background:#171717;color:white;font-size:10px;border-radius:4px}.nav{display:flex;gap:27px;font-size:10px}.nav a{color:#555}.nav a:hover{color:var(--orange)}.top-right{display:flex;justify-content:flex-end;align-items:center;gap:20px}.availability{font:8px var(--mono);color:#555;text-align:right}.availability b{display:block;color:#171717;font-weight:500}.menu{display:none;background:transparent;border:0;font-size:22px} .hero{position:relative;min-height:670px;padding:65px 14px 0;overflow:hidden;background:#f1f1ef}.hero-top{position:relative;z-index:2;display:grid;grid-template-columns:1fr 245px;gap:40px}.hero-copy{max-width:675px}.hero h1{font:600 clamp(54px,7.5vw,94px)/.92 var(--display);letter-spacing:-.095em;margin:16px 0 17px;max-width:700px}.hero h1 .muted{color:#8c8c89}.hero-desc{font-size:12px;line-height:1.75;color:#646460;max-width:420px}.hero-actions{display:flex;gap:8px;margin-top:20px}.pill{display:inline-flex;align-items:center;gap:13px;padding:10px 13px;border-radius:30px;background:#181818;color:white;font-size:9px}.pill .circle{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:white;color:#111}.pill-light{background:#e3e3e1;color:#444}.hero-side{padding-top:58px}.feature-mini{background:#dededc;border-radius:14px;padding:13px;height:107px;display:flex;align-items:center;gap:12px}.feature-icon{width:76px;height:78px;border-radius:11px;background:#121212;color:white;display:grid;place-items:center;font:700 27px var(--display)}.feature-copy{font:500 13px/1.15 var(--display);letter-spacing:-.04em}.feature-copy small{display:block;font:8px var(--mono);letter-spacing:0;color:#777;margin-top:8px}.trusted{margin-top:35px}.trusted-logos{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;color:#70706d;font:600 9px var(--display)}.trusted-logos span{border:1px solid #dfdfdc;border-radius:20px;padding:5px 8px}.hero-photo-wrap{position:absolute;z-index:1;left:50%;bottom:0;transform:translateX(-50%);height:435px;width:min(60%,610px);display:flex;justify-content:center;align-items:flex-end;pointer-events:none}.hero-photo{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:grayscale(1) contrast(1.16);mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,#000 77%,transparent 100%)}.hero-monogram{position:absolute;bottom:-54px;left:50%;transform:translateX(-50%);font:800 clamp(140px,23vw,300px)/.8 var(--display);letter-spacing:-.13em;color:#e2e2df;white-space:nowrap;z-index:0}.hero-ribbon{position:absolute;z-index:3;bottom:12px;left:20px;right:20px;display:flex;justify-content:space-between;padding:10px 14px;border-radius:30px;background:#171717d9;color:#ececea;font:8px var(--mono);letter-spacing:.02em}.hero-ribbon span:first-child:before,.hero-ribbon span:last-child:before{content:'• ';color:#c97a45} .intro{padding:76px 0 60px;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start;background:#fff}.intro-map{min-height:210px;position:relative;overflow:hidden}.globe{width:260px;height:260px;border-radius:50%;border:1px dotted #c7c7c4;position:absolute;top:10px;left:-38px;background:repeating-linear-gradient(90deg,transparent 0 17px,#e5e5e2 18px 19px,transparent 20px 38px);opacity:.6}.globe:before,.globe:after{content:'';position:absolute;inset:18px 54px;border:1px dotted #c7c7c4;border-radius:50%}.globe:after{inset:55px 3px}.intro-copy{max-width:600px}.intro-copy h2{font:500 clamp(23px,3vw,35px)/1.25 var(--display);letter-spacing:-.065em;margin:0}.intro-copy h2 span{color:#90908c}.intro-copy p{font-size:11px;color:#777;max-width:500px;margin:15px 0 20px}.intro-foot{border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;align-items:center}.socials{display:flex;gap:7px}.socials a{width:24px;height:24px;border-radius:50%;background:#f0f0ee;display:grid;place-items:center;font-size:9px}.socials a:first-child{background:var(--orange);color:white}.text-link{font-size:9px;border:1px solid #dededb;border-radius:30px;padding:8px 12px} .values{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:15px 0 95px;background:#fff}.value{height:82px;border-radius:50px;background:#f1f1ef;display:flex;align-items:center;justify-content:center;font:500 20px var(--display);letter-spacing:-.06em}.value:nth-child(2){background:var(--orange);color:white}.value:nth-child(3){background:#111;color:white;font-size:34px}.value:nth-child(4){color:#bfc0bd} .portfolio{background:white;padding:12px 0 100px}.section-title{text-align:center;margin:0 auto 36px}.section-title h2{font:500 clamp(32px,4vw,48px)/1.1 var(--display);letter-spacing:-.08em;margin:11px 0 7px}.section-title p{font-size:11px;color:#858581;margin:0}.case-feature{position:relative;min-height:375px;border-radius:19px;background:#101010;color:white;overflow:hidden;padding:34px;display:flex;flex-direction:column;justify-content:space-between}.case-feature:before{content:'A';position:absolute;font:800 360px/.8 var(--display);letter-spacing:-.12em;color:#171717;right:22%;top:2px}.case-feature:after{content:'';position:absolute;right:9%;top:34%;width:52px;height:52px;border-radius:50%;background:#292929;display:grid;place-items:center;font-size:19px}.case-symbol{z-index:1;align-self:center;margin-top:80px;width:52px;height:52px;display:grid;place-items:center;background:white;color:#111;border-radius:12px;font:800 22px var(--display)}.case-info{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:25px}.case-info h3{font:500 24px var(--display);letter-spacing:-.06em;margin:0 0 6px}.case-info p{font-size:9px;color:#bdbdbd;max-width:310px;margin:0}.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tag{border:1px solid #474747;border-radius:30px;padding:6px 9px;font:8px var(--mono);color:#dededb}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:14px}.case-small{border-radius:14px;min-height:245px;padding:22px;background:#f2f2f0;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s}.case-small:hover{transform:translateY(-4px)}.case-small:nth-child(2){background:#e7e7e4}.case-small:nth-child(3){background:#e8e3df}.case-art{height:130px;display:grid;place-items:center;position:relative}.case-art .mini{width:75%;height:95px;background:#111;border-radius:9px;color:white;padding:12px;box-shadow:0 12px 26px #0002;transform:rotate(-3deg)}.case-art .mini.blue{background:#333f45;transform:rotate(3deg)}.case-art .mini.warm{background:#ad6336}.mini-title{font:600 9px var(--display)}.mini-lines{display:grid;gap:5px;margin-top:10px}.mini-lines i{height:3px;width:78%;background:#ffffff77;border-radius:4px}.mini-lines i:nth-child(2){width:55%}.mini-lines i:nth-child(3){width:67%}.case-small-bottom{display:flex;justify-content:space-between;align-items:end;gap:15px}.case-small h3{font:500 15px var(--display);letter-spacing:-.05em;margin:0 0 4px}.case-small p{font-size:9px;color:#777;margin:0}.case-small .arrow{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:13px;flex:none} .services{background:#f5f5f3;padding:86px 0}.services-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.services-head h2{font:500 38px/1.05 var(--display);letter-spacing:-.08em;margin:10px 0 0}.services-head p{max-width:330px;font-size:10px;color:#737370}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dededb}.service{padding:20px 17px 22px 0;border-bottom:1px solid #dededb;min-height:130px}.service:nth-child(3n+2),.service:nth-child(3n+3){padding-left:18px;border-left:1px solid #dededb}.service-num{font:9px var(--mono);color:var(--orange)}.service h3{font:500 15px var(--display);letter-spacing:-.04em;margin:24px 0 5px}.service p{font-size:9px;color:#777;max-width:275px;margin:0} .about{padding:90px 0;background:#fff;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.about h2{font:500 clamp(32px,4vw,48px)/1.08 var(--display);letter-spacing:-.08em;margin:12px 0}.about-copy{font-size:12px;color:#686865;max-width:590px}.skills{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}.skills span{border:1px solid #e0e0dd;border-radius:30px;padding:6px 9px;font:8px var(--mono);color:#555} .contact{background:#111;color:white;border-radius:18px;padding:45px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin-top:0;margin-bottom:60px}.contact h2{font:500 clamp(37px,5vw,60px)/1 var(--display);letter-spacing:-.09em;margin:14px 0}.contact p{font-size:11px;color:#aaa;max-width:400px}.contact-links{display:flex;flex-direction:column;justify-content:center}.contact-link{padding:12px 0;border-bottom:1px solid #343434;display:flex;justify-content:space-between;gap:10px;font-size:10px}.contact-link span:last-child{color:#bbb}.contact-link:hover span:last-child{color:#f0a46f}.footer{padding:18px 0 25px;display:flex;justify-content:space-between;color:#777;font:8px var(--mono);border-top:1px solid #e4e4e1} @media(max-width:760px){.shell{width:min(100% - 36px,1180px)}.topbar{grid-template-columns:1fr auto}.nav{display:none}.menu{display:block}.hero{min-height:660px;padding:48px 18px 0}.hero-top{grid-template-columns:1fr}.hero-side{display:none}.hero h1{font-size:clamp(54px,11vw,80px);max-width:610px}.hero-photo-wrap{width:90%;height:360px}.hero-ribbon{left:10px;right:10px;font-size:7px}.intro{grid-template-columns:1fr;gap:0;padding:55px 0 35px}.intro-map{min-height:125px}.globe{width:210px;height:210px;top:-18px}.values{padding-bottom:65px}.value{height:65px;font-size:15px}.portfolio{padding-bottom:70px}.case-grid{grid-template-columns:1fr 1fr}.case-small:last-child{grid-column:span 2}.services-head{align-items:start;flex-direction:column;gap:8px}.services-grid{grid-template-columns:repeat(2,1fr)}.service:nth-child(odd){padding-left:0;border-left:0}.service:nth-child(even){padding-left:15px;border-left:1px solid #dededb}.about{grid-template-columns:1fr;gap:12px;padding:65px 0}.contact{grid-template-columns:1fr;padding:30px 24px;gap:15px}} @media(max-width:480px){.shell{width:calc(100% - 30px)}.topbar{height:62px}.availability{display:none}.hero{min-height:620px;padding:38px 13px 0}.hero h1{font-size:50px}.hero-desc{max-width:300px}.hero-photo-wrap{height:320px;width:110%}.hero-ribbon{padding:8px 9px}.hero-ribbon span:nth-child(2){display:none}.intro-foot{align-items:flex-start;flex-direction:column;gap:13px}.values{grid-template-columns:repeat(2,1fr);padding:10px 0 55px}.value{height:58px}.case-feature{min-height:315px;padding:22px}.case-feature:before{font-size:290px}.case-symbol{margin-top:55px}.case-info{align-items:flex-start;flex-direction:column}.tags{justify-content:flex-start}.case-grid{grid-template-columns:1fr}.case-small:last-child{grid-column:auto}.case-small{min-height:210px}.case-art{height:110px}.services{padding:65px 0}.services-head h2{font-size:34px}.service{min-height:140px;padding-right:8px}.service:nth-child(even){padding-left:10px}.service h3{font-size:13px}.contact{padding:25px 20px;border-radius:12px}.contact-link{font-size:9px}.footer{flex-direction:column;gap:10px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}} @media(max-width:760px){.nav.mobile-open{display:flex;position:absolute;top:61px;right:18px;z-index:8;background:white;box-shadow:0 12px 25px #0002;padding:17px 22px;border-radius:9px;flex-direction:column;gap:15px}.nav.mobile-open a{font-size:12px}} .about-portrait-frame{height:390px;overflow:hidden;border-radius:14px;background:#ededeb}.about-portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 27%;display:block;mix-blend-mode:multiply}.about-page{grid-template-columns:.8fr 1.2fr;align-items:center}.about-page h2{margin-bottom:15px}@media(max-width:760px){.about-portrait-frame{height:330px;max-width:420px}.about-page{grid-template-columns:1fr;gap:28px}} .brand{gap:9px}.brand-mark{width:25px;height:25px;border-radius:50%;background:#171717;font:600 11px var(--display)}.brand-type{display:flex;flex-direction:column;gap:2px;line-height:1}.brand-first{font:8px var(--mono);letter-spacing:.16em;color:#777}.brand-last{font:800 15px/.95 var(--display);letter-spacing:-.065em}.brand-dot{color:var(--orange)} /* Framed portfolio direction */ body{background:#e5e5e3}.shell{width:min(1140px,calc(100% - 64px))}.topbar{height:48px;margin:28px auto 0;border:0;display:flex;justify-content:space-between}.profile-chip,.studio-chip{height:42px;padding:5px 13px 5px 6px;border-radius:30px;background:#f4f4f2;display:flex;align-items:center;gap:9px;font-size:12px;color:#343434}.profile-chip img{width:29px;height:29px;object-fit:cover;object-position:center 25%;border-radius:50%}.studio-chip{padding:6px 15px 6px 7px;font-size:13px}.studio-icon{width:28px;height:28px;border-radius:8px;background:#111;color:#fff;display:grid;place-items:center;font-size:15px}.page-frame{margin:110px auto 54px;border:7px solid #d0d0ce;border-radius:30px;background:#fff;padding:14px 5% 28px;min-height:760px;overflow:hidden}.page-frame .shell{width:100%}.frame-inner-nav{height:48px;position:relative;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 12px;background:#f2f2f0;border:1px solid #e9e9e7;border-radius:15px}.frame-inner-nav .brand{justify-self:start}.frame-inner-nav .nav{display:flex;gap:20px}.frame-inner-nav .nav a{font-size:9px;color:#363636}.frame-inner-nav .nav a:hover{color:var(--orange)}.frame-contact{justify-self:end;background:#111;color:white;border-radius:9px;padding:10px 14px;font-size:9px}.frame-inner-nav .menu{display:none}.hero-frame{position:relative;min-height:695px;margin:0 -5.55%;padding:92px 6% 0;overflow:hidden;background:linear-gradient(#fff 56%,#fdfdfc 100%)}.hero-label{position:absolute;left:6%;top:35px;color:#686866}.hero-word{position:absolute;top:85px;left:50%;transform:translateX(-50%);white-space:nowrap;font:300 clamp(52px,9.6vw,126px)/.92 var(--display);letter-spacing:-.09em;color:#101010;z-index:1}.portrait-orbit{position:absolute;width:500px;height:360px;border:6px solid #ececea;border-radius:50%;left:50%;top:220px;transform:translateX(-50%) rotate(-25deg)}.hero-photo-wrap{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);height:560px;width:min(57%,550px);display:flex;justify-content:center;align-items:flex-end;pointer-events:none}.hero-photo{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:contrast(1.04);mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,#000 74%,transparent 100%)}.hero-copy-bottom{position:absolute;z-index:4;left:6%;bottom:82px;width:300px}.hero-copy-bottom .micro{font-size:8px;color:#777}.hero-copy-bottom h2{font:500 24px/1.04 var(--display);letter-spacing:-.06em;margin:9px 0}.hero-copy-bottom p{font-size:10px;line-height:1.6;color:#4d4d4b;margin:0 0 14px}.hero-button{display:inline-flex;background:#111;color:white;border-radius:7px;padding:11px 14px;font-size:9px}.expert-card{position:absolute;z-index:4;right:7%;bottom:78px;width:270px}.expert-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:8px var(--mono);color:#454545}.expert-card-top i{height:1px;background:#999;flex:1}.expert-card-body{display:flex;gap:10px;align-items:center;border-radius:9px;background:#e5e5e3;padding:8px}.expert-avatar{width:77px;height:65px;overflow:hidden;border-radius:6px;background:#f6f6f4;flex:none}.expert-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 24%;mix-blend-mode:multiply}.expert-card-body strong,.expert-card-body span,.expert-card-body small{display:block}.expert-card-body strong{font:600 12px var(--display)}.expert-card-body span{font-size:9px;color:#555;margin-top:2px}.expert-card-body small{font:8px var(--mono);color:#666;margin-top:5px}.hero-scroll{position:absolute;z-index:5;right:6%;bottom:22px;font:8px var(--mono);color:#888}.intro,.values,.portfolio,.services,.about,.contact{background:#fff}.page-frame .intro{padding:65px 0 45px}.page-frame .portfolio{padding:20px 0 65px}.page-frame .services{padding:65px 0}.page-frame .about{padding:65px 0}.page-frame .contact{margin:25px 0 35px}.page-frame .footer{padding:15px 0 5px}.page-frame .case-grid{grid-template-columns:repeat(3,1fr)} @media(max-width:760px){.shell{width:calc(100% - 30px)}.topbar{margin-top:14px}.page-frame{margin:28px auto 35px;border-width:5px;border-radius:21px;padding:10px 5% 22px;min-height:680px}.frame-inner-nav{grid-template-columns:1fr auto;height:46px;padding:4px 8px}.frame-inner-nav .nav{display:none}.frame-inner-nav .frame-contact{display:none}.frame-inner-nav .menu{display:block;font-size:20px}.frame-inner-nav .nav.mobile-open{display:flex;position:absolute;top:51px;right:0;background:white;box-shadow:0 12px 25px #0002;padding:15px 19px;border-radius:9px;flex-direction:column;gap:14px}.hero-frame{min-height:680px;margin:0 -5.55%;padding-top:75px}.hero-word{top:111px;font-size:clamp(45px,11vw,83px)}.portrait-orbit{top:215px;width:350px;height:300px}.hero-photo-wrap{width:90%;height:435px}.hero-copy-bottom{left:6%;bottom:75px;width:44%}.hero-copy-bottom h2{font-size:20px}.hero-copy-bottom p{font-size:9px}.expert-card{right:5%;bottom:78px;width:43%}.expert-avatar{width:53px;height:55px}.expert-card-body{gap:7px;padding:6px}.expert-card-body strong{font-size:10px}.expert-card-body span{font-size:8px}.expert-card-body small{font-size:7px}.hero-scroll{bottom:20px}.page-frame .intro{grid-template-columns:1fr;padding-top:48px}.page-frame .case-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.profile-chip,.studio-chip{height:36px;font-size:10px}.profile-chip img{width:25px;height:25px}.studio-icon{width:24px;height:24px}.page-frame{width:calc(100% - 18px);margin-top:20px;border-radius:17px;padding:8px 4% 18px}.frame-inner-nav{height:42px}.frame-inner-nav .brand-last{font-size:13px}.hero-frame{min-height:630px;padding-top:66px}.hero-label{top:26px;font-size:7px}.hero-word{top:105px;font-size:clamp(39px,10vw,54px)}.portrait-orbit{top:190px;width:285px;height:245px}.hero-photo-wrap{height:370px;width:108%}.hero-copy-bottom{left:5%;bottom:66px;width:48%}.hero-copy-bottom h2{font-size:17px}.hero-copy-bottom p{font-size:8px}.hero-button{padding:9px 10px;font-size:8px}.expert-card{width:43%;right:4%;bottom:70px}.expert-avatar{width:42px;height:45px}.expert-card-body strong{font-size:9px}.expert-card-body span,.expert-card-body small{font-size:7px}.expert-card-top{font-size:7px}.hero-scroll{font-size:7px}.page-frame .case-grid{grid-template-columns:1fr}.page-frame .case-small:last-child{grid-column:auto}.page-frame .contact{padding:23px 18px}} .hero-photo,.about-portrait-frame img,.expert-avatar img{mix-blend-mode:normal} .page-frame{box-shadow:0 24px 60px rgba(0,0,0,.17),0 5px 16px rgba(0,0,0,.08)}.profile-chip,.studio-chip{box-shadow:0 5px 16px rgba(0,0,0,.07)}.hero-photo{filter:drop-shadow(0 28px 24px rgba(0,0,0,.32)) drop-shadow(0 8px 10px rgba(0,0,0,.14))}.expert-card-body{box-shadow:0 12px 26px rgba(0,0,0,.17)}.hero-button{box-shadow:0 6px 14px rgba(0,0,0,.16)} .hero-frame{isolation:isolate}.hero-frame:before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:47%;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.14) 28%,rgba(0,0,0,.055) 64%,transparent 100%)}.hero-photo-wrap,.hero-copy-bottom,.expert-card,.hero-scroll{z-index:2}.hero-copy-bottom,.expert-card,.hero-scroll{z-index:3} .hero-frame::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:205px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.52) 36%,rgba(255,255,255,.9) 72%,#fff 100%)}.hero-photo{mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.94) 65%,rgba(0,0,0,.62) 77%,transparent 95%)}@media(max-width:760px){.hero-frame::after{height:165px}}@media(max-width:480px){.hero-frame::after{height:145px}} body{background:#fff}.page-frame{background:#fff;border-color:#f0f0ee;box-shadow:0 18px 45px rgba(0,0,0,.08),0 3px 10px rgba(0,0,0,.04)}.profile-chip,.studio-chip{background:#fafaf9;box-shadow:0 4px 12px rgba(0,0,0,.045)} .hero-photo{filter:drop-shadow(0 0 16px rgba(255,255,255,.98)) drop-shadow(0 0 34px rgba(255,255,255,.8)) drop-shadow(0 18px 22px rgba(0,0,0,.12))}.about-portrait-frame img{filter:drop-shadow(0 0 18px rgba(255,255,255,.95))} /* Editorial deep-blue visual system */ body{background:#fff;color:#111}.page-frame{width:min(1440px,100%);margin:0 auto;border:0;border-radius:0;box-shadow:none;background:#fff;padding:0 4.4%;min-height:0;overflow:hidden}.frame-inner-nav{height:66px;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 0;background:#fff;border:0;border-radius:0;border-bottom:1px solid #eceef2;z-index:10}.frame-inner-nav .brand{justify-self:start}.frame-inner-nav .nav{display:flex;gap:25px}.frame-inner-nav .nav a{font-size:10px;color:#333}.frame-contact{justify-self:end;background:#111;color:#fff;border-radius:20px;padding:10px 16px;font-size:9px}.frame-inner-nav .menu{display:none}.page-frame .shell{width:100%}.hero-frame{position:relative;min-height:740px;margin:0 -4.82%;padding:0 5%;overflow:hidden;background:radial-gradient(ellipse at 12% 12%,#1f46bf 0%,transparent 47%),radial-gradient(ellipse at 82% 100%,#064df8 0%,transparent 43%),linear-gradient(135deg,#080d23 5%,#071638 53%,#020714 100%);color:#fff}.hero-frame:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 14%,#fff 0 1px,transparent 2px),radial-gradient(circle at 39% 26%,#dce6ff 0 1px,transparent 2px),radial-gradient(circle at 88% 34%,#fff 0 1px,transparent 2px),radial-gradient(circle at 22% 60%,#dce6ff 0 1px,transparent 2px),radial-gradient(circle at 68% 48%,#fff 0 1px,transparent 2px),linear-gradient(180deg,transparent 55%,rgba(24,104,255,.26) 82%,rgba(101,187,255,.55) 86%,transparent 88%);opacity:.65;pointer-events:none}.hero-label{position:absolute;left:5%;top:46px;color:#c4d5ff;font-size:9px;z-index:3}.hero-word{position:absolute;top:117px;left:50%;transform:translateX(-50%);white-space:nowrap;font:300 clamp(60px,10vw,140px)/.9 var(--display);letter-spacing:-.09em;color:#f3f5ff;z-index:1}.portrait-orbit{position:absolute;width:520px;height:410px;border:1px solid rgba(127,178,255,.3);border-radius:50%;left:50%;top:235px;transform:translateX(-50%) rotate(-25deg);box-shadow:0 0 80px rgba(39,111,255,.14)}.hero-photo-wrap{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);height:590px;width:min(58%,570px);display:flex;justify-content:center;align-items:flex-end;pointer-events:none}.hero-photo{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 18px rgba(255,255,255,.7)) drop-shadow(0 24px 30px rgba(0,0,0,.35));mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.42) 84%,transparent 96%)}.hero-frame:after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:205px;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,32,0) 0%,rgba(5,13,34,.42) 40%,#07112a 100%)}.hero-copy-bottom{position:absolute;z-index:4;left:5%;bottom:85px;width:315px}.hero-copy-bottom .micro{font-size:8px;color:#bdcced}.hero-copy-bottom h2{font:500 26px/1.05 var(--display);letter-spacing:-.06em;margin:9px 0}.hero-copy-bottom p{font-size:10px;line-height:1.65;color:#d4dcf0;margin:0 0 14px}.hero-button{display:inline-flex;background:#fff;color:#111;border-radius:6px;padding:11px 14px;font-size:9px;box-shadow:0 6px 18px #0003}.expert-card{position:absolute;z-index:4;right:6%;bottom:82px;width:270px}.expert-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:8px var(--mono);color:#d0dcf5}.expert-card-top i{height:1px;background:#8291ad;flex:1}.expert-card-body{display:flex;gap:10px;align-items:center;border-radius:9px;background:rgba(255,255,255,.88);color:#111;padding:8px;box-shadow:0 12px 30px #0004;backdrop-filter:blur(12px)}.expert-avatar{width:77px;height:65px;overflow:hidden;border-radius:6px;background:#f6f6f4;flex:none}.expert-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 24%}.expert-card-body strong,.expert-card-body span,.expert-card-body small{display:block}.expert-card-body strong{font:600 12px var(--display)}.expert-card-body span{font-size:9px;color:#555;margin-top:2px}.expert-card-body small{font:8px var(--mono);color:#666;margin-top:5px}.hero-scroll{position:absolute;z-index:5;right:5%;bottom:23px;font:8px var(--mono);color:#d6e1fb}.intro,.values,.portfolio,.services,.about{background:#fff;color:#111}.page-frame .intro{padding:84px 0 72px}.intro-copy h2{font-size:clamp(25px,3vw,39px)}.intro-copy h2 span{color:#6679ae}.values{padding:15px 0 85px}.value{height:90px;border-radius:50px;background:#f2f4f8}.value:nth-child(2){background:linear-gradient(120deg,#233cff,#0fa8ff);color:#fff}.value:nth-child(3){background:#07142d;color:white}.value:nth-child(4){background:#e8f2ff;color:#5275b7}.page-frame .portfolio{padding:35px 0 90px}.section-title h2{font-size:clamp(34px,4vw,51px)}.case-feature{background:radial-gradient(ellipse at 85% 90%,#1264ff 0,transparent 50%),radial-gradient(ellipse at 15% 0,#1b388d 0,transparent 53%),linear-gradient(140deg,#080d20,#030611);border-radius:18px}.case-feature:before{color:#111a38}.case-symbol{background:#fff;color:#081027}.case-small{background:#f2f5fa}.case-small:nth-child(2){background:#ebf2ff}.case-small:nth-child(3){background:#eaf0f7}.case-art .mini{background:radial-gradient(ellipse at 80% 90%,#0d65ff,#05132c 70%)}.case-art .mini.warm{background:linear-gradient(135deg,#15204a,#04aaff)}.case-art .mini.blue{background:linear-gradient(140deg,#07122d,#344dff,#04b8ff)}.case-small .arrow{background:#fff;box-shadow:0 4px 14px #0014}.services{background:#fff}.services-head{border-radius:0}.service{border-color:#e6e9ef}.service-num{color:#315bfa}.service{background:#fff}.about-page{background:linear-gradient(125deg,#f5f8ff,#fff 65%)}.about-page .about-copy{color:#4c556a}.about-page h2{color:#111}.about-portrait-frame{background:#edf2fa;box-shadow:0 18px 45px #0716301c}.contact{background:radial-gradient(ellipse at 95% 95%,#174bfa 0,transparent 55%),linear-gradient(130deg,#061128,#080b19);color:#fff;border-radius:16px}.contact p{color:#d0d8e9}.contact-link{border-color:#29334a}.contact-link span:last-child{color:#a8c5ff}.page-frame .footer{background:#03050c;color:#a8afbf;margin:0 -4.82%;width:calc(100% + 9.64%);padding:38px 4.8%;border:0}.page-frame .footer a{color:#fff}.work-page .portfolio{padding-top:0}.work-page .section-title{margin:0 -4.82% 45px;width:calc(100% + 9.64%);padding:90px 9.6% 75px;text-align:left;background:radial-gradient(ellipse at 80% 115%,#125aff 0,transparent 55%),linear-gradient(135deg,#070c20,#0a1e4c)}.work-page .section-title h2,.work-page .section-title p{color:#fff}.work-page .section-title .micro{color:#c7d6fa}.services-page .services{padding-top:0}.services-page .services-head{margin:0 -4.82% 35px;width:calc(100% + 9.64%);padding:84px 9.6% 65px!important;background:radial-gradient(ellipse at 90% 100%,#1457f6 0,transparent 50%),linear-gradient(135deg,#080e24,#10265d);color:#fff}.services-page .services-head h2{font-size:clamp(44px,6.5vw,82px);color:#fff}.services-page .services-head p,.services-page .services-head .micro{color:#d6e1fa}.about-page-body .about-page{margin:0 -4.82%;width:calc(100% + 9.64%);padding:80px 9.6%!important;background:radial-gradient(ellipse at 10% 100%,#1755f5 0,transparent 48%),linear-gradient(135deg,#071027,#0b1d45);color:#fff}.about-page-body .about-page h2,.about-page-body .about-page .micro{color:#fff}.about-page-body .about-page .about-copy{color:#d3dcf1}.about-page-body .about-page .skills span{border-color:#53658d;color:#e6edff}.contact-page main{padding-top:45px}.contact-page .contact{min-height:520px;padding:60px;align-items:center} @media(max-width:760px){.page-frame{width:100%;padding:0 18px}.frame-inner-nav{grid-template-columns:1fr auto;height:58px}.frame-inner-nav .nav{display:none}.frame-inner-nav .frame-contact{display:none}.frame-inner-nav .menu{display:block;color:#111}.frame-inner-nav .nav.mobile-open{display:flex;position:absolute;top:51px;right:0;background:white;box-shadow:0 12px 25px #0002;padding:15px 19px;border-radius:9px;flex-direction:column;gap:14px}.hero-frame{min-height:680px;margin:0 -18px;padding:0 18px}.hero-word{top:126px;font-size:clamp(48px,10.5vw,84px)}.hero-label{left:18px;top:31px}.portrait-orbit{top:220px;width:350px;height:320px}.hero-photo-wrap{width:88%;height:460px}.hero-copy-bottom{left:24px;bottom:83px;width:43%}.hero-copy-bottom h2{font-size:21px}.hero-copy-bottom p{font-size:9px}.expert-card{right:20px;bottom:80px;width:42%}.expert-avatar{width:52px;height:56px}.expert-card-body{gap:7px;padding:6px}.expert-card-body strong{font-size:10px}.expert-card-body span{font-size:8px}.expert-card-body small{font-size:7px}.hero-frame:after{height:180px}.hero-scroll{right:18px}.page-frame .intro{grid-template-columns:1fr;padding-top:55px}.page-frame .case-grid{grid-template-columns:1fr 1fr}.work-page .section-title,.services-page .services-head,.about-page-body .about-page{margin-left:-18px;margin-right:-18px;width:calc(100% + 36px);padding-left:28px;padding-right:28px}.services-page .services-head{padding-top:65px!important}.contact-page .contact{padding:32px 24px}} @media(max-width:480px){.page-frame{padding:0 14px}.frame-inner-nav{height:52px}.hero-frame{margin:0 -14px;min-height:630px;padding:0 14px}.hero-label{left:14px;top:26px;font-size:7px}.hero-word{top:116px;font-size:clamp(40px,10vw,58px)}.portrait-orbit{top:195px;width:290px;height:260px}.hero-photo-wrap{height:385px;width:105%}.hero-copy-bottom{left:18px;bottom:68px;width:47%}.hero-copy-bottom h2{font-size:17px}.hero-copy-bottom p{font-size:8px}.hero-button{font-size:8px;padding:9px 10px}.expert-card{width:43%;right:14px;bottom:71px}.expert-avatar{width:42px;height:45px}.expert-card-body strong{font-size:9px}.expert-card-body span,.expert-card-body small{font-size:7px}.expert-card-top{font-size:7px}.hero-scroll{font-size:6px;bottom:19px}.hero-frame:after{height:145px}.page-frame .case-grid{grid-template-columns:1fr}.contact-page .contact{padding:25px 18px}.work-page .section-title,.services-page .services-head,.about-page-body .about-page{margin-left:-14px;margin-right:-14px;width:calc(100% + 28px);padding-left:22px;padding-right:22px}.services-page .services-head h2{font-size:48px}} /* Full home landing page */ .landing-page .hero-frame{min-height:760px}.landing-page .home-work{padding-top:78px}.home-work .section-title{text-align:left;margin-bottom:38px}.home-work .section-title h2{font-size:clamp(42px,6vw,76px);line-height:.98}.home-work .case-feature{min-height:440px}.home-work .case-grid{margin-top:16px}.home-link-row{display:flex;justify-content:flex-end;margin-top:24px}.home-link-row .text-link{border-color:#dce2ef}.landing-services{padding:95px 0 88px;background:#f6f8fc}.landing-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}.landing-section-head h2{font:500 clamp(38px,5vw,64px)/.99 var(--display);letter-spacing:-.08em;margin:12px 0 0}.landing-section-head p{max-width:350px;font-size:12px;line-height:1.7;color:#677187;margin:0 0 5px}.landing-services .services-grid{border-top:1px solid #dfe5f0}.landing-services .service{min-height:175px;padding-top:22px;border-color:#dfe5f0;background:transparent}.landing-services .service:nth-child(3n+2),.landing-services .service:nth-child(3n+3){padding-left:20px;border-left:1px solid #dfe5f0}.landing-services .service h3{font-size:17px;margin-top:35px}.landing-services .service p{font-size:11px}.landing-services .service-num{color:#315bfa}.landing-process{padding:95px 0;background:#fff}.process-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #e3e6ec;border-bottom:1px solid #e3e6ec}.process-grid article{padding:20px 16px 25px;border-right:1px solid #e3e6ec}.process-grid article:first-child{padding-left:0}.process-grid article:last-child{border-right:0}.process-grid article>span{font:10px var(--mono);color:#315bfa}.process-grid h3{font:600 15px var(--display);letter-spacing:-.04em;margin:32px 0 7px}.process-grid p{font-size:10px;line-height:1.65;color:#717b8d;margin:0}.landing-about{padding:85px 0;background:#f6f8fc}.landing-about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}.landing-about-photo{height:420px;position:relative;background:radial-gradient(ellipse at 70% 8%,#b9d6ff,#f2f6fc 70%);border-radius:12px;overflow:hidden}.landing-about-photo img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 20px #1113)}.landing-about-photo span{position:absolute;bottom:14px;left:16px;font:8px var(--mono);color:#52617d}.landing-about h2{font:500 clamp(38px,5vw,60px)/1 var(--display);letter-spacing:-.08em;margin:13px 0}.landing-about p{font-size:12px;line-height:1.8;color:#5f687a}.landing-about .skills{margin:18px 0 22px}.landing-about .skills span{border-color:#d8dfec}.landing-about .text-link{display:inline-block}.landing-cta{padding:0 0 70px;background:#f6f8fc}.landing-cta-inner{padding:55px 58px;border-radius:16px;background:radial-gradient(ellipse at 95% 110%,#135aff 0,transparent 50%),linear-gradient(130deg,#061128,#0b1c43);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:35px}.landing-cta .micro{color:#cbd9f8}.landing-cta h2{font:500 clamp(42px,5vw,64px)/.95 var(--display);letter-spacing:-.08em;margin:12px 0}.landing-cta p{font-size:11px;color:#d4ddef;max-width:390px}.landing-cta-actions{display:flex;flex-direction:column;gap:13px;align-items:flex-start;flex:none}.landing-cta-actions a{font-size:10px;color:#d6e2ff}.landing-cta-actions .cta-white{background:#fff;color:#111;border-radius:5px;padding:13px 16px}.landing-page .footer{margin-top:0} @media(max-width:760px){.landing-page .hero-frame{min-height:680px}.landing-section-head{flex-direction:column;align-items:flex-start;gap:12px}.landing-services,.landing-process{padding:65px 0}.process-grid{grid-template-columns:repeat(3,1fr)}.process-grid article:nth-child(3){border-right:0}.process-grid article:nth-child(n+4){border-top:1px solid #e3e6ec}.landing-about-grid{grid-template-columns:1fr;gap:34px}.landing-about-photo{height:370px;max-width:500px}.landing-cta-inner{padding:35px 27px;align-items:flex-start;flex-direction:column;gap:10px}.home-work .case-feature{min-height:365px}} @media(max-width:480px){.landing-page .hero-frame{min-height:630px}.home-work{padding-top:55px!important}.home-work .case-feature{min-height:315px}.home-work .case-info{align-items:flex-start;flex-direction:column}.landing-services .services-grid{grid-template-columns:1fr 1fr}.landing-services .service:nth-child(odd){padding-left:0;border-left:0}.landing-services .service:nth-child(even){padding-left:12px;border-left:1px solid #dfe5f0}.landing-services .service{min-height:150px}.landing-services .service h3{font-size:14px;margin-top:27px}.landing-services .service p{font-size:9px}.process-grid{grid-template-columns:repeat(2,1fr)}.process-grid article:nth-child(3){border-right:1px solid #e3e6ec}.process-grid article:nth-child(even){border-right:0}.process-grid article:nth-child(n+3){border-top:1px solid #e3e6ec}.process-grid article{min-height:135px}.landing-about-photo{height:310px}.landing-cta-inner{padding:28px 21px}} /* Monochrome white theme */ body{background:#fff;color:#111}.page-frame{background:#fff}.frame-inner-nav{background:#fff;border-bottom-color:#ededed}.frame-inner-nav .nav a{color:#333}.frame-inner-nav .nav a:hover{color:#777}.frame-contact,.brand-mark{background:#111;color:#fff}.brand-dot{color:#111}.hero-frame{background:linear-gradient(145deg,#fff 0%,#fafafa 56%,#f2f2f2 100%);color:#111}.hero-frame:before{background:radial-gradient(circle at 76% 14%,#d6d6d6 0 1px,transparent 2px),radial-gradient(circle at 39% 26%,#e3e3e3 0 1px,transparent 2px),radial-gradient(circle at 88% 34%,#d8d8d8 0 1px,transparent 2px),radial-gradient(circle at 22% 60%,#e5e5e5 0 1px,transparent 2px),radial-gradient(circle at 68% 48%,#ddd 0 1px,transparent 2px);opacity:.35}.hero-label,.hero-copy-bottom .micro{color:#777}.hero-word{color:#111}.portrait-orbit{border-color:#e5e5e5;box-shadow:0 0 70px #00000008}.hero-photo{filter:drop-shadow(0 0 18px rgba(255,255,255,.98)) drop-shadow(0 20px 22px rgba(0,0,0,.17))}.hero-frame:after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.68) 45%,#fff 100%)}.hero-copy-bottom h2{color:#111}.hero-copy-bottom p{color:#5d5d5d}.hero-button{background:#111;color:#fff}.expert-card-top{color:#666}.expert-card-top i{background:#aaa}.expert-card-body{background:rgba(245,245,245,.94);box-shadow:0 12px 30px #0002}.hero-scroll{color:#666}.intro-copy h2 span{color:#858585}.value{background:#f4f4f4;color:#111}.value:nth-child(2){background:#161616;color:#fff}.value:nth-child(3){background:#e8e8e8;color:#111}.value:nth-child(4){background:#f6f6f6;color:#777}.case-feature{background:radial-gradient(ellipse at 85% 90%,#555 0,transparent 50%),radial-gradient(ellipse at 15% 0,#333 0,transparent 53%),linear-gradient(140deg,#171717,#050505)}.case-feature:before{color:#222}.case-symbol{background:#fff;color:#111}.case-small,.case-small:nth-child(2),.case-small:nth-child(3){background:#f3f3f3}.case-art .mini{background:linear-gradient(135deg,#111,#4b4b4b)}.case-art .mini.warm{background:linear-gradient(135deg,#292929,#777)}.case-art .mini.blue{background:linear-gradient(140deg,#080808,#555)}.service-num,.landing-services .service-num,.process-grid article>span{color:#222}.landing-services{background:#f7f7f7}.landing-section-head p{color:#696969}.landing-services .services-grid,.landing-services .service,.process-grid article{border-color:#e5e5e5}.about-page{background:linear-gradient(125deg,#f5f5f5,#fff 65%)}.about-page .about-copy{color:#555}.about-page-body .about-page{background:linear-gradient(145deg,#f6f6f6,#fff);color:#111}.about-page-body .about-page h2,.about-page-body .about-page .micro{color:#111}.about-page-body .about-page .about-copy{color:#555}.about-page-body .about-page .skills span{border-color:#ddd;color:#444}.about-portrait-frame{background:#f1f1f1;box-shadow:0 18px 45px #00000012}.landing-about{background:#f6f6f6}.landing-about-photo{background:radial-gradient(ellipse at 70% 8%,#eee,#f7f7f7 70%)}.landing-about .skills span{border-color:#ddd}.landing-cta{background:#f7f7f7}.landing-cta-inner{background:linear-gradient(135deg,#111,#333)}.landing-cta .micro,.landing-cta-actions a{color:#eee}.landing-cta-actions .cta-white{background:#fff;color:#111}.contact{background:linear-gradient(135deg,#111,#333);color:#fff}.contact-link{border-color:#555}.contact-link span:last-child{color:#ddd}.work-page .section-title{background:linear-gradient(135deg,#111,#3d3d3d)}.work-page .section-title h2,.work-page .section-title p{color:#fff}.work-page .section-title .micro{color:#ddd}.services-page .services-head{background:linear-gradient(135deg,#111,#3d3d3d);color:#fff}.services-page .services-head h2,.services-page .services-head p,.services-page .services-head .micro{color:#fff}.about-page-body .about-page{background:linear-gradient(135deg,#111,#3d3d3d);color:#fff}.about-page-body .about-page h2,.about-page-body .about-page .micro{color:#fff}.about-page-body .about-page .about-copy{color:#e2e2e2}.about-page-body .about-page .skills span{border-color:#666;color:#fff}.page-frame .footer{background:#050505;color:#aaa}.page-frame .footer a{color:#fff}.hero-copy-bottom .micro{color:#666}.services-page .service-num{color:#111} .hero-frame{background:#fff!important}.hero-frame:before{background:none!important;opacity:0!important}.hero-frame:after{height:260px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 38%,rgba(255,255,255,.92) 72%,#fff 100%)}.portrait-orbit{border-color:#f0f0f0;box-shadow:0 0 75px rgba(0,0,0,.025)} @media(max-width:760px){.hero-frame:after{height:210px}}@media(max-width:480px){.hero-frame:after{height:175px}} .hero-frame:after{height:390px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.58) 22%,rgba(255,255,255,.9) 42%,#fff 60%,#fff 100%)}.hero-photo{mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.76) 64%,rgba(0,0,0,.3) 76%,transparent 86%)} @media(max-width:760px){.hero-frame:after{height:310px}}@media(max-width:480px){.hero-frame:after{height:265px}} .hero-frame:after{height:440px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.68) 16%,rgba(255,255,255,.94) 30%,#fff 43%,#fff 100%)}.hero-photo{mask-image:linear-gradient(to bottom,#000 49%,rgba(0,0,0,.7) 61%,rgba(0,0,0,.2) 73%,transparent 82%)} @media(max-width:760px){.hero-frame:after{height:350px}}@media(max-width:480px){.hero-frame:after{height:300px}} .hero-frame:after{height:190px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.28) 72%,rgba(255,255,255,.56) 100%)}.hero-photo{mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.9) 82%,rgba(0,0,0,.64) 93%,rgba(0,0,0,.22) 100%)} @media(max-width:760px){.hero-frame:after{height:155px}}@media(max-width:480px){.hero-frame:after{height:130px}} .hero-frame:after{height:270px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 30%,rgba(255,255,255,.58) 68%,#fff 100%)}.hero-photo{mask-image:linear-gradient(to bottom,#000 67%,rgba(0,0,0,.9) 82%,rgba(0,0,0,.55) 94%,transparent 100%)} @media(max-width:760px){.hero-frame:after{height:215px}}@media(max-width:480px){.hero-frame:after{height:180px}} .hero-frame:after{height:360px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 18%,rgba(255,255,255,.72) 45%,rgba(255,255,255,.96) 72%,#fff 100%)}.hero-photo{mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.82) 74%,rgba(0,0,0,.42) 88%,transparent 100%)} @media(max-width:760px){.hero-frame:after{height:285px}}@media(max-width:480px){.hero-frame:after{height:235px}} .values{gap:7px}.value{height:78px;font-size:18px}.value:nth-child(3){font-size:30px}@media(max-width:760px){.value{height:60px;font-size:15px}.value:nth-child(3){font-size:24px}} /* Remove gray surface fills */ body,.page-frame,.frame-inner-nav,.intro,.values,.portfolio,.services,.about,.landing-services,.landing-about,.landing-cta,.case-small,.case-small:nth-child(2),.case-small:nth-child(3),.service,.about-portrait-frame,.landing-about-photo,.expert-card-body,.expert-avatar,.work-section{background:#fff!important}.hero-frame{background:#fff!important}.value,.value:nth-child(3),.value:nth-child(4){background:#fff!important;color:#111}.value:nth-child(2){background:#111!important;color:#fff}.case-art .mini{background:#111!important}.case-art .mini.warm,.case-art .mini.blue{background:#111!important}.contact,.landing-cta-inner,.case-feature,.work-page .section-title,.services-page .services-head,.about-page-body .about-page{background:#050505!important;color:#fff}.contact p,.landing-cta p,.about-page-body .about-page .about-copy,.services-page .services-head p{color:#eee}.profile-chip,.studio-chip{background:#fff!important}.landing-about-photo span{color:#555} /* WashShark GoHighLevel case study article */ .case-study-page .page-frame{overflow:visible}.case-study{color:#111}.study-hero{min-height:500px;position:relative;overflow:hidden;padding:76px 6%;background:linear-gradient(115deg,#050505 0%,#111 62%,#000 100%);color:#fff}.study-hero-inner{position:relative;z-index:2;max-width:690px}.study-kicker,.study-label{font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#777}.study-kicker{color:#ccc}.study-hero h1{font:500 clamp(44px,7vw,82px)/.95 var(--display);letter-spacing:-.09em;margin:25px 0 16px}.study-hero h1 span{color:#bbb}.study-hero p{font-size:13px;line-height:1.75;color:#ddd;max-width:520px}.study-meta{display:flex;gap:25px;flex-wrap:wrap;margin-top:36px;font:8px var(--mono);color:#ddd}.study-art{position:absolute;right:4%;bottom:0;width:43%;height:85%;overflow:hidden}.car-shape{position:absolute;width:82%;height:37%;bottom:16%;right:4%;background:linear-gradient(165deg,#fff 0%,#cfcfcf 32%,#454545 50%,#111 82%);border-radius:95px 140px 44px 38px;transform:skewX(-8deg);box-shadow:0 30px 90px #fff2}.car-shape:before{content:"";position:absolute;left:25%;top:-47%;width:48%;height:60%;background:linear-gradient(150deg,#f8f8f8,#777 52%,#111);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);border-radius:40px 60px 0 0}.car-shape:after{content:"";position:absolute;inset:10px 16px;border-top:1px solid #fff9;border-bottom:1px solid #fff3;border-radius:inherit}.car-shape i,.car-shape b{position:absolute;bottom:-18px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#eee 0 20%,#111 22% 60%,#555 62%);z-index:2}.car-shape i{left:18%}.car-shape b{right:17%}.orbit-line{position:absolute;right:2%;bottom:10%;width:90%;height:62%;border:1px solid #fff3;border-radius:50%;transform:rotate(-19deg)}.art-caption{position:absolute;right:9%;top:25%;font:700 26px var(--display);letter-spacing:.1em;color:#ffffff18;text-align:right}.art-caption small{font:8px var(--mono);color:#fff8}.study-summary{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding:85px 6%;border-bottom:1px solid #e8e8e8}.study-summary h2,.study-section-head h2,.study-end h2{font:500 clamp(29px,4vw,46px)/1.08 var(--display);letter-spacing:-.07em;margin:13px 0}.study-summary-copy{font-size:13px;line-height:1.85;color:#4d4d4d}.study-summary-copy p:first-child{margin-top:0}.study-flow{padding:80px 6%;border-bottom:1px solid #e8e8e8}.study-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}.study-section-head p{max-width:330px;color:#666;font-size:12px;line-height:1.7}.flow-grid{display:flex;align-items:center;justify-content:space-between;gap:8px}.flow-step{min-width:116px;display:flex;flex-direction:column;gap:6px}.flow-step span{font:9px var(--mono);color:#777}.flow-step strong{font:600 13px var(--display)}.flow-step small{font-size:9px;color:#666}.flow-arrow{font-weight:400;color:#222}.study-article{display:grid;grid-template-columns:190px 1fr;gap:65px;padding:85px 6%}.study-toc{position:sticky;top:25px;align-self:start;display:flex;flex-direction:column;gap:14px}.study-toc a{font-size:10px;color:#555}.study-toc a:hover{color:#111;text-decoration:underline}.study-body{max-width:760px}.study-body article{padding:0 0 52px;margin:0 0 50px;border-bottom:1px solid #e5e5e5;scroll-margin-top:30px}.study-body article:last-child{border-bottom:0}.study-body h2{font:500 clamp(27px,3.5vw,39px)/1.08 var(--display);letter-spacing:-.065em;margin:13px 0}.study-body p,.study-body li{font-size:13px;line-height:1.85;color:#4e4e4e}.study-body ul{padding-left:20px}.pipeline-list{margin:24px 0;border-top:1px solid #ddd}.pipeline-list div{display:flex;justify-content:space-between;gap:22px;padding:13px 0;border-bottom:1px solid #e5e5e5;font-size:11px}.pipeline-list span{color:#6a6a6a;text-align:right}.message-card{padding:18px 20px;border:1px solid #111;margin:22px 0}.message-card span{font:8px var(--mono);color:#555}.message-card p{margin-bottom:0;color:#222}.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.booking-grid div{padding:18px;border:1px solid #ddd}.booking-grid b{font:600 12px var(--display)}.booking-grid p{font-size:11px;margin-bottom:0}.metric-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:22px 0}.metric-list span{padding:11px 0;border-bottom:1px solid #e5e5e5;font-size:11px}.study-end{padding:75px 8%;background:#050505;color:white}.study-end .study-label{color:#bbb}.study-end h2{max-width:660px}.study-end p{font-size:12px;line-height:1.8;color:#ddd;max-width:600px}.study-cta{display:inline-block;background:#fff;color:#111;padding:13px 16px;margin-top:12px;font-size:10px}.case-study-page .footer{margin-top:0} @media(max-width:760px){.study-hero{min-height:560px;padding:55px 6%}.study-art{right:0;width:57%;height:55%;opacity:.68}.study-summary{grid-template-columns:1fr;gap:15px;padding:58px 6%}.study-flow{padding:58px 6%}.study-section-head{flex-direction:column;align-items:flex-start;gap:8px}.flow-grid{flex-wrap:wrap;justify-content:flex-start;gap:13px}.flow-step{min-width:100px}.flow-arrow{display:none}.study-article{grid-template-columns:1fr;gap:35px;padding:58px 6%}.study-toc{position:static;display:grid;grid-template-columns:1fr 1fr}.study-toc .study-label{grid-column:1/-1}.study-body article{padding-bottom:38px;margin-bottom:35px}} @media(max-width:480px){.study-hero{min-height:560px}.study-hero h1{font-size:48px}.study-art{width:76%;height:42%;bottom:5%}.study-meta{gap:12px}.flow-step{min-width:90px}.flow-step strong{font-size:11px}.pipeline-list div{flex-direction:column;gap:3px}.pipeline-list span{text-align:left}.booking-grid,.metric-list{grid-template-columns:1fr}.study-end{padding:55px 6%}} /* Responsive refinements: desktop, laptop, tablet and phone */ @media (min-width: 1500px) { .page-frame { width: min(1320px, calc(100% - 120px)); } .hero-frame { min-height: 760px; } .hero-word { font-size: clamp(126px, 9vw, 150px); } .hero-photo-wrap { height: 620px; width: min(58%, 650px); } .hero-copy-bottom { width: 330px; } .hero-copy-bottom h2 { font-size: 28px; } } @media (max-width: 1100px) { .page-frame { width: calc(100% - 44px); padding-left: 4%; padding-right: 4%; } .frame-inner-nav { grid-template-columns: 1fr auto auto; gap: 16px; } .frame-inner-nav .nav { display: none; } .frame-inner-nav .frame-contact { display: inline-flex; } .frame-inner-nav .menu { display: block; } .frame-inner-nav .nav.mobile-open { display: flex; position: absolute; top: 53px; right: 0; z-index: 20; min-width: 190px; padding: 16px 20px; flex-direction: column; gap: 14px; background: #fff; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 16px 38px #0002; } .frame-inner-nav .nav.mobile-open a { font-size: 12px; } .hero-frame { min-height: 690px; } .hero-copy-bottom { width: 265px; } .hero-copy-bottom h2 { font-size: 22px; } .expert-card { width: 245px; } .landing-services, .landing-process, .landing-about { padding-top: 72px; padding-bottom: 72px; } .landing-about-grid { gap: 38px; } .study-summary { gap: 38px; } .study-article { grid-template-columns: 155px minmax(0, 1fr); gap: 38px; } } @media (max-width: 760px) { html, body { width: 100%; overflow-x: clip; } .shell { width: calc(100% - 36px); } .page-frame { width: calc(100% - 20px); margin: 22px auto 28px; padding: 9px 4% 20px; border-width: 4px; border-radius: 20px; } .frame-inner-nav { height: 48px; grid-template-columns: 1fr auto auto; gap: 8px; padding: 4px 7px; } .frame-inner-nav .frame-contact { padding: 9px 12px; font-size: 9px; } .hero-frame, .landing-page .hero-frame { min-height: 760px; margin-left: -4.35%; margin-right: -4.35%; } .hero-word { top: 103px; width: 100%; text-align: center; font-size: clamp(48px, 10.5vw, 78px); } .portrait-orbit { top: 205px; width: min(74vw, 390px); height: min(65vw, 330px); } .hero-photo-wrap { width: min(92%, 520px); height: min(116vw, 470px); } .hero-copy-bottom { left: 5%; bottom: 72px; width: 55%; } .hero-copy-bottom h2 { font-size: clamp(19px, 3.4vw, 23px); } .hero-copy-bottom p { max-width: 310px; font-size: 9px; } .expert-card { right: 4%; bottom: 76px; width: 38%; } .expert-card-top { font-size: 7px; } .expert-card-body { gap: 6px; padding: 6px; } .expert-avatar { width: 44px; height: 48px; } .expert-card-body strong { font-size: 9px; } .expert-card-body span { font-size: 7px; } .expert-card-body small { font-size: 6px; } .hero-scroll { right: 5%; bottom: 22px; } .page-frame .intro { grid-template-columns: .45fr 1.55fr; gap: 20px; padding-top: 48px; } .page-frame .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-feature { min-height: 340px; padding: 25px; } .case-feature:before { font-size: clamp(240px, 48vw, 340px); } .case-info { gap: 15px; } .case-info h3 { font-size: 21px; } .landing-section-head { flex-direction: column; align-items: flex-start; gap: 12px; } .landing-services, .landing-process, .landing-about { padding: 62px 0; } .landing-about-grid { grid-template-columns: .8fr 1.2fr; gap: 24px; } .landing-about-photo { height: 330px; } .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .process-grid article { padding-left: 12px; padding-right: 12px; } .study-hero { min-height: 560px; } .study-art { width: 55%; opacity: .62; } .study-summary { grid-template-columns: .8fr 1.2fr; gap: 25px; padding: 58px 6%; } .study-flow { padding: 58px 6%; } .flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow-arrow { display: none; } .study-article { grid-template-columns: 1fr; gap: 26px; padding: 58px 6%; } .study-toc { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .study-toc .study-label { grid-column: 1 / -1; } .contact[style] { margin: 38px auto 50px !important; } .about-page[style] { padding-top: 50px !important; padding-bottom: 55px !important; } .services-head[style] { padding-top: 38px !important; } } @media (max-width: 560px) { .shell { width: calc(100% - 30px); } .page-frame { width: calc(100% - 14px); margin-top: 15px; padding: 7px 4% 16px; border-radius: 17px; } .frame-inner-nav { height: 44px; } .frame-inner-nav .brand-last { font-size: 13px; } .frame-inner-nav .brand-first { font-size: 7px; } .frame-inner-nav .frame-contact { display: none; } .frame-inner-nav .menu { font-size: 20px; } .hero-frame, .landing-page .hero-frame { min-height: 730px; } .hero-label { top: 24px; font-size: 7px; } .hero-word { top: 94px; font-size: clamp(40px, 10.4vw, 57px); letter-spacing: -.095em; } .portrait-orbit { top: 183px; width: 78vw; height: 66vw; } .hero-photo-wrap { height: min(112vw, 410px); width: 106%; } .hero-copy-bottom { left: 5%; bottom: 68px; width: 90%; } .hero-copy-bottom h2 { font-size: 19px; max-width: 255px; } .hero-copy-bottom p { max-width: 285px; font-size: 9px; } .hero-button { padding: 9px 11px; } .expert-card { display: none; } .hero-scroll { bottom: 23px; font-size: 7px; } .page-frame .intro { grid-template-columns: 1fr; gap: 8px; padding-top: 38px; } .intro-map { min-height: 115px; } .globe { width: 190px; height: 190px; } .intro-copy h2 { font-size: clamp(24px, 7vw, 32px); } .intro-foot { gap: 12px; align-items: flex-start; flex-direction: column; } .values { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 52px; } .value { height: 58px; font-size: 15px; } .value:nth-child(3) { font-size: 24px; } .page-frame .portfolio { padding-top: 10px; padding-bottom: 48px; } .section-title { margin-bottom: 25px; } .case-feature { min-height: 300px; padding: 20px; border-radius: 14px; } .case-feature:before { font-size: 260px; right: 8%; } .case-symbol { margin-top: 38px; } .case-info { flex-direction: column; align-items: flex-start; } .case-info h3 { font-size: 20px; } .case-info p { font-size: 9px; } .tags { justify-content: flex-start; } .page-frame .case-grid { grid-template-columns: 1fr; gap: 10px; } .page-frame .case-small { min-height: 205px; } .page-frame .case-small:last-child { grid-column: auto; } .services-head { align-items: flex-start; flex-direction: column; gap: 8px; } .services-head h2 { font-size: 32px; } .services-grid, .landing-services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service, .landing-services .service { min-height: 145px; padding-right: 9px; } .service:nth-child(odd), .landing-services .service:nth-child(odd) { padding-left: 0; border-left: 0; } .service:nth-child(even), .landing-services .service:nth-child(even) { padding-left: 12px; border-left: 1px solid #e5e5e5; } .service h3, .landing-services .service h3 { font-size: 13px; } .service p, .landing-services .service p { font-size: 9px; } .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process-grid article { min-height: 130px; border-top: 1px solid #e5e5e5; } .process-grid article:nth-child(odd) { border-right: 1px solid #e5e5e5; } .process-grid article:nth-child(even) { border-right: 0; } .landing-about-grid { grid-template-columns: 1fr; gap: 22px; } .landing-about-photo { height: 290px; max-width: none; } .landing-about h2 { font-size: 42px; } .landing-cta-inner { padding: 27px 20px; } .contact { grid-template-columns: 1fr; padding: 25px 19px; border-radius: 13px; } .contact-link { font-size: 9px; } .footer { flex-direction: column; gap: 10px; align-items: flex-start; } .about-portrait-frame { height: 290px; } .study-hero { min-height: 580px; padding: 42px 6%; } .study-hero h1 { font-size: clamp(43px, 12vw, 58px); } .study-art { width: 78%; height: 40%; bottom: 3%; opacity: .55; } .study-meta { gap: 10px 16px; } .study-summary { grid-template-columns: 1fr; gap: 10px; padding: 45px 6%; } .study-flow { padding: 45px 6%; } .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-step { min-width: 0; } .study-article { padding: 45px 6%; } .study-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .study-body article { padding-bottom: 32px; margin-bottom: 32px; } .study-end { padding: 48px 6%; } .pipeline-list div { align-items: flex-start; } } @media (max-width: 360px) { .page-frame { width: calc(100% - 8px); padding-left: 3%; padding-right: 3%; } .brand { gap: 6px; } .brand-mark { width: 22px; height: 22px; } .hero-frame, .landing-page .hero-frame { min-height: 700px; } .hero-word { font-size: 38px; } .hero-copy-bottom { bottom: 61px; } .hero-copy-bottom h2 { font-size: 18px; } .flow-grid { grid-template-columns: 1fr 1fr; } } /* Shared portfolio footer */ .page-frame .footer { display: block; margin: 24px 0 22px; padding: clamp(24px, 4vw, 42px) clamp(20px, 4.2vw, 52px) 20px; border: 0; border-radius: 18px; background: #090909; color: #fff; font: inherit; } .footer-top { display: grid; grid-template-columns: .7fr 1.2fr .9fr; align-items: start; gap: clamp(22px, 4vw, 58px); } .footer-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; } .footer-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #111; font: 700 14px var(--display); } .footer-brand small,.footer-brand strong { display: block; } .footer-brand small { color: #a4a4a4; font: 7px var(--mono); letter-spacing: .15em; } .footer-brand strong { color: #fff; font: 800 17px/.98 var(--display); letter-spacing: -.06em; } .footer-brand strong span { color: #aaa; } .footer-note .micro { color: #aaa; font-size: 8px; } .footer-note p { max-width: 340px; margin: 10px 0 0; color: #d1d1d1; font-size: 11px; line-height: 1.7; } .footer-cta { display: flex; flex-direction: column; gap: 10px; justify-self: end; color: #aaa; font-size: 10px; } .footer-cta b { color: #fff; font: 500 clamp(17px, 2vw, 22px) var(--display); letter-spacing: -.04em; } .footer-cta:hover b { color: #ccc; } .footer-divider { height: 1px; margin: 28px 0 15px; background: #303030; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #999; font: 8px var(--mono); } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; } .footer-bottom nav a { color: #c8c8c8; transition: color .2s ease; } .footer-bottom nav a:hover { color: #fff; } @media (max-width: 760px) { .page-frame .footer { margin: 18px 0 16px; padding: 25px 22px 17px; border-radius: 14px; } .footer-top { grid-template-columns: 1fr 1.3fr; gap: 20px; } .footer-cta { grid-column: 1 / -1; justify-self: start; gap: 6px; } .footer-cta b { font-size: 19px; } .footer-divider { margin: 21px 0 14px; } .footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; } .footer-bottom nav { gap: 10px 16px; } } @media (max-width: 480px) { .page-frame .footer { padding: 23px 18px 16px; } .footer-top { grid-template-columns: 1fr; gap: 19px; } .footer-note p { margin-top: 7px; } .footer-bottom nav { gap: 12px 15px; } .footer-bottom { font-size: 7px; } } /* Landing page content below the hero */ .landing-page .intro { padding: 104px 0 70px; grid-template-columns: .42fr 1.58fr; gap: 42px; align-items: start; } .landing-page .intro-map { min-height: 0; padding-top: 10px; overflow: visible; } .landing-page .intro-map .micro { position: static !important; color: #666; font-size: 8px; } .intro-index { display: block; margin-top: 28px; font: 500 clamp(38px, 5vw, 62px)/1 var(--display); letter-spacing: -.08em; color: #e4e4e4; } .landing-page .intro-copy { max-width: 850px; } .landing-page .intro-copy h2 { max-width: 820px; font: 500 clamp(34px, 5.1vw, 66px)/1.02 var(--display); letter-spacing: -.075em; } .landing-page .intro-copy h2 span { color: #888; } .landing-page .intro-copy p { max-width: 620px; margin: 22px 0 28px; color: #4d4d4d; font-size: 14px; line-height: 1.8; } .landing-page .intro-foot { padding-top: 17px; border-color: #dcdcdc; } .landing-page .values { grid-template-columns: 1fr 1fr .45fr 1fr; gap: 0; padding: 0 0 105px; } .landing-page .value { height: 72px; justify-content: flex-start; gap: 13px; padding: 0 18px; border-radius: 0; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; background: #fff !important; color: #111 !important; font: 500 15px var(--display); letter-spacing: -.03em; } .landing-page .value:first-child { border-left: 1px solid #d8d8d8; border-radius: 10px 0 0 10px; } .landing-page .value:last-child { border-right: 1px solid #d8d8d8; border-radius: 0 10px 10px 0; } .landing-page .value small { color: #858585; font: 8px var(--mono); } .landing-page .value-arrow { justify-content: center; font-size: 25px; } .home-work { padding: 12px 0 100px; } .home-work .section-title { margin-bottom: 42px; } .home-work .section-title .micro, .landing-page .micro { color: #666; } .home-work .section-title h2 { max-width: 760px; font-size: clamp(44px, 6.2vw, 78px); } .home-work .section-title p { max-width: 440px; margin-top: 15px; color: #666; font-size: 13px; line-height: 1.7; } .home-work .case-feature { min-height: 410px; border-radius: 5px; background: #080808; } .home-work .case-feature > .micro { color: #aaa !important; } .home-work .case-feature:before { color: #171717; } .home-work .case-info h3 { font-size: 29px; } .home-work .case-info p { font-size: 11px; line-height: 1.7; } .home-work .case-small { border: 1px solid #dedede; border-radius: 5px; background: #fff !important; } .home-work .case-small:hover { border-color: #111; transform: translateY(-3px); } .home-work .case-small .micro { color: #777; } .home-work .case-small p { color: #666; font-size: 10px; line-height: 1.55; } .home-work .case-art .mini { box-shadow: 0 16px 36px #0002; } .home-link-row { margin-top: 22px; } .home-link-row .text-link { border: 0; border-bottom: 1px solid #111; border-radius: 0; padding: 8px 0; } .landing-services { padding: 96px 0 104px; background: #fff !important; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .landing-section-head { margin-bottom: 42px; } .landing-section-head h2 { max-width: 680px; font-size: clamp(42px, 5.8vw, 70px); } .landing-section-head p { max-width: 410px; color: #555 !important; font-size: 13px; line-height: 1.8; } .landing-services .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #111; } .landing-services .service { min-height: 190px; padding: 22px 20px 24px 0; border-bottom: 1px solid #d9d9d9; } .landing-services .service:nth-child(3n+2), .landing-services .service:nth-child(3n+3) { padding-left: 22px; border-left: 1px solid #d9d9d9; } .landing-services .service-num { color: #666 !important; font-size: 8px; } .landing-services .service h3 { margin-top: 38px; font-size: 19px; } .landing-services .service p { max-width: 300px; color: #555; font-size: 11px; line-height: 1.7; } .landing-services .home-link-row { margin-top: 27px; } .landing-process { padding: 100px 0 108px; background: #fff !important; } .landing-process .landing-section-head { margin-bottom: 40px; } .process-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #111; border-bottom: 1px solid #d9d9d9; } .process-grid article { min-height: 190px; padding: 20px 18px 22px; border-color: #d9d9d9; } .process-grid article:first-child { padding-left: 0; } .process-grid article>span { color: #777 !important; font-size: 8px; } .process-grid h3 { margin: 52px 0 9px; font-size: 16px; } .process-grid p { max-width: 180px; color: #555 !important; font-size: 10px; line-height: 1.75; } .landing-about { padding: 92px 0 104px; background: #fff !important; border-top: 1px solid #e5e5e5; } .landing-about-grid { grid-template-columns: .9fr 1.1fr; gap: clamp(35px, 7vw, 100px); } .landing-about-photo { height: 460px; background: #fff !important; border-radius: 0; border-bottom: 1px solid #ddd; } .landing-about-photo img { filter: drop-shadow(0 16px 22px #0002); } .landing-about-photo span { color: #555 !important; } .landing-about h2 { font-size: clamp(42px, 5.4vw, 68px); line-height: .98; } .landing-about p { max-width: 570px; color: #4d4d4d !important; font-size: 13px; line-height: 1.85; } .landing-about .skills { gap: 8px; margin: 23px 0 26px; } .landing-about .skills span { border-color: #d5d5d5 !important; color: #333; font-size: 8px; padding: 7px 10px; } .landing-about .text-link { border: 0; border-bottom: 1px solid #111; border-radius: 0; padding: 8px 0; } .landing-cta { padding: 0 0 70px; background: #fff !important; } .landing-cta-inner { min-height: 310px; padding: clamp(34px, 6vw, 72px); border-radius: 5px; background: #080808 !important; } .landing-cta .micro { color: #bbb !important; } .landing-cta h2 { max-width: 700px; font-size: clamp(46px, 6vw, 76px); line-height: .96; } .landing-cta p { max-width: 470px; color: #ccc !important; font-size: 13px; line-height: 1.75; } .landing-cta-actions { gap: 18px; } .landing-cta-actions .cta-white { border-radius: 2px; padding: 14px 18px; } .landing-cta-actions a:not(.cta-white) { padding-bottom: 4px; border-bottom: 1px solid #777; color: #eee !important; } @media (max-width: 900px) { .landing-page .intro { grid-template-columns: .32fr 1.68fr; gap: 24px; padding-top: 75px; } .process-grid article { padding-left: 12px; padding-right: 12px; } .process-grid h3 { margin-top: 38px; } .landing-about-photo { height: 390px; } } @media (max-width: 760px) { .landing-page .intro { grid-template-columns: 1fr; gap: 10px; padding: 64px 0 44px; } .intro-index { display: none; } .landing-page .intro-copy h2 { font-size: clamp(36px, 7vw, 54px); } .landing-page .intro-copy p { margin: 17px 0 22px; font-size: 12px; } .landing-page .values { grid-template-columns: 1fr 1fr .55fr 1fr; padding-bottom: 70px; } .landing-page .value { padding: 0 10px; gap: 7px; font-size: 12px; } .home-work { padding-bottom: 70px; } .home-work .section-title { margin-bottom: 28px; } .home-work .case-feature { min-height: 350px; } .landing-services, .landing-process { padding: 68px 0; } .landing-section-head { margin-bottom: 30px; } .landing-services .service { min-height: 165px; } .process-grid article { min-height: 155px; } .landing-about { padding: 65px 0 72px; } .landing-about-grid { grid-template-columns: .8fr 1.2fr; gap: 22px; } .landing-about-photo { height: 330px; } .landing-cta-inner { min-height: 0; padding: 34px 28px; } } @media (max-width: 560px) { .landing-page .values { grid-template-columns: 1fr 1fr; gap: 0; padding-bottom: 55px; } .landing-page .value { height: 58px; } .landing-page .value:first-child { border-radius: 8px 0 0 0; } .landing-page .value:nth-child(2) { border-radius: 0 8px 0 0; border-right: 1px solid #d8d8d8; } .landing-page .value.value-arrow { display: none; } .landing-page .value:last-child { grid-column: 1 / -1; border-top: 0; border-left: 1px solid #d8d8d8; border-radius: 0 0 8px 8px; } .home-work .case-feature { min-height: 305px; } .home-work .case-info h3 { font-size: 23px; } .landing-services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-services .service:nth-child(3n+2), .landing-services .service:nth-child(3n+3) { padding-left: 0; border-left: 0; } .landing-services .service:nth-child(even) { padding-left: 13px; border-left: 1px solid #d9d9d9; } .landing-services .service h3 { margin-top: 27px; font-size: 14px; } .landing-services .service p { font-size: 9px; } .process-grid { grid-template-columns: 1fr 1fr; } .process-grid article { min-height: 137px; padding: 16px 10px; border-top: 1px solid #d9d9d9; } .process-grid article:nth-child(odd) { border-right: 1px solid #d9d9d9; } .process-grid article:nth-child(even) { border-right: 0; } .process-grid article:first-child { padding-left: 10px; } .process-grid h3 { margin: 25px 0 7px; font-size: 14px; } .process-grid p { font-size: 9px; } .landing-about-grid { grid-template-columns: 1fr; gap: 24px; } .landing-about-photo { height: 300px; max-width: 360px; } .landing-about h2 { font-size: 44px; } .landing-cta { padding-bottom: 45px; } .landing-cta-inner { gap: 17px; padding: 27px 21px; } .landing-cta h2 { font-size: 43px; } .landing-cta-actions { flex-direction: row; flex-wrap: wrap; gap: 14px; } } /* Preserve the approved hero label while styling the lower landing sections */ .landing-page .hero-label { color: #777 !important; } /* Refined footer: one clear action, compact identity and navigation */ .page-frame .footer { margin: 26px 0 24px; padding: clamp(32px, 5.5vw, 64px) clamp(24px, 5vw, 62px) 22px; border-radius: 8px; background: #090909; color: #fff; } .footer-main { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: 8px; } .footer-message { max-width: 700px; } .footer-message .micro { color: #aaa; font-size: 8px; letter-spacing: .1em; } .footer-message h2 { margin: 17px 0 13px; color: #fff; font: 500 clamp(43px, 6.5vw, 78px)/.94 var(--display); letter-spacing: -.085em; } .footer-message p { max-width: 450px; margin: 0; color: #c2c2c2; font-size: 12px; line-height: 1.75; } .footer-cta-button { display: inline-flex; align-items: center; gap: 24px; flex: none; padding: 13px 14px 13px 18px; border-radius: 3px; background: #fff; color: #111; font-size: 10px; transition: background .2s ease, transform .2s ease; } .footer-cta-button b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #111; color: #fff; font-size: 14px; font-weight: 400; } .footer-cta-button:hover { background: #e9e9e9; transform: translateY(-2px); } .page-frame .footer-divider { margin: 40px 0 18px; background: #333; } .footer-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; color: #999; font: 8px var(--mono); } .footer-brand { justify-self: start; } .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px 20px; } .footer-nav a,.footer-meta a { color: #ccc; transition: color .2s ease; } .footer-nav a:hover,.footer-meta a:hover { color: #fff; } .footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; white-space: nowrap; } .footer-meta span { color: #888; } @media (max-width: 900px) { .footer-bottom { grid-template-columns: auto 1fr; gap: 20px; } .footer-nav { justify-content: flex-end; } .footer-meta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; } } @media (max-width: 560px) { .page-frame .footer { margin: 18px 0 16px; padding: 28px 20px 18px; border-radius: 7px; } .footer-main { align-items: flex-start; flex-direction: column; gap: 22px; } .footer-message h2 { margin: 13px 0 10px; font-size: 45px; } .footer-message p { font-size: 11px; } .footer-cta-button { justify-content: space-between; min-width: 220px; } .page-frame .footer-divider { margin: 28px 0 17px; } .footer-bottom { grid-template-columns: 1fr; gap: 19px; } .footer-nav { justify-content: flex-start; gap: 11px 17px; } .footer-meta { grid-column: auto; flex-direction: row; justify-content: space-between; font-size: 7px; } } /* White editorial lower page, inspired by the supplied agency reference */ .landing-showcase { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 9px; height: clamp(235px, 29vw, 350px); margin-top: 22px; overflow: hidden; } .showcase-tile { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 11px; padding: 18px; scroll-snap-align: start; } .showcase-kicker { position: relative; z-index: 2; font: 8px var(--mono); letter-spacing: .07em; } .showcase-systems { background: #101010; color: #fff; } .showcase-systems .showcase-kicker { color: #bbb; } .showcase-copy { position: relative; z-index: 2; font: 500 clamp(18px, 2.3vw, 27px)/1.05 var(--display); letter-spacing: -.06em; } .showcase-systems .showcase-copy { margin-top: 21px; } .showcase-crm { position: absolute; left: 17px; right: 17px; bottom: -16px; height: 45%; padding: 11px; background: #f8f8f8; color: #111; border-radius: 8px 8px 0 0; transform: rotate(-2deg); box-shadow: 0 10px 30px #0005; } .showcase-windowbar { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #ddd; padding-bottom: 8px; } .showcase-windowbar i { width: 5px; height: 5px; border-radius: 50%; background: #bbb; } .showcase-windowbar span { margin-left: auto; color: #555; font: 6px var(--mono); } .showcase-pipeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding-top: 9px; } .showcase-pipeline div { padding: 7px 5px; border: 1px solid #e2e2e2; border-radius: 4px; } .showcase-pipeline b,.showcase-pipeline i { display: block; } .showcase-pipeline b { font: 600 6px var(--sans); } .showcase-pipeline i { width: 80%; height: 3px; margin-top: 6px; border-radius: 2px; background: #ddd; } .showcase-pipeline i:last-child { width: 57%; background: #f06b4a; } .showcase-detailing { background: #f5f5f3; color: #111; } .showcase-car-art { position: absolute; inset: 0; display: grid; place-items: center; } .showcase-car-body { position: absolute; width: 75%; height: 26%; top: 42%; border-radius: 62% 35% 20% 18% / 65% 60% 30% 30%; background: linear-gradient(170deg,#fff 0%,#bcbcbc 19%,#292929 38%,#050505 70%,#707070 100%); box-shadow: 0 28px 35px #0003; transform: skewX(-8deg); } .showcase-car-roof { position: absolute; top: 31%; width: 36%; height: 18%; border-radius: 60% 55% 0 0; background: linear-gradient(140deg,#eee,#777 54%,#161616); clip-path: polygon(22% 0,76% 0,100% 100%,0 100%); } .showcase-car-body:before,.showcase-car-body:after { content:""; position:absolute; bottom:-12px; width:27px; height:27px; border:5px solid #222; border-radius:50%; background:#eee; } .showcase-car-body:before { left:17%; } .showcase-car-body:after { right:17%; } .showcase-car-body i,.showcase-car-body b { position:absolute; z-index:2; bottom:-12px; width:24px; height:24px; border:4px solid #222; border-radius:50%; } .showcase-car-body i { left:18%; } .showcase-car-body b { right:18%; } .showcase-detailing .showcase-kicker,.showcase-caption { position: relative; z-index: 2; } .showcase-caption { position:absolute; left:18px; bottom:17px; display:flex; flex-direction:column; gap:4px; } .showcase-caption strong { font:500 clamp(17px,2vw,23px)/1.05 var(--display); letter-spacing:-.05em; } .showcase-caption span { font:7px var(--mono); color:#555; } .showcase-booking { background:#f5f5f5; color:#111; } .showcase-calendar { position: absolute; top: 20%; left: 50%; width: 70%; padding: 13px; border-radius: 8px; background:#fff; box-shadow: 0 13px 32px #00000014; transform:translateX(-50%) rotate(2deg); } .calendar-head { display:flex; justify-content:space-between; color:#777; font:7px var(--mono); padding-bottom:8px; border-bottom:1px solid #eee; } .calendar-head b { letter-spacing:2px; } .calendar-item { padding:8px 0 5px; border-bottom:1px solid #eee; } .calendar-item b,.calendar-item span { display:block; } .calendar-item b { font:600 8px var(--display); } .calendar-item span { margin-top:3px; color:#777; font-size:6px; } .showcase-booking-copy { position:absolute; left:18px; bottom:16px; font-size:clamp(15px,1.8vw,21px); } .showcase-arrow { position:absolute; z-index:3; top:15px; right:15px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#fff2; color:inherit; font-size:12px; } .showcase-detailing .showcase-arrow,.showcase-booking .showcase-arrow { background:#111; color:#fff; } .landing-page .intro { display:block; padding:155px 0 54px; text-align:center; } .landing-page .intro-copy { max-width:940px; margin:0 auto; } .landing-page .intro-copy > .micro { color:#666; font-size:8px; letter-spacing:.1em; } .landing-page .intro-copy h2 { max-width:900px; margin:17px auto 20px; font-size:clamp(40px,6.2vw,76px); line-height:.99; } .landing-page .intro-copy h2 span { color:#ef6849; } .landing-page .intro-copy p { max-width:625px; margin:0 auto 24px; color:#555; font-size:13px; line-height:1.8; } .landing-page .intro-foot { justify-content:center; gap:24px; border:0; padding:0; } .landing-page .values { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 0 110px; } .landing-page .value,.landing-page .value:first-child,.landing-page .value:last-child { height:auto; min-height:130px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; padding:17px 18px; border:1px solid #e4e4e4; border-radius:11px; background:#fff !important; color:#111 !important; } .landing-page .value small { color:#666; font-size:7px; letter-spacing:.08em; } .landing-page .value span { margin-top:13px; font:500 18px/1.15 var(--display); letter-spacing:-.05em; } .landing-page .value p { max-width:280px; margin:9px 0 0; color:#666; font:10px/1.6 var(--sans); } .landing-page .value.value-arrow { display:none; } .landing-benefits { padding:80px 0 92px; overflow:hidden; background:#fff; } .landing-benefits .landing-section-head { align-items:end; margin-bottom:28px; } .landing-benefits .landing-section-head h2 { font-size:clamp(34px,4.5vw,54px); line-height:1.02; } .benefit-side { display:flex; align-items:end; gap:24px; } .benefit-side p { max-width:260px; margin:0 0 4px; color:#666; font-size:11px; line-height:1.7; } .benefit-controls { display:flex; gap:7px; flex:none; } .benefit-controls button { width:34px; height:34px; border:0; border-radius:50%; background:#111; color:#fff; cursor:pointer; font-size:15px; transition:background .2s, transform .2s; } .benefit-controls button:hover { background:#ef6849; transform:translateY(-2px); } .benefit-viewport { overflow:hidden; } .benefit-track { display:flex; gap:12px; } .benefit-card { flex:0 0 calc((100% - 24px)/3); min-height:245px; padding:21px; border-radius:12px; background:#f6f6f7; scroll-snap-align:start; } .benefit-symbol { width:38px; height:38px; display:grid; place-items:center; margin-bottom:27px; border-radius:50%; background:#fff; color:#e66445; font-size:18px; } .benefit-card > span { color:#696969; font:7px var(--mono); letter-spacing:.06em; } .benefit-card h3 { max-width:260px; margin:13px 0 8px; font:500 19px/1.12 var(--display); letter-spacing:-.045em; } .benefit-card p { max-width:285px; margin:0; color:#5c5c5c; font-size:10px; line-height:1.7; } @media (max-width: 900px) { .landing-showcase { height:250px; } .landing-page .intro { padding-top:110px; } .benefit-card { flex-basis:calc((100% - 12px)/2); } .benefit-side { gap:14px; } } @media (max-width: 760px) { .landing-showcase { width:100%; display:flex; height:255px; gap:9px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; } .landing-showcase::-webkit-scrollbar { display:none; } .showcase-tile { flex:0 0 78%; } .landing-page .intro { padding:90px 0 36px; } .landing-page .intro-copy h2 { font-size:clamp(38px,7.4vw,58px); } .landing-page .intro-foot { flex-direction:column; gap:10px; align-items:center; } .landing-page .values { grid-template-columns:1fr; gap:8px; padding-bottom:72px; } .landing-page .value,.landing-page .value:first-child,.landing-page .value:last-child { min-height:0; padding:15px 16px; } .landing-page .value span { margin-top:8px; font-size:16px; } .landing-benefits { padding:60px 0 65px; } .landing-benefits .landing-section-head { align-items:flex-start; flex-direction:column; gap:17px; } .benefit-side { width:100%; justify-content:space-between; align-items:center; } .benefit-card { flex-basis:82%; min-height:220px; } } @media (max-width: 480px) { .landing-showcase { height:230px; margin-top:13px; } .showcase-tile { flex-basis:84%; padding:15px; } .showcase-car-body { width:80%; } .landing-page .intro { padding-top:76px; } .landing-page .intro-copy h2 { font-size:39px; } .landing-page .intro-copy p { font-size:11px; } .benefit-card { flex-basis:88%; } } /* Keep the approved hero untouched by lower-page editorial styling */ .landing-page .hero-label { color: #777 !important; } /* Accessibility and motion refinements for the full portfolio */ .skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 12px 16px; transform: translateY(-160%); border-radius: 4px; background: #111; color: #fff; font-size: 12px; } .skip-link:focus { transform: translateY(0); } .landing-showcase a:focus-visible, .home-work a:focus-visible, .landing-benefits button:focus-visible, .landing-services a:focus-visible, .landing-process a:focus-visible, .landing-about a:focus-visible, .landing-cta a:focus-visible, .page-frame .footer a:focus-visible, .frame-inner-nav .menu:focus-visible { outline: 3px solid #ef6849; outline-offset: 4px; } .benefit-viewport { scroll-snap-type: x mandatory; } .footer-meta { flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .benefit-controls button, .footer-cta-button, .home-work .case-small, .footer-nav a, .footer-meta a { transition: none !important; } .benefit-viewport { scroll-behavior: auto; } } /* Use the supplied portrait as the navigation avatar */ .frame-inner-nav .brand-mark.brand-avatar { width: 31px; height: 31px; flex: none; overflow: hidden; border: 1px solid #e5e5e5; border-radius: 50%; background: #f3f3f3; } .frame-inner-nav .brand-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; } @media(max-width:560px){.frame-inner-nav .brand-mark.brand-avatar{width:28px;height:28px}} /* Hero title sizing for the approved phrase across screen widths */ .hero-word { margin: 0; font-size: clamp(24px, 7.3vw, 110px); white-space: nowrap; } /* Replace the large About portrait with a simple systems graphic */ .about-visual { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(22px, 4vw, 42px); background: #f7f7f6; border: 1px solid #ececeb; border-radius: 12px; } .landing-about-grid .about-visual { height: 460px; } .about-visual-page { height: 390px; } .about-visual-kicker,.about-visual-foot { color: #666; font: 8px var(--mono); letter-spacing: .08em; } .about-visual-title { color: #111; font: 600 clamp(36px, 5.3vw, 70px)/.88 var(--display); letter-spacing: -.09em; } .about-visual-title span { color: #ef6849; } .about-visual-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 0; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; } .about-visual-route i { color: #333; font: normal 9px var(--mono); } .about-visual-route b { color: #ef6849; font-size: 13px; font-weight: 400; } @media(max-width:760px) { .about-visual-page { height: 330px; max-width: 500px; } .landing-about-grid .about-visual { height: 330px; max-width: 500px; } } @media(max-width:560px) { .about-visual-page,.landing-about-grid .about-visual { height: 290px; padding: 22px; } .about-visual-title { max-width:100%; font-size:clamp(30px, 8.8vw, 38px); letter-spacing:-.095em; } .about-visual-route { gap: 5px; } .about-visual-route i { font-size: 7px; } } /* Make the footer white and full-bleed across the viewport */ .page-frame .footer { width: 100vw; max-width: 100vw; margin: 26px 0 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 62px max(22px, calc((100vw - 1180px) / 2)) 22px; border: 0; border-radius: 0; background: #fff !important; color: #111; } .page-frame .footer-main,.page-frame .footer-bottom,.page-frame .footer-divider { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; } .page-frame .footer-message h2 { color: #111; } .page-frame .footer-message p { color: #555; } .page-frame .footer-message .micro { color: #666; } .page-frame .footer-cta-button { background: #111; color: #fff; } .page-frame .footer-cta-button b { background: #fff; color: #111; } .page-frame .footer-cta-button:hover { background: #333; } .page-frame .footer-divider { background: #ddd; } .page-frame .footer-brand-mark { background: #111; color: #fff; } .page-frame .footer-brand small { color: #666; } .page-frame .footer-brand strong { color: #111; } .page-frame .footer-nav a,.page-frame .footer-meta a { color: #444; } .page-frame .footer-nav a:hover,.page-frame .footer-meta a:hover { color: #111; } .page-frame .footer-meta,.page-frame .footer-meta span { color: #777; } @media(max-width:760px) { .page-frame .footer { padding-top: 46px; } } @media(max-width:560px) { .page-frame .footer { width: 100vw; max-width: 100vw; margin-top: 18px; padding: 36px 20px 18px; } } .page-frame .footer-cta-button { background:#f36b32 !important; color:#fff !important; border:1px solid #f36b32; } .page-frame .footer-cta-button b { background:#fff; color:#111; border:1px solid #fff; } .page-frame .footer-cta-button:hover { background:#df5721 !important; border-color:#df5721; } /* Keep the Work page heading light to match the white portfolio theme. */ .work-page .section-title { background:#fff !important; color:#111 !important; } .work-page .section-title h2, .work-page .section-title p { color:#111 !important; } .work-page .section-title .micro { color:#666 !important; } /* About page: bright, calm layout with the orange accent used for actions. */ .about-page-body .about-page { margin:0; width:100%; padding:clamp(56px, 8vw, 100px) 5% !important; background:#fff !important; color:#111 !important; gap:clamp(36px, 6vw, 88px); border-bottom:1px solid #eee; } .about-page-body .about-page h2, .about-page-body .about-page .micro { color:#111 !important; } .about-page-body .about-page .about-copy { color:#505050 !important; } .about-page-body .about-page .skills span { border-color:#dedede !important; color:#444 !important; } .about-page-body .about-visual-page { background:#f7f7f7; border:1px solid #eee; } .about-page-body .values .value, .about-page-body .values .value:nth-child(3), .about-page-body .values .value:nth-child(4) { background:#f5f5f5 !important; color:#111 !important; } .about-page-body .values .value:nth-child(2) { background:#f36b32 !important; color:#fff !important; } .about-page-body .hero-actions .pill { background:#f36b32; color:#fff; } .about-page-body .hero-actions .pill .circle { background:#fff; color:#111; } .page-frame .footer-brand-mark { overflow:hidden; padding:0; background:#f2f2f2; border:1px solid #e8e8e8; } .footer-brand-mark img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 22%; border-radius:inherit; } .whatsapp-widget { position:fixed; z-index:100; right:24px; bottom:24px; display:inline-flex; align-items:center; gap:10px; padding:13px 18px 13px 14px; border-radius:999px; background:#20b85a; color:#fff; box-shadow:0 8px 26px #0002; font:600 12px var(--display); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; } .whatsapp-widget:hover { background:#159447; transform:translateY(-3px); box-shadow:0 12px 30px #0003; } .whatsapp-widget svg { width:21px; height:21px; fill:currentColor; flex:none; } @media(max-width:480px) { .whatsapp-widget { width:54px; height:54px; right:16px; bottom:16px; justify-content:center; padding:0; } .whatsapp-widget span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } } /* Phone hero: use a clear vertical reading order and keep the portrait separate from copy. */ @media (max-width:560px) { .hero-frame, .landing-page .hero-frame { display:flex; flex-direction:column; align-items:stretch; min-height:0; margin-left:-4.35%; margin-right:-4.35%; padding:30px 20px 30px; overflow:hidden; } .hero-label { position:relative; top:auto; left:auto; z-index:4; font-size:8px; line-height:1.5; } .hero-word { position:relative; inset:auto; transform:none; order:1; width:100%; margin:42px 0 0; text-align:center; white-space:nowrap; font-size:clamp(42px, 11.4vw, 60px); letter-spacing:-.09em; } .portrait-orbit { position:absolute; left:50%; top:190px; width:min(82vw, 330px); height:min(72vw, 285px); transform:translateX(-50%) rotate(-18deg); } .hero-photo-wrap { position:relative; order:2; inset:auto; transform:none; width:100%; height:clamp(300px, 96vw, 365px); margin-top:-3px; margin-bottom:-38px; z-index:2; } .hero-photo { object-fit:contain; object-position:center bottom; mask-image:linear-gradient(to bottom, #000 77%, rgba(0,0,0,.8) 87%, transparent 100%); } .hero-copy-bottom { position:relative; order:3; inset:auto; z-index:4; width:100%; margin-top:-4px; padding:0 4px; } .hero-copy-bottom h2 { max-width:310px; font-size:clamp(22px, 6vw, 27px); } .hero-copy-bottom p { max-width:440px; font-size:11px; line-height:1.7; } .hero-button { padding:11px 14px; font-size:10px; } .expert-card { display:none; } .hero-scroll { position:relative; order:4; inset:auto; align-self:flex-end; margin-top:26px; font-size:7px; } .hero-frame:after { height:270px; } } /* Remove arrow-only decorative controls after the arrow glyphs are removed. */ .case-feature:after { content:none !important; } .showcase-arrow, .case-small .arrow, .footer-cta-button b, .pill .circle { display:none !important; } .benefit-controls button { display:inline-flex; width:auto; min-height:34px; align-items:center; padding:0 12px; border-radius:22px; font:600 10px var(--display); } @media (max-width:560px) { .hero-frame:after { height:clamp(340px, 105vw, 410px); background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.62) 22%, rgba(255,255,255,.93) 42%, #fff 60%, #fff 100%); } .hero-photo { mask-image:linear-gradient(to bottom, #000 63%, rgba(0,0,0,.65) 76%, rgba(0,0,0,.18) 86%, transparent 94%); } } /* GoHighLevel resource library and long-form articles */ .blog-page { color:#111; background:#fff; font-size:16px; } .blog-main,.blog-article-page { width:min(100%, 980px); margin:0 auto; } .blog-heading { padding:clamp(64px, 10vw, 120px) 0 48px; } .blog-heading .micro,.blog-card-meta { color:#6a6a6a; font:10px var(--mono); letter-spacing:.09em; text-transform:uppercase; } .blog-heading h1,.blog-article-heading h1 { max-width:850px; margin:18px 0; font:500 clamp(44px, 7vw, 82px)/.98 var(--display); letter-spacing:-.075em; } .blog-intro { max-width:650px; margin:0; color:#555; font-size:17px; line-height:1.7; } .blog-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0 0 90px; } .blog-card { min-height:245px; display:flex; flex-direction:column; align-items:flex-start; padding:26px; border:1px solid #e7e7e7; border-radius:12px; color:#111; transition:transform .2s ease,border-color .2s ease; } .blog-card:hover { transform:translateY(-3px); border-color:#f36b32; } .blog-card h2 { margin:15px 0 10px; font:500 clamp(22px, 2.7vw, 30px)/1.08 var(--display); letter-spacing:-.055em; } .blog-card p { margin:0; color:#555; font-size:14px; line-height:1.65; } .blog-read { margin-top:auto; padding-top:20px; color:#d95823; font-size:12px; font-weight:600; } .blog-article-page { padding:52px 0 90px; } .blog-back { display:inline-block; margin-bottom:28px; color:#555; font-size:13px; text-decoration:underline; text-underline-offset:3px; } .blog-article-heading { padding-bottom:36px; border-bottom:1px solid #e7e7e7; } .blog-article-heading h1 { max-width:850px; font-size:clamp(40px, 6.5vw, 70px); } .blog-deck { max-width:740px; margin:0; color:#4e4e4e; font-size:19px; line-height:1.6; } .blog-byline { margin:22px 0 0; color:#666; font:11px var(--mono); } .blog-article-content { max-width:740px; margin:0 auto; padding-top:34px; color:#303030; font-size:17px; line-height:1.82; } .blog-article-content p { margin:0 0 21px; } .blog-article-content h2 { margin:38px 0 12px; color:#111; font:500 clamp(25px, 3.5vw, 34px)/1.12 var(--display); letter-spacing:-.055em; } .blog-article-content a { color:#bd4a1d; text-decoration:underline; text-underline-offset:3px; } .blog-article-content a:hover { color:#85320e; } .blog-source-note { display:flex; flex-direction:column; gap:8px; margin-top:42px; padding:18px 20px; border:1px solid #e5e5e5; border-radius:9px; font-size:13px; } .blog-source-note strong { color:#111; } .case-info p { font-size:12px; line-height:1.6; } .case-small p { font-size:12px; line-height:1.55; } .service p,.landing-services .service p { font-size:12px; line-height:1.65; } .study-summary-copy { font-size:15px; } .study-section-head p { font-size:14px; } .study-body p,.study-body li { font-size:15px; } .flow-step small { font-size:11px; } .case-feature:after { content:none !important; } .flow-arrow:before { content:'·'; } .home-blog-section { padding:78px 0 86px; background:#fff; } .home-blog-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; } .home-blog-heading h2 { margin:10px 0 0; font:500 clamp(36px, 5vw, 58px)/1 var(--display); letter-spacing:-.07em; } .home-blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .home-blog-grid a { min-height:190px; display:flex; flex-direction:column; padding:22px; border:1px solid #e5e5e5; border-radius:10px; color:#111; transition:border-color .2s,transform .2s; } .home-blog-grid a:hover { border-color:#f36b32; transform:translateY(-2px); } .home-blog-grid span { color:#777; font:9px var(--mono); letter-spacing:.08em; } .home-blog-grid h3 { margin:20px 0 8px; font:500 21px/1.12 var(--display); letter-spacing:-.045em; } .home-blog-grid p { margin:auto 0 0; color:#666; font-size:12px; line-height:1.55; } @media (max-width:760px) { .blog-main,.blog-article-page { width:100%; } .blog-heading { padding:55px 0 32px; } .blog-heading h1 { font-size:clamp(42px, 10vw, 64px); } .blog-intro { font-size:16px; } .blog-list { padding-bottom:60px; } .blog-article-page { padding:34px 0 60px; } .blog-article-heading h1 { font-size:clamp(38px, 9vw, 58px); } .blog-deck { font-size:17px; } .blog-article-content { font-size:16px; line-height:1.78; } .blog-article-content h2 { font-size:clamp(24px, 6vw, 30px); } } @media (max-width:560px) { .home-blog-section { padding:55px 0; } .home-blog-heading { align-items:flex-start; flex-direction:column; gap:14px; } .home-blog-grid { grid-template-columns:1fr; } .home-blog-grid a { min-height:155px; } .home-blog-grid h3 { font-size:22px; } .blog-list { grid-template-columns:1fr; gap:10px; } .blog-card { min-height:0; padding:22px; } .blog-card h2 { font-size:25px; } .blog-heading .micro,.blog-card-meta { font-size:9px; } .blog-byline { font-size:10px; line-height:1.6; } .blog-article-content { font-size:16px; } .blog-article-content h2 { margin-top:30px; } .hero-copy-bottom p,.case-info p,.case-small p,.service p,.landing-services .service p,.contact-link { font-size:12px; } .study-hero p,.study-summary-copy,.study-section-head p,.study-body p,.study-body li { font-size:14px; } .flow-step small { font-size:11px; } .footer-message p { font-size:13px; line-height:1.7; } } /* Site-wide readable body type; small mono labels stay intentionally compact. */ .frame-inner-nav .nav a { font-size:11px; } .frame-contact,.hero-button,.pill,.study-cta,.footer-cta-button,.text-link { font-size:11px; } .section-title p,.services-head p,.intro-copy p,.hero-copy-bottom p,.landing-section-head p, .landing-about-grid > div > p,.landing-page .value p,.process-grid p,.benefit-card p,.home-blog-grid p, .service p,.landing-services .service p,.case-info p,.case-small p, .contact p,.contact-link,.study-summary-copy,.study-section-head p,.study-body p,.study-body li, .page-frame .footer-message p { font-size:clamp(12px, .92vw, 15px); line-height:1.7; } .footer-nav a,.footer-meta a { font-size:11px; } @media (max-width:560px) { .about-visual-title { font-size:clamp(26px, 7.2vw, 32px); letter-spacing:-.08em; } .section-title p,.services-head p,.intro-copy p,.hero-copy-bottom p,.landing-section-head p, .landing-about-grid > div > p,.landing-page .value p,.process-grid p,.benefit-card p,.home-blog-grid p, .service p,.landing-services .service p,.case-info p,.case-small p, .contact p,.contact-link,.study-summary-copy,.study-section-head p,.study-body p,.study-body li, .page-frame .footer-message p { font-size:12px; line-height:1.7; } .blog-article-content p { font-size:16px; line-height:1.78; } } /* Keep every primary action on the same orange brand color. */ .frame-contact,.hero-button,.pill,.pill-light, .landing-cta-actions .cta-white,.footer-cta-button,.study-cta { background:#f36b32 !important; border-color:#f36b32 !important; color:#fff !important; } .frame-contact:hover,.hero-button:hover,.pill:hover,.pill-light:hover, .landing-cta-actions .cta-white:hover,.footer-cta-button:hover,.study-cta:hover { background:#df5721 !important; border-color:#df5721 !important; color:#fff !important; } /* Give the two homepage hero actions a clearer gap. */ .hero-copy-bottom .hero-button { margin-right: 12px; }