*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#171717;background:#fff;font-family:'Metropolis','Montserrat','Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.65}a{color:inherit;text-decoration:none}.site-header{height:88px;background:#fff;box-shadow:0 2px 12px #00000010;position:relative;z-index:5}.nav-wrap{width:min(1160px,calc(100% - 48px));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand img{width:122px;display:block}nav{display:flex;gap:38px;align-items:center;font-size:13px;letter-spacing:2px}nav a{padding:8px 3px;border-bottom:2px solid transparent}nav a:hover,nav .active{color:#7c36d4;border-color:#7c36d4}.menu{display:none;background:none;border:0;font-size:23px}.hero{min-height:560px;background:#f7d8e7 url('pinkbanner.gif') center/cover no-repeat;overflow:hidden}.hero-inner{width:min(1160px,calc(100% - 48px));height:560px;margin:auto;display:grid;grid-template-columns:48% 52%;align-items:center;position:relative}.hero-copy{z-index:2;padding-left:20px}.hero h1{font-size:58px;line-height:1.08;margin:0 0 20px;font-weight:800;letter-spacing:-1.5px}.hero h1 span{color:#4b2cff}.hero p{font-size:16px;letter-spacing:.7px;margin-bottom:26px}.hero p b{color:#8438d8;margin:0 7px}.hero-art{width:590px;max-width:110%;justify-self:end}.button{display:inline-block;background:#4b2cff;color:#fff;padding:14px 30px;font-weight:700;font-size:15px;border-radius:9px;box-shadow:none;transition:.2s}.button:hover{transform:translateY(-2px)}.section{width:min(1160px,calc(100% - 48px));margin:auto;padding:70px 0}.section>h2{text-align:center;font-size:25px;margin:0 0 38px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.work-card{display:block}.work-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin-bottom:14px}.work-card small{display:block;font-size:9px;letter-spacing:1.5px;color:#777;margin-bottom:2px}.work-card strong{font-size:14px}.work-card:hover strong,.more a:hover{color:#8036d3}.more{text-align:right;margin-top:24px;font-size:12px;font-weight:700;color:#7130c2}.about{background:#f7d8e7 url('pinkbanner.gif') center/cover no-repeat;padding:58px 0}.about-inner{width:min(1160px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:47% 53%;gap:70px;align-items:center}.about-art-wrap{height:430px;display:flex;align-items:center;justify-content:center;overflow:hidden}.about-art-wrap img{width:560px;max-width:120%}.about-copy h2{font-size:50px;line-height:1;margin:0 0 20px}.about-copy h2 span{color:#4b2cff}.about-copy p{font-size:17px;line-height:1.65;margin:0 0 18px;max-width:610px}.about-copy .button{margin-top:10px}footer{background:#fff;padding:48px 0 32px;box-shadow:0 -2px 12px #0000000b}.contact{width:min(780px,calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:center;gap:25px;padding-bottom:42px}.contact img{width:100px}.contact h2{margin:0;font-size:23px}.contact a{color:#8036d3;font-size:12px;font-weight:700}.footer-bottom{width:min(1160px,calc(100% - 48px));margin:auto;border-top:1px solid #eee;padding-top:25px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}.footer-bottom>img{width:95px}.footer-bottom p{font-size:10px;color:#888}.footer-links{display:flex;gap:20px;font-size:10px;color:#666}.footer-links a:hover{color:#8036d3}@media(max-width:720px){.site-header{height:72px}.nav-wrap{width:calc(100% - 30px)}.menu{display:block}nav{display:none;position:absolute;top:72px;left:0;right:0;background:white;padding:20px 30px;box-shadow:0 8px 15px #0002;flex-direction:column;align-items:flex-start;gap:10px}nav.open{display:flex}.hero,.hero-inner{height:auto;min-height:0}.hero-inner{grid-template-columns:1fr;padding:55px 0 0}.hero-copy{padding:0;text-align:center}.hero h1{font-size:38px}.hero-art{width:390px;justify-self:center;margin-top:20px}.work-grid{grid-template-columns:1fr;gap:38px}.section{padding:55px 0}.about{padding:50px 0}.about-inner{grid-template-columns:1fr;gap:20px}.about-art-wrap{height:220px}.about-copy{text-align:center}.footer-bottom{grid-template-columns:1fr;text-align:center;justify-items:center}.footer-links{flex-wrap:wrap;justify-content:center}.contact{flex-direction:column;text-align:center}}@media(max-width:420px){.hero h1{font-size:33px}.hero-art{width:330px}.section,.hero-inner,.about-inner{width:calc(100% - 32px)}}
/* v4 — Wix spacing/header/footer match */
.site-header{height:182px;box-shadow:0 2px 12px #0000000d}
.nav-wrap{width:min(1370px,calc(100% - 64px))}
.brand img{width:112px}
nav{gap:66px;font-size:16px;letter-spacing:2.6px}
nav a{padding:10px 2px 8px}
footer{padding:70px 0 46px;box-shadow:none}
.contact{width:min(760px,calc(100% - 48px));gap:26px;padding-bottom:62px;justify-content:center}
.contact img{width:76px}
.contact>div{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap}
.contact h2{font-size:29px;line-height:1.2;white-space:nowrap}
.contact a{font-size:16px;color:#4b2cff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.footer-bottom{width:min(1370px,calc(100% - 64px));padding-top:38px;grid-template-columns:300px 1fr;gap:80px;align-items:start}
.footer-bottom>img{width:112px;grid-column:1;grid-row:1}
.footer-bottom p{grid-column:1;grid-row:2;margin:0;font-size:12px;color:#333;white-space:nowrap}
.footer-links{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));column-gap:72px;row-gap:34px;font-size:15px;letter-spacing:2px;color:#222;padding-top:8px}
.footer-links a:nth-child(1){grid-column:1;grid-row:1}.footer-links a:nth-child(2){grid-column:1;grid-row:2}.footer-links a:nth-child(3){grid-column:2;grid-row:1}.footer-links a:nth-child(4){grid-column:2;grid-row:2}.footer-links a:nth-child(5){grid-column:3;grid-row:1}
@media(max-width:720px){.site-header{height:86px}.brand img{width:88px}.nav-wrap{width:calc(100% - 30px)}nav{top:86px}.contact{padding-bottom:42px;gap:16px}.contact img{width:58px}.contact>div{gap:6px}.contact h2{font-size:20px}.contact a{font-size:14px}.footer-bottom{width:calc(100% - 40px);grid-template-columns:1fr;gap:18px;text-align:center;justify-items:center}.footer-bottom>img,.footer-bottom p,.footer-links{grid-column:1;grid-row:auto}.footer-links{display:flex;padding-top:8px;gap:18px;font-size:12px;letter-spacing:1.4px}}
@media(max-width:480px){.contact{width:calc(100% - 32px)}.contact img{width:46px}.contact h2{font-size:17px}.contact a{font-size:13px}}
\n\n/* v5 — Featured Works + email scale matched to Wix reference */\n.featured.section{width:min(1370px,calc(100% - 64px));padding:86px 0 92px}\n.featured.section>h2{font-size:48px;line-height:1.1;margin:0 0 76px;font-weight:800;letter-spacing:-1px}\n.featured .work-grid{gap:44px}\n.featured .work-card img{margin-bottom:24px}\n.featured .work-card small{font-size:19px;line-height:1.25;letter-spacing:4px;color:#252525;margin-bottom:9px;text-transform:none}\n.featured .work-card strong{display:block;font-size:25px;line-height:1.25;font-weight:800}\n.featured .work-card:nth-child(3) small{letter-spacing:3px}\n.featured .more{margin-top:48px;font-size:20px;line-height:1.2;font-weight:800;color:#4b2cff}\n.featured .more a{color:#4b2cff}\n.featured .more a:hover{color:#4b2cff;text-decoration:underline;text-underline-offset:4px}\n.contact a{font-size:29px;line-height:1.2;font-weight:800;color:#4b2cff}\n@media(max-width:900px){.featured.section>h2{font-size:38px;margin-bottom:52px}.featured .work-grid{gap:24px}.featured .work-card small{font-size:14px;letter-spacing:2.5px}.featured .work-card strong{font-size:20px}.featured .more{font-size:18px}}\n@media(max-width:720px){.featured.section{width:calc(100% - 32px);padding:58px 0 62px}.featured.section>h2{font-size:34px;margin-bottom:38px}.featured .work-card small{font-size:14px}.featured .work-card strong{font-size:22px}.featured .more{text-align:center;margin-top:34px;font-size:18px}.contact a{font-size:20px}}\n@media(max-width:480px){.contact a{font-size:17px}}\n
/* v6 — sticky Wix-style header + contact lockup */
.site-header{
position:sticky;
top:0;
z-index:1000;
background:#fff;
}
/* Keep anchor targets from hiding under the sticky desktop header. */
#top,#featured,#about,#contact{scroll-margin-top:182px}
footer{padding-top:96px}
.contact{
width:min(900px,calc(100% - 48px));
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:30px;
padding-bottom:74px;
text-align:center;
}
.contact img{width:112px;display:block}
.contact>div{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:nowrap}
.contact h2,.contact a{font-size:48px;line-height:1.1;font-weight:800;letter-spacing:-1px}
.contact h2{margin:0}
.contact a{color:#4b2cff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
@media(max-width:720px){
#top,#featured,#about,#contact{scroll-margin-top:86px}
footer{padding-top:64px}
.contact{gap:20px;padding-bottom:46px}
.contact img{width:76px}
.contact>div{gap:7px}
.contact h2,.contact a{font-size:25px;letter-spacing:-.4px}
}
@media(max-width:480px){
.contact h2,.contact a{font-size:20px}
.contact img{width:64px}
}
/* v7 — Wix nav active state + improved body legibility */
body{font-weight:500}
nav a{font-weight:500}
nav a.active{font-weight:800;color:#4b2cff;border-color:#4b2cff}
.hero p,.about-copy p{font-weight:500}
.work-card small{font-weight:500}
.footer-links{font-weight:500}
.footer-bottom p{font-weight:500}
/* v8 — lighter readable body + responsive refinements */
body{font-weight:400}
nav a{font-weight:400}
nav a.active{font-weight:700}
.hero p,.about-copy p{font-weight:400}
.work-card small{font-weight:400}
.footer-links{font-weight:400}
.footer-bottom p{font-weight:400}
/* Fluid desktop/tablet sizing while preserving the Wix proportions. */
.hero h1{font-size:clamp(42px,4vw,58px)}
.about-copy h2{font-size:clamp(38px,3.5vw,50px)}
.about-copy p{font-size:clamp(15px,1.25vw,17px)}
.featured.section>h2{font-size:clamp(36px,3.35vw,48px)}
.contact h2,.contact a{font-size:clamp(30px,3.35vw,48px)}
@media(max-width:1050px){
.site-header{height:140px}
#top,#featured,#about,#contact{scroll-margin-top:140px}
.nav-wrap{width:min(920px,calc(100% - 48px))}
nav{gap:36px;font-size:14px}
.hero-inner{grid-template-columns:46% 54%}
.hero-art{width:520px}
.featured.section{width:min(920px,calc(100% - 48px))}
.featured .work-grid{gap:24px}
.featured .work-card small{font-size:14px;letter-spacing:2.5px}
.featured .work-card strong{font-size:20px}
.about-inner{width:min(920px,calc(100% - 48px));gap:38px}
.about-art-wrap img{width:480px}
.footer-bottom{width:min(920px,calc(100% - 48px));gap:48px}
}
@media(max-width:720px){
body{font-size:15px;line-height:1.6}
.site-header{height:78px}
#top,#featured,#about,#contact{scroll-margin-top:78px}
.brand img{width:82px}
.menu{display:block;font-size:0;width:42px;height:42px;position:relative;cursor:pointer}
.menu::before{content:'☰';font-size:25px;line-height:42px}
nav{top:78px;gap:0;font-size:15px;letter-spacing:1.8px;width:100%;padding:12px 24px 20px}
nav a{width:100%;padding:12px 0}
.hero-inner{width:calc(100% - 36px);padding:48px 0 0}
.hero h1{font-size:clamp(36px,11vw,48px);letter-spacing:-1px}
.hero p{font-size:14px;letter-spacing:.4px}
.hero-art{width:min(430px,110%);max-width:none}
.button{font-size:15px;padding:13px 26px}
.featured.section{width:calc(100% - 36px);padding:58px 0 66px}
.featured.section>h2{font-size:clamp(32px,9vw,40px)}
.work-grid{grid-template-columns:1fr;gap:46px}
.featured .work-card small{font-size:14px;letter-spacing:2.4px}
.featured .work-card strong{font-size:23px}
.about-inner{width:calc(100% - 36px);grid-template-columns:1fr;gap:26px}
.about-art-wrap{height:auto;min-height:0}
.about-art-wrap img{width:min(430px,100%);max-width:100%}
.about-copy{text-align:left}
.about-copy h2{font-size:clamp(38px,11vw,48px)}
.about-copy p{font-size:16px}
.contact{width:calc(100% - 36px)}
.contact h2,.contact a{font-size:clamp(23px,6.7vw,30px)}
.footer-bottom{width:calc(100% - 36px)}
}
@media(max-width:480px){
.hero-copy{text-align:left}
.hero h1{font-size:clamp(34px,11vw,43px)}
.hero p{font-size:13px}
.hero-art{margin-top:30px}
.contact>div{gap:6px;flex-wrap:wrap}
.contact h2,.contact a{font-size:clamp(21px,6.5vw,27px)}
.footer-links{display:grid;grid-template-columns:repeat(2,auto);gap:14px 30px}
}
/* v9 — subtle weight bump to better match Wix/Metropolis rendering */
body{font-weight:450}
nav a{font-weight:450}
.hero p,.about-copy p{font-weight:450}
.work-card small{font-weight:450}
.footer-links{font-weight:450}
.footer-bottom p{font-weight:450}
nav a.active{font-weight:700}
/* v10 — refined Metropolis-like typography: normal weight, fuller glyph shapes */
body{
font-family:'Avenir Next',Avenir,'Century Gothic','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight:400;
}
nav a,
.hero p,
.about-copy p,
.work-card small,
.footer-links,
.footer-bottom p{font-weight:400}
nav a.active{font-weight:700}
/* v11 — lighten display headings only; body + links intentionally unchanged */
.hero h1{font-weight:700}
.contact h2,.contact a{font-weight:700}
/* v12 — display type refinement only */
.hero h1,
.contact h2,
.contact a {
font-weight: 650;
letter-spacing: 0.015em;
}
/* v13 — restore Wix-style centered desktop gutters */
@media (min-width:1051px){
.nav-wrap,
.hero-inner,
.about-inner{
width:min(1210px,calc(100% - 96px));
}
/* Keep the portfolio grid/footer a little wider, like the Wix layout. */
.featured.section,
.footer-bottom{
width:min(1370px,calc(100% - 96px));
}
.hero-copy{padding-left:0}
}
/* v14 — calmer, centered desktop canvas with generous gutters */
@media (min-width:1051px){
/* One restrained desktop rhythm across the whole site. */
.nav-wrap,
.hero-inner,
.featured.section,
.about-inner,
.footer-bottom{
width:min(1120px,calc(100% - 160px));
}
/* Pull the overall scale down slightly while keeping the established type styling. */
.site-header{height:154px}
#top,#featured,#about,#contact{scroll-margin-top:154px}
.brand img{width:100px}
nav{gap:52px;font-size:15px}
.hero{min-height:510px}
.hero-inner{height:510px;grid-template-columns:48% 52%}
.hero h1{font-size:52px}
.hero p{font-size:15px}
.hero-art{width:520px;max-width:105%}
.featured.section{padding:76px 0 82px}
.featured.section>h2{font-size:42px;margin-bottom:60px}
.featured .work-grid{gap:32px}
.featured .work-card small{font-size:16px;letter-spacing:3px}
.featured .work-card strong{font-size:22px}
.featured .more{font-size:18px;margin-top:40px}
.about{padding:52px 0}
.about-inner{grid-template-columns:47% 53%;gap:52px}
.about-art-wrap{height:390px}
.about-art-wrap img{width:500px}
.about-copy h2{font-size:45px}
.about-copy p{font-size:16px;max-width:560px}
.footer-bottom{grid-template-columns:270px 1fr;gap:64px}
}
/* v15 — hero illustration breathing room only */
@media (min-width:1051px){
.hero-art{width:494px;max-width:100%;margin-right:18px}
}
/* v16 — blue interaction accents */
.featured .more,
.featured .more a{
color:#4b2cff;
}
.featured .work-card:hover strong,
.featured .work-card:focus-visible strong,
.featured .more a:hover,
.featured .more a:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible{
color:#4b2cff;
}
/* v17 — top navigation hover uses the primary blue */
nav a:hover,
nav a:focus-visible{
color:#4b2cff;
border-color:#4b2cff;
}
/* v18 — GUDBOIS category styling */
.featured .work-card small .case-study{color:#4b2cff;}
/* v20 — About page */
.about-page-main{padding:96px 0 110px;background:#fff}
.about-page-inner{width:min(1120px,calc(100% - 96px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:82px;align-items:center}
.about-page-copy h1{display:flex;align-items:center;gap:18px;margin:0 0 48px;font-size:48px;line-height:1.08;font-weight:650;letter-spacing:.15px}
.about-page-copy h1 img{width:92px;height:auto;flex:none}
.about-page-copy p{font-size:17px;line-height:1.8;margin:0 0 26px;max-width:590px}
.about-page-copy .about-note{margin-top:34px}
.about-page-portrait{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.about-page .site-header nav a.active{color:#4b2cff;border-color:#4b2cff;font-weight:700}
@media(max-width:1050px){
.about-page-main{padding:74px 0 90px}
.about-page-inner{width:min(900px,calc(100% - 56px));gap:50px}
.about-page-copy h1{font-size:42px;margin-bottom:34px}
.about-page-copy h1 img{width:78px}
.about-page-copy p{font-size:16px;line-height:1.72}
}
@media(max-width:720px){
.about-page-main{padding:54px 0 72px}
.about-page-inner{width:calc(100% - 36px);grid-template-columns:1fr;gap:38px}
.about-page-copy{order:1}
.about-page-portrait-wrap{order:2}
.about-page-copy h1{font-size:clamp(34px,10vw,42px);gap:12px;margin-bottom:28px}
.about-page-copy h1 img{width:68px}
.about-page-copy p{font-size:16px;line-height:1.7;max-width:none}
}
/* v21 — stronger header separation, larger About sticker, gentle page transitions */
.site-header{
box-shadow:0 5px 16px rgba(0,0,0,.12);
}
.about-page-copy h1 img{
width:108px;
}
/* v24 — fail-safe content transitions: content is visible by default. */
main, footer{
opacity:1;
transform:none;
}
body.page-enter main, body.page-enter footer{
animation:pageFadeIn .28s ease both;
}
body.page-leaving main, body.page-leaving footer{
opacity:0;
transform:translateY(2px);
transition:opacity .16s ease, transform .16s ease;
}
@keyframes pageFadeIn{
from{opacity:0;transform:translateY(3px)}
to{opacity:1;transform:none}
}
@media(max-width:960px){.about-page-copy h1 img{width:92px}}
@media(max-width:720px){.about-page-copy h1 img{width:78px}}
@media(prefers-reduced-motion:reduce){
body.page-enter main,body.page-enter footer{animation:none}
body.page-leaving main,body.page-leaving footer{opacity:1;transform:none;transition:none}
}
/* About artwork caption */
.about-page-portrait-wrap { margin: 0; }
.about-page-portrait-wrap figcaption {
margin-top: 12px;
font-size: 13px;
line-height: 1.55;
letter-spacing: .035em;
color: #555;
font-weight: 400;
text-align: right;
}
.about-page-portrait-wrap figcaption strong {
color: #222;
font-weight: 500;
}
@media (max-width: 760px) {
.about-page-portrait-wrap figcaption { margin-top: 10px; font-size: 12px; }
}
/* v30 — mobile layout matched to the Wix phone reference */
@media (max-width:720px){
.site-header{height:154px}
#top,#featured,#about,#contact{scroll-margin-top:154px}
.nav-wrap{width:100%;padding:0 52px;justify-content:center;position:relative}
.brand img{width:164px}
.menu{position:absolute;right:42px;top:50%;transform:translateY(-50%);width:58px;height:58px;padding:0}
.menu::before{content:'☰';font-size:44px;line-height:58px;color:#4b2cff;font-family:Arial,sans-serif;font-weight:400}
nav{top:154px}
.hero{background:#fff;min-height:824px}
.hero-inner{width:100%;display:block;padding:130px 34px 0;height:auto;min-height:824px}
.hero-copy{text-align:center;padding:0}
.hero h1{font-size:clamp(48px,8.8vw,70px);line-height:1.29;letter-spacing:-1.2px;margin:0 0 38px;font-weight:650}
.hero h1 br{display:block}
.hero p{max-width:680px;margin:0 auto 64px;font-size:clamp(24px,5vw,39px);line-height:1.75;letter-spacing:.13em}
.hero p b{margin:0 .22em;color:#222;font-weight:400}
.hero .button{font-size:clamp(26px,5.2vw,38px);padding:24px 55px;border-radius:24px}
.hero-art{display:none}
.about{padding:0 0 44px;background:#f7d8e7 url('pinkbanner.gif') center/cover no-repeat}
.about-inner{width:100%;display:flex;flex-direction:column;gap:0}
.about-art-wrap{width:100%;height:520px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.about-art-wrap img{width:100%;max-width:none;margin-top:-28px}
.about-copy{width:100%;padding:20px 62px 0;text-align:center}
.about-copy h2{font-size:clamp(50px,9vw,72px);line-height:1.1;margin:0 0 42px}
.about-copy p{font-size:clamp(23px,4.8vw,38px);line-height:1.58;margin:0 auto 38px;max-width:680px}
.about-copy p:nth-of-type(2){display:none}
.about-copy .button{margin-top:10px;font-size:clamp(25px,5vw,36px);padding:22px 50px;border-radius:24px}
}
@media(max-width:480px){
.site-header{height:118px}
#top,#featured,#about,#contact{scroll-margin-top:118px}
.nav-wrap{padding:0 30px}
.brand img{width:124px}
.menu{right:22px;width:48px;height:48px}
.menu::before{font-size:35px;line-height:48px}
nav{top:118px}
.hero{min-height:690px}
.hero-inner{padding:100px 25px 0;min-height:690px}
.hero h1{font-size:clamp(40px,10.3vw,52px);line-height:1.28;margin-bottom:28px}
.hero p{font-size:clamp(18px,4.9vw,26px);line-height:1.72;margin-bottom:50px}
.hero .button{font-size:clamp(20px,5.4vw,27px);padding:18px 38px;border-radius:18px}
.about-art-wrap{height:380px}
.about-art-wrap img{margin-top:-18px}
.about-copy{padding:14px 34px 0}
.about-copy h2{font-size:clamp(42px,11vw,56px);margin-bottom:30px}
.about-copy p{font-size:clamp(18px,5vw,25px);line-height:1.55;margin-bottom:28px}
.about-copy .button{font-size:clamp(19px,5vw,25px);padding:18px 35px;border-radius:18px}
}
/* v33 — single clean scroll reveal system.
Elements visibly fade and DROP DOWN into place when scrolling reveals them. */
.reveal { opacity: 1; transform: none; }
.reveal-enabled .reveal {
opacity: 0;
transform: translate3d(0,-64px,0);
transition:
opacity .9s cubic-bezier(.22,.61,.36,1),
transform 1s cubic-bezier(.16,1,.3,1);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.reveal-enabled .reveal.revealed {
opacity: 1;
transform: translate3d(0,0,0);
}
@media (max-width:720px) {
.reveal-enabled .reveal { transform: translate3d(0,-52px,0); }
.reveal-enabled .reveal.revealed { transform: translate3d(0,0,0); }
}
@media (prefers-reduced-motion:reduce) {
.reveal-enabled .reveal,
.reveal-enabled .reveal.revealed {
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}
/* v35 — Contact page */
.contact-page-main{background:#fff;padding:118px 0 128px;min-height:520px}
.contact-page-inner{width:min(1080px,calc(100% - 96px));margin:0 auto;display:grid;grid-template-columns:.82fr 1.18fr;gap:112px;align-items:start}
.contact-intro{padding-top:28px}
.contact-intro h1{margin:0 0 28px;font-size:48px;line-height:1.05;font-weight:650;letter-spacing:.015em}
.contact-direct{display:flex;align-items:center;gap:20px}
.contact-direct img{width:54px;height:auto;display:block}
.contact-direct-links{display:flex;align-items:center;gap:18px;font-size:20px;font-weight:650;color:#4b2cff}
.contact-direct-links a{color:#4b2cff;transition:opacity .2s ease}
.contact-direct-links a:hover,.contact-direct-links a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.contact-direct-links .divider{color:#222;font-weight:400}
.contact-form-wrap h2{margin:0 0 42px;font-size:28px;line-height:1.2;font-weight:650;letter-spacing:.01em}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.contact-field{display:flex;flex-direction:column;gap:8px}
.contact-field.full{grid-column:1/-1}
.contact-field label{font-size:13px;line-height:1.3;color:#333}
.contact-field .required{color:#4b2cff}
.contact-field input,.contact-field textarea{width:100%;font:inherit;font-size:14px;color:#222;background:#fff;border:2px solid #4b2cff;border-radius:9px;padding:14px 16px;outline:none;transition:box-shadow .2s ease,border-color .2s ease}
.contact-field input{height:54px}
.contact-field textarea{min-height:132px;resize:vertical}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#6c62c8;opacity:.9}
.contact-field input:focus,.contact-field textarea:focus{box-shadow:0 0 0 3px rgba(75,44,255,.12)}
.contact-submit{grid-column:1/-1;justify-self:center;border:0;cursor:pointer;min-width:150px;padding:13px 30px;font-family:inherit}
.contact-page footer{box-shadow:0 -5px 16px rgba(0,0,0,.07)}
.contact-page .site-header nav a.active{color:#4b2cff;border-color:#4b2cff;font-weight:700}
@media(max-width:900px){
.contact-page-main{padding:88px 0 104px}
.contact-page-inner{width:min(760px,calc(100% - 56px));grid-template-columns:1fr;gap:64px}
.contact-intro{padding-top:0;text-align:center}
.contact-direct{justify-content:center}
.contact-form-wrap{width:min(620px,100%);margin:0 auto}
}
@media(max-width:720px){
.contact-page-main{padding:68px 0 82px}
.contact-page-inner{width:calc(100% - 40px);gap:54px}
.contact-intro h1{font-size:clamp(40px,11vw,52px);margin-bottom:24px}
.contact-direct img{width:48px}
.contact-direct-links{font-size:18px;gap:13px}
.contact-form-wrap h2{text-align:center;font-size:clamp(24px,6.5vw,30px);margin-bottom:34px}
.contact-form{grid-template-columns:1fr;gap:22px}
.contact-field.full,.contact-submit{grid-column:1}
.contact-field input{height:52px}
.contact-field textarea{min-height:150px}
}
@media(max-width:420px){
.contact-page-inner{width:calc(100% - 32px)}
.contact-direct{gap:13px}
.contact-direct-links{font-size:16px;gap:10px}
}