*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#fff;--bg2:#fff;--bg3:#E8E8E8;
--bg-dark:#0E0B12;--bg-dark2:#161320;
--text:#1A1523;--text-muted:#6B6178;--text-dim:#9E96A8;
--accent:#930477;--accent2:#A8067F;--accent-dim:rgba(147,4,119,0.06);--accent-glow:rgba(147,4,119,0.1);
--accent-gradient:linear-gradient(135deg,#DA0B9C 0%,#5E0061 100%);
--border:rgba(26,21,35,0.08);--border-hover:rgba(147,4,119,0.2);
--font-mono:'JetBrains Mono',monospace;
--font-body:'General Sans',-apple-system,system-ui,sans-serif;
--font-display:'Red Hat Display','General Sans',-apple-system,system-ui,sans-serif;
--font-acc-num:'Manrope',var(--font-display);
--ease:cubic-bezier(0.16,1,0.3,1);
--font-min:11px;
}
html{font-size:16px;scroll-behavior:smooth;scrollbar-gutter:stable;max-width:100%}
::selection{background:var(--accent);color:#fff}
::-moz-selection{background:var(--accent);color:#fff}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;max-width:100%}
a{color:inherit;text-decoration:none}
p,.service-desc,.step-desc,.testimonial-quote{font-family:var(--font-mono)}
.container{width:100%;max-width:1440px;margin-left:auto;margin-right:auto;padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px);display:block}
/* LOADER — true viewport center (below admin bar when logged in). */
.loader{
position:fixed;inset:0;z-index:100001;
min-height:100vh;min-height:100dvh;
background:var(--bg);
display:flex;align-items:center;justify-content:center;
padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
box-sizing:border-box;overflow:hidden;
}
body.admin-bar .loader{
top:32px;
min-height:calc(100vh - 32px);
min-height:calc(100dvh - 32px);
}
@media screen and (max-width:782px){
body.admin-bar .loader{
top:46px;
min-height:calc(100vh - 46px);
min-height:calc(100dvh - 46px);
}
}
html.teamexio-loader-active,
html.teamexio-loader-active body{
overflow:hidden!important;
height:100%;
}
.loader-inner{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:1.25rem;text-align:center;
}
.loader-logo{
display:block;height:48px;width:auto;max-width:min(48px,40vw);
object-fit:contain;opacity:0;
}
.loader-text{font-family:var(--font-mono);font-size:1.1rem;color:var(--accent);opacity:0;letter-spacing:0.15em;font-weight:400}
.loader-bar{width:140px;height:1px;background:rgba(26,21,35,0.1);overflow:hidden}
.loader-fill{width:0;height:100%;background:var(--accent)}
/* CURSOR */
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:9998;will-change:transform;transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,background .3s}
.cursor.hover{width:48px;height:48px;background:rgba(147,4,119,0.08);border-color:transparent}
@media(max-width:768px){.cursor{display:none}}
/* NAV */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:9310;padding:1.5rem 3.5rem;display:flex;align-items:center;justify-content:space-between;transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);isolation:isolate}
nav#nav.scrolled{background:rgba(250,250,250,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(26,21,35,0.1);box-shadow:0 4px 24px -12px rgba(14,11,18,0.1);padding:1rem 3.5rem}
body.nav-open nav#nav{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom-color:transparent!important}
nav#nav .nav-inner{max-width:1440px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}
.nav-logo{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--font-display);font-size:1.85rem;font-weight:800;letter-spacing:-0.025em;color:var(--text);opacity:0;line-height:1}
.nav-logo img{display:block;flex-shrink:0;height:44px;width:auto;object-fit:contain;margin:0}
.nav-logo .nav-logo-text{color:var(--text);display:inline-flex;align-items:center;line-height:1;gap:0}
.nav-logo-team,.nav-logo-exio{color:var(--text);line-height:1}
.nav-logo-cursor{display:inline-block;width:2px;height:0.85em;background:var(--accent);margin-left:3px;flex-shrink:0;animation:nav-blink 1s steps(2) infinite}
.nav-logo-cursor.done{animation:none;opacity:0;transition:opacity .4s ease}
@keyframes nav-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.nav-links{display:flex;gap:1.75rem;align-items:center;justify-self:center}
.nav-links a{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);transition:color .3s;letter-spacing:0;text-transform:none;opacity:0;position:relative;display:inline-flex;align-items:center}
@media(max-width:1080px){
.nav-links a{font-size:14px}
nav#nav{padding-left:clamp(1.25rem,3vw,2rem);padding-right:clamp(1.25rem,3vw,2rem)}
nav#nav.scrolled{padding-left:clamp(1.25rem,3vw,2rem);padding-right:clamp(1.25rem,3vw,2rem)}
nav#nav .nav-inner{gap:1rem}
.nav-links{gap:1rem}
.nav-cta-text{font-size:14px;padding:0 1.25rem 0 1.1rem}
}
.nav-caret{width:10px;height:7px;margin-left:.4rem;opacity:1;transition:transform .3s var(--ease)}
.nav-links a:hover .nav-caret{transform:translateY(1px)}
/* MEGA MENU */
.nav-item{position:relative;display:inline-flex;align-items:center}
.mega-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);width:calc(100vw - 48px);max-width:1440px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 30px 60px -20px rgba(26,21,35,0.2),0 10px 30px -15px rgba(26,21,35,0.08);padding:2rem 2.5rem;margin-top:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease) .18s,visibility .28s var(--ease) .18s,transform .28s var(--ease) .18s;z-index:150}
.mega-menu::before{content:'';position:absolute;top:-60px;left:0;right:0;height:60px}
nav:has(.nav-item.has-mega:hover) .mega-menu,.mega-menu:hover{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s;pointer-events:auto}
nav:has(.nav-item.has-mega:hover) .nav-caret,nav:has(.mega-menu:hover) .nav-caret{transform:rotate(180deg);opacity:1}
.mega-label{font-family:var(--font-mono);font-size:max(var(--font-min),.6rem);color:var(--text-dim);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:1.25rem;font-weight:500}
.mega-grid{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr 1fr;gap:2.5rem}
.mega-col{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.mega-col-head{padding-bottom:.85rem;border-bottom:1px solid var(--border);margin-bottom:.6rem}
.mega-col-title-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.25rem}
.mega-col-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.mega-col-icon svg{width:20px;height:20px}
.mega-col-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--text);letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:.25rem;transition:color .2s;text-decoration:none}
.mega-col-title:hover{color:var(--accent)}
.mega-arrow{display:inline-flex;align-items:center;transition:transform .25s var(--ease);margin-left:.15rem}
.mega-arrow svg{width:14px;height:auto;fill:currentColor}
.mega-col-title:hover .mega-arrow,.mega-mini:hover .mega-arrow{transform:translateX(3px)}
.mega-col-sub{font-family:var(--font-mono);font-size:max(var(--font-min),.65rem);color:var(--text-muted);letter-spacing:0.02em;padding-left:calc(28px + .6rem)}
.mega-col-links{display:flex;flex-direction:column;gap:.6rem}
.mega-col-links a{font-family:var(--font-display);font-size:14px;font-weight:500;color:#333;padding:1rem;background:#f5f6f7;border-radius:0;transition:all .2s ease;letter-spacing:0;text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.mega-col-links a::after{content:'';display:inline-block;width:16px;height:10px;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;background-color:currentColor;opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease;flex-shrink:0}
.mega-col-links a:hover{background:#000;color:#FFF;text-decoration:underline;text-underline-offset:3px}
.mega-col-links a:hover::after{opacity:1;transform:translateX(0)}
.mega-col-compact{gap:.55rem}
.mega-mini{display:flex;align-items:flex-start;gap:.8rem;padding:.75rem .9rem;border-radius:10px;font-family:var(--font-display);transition:background .2s ease;text-decoration:none;color:inherit}
.mega-mini:hover{background:#f5f6f6}
.mega-mini-icon{width:38px;height:38px;border-radius:10px;background:var(--accent-dim);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mega-mini-icon svg{width:18px;height:18px}
.mega-mini-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.mega-mini-title{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--text);letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:.25rem}
.mega-mini-desc{font-family:var(--font-mono);font-size:max(var(--font-min),.62rem);color:var(--text-muted);letter-spacing:0.02em}
@media(max-width:1200px){.mega-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}
/* 1080px — tighter nav + 3 service cols; compact row below (avoids tall 2-col mega) */
@media(max-width:1080px){
.mega-menu{
width:calc(100vw - 32px);
padding:1.35rem 1.5rem 1.5rem;
margin-top:10px;
max-height:min(78dvh,720px);
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
.mega-menu::before{top:-48px;height:48px}
.mega-label{margin-bottom:1rem}
.mega-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1.15rem 1rem;
}
.mega-col-compact{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:.5rem;
}
.mega-col-head{padding-bottom:.65rem;margin-bottom:.45rem}
.mega-col-title{font-size:.88rem}
.mega-col-sub{font-size:max(var(--font-min),.6rem);padding-left:calc(24px + .5rem)}
.mega-col-icon{width:24px;height:24px}
.mega-col-icon svg{width:17px;height:17px}
.mega-col-links{gap:.45rem}
.mega-col-links a{font-size:13px;padding:.7rem .8rem}
.mega-mini{padding:.6rem .7rem;gap:.65rem}
.mega-mini-icon{width:34px;height:34px}
.mega-mini-icon svg{width:16px;height:16px}
.mega-mini-title{font-size:.85rem}
.mega-mini-desc{font-size:max(var(--font-min),.58rem)}
}
/* 901–1080px — click to open (JS adds data-mega-mode="click"); hover disabled */
@media(max-width:1080px) and (min-width:901px){
nav[data-mega-mode="click"]:not(.mega-menu--open) .mega-menu,
nav[data-mega-mode="click"]:not(.mega-menu--open):has(.nav-item.has-mega:hover) .mega-menu,
nav[data-mega-mode="click"]:not(.mega-menu--open) .mega-menu:hover{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translateX(-50%) translateY(-6px)!important;
}
nav[data-mega-mode="click"].mega-menu--open .mega-menu{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translateX(-50%) translateY(0)!important;
transition-delay:0s!important;
}
nav[data-mega-mode="click"].mega-menu--open .nav-item.has-mega .nav-caret{
transform:rotate(180deg);
opacity:1;
}
nav[data-mega-mode="click"] .nav-item.has-mega > a{
cursor:pointer;
}
}
@media(max-width:900px){.mega-menu{display:none}}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--text);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;opacity:0;cursor:pointer;text-decoration:none;position:relative;height:44px;overflow:visible;justify-self:end}
.nav-cta::after{display:none}
.nav-cta-text{font-family:var(--font-display);padding:0 1.6rem 0 1.4rem;background:var(--bg-dark);color:#fff;font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;border-radius:50px;height:44px;display:flex;align-items:center;white-space:nowrap;position:relative;z-index:1;transition:all .5s cubic-bezier(0.7,0,0.3,1)}
.nav-cta-icon{width:44px;height:44px;border-radius:50%;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:2;margin-left:0;transition:all .5s cubic-bezier(0.7,0,0.3,1);transform:translateX(0) scale(1) scaleX(1) rotate(-45deg)}
.nav-cta-icon svg{width:18px;height:12px;fill:#fff;stroke:none;transition:transform .5s cubic-bezier(0.7,0,0.3,1)}
.nav-cta.hovered .nav-cta-text{background:var(--accent-gradient);transform:var(--text-shift)}
.nav-cta.hovered .nav-cta-icon{background:var(--accent-gradient);transform:var(--icon-shift) rotate(-180deg)}
.nav-cta.hovered .nav-cta-icon svg{transform:scaleX(-1)}
/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:8rem 3.5rem 4rem;position:relative;overflow:hidden}
.hero-canvas{position:absolute;inset:0;z-index:0}
.hero-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(147,4,119,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(147,4,119,0.04) 1px,transparent 1px);background-size:48px 48px;opacity:0;z-index:1}
.hero-glow{position:absolute;top:5%;right:-5%;width:700px;height:700px;background:radial-gradient(circle,rgba(147,4,119,0.06) 0%,rgba(147,4,119,0.02) 30%,transparent 65%);pointer-events:none;opacity:0;z-index:1}
.hero-glow-2{position:absolute;bottom:5%;left:-15%;width:500px;height:500px;background:radial-gradient(circle,rgba(100,80,180,0.04) 0%,transparent 60%);pointer-events:none;opacity:0;z-index:1}
.hero-content{position:relative;z-index:2;max-width:1440px;margin:0 auto;width:100%}
.hero-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:4rem;align-items:center;width:100%}
.hero-left{min-width:0}
.hero-right{position:relative;height:580px}
/* HERO GRAPHICS */
.hero-graphics{position:relative;width:100%;height:100%}
/* Delivery card — main hero graphic */
.hero-deliver-card{position:absolute;top:30px;right:0;width:440px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 35px 70px -20px rgba(26,21,35,0.18),0 12px 35px -10px rgba(147,4,119,0.1);z-index:2;animation:float 7s ease-in-out infinite}
.deliver-chrome{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;background:var(--bg2);border-bottom:1px solid var(--border)}
.mockup-dot{width:10px;height:10px;border-radius:50%;background:rgba(26,21,35,0.15)}
.mockup-dot:nth-child(1){background:#ff5f57}
.mockup-dot:nth-child(2){background:#febc2e}
.mockup-dot:nth-child(3){background:#28c840}
.deliver-url{font-family:var(--font-mono);font-size:max(var(--font-min),.65rem);color:var(--text-dim);margin-left:.75rem;letter-spacing:0.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.deliver-status{color:#1a9d3a;font-weight:500}
.deliver-status::before{content:'●';margin-right:.25rem;font-size:max(var(--font-min),.55rem);vertical-align:0.12em;color:#28c840}
.deliver-body{padding:1.5rem 1.75rem 1.75rem}
.deliver-label{font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);color:var(--accent);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:.5rem;opacity:.85}
.deliver-title{font-family:var(--font-display);font-size:1.65rem;font-weight:700;line-height:1.1;letter-spacing:-0.025em;color:var(--text);margin-bottom:2rem}
.deliver-title em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent);font-weight:500}
/* Timeline */
.deliver-timeline{position:relative;margin:0 .5rem 2rem;padding-bottom:2rem}
.deliver-track{position:absolute;top:6px;left:0;right:0;height:2px;background:var(--bg3);border-radius:2px;overflow:hidden}
.deliver-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;width:0;animation:deliver-fill 1.6s 1.4s cubic-bezier(0.65,0.05,0.36,1) forwards}
.deliver-milestones{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.milestone{display:flex;flex-direction:column;align-items:center;position:relative;text-align:center}
.milestone-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--bg3);transition:all .4s var(--ease);z-index:1;position:relative}
.milestone.done .milestone-dot{background:var(--accent);border-color:var(--accent)}
.milestone.active .milestone-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(147,4,119,0.18)}
.milestone.active .milestone-dot::after{content:'';position:absolute;inset:-7px;border-radius:50%;background:var(--accent);opacity:.35;animation:pulse 2s ease-in-out infinite}
.milestone-name{font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--text);margin-top:.75rem;letter-spacing:-0.005em}
.milestone-day{font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);color:var(--text-dim);margin-top:.2rem;letter-spacing:0.08em;text-transform:uppercase}
.milestone-tag{position:absolute;top:calc(100% + .4rem);left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:max(var(--font-min),.48rem);background:var(--accent-dim);color:var(--accent);padding:.2rem .5rem;border-radius:20px;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;font-weight:600;border:1px solid rgba(147,4,119,0.15)}
/* Comparison strip */
.deliver-compare{padding-top:1.25rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.4rem}
.compare-row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:.7rem}
.compare-label{color:var(--text-dim);letter-spacing:0.06em}
.compare-old .compare-val{color:var(--text-dim)}
.compare-old s{color:var(--text-dim);text-decoration-thickness:1px}
.compare-new .compare-label{color:var(--text)}
.compare-new strong{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--accent);letter-spacing:-0.015em}
.hero-stat-card{position:absolute;bottom:40px;left:0;display:flex;align-items:center;gap:1.1rem;padding:1.25rem 1.5rem 1.25rem 1.25rem;background:#fff;color:var(--text);border-radius:16px;border:1px solid var(--border);box-shadow:0 22px 45px -18px rgba(26,21,35,0.18),0 6px 18px -8px rgba(26,21,35,0.08);z-index:3;animation:float 6s ease-in-out infinite;animation-delay:-3s;min-width:220px}
.stat-card-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#5A0049);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 10px 24px -8px rgba(147,4,119,0.4),inset 0 1px 0 rgba(255,255,255,0.2);position:relative;animation:stat-icon-glow 3s ease-in-out infinite;overflow:hidden}
.stat-card-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,0.35) 50%,transparent 65%);transform:translateX(-100%);animation:stat-icon-shimmer 3s ease-in-out infinite;animation-delay:.4s;pointer-events:none}
.stat-card-icon svg{width:22px;height:22px;position:relative;z-index:1;animation:stat-icon-bolt 3s ease-in-out infinite;transform-origin:center}
.stat-card-body{display:flex;flex-direction:column;min-width:0}
.stat-card-label{font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);color:var(--text-dim);letter-spacing:0.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem}
.stat-card-trend{color:var(--accent);font-size:.8rem;letter-spacing:0;font-weight:700;display:inline-flex;align-items:center;line-height:1;text-transform:none;vertical-align:middle}
.stat-card-trend svg,.stat-card-trend-icon{width:1em;height:1em;display:block;flex-shrink:0}
.stat-card-value{font-family:var(--font-display);font-size:.95rem;font-weight:500;color:var(--text-muted);line-height:1;margin-top:.35rem;display:flex;align-items:baseline;gap:.3rem}
.stat-card-big{font-family:var(--font-display);font-size:1.95rem;font-weight:800;color:var(--text);letter-spacing:-0.03em;line-height:1}
.stat-card-note{font-family:var(--font-mono);font-size:max(var(--font-min),.5rem);color:var(--text-dim);letter-spacing:0.1em;margin-top:.5rem;text-transform:uppercase}
/* Side badge — specific AI win (design-to-code time) */
.hero-side-badge{position:absolute;top:-10px;left:-10px;display:flex;flex-direction:column;padding:.95rem 1.15rem;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 30px -10px rgba(26,21,35,0.2);z-index:4;animation:float 7s ease-in-out infinite;animation-delay:-1.5s;min-width:150px}
.side-badge-label{font-family:var(--font-mono);font-size:max(var(--font-min),.52rem);color:var(--text-dim);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:.3rem}
.side-badge-value{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-0.025em;line-height:1;white-space:nowrap}
.side-badge-sub{font-size:.8rem;font-weight:500;color:var(--text-muted);letter-spacing:0;margin-left:.15rem}
.side-badge-tag{font-family:var(--font-mono);font-size:max(var(--font-min),.5rem);color:var(--accent);margin-top:.5rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600}
.side-badge-tag::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:.4rem;vertical-align:0.05em}
.hero-hex-outline{position:absolute;top:-30px;left:-40px;width:250px;height:288px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(135deg,rgba(147,4,119,0.08),transparent);z-index:0}
.hero-hex-outline::before{content:'';position:absolute;inset:1.5px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--bg)}
.hero-hex-filled{position:absolute;bottom:20px;right:-50px;width:150px;height:173px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:radial-gradient(circle at 30% 30%,rgba(147,4,119,0.25),rgba(147,4,119,0.08));z-index:0;opacity:.7;animation:float 8s ease-in-out infinite;animation-delay:-2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes stat-icon-glow{0%,100%{box-shadow:0 10px 24px -8px rgba(147,4,119,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}50%{box-shadow:0 14px 32px -4px rgba(147,4,119,0.65),inset 0 1px 0 rgba(255,255,255,0.3)}}
@keyframes stat-icon-bolt{0%,45%,55%,100%{transform:scale(1) rotate(0)}48%{transform:scale(1.18) rotate(-4deg)}52%{transform:scale(1.12) rotate(3deg)}}
@keyframes stat-icon-shimmer{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
@keyframes pulse{0%{transform:scale(1);opacity:.4}70%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
@keyframes deliver-fill{to{width:87%}}
@media(max-width:1024px){
.hero-main{grid-template-columns:1fr;gap:2rem}
.hero-right{display:none}
.hero--wp-calc .hero-right{display:block}
.hero-content{padding-top:2rem}
}
.hero-label{font-family:var(--font-mono);font-size:max(var(--font-min),.65rem);font-weight:400;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:2.5rem;display:flex;align-items:center;gap:1rem;overflow:hidden}
.hero-label span{display:inline-block}
.hero-label::before{content:'//';color:var(--accent);opacity:.5;font-size:.75rem}
.hero h1,
.contact-page__title,
.work-page__title,
.blog-hero__title,
.pricing-page--calc h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5.5rem);line-height:0.98;letter-spacing:-0.04em;font-weight:700;max-width:820px;margin:0 0 2.5rem;color:var(--text)}
@media(max-width:1366px){
.hero h1,
.contact-page__title,
.work-page__title,
.blog-hero__title,
.pricing-page--calc h1{font-size:4rem}
}
.hero h1 .line,
.pricing-page--calc h1 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.08em}
.hero h1 .line span,
.pricing-page--calc h1 .line span{display:inline-block}
.hero h1 .hero-serif,
.pricing-page--calc h1 .hero-serif,
.contact-page__title em,
.work-page__title em,
.blog-hero__title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:1em;letter-spacing:-0.015em;color:var(--accent)}
.contact-page__title .hero-serif,
.work-page__title .hero-serif,
.blog-hero__title .hero-serif{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:1em;letter-spacing:-0.015em;color:var(--accent)}
.hero h1 .hero-accent{color:var(--accent)}
.hero h1 em{font-style:normal;color:var(--accent);position:relative}
.hero h1 em::after{content:'';position:absolute;bottom:.08em;left:0;right:0;height:3px;background:var(--accent);opacity:.25}
.hero-desc{font-size:1.125rem;color:var(--text);max-width:555px;line-height:1.6;margin-bottom:3rem;font-weight:400;min-height:calc(1.6em * 2)}
.hero-desc-text{white-space:pre-wrap}
.hero-desc-cursor{display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:3px;vertical-align:-0.22em;animation:desc-blink 1s steps(2) infinite}
.hero-desc-cursor.done{animation:none;opacity:0;transition:opacity .5s ease}
@keyframes desc-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-actions{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;opacity:0}
.btn-primary{display:inline-flex;align-items:center;gap:0;cursor:pointer;text-decoration:none;border:none;background:none;padding:0}
.btn-primary-text{font-family:var(--font-mono);padding:0 1.75rem;background:var(--bg-dark);color:#fff;font-weight:500;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;border-radius:50px;transition:background .4s var(--ease);white-space:nowrap;height:48px;display:inline-flex;align-items:center;margin-left:0}
.btn-primary-icon{width:48px;height:48px;border-radius:50%;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease);flex-shrink:0;position:relative;z-index:1}
.btn-primary-icon svg{width:14px;height:14px;stroke:#fff;stroke-width:2}
.btn-primary:hover .btn-primary-text{background:var(--accent-gradient)}
.btn-primary:hover .btn-primary-icon{background:var(--accent-gradient);transform:scale(1.05)}
.btn-primary span{position:relative;z-index:1}
.btn-secondary{font-family:var(--font-display);padding:0 1.5rem;height:44px;background-color:transparent;background-image:linear-gradient(to bottom,transparent 50%,var(--text) 50%);background-size:100% 200%;background-position:top;color:var(--text);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;text-decoration:none;border:1px solid #1a1523;border-radius:50px;cursor:pointer;transition:background-position .45s var(--ease),color .25s var(--ease),border-color .3s ease;display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.btn-secondary:hover{background-position:bottom;color:#fff;border-color:var(--text)}
.btn-secondary-icon{width:14px;height:auto;fill:currentColor;transition:transform .4s var(--ease);flex-shrink:0}
.btn-secondary:hover .btn-secondary-icon{transform:translateX(4px)}
.hero-stats{display:flex;gap:5rem;margin-top:6rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.stat{opacity:0}
.stat-num{font-family:var(--font-mono);font-size:2.5rem;color:var(--text);line-height:1;font-weight:600}
.stat-label{font-family:var(--font-mono);font-size:max(var(--font-min),.6rem);color:var(--text-dim);text-transform:uppercase;letter-spacing:0.14em;margin-top:.6rem;font-weight:400}
.hero--about{
min-height:min(100vh,940px);
justify-content:flex-start;
padding:clamp(8.5rem,14vh,10.75rem) 3.5rem clamp(4rem,8vh,5.75rem);
}
.hero--about .hero-main{
grid-template-columns:minmax(0,1fr) minmax(0,min(420px,100%));
align-items:center;
gap:clamp(2rem,4.5vw,3.75rem);
}
.hero--about .hero-desc{min-height:calc(1.6em * 3);max-width:38rem}
.hero--about .hero-left > .wp-hero-trust--about{margin:0;display:inline-flex}
.hero--about .hero-label{
margin-top:1.35rem;
margin-bottom:1.5rem;
text-transform:none;
letter-spacing:0.08em;
font-weight:600;
}
.hero-about-pills{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2.25rem}
.hero-about-pill,
p.hero-about-pill{
font-family:var(--font-mono);font-size:max(var(--font-min),.61rem);font-weight:500;
letter-spacing:.12em;text-transform:uppercase;padding:.42rem .9rem;border-radius:999px;
border:1px solid var(--border);background:rgba(255,255,255,.55);color:var(--text-muted);
}
p.hero-about-pill{margin:0}
.hero-about-aside{min-width:0}
.hero-about-timeline{
position:relative;padding:1.35rem 1.4rem 1.25rem;border-radius:18px;
border:1px solid var(--border);background:linear-gradient(152deg,#fff 0%,#faf7fc 100%);
box-shadow:0 28px 55px -32px rgba(26,21,35,.22);
animation:float 8s ease-in-out infinite;animation-delay:-2s;
}
.hero-about-timeline-head{margin-bottom:1.15rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.hero-about-timeline-label{
font-family:var(--font-mono);font-size:max(var(--font-min),.62rem);letter-spacing:.2em;text-transform:uppercase;
color:var(--accent);margin:0 0 .45rem;font-weight:600;
}
.hero-about-timeline-title{
font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.42rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--text);margin:0;
}
.hero-about-timeline-title em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent);font-weight:500;font-style:normal}
.hero-about-timeline-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.hero-about-timeline-item{
display:grid;grid-template-columns:18px minmax(0,1fr);gap:.85rem;
align-items:start;padding:.15rem 0 1rem;
}
.hero-about-timeline-item:last-child{padding-bottom:.15rem}
.hero-about-timeline-rail{display:flex;flex-direction:column;align-items:center;position:relative;min-height:100%}
.hero-about-timeline-dot{
width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:.28rem;background:#fff;
border:2px solid var(--bg3);box-sizing:border-box;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;z-index:1;
}
.hero-about-timeline-rail::after{
content:'';flex:1;width:2px;margin-top:.28rem;margin-bottom:-4px;background:linear-gradient(180deg,var(--bg3) 0%,var(--border) 100%);
border-radius:2px;
}
.hero-about-timeline-item:last-child .hero-about-timeline-rail::after{display:none}
.hero-about-timeline-item--done .hero-about-timeline-dot{border-color:var(--accent);background:var(--accent)}
.hero-about-timeline-item--current .hero-about-timeline-dot{
border-color:var(--accent);background:var(--accent);
box-shadow:0 0 0 4px rgba(147,4,119,0.2);
}
.hero-about-timeline-item--current .hero-about-timeline-dot::after{
content:'';position:absolute;inset:-6px;border-radius:50%;background:var(--accent);opacity:.25;animation:pulse 2.4s ease-in-out infinite;
}
.hero-about-timeline-rail .hero-about-timeline-dot{position:relative}
.hero-about-timeline-body{display:flex;flex-direction:column;gap:.2rem;padding-top:.06rem}
.hero-about-timeline-phase{
font-family:var(--font-mono);font-size:max(var(--font-min),.52rem);letter-spacing:.12em;text-transform:uppercase;
font-weight:600;color:var(--text-dim);
}
.hero-about-timeline-name{
font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.015em;line-height:1.25;display:block;margin:0;
}
.hero-about-timeline-desc{
font-family:var(--font-mono);font-size:max(.8rem,var(--font-min),.78rem);line-height:1.5;color:var(--text-muted);letter-spacing:.01em;display:block;margin:0;margin-top:.1rem;
}
@media (prefers-reduced-motion:reduce){
.hero-about-timeline{animation:none}
.hero-about-timeline-item--current .hero-about-timeline-dot::after{animation:none}
}
@media(max-width:1024px){
.hero--about .hero-main{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:1023px){
.hero h1,
.contact-page__title,
.work-page__title,
.pricing-page--calc h1{line-height:1.06}
.hero h1 .line,
.pricing-page--calc h1 .line{overflow:visible;margin-bottom:0;padding-bottom:0}
}
/* WordPress service hero — left copy + right estimate calculator (VISER-inspired layout, TeamExio tokens) */
.hero--wp-calc{
min-height:min(100vh,980px);
justify-content:flex-start;
padding:clamp(9rem,14.5vh,11.75rem) 3.5rem 6rem;
}
.hero--wp-calc .hero-main{
align-items:start;
gap:clamp(2.25rem,5vw,4.5rem);
}
@media(min-width:1081px){
.hero--wp-calc .hero-main{
grid-template-columns:minmax(0,1fr) minmax(320px,560px);
}
}
/* Desktop comp only (~1080px) — not iPad / tablet (≤1024px). */
@media(max-width:1080px) and (min-width:1025px) and (hover:hover) and (pointer:fine){
.hero--wp-calc .hero-main{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(1.75rem,3vw,2.5rem);
}
.hero--wp-calc h1{max-width:100%}
.hero--wp-calc .hero-left,
.hero--wp-calc .hero-right{min-width:0;max-width:100%}
.hero--wp-calc .price-calc,
.hero--wp-calc .hero-right .price-calc{
max-width:100%;
margin-left:0;
margin-right:0;
}
}
.hero--wp-calc .hero-left{align-self:start}
.hero--wp-calc .hero-right{
align-self:start;
height:auto;
position:relative;
display:block;
margin:0;
margin-block-start:0;
padding-top:0;
}
.hero--wp-calc .hero-right .price-calc{
margin-top:0;
margin-block-start:0;
}
.wp-hero-trust{display:inline-flex;align-items:center;gap:.65rem;padding:.45rem .75rem .45rem .55rem;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 4px 20px -8px rgba(26,21,35,0.1)}
.wp-hero-trust__score{font-family:var(--font-display);font-size:1.15rem;font-weight:800;letter-spacing:-0.03em}
.wp-hero-trust__stars{
display:inline-flex;align-items:center;line-height:0;
}
.wp-hero-trust__stars--svg{position:relative}
.wp-hero-trust__star-defs{position:absolute;width:0;height:0;overflow:hidden}
.wp-hero-trust__sstars-row{display:inline-flex;align-items:center;gap:.1em}
.wp-hero-trust__sstar{
display:block;
width:clamp(.82rem,2.15vw,1.05rem);
height:auto;
flex-shrink:0;
overflow:visible;
}
.wp-hero-trust__sstar path{
transform-origin:50% 50%;
}
.wp-hero-trust__stars--run .wp-hero-trust__sstar{
animation:wp-hero-star-cycle 2.6s cubic-bezier(.45,.05,.25,1) infinite;
}
.wp-hero-trust__stars--run .wp-hero-trust__sstar:nth-child(1){animation-delay:0s}
.wp-hero-trust__stars--run .wp-hero-trust__sstar:nth-child(2){animation-delay:.15s}
.wp-hero-trust__stars--run .wp-hero-trust__sstar:nth-child(3){animation-delay:.3s}
.wp-hero-trust__stars--run .wp-hero-trust__sstar:nth-child(4){animation-delay:.45s}
.wp-hero-trust__stars--run .wp-hero-trust__sstar:nth-child(5){animation-delay:.6s}
@keyframes wp-hero-star-cycle{
0%,100%{
transform:rotate(-55deg) scale(.45);
opacity:.55;
filter:brightness(.65) drop-shadow(0 0 0 transparent);
}
14%{
transform:rotate(14deg) scale(1.14);
opacity:1;
filter:brightness(1.18) drop-shadow(0 0 8px rgba(250,204,21,.55));
}
22%{
transform:rotate(0) scale(1);
filter:brightness(1.08) drop-shadow(0 0 4px rgba(234,179,8,.4));
}
38%{
transform:rotate(-4deg) scale(1.06);
filter:brightness(1.2) drop-shadow(0 0 9px rgba(252,211,77,.55));
}
48%{
transform:rotate(0) scale(1);
filter:brightness(1) drop-shadow(0 0 2px rgba(234,179,8,.25));
}
70%{
transform:rotate(3deg) scale(1.04);
filter:brightness(1.1);
}
85%{
transform:rotate(0) scale(1);
filter:brightness(.95) drop-shadow(0 0 0 transparent);
}
}
@media(prefers-reduced-motion:reduce){
.wp-hero-trust__stars--run .wp-hero-trust__sstar{animation:none!important}
.wp-hero-trust__sstar{filter:none}
}
.wp-hero-trust__brand{font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.hero--wp-calc .hero-label{margin-top:1.35rem;margin-bottom:1.5rem;text-transform:none;letter-spacing:0.08em;font-weight:600}
.hero--wp-calc h1{display:block;max-width:min(820px,100%)}
.hero--wp-calc .wp-hero-highlight,
.pricing-page--calc .wp-hero-highlight{color:var(--accent)}
.wp-hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:48px;padding:0 1.4rem;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:15px;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .2s;white-space:nowrap}
.wp-hero-btn:hover{transform:translateY(-1px)}
.wp-hero-btn--primary{background:var(--accent-gradient);color:#fff;box-shadow:0 12px 28px -10px rgba(147,4,119,0.45)}
.wp-hero-btn--primary:hover{filter:brightness(1.05)}
.wp-hero-btn--wa{background:var(--bg-dark);color:#fff;border:1px solid var(--bg-dark)}
.wp-hero-btn--wa:hover{filter:brightness(1.08)}
.wp-hero-btn--wa svg{width:18px;height:18px;flex-shrink:0}
/* Website price calculator — VISER-style layout, TeamExio color + typography tokens */
.price-calc{
--calc-track:#E4E0EA;
--calc-fill-pct:0%;
width:100%;
max-width:560px;
margin-left:auto;
background:#fff;border:1px solid var(--border);border-radius:20px;
box-shadow:0 24px 48px -20px rgba(26,21,35,0.18),0 8px 24px -12px rgba(147,4,119,0.12);
overflow:hidden;
}
.price-calc__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.5rem 1.65rem 1.15rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(147,4,119,0.035) 0%,transparent 100%)}
.price-calc__head-text{min-width:0;flex:1}
.price-calc__title{font-family:var(--font-display);font-size:1.2rem;font-weight:800;letter-spacing:-0.035em;color:var(--text);line-height:1.2}
.price-calc__sub{font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);color:var(--text-muted);margin-top:.4rem;letter-spacing:0.04em;line-height:1.45}
.price-calc__badge{font-family:var(--font-mono);font-size:max(var(--font-min),.52rem);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#0d7a3e;background:rgba(34,197,94,0.14);padding:.4rem .65rem;border-radius:999px;border:1px solid rgba(34,197,94,0.28);white-space:nowrap;flex-shrink:0;margin-top:.1rem}
.price-calc__body{padding:1.5rem 1.65rem 0}
.price-calc__field{margin-bottom:1.35rem}
.price-calc__field--addons{display:flex;flex-direction:column}
.price-calc__addons-head-line{
margin:0 0 .85rem;
line-height:1.55;
}
.price-calc__legend--addons{
display:inline;
margin-bottom:0;
vertical-align:baseline;
}
.price-calc__addon-intro-sep{
font-family:var(--font-mono);
font-size:max(var(--font-min),.62rem);
color:var(--text-dim);
font-weight:400;
vertical-align:baseline;
}
.price-calc__addon-intro{
display:inline;
margin:0;
font-family:var(--font-mono);
font-size:max(var(--font-min),.62rem);
font-weight:400;
line-height:inherit;
letter-spacing:0.02em;
color:var(--text-muted);
text-transform:none;
vertical-align:baseline;
}
.price-calc__field-head{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;margin-bottom:.4rem;flex-wrap:wrap}
.price-calc__legend{font-family:var(--font-mono);font-size:max(var(--font-min),.52rem);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;display:block}
.price-calc__legend--inline{margin-bottom:0}
.price-calc__pages-val{font-family:var(--font-display);font-size:.9rem;font-weight:800;color:var(--accent);letter-spacing:-0.02em}
.price-calc__range-ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:max(var(--font-min),.54rem);font-weight:500;color:var(--text-muted);margin:.35rem 0 0;padding:0 2px;line-height:1}
.price-calc__range-shell{padding:.15rem 0}
.price-calc__range{
-webkit-appearance:none;appearance:none;
display:block;width:100%;height:18px;background:transparent;cursor:pointer;
--_calc_track_h:3px;
}
.price-calc__range:focus{outline:none}
.price-calc__range:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.price-calc__range::-webkit-slider-runnable-track{
height:var(--_calc_track_h,3px);border-radius:999px;
background:linear-gradient(to right,var(--accent) var(--calc-fill-pct),var(--calc-track) var(--calc-fill-pct));
}
.price-calc__range::-webkit-slider-thumb{
-webkit-appearance:none;
width:18px;height:18px;margin-top:-7.5px;border-radius:50%;
background:var(--accent);
border:2px solid #fff;
box-shadow:0 0 0 1px var(--accent),0 2px 8px rgba(26,21,35,0.15);
transition:transform .15s var(--ease);
}
.price-calc__range:hover::-webkit-slider-thumb{transform:scale(1.06)}
.price-calc__range::-moz-range-track{
height:3px;border-radius:999px;
background:linear-gradient(to right,var(--accent) var(--calc-fill-pct),var(--calc-track) var(--calc-fill-pct));
}
.price-calc__range::-moz-range-progress{height:3px;background:transparent}
.price-calc__range::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;
background:var(--accent);
border:2px solid #fff;
box-shadow:0 0 0 1px var(--accent),0 2px 8px rgba(26,21,35,0.15);
}
.price-calc__segment{display:flex;flex-wrap:wrap;gap:.5rem}
.price-calc__seg-btn{
font-family:var(--font-display);font-size:.84rem;font-weight:700;padding:.62rem 1.05rem;border-radius:999px;
border:1px solid rgba(147,4,119,0.22);
background:#fff;color:var(--accent);cursor:pointer;
transition:background .25s var(--ease),border-color .2s,color .2s,box-shadow .3s var(--ease),transform .2s var(--ease);
}
.price-calc__seg-btn:hover{border-color:rgba(147,4,119,0.45);transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(147,4,119,0.2)}
.price-calc__seg-btn.is-active{
background:var(--accent-gradient);color:#fff;border-color:transparent;
box-shadow:0 8px 28px -8px rgba(147,4,119,0.65),0 0 0 1px rgba(255,255,255,0.12) inset,0 0 32px -4px rgba(218,11,156,0.45);
}
.price-calc__addon-group{display:flex;flex-direction:column;align-items:stretch}
.price-calc__addon-group[hidden]{display:none!important}
.price-calc__addons{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.price-calc__addons-more{
grid-column:1 / -1;
display:grid;
grid-template-rows:1fr;
transition:grid-template-rows .48s var(--ease);
}
.price-calc__addons--collapsible.is-collapsed .price-calc__addons-more{grid-template-rows:0fr}
.price-calc__addons-more-inner{
min-height:0;
overflow:hidden;
display:grid;
grid-template-columns:1fr 1fr;
gap:.55rem;
opacity:1;
transition:opacity .38s var(--ease);
}
.price-calc__addons--collapsible.is-collapsed .price-calc__addons-more-inner{opacity:0}
@media (prefers-reduced-motion:reduce){
.price-calc__addons-more{transition:none}
.price-calc__addons-more-inner{transition:none}
}
.price-calc__addons-toggle{
display:inline-flex;align-items:center;justify-content:flex-end;gap:.4rem;
align-self:flex-end;margin-top:.65rem;padding:.35rem 0 .15rem;border:0;background:transparent;
cursor:pointer;font-family:var(--font-display);font-size:max(var(--font-min),.78rem);font-weight:700;
color:var(--accent);letter-spacing:.02em;transition:opacity .2s,color .2s;
}
.price-calc__addons-toggle:hover{color:var(--accent2);opacity:.95}
.price-calc__addons-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.price-calc__addons-toggle-chevron{transition:transform .48s var(--ease);flex-shrink:0}
.price-calc__addons-toggle[aria-expanded="true"] .price-calc__addons-toggle-chevron{transform:rotate(180deg)}
.price-calc__check{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.45rem .55rem;
padding:.5rem .6rem;border:1px solid var(--border);border-radius:12px;cursor:pointer;
min-height:2.65rem;
transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .25s var(--ease);
}
.price-calc__check:hover{
border-color:rgba(147,4,119,0.28);
box-shadow:0 6px 16px -8px rgba(26,21,35,0.12);
}
.price-calc__check:has(input:checked){
border-color:rgba(147,4,119,0.55);
background:var(--accent-dim);
box-shadow:0 0 0 1px rgba(147,4,119,0.15),0 8px 22px -12px rgba(147,4,119,0.35);
}
.price-calc__check input{width:15px;height:15px;accent-color:var(--accent);margin:0;flex-shrink:0;cursor:pointer;align-self:center}
.price-calc__check-label{font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--text);line-height:1.25;min-width:0}
.price-calc__check-price{font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);font-weight:500;color:var(--text-muted);white-space:nowrap;margin-left:auto}
.price-calc__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:10px}
.price-calc__tag{
font-family:var(--font-mono);font-size:max(var(--font-min),.54rem);font-weight:500;letter-spacing:0.02em;
padding:.32rem .55rem;border-radius:999px;
background:rgba(147,4,119,0.07);border:1px solid rgba(147,4,119,0.18);color:var(--accent);
}
.price-calc__tag--addon{
background:rgba(26,21,35,0.07);
border:1px solid rgba(93,0,97,0.22);
color:#4d1a56;
}
.price-calc--scope-boot .price-calc__pages-val,
.price-calc--scope-boot .price-calc__range-meta{
opacity:0;
pointer-events:none;
}
.price-calc__range-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);color:var(--text-muted);margin-top:.45rem;line-height:1.4}
.price-calc__pages-val,
.price-calc__range-meta{
transition:opacity .45s var(--ease);
}
@media (prefers-reduced-motion:reduce){
.price-calc__pages-val,
.price-calc__range-meta{transition:none}
}
/* Quote footer bar — flat band, space-between, white CTA (reference-style proportions, TeamExio tokens) */
.price-calc__foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem 2rem;
flex-wrap:nowrap;
width:calc(100% + 3.3rem);
margin:1.65rem -1.65rem 0;
padding:1rem 3rem;
min-height:5.75rem;
box-sizing:border-box;
background:var(--accent);
color:#fff;
border-radius:0 0 20px 20px;
box-shadow:0 16px 40px -14px rgba(147,4,119,0.45);
animation:priceCalcFootIn .58s var(--ease) both;
}
@keyframes priceCalcFootIn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
.price-calc__foot{animation:none}
}
.price-calc__foot-left{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:.32rem;
min-width:0;
flex:1 1 auto;
}
.price-calc__total-num{
font-family:var(--font-display);
font-size:clamp(1.9rem,5vw,2.45rem);
font-weight:800;
letter-spacing:-0.045em;
line-height:1;
color:#fff;
transform-origin:50% 50%;
transition:transform .2s var(--ease);
}
.price-calc__total-num--pulse{
animation:priceCalcTotalPop .48s var(--ease);
}
@keyframes priceCalcTotalPop{
0%{transform:scale(1)}
35%{transform:scale(1.04)}
100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
.price-calc__total-num--pulse{animation:none}
}
.price-calc__total-note{
font-family:var(--font-body);
font-size:max(var(--font-min),clamp(.78rem,1.6vw,.84rem));
font-weight:400;
line-height:1.4;
color:rgba(255,255,255,0.72);
margin:0;
letter-spacing:0.02em;
}
.price-calc__total-note-line{display:block}
.price-calc__quote{
font-family:var(--font-display);
font-weight:700;
font-size:.98rem;
padding:.9rem 1.85rem;
min-height:48px;
border-radius:12px;
background:#fff;
color:#5E0061;
text-decoration:none;
white-space:nowrap;
transition:transform .22s var(--ease),box-shadow .22s var(--ease);
flex-shrink:0;
align-self:center;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,0.12);
border:none;
cursor:pointer;
}
.price-calc__quote:hover{
transform:translateY(-1px);
box-shadow:0 8px 22px rgba(0,0,0,0.16);
color:#4a004d;
}
@media(max-width:1024px){
.hero--wp-calc .hero-main{grid-template-columns:1fr;gap:clamp(2.85rem,5.5vw,4rem)}
.hero--wp-calc{padding-top:clamp(10rem,16.5vh,13.75rem);padding-bottom:7.25rem}
.hero--wp-calc .price-calc{margin-left:auto;margin-right:auto;max-width:560px}
}
@media(max-width:767px){
.hero--wp-calc{padding:8.85rem clamp(16px,4vw,24px) 6.25rem}
.price-calc__addons{grid-template-columns:1fr}
.price-calc__addons-more-inner{grid-template-columns:1fr}
.price-calc__foot{
flex-direction:column;
flex-wrap:wrap;
align-items:stretch;
text-align:center;
width:calc(100% + 3.3rem);
min-height:0;
padding:1rem 1.5rem;
gap:1.15rem;
}
.price-calc__foot-left{align-items:center}
.price-calc__quote{
text-align:center;
justify-content:center;
width:100%;
max-width:320px;
margin:0 auto;
box-sizing:border-box;
align-self:center;
}
}
/* Lock page scroll: hero + calculator sit under the overlay; block stray hover while modal is open */
body.proposal-modal-open .hero-actions .btn-secondary,
body.proposal-modal-open .hero-actions .nav-cta{
pointer-events:none;
}
body.proposal-modal-open .price-calc{
pointer-events:none;
}
/* Services page */
.hero--services .hero-main{align-items:center}
.hero--services .hero-left,
.hero--services .hero-right{align-self:center}
.hero--services .hero-right{
display:flex;
align-items:center;
justify-content:center;
}
.hero--services .services-hero-panel.price-calc{margin-top:0;margin-bottom:0}
.services-hero-panel__body{
display:flex;
flex-direction:column;
gap:.65rem;
padding:1.25rem 1.5rem 1.5rem;
}
.services-hero-panel__card{
display:flex;
align-items:center;
gap:1rem;
padding:1rem 1.1rem;
border:1px solid var(--border);
border-radius:12px;
background:#faf9fc;
text-decoration:none;
color:inherit;
transition:border-color .2s,background .2s,transform .2s;
}
.services-hero-panel__card:hover{
border-color:rgba(147,4,119,0.35);
background:#fff;
transform:translateY(-1px);
}
.services-hero-panel__icon{
flex:0 0 40px;
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(147,4,119,0.08);
color:var(--accent);
}
.services-hero-panel__icon svg{width:22px;height:22px}
.services-hero-panel__text{
display:flex;
flex-direction:column;
gap:.2rem;
min-width:0;
}
.services-hero-panel__text strong{
font-family:var(--font-display);
font-size:1rem;
font-weight:700;
letter-spacing:-0.02em;
}
.services-hero-panel__text em{
font-family:var(--font-mono);
font-size:.72rem;
font-style:normal;
color:var(--muted);
letter-spacing:.02em;
}
.services-hero-panel__cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
margin-top:.35rem;
padding:.85rem 1rem;
border-radius:10px;
font-family:var(--font-mono);
font-size:.72rem;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
text-decoration:none;
color:var(--accent);
background:rgba(147,4,119,0.06);
transition:background .2s,color .2s;
}
.services-hero-panel__cta svg{width:14px;height:9px}
.services-hero-panel__cta:hover{background:rgba(147,4,119,0.12)}
.services-pillars{
padding:clamp(4rem,8vh,6rem) 3.5rem;
background:#fff;
border-top:1px solid var(--border);
}
.services-pillars .container,
.services-cta .container{
max-width:1440px;
padding-left:0;
padding-right:0;
}
.services-pillars__head{
max-width:720px;
margin:0 auto 3rem;
text-align:center;
}
.services-pillars__lede{
margin-top:1rem;
font-family:var(--font-mono);
font-size:.9rem;
line-height:1.65;
color:var(--muted);
}
.services-pillars__grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1.25rem;
max-width:none;
width:100%;
margin:0;
padding:0;
list-style:none;
}
.services-pillars__item{
padding:1.35rem 1.4rem;
border:1px solid var(--border);
border-radius:14px;
background:#fbfbfb;
}
.services-pillars__item strong,
.services-pillars__item .services-pillars__item-title{
display:block;
font-family:var(--font-display);
font-size:1.25rem;
font-weight:700;
margin-bottom:1rem;
letter-spacing:-0.02em;
}
.services-pillars__item span,
.services-pillars__item .services-pillars__item-desc{
font-family:var(--font-mono);
font-size:1rem;
line-height:1.55;
color:var(--muted);
}
.services-pillars__item .services-pillars__item-title{margin-top:0}
.services-pillars__item .services-pillars__item-desc{margin:0}
.services-cta{
padding:clamp(4rem,8vh,6rem) 3.5rem 7rem;
background:linear-gradient(180deg,#fbfbfb 0%,#f3f0f7 100%);
border-top:1px solid var(--border);
}
.services-cta__inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:2.5rem;
flex-wrap:wrap;
}
.services-cta__copy{max-width:560px}
.services-cta__lede{
margin-top:1rem;
font-family:var(--font-mono);
font-size:.9rem;
line-height:1.65;
color:var(--muted);
}
.services-cta__actions{
display:flex;
flex-wrap:wrap;
gap:1rem;
align-items:center;
}
/* Services bento grid (platform deep-dive) */
.svc-bento{
padding:clamp(4rem,8vh,6rem) 3.5rem;
background:#fff;
border-top:1px solid var(--border);
}
.svc-bento .container{
max-width:1440px;
padding-left:0;
padding-right:0;
}
.svc-bento__head{
text-align:center;
max-width:720px;
margin:0 auto 3rem;
}
.svc-bento__title{margin:0}
.svc-bento__title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--accent)}
.svc-bento__grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1rem;
grid-auto-rows:clamp(280px,22vw,440px);
}
.svc-bento__card--tall{grid-row:span 2}
.svc-bento__card--wide{grid-column:span 2}
.svc-bento__card{
position:relative;
display:block;
min-height:100%;
border-radius:16px;
overflow:hidden;
color:#fff;
text-decoration:none;
background-color:#1a1523;
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.svc-bento__card picture{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
}
.svc-bento__img,
.svc-bento__card picture img{
position:absolute;
inset:0;
width:100%;
height:100%;
max-width:none;
object-fit:cover;
object-position:center center;
}
.svc-bento__card:not(.svc-bento__card--tall) .svc-bento__img{object-position:center top}
a[href*="plugin-development"].svc-bento__card .svc-bento__img{object-position:center center}
.svc-bento__card::before{
content:'';
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(180deg,rgba(14,11,18,.35) 0%,rgba(14,11,18,.05) 38%,rgba(14,11,18,.55) 100%);
pointer-events:none;
transition:opacity .35s var(--ease);
}
.svc-bento__card:hover{
transform:translateY(-3px);
box-shadow:0 22px 44px -18px rgba(14,11,18,.45);
}
.svc-bento__card:hover::before{opacity:.95}
.svc-bento__inner{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-start;
gap:1rem;
padding:2rem 2rem 2.5rem;
}
.svc-bento__copy{
display:flex;
flex-direction:column;
gap:1rem;
max-width:42ch;
}
.svc-bento__card--wide .svc-bento__copy{max-width:56ch}
.svc-bento__name{
font-family:var(--font-display);
font-size:2rem;
font-weight:700;
line-height:1.15;
letter-spacing:-0.02em;
margin:0;
}
.svc-bento__desc{
font-family:var(--font-body);
font-size:1.125rem;
line-height:1.4;
letter-spacing:-0.01em;
color:rgba(255,255,255,.92);
margin:0;
}
.svc-bento__more{
display:inline-flex;
align-items:center;
gap:.55rem;
font-family:var(--font-display);
font-size:1.125rem;
font-weight:600;
letter-spacing:.01em;
}
.svc-bento__more-icon{
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:50%;
border:1px solid rgba(255,255,255,.4);
background:rgba(255,255,255,.08);
transition:background .25s var(--ease),border-color .25s var(--ease);
}
.svc-bento__more-icon svg{width:12px;height:8px}
.svc-bento__card:hover .svc-bento__more-icon{
background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.65);
}
@media(max-width:1024px){
.svc-bento__grid{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:clamp(260px,40vw,400px);
}
.svc-bento__card--tall{grid-row:span 1}
.svc-bento__card--wide{grid-column:span 2}
}
@media(max-width:767px){
.svc-bento{padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}
.svc-bento__grid{grid-template-columns:1fr}
}
.svc-bento--shopify{background:#fbfbfb}
.services + .svc-bento--wp{
border-top:0;
}
.svc-bento--wp + .svc-bento--shopify{
border-top:1px solid var(--border);
}
@media(max-width:1024px){
.services-pillars__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
.services-pillars__grid{grid-template-columns:1fr}
.services-cta__inner{flex-direction:column;align-items:flex-start}
}
/* Proposal modal (WordPress estimator → Request Full Proposal) */
.proposal-modal{
position:fixed;
inset:0;
z-index:10050;
display:flex;
align-items:center;
justify-content:center;
padding:clamp(14px,4vw,28px);
box-sizing:border-box;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .38s var(--ease),visibility 0s linear .38s;
}
.proposal-modal.proposal-modal--open{
opacity:1;
visibility:visible;
pointer-events:auto;
overscroll-behavior:none;
transition:opacity .38s var(--ease),visibility 0s linear 0s;
}
.proposal-modal[hidden]{display:none!important}
.proposal-modal__backdrop{
position:absolute;
inset:0;
background:rgba(14,11,18,0.52);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
}
.proposal-modal__dialog{
position:relative;
z-index:1;
width:100%;
max-width:min(92vw,720px);
max-height:min(92dvh,880px);
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
margin:auto;
padding:clamp(1.35rem,4vw,1.85rem);
border-radius:18px;
background:#fff;
border:1px solid var(--border);
box-shadow:0 28px 70px -28px rgba(26,21,35,0.35),0 12px 36px -16px rgba(147,4,119,0.18);
opacity:0;
transform:translateY(18px) scale(.97);
transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.proposal-modal.proposal-modal--open .proposal-modal__dialog{
opacity:1;
transform:translateY(0) scale(1);
}
.proposal-modal__close{
position:absolute;
top:.85rem;
right:.85rem;
width:40px;height:40px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:12px;
background:transparent;
color:var(--text-muted);
cursor:pointer;
transition:background .2s,color .2s;
}
.proposal-modal__close:hover{background:rgba(147,4,119,0.08);color:var(--accent)}
.proposal-modal__title{
font-family:var(--font-display);
font-size:clamp(1.35rem,3.2vw,1.65rem);
font-weight:800;
letter-spacing:-0.03em;
color:var(--text);
padding-right:2.75rem;
margin-bottom:.45rem;
line-height:1.15;
flex-shrink:0;
}
.proposal-modal__desc{
font-family:var(--font-mono);
font-size:14px;
color:var(--text-muted);
line-height:1.45;
margin-bottom:1.25rem;
flex-shrink:0;
}
.proposal-modal__form{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
gap:1.35rem;
}
.proposal-modal__body{
flex:1;
min-height:0;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding-right:4px;
margin-right:-4px;
}
.proposal-modal__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.15rem 1rem;
}
@media(max-width:540px){
.proposal-modal__grid{grid-template-columns:1fr}
}
.proposal-modal__field{display:flex;flex-direction:column;gap:.36rem}
.proposal-modal__field--full{grid-column:1 / -1}
.proposal-modal__field--summary{margin-top:.85rem}
.proposal-modal__label{
font-family:var(--font-mono);
font-size:14px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--text);
}
.proposal-modal__label abbr{text-decoration:none;border:none}
.proposal-modal__optional{
font-weight:500;
text-transform:none;
letter-spacing:0.02em;
color:var(--text-muted);
font-size:14px;
}
.proposal-modal__input,.proposal-modal__textarea{
font-family:var(--font-body);
font-size:1rem;
padding:.62rem .78rem;
border-radius:10px;
border:1px solid rgba(26,21,35,0.12);
background:#fff;
color:var(--text);
transition:border-color .2s,box-shadow .2s;
width:100%;
box-sizing:border-box;
}
.proposal-modal__input:focus,.proposal-modal__textarea:focus{
outline:none;
border-color:rgba(147,4,119,0.45);
box-shadow:0 0 0 3px rgba(147,4,119,0.12);
}
.proposal-modal__textarea{
resize:vertical;
min-height:72px;
line-height:1.45;
}
.proposal-modal__textarea--summary{
font-family:var(--font-mono);
font-size:1rem;
line-height:1.5;
resize:none;
min-height:6rem;
max-height:min(13rem,28vh);
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
background:rgba(147,4,119,0.04);
border-color:rgba(147,4,119,0.15);
color:var(--text);
}
.proposal-modal__count{
align-self:flex-end;
font-family:var(--font-mono);
font-size:1rem;
color:var(--text-dim);
margin-top:-0.15rem;
}
.proposal-modal__submit{
flex-shrink:0;
margin-top:0;
width:100%;
min-height:52px;
border:none;
border-radius:12px;
cursor:pointer;
font-family:var(--font-display);
font-weight:700;
font-size:1.05rem;
letter-spacing:-0.02em;
color:#fff;
background:var(--accent-gradient);
box-shadow:0 12px 28px -12px rgba(147,4,119,0.55);
transition:filter .2s,transform .2s var(--ease),box-shadow .2s;
}
.proposal-modal__submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* Shorter viewports (e.g. 1080×810) — keep submit visible; scroll fields inside modal */
@media(max-height:900px){
.proposal-modal{
align-items:flex-start;
padding-top:max(12px,env(safe-area-inset-top,0px));
padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
}
.proposal-modal__dialog{
max-height:calc(100dvh - 24px);
margin-top:auto;
margin-bottom:auto;
}
.proposal-modal__desc{margin-bottom:1rem}
.proposal-modal__form{gap:1rem}
.proposal-modal__textarea--summary{
min-height:4.75rem;
max-height:min(7.5rem,18vh);
}
}
@media(prefers-reduced-motion:reduce){
.proposal-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
.proposal-modal,.proposal-modal__dialog{
transition-duration:.01ms!important;
transition-delay:0s!important;
}
.proposal-modal{transition-property:opacity,visibility}
.proposal-modal__submit{transition:none}
.proposal-modal__submit:hover{transform:none}
}
/* MARQUEE */
.marquee-wrap{overflow:hidden;padding:1.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg)}
.marquee-track{display:flex;gap:0;will-change:transform}
.marquee-item{font-family:var(--font-mono);font-size:.8rem;color:var(--text-dim);white-space:nowrap;padding:0 1.75rem;display:flex;align-items:center;gap:1.75rem;transition:color .3s;font-weight:400;letter-spacing:0.04em}
.marquee-item:hover{color:var(--accent)}
.marquee-dot{width:4px;height:4px;background:var(--accent);border-radius:50%;flex-shrink:0;opacity:.5}
/* SECTIONS */
section{padding:7rem 3.5rem}
section>.container,.section-inner{max-width:1440px;margin:0 auto}
.section-label{font-family:var(--font-mono);font-size:max(var(--font-min),.6rem);font-weight:500;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:1.5rem;overflow:hidden}
.section-label span{display:inline-block}
.section-label span::before{content:'// ';opacity:.5}
.section-title{font-family:var(--font-display);font-size:48px;line-height:1.15;letter-spacing:-0.025em;margin-bottom:4rem;font-weight:700}
.section-title em{font-style:normal;color:var(--accent)}
/* SERVICES - sticky stack */
.services{background:#fbfbfb;padding:7rem 3.5rem 9rem}
.services-intro{max-width:1440px;margin:0 auto 7rem;width:100%;padding:0}
.services-intro .section-title{font-size:48px;line-height:1.05;font-weight:700}
.services-intro .section-title em{display:block;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:inherit;letter-spacing:-0.01em;margin-top:.15em}
.services-stack{max-width:1440px;margin:0 auto;width:100%;padding:0}
.sservice{position:sticky;border-radius:16px;overflow:hidden;margin-bottom:2.5rem;box-shadow:0 30px 60px -30px rgba(14,11,18,0.25)}
.sservice-mark{display:none}
.sservice-tag,.sservice-inner{position:relative;z-index:1}
.sservice:nth-child(1){top:100px}
.sservice:nth-child(2){top:160px}
.sservice:nth-child(3){top:220px}
.sservice:nth-child(4){top:280px}
.sservice:nth-child(5){top:340px}
.sservice-tag{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;font-weight:600;letter-spacing:-0.005em;padding:2rem 4rem .4rem;line-height:1.2}
.sservice-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;padding:0 4rem 2rem;align-items:center;min-height:450px}
.sservice-title{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-0.025em;margin-bottom:1.25rem}
.sservice-desc{font-family:var(--font-mono);font-size:16px;line-height:1.7;max-width:60ch;margin-bottom:1.5rem;opacity:.85;font-weight:400}
.sservice-note{font-family:var(--font-mono);font-size:.78rem;line-height:1.55;letter-spacing:0.01em;padding:0 0 0 .85rem;border-left:2px solid rgb(26 21 35);opacity:.65;margin-bottom:2rem;max-width:52ch;min-height:calc(1.55em * 2);color:black}
.sservice-note-cursor{display:inline-block;width:2px;height:.95em;background:currentColor;margin-left:2px;vertical-align:-0.15em;animation:sservice-note-blink 1s steps(2) infinite}
.sservice-note-cursor.done{animation:none;opacity:0;transition:opacity .4s ease}
@keyframes sservice-note-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.sservice-stats{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:360px;margin-bottom:2.25rem}
.sservice-stats > div > .sservice-stat-label{font-family:var(--font-mono);font-size:.78rem;letter-spacing:0.1em;text-transform:uppercase;opacity:.6;margin-bottom:.45rem}
.sservice-stats > div > .sservice-stat-val{font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:-0.01em}
.sservice-cta{display:inline-flex;align-items:center;gap:.65rem;padding:.85rem 1.4rem;border-radius:999px;background:currentColor;font-family:var(--font-display);font-size:.85rem;font-weight:600;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.sservice-cta > *{color:var(--ink,#fff)}
.sservice-cta svg{width:18px;height:auto;flex-shrink:0}
.sservice-cta:hover{transform:translateX(4px);background:#000}
.sservice-cta:hover > *{color:#fff}
.sservice-visual{position:relative;height:100%;min-height:360px;display:flex;align-items:center;justify-content:center}
.sservice-img{max-width:100%;width:100%;height:auto;border-radius:14px;object-fit:contain;display:block}
/* tone variants */
.sservice--ink{background:#C5C2FB;color:#1a1248;--ink:#C5C2FB}
.sservice--cream{background:#FFB0A6;color:#3a1815;--ink:#FFB0A6}
.sservice--mint{background:#c9fff7;--ink:#c9fff7}
.sservice--blush{background:#8FDBE0;color:#0d2f31;--ink:#8FDBE0}
.sservice--peach{background:#FFC199;color:#3a2412;--ink:#FFC199}
/* CTA button bg matches each card's mockup bg */
.sservice--ink .sservice-cta{background:#1a1248}
.sservice--cream .sservice-cta{background:#ff8e80}
.sservice--cream .sservice-cta > *{color:#0a0a0a}
.sservice--peach .sservice-cta{background:#ff8637}
.sservice--peach .sservice-cta > *{color:#000000}
.sservice--mint .sservice-cta{background:#02eac1}
.sservice--mint .sservice-cta > *{color:#053d33}
.sservice--blush .sservice-cta{background:#037077}
.sservice--blush .sservice-cta > *{color:#fff}
/* mockups — generic */
.mock-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45}
.mock-line{display:inline-block;height:8px;background:currentColor;opacity:.3;border-radius:4px;flex:1}
.mock-line--short{max-width:80px}
/* mock-code (Websites & Web Apps) */
.mock-code{width:100%;max-width:420px;background:#1a1248;border:1px solid #1a1248;border-radius:12px;overflow:hidden;box-shadow:0 24px 48px -20px rgba(0,0,0,0.35)}
.mock-code-chrome{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.08)}
.mock-code-chrome span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.25)}
.mock-code-chrome em{font-family:var(--font-mono);font-size:max(var(--font-min),.65rem);color:rgba(255,255,255,0.55);font-style:normal;margin-left:auto;letter-spacing:0.04em}
.mock-code-body{padding:2.5rem .75rem 3rem;font-family:var(--font-mono)}
.mock-code-line{display:flex;align-items:center;gap:.4rem;padding:.45rem 0;min-height:26px}
.mock-code-num{font-size:max(var(--font-min),.55rem);color:rgba(255,255,255,0.28);min-width:1.6rem;text-align:right;padding-right:.4rem;font-weight:500}
.mock-code-indent{width:14px;flex-shrink:0}
.mock-code-tok{display:block;height:8px;border-radius:2.5px;opacity:.85}
.mock-code-tok--kw{background:#C4B5FD;width:42px}
.mock-code-tok--id{background:rgba(255,255,255,0.72);width:54px}
.mock-code-tok--str{background:#86EFAC;width:70px}
.mock-code-tok--fn{background:#93C5FD;width:60px}
.mock-code-tok--tag{background:#FCA5A5;width:38px}
.mock-code-tok--attr{background:#FCD34D;width:32px}
.mock-code-caret{display:inline-block;width:1.5px;height:12px;background:#86EFAC;margin-left:2px}
/* mock-blocks (WordPress — Gutenberg editor) */
.mock-blocks{width:100%;max-width:380px;background:#ff8e80;border:1px solid #ff8e80;border-radius:14px;padding:1.15rem;min-height:285px;box-sizing:border-box;display:flex;flex-direction:column;gap:.55rem;box-shadow:0 24px 48px -20px rgba(0,0,0,0.35)}
.mock-blocks-bar{display:flex;align-items:center;gap:.45rem;padding:.5rem .75rem;background:rgba(255,255,255,0.18);border-radius:8px;margin-bottom:.1rem}
.mock-blocks-icon{width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,0.85)}
.mock-blocks-divider{width:1px;height:14px;background:rgba(255,255,255,0.4);margin:0 .1rem}
.mock-block{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;background:rgba(255,255,255,0.25);border:1px solid rgba(255,255,255,0.35);border-radius:6px}
.mock-block-tag{font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);font-weight:700;color:#ff8e80;background:#fff;padding:.18rem .4rem;border-radius:3px;letter-spacing:0.04em;flex-shrink:0}
.mock-block-content{flex:1;height:14px;background:rgba(255,255,255,0.85);border-radius:3px}
.mock-block-lines{flex:1;display:flex;flex-direction:column;gap:.3rem}
.mock-block-lines span{height:6px;background:rgba(255,255,255,0.65);border-radius:2px}
.mock-block-lines span:nth-child(3){width:70%;background:rgba(255,255,255,0.4)}
.mock-block--3{gap:.5rem}
.mock-block-col{flex:1;display:flex;flex-direction:column;gap:.3rem;padding:.5rem;background:rgba(255,255,255,0.15);border-radius:4px}
.mock-block-col span{height:5px;background:rgba(255,255,255,0.7);border-radius:2px}
.mock-block-col span:nth-child(2){width:60%;background:rgba(255,255,255,0.45)}
.mock-block--add{justify-content:center;padding:.5rem;background:transparent;border:1.5px dashed rgba(255,255,255,0.55);color:#fff;font-family:var(--font-mono);font-size:max(var(--font-min),.65rem);font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
/* mock-rev (Shopify — revenue dashboard) */
.mock-rev{width:100%;max-width:400px;background:#00eac1;border:1px solid #00eac1;border-radius:14px;padding:1.25rem 1.25rem 1.1rem;min-height:285px;box-sizing:border-box;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 24px 48px -20px rgba(0,0,0,0.3)}
.mock-rev-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.mock-rev-label{font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);letter-spacing:0.12em;text-transform:uppercase;color:#053d33;opacity:.7;font-weight:600;margin-bottom:.3rem}
.mock-rev-value{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:#053d33;letter-spacing:-0.025em;line-height:1}
.mock-rev-trend{font-family:var(--font-display);font-size:.72rem;font-weight:700;color:#053d33;padding:.3rem .6rem;background:rgba(255,255,255,0.55);border-radius:999px;align-self:flex-start;white-space:nowrap}
.mock-rev-chart-wrap{position:relative;margin:.3rem 0 .15rem}
.mock-rev-chart{width:100%;height:58px;display:block;color:#053d33;overflow:hidden}
.mock-rev-area{fill:currentColor;opacity:.16}
.mock-rev-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mock-rev-dot{position:absolute;left:98%;top:12%;width:11px;height:11px;border-radius:50%;background:#053d33;border:2px solid #00eac1;transform:translate(-50%,-50%);z-index:1;box-shadow:0 0 0 0 rgba(5,61,51,0.5)}
.mock-rev-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding-top:.75rem;border-top:1px solid rgba(5,61,51,0.18)}
.mock-rev-kpi{display:flex;flex-direction:column;gap:.3rem}
.mock-rev-kpi-label{font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);letter-spacing:0.1em;text-transform:uppercase;color:#053d33;opacity:.6;font-weight:600}
.mock-rev-kpi-row{display:flex;align-items:baseline;gap:.35rem}
.mock-rev-kpi-val{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:#053d33;letter-spacing:-0.02em;line-height:1}
.mock-rev-kpi-delta{font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);font-weight:700;color:#053d33;background:rgba(255,255,255,0.55);padding:.12rem .35rem;border-radius:3px}
.mock-rev-tabs{display:flex;gap:.3rem;margin-top:auto;padding-top:.6rem;border-top:1px solid rgba(5,61,51,0.15)}
.mock-rev-tab{font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);font-weight:700;letter-spacing:0.06em;padding:.35rem .65rem;border-radius:4px;color:#053d33;opacity:.55;text-transform:uppercase;flex:1;text-align:center}
.mock-rev-tab.is-active{background:#053d33;color:#00eac1;opacity:1}
/* mock-design (UI/UX — design tool canvas) */
.mock-design{width:100%;max-width:380px;background:#037077;border:1px solid #037077;border-radius:12px;overflow:hidden;box-shadow:0 24px 48px -20px rgba(0,0,0,0.4);min-height:285px;box-sizing:border-box;display:flex;flex-direction:column}
.mock-design-toolbar{display:flex;align-items:center;gap:.45rem;padding:.55rem .85rem;background:rgba(0,0,0,0.25);border-bottom:1px solid rgba(255,255,255,0.06)}
.mock-design-tool{width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,0.25)}
.mock-design-tool.is-active{background:#8FDBE0;box-shadow:0 0 0 2px rgba(143,219,224,0.35)}
.mock-design-sep{width:1px;height:14px;background:rgba(255,255,255,0.12);margin:0 .15rem}
.mock-design-body{flex:1;display:grid;grid-template-columns:100px 1fr;min-height:0}
.mock-design-layers{background:rgba(0,0,0,0.18);padding:.7rem .5rem;display:flex;flex-direction:column;gap:.25rem;border-right:1px solid rgba(255,255,255,0.06)}
.mock-design-layer{display:flex;align-items:center;gap:.35rem;padding:.25rem .4rem;border-radius:3px;font-family:var(--font-mono);font-size:max(var(--font-min),.55rem);color:rgba(255,255,255,0.55);letter-spacing:0.02em}
.mock-design-layer span{width:7px;height:7px;border-radius:1.5px;background:rgba(255,255,255,0.3);flex-shrink:0}
.mock-design-layer em{font-style:normal;font-weight:500}
.mock-design-layer--sub{padding-left:.9rem}
.mock-design-layer.is-active{background:rgba(143,219,224,0.2);color:#c9fff7}
.mock-design-layer.is-active span{background:#8FDBE0}
.mock-design-canvas{padding:.85rem;display:flex;align-items:stretch;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.04),transparent 70%);min-height:0}
.mock-design-frame{position:relative;width:100%;background:rgba(255,255,255,0.04);border:1px dashed rgba(255,255,255,0.22);border-radius:4px;padding:.55rem;display:flex;flex-direction:column;gap:.45rem}
.mock-design-node{border-radius:3px}
.mock-design-node--1{height:9px;background:rgba(255,255,255,0.35);width:70%}
.mock-design-node--2{flex:1;min-height:55px;background:linear-gradient(135deg,#00eac1,#8FDBE0);position:relative;border-radius:4px;display:flex;align-items:center;justify-content:center}
.mock-design-icon{width:30px;height:30px;color:rgba(255,255,255,0.9);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15))}
.mock-design-node--3{display:flex;gap:.35rem}
.mock-design-chip{flex:1;height:18px;background:rgba(255,255,255,0.22);border-radius:2px}
.mock-design-handles{position:absolute;inset:-4px;pointer-events:none}
.mock-design-handles span{position:absolute;width:7px;height:7px;background:#037077;border:1.5px solid #8FDBE0;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,0.15)}
.mock-design-handles span:nth-child(1){top:0;left:0}
.mock-design-handles span:nth-child(2){top:0;right:0}
.mock-design-handles span:nth-child(3){bottom:0;left:0}
.mock-design-handles span:nth-child(4){bottom:0;right:0}
/* mock-orders (WooCommerce — live orders feed) */
.mock-orders{width:100%;max-width:380px;background:#ff8637;border:1px solid #ff8637;border-radius:14px;padding:1.2rem 1.1rem;min-height:285px;box-sizing:border-box;display:flex;flex-direction:column;gap:.65rem;box-shadow:0 24px 48px -20px rgba(0,0,0,0.35)}
.mock-orders-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 .15rem .35rem}
.mock-orders-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:#fff;letter-spacing:-0.01em;line-height:1.1}
.mock-orders-sub{font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);color:rgba(255,255,255,0.7);letter-spacing:0.08em;text-transform:uppercase;margin-top:.25rem;font-weight:600;display:flex;align-items:center;gap:.35rem}
.mock-orders-sub::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,0.5);animation:mock-live-dot 1.8s ease-out infinite}
.mock-orders-pill{font-family:var(--font-mono);font-size:max(var(--font-min),.6rem);padding:.3rem .6rem;background:#fff;color:#ff8637;border-radius:999px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap}
.mock-orders-list{display:flex;flex-direction:column;gap:.45rem}
.mock-order{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .85rem;background:#fff;border-radius:7px;box-shadow:0 4px 10px -4px rgba(0,0,0,0.18)}
.mock-order-meta{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:0}
.mock-order-num{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:#2d1810;letter-spacing:0.02em}
.mock-order-bar{height:5px;width:60%;background:#2d1810;opacity:.25;border-radius:2px;display:block}
.mock-order-side{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.mock-order-amount{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:#2d1810}
.mock-order-status{font-family:var(--font-mono);font-size:max(var(--font-min),.52rem);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:.22rem .45rem;border-radius:3px;white-space:nowrap}
.mock-order-status--new{background:rgba(34,197,94,0.18);color:#0f7c40}
.mock-order-status--paid{background:rgba(37,99,235,0.18);color:#1e47a8}
.mock-order-status--shipped{background:rgba(168,6,127,0.15);color:#8b0569}
.mock-orders-foot{display:flex;align-items:center;justify-content:space-between;padding:.65rem .85rem .15rem;margin-top:auto}
.mock-orders-foot-label{font-family:var(--font-mono);font-size:max(var(--font-min),.6rem);letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.75);font-weight:700}
.mock-orders-foot-val{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-0.02em}
/* Ambient build-sequence animations */
@media (prefers-reduced-motion: no-preference) {
/* Card 1 — Code editor typing sequence */
.mock-code-caret{animation:mock-caret 1s steps(2) infinite}
.mock-code-line:nth-child(1){animation:mock-code-in 5s ease-out infinite}
.mock-code-line:nth-child(2){animation:mock-code-in 5s ease-out infinite;animation-delay:.1s}
.mock-code-line:nth-child(3){animation:mock-code-in 5s ease-out infinite;animation-delay:.2s}
.mock-code-line:nth-child(4){animation:mock-code-in 5s ease-out infinite;animation-delay:.3s}
.mock-code-line:nth-child(5){animation:mock-code-in 5s ease-out infinite;animation-delay:.4s}
.mock-code-line:nth-child(6){animation:mock-code-in 5s ease-out infinite;animation-delay:.5s}
/* Card 2 — Block editor composing */
.mock-block--1{animation:mock-block-in 5s ease-out infinite;animation-delay:.15s}
.mock-block--2{animation:mock-block-in 5s ease-out infinite;animation-delay:.35s}
.mock-block--3{animation:mock-block-in 5s ease-out infinite;animation-delay:.55s}
.mock-block--add{animation:mock-block-in 5s ease-out infinite;animation-delay:.75s}
/* Card 4 — Shopify revenue dashboard */
.mock-rev{animation:mock-float 6s ease-in-out infinite}
.mock-rev-line{stroke-dasharray:420;stroke-dashoffset:420;animation:mock-draw 5s ease-out infinite}
.mock-rev-area{animation:mock-fade-area 5s ease-out infinite}
.mock-rev-dot{animation:mock-dot-pulse 2s ease-out infinite}
.mock-rev-trend{animation:mock-pop 5s ease-out infinite;animation-delay:1.6s;transform-origin:center}
.mock-rev-kpis > .mock-rev-kpi:nth-child(1){animation:mock-fade-up 5s ease-out infinite;animation-delay:1.4s}
.mock-rev-kpis > .mock-rev-kpi:nth-child(2){animation:mock-fade-up 5s ease-out infinite;animation-delay:1.55s}
.mock-rev-kpis > .mock-rev-kpi:nth-child(3){animation:mock-fade-up 5s ease-out infinite;animation-delay:1.7s}
/* Card 3 — Live orders feed */
.mock-orders > .mock-orders-list > .mock-order:nth-child(1){animation:mock-order-in 5s ease-out infinite;animation-delay:.15s}
.mock-orders > .mock-orders-list > .mock-order:nth-child(2){animation:mock-order-in 5s ease-out infinite;animation-delay:.35s}
.mock-orders > .mock-orders-list > .mock-order:nth-child(3){animation:mock-order-in 5s ease-out infinite;animation-delay:.55s}
.mock-orders-pill{animation:mock-pop 5s ease-out infinite;animation-delay:.75s;transform-origin:center}
.mock-orders-foot-val{animation:mock-fade-up 5s ease-out infinite;animation-delay:1s}
/* Card 5 — Design tool canvas */
.mock-design-tool.is-active{animation:mock-tool-pulse 2.5s ease-in-out infinite}
.mock-design-layers > .mock-design-layer:nth-child(1){animation:mock-layer-in 5s ease-out infinite;animation-delay:.1s}
.mock-design-layers > .mock-design-layer:nth-child(2){animation:mock-layer-in 5s ease-out infinite;animation-delay:.2s}
.mock-design-layers > .mock-design-layer:nth-child(3){animation:mock-layer-in 5s ease-out infinite;animation-delay:.3s}
.mock-design-layers > .mock-design-layer:nth-child(4){animation:mock-layer-in 5s ease-out infinite;animation-delay:.4s}
.mock-design-layers > .mock-design-layer:nth-child(5){animation:mock-layer-in 5s ease-out infinite;animation-delay:.5s}
.mock-design-node--1{animation:mock-node-in 5s ease-out infinite;animation-delay:.3s;transform-origin:left}
.mock-design-node--2{animation:mock-node-in 5s ease-out infinite;animation-delay:.5s;transform-origin:center}
.mock-design-node--3{animation:mock-node-in 5s ease-out infinite;animation-delay:.7s;transform-origin:bottom}
.mock-design-handles > span{animation:mock-handle-pulse 2s ease-in-out infinite}
.mock-design-handles > span:nth-child(2){animation-delay:.1s}
.mock-design-handles > span:nth-child(3){animation-delay:.2s}
.mock-design-handles > span:nth-child(4){animation-delay:.3s}
}
@keyframes mock-caret{0%,50%{opacity:.85}50.01%,100%{opacity:0}}
@keyframes mock-code-in{0%,8%{transform:translateY(-3px);opacity:0}22%,92%{transform:translateY(0);opacity:1}100%{transform:translateY(-3px);opacity:0}}
@keyframes mock-block-in{0%,8%{transform:translateY(-8px) scale(.96);opacity:0}22%,92%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-8px) scale(.96);opacity:0}}
@keyframes mock-tool-pulse{0%,100%{box-shadow:0 0 0 2px rgba(143,219,224,0.35)}50%{box-shadow:0 0 0 4px rgba(143,219,224,0.55)}}
@keyframes mock-layer-in{0%,10%{transform:translateX(-6px);opacity:0}28%,92%{transform:translateX(0);opacity:1}100%{transform:translateX(-6px);opacity:0}}
@keyframes mock-node-in{0%,8%{transform:scale(.9);opacity:0}24%,92%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:0}}
@keyframes mock-handle-pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.25);opacity:1}}
@keyframes mock-order-in{0%,8%{transform:translateX(-12px);opacity:0}22%,92%{transform:translateX(0);opacity:1}100%{transform:translateX(-12px);opacity:0}}
@keyframes mock-live-dot{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.6)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes mock-hero-shift{0%,100%{background:linear-gradient(135deg,#00eac1 0%,#8FDBE0 45%,#ff8e80 100%)}50%{background:linear-gradient(135deg,#8FDBE0 0%,#ffc112 50%,#ff8e80 100%)}}
@keyframes mock-glow-store{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(5,61,51,0)}50%{transform:scale(1.04);box-shadow:0 0 0 4px rgba(5,61,51,0.18)}}
@keyframes mock-bag-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 1.5px #fff,0 0 0 1.5px rgba(255,134,55,0)}50%{transform:scale(1.2);box-shadow:0 0 0 1.5px #fff,0 0 0 4px rgba(255,134,55,0.35)}}
@keyframes mock-card-in{0%,8%{transform:translateY(10px) scale(.95);opacity:0}24%,92%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(10px) scale(.95);opacity:0}}
@keyframes mock-theme-in{0%,8%{transform:translateY(10px) scale(.92);opacity:0}24%,92%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(10px) scale(.92);opacity:0}}
@keyframes mock-dot-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(5,61,51,0.45)}50%{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 6px rgba(5,61,51,0)}}
@keyframes mock-fade-down{0%,12%{transform:translateY(-6px);opacity:0}28%,92%{transform:translateY(0);opacity:1}100%{transform:translateY(-6px);opacity:0}}
@keyframes mock-width{0%,12%{transform:scaleX(.2);opacity:0}30%,90%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(.2);opacity:0}}
@keyframes mock-fade-in{0%,20%{opacity:0}40%,90%{opacity:.15}100%{opacity:0}}
@keyframes mock-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mock-drop{0%,8%{transform:translateY(-26px);opacity:0}28%,92%{transform:translateY(0);opacity:1}100%{transform:translateY(-26px);opacity:0}}
@keyframes mock-slide-right{0%,8%{transform:translateX(-18px);opacity:0}28%,92%{transform:translateX(0);opacity:1}100%{transform:translateX(-18px);opacity:0}}
@keyframes mock-pop{0%,15%{transform:scale(.6);opacity:0}35%,92%{transform:scale(1);opacity:1}100%{transform:scale(.6);opacity:0}}
@keyframes mock-draw{0%,8%{stroke-dashoffset:420}72%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
@keyframes mock-fade-area{0%,10%{opacity:0}50%,90%{opacity:.1}100%{opacity:0}}
@keyframes mock-fade-up{0%,20%{transform:translateY(8px);opacity:0}40%,90%{transform:translateY(0);opacity:1}100%{transform:translateY(8px);opacity:0}}
@keyframes mock-glow{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(168,6,127,0)}50%{transform:scale(1.025);box-shadow:0 0 0 6px rgba(168,6,127,0.18)}}
@keyframes mock-focus{0%,100%{border-color:rgba(255,255,255,0.2);box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{border-color:#A8067F;box-shadow:0 0 0 3px rgba(168,6,127,0.25)}}
@keyframes mock-swatch-1{0%,100%{background:#A8067F}50%{background:#7B0559}}
@keyframes mock-swatch-2{0%,100%{background:#C5C2FB}50%{background:#A8A3F0}}
@keyframes mock-swatch-3{0%,100%{background:#FFDC7B}50%{background:#FFCA45}}
@keyframes mock-swatch-4{0%,100%{background:#ff8e80}50%{background:#ff6c5e}}
/* PROJECTS GRID */
#work,#why,#faq{scroll-margin-top:clamp(5rem,12vh,7rem)}
.work{background:var(--bg);padding:7rem 3.5rem 9rem}
.work-intro{max-width:1440px;margin:0 auto 4rem;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.work-intro-left .section-label{margin-bottom:1rem}
.work-title{font-family:var(--font-display);font-size:48px;font-weight:700;line-height:1.05;letter-spacing:-0.025em;margin:0;color:var(--text)}
.work-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;letter-spacing:-0.01em;color:inherit}
.work .section-display-title.work__heading{line-height:1.05;letter-spacing:-0.025em;color:var(--text)}
.work .section-display-title.work__heading em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;letter-spacing:-0.01em;color:inherit}
.work-all-btn{flex-shrink:0}
.work-grid{
max-width:1440px;margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(3,1fr);
gap:1.75rem 1.5rem;align-items:stretch;
}
.work-item{
display:flex;flex-direction:column;gap:1rem;height:100%;min-height:0;
text-decoration:none;color:inherit;cursor:pointer;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.work-item:nth-child(7n+2),.work-item:nth-child(7n+6){grid-column:span 2}
.work-item-media{
border-radius:18px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;
flex:0 0 auto;width:100%;aspect-ratio:4/3;
contain:layout style paint;isolation:isolate;transition:transform .5s var(--ease);
}
.work-item:nth-child(7n+2) .work-item-media,
.work-item:nth-child(7n+6) .work-item-media{aspect-ratio:2/1}
/* Narrow card beside a 2-col tile: stretch media to the row height set by the wide card */
.work-item:nth-child(7n+1) .work-item-media,
.work-item:nth-child(7n) .work-item-media{
flex:1 1 0;min-height:0;aspect-ratio:unset;height:auto;
}
@media(hover:hover) and (pointer:fine){
.work-item:hover .work-item-media{transform:translateY(-4px)}
}
.work-item-media--1{background:linear-gradient(135deg,#2a1e14 0%,#a85a1f 100%)}
.work-item-media--2{background:linear-gradient(135deg,#1a2e3a 0%,#e89f6b 100%)}
.work-item-media--3{background:linear-gradient(135deg,#c9e8a8 0%,#3a5a3a 100%)}
.work-item-media--4{background:linear-gradient(135deg,#c8ff2f 0%,#7a9e1a 100%)}
.work-item-media--5{background:linear-gradient(135deg,#2a1e4a 0%,#7a5ac9 100%)}
.work-item-media--6{background:linear-gradient(135deg,#1a1a2e 0%,#c9a86b 100%)}
.work-item-media--7{background:linear-gradient(135deg,#4a1e3a 0%,#e86b8e 100%)}
.work-item-media--8{background:linear-gradient(135deg,#1e3a5f 0%,#4a90d9 100%)}
.work-item-media--9{background:linear-gradient(135deg,#2d1b4e 0%,#9b59b6 100%)}
.work-item-media--10{background:linear-gradient(135deg,#1a4a3a 0%,#2ecc71 100%)}
.work-item-media--11{background:linear-gradient(135deg,#4a2c1a 0%,#e67e22 100%)}
.work-item-media--12{background:linear-gradient(135deg,#3d2b1f 0%,#f39c12 100%)}
.work-item-media--13{background:linear-gradient(135deg,#2c3e50 0%,#3498db 100%)}
.work-item-media--14{background:linear-gradient(135deg,#4a1942 0%,#c0392b 100%)}
.work-item-media--15{background:linear-gradient(135deg,#1a3c40 0%,#16a085 100%)}
.work-item-media--16{background:linear-gradient(135deg,#2e1a1a 0%,#e74c3c 100%)}
.work-item-media--17{background:linear-gradient(135deg,#1a2a4a 0%,#35a5ef 100%)}
.work-item-media--18{background:linear-gradient(135deg,#3a1a4a 0%,#9c30c1 100%)}
.work-item-media--19{background:linear-gradient(135deg,#1e2a1e 0%,#27ae60 100%)}
.work-item-media--20{background:linear-gradient(135deg,#4a3a1a 0%,#f1c40f 100%)}
.work-item-media--21{background:linear-gradient(135deg,#2a2a4a 0%,#8e44ad 100%)}
.work-item-media picture{
position:absolute;inset:0;display:block;width:100%;height:100%;
}
.work-item-media img,
.work-item-media picture img{
position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;transition:transform .6s var(--ease)
}
@media(hover:hover) and (pointer:fine){
.work-item:hover .work-item-media img{transform:scale(1.04)}
}
.work-item-placeholder{
font-family:var(--font-display);font-size:2.25rem;font-weight:700;color:rgba(255,255,255,0.9);
letter-spacing:-0.02em;text-align:center;padding:0 1.5rem;transition:opacity .4s var(--ease);
}
@media(hover:hover) and (pointer:fine){
.work-item:hover .work-item-placeholder{opacity:0}
}
.work-item-overlay{
position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:2rem;
background:linear-gradient(180deg,rgba(14,11,18,0.72) 0%,rgba(14,11,18,0.42) 55%,rgba(14,11,18,0.28) 100%);
opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
.work-item:hover .work-item-overlay{opacity:1}
}
.work-item-desc{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.25;letter-spacing:-0.015em;color:#fff;margin:0;max-width:32ch}
@media(max-width:1080px){
.work-item-desc{font-size:1.2rem;line-height:1.3;max-width:28ch}
.work-item-overlay{padding:1.65rem}
.work-item-view{font-size:.875rem;padding:.55rem .95rem}
}
.work-item-view{align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-size:.95rem;font-weight:600;color:#fff;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);backdrop-filter:blur(8px);padding:.65rem 1.1rem;border-radius:999px;letter-spacing:-0.005em}
.work-item-view svg{width:14px;height:auto}
.work-item-foot{
flex:0 0 auto;margin-top:auto;display:flex;align-items:center;justify-content:space-between;
gap:1rem;padding:0 .25rem;
}
.work-item-name{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text);letter-spacing:-0.01em}
.work-item-cat{font-family:var(--font-mono);font-size:16px;color:var(--text-muted);letter-spacing:0.04em}
/* AI WORKFLOW */
.aiflow{--violet-1:#930477;--violet-2:#E78BD5;--violet-glow:#C41F9E;--aiflow-card-bg:#0F0812;background:#06040A;color:#fff;padding:7rem 3.5rem 9rem;position:relative;overflow:hidden}
.aiflow::before{content:'';position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse at center,rgba(147,4,119,0.2) 0%,rgba(147,4,119,0.05) 40%,transparent 70%);pointer-events:none}
.aiflow-header{max-width:760px;margin:0 auto 5.5rem;text-align:center;position:relative;z-index:2}
.aiflow-pill{display:inline-block;font-family:var(--font-mono);font-size:max(var(--font-min),.65rem);font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:#d772c2;border:1px solid #d772c2;padding:.4rem 1rem;border-radius:999px;margin-bottom:1.75rem;background:rgba(215,114,194,0.08)}
.aiflow-title{font-family:var(--font-display);font-size:48px;font-weight:700;line-height:1.05;letter-spacing:-0.025em;margin:0 0 1.25rem;color:#fff}
.aiflow-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;letter-spacing:-0.01em;color:inherit}
.aiflow-sub{font-family:var(--font-mono);font-size:1rem;line-height:1.6;color:rgba(255,255,255,0.55);margin:0 auto;max-width:620px;letter-spacing:0.01em}
.aiflow-wrap{max-width:1440px;margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 300px auto;gap:0 2rem;position:relative}
.aiflow-wrap > .aiflow-card--1{grid-column:1;grid-row:1}
.aiflow-wrap > .aiflow-card--2{grid-column:2;grid-row:1}
.aiflow-wrap > .aiflow-card--3{grid-column:3;grid-row:1}
.aiflow-wrap > .aiflow-card--4{grid-column:1;grid-row:3}
.aiflow-wrap > .aiflow-card--5{grid-column:2;grid-row:3}
.aiflow-wrap > .aiflow-card--6{grid-column:3;grid-row:3}
@property --aiflow-border-angle{syntax:'';initial-value:160deg;inherits:false}
.aiflow-card{position:relative;border-radius:22px;padding:1px;background:linear-gradient(var(--aiflow-border-angle),rgba(147,4,119,0.7) 0%,rgba(147,4,119,0) 41%,rgba(147,4,119,0) 71%,rgba(147,4,119,1) 100%);min-height:380px;animation:aiflow-border 8s linear infinite}
.aiflow-card--2{animation-delay:-1.3s}
.aiflow-card--3{animation-delay:-2.7s}
.aiflow-card--4{animation-delay:-4s}
.aiflow-card--5{animation-delay:-5.3s}
.aiflow-card--6{animation-delay:-6.7s}
@keyframes aiflow-border{to{--aiflow-border-angle:520deg}}
@media(prefers-reduced-motion:reduce){.aiflow-card{animation:none}}
.aiflow-inner{position:relative;z-index:1;height:100%;background:var(--aiflow-card-bg);border-radius:21px;padding:1.75rem 1.75rem 0;display:flex;flex-direction:column;overflow:hidden}
.aiflow-card-title{font-family:var(--font-display);font-size:23px;font-weight:700;line-height:1.25;letter-spacing:-0.015em;color:#fff;margin:0 0 .65rem}
.aiflow-card-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500}
.aiflow-card-desc{font-family:var(--font-mono);font-size:16px;line-height:1.55;color:rgba(255,255,255,0.55);margin:0 0 1.5rem;letter-spacing:0.01em}
.aiflow-viz{margin-top:auto;background:rgba(147,4,119,0.06);border:1px solid rgba(147,4,119,0.18);border-radius:14px;padding:1.1rem;display:flex;flex-direction:column;gap:.65rem;margin-bottom:-1px;height:180px;box-sizing:border-box}
.aiflow-card--1 .aiflow-viz{justify-content:space-between}
.aiflow-card--1 .aiflow-viz > *{flex-shrink:0}
/* SVG connector paths — positioned outside card, terminate at hub core edge */
.aiflow-path{position:absolute;pointer-events:none;z-index:1}
.aiflow-card--1 .aiflow-path{top:100%;left:50%;width:calc(100% + 2rem - 48px);height:150px}
.aiflow-card--2 .aiflow-path{top:100%;left:50%;transform:translateX(-50%);width:2px;height:102px}
.aiflow-card--3 .aiflow-path{top:100%;right:50%;width:calc(100% + 2rem - 48px);height:150px;transform:scaleX(-1)}
.aiflow-card--4 .aiflow-path{bottom:100%;left:50%;width:calc(100% + 2rem - 48px);height:150px;transform:scaleY(-1)}
.aiflow-card--5 .aiflow-path{bottom:100%;left:50%;transform:translateX(-50%);width:2px;height:102px}
.aiflow-card--6 .aiflow-path{bottom:100%;right:50%;width:calc(100% + 2rem - 48px);height:150px;transform:scale(-1,-1)}
.aiflow-path svg{width:100%;height:100%;display:block}
/* chips (card 1) */
.aiflow-chips{display:flex;gap:.5rem;margin-bottom:.25rem;justify-content:center}
.aiflow-chip{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(147,4,119,0.18),rgba(147,4,119,0.04));border:1px solid rgba(147,4,119,0.3);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.85);transition:border-color .25s var(--ease),background .25s var(--ease)}
.aiflow-chip:hover{border-color:rgba(231,139,213,0.55);background:linear-gradient(135deg,rgba(147,4,119,0.3),rgba(147,4,119,0.08));color:#fff}
.aiflow-chip svg{width:20px;height:20px}
.aiflow-chip-logo{width:22px;height:22px;object-fit:contain;display:block}
.aiflow-input{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:.6rem .8rem;font-family:var(--font-mono);font-size:.72rem;color:rgba(255,255,255,0.35);min-height:32px}
.aiflow-input--short{min-height:40px;background:rgba(255,255,255,0.02)}
.aiflow-btn{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:.45rem;background:linear-gradient(135deg,var(--violet-1) 0%,var(--violet-2) 100%);color:#fff;font-family:var(--font-display);font-size:.9rem;font-weight:600;padding:.7rem 1.1rem;border-radius:8px;box-shadow:0 8px 20px -8px rgba(147,4,119,0.6)}
.aiflow-btn svg{width:14px;height:14px}
/* mini UI mockup (card 2) */
.aiflow-ui{flex:1 1 auto;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:.65rem;display:flex;flex-direction:column;gap:.5rem}
.aiflow-ui-bar{display:flex;align-items:center;gap:.3rem;padding-bottom:.45rem;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0}
.aiflow-ui-bar span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.18)}
.aiflow-ui-bar span:nth-child(1){background:rgba(231,139,213,0.6)}
.aiflow-ui-bar i{flex:1;height:5px;background:rgba(255,255,255,0.06);border-radius:3px;margin-left:.4rem}
.aiflow-ui-hero{flex:1 1 auto;min-height:48px;background:linear-gradient(135deg,rgba(147,4,119,0.35) 0%,rgba(147,4,119,0.08) 100%);border-radius:5px;position:relative;overflow:hidden}
.aiflow-ui-hero::after{content:'';position:absolute;top:50%;left:.6rem;transform:translateY(-50%);width:32%;height:5px;background:rgba(255,255,255,0.35);border-radius:2px;box-shadow:0 10px 0 rgba(255,255,255,0.18)}
.aiflow-ui-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;flex-shrink:0}
.aiflow-ui-grid span{height:26px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.04);border-radius:4px}
/* conversion chart (card 3) */
.aiflow-chart{flex:1 1 auto;display:flex;flex-direction:column;gap:.9rem}
.aiflow-chart-head{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-size:.85rem;color:rgba(255,255,255,0.85);font-weight:500;flex-shrink:0}
.aiflow-eye{width:26px;height:26px;border-radius:8px;background:rgba(147,4,119,0.22);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.aiflow-eye svg{width:14px;height:14px}
.aiflow-chart-badge{margin-left:auto;font-family:var(--font-mono);font-size:max(var(--font-min),.65rem);color:#E78BD5;background:rgba(231,139,213,0.14);border:1px solid rgba(231,139,213,0.3);padding:.2rem .5rem;border-radius:999px;letter-spacing:.04em}
.aiflow-bars{flex:1 1 auto;display:flex;align-items:flex-end;gap:.4rem;min-height:80px}
.aiflow-bars span{flex:1;background:linear-gradient(180deg,var(--violet-2) 0%,var(--violet-1) 100%);border-radius:4px 4px 0 0;min-height:8px}
/* wireframe skeleton (card 4) */
.aiflow-wf{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:.5rem}
.aiflow-wf-row{display:flex;gap:.4rem}
.aiflow-wf-block{flex:1;height:18px;background:rgba(255,255,255,0.04);border:1px dashed rgba(231,139,213,0.3);border-radius:4px}
.aiflow-wf-block--wide{flex:3;height:28px}
.aiflow-wf-block--med{flex:2}
.aiflow-wf-block--narrow{flex:1}
.aiflow-wf-meta{display:flex;justify-content:flex-end}
.aiflow-wf-timer{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.72rem;color:#fff;background:rgba(147,4,119,0.22);border:1px solid rgba(147,4,119,0.4);padding:.35rem .75rem;border-radius:999px;letter-spacing:.03em}
.aiflow-wf-timer svg{width:13px;height:13px}
/* KPI stats + launch progress (card 5) */
.aiflow-kpis{flex:1 1 auto;display:flex;align-items:center;justify-content:space-around;gap:.5rem}
.aiflow-kpi{display:flex;align-items:center;gap:.75rem}
.aiflow-kpi-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(147,4,119,0.45),rgba(147,4,119,0.1));border:1px solid rgba(231,139,213,0.35);display:inline-flex;align-items:center;justify-content:center;color:#F6A6FF;flex-shrink:0;box-shadow:inset 0 0 12px rgba(147,4,119,0.2)}
.aiflow-kpi-icon svg{width:18px;height:18px}
.aiflow-kpi-text{display:flex;flex-direction:column;gap:.15rem}
.aiflow-kpi-value{font-family:var(--font-display);font-size:1.65rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-0.02em}
.aiflow-kpi-value span{font-size:1.15rem;color:#E78BD5;margin-left:1px}
.aiflow-kpi-label{font-family:var(--font-mono);font-size:max(var(--font-min),.6rem);color:rgba(255,255,255,0.55);letter-spacing:.12em;text-transform:uppercase}
.aiflow-kpi-divider{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.14),transparent);margin:.35rem 0}
.aiflow-sprint{display:flex;align-items:center;gap:.7rem;flex-shrink:0;padding-top:.15rem}
.aiflow-sprint-label{font-family:var(--font-mono);font-size:max(var(--font-min),.62rem);color:rgba(255,255,255,0.4);letter-spacing:.04em;white-space:nowrap}
.aiflow-sprint-label--live{color:#E78BD5;font-weight:600}
.aiflow-sprint-track{flex:1;height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:visible;position:relative}
.aiflow-sprint-fill{position:absolute;left:0;top:0;width:85%;height:100%;background:linear-gradient(90deg,var(--violet-1),var(--violet-2));border-radius:3px;box-shadow:0 0 10px rgba(231,139,213,0.55)}
.aiflow-sprint-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#F6A6FF;box-shadow:0 0 10px #E78BD5,0 0 20px rgba(231,139,213,0.6);animation:aiflow-ping 1.8s ease-in-out infinite}
@keyframes aiflow-ping{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.25)}}
/* structured brief (card 6) */
.aiflow-brief{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:.7rem}
.aiflow-brief-card{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:.7rem .75rem;display:flex;flex-direction:column;gap:.55rem}
.aiflow-brief-head{display:flex;align-items:center;gap:.55rem}
.aiflow-brief-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,rgba(147,4,119,0.42),rgba(147,4,119,0.1));border:1px solid rgba(231,139,213,0.3);display:inline-flex;align-items:center;justify-content:center;color:#F6A6FF;flex-shrink:0}
.aiflow-brief-icon svg{width:15px;height:15px}
.aiflow-brief-head-text{flex:1;min-width:0}
.aiflow-brief-title{font-family:var(--font-display);font-size:.85rem;font-weight:600;color:#fff;line-height:1.2}
.aiflow-brief-sub{font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);color:rgba(255,255,255,0.5);letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem}
.aiflow-brief-check{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--violet-1),var(--violet-2));color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 10px rgba(231,139,213,0.5)}
.aiflow-brief-check svg{width:10px;height:10px}
.aiflow-brief-body{display:flex;flex-direction:column;gap:.3rem;padding-left:calc(32px + .55rem)}
.aiflow-brief-line{height:3px;background:rgba(255,255,255,0.08);border-radius:2px;width:100%}
.aiflow-brief-line--med{width:68%}
.aiflow-brief-tags{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.aiflow-tag{font-family:var(--font-mono);font-size:max(var(--font-min),.62rem);color:rgba(255,255,255,0.8);background:rgba(147,4,119,0.18);border:1px solid rgba(147,4,119,0.35);padding:.32rem .65rem;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.35rem}
.aiflow-tag::before{content:'';width:4px;height:4px;border-radius:50%;background:#F6A6FF;box-shadow:0 0 4px #E78BD5}
/* central hub — grid cell 2/2 with rotating conic glow */
.aiflow-hub{grid-column:2;grid-row:2;position:relative;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.aiflow-hub-core{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;z-index:2;animation:aiflow-pulse 4s ease-in-out infinite}
@keyframes aiflow-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.aiflow-hub-core{animation:none}}
.aiflow-hub-core::before{content:'';position:absolute;inset:-56px;border-radius:50%;background:radial-gradient(circle,rgba(196,31,158,0.45) 0%,rgba(147,4,119,0.2) 38%,transparent 70%);z-index:-1}
.aiflow-hub-logo{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(147,4,119,0.5))}
@media(max-width:1024px){
.aiflow-wrap{grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto auto auto;gap:4rem 1.5rem}
.aiflow-wrap > .aiflow-card--1{grid-column:1;grid-row:1}
.aiflow-wrap > .aiflow-card--2{grid-column:2;grid-row:1}
.aiflow-wrap > .aiflow-card--3{grid-column:1;grid-row:2}
.aiflow-wrap > .aiflow-card--4{grid-column:2;grid-row:2}
.aiflow-wrap > .aiflow-card--5{grid-column:1;grid-row:3}
.aiflow-wrap > .aiflow-card--6{grid-column:2;grid-row:3}
.aiflow-hub{display:none}
.aiflow-path{display:none}
}
@media(max-width:640px){
.aiflow{padding:4rem 1.5rem 5rem}
.aiflow-title{font-size:36px}
.aiflow-wrap{grid-template-columns:1fr;gap:1.5rem}
.aiflow-wrap > .aiflow-card--1,
.aiflow-wrap > .aiflow-card--2,
.aiflow-wrap > .aiflow-card--3,
.aiflow-wrap > .aiflow-card--4,
.aiflow-wrap > .aiflow-card--5,
.aiflow-wrap > .aiflow-card--6{grid-column:1!important;grid-row:auto!important}
.aiflow-card{min-height:0}
.aiflow-inner{padding-bottom:1.5rem}
.aiflow-viz{margin-bottom:0}
}
@media(max-width:768px){
.work{padding:4rem 1.5rem 5rem}
.work-intro{flex-direction:column;align-items:flex-start;margin-bottom:2.5rem}
.work-title{font-size:36px}
.work-grid{grid-template-columns:1fr;gap:1.25rem}
.work-item-desc{font-size:1.15rem}
.work-item-overlay{padding:1.5rem}
}
/* ABOUT — Services we provide */
.about-provide{
position:relative;
overflow:hidden;
background:#fbfbfb;
padding:clamp(4.5rem,10vw,7.5rem) 3.5rem clamp(4rem,9vw,6.5rem);
scroll-margin-top:clamp(5rem,12vh,7rem);
border-bottom:1px solid var(--border);
}
.about-provide-watermark{
position:absolute;
top:clamp(2.25rem,7vw,3.85rem);
left:50%;
--about-wm-shift:0px;
transform:translateX(calc(-50% + var(--about-wm-shift)));
z-index:0;
pointer-events:none;
user-select:none;
font-family:var(--font-display);
font-weight:800;
font-size:clamp(2.7rem,11.5vw,7.65rem);
letter-spacing:-.045em;
line-height:.92;
color:transparent;
-webkit-text-stroke:1px rgba(26,21,35,.068);
white-space:nowrap;
}
@supports not (-webkit-text-stroke:1px transparent){
.about-provide-watermark{color:rgba(26,21,35,.06);-webkit-text-stroke:0}
}
.about-provide-inner{
position:relative;
z-index:1;
max-width:1440px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,460px);
gap:clamp(2rem,5vw,3.75rem);
align-items:center;
}
.about-provide-intro .section-label{margin-bottom:1.35rem}
.about-provide-title{
font-family:var(--font-display);
font-size:clamp(2rem,3.8vw,2.92rem);
font-weight:700;
line-height:1.06;
letter-spacing:-.03em;
color:var(--text);
margin:0 0 1.25rem;
max-width:19ch;
}
.about-provide-title em{
font-family:'Playfair Display',serif;
font-style:normal;
font-weight:500;
letter-spacing:-.02em;
color:var(--accent);
}
.about-provide-title em.about-provide-title-accent{
font-style:italic;
}
.about-provide-lede{
font-family:var(--font-mono);
font-size:18px;
line-height:1.62;
color:var(--text-muted);
margin:0 0 1.75rem;
max-width:44ch;
letter-spacing:.02em;
}
.about-provide-panel-cta .nav-cta-text{text-transform:capitalize;letter-spacing:.01em}
.about-provide-visual{
margin:0;
position:relative;
z-index:1;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(26,21,35,.09);
}
.about-provide-visual--cube{
border:none;
border-radius:0;
overflow:visible;
max-width:clamp(220px,30vw,300px);
width:100%;
justify-self:end;
perspective:1100px;
perspective-origin:50% 50%;
}
.about-provide-visual--cube img{
display:block;
width:100%;
max-width:100%;
height:auto;
aspect-ratio:516/651;
object-fit:contain;
transform-style:preserve-3d;
backface-visibility:hidden;
}
.about-provide-list-wrap{
position:relative;
z-index:1;
max-width:1440px;
margin:clamp(3rem,6vw,4.85rem) auto 0;
}
.about-provide-item{
--about-idx:clamp(8.85rem,21vw,13rem);
--about-gap:1.5rem;
border-bottom:1px solid rgba(26,21,35,.12);
}
.about-provide-item:first-child{border-top:1px solid rgba(26,21,35,.12)}
.about-provide-q{
display:flex;
align-items:center;
gap:var(--about-gap);
width:100%;
padding:clamp(1.5rem,2.2vw,2rem) 0;
cursor:pointer;
list-style:none;
color:var(--text);
transition:color .25s var(--ease);
}
.about-provide-q::-webkit-details-marker{display:none}
.about-provide-q:hover{color:var(--accent)}
.about-provide-idx{
flex:0 0 var(--about-idx);
min-width:var(--about-idx);
font-family:var(--font-display);
font-size:100px;
font-weight:900;
letter-spacing:-.03em;
color:rgba(26,21,35,.13);
line-height:1;
font-variant-numeric:tabular-nums;
}
.about-provide-name{
flex:1;
min-width:0;
font-family:var(--font-display);
font-size:48px;
font-weight:700;
letter-spacing:-.015em;
line-height:1.1;
}
@media(max-width:1366px){
.about-provide-item{--about-idx:clamp(7.35rem,17.5vw,10.85rem)}
.about-provide-idx{font-size:83px}
.about-provide-name{font-size:40px}
}
.about-provide-toggle{
position:relative;
flex-shrink:0;
width:28px;
height:28px;
}
.about-provide-toggle::before,.about-provide-toggle::after{
content:'';
position:absolute;
background:var(--text);
transition:transform .44s var(--ease),background .28s var(--ease);
}
.about-provide-toggle::before{
top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%);
}
.about-provide-toggle::after{
left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%);
}
.about-provide-item[open] .about-provide-toggle::after{transform:translateX(-50%) scaleY(0)}
.about-provide-q:hover .about-provide-toggle::before,.about-provide-q:hover .about-provide-toggle::after{background:var(--accent)}
.about-provide-panel{
overflow:hidden;
opacity:0;
}
.about-provide-item[open] .about-provide-panel{
opacity:1;
}
.about-provide-panel-inner{
min-height:0;
overflow:hidden;
margin:0 0 clamp(2rem,3.35vw,2.85rem);
padding-left:calc(var(--about-idx) + var(--about-gap));
padding-right:max(4px,min(56px,.9rem));
max-width:none;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,min(480px,40vw));
gap:clamp(1.85rem,4vw,3.35rem);
align-items:stretch;
}
.about-provide-panel-copy{
min-width:0;
max-width:54ch;
padding-top:1rem;
padding-bottom:clamp(1rem,3vw,1.5rem);
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
gap:clamp(1.35rem,3.25vw,2.35rem);
min-height:100%;
}
.about-provide-panel-copy p{font-family:var(--font-mono);font-size:18px;line-height:1.65;color:var(--text-muted);margin:0;letter-spacing:.02em}
.about-provide-panel-cta{align-self:flex-start;margin-top:auto}
.about-provide-panel-copy .wp-block-buttons.about-provide-panel-cta{margin-top:auto}
.about-provide-panel-visual{
margin:0;
justify-self:end;
align-self:center;
width:100%;
max-width:460px;
position:relative;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(26,21,35,.09);
background:linear-gradient(165deg,#fcfbfe,#fbfbfb);
isolation:isolate;
display:flex;
align-items:center;
justify-content:center;
padding:clamp(.5rem,.8vw,.75rem);
box-sizing:border-box;
}
@media(prefers-reduced-motion:reduce){
.about-provide-panel{
display:grid!important;
grid-template-rows:0fr;
opacity:0;
}
.about-provide-item[open] .about-provide-panel{
grid-template-rows:1fr;
opacity:1;
}
}
.about-provide-panel-visual::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(135deg,rgba(147,4,119,.09) 0%,transparent 50%);
}
.about-provide-panel-visual img{
display:block;
width:100%;
height:auto;
max-height:min(560px,58vh);
object-fit:contain;
object-position:center center;
position:relative;
z-index:1;
}
@media(max-width:1024px){
.about-provide-inner{grid-template-columns:1fr;gap:2.75rem}
.about-provide-visual{max-width:560px;margin:0 auto;width:100%}
.about-provide-visual--cube{
justify-self:center;
max-width:clamp(200px,52vw,260px);
}
.about-provide-title{max-width:100%}
.about-provide-watermark{opacity:.75}
}
@media(max-width:920px){
.about-provide-panel-inner{
grid-template-columns:1fr;
gap:1.35rem;
padding-right:0;
}
.about-provide-panel-copy{max-width:100%}
.about-provide-panel-visual{
order:-1;
justify-self:stretch;
max-width:none;
aspect-ratio:auto;
min-height:0;
}
.about-provide-panel-visual img{
width:100%;
height:auto;
max-height:min(480px,65vh);
min-height:0;
object-fit:contain;
object-position:center center;
}
}
@media(max-width:768px){
.about-provide-item{--about-idx:clamp(2.35rem,11vw,3.25rem);--about-gap:1rem}
.about-provide{padding:4rem 1.5rem 4.5rem}
.about-provide-watermark{font-size:2.5rem;top:1.25rem;opacity:.45}
.about-provide-panel-inner{
padding-left:0;
}
.about-provide-panel-visual img{
max-height:min(420px,58vh);
}
.about-provide-q{flex-wrap:wrap;gap:1rem;padding:1.15rem 0}
.about-provide-toggle{width:22px;height:22px}
.about-provide-idx{font-size:clamp(1.5rem,8vw,2.25rem);font-weight:900}
.about-provide-name{font-weight:700}
}
@media(max-width:767px){
.about-provide-name{
font-size:1.8rem;
line-height:1.2;
}
}
@media(max-width:480px){
.about-provide-idx{min-width:auto;flex:0 0 auto}
.about-provide-item{--about-idx:auto;--about-gap:1rem}
.about-provide-q{align-items:flex-start}
}
/* WHY CHOOSE US */
.why{background:var(--bg);padding:7rem 3.5rem 9rem;position:relative}
.why-header{max-width:1440px;margin:0 auto 4rem;width:100%}
.why-title{font-family:var(--font-display);font-size:48px;font-weight:700;line-height:1.05;letter-spacing:-0.025em;margin:0;color:var(--text);max-width:900px}
.why-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;letter-spacing:-0.005em;color:var(--text)}
.why-grid{max-width:1440px;margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}
.why-grid > .why-card--1,.why-grid > .why-card--2,.why-grid > .why-card:nth-child(1),.why-grid > .why-card:nth-child(2){grid-column:span 3}
.why-grid > .why-card--3,.why-grid > .why-card--4,.why-grid > .why-card--5,.why-grid > .why-card:nth-child(3),.why-grid > .why-card:nth-child(4),.why-grid > .why-card:nth-child(5){grid-column:span 2}
.why-card{background:linear-gradient(180deg,rgba(147,4,119,0.04) 0%,rgba(147,4,119,0.01) 100%);border:1px solid rgba(147,4,119,0.12);border-radius:20px;padding:2.25rem 2rem;display:flex;flex-direction:column;gap:1.25rem;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.why-card:hover{border-color:rgba(147,4,119,0.3);transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(147,4,119,0.35)}
.why-icon{width:80px;height:80px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;margin:0}
.why-icon img,.why-icon > *{width:100%;height:100%;max-width:none;max-height:none;display:block;object-fit:contain;transform-origin:center;will-change:transform/*;filter:drop-shadow(0 14px 26px rgba(147,4,119,0.35)) drop-shadow(0 4px 8px rgba(147,4,119,0.2))*/}
.why-grid > .why-card--1 .why-icon img,.why-grid > .why-card--1 .why-icon > *,.why-grid > .why-card:nth-child(1) .why-icon img,.why-grid > .why-card:nth-child(1) .why-icon > *{animation:why-float 4.2s ease-in-out infinite}
.why-grid > .why-card--2 .why-icon img,.why-grid > .why-card--2 .why-icon > *,.why-grid > .why-card:nth-child(2) .why-icon img,.why-grid > .why-card:nth-child(2) .why-icon > *{animation:why-float 4.6s ease-in-out infinite .3s}
.why-grid > .why-card--3 .why-icon img,.why-grid > .why-card--3 .why-icon > *,.why-grid > .why-card:nth-child(3) .why-icon img,.why-grid > .why-card:nth-child(3) .why-icon > *{animation:why-float 4.4s ease-in-out infinite .6s}
.why-grid > .why-card--4 .why-icon img,.why-grid > .why-card--4 .why-icon > *,.why-grid > .why-card:nth-child(4) .why-icon img,.why-grid > .why-card:nth-child(4) .why-icon > *{animation:why-pulse 3.4s ease-in-out infinite}
.why-grid > .why-card--5 .why-icon img,.why-grid > .why-card--5 .why-icon > *,.why-grid > .why-card:nth-child(5) .why-icon img,.why-grid > .why-card:nth-child(5) .why-icon > *{animation:why-float 4.8s ease-in-out infinite 1s}
@keyframes why-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes why-pulse{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.why-icon > *{animation:none!important}}
.why-card-title{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-0.015em;color:var(--text);margin:0}
.why-card-desc{font-family:var(--font-mono);font-size:18px;line-height:1.55;color:var(--text-muted);margin:0;letter-spacing:0.01em}
@media(max-width:900px){
.why{padding:5rem 1.5rem 6rem}
.why-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
.why-grid > .why-card,.why-grid > .why-card--1,.why-grid > .why-card--2,.why-grid > .why-card--3,.why-grid > .why-card--4,.why-grid > .why-card--5{grid-column:span 1!important}
}
@media(max-width:560px){
.why-grid{grid-template-columns:1fr}
}
/* TESTIMONIALS */
.testimonials{--testi-pad-x:3.5rem;--testi-card-basis:clamp(320px,38vw,560px);background:var(--bg2);overflow:hidden}
.testi-header{max-width:1440px;margin:0 auto 3.5rem;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.testi-header-left{display:flex;flex-direction:column;gap:.75rem;min-width:0;flex:1 1 auto}
.testi-header > .wp-block-html.testi-nav{display:contents}
.testi-header-left .section-label{margin:0}
.testi-title{font-family:var(--font-display);font-size:48px;line-height:1.1;letter-spacing:-0.02em;font-weight:700;color:var(--text);margin:0;max-width:18ch}
.testi-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--text);letter-spacing:-0.01em}
.testimonials .section-display-title.testimonials__title{line-height:1.1;letter-spacing:-0.02em;max-width:18ch;color:var(--text)}
.testimonials .section-display-title.testimonials__title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--text);letter-spacing:-0.01em}
.testi-nav{display:flex;gap:.75rem;flex-shrink:0}
.testi-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:#adadad14;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);padding:0;position:relative;isolation:isolate}
.testi-arrow::after{content:'';position:absolute;inset:-1px;border-radius:50%;padding:1px;background:var(--accent-gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:2}
.testi-arrow svg{width:22px;height:auto;display:block;position:relative;z-index:1}
.testi-arrow--prev svg{transform:scaleX(-1)}
.testi-arrow:hover{background:var(--accent-gradient);border-color:transparent;color:#fff;transform:translateY(-2px)}
.testi-arrow:hover::after{opacity:1}
.testi-arrow:disabled{opacity:.35;cursor:not-allowed}
.testi-arrow:disabled:hover{background:#adadad14;border-color:var(--border);color:var(--text);transform:none}
.testi-track-wrap{overflow:hidden;margin:0 calc(-1 * var(--testi-pad-x, 3.5rem));container-type:inline-size;container-name:testi}
.testi-track{display:flex;gap:1.5rem;padding:0 0 1rem;overflow-x:auto;scroll-behavior:auto;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.testi-track::-webkit-scrollbar{display:none}
.testi-track.is-dragging,.about-testimonials__track.is-dragging{cursor:grabbing}
.testi-card{flex:0 0 var(--testi-card-basis,clamp(320px,38vw,560px));padding:2.5rem;background:#fff;border-radius:24px;border:1px solid var(--border);display:flex;flex-direction:column;gap:1.5rem;min-height:340px;box-sizing:border-box;position:relative;isolation:isolate;transition:border-color .4s var(--ease)}
.testi-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--accent-gradient);opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:0}
.testi-card::after{content:'';position:absolute;inset:-1px;border-radius:25px;padding:1px;background:var(--accent-gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:2}
.testi-card > *{position:relative;z-index:1}
.testi-card:hover{border-color:transparent}
.testi-card:hover::before{opacity:1}
.testi-card:hover::after{opacity:1}
.testi-stars{color:#F5A623;letter-spacing:4px;font-size:1.5rem;line-height:1;transition:color .4s var(--ease)}
.testi-quote{font-family:var(--font-mono);font-size:20px;line-height:1.6;color:#333;margin:0;flex:1;transition:color .4s var(--ease)}
.testi-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;border-top:1px solid var(--border);padding-top:1.5rem;transition:border-top-color .4s var(--ease)}
.testi-author{min-width:0}
.testi-name{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:#333;line-height:1.2;transition:color .4s var(--ease)}
.testi-role{font-family:var(--font-mono);font-size:.75rem;color:#555;letter-spacing:0.04em;margin-top:.35rem;transition:color .4s var(--ease)}
.testi-brand{font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:0.14em;color:#555;text-transform:uppercase;white-space:nowrap;flex-shrink:0;transition:color .4s var(--ease)}
.testi-card:hover .testi-stars,
.testi-card:hover .testi-quote,
.testi-card:hover .testi-name,
.testi-card:hover .testi-role,
.testi-card:hover .testi-brand{color:#fff}
.testi-card:hover .testi-foot{border-top-color:rgba(255,255,255,0.25)}
/* WP — OUR WORK PROCESS (wordpress-development) */
.wp-work-process{background:#fbfbfb;padding-top:clamp(3.5rem,8vw,6rem);padding-inline:3.5rem;padding-bottom:clamp(3rem,8vh,5.5rem);border-bottom:1px solid var(--border);scroll-margin-top:clamp(5rem,12vh,7rem);overflow-anchor:none}
.wp-work-process__wrap{max-width:1440px;margin:0 auto;padding-left:0;padding-right:0}
.wp-work-process__intro{text-align:center;max-width:50rem;margin:0 auto clamp(2rem,4vw,3rem)}
.wp-work-process__pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:.45rem 1rem;border-radius:999px;border:1px solid rgba(147,4,119,.28);background:rgba(147,4,119,.06)}
.wp-work-process__intro .wp-work-process__heading.section-display-title{margin:.95rem 0 0;color:var(--text)}
.wp-work-process__intro .wp-work-process__heading.section-display-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--accent)}
.wp-work-process__lead{font-family:var(--font-mono);font-size:clamp(.95rem,1.8vw,1.06rem);line-height:1.65;color:var(--text-muted);margin:1rem 0 0}
.wp-work-process__timeline{
--wp-progress:0;
--wp-stack-top:clamp(6rem,13vh,8.85rem);
--wp-marker-half:24px;
--wp-rail-pad-bottom:clamp(1rem,3vh,2rem);
--wp-rail-height:clamp(23rem,44vh,30rem);
display:grid;
grid-template-columns:52px minmax(0,1fr);
gap:clamp(1rem,2.5vw,2rem);
align-items:stretch;
padding-bottom:clamp(3rem,9vh,7rem);
}
.wp-work-process__rail-col{
grid-column:1;
grid-row:1;
align-self:stretch;
position:relative;
width:52px;
min-width:52px;
}
.wp-work-process__rail{
position:sticky;
top:var(--wp-stack-top);
width:100%;
height:min(var(--wp-rail-height),calc(100vh - var(--wp-stack-top) - var(--wp-rail-pad-bottom)));
height:min(var(--wp-rail-height),calc(100dvh - var(--wp-stack-top) - var(--wp-rail-pad-bottom)));
min-height:220px;
}
.wp-work-process__line-track{
position:absolute;
left:50%;
transform:translateX(-50%);
top:var(--wp-marker-half);
bottom:12px;
width:3px;
border-radius:3px;
background:rgba(26,21,35,.11);
z-index:1;
}
.wp-work-process__line-fill{
position:absolute;
left:0;
top:0;
right:0;
height:calc(var(--wp-progress, 0) * 100%);
border-radius:inherit;
background:linear-gradient(180deg,var(--accent) 0%,rgba(147,4,119,.58) 55%,rgba(147,4,119,.32) 100%);
pointer-events:none;
z-index:2;
}
.wp-work-process__marker{
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
z-index:3;
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:50%;
background:var(--accent-gradient);
box-shadow:0 12px 28px -12px rgba(147,4,119,.55);
}
.wp-work-process__steps{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:0}
.wp-work-process__card{
position:sticky;
top:var(--wp-stack-top);
margin-bottom:clamp(2rem,12vh,5.5rem);
background:#fff;
border:1px solid var(--border);
border-radius:clamp(18px,2vw,28px);
box-shadow:0 28px 56px -26px rgba(26,21,35,.22),0 12px 32px -18px rgba(26,21,35,.09);
}
.wp-work-process__card:nth-child(1){z-index:1}
.wp-work-process__card:nth-child(2){z-index:2}
.wp-work-process__card:nth-child(3){z-index:3}
.wp-work-process__card:nth-child(4){z-index:4}
.wp-work-process__card + .wp-work-process__card{margin-top:clamp(-3.35rem,-6.25vw,-2rem)}
.wp-work-process__card:last-child{margin-bottom:clamp(4rem,14vh,9rem)}
.wp-work-process__card-inner{display:flex;align-items:stretch;justify-content:space-between;gap:clamp(1.25rem,3vw,2.75rem);padding:clamp(1.5rem,3vw,2.35rem)}
.wp-work-process__body{flex:0 1 auto;min-width:0;max-width:min(45rem,100%);display:flex;flex-direction:column;gap:.85rem}
.wp-work-process__badge{align-self:flex-start;font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:.42rem .95rem;border-radius:999px;background:var(--accent-gradient)}
.wp-work-process__title{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin:0}
.wp-work-process__desc{font-family:var(--font-mono);font-size:clamp(.92rem,1.6vw,1.02rem);line-height:1.62;color:var(--text-muted);margin:0}
.wp-work-process__tasks-label{font-family:var(--font-display);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-top:.35rem}
.wp-work-process__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.wp-work-process__tags li{font-family:var(--font-mono);font-size:max(14px,.72rem);letter-spacing:.03em;color:var(--text);padding:.42rem .85rem;border-radius:999px;background:rgba(26,21,35,.055);border:1px solid rgba(26,21,35,.06)}
.wp-work-process__visual{flex:0 0 clamp(160px,26vw,260px);display:flex;align-items:center;justify-content:center;align-self:center;margin-left:auto}
.wp-work-process__viz{width:100%;aspect-ratio:1;max-width:240px;border-radius:clamp(16px,2vw,22px);position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(218,11,156,.22) 0%,rgba(94,0,97,.35) 42%,rgba(80,120,220,.28) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 36px -16px rgba(147,4,119,.45)}
.wp-work-process__viz::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 30% 25%,rgba(255,255,255,.55),transparent 55%),radial-gradient(ellipse 50% 45% at 78% 72%,rgba(120,180,255,.35),transparent 50%);pointer-events:none}
/* Decorative “3D” placeholders */
.wp-work-process__viz--discovery{
display:flex;
align-items:center;
justify-content:center;
z-index:1;
}
.wp-work-process__viz--discovery::before{
content:'';
position:absolute;
left:50%;
top:50%;
width:58%;
height:58%;
transform:translate(-50%,-50%);
border-radius:50%;
background:
linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.42) calc(50% - .5px),rgba(255,255,255,.42) calc(50% + .5px),transparent calc(50% + .5px)),
linear-gradient(180deg,transparent calc(50% - .5px),rgba(255,255,255,.42) calc(50% - .5px),rgba(255,255,255,.42) calc(50% + .5px),transparent calc(50% + .5px));
opacity:.5;
z-index:0;
pointer-events:none;
}
.wp-work-process__viz--discovery span{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:2px solid rgba(255,255,255,.48);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 26px rgba(30,20,80,.18);
pointer-events:none;
z-index:1;
}
.wp-work-process__viz--discovery span:nth-child(1){width:76%;height:76%;opacity:.5}
.wp-work-process__viz--discovery span:nth-child(2){
width:52%;height:52%;
opacity:.72;
border-color:rgba(255,255,255,.62);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 12px 28px rgba(147,4,119,.14);
}
.wp-work-process__viz--discovery span:nth-child(3){
width:26%;height:26%;
border:none;
background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0%,rgba(230,220,255,.55) 42%,rgba(120,160,230,.35) 100%);
box-shadow:0 12px 32px rgba(147,4,119,.28),inset 0 -3px 10px rgba(94,0,97,.12);
}
.wp-work-process__viz.wp-work-process__viz--discovery::after{opacity:.38}
.wp-work-process__viz--launch{
display:flex;
align-items:center;
justify-content:center;
z-index:1;
}
.wp-work-process__viz--launch::before{
content:'';
position:absolute;
left:50%;
top:50%;
width:64%;
height:64%;
transform:translate(-50%,-50%) rotate(45deg);
border-radius:24%;
border:1px solid rgba(255,255,255,.32);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
opacity:.55;
z-index:0;
pointer-events:none;
}
.wp-work-process__viz--launch span{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:24%;
border:2px solid rgba(255,255,255,.5);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 26px rgba(30,20,80,.18);
pointer-events:none;
z-index:1;
}
.wp-work-process__viz--launch span:nth-child(1){
width:76%;
height:76%;
opacity:.44;
transform:translate(-50%,-50%) rotate(-10deg);
}
.wp-work-process__viz--launch span:nth-child(2){
width:50%;
height:50%;
opacity:.74;
border-color:rgba(255,255,255,.64);
transform:translate(-50%,-50%) rotate(14deg);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 12px 28px rgba(40,140,160,.14);
}
.wp-work-process__viz--launch span:nth-child(3){
width:24%;
height:24%;
border:none;
border-radius:50%;
transform:translate(-50%,-50%);
background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.94) 0%,rgba(190,248,230,.62) 44%,rgba(50,175,155,.42) 88%,rgba(20,110,105,.35) 100%);
box-shadow:0 12px 30px rgba(40,145,135,.28),inset 0 -2px 10px rgba(20,90,95,.14);
}
.wp-work-process__viz.wp-work-process__viz--launch::after{
opacity:.4;
background:radial-gradient(ellipse 68% 52% at 32% 22%,rgba(255,255,255,.52),transparent 54%),radial-gradient(ellipse 48% 42% at 78% 74%,rgba(120,215,190,.38),transparent 52%);
}
.wp-work-process__viz--bars{display:flex;align-items:flex-end;justify-content:center;gap:clamp(7px,2vw,11px);padding:18%;z-index:1}
.wp-work-process__viz--bars span{flex:1;max-width:22%;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 100%);box-shadow:0 8px 18px rgba(30,20,80,.22);position:relative;z-index:1}
.wp-work-process__viz--bars span:nth-child(1){height:42%}
.wp-work-process__viz--bars span:nth-child(2){height:72%}
.wp-work-process__viz--bars span:nth-child(3){height:56%}
.wp-work-process__viz--bars span:nth-child(4){height:88%}
.wp-work-process__viz--build{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:9%;
padding:15% 13%;
z-index:1;
}
.wp-work-process__viz--build::before{
content:'';
position:absolute;
left:50%;
top:16%;
bottom:16%;
width:3px;
transform:translateX(-50%);
background:linear-gradient(180deg,transparent,rgba(255,255,255,.38) 10%,rgba(255,255,255,.38) 90%,transparent);
border-radius:3px;
opacity:.75;
z-index:0;
}
.wp-work-process__viz--build span{
position:relative;
z-index:1;
width:72%;
flex:0 0 17%;
min-height:26px;
border-radius:12px;
background:linear-gradient(158deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.28) 48%,rgba(100,130,220,.2) 100%);
border:1px solid rgba(255,255,255,.52);
box-shadow:0 8px 22px rgba(30,20,80,.22),inset 0 1px 0 rgba(255,255,255,.58);
}
.wp-work-process__viz--build span:nth-child(1){transform:translateX(-12%) rotate(-6deg);width:62%}
.wp-work-process__viz--build span:nth-child(2){
transform:translateX(10%) rotate(4deg);
width:80%;
background:linear-gradient(158deg,rgba(255,255,255,.93) 0%,rgba(215,205,255,.38) 42%,rgba(218,11,156,.14) 100%);
box-shadow:0 12px 28px rgba(147,4,119,.2),inset 0 1px 0 rgba(255,255,255,.68);
}
.wp-work-process__viz--build span:nth-child(3){transform:translateX(-9%) rotate(-5deg);width:66%}
@media(max-width:900px){
.wp-work-process__card-inner{flex-direction:column;justify-content:flex-start}
.wp-work-process__visual{display:none!important}
.wp-work-process__desc{font-size:16px}
.wp-work-process__lead{font-size:16px}
.wp-work-process__timeline{grid-template-columns:minmax(0,1fr);gap:clamp(.75rem,2vw,1.25rem);padding-bottom:0}
.wp-work-process__rail-col{display:none!important}
.wp-work-process__steps{grid-column:1}
}
@media(min-width:481px) and (max-width:900px){
.wp-work-process__title{font-size:clamp(1.8rem,2.4vw,1.85rem)}
}
@media(max-width:640px){
.wp-work-process__timeline{
--wp-stack-top:clamp(5.25rem,12vh,7.25rem);
--wp-marker-half:20px;
--wp-rail-height:clamp(20rem,52vh,26rem);
}
.wp-work-process__marker{width:40px;height:40px}
.wp-work-process__marker svg{width:18px;height:18px}
.wp-work-process__card{margin-bottom:clamp(1.75rem,9vh,3.25rem)}
.wp-work-process__card + .wp-work-process__card{margin-top:clamp(-2.15rem,-5vw,-1.35rem)}
}
@media (prefers-reduced-motion:reduce){
.wp-work-process__timeline{--wp-progress:1!important}
.wp-work-process__rail{position:relative;top:auto}
.wp-work-process__card{
position:relative!important;
top:auto!important;
margin-top:0!important;
margin-bottom:clamp(1.25rem,4vw,1.75rem)!important;
box-shadow:0 22px 48px -28px rgba(26,21,35,.16),0 8px 24px -18px rgba(26,21,35,.06);
}
.wp-work-process__card + .wp-work-process__card{margin-top:0!important}
}
/* TECH */
.stack{background:var(--bg);padding:7rem 3.5rem 9rem;position:relative;overflow:hidden;isolation:isolate}
.stack::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(147,4,119,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(147,4,119,0.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 85%);z-index:-1;pointer-events:none}
.stack::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 42% 55% at 12% 18%,rgba(147,4,119,0.32),transparent 65%),radial-gradient(ellipse 38% 48% at 88% 82%,rgba(168,6,127,0.28),transparent 65%),radial-gradient(ellipse 30% 40% at 70% 20%,rgba(231,139,213,0.22),transparent 70%);z-index:-1;pointer-events:none}
.stack-header{max-width:1440px;margin:0 auto 4rem;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;position:relative}
.stack-header-left{display:flex;flex-direction:column;gap:.75rem}
.stack-header-left .section-label{margin:0}
.stack-title{font-family:var(--font-display);font-size:48px;line-height:1.1;letter-spacing:-0.02em;font-weight:700;color:var(--text);margin:0;max-width:18ch}
.stack-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--text);letter-spacing:-0.01em}
.stack-grid{max-width:1440px;margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
.stack-card{background:linear-gradient(180deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.35) 100%);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,0.6);border-radius:20px;padding:2.25rem 2rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 1px 2px rgba(26,21,35,0.04);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.stack-card:hover{background:linear-gradient(180deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.5) 100%);border-color:rgba(147,4,119,0.35);transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 24px 44px -20px rgba(147,4,119,0.45)}
.stack-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.stack-card-num{font-family:'Playfair Display',serif;font-style:italic;font-size:3.25rem;font-weight:500;line-height:1;letter-spacing:-0.02em;font-feature-settings:"lnum" 1;font-variant-numeric:lining-nums;background:linear-gradient(135deg,var(--accent) 0%,#d772c2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stack-card-label{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:max(var(--font-min),.6rem);font-weight:500;color:var(--accent);letter-spacing:0.14em;text-transform:lowercase;margin-top:.65rem;padding:.4rem .75rem;border:1px solid rgba(147,4,119,0.2);border-radius:999px;background:rgba(147,4,119,0.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.stack-card-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(147,4,119,0.15);flex-shrink:0;transition:box-shadow .3s var(--ease)}
.stack-card:hover .stack-card-label{background:rgba(147,4,119,0.12);border-color:rgba(147,4,119,0.35);color:var(--accent2)}
.stack-card:hover .stack-card-label::before{box-shadow:0 0 0 4px rgba(147,4,119,0.25)}
.stack-card-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1.2;letter-spacing:-0.015em;color:var(--text);margin:0}
.stack-card-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;border-top:1px solid var(--border);padding-top:1.25rem;margin-top:auto}
.stack-card-list li{font-family:var(--font-mono);font-size:1rem;color:var(--text-muted);letter-spacing:0.01em;display:flex;align-items:center;gap:.6rem;white-space:nowrap;transition:color .25s var(--ease)}
.stack-card-list li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.5;flex-shrink:0;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.stack-card:hover .stack-card-list li{color:var(--text)}
.stack-card:hover .stack-card-list li::before{opacity:1;transform:scale(1.4)}
/* CTA */
/* FOOTER */
.footer{position:relative;padding:6rem 3.5rem 0;background:linear-gradient(180deg,#06040a 0%,var(--bg-dark) 35%,#161320 100%);color:rgba(255,255,255,0.6);overflow:hidden;isolation:isolate}
.footer-inner{max-width:1440px;margin:0 auto;position:relative;z-index:1;container-type:inline-size}
.footer-top{display:grid;grid-template-columns:1.4fr 2fr;gap:5rem;padding-bottom:4rem}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.footer-logo-link{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;line-height:1}
.footer-logo{display:block;flex-shrink:0;height:42px;width:auto;object-fit:contain;margin:0}
.footer-logo-text{font-family:var(--font-display);font-size:1.85rem;font-weight:600;letter-spacing:-0.025em;color:#fff;line-height:1}
.footer-tag{font-family:var(--font-mono);font-size:1rem;line-height:1.6;color:rgba(255,255,255,0.5);max-width:38ch;margin:0;letter-spacing:0.005em}
.footer-cta{margin-top:.5rem}
.footer-cta .nav-cta-text{background:var(--accent-gradient)}
.footer-cta .nav-cta-icon{background:var(--accent-gradient)}
.footer-cta.hovered .nav-cta-text{background:#fff;color:var(--bg-dark)}
.footer-cta.hovered .nav-cta-icon{background:#fff}
.footer-cta.hovered .nav-cta-icon svg{fill:var(--bg-dark)}
.footer-email{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--font-mono);font-size:1rem;color:rgba(255,255,255,0.7);text-decoration:none;margin-top:.25rem;transition:color .3s var(--ease)}
.footer-email:hover{color:#fff}
.footer-email-icon{width:18px;height:18px;display:inline-flex;color:#d772c2}
.footer-email-icon svg{width:100%;height:100%;display:block}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.footer-col{display:flex;flex-direction:column;gap:0}
.footer-col-title{font-family:var(--font-display);font-size:.9rem;color:#ffffff;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;margin-bottom:1.5rem}
.footer-col a{display:block;font-family:var(--font-body);font-size:1rem;color:rgba(255,255,255,0.6);padding:.55rem 0;transition:color .25s var(--ease),padding-left .3s var(--ease);text-decoration:none;font-weight:400}
.footer-col a:hover{color:#fff;padding-left:.4rem}
.footer-wordmark{font-family:var(--font-display);font-weight:900;line-height:.85;letter-spacing:-0.06em;text-align:center;margin:4rem 0 -1rem;padding:0 clamp(0.35rem,1.25vw,0.75rem);max-width:100%;box-sizing:border-box;background:linear-gradient(180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.02) 80%,transparent 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;user-select:none;pointer-events:none;font-size:clamp(6rem,min(13.5vw,20.9rem),20.9rem)}
@supports (font-size:1cqw){
.footer-wordmark{font-size:clamp(6rem,min(23cqw,20.9rem),20.9rem);padding:0 clamp(0.25rem,1.5cqi,0.75rem)}
}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.75rem 0 2.25rem;border-top:1px solid rgba(255,255,255,0.06);flex-wrap:wrap}
.footer-copy{font-family:var(--font-mono);font-size:.85rem;color:rgba(255,255,255,0.35);letter-spacing:0.02em}
.footer-social{display:flex;gap:.6rem}
.footer-social a{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.1);transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.footer-social a:hover{background:rgba(231,139,213,0.12);border-color:rgba(231,139,213,0.35);color:#fff;transform:translateY(-2px)}
.footer-social svg{width:17px;height:17px}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-family:var(--font-mono);font-size:.8rem;color:rgba(255,255,255,0.4);letter-spacing:0.04em;text-transform:uppercase;text-decoration:none;transition:color .25s var(--ease)}
.footer-legal a:hover{color:#fff}
.hero-trust{display:flex;align-items:center;gap:1rem;margin-top:2.5rem;flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.25rem;border:1px solid var(--border);background:#fff;border-radius:12px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);box-shadow:0 2px 8px -2px rgba(26,21,35,0.05)}
.trust-badge:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 14px 28px -8px rgba(26,21,35,0.12),0 6px 16px -4px rgba(147,4,119,0.1)}
.trust-icon{width:38px;height:38px;border-radius:10px;background:var(--accent-dim);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-icon svg{width:20px;height:20px}
.trust-text{font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);color:var(--text-muted);letter-spacing:0.08em;line-height:1.4;text-transform:uppercase}
.trust-text strong{font-family:var(--font-display);color:var(--text);font-weight:700;display:block;font-size:.95rem;letter-spacing:-0.01em;margin-bottom:.15rem;text-transform:none}
/* CLIENT LOGOS MARQUEE */
.logos{background:var(--bg);padding:7rem 0 7rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.logos-headline{font-family:var(--font-display);font-size:1.15rem;color:var(--text);font-weight:700;text-align:center;margin:0 auto 4rem;padding:0 2rem;max-width:720px;line-height:1.4;letter-spacing:0.02em;text-transform:uppercase}
.logos-headline em{font-style:normal;color:var(--accent)}
.logos-row{overflow:hidden;padding:.75rem 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.logos-track{display:flex;gap:6rem;width:max-content;align-items:center}
.logos-track--ltr{animation:logos-ltr 60s linear infinite}
.logos-track--rtl{animation:logos-rtl 60s linear infinite}
@keyframes logos-ltr{from{transform:translate3d(-25%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes logos-rtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
.logo-chip{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:var(--text);letter-spacing:-0.01em;white-space:nowrap;opacity:1;transition:color .3s;line-height:1.3}
.logo-chip span{line-height:1.3}
.logo-chip:hover{color:var(--text-dim)}
.logo-mark{width:24px;height:24px;flex-shrink:0}
@media (prefers-reduced-motion:reduce){.logos-track--ltr,.logos-track--rtl{animation:none}}
/* WordPress service page — vertical tabs (desktop reference layout) */
/* Horizontal padding matches nav + hero (outer inset + inner max-width 1440, no double gutter from .container) */
#wp-service-tabs,#shop-service-tabs,#app-service-tabs,#service-tabs{scroll-margin-top:clamp(5rem,12vh,7rem)}
/* WordPress & Shopify tab illustrations: wide PNG banners fit without aggressive cropping */
#wp-service-tabs .wp-service-tabs__media img,
#shop-service-tabs .wp-service-tabs__media img,
#app-service-tabs .wp-service-tabs__media img,
#service-tabs .wp-service-tabs__media img{
object-fit:contain;
background:#fafafa;
}
.wp-service-tabs{background:#fbfbfb;padding:clamp(4.5rem,10vw,7.25rem) 3.5rem;border-bottom:1px solid var(--border)}
.wp-service-tabs .container{padding-left:0;padding-right:0;max-width:1440px}
.wp-service-tabs__intro{text-align:center;max-width:780px;margin:0 auto clamp(3.75rem,6.5vw,5.25rem);padding:0 clamp(4px,2vw,12px);overflow:visible}
.wp-service-tabs .section-label{margin-bottom:1.1rem;overflow:visible}
.wp-service-tabs__intro .wp-service-tabs__heading.section-display-title{color:var(--text)}
.wp-service-tabs__intro .wp-service-tabs__heading.section-display-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--accent)}
.wp-service-tabs__title{font-family:var(--font-display);font-size:48px;line-height:1.15;letter-spacing:-0.025em;font-weight:700;color:var(--text);margin:0}
.wp-service-tabs__title-line{display:block}
.wp-service-tabs__title-line+.wp-service-tabs__title-line{margin-top:.2em}
.wp-service-tabs__title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--accent)}
@media(max-width:768px){
.wp-service-tabs__intro .wp-service-tabs__heading.section-display-title{
max-width:100%;
margin-left:auto;
margin-right:auto;
text-wrap:balance;
}
.wp-why-accordion .wp-why-accordion__title.section-display-title{
max-width:100%;
margin-left:auto;
margin-right:auto;
text-wrap:balance;
}
.wp-work-process__intro .wp-work-process__heading.section-display-title{
max-width:100%;
margin-left:auto;
margin-right:auto;
text-wrap:balance;
}
}
.wp-service-tabs__layout{display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:clamp(1.75rem,4vw,3rem);align-items:start}
.wp-service-tabs__list{display:flex;flex-direction:column;gap:.45rem;position:sticky;top:calc(env(safe-area-inset-top,0px) + 6rem)}
.wp-service-tabs__tab{display:block;width:100%;text-align:center;font-family:var(--font-display);font-size:1rem;font-weight:600;padding:.95rem 1.15rem;border-radius:8px;border:1px solid var(--border);background:rgba(147,4,119,0.04);color:var(--text);cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease)}
.wp-service-tabs__tab:hover{border-color:rgba(147,4,119,0.22);background:rgba(147,4,119,0.07)}
.wp-service-tabs__tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wp-service-tabs__tab.is-active{background:var(--accent-gradient);border-color:transparent;color:#fff;box-shadow:0 16px 40px -18px rgba(147,4,119,0.55)}
.wp-service-tabs__tab.is-active:hover{transform:translateY(0)}
.wp-service-tabs__stage{min-width:0;margin:0;padding:0}
.wp-service-tabs__panel{margin:0;padding:0}
.wp-service-tabs__body{margin:0;padding:0}
.wp-service-tabs__panel:focus{outline:none}
.wp-service-tabs__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,min(52vw,560px));gap:clamp(1.5rem,3.5vw,2.75rem);align-items:start}
.wp-service-tabs__panel-title{font-family:var(--font-display);font-style:normal;font-size:clamp(1.5rem,2.8vw,2rem);font-weight:700;letter-spacing:-0.025em;color:var(--text);margin:0 0 1rem;line-height:1.15}
.wp-service-tabs__desc{font-family:var(--font-mono);font-size:18px;font-weight:400;line-height:1.65;color:#333;margin:0;max-width:52ch}
@media(max-width:1366px){
.wp-service-tabs__desc{font-size:16px}
.wp-service-tabs__inner{grid-template-columns:minmax(0,1fr) minmax(240px,min(44vw,460px))}
}
.wp-service-tabs__body .wp-service-tabs__desc+.wp-service-tabs__desc{margin-top:1.15em}
.wp-service-tabs__media{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 48px -24px rgba(26,21,35,0.22);background:var(--bg3)}
.wp-service-tabs__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;vertical-align:middle}
.wp-service-tabs__media img[data-lightbox-src]{cursor:zoom-in}
.img-lightbox{
position:fixed;inset:0;z-index:10100;
display:flex;align-items:center;justify-content:center;
padding:clamp(1rem,4vw,2.75rem);
padding-top:max(clamp(1rem,4vw,2.75rem),env(safe-area-inset-top,0px));
background:rgba(14,11,18,.9);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
cursor:zoom-out;
box-sizing:border-box;
}
.img-lightbox[hidden]{display:none!important}
.img-lightbox__close{
position:absolute;top:max(1rem,env(safe-area-inset-top,0px));right:max(1rem,env(safe-area-inset-right,0px));
width:44px;height:44px;border-radius:50%;
border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
color:#fff;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease);
z-index:2;
}
.img-lightbox__close:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.img-lightbox__img{
max-width:min(96vw,1400px);
max-height:min(92vh,900px);
width:auto;height:auto;
object-fit:contain;
border-radius:12px;
box-shadow:0 40px 100px rgba(0,0,0,.45);
cursor:default;
position:relative;z-index:1;
}
@media (prefers-reduced-motion:reduce){
.img-lightbox{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(min-width:1081px) and (max-width:1366px){
.wp-service-tabs__inner{grid-template-columns:minmax(0,1fr) minmax(240px,min(44vw,460px))}
}
/* ≤1080px — stacked tab grid (2 cols + full-width last tab), content below (HTML prototype). */
@media(max-width:1080px){
.wp-service-tabs__layout{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,1.75rem)}
.wp-service-tabs__list{
position:static;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.5rem;
width:100%;
}
.wp-service-tabs__tab{
width:100%;
max-width:none;
min-width:0;
font-size:.95rem;
padding:.82rem 1rem;
}
.wp-service-tabs__tab:last-child:nth-child(odd){
grid-column:1 / -1;
}
.wp-service-tabs__inner{grid-template-columns:1fr;gap:clamp(1.25rem,3.5vw,1.75rem)}
.wp-service-tabs__body{max-width:100%}
.wp-service-tabs__desc{max-width:100%}
.wp-service-tabs__media{max-width:min(640px,100%);justify-self:stretch;width:100%;margin-inline:auto}
.wp-service-tabs__panel-title{font-size:clamp(1.35rem,4.5vw,1.75rem)}
}
/* Why TeamExio — horizontal accordion (row 450px; collapsed rails 140px) */
.wp-why-accordion{background:#fbfbfb;padding:clamp(3.5rem,8vw,5.5rem) 3.5rem;border-bottom:1px solid var(--border)}
.wp-why-accordion .container{padding-left:0;padding-right:0;max-width:1440px}
.wp-why-accordion__intro.wp-service-tabs__intro{max-width:min(56rem,100%)}
.wp-why-accordion .wp-service-tabs__intro{margin-bottom:clamp(2.25rem,4vw,3rem)}
.wp-why-accordion .wp-service-tabs__intro .wp-why-accordion__title.section-display-title{color:var(--text)}
.wp-why-accordion .wp-service-tabs__intro .wp-why-accordion__title.section-display-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--accent)}
.why-acc{
display:flex;flex-direction:row;gap:clamp(.75rem,1.5vw,1.25rem);align-items:stretch;width:100%;max-width:100%;
height:450px;
min-height:450px;
}
.why-acc__panel{
position:relative;
flex-grow:0;
flex-shrink:0;
flex-basis:140px;
min-width:140px;
min-height:0;
align-self:stretch;
border-radius:18px;
padding:1rem .85rem 3.25rem;
cursor:pointer;
overflow:hidden;
text-align:left;
transition:
flex-grow .68s var(--ease),
flex-shrink .68s var(--ease),
flex-basis .68s var(--ease),
min-width .68s var(--ease),
box-shadow .45s var(--ease),
background .35s var(--ease);
box-shadow:0 4px 24px -14px rgba(26,21,35,0.16);
}
.why-acc__head{display:contents}
.why-acc__chevron{display:none}
.why-acc__panel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.why-acc__panel--1{background:#F0DBF7}
.why-acc__panel--2{background:#FFD0F3}
.why-acc__panel--3{background:#B8D0FA}
.why-acc__panel--4{background:#6BC8FF}
.why-acc__panel--5{background:#8FDBE0}
.why-acc__panel.is-expanded{
flex-grow:1;
flex-shrink:1;
flex-basis:0;
min-width:min(100%,220px);
box-shadow:0 8px 36px -20px rgba(26,21,35,0.18);
}
.why-acc__num{
position:absolute;
left:-10px;
bottom:-0.35rem;
font-family:var(--font-acc-num);
font-weight:800;
font-size:100px;
line-height:.78;
pointer-events:none;
user-select:none;
z-index:1;
opacity:.35;
transform:scale(1);
transform-origin:left bottom;
transition:
opacity .55s var(--ease),
transform .55s var(--ease),
color .35s var(--ease);
color:#fff!important;
}
.why-acc__panel.is-expanded .why-acc__num{
opacity:1;
transform:scale(1.05);
}
.why-acc__rail{
position:absolute;
left:auto;
right:2.55rem;
top:10%;
transform:translateY(-50%) rotate(-90deg);
transform-origin:right center;
white-space:nowrap;
font-family:var(--font-display);
font-weight:700;
font-size:50px;
letter-spacing:-0.02em;
line-height:1;
pointer-events:none;
z-index:2;
opacity:1;
visibility:visible;
transition:color .25s var(--ease),opacity .25s var(--ease),visibility .25s;
}
.why-acc__panel:not(.is-expanded) .why-acc__rail{color:var(--text);text-shadow:0 1px 0 rgba(255,255,255,.45)}
.why-acc__panel.is-expanded .why-acc__rail{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.why-acc__expand{
position:relative;z-index:1;
opacity:0;visibility:hidden;pointer-events:none;
max-width:min(80%,62ch);
padding:clamp(1.25rem,2.5vw,1.75rem);
transition:
opacity .48s var(--ease),
visibility 0s linear .48s;
}
.why-acc__panel.is-expanded .why-acc__expand{
opacity:1;visibility:visible;pointer-events:auto;
transition:
opacity .52s var(--ease) .14s,
visibility 0s linear 0s;
}
.why-acc__stat{display:none}
.why-acc__metric{
font-family:var(--font-display);
font-size:clamp(2rem,4.5vw,3rem);
font-weight:800;
color:var(--text);
margin:0 0 .75rem;
line-height:1.06;
letter-spacing:-0.035em;
}
.why-acc__support{
font-family:var(--font-mono);
font-size:18px;
line-height:1.58;
color:#4a4452;
margin:2rem 0 0;
}
@media(max-width:1180px){
.wp-why-accordion{
padding-left:clamp(1.35rem,3.8vw,3rem);
padding-right:clamp(1.35rem,3.8vw,3rem);
}
.wp-why-accordion .container{
min-width:0;
width:100%;
}
.why-acc{
min-width:0;
gap:clamp(.5rem,1vw,.95rem);
}
.why-acc__panel{
flex-basis:clamp(88px,10vw,118px);
min-width:clamp(88px,10vw,118px);
padding:1rem .5rem 3rem;
}
.why-acc__panel.is-expanded{
min-width:min(100%,180px);
}
.why-acc__rail{
font-size:clamp(32px,3.6vw,46px);
right:clamp(1rem,2vw,2.55rem);
}
.why-acc__num{
font-size:clamp(72px,11vw,70px);
}
}
@media(prefers-reduced-motion:reduce){
.why-acc__panel{
transition-duration:0.01ms;
transition-delay:0s!important;
}
.why-acc__expand{transition-duration:0.01ms;transition-delay:0s!important}
.why-acc__num{transition-duration:0.01ms!important}
}
@media(max-width:900px){
.why-acc{
height:auto;
max-height:none;
min-height:0;
flex-direction:column;
gap:1.5rem;
align-items:stretch;
}
.why-acc__panel{
flex:0 0 auto!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
min-height:0!important;
padding:1.5rem!important;
display:flex;
flex-direction:column;
align-items:stretch;
transition:box-shadow .5s var(--ease);
overflow:hidden;
}
.why-acc__panel.is-expanded{
box-shadow:0 8px 28px -14px rgba(26,21,35,0.2);
display:flex;
flex-direction:column;
align-items:stretch;
gap:.35rem;
}
.why-acc__head{
display:flex;
align-items:center;
justify-content:flex-start;
gap:.75rem;
padding:0;
flex-shrink:0;
}
.why-acc__head::after{display:none!important}
.why-acc__chevron{
display:block;
width:.6rem;
height:.6rem;
margin-left:auto;
flex-shrink:0;
border-right:2px solid var(--text);
border-bottom:2px solid var(--text);
transform:rotate(45deg);
opacity:.45;
transition:transform .55s var(--ease),opacity .4s var(--ease);
}
.why-acc__panel.is-expanded .why-acc__chevron{
transform:rotate(-135deg);
opacity:.65;
}
.why-acc__panel.is-expanded .why-acc__num{
opacity:1;
}
.why-acc__num{
position:static;
left:auto;
bottom:auto;
font-size:4rem;
line-height:.9;
width:auto;
min-width:2.75rem;
flex-shrink:0;
text-align:left;
transform:none;
opacity:.4;
transform-origin:center;
}
.why-acc__panel:not(.is-expanded) .why-acc__num{
opacity:.4;
}
.why-acc__rail{
position:static;
left:auto;
right:auto;
top:auto;
transform:none;
transform-origin:center;
text-align:left;
white-space:normal;
max-width:none;
line-height:1.2;
font-size:2.5rem;
margin-left:1rem;
font-weight:700;
flex:1;
min-width:0;
}
.why-acc__panel:not(.is-expanded) .why-acc__rail{color:var(--text);text-shadow:none}
.why-acc__panel.is-expanded .why-acc__rail{display:none}
.why-acc__expand-inner{
overflow:hidden;
min-height:0;
}
.why-acc__expand{
display:grid;
grid-template-rows:0fr;
max-width:none;
opacity:0;
visibility:hidden;
pointer-events:none;
padding:0;
transition:
grid-template-rows .62s var(--ease),
opacity .48s var(--ease),
visibility 0s linear .58s;
}
.why-acc__panel.is-expanded .why-acc__expand{
grid-template-rows:1fr;
opacity:1;
visibility:visible;
pointer-events:auto;
padding-top:.35rem;
transition:
grid-template-rows .62s var(--ease),
opacity .52s var(--ease) .08s,
visibility 0s linear 0s;
}
.why-acc__metric{
font-size:clamp(1.65rem,5.5vw,3rem);
line-height:1.1;
letter-spacing:-0.03em;
margin:0 0 .65rem;
}
.why-acc__panel.is-expanded .why-acc__support{margin-top:1rem}
}
@media(max-width:768px){
.why-acc__num{font-size:3rem}
.why-acc__rail{font-size:2rem}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
.why-acc__expand{transition:none!important}
.why-acc__chevron{transition:none!important}
}
/* PRICING DARK */
.pricing-dark{background:radial-gradient(ellipse 95% 75% at 50% 50%,#1a1324 0%,#15101e 55%,var(--bg-dark) 95%);padding:5.5rem 3.5rem 6rem;position:relative;overflow:hidden;isolation:isolate}
.pricing-dark::before{content:'';position:absolute;inset:0;background-image:repeating-radial-gradient(circle at 50% 100%,transparent 0 140px,rgba(255,255,255,0.05) 140px 141px);mask-image:radial-gradient(ellipse 70% 85% at 50% 55%,#000 30%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 70% 85% at 50% 55%,#000 30%,transparent 85%);pointer-events:none;z-index:0}
.pd-shell{max-width:1440px;margin:0 auto;position:relative;z-index:1}
.pd-glow{position:absolute;inset:-6rem 0;background:radial-gradient(ellipse 55% 40% at 50% 108%,rgba(147,4,119,0.45),transparent 65%),radial-gradient(ellipse 38% 25% at 50% -5%,rgba(147,4,119,0.18),transparent 72%);pointer-events:none;z-index:0}
.pd-header{text-align:center;margin:0 auto 4rem;position:relative;z-index:1;max-width:820px}
.pd-header .section-label{margin-bottom:1.5rem}
.pd-header .section-label span{color:#d772c2}
.pd-title{font-family:var(--font-display);font-size:48px;line-height:1.05;letter-spacing:-0.025em;color:#fff;margin:0 0 1.25rem;font-weight:700;background:linear-gradient(180deg,#fff 0%,#d8cfe5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pd-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:inherit}
.pd-sub{font-family:var(--font-mono);font-size:1rem;line-height:1.55;color:rgba(255,255,255,0.55);margin:0 auto;max-width:560px;letter-spacing:0.01em}
.pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative;z-index:1;align-items:stretch}
.pd-card{align-self:stretch;background:linear-gradient(180deg,rgba(40,28,55,0.55) 0%,rgba(22,16,32,0.7) 100%);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:2rem 1.75rem;display:flex;flex-direction:column;gap:1.25rem;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pd-card:hover{border-color:rgba(255,255,255,0.18);transform:translateY(-3px)}
.pd-card--featured{background:radial-gradient(ellipse 90% 80% at 50% 40%,rgba(201,4,145,0.4) 0%,rgba(147,4,119,0.2) 45%,rgba(22,16,32,0.8) 100%),linear-gradient(180deg,rgba(50,20,70,0.5) 0%,rgba(22,16,32,0.7) 100%);border:1px solid rgba(231,139,213,0.35);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
.pd-card--featured:hover{border-color:rgba(231,139,213,0.55);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12)}
.pd-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);padding:.4rem .85rem;border-radius:999px;align-self:flex-start;letter-spacing:0.06em;text-transform:lowercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pd-card--featured .pd-badge{background:rgba(231,139,213,0.12);border-color:rgba(231,139,213,0.35);color:#fff}
.pd-price{font-family:var(--font-display);font-size:3rem;font-weight:700;line-height:1;letter-spacing:-0.025em;color:#fff;display:flex;align-items:baseline;gap:.4rem;margin:0}
.pd-price span{font-family:var(--font-mono);font-size:.9rem;font-weight:400;color:rgba(255,255,255,0.5);letter-spacing:0.02em}
.pd-tagline{font-family:var(--font-mono);font-size:1rem;color:rgba(255,255,255,0.6);line-height:1.5;margin:0;padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.pd-card--featured .pd-tagline{color:rgba(255,255,255,0.78);border-bottom-color:rgba(255,255,255,0.16)}
.pd-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.pd-features li{font-family:var(--font-body);font-size:1rem;color:rgba(255,255,255,0.8);display:flex;align-items:flex-start;gap:.7rem;line-height:1.4}
.pd-features li strong{color:#fff;font-weight:600}
.pd-features li::before{content:'';width:20px;height:20px;border-radius:50%;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l2 2 4-4'/%3E%3C/svg%3E") center/11px 11px no-repeat;border:1.5px solid rgba(255,255,255,0.28);flex-shrink:0;margin-top:.08rem}
.pd-card--featured .pd-features li::before{border-color:rgba(231,139,213,0.7);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l2 2 4-4'/%3E%3C/svg%3E")}
.pd-cta{display:flex;align-items:center;justify-content:center;padding:1.05rem 1.5rem;border-radius:999px;background:linear-gradient(180deg,rgba(40,28,55,0.8) 0%,rgba(20,14,28,0.9) 100%);border:1px solid rgba(255,255,255,0.1);color:#fff;font-family:var(--font-mono);font-size:.8rem;font-weight:500;letter-spacing:0.04em;text-decoration:none;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);margin-top:auto;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
.pd-cta:hover{background:linear-gradient(180deg,rgba(60,42,82,0.9) 0%,rgba(30,20,42,0.95) 100%);border-color:rgba(255,255,255,0.2);transform:translateY(-1px)}
.pd-card--featured .pd-cta{background:linear-gradient(135deg,#C90491 0%,#E78BD5 100%);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)}
.pd-card--featured .pd-cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);background:linear-gradient(135deg,#E78BD5 0%,#C90491 100%);transform:translateY(-2px)}
/* PRICING SPLINE (variant 3) */
.pricing-spline{background:#06040a;padding:7rem 3.5rem;position:relative;overflow:hidden}
.ps-header{max-width:820px;margin:0 auto 4rem;text-align:center}
.ps-header .section-label{margin-bottom:1.5rem}
.ps-header .section-label span{color:#d772c2}
.ps-title{font-family:var(--font-display);font-size:48px;font-weight:700;line-height:1.12;letter-spacing:-0.025em;margin:0 0 1.25rem;padding-bottom:.08em;background:linear-gradient(180deg,#fff 0%,#d8cfe5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;overflow:visible}
.ps-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:inherit}
.ps-sub{font-family:var(--font-mono);font-size:1rem;line-height:1.55;color:rgba(255,255,255,0.55);margin:0 auto;max-width:560px;letter-spacing:0.01em}
.ps-grid{max-width:1372px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.ps-card{position:relative;height:100%;border-radius:16px;background:linear-gradient(180deg,rgba(49,40,65,0.15) 0%,rgba(14,3,36,0.05) 100%),rgba(0,0,0,0.20);border:1px solid rgba(255,255,255,0.08);padding:1.5rem;overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);min-height:560px;display:flex;isolation:isolate}
.ps-card:hover{border-color:rgba(255,255,255,0.12);box-shadow:0 8px 40px rgba(255,255,255,0.06)}
.ps-bg{position:absolute;top:-14px;right:0;width:100%;height:100%;max-height:340px;z-index:-1;pointer-events:none;opacity:.95;background-size:cover;background-position:top right;background-repeat:no-repeat}
.ps-card--starter .ps-bg{background-image:url('../img/starter.jpg')}
.ps-card--growth .ps-bg{background-image:url('../img/popular.jpg')}
.ps-card--scale .ps-bg{background-image:url('../img/pro.jpg')}
.ps-shape{position:absolute;top:-40px;right:-50px;width:240px;height:210px;pointer-events:none;z-index:0;perspective:1000px}
.ps-shape img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.5));transform-origin:50% 50%;transition:transform .6s var(--ease);will-change:transform;backface-visibility:hidden}
.ps-card:hover .ps-shape img{animation:ps-spin 12s linear infinite}
.ps-card--growth:hover .ps-shape img{animation-duration:9s;animation-direction:reverse}
.ps-card--scale:hover .ps-shape img{animation-duration:14s}
@keyframes ps-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ps-twirl{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.ps-card:hover .ps-shape img{animation:none}}
.ps-content{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative;z-index:1}
.ps-brand{display:flex;align-items:center;gap:.5rem;font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;font-style:italic;font-weight:500;letter-spacing:0.02em;color:#fff}
.ps-brand-dot{width:9px;height:9px;background:#a10297;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 8px rgba(161,2,151,0.6);animation:ps-blink 1.6s ease-in-out infinite}
@keyframes ps-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(161,2,151,0.65),0 0 8px rgba(161,2,151,0.6)}50%{opacity:.45;box-shadow:0 0 0 6px rgba(161,2,151,0),0 0 4px rgba(161,2,151,0.3)}}
.ps-body{flex-grow:1;display:flex;flex-direction:column;gap:0;padding-top:1.5rem}
.ps-price{font-family:var(--font-display);font-size:4.5rem;font-weight:200;line-height:1;letter-spacing:-0.04em;color:#fff;margin:6rem 0 0}
ul.ps-features{list-style:none;padding:0;margin:0 0 3rem;display:flex;flex-direction:column;gap:1rem}
ul.ps-features li{display:flex;align-items:center;gap:1rem;color:#72727D;font-family:var(--font-body);font-size:1rem;line-height:1.4}
ul.ps-features li p{margin:0}
ul.ps-features li em{font-style:normal;font-weight:500;color:#B8B8C9}
.ps-icon{width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;border:1.2px solid rgba(255,255,255,0.25);border-radius:50%;color:#B8B8C9;font-size:.7rem;flex-shrink:0;background:rgba(255,255,255,0.02)}
.ps-divider{display:flex;align-items:center;gap:.5rem;margin-top:auto;margin-bottom:1.75rem}
.ps-divider::before,.ps-divider::after{content:'';flex:1;height:1px;background:#1F1F21}
.ps-divider span{font-family:var(--font-mono);font-size:.7rem;font-weight:500;color:#49494F;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap}
.ps-cta{display:flex;align-items:center;justify-content:center;width:100%;padding:.85rem 1.5rem;border-radius:58px;border:1px solid #222;background:rgba(6,6,6,0.6);color:#B1B1B1;font-family:var(--font-body);font-size:.95rem;font-weight:600;text-decoration:none;box-shadow:inset 0 0.583px 2.333px #4E4E59,inset 0 4.667px 18.667px rgba(52,52,60,0.4),0 0 0 0 rgba(34,34,34,0);transition:box-shadow .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);margin-bottom:1.125rem}
.ps-cta:hover{border-color:rgba(231,139,213,0.5);box-shadow:inset 0 0.583px 2.333px #4E4E59,inset 0 4.667px 18.667px rgba(52,52,60,0.4),0 0 0 1px rgba(231,139,213,0.25),0 0 22px rgba(168,6,127,0.55),0 0 50px rgba(147,4,119,0.25);color:#fff}
.ps-guarantee{font-family:var(--font-body);font-size:1rem;font-weight:500;color:#72727D;text-align:center;margin:0}
.ps-guarantee b{color:#B8B8C9;font-weight:600}
.ps-foot{max-width:680px;margin:2.5rem auto 0;padding:0 1.5rem;text-align:center;font-family:var(--font-body);font-size:1rem;color:#72727D;opacity:.7;line-height:1.55}
/* Pricing page — TeamExio vs typical agency comparison */
.pricing-compare{
background:#fbfbfb;
padding:clamp(4rem,9vw,7rem) 3.5rem;
border-top:1px solid var(--border);
}
.pricing-compare__shell{max-width:1440px;margin:0 auto}
.pricing-compare__head{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:1.5rem 2.5rem;
margin-bottom:clamp(2rem,4vw,3rem);
}
.pricing-compare__head-copy{max-width:min(720px,100%)}
.pricing-compare__head-copy .section-label{margin-bottom:1rem}
.pricing-compare__head-copy .section-display-title{margin:0;max-width:min(22ch,100%)}
.pricing-compare__head-copy .section-display-title em{color:var(--accent)}
.pricing-compare__cta{flex-shrink:0}
.pricing-compare__card{
background:#fff;
border:1px solid var(--border);
border-radius:20px;
overflow:hidden;
box-shadow:0 28px 70px -48px rgba(26,21,35,0.14);
}
.pricing-compare__row{
display:grid;
grid-template-columns:1fr 1fr;
border-bottom:1px solid var(--border);
}
.pricing-compare__row:last-child{border-bottom:0}
.pricing-compare__row--head .pricing-compare__cell{padding:1.35rem 2rem}
.pricing-compare__cell{
display:flex;
align-items:center;
gap:.85rem;
padding:1.25rem 2rem;
font-family:var(--font-display);
font-size:clamp(.92rem,1.05vw,1.05rem);
font-weight:600;
line-height:1.35;
letter-spacing:-0.01em;
color:var(--text);
}
.pricing-compare__cell + .pricing-compare__cell{border-left:1px solid var(--border)}
.pricing-compare__us-label,
.pricing-compare__other-label{font-family:var(--font-display);font-size:clamp(1rem,1.2vw,1.15rem);font-weight:800;letter-spacing:-0.02em;color:var(--text)}
.pricing-compare__icon{
flex-shrink:0;
width:20px;
height:20px;
display:inline-flex;
}
.pricing-compare__icon svg{width:20px;height:20px;display:block}
.pricing-compare__icon--yes{color:#22a06b}
.pricing-compare__icon--no{color:#c8c3d0}
.pricing-compare__cell--other.is-no{
color:var(--text-dim);
font-weight:500;
}
.pricing-compare__cell--other.is-no span:last-child{opacity:.72}
/* Mobile/tablet swipe cards (Musemind-style); desktop keeps side-by-side table */
.pricing-compare__carousel{display:none}
.pricing-compare__table{width:100%}
.pricing-compare__track{
display:flex;
gap:1rem;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
scroll-padding-inline:1.5rem;
padding:0 1.5rem .25rem;
margin:0 -1.5rem;
scrollbar-width:none;
}
.pricing-compare__track::-webkit-scrollbar{display:none}
.pricing-compare__panel{
flex:0 0 min(86vw,360px);
scroll-snap-align:center;
background:#fff;
border:1px solid var(--border);
border-radius:20px;
overflow:hidden;
box-shadow:0 24px 56px -36px rgba(26,21,35,.16);
}
.pricing-compare__panel-head{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.65rem;
padding:1.35rem 1.5rem 1.15rem;
border-bottom:1px solid var(--border);
text-align:center;
}
.pricing-compare__panel-head img{display:block;height:30px;width:auto;max-width:140px}
.pricing-compare__panel-title{
font-family:var(--font-display);
font-size:1.05rem;
font-weight:800;
letter-spacing:-0.02em;
color:var(--text);
}
.pricing-compare__panel--other .pricing-compare__panel-title{color:var(--text-muted)}
.pricing-compare__panel-list{list-style:none;margin:0;padding:0}
.pricing-compare__panel-item{
display:flex;
align-items:flex-start;
gap:.85rem;
padding:1.1rem 1.35rem;
border-bottom:1px solid var(--border);
font-family:var(--font-display);
font-size:.95rem;
font-weight:600;
line-height:1.4;
letter-spacing:-0.01em;
color:var(--text);
}
.pricing-compare__panel-item:last-child{border-bottom:0}
.pricing-compare__panel-item.is-no{
color:var(--text-dim);
font-weight:500;
}
.pricing-compare__panel-item.is-no > span:last-child{opacity:.72}
.pricing-compare__dots{
display:flex;
justify-content:center;
gap:.5rem;
margin-top:1.25rem;
padding:0 1.5rem;
}
.pricing-compare__dot{
width:8px;
height:8px;
padding:0;
border:0;
border-radius:50%;
background:rgba(26,21,35,.18);
cursor:pointer;
font-size:0;
line-height:0;
overflow:hidden;
color:transparent;
flex-shrink:0;
transition:background .25s var(--ease),transform .25s var(--ease);
}
.pricing-compare__dot.is-active{
background:var(--accent);
transform:scale(1.15);
}
.pricing-compare__dot:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
}
@media(max-width:1024px){
.pricing-compare{padding:3.5rem 1.5rem}
.pricing-compare__head{align-items:flex-start;flex-direction:column}
.pricing-compare__head-copy .section-display-title{max-width:100%}
.pricing-compare__cta{width:100%;max-width:320px}
}
@media(max-width:900px){
.pricing-compare__card{
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
overflow:visible;
}
.pricing-compare__table{display:none}
.pricing-compare__carousel{display:block}
.pricing-compare__cell{padding:1.1rem 1.25rem;font-size:.92rem;gap:.7rem}
}
@media(max-width:480px){
.pricing-compare__panel{flex-basis:min(90vw,340px)}
.pricing-compare__panel-item{padding:1rem 1.15rem;font-size:.9rem}
.pricing-compare__track{scroll-padding-inline:1.15rem;padding-inline:1.15rem;margin-inline:-1.15rem}
}
/* About — testimonials (autoplay carousel + visual column; grey band) */
.about-testimonials{
background:#fbfbfb;
padding:clamp(4rem,9vw,7.5rem) 3.5rem;
border-top:1px solid var(--border);
scroll-margin-top:clamp(5rem,12vh,7rem);
}
.about-testimonials__inner{position:relative;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem)}
.about-testimonials__star-defs{position:absolute;width:0;height:0;overflow:hidden;clip:rect(0,0,0,0)}
.about-testimonials__head{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.75rem,4vw,3.75rem);align-items:start}
.about-testimonials__head-left .about-testimonials__label{margin-bottom:.85rem}
.about-testimonials__title{
font-family:var(--font-display);font-size:clamp(32px,4.2vw,48px);font-weight:700;line-height:1.12;letter-spacing:-0.025em;margin:0;max-width:min(32ch,100%);
color:var(--text);
background:none;
background-clip:unset;-webkit-background-clip:unset;
-webkit-text-fill-color:currentColor;
}
.about-testimonials__title-em{
font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;color:var(--accent);
background:none;
background-clip:border-box;-webkit-background-clip:border-box;
-webkit-text-fill-color:var(--accent);color:var(--accent);
}
.about-testimonials__head-right{display:flex;flex-direction:column;gap:1.35rem;padding-top:.25rem;max-width:48ch;margin-left:auto}
.about-testimonials__head-right .about-testimonials__cta-nav{align-self:flex-start}
.about-testimonials__lede{font-family:var(--font-mono);font-size:clamp(14px,.95rem,17px);line-height:1.65;color:var(--text-muted);margin:0;letter-spacing:.01em}
.about-testimonials__grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,min(404px,34vw));
gap:clamp(1rem,2.35vw,1.65rem);
align-items:stretch;
}
.about-testimonials__carousel{
display:flex;
flex-direction:column;
min-width:0;
}
.about-testimonials__track-wrap{overflow:hidden}
.about-testimonials__track{
--about-testi-gap:1.25rem;
display:flex;
gap:var(--about-testi-gap);
padding:0 0 0;
overflow-x:auto;
scroll-behavior:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
cursor:grab;
-webkit-overflow-scrolling:touch;
}
.about-testimonials__track::-webkit-scrollbar{display:none}
.about-testimonials__card{
position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;
padding:1.75rem 1.65rem 1.45rem;min-height:clamp(236px,28vh,320px);box-sizing:border-box;overflow:hidden;
flex-shrink:0;
}
/* Two cards visible; discrete autoplay advances one snap at a time (Nextmind-style). */
.about-testimonials__track .about-testimonials__card{
flex:0 0 calc((100% - var(--about-testi-gap)) / 2);
width:calc((100% - var(--about-testi-gap)) / 2);
max-width:calc((100% - var(--about-testi-gap)) / 2);
scroll-snap-align:start;
scroll-snap-stop:always;
}
.about-testimonials__card-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.about-testimonials__quote-mark{
position:absolute;top:1.5rem;right:2rem;width:42px;line-height:0;color:rgba(147,4,119,.14);
pointer-events:none;user-select:none;z-index:0
}
.about-testimonials__quote-mark svg{display:block;width:42px;height:auto}
/* Same hero star behavior; slightly larger footprint than About hero pill */
.about-testimonials .wp-hero-trust__stars--svg{position:relative;display:inline-flex;align-items:center;line-height:0}
.about-testimonials .wp-hero-trust__sstars-row{display:inline-flex;align-items:center;gap:.14em}
.about-testimonials .wp-hero-trust__sstar{
display:block;width:clamp(.95rem,2.65vw,1.22rem);height:auto;flex-shrink:0;overflow:visible;
}
.about-testimonials .wp-hero-trust__sstar path{transform-origin:50% 50%}
.about-testimonials__quote{
flex:1;
display:flex;
align-items:start;
justify-content:start;
text-align:left;
margin:3rem 0 0 0;
padding:1.65rem .35rem;
font-family:var(--font-mono);
font-size:20px;
line-height:1.65;
color:#333;
position:relative;
z-index:1;
}
.about-testimonials__foot{border-top:1px solid rgba(26,21,35,.08);padding-top:1rem;margin-top:auto;position:relative;z-index:1}
.about-testimonials__author{display:flex;flex-direction:column;gap:.2rem;text-align:left}
.about-testimonials__cite{font-family:var(--font-display);font-size:1.02rem;font-weight:700;font-style:normal;color:#333}
.about-testimonials__role{font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);color:#555}
.about-testimonials__visual,
.about-testimonials__visual.wp-block-group{
position:relative;border-radius:20px;overflow:hidden;min-height:clamp(340px,42vh,440px);border:1px solid rgba(26,21,35,.06);
isolation:isolate;display:block;padding:0;
background:#0e0b12;
}
.about-testimonials__visual > .wp-block-html{
position:absolute;inset:0;margin:0!important;padding:0!important;z-index:0;height:100%;width:100%;min-height:0;
}
.about-testimonials__visual > .about-testimonials__visual-bg,
.about-testimonials__visual > .wp-block-group.about-testimonials__visual-bg,
.about-testimonials__visual > .wp-block-html .about-testimonials__visual-bg{
position:absolute;inset:0;margin:0;padding:0;min-height:0;height:100%;width:100%;z-index:0;
}
.about-testimonials__visual > .wp-block-html:has(.about-testimonials__visual-bg){
position:absolute;inset:0;margin:0!important;padding:0!important;min-height:0;height:100%;width:100%;z-index:0;
}
.about-testimonials__visual > .about-testimonials__visual-stats,
.about-testimonials__visual > .wp-block-group.about-testimonials__visual-stats{
position:relative;z-index:2;margin:0;display:flex;flex-direction:column;
gap:clamp(1rem,2.4vw,1.5rem);padding:clamp(1.1rem,2.8vw,1.65rem) clamp(1rem,2.5vw,1.35rem) 0;
}
.about-testimonials__visual > .about-testimonials__badge,
.about-testimonials__visual > .wp-block-group.about-testimonials__badge{
position:absolute;left:clamp(.85rem,2vw,1.25rem);right:auto;bottom:clamp(.85rem,2vw,1.25rem);top:auto;z-index:2;margin:0;
}
.about-testimonials__inner > .wp-block-group,
.about-testimonials__inner > header,
.about-testimonials__grid > .wp-block-group{margin-block:0}
.about-testimonials__visual-stat .about-testimonials__visual-stat-value,
.about-testimonials__visual-stat .about-testimonials__visual-stat-label,
.about-testimonials__visual-stat p{margin:0}
.about-testimonials__head-right .wp-block-buttons{margin:0}
.about-testimonials__head-right .wp-block-buttons .wp-block-button{margin:0}
.about-testimonials__head-left .wp-block-heading{margin:0}
.about-testimonials__head-right .wp-block-paragraph{margin:0}
/* Moving multi-stop gradient (matches HTML / TeamExio-Redesign). */
.about-testimonials__visual-bg{
position:absolute;inset:0;
z-index:0;
overflow:hidden;
background:#0e0b12;
background-image:linear-gradient(
-45deg,
#0a0614 1%,
#5e0061 14%,
#0e0b12 24%,
rgba(147,4,119,0.95) 36%,
#151028 46%,
rgba(79,70,229,0.82) 58%,
#0e0b12 67%,
rgba(218,11,156,0.82) 79%,
#1e1532 91%,
#0e0b12 99%
);
background-size:400% 400%;
animation:about-testi-gradient-flow 20s ease infinite;
}
@keyframes about-testi-gradient-flow{
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}
@media(prefers-reduced-motion:reduce){
.about-testimonials__visual-bg{
animation:none;
background-size:100% 100%;
background-position:50% 50%;
background-image:linear-gradient(
135deg,
#0a0614 0%,
#5e0061 22%,
#151028 42%,
rgba(147,4,119,0.92) 58%,
#1e1532 78%,
#0e0b12 100%
);
}
}
.about-testimonials__visual-stats,
ul.about-testimonials__visual-stats{
position:relative;z-index:2;pointer-events:none;
display:flex;flex-direction:column;gap:clamp(1rem,2.4vw,1.5rem);align-items:stretch;width:100%;
padding:clamp(1.1rem,2.8vw,1.65rem) clamp(1rem,2.5vw,1.35rem) 0;margin:0;
list-style:none;padding-left:0;
}
.about-testimonials__visual-stat,
li.about-testimonials__visual-stat{display:flex;flex-direction:column;gap:.4rem;text-align:left;min-width:0;list-style:none;margin:0;padding:0}
.about-testimonials__visual-stat-value{
font-family:'Playfair Display',Georgia,serif;font-weight:600;font-variant-numeric:lining-nums;text-transform:uppercase;
font-size:clamp(1.85rem,3.9vw,2.65rem);line-height:1.08;letter-spacing:.02em;color:rgba(255,255,255,.96);
}
.about-testimonials__visual-stat-label{
font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);line-height:1.35;
letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.58);
}
.about-testimonials__badge,
.about-testimonials__badge.wp-block-group{
position:absolute;left:clamp(.85rem,2vw,1.25rem);bottom:clamp(.85rem,2vw,1.25rem);z-index:2;
padding:1rem 1.1rem;background:rgba(14,11,18,.78);backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);
border-radius:16px;display:flex;flex-direction:column;gap:.55rem;border:1px solid rgba(255,255,255,.1);max-width:calc(100% - 2rem);
box-sizing:border-box;
}
.about-testimonials__avatar-row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;padding-left:.15rem;gap:0}
.about-testimonials__avatar-row > *{position:relative;flex:0 0 auto;margin:0 0 0 -9px}
.about-testimonials__avatar-row > :first-child{margin-left:0;z-index:1}
.about-testimonials__avatar-row > :nth-child(2){z-index:2}
.about-testimonials__avatar-row > :nth-child(3){z-index:3}
.about-testimonials__avatar-row > :nth-child(4){z-index:4}
.about-testimonials__avatar-row > :nth-child(5):not(.about-testimonials__avatar--plus):not(:has(.about-testimonials__avatar--plus)){z-index:5}
.about-testimonials__avatar-row .wp-block-image.about-testimonials__avatar,
.about-testimonials__avatar-row figure.about-testimonials__avatar,
.about-testimonials__avatar-row span.about-testimonials__avatar:not(.about-testimonials__avatar--plus){display:inline-flex;margin:0 0 0 -9px}
.about-testimonials__avatar-row > :first-child.wp-block-image,
.about-testimonials__avatar-row > :first-child figure.about-testimonials__avatar,
.about-testimonials__avatar-row > :first-child span.about-testimonials__avatar:not(.about-testimonials__avatar--plus){margin-left:0}
.about-testimonials__avatar-row > .wp-block-html{
position:relative;z-index:10;flex:0 0 34px;width:34px;height:34px;min-width:34px;min-height:34px;
margin:0 0 0 -9px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
}
.about-testimonials__avatar-row > .wp-block-html .about-testimonials__avatar--plus,
.about-testimonials__avatar-row > p.about-testimonials__avatar--plus,
.about-testimonials__avatar-row .about-testimonials__avatar--plus{
position:relative;z-index:10;flex:0 0 34px;width:34px;height:34px;min-width:34px;min-height:34px;max-width:34px;max-height:34px;
margin:0 0 0 -9px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;box-sizing:border-box;background:var(--accent-gradient)!important;
border:none;color:#fff;font-family:var(--font-display);font-size:.95rem;font-weight:700;overflow:visible;
}
.about-testimonials__avatar-row > p.about-testimonials__avatar--plus.wp-block-paragraph{margin-block:0}
.about-testimonials__avatar:not(.about-testimonials__avatar--plus),
.about-testimonials__avatar-row .wp-block-image.about-testimonials__avatar,
.about-testimonials__avatar-row figure.about-testimonials__avatar,
.about-testimonials__avatar-row span.about-testimonials__avatar:not(.about-testimonials__avatar--plus){
width:34px;height:34px;border-radius:50%;flex-shrink:0;
overflow:hidden;padding:0;border:2px solid rgba(255,255,255,.4);box-sizing:border-box;background:#2a2730;
}
.about-testimonials__visual-stats > .about-testimonials__visual-stat,
.about-testimonials__visual-stats > .wp-block-group.about-testimonials__visual-stat{margin:0}
.about-testimonials__avatar:first-child:not(.about-testimonials__avatar--plus){margin-left:0}
.about-testimonials__avatar img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
/* Legacy paragraph plus hidden when span/html chip is present. */
.about-testimonials__avatar-row > .wp-block-html ~ p.about-testimonials__avatar--plus{display:none!important}
.about-testimonials__badge-text,
p.about-testimonials__badge-text{margin:0;font-family:var(--font-display);font-size:16px;font-weight:600;color:rgba(255,255,255,.95);letter-spacing:.02em}
@media(max-width:1080px) and (min-width:1025px) and (hover:hover) and (pointer:fine){
.about-testimonials__quote{margin:1rem 0 0 0;font-size:14px}
}
@media(max-width:1024px){
.about-testimonials__head{grid-template-columns:1fr}
.about-testimonials__head-right{margin-left:0;max-width:none}
.about-testimonials__quote{font-size:18px}
}
@media(max-width:900px){
.about-testimonials__grid{grid-template-columns:1fr}
.about-testimonials__visual{min-height:min(380px,70vw)}
}
@media(max-width:767px){
.about-testimonials__visual{min-height:min(380px,90vw)}
.about-testimonials__quote{font-size:16px}
}
/* Narrow viewports: one card visible; autoplay still steps one slide. */
@media(max-width:680px){
.about-testimonials__track .about-testimonials__card{
flex:0 0 100%;
width:100%;
max-width:100%;
}
}
/* FAQ */
.faq{background:var(--bg);padding:8rem 3.5rem;position:relative}
.faq-grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:5fr 7fr;gap:5rem;align-items:start}
.faq-header{position:sticky;top:8rem;display:flex;flex-direction:column;gap:1.25rem}
.faq-header .section-label{margin:0}
/* .faq-title — FAQ column heading; .section-display-title — shared multi-line section headings site-wide */
.faq-title,.section-display-title{font-family:var(--font-display);font-size:48px;font-weight:700;line-height:1.05;letter-spacing:-0.025em;margin:0;color:var(--text)}
.faq-title em,.section-display-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;color:var(--text);letter-spacing:-0.005em}
.faq-sub{font-family:var(--font-mono);font-size:1rem;line-height:1.6;color:var(--text-muted);margin:0;max-width:42ch;letter-spacing:0.005em}
.faq-cta{align-self:flex-start;margin-top:1rem}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid rgba(26,21,35,0.1);padding:0}
.faq-item:first-child{border-top:1px solid rgba(26,21,35,0.1)}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.5rem 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.4;color:var(--text);letter-spacing:-0.005em;transition:color .25s var(--ease)}
.faq-question::-webkit-details-marker{display:none}
.faq-question:hover{color:var(--accent)}
.faq-question > span:first-child{flex:1}
.faq-icon{position:relative;flex-shrink:0;width:22px;height:22px}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--text);transition:transform .44s var(--ease),background .28s var(--ease)}
.faq-icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.faq-icon::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.faq-item[open] .faq-icon::after{transform:translateX(-50%) scaleY(0)}
.faq-question:hover .faq-icon::before,.faq-question:hover .faq-icon::after{background:var(--accent)}
.faq-answer{
overflow:hidden;
opacity:0;
max-width:85ch;
}
.faq-item[open] .faq-answer{
opacity:1;
}
/* FAQ page — full catalog, same grid as homepage FAQ */
section.faq.faq-page{
padding-top:clamp(7rem,12vw,9rem);
}
.faq-page__nav{
display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:0;
}
.faq-page__nav a{
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);font-weight:500;
letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);
text-decoration:none;padding:.35rem 0;border-bottom:1px solid transparent;
transition:color .25s var(--ease),border-color .25s var(--ease);
}
.faq-page__nav a:hover{color:var(--accent);border-bottom-color:rgba(147,4,119,.35)}
.faq-page__content{
display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem);
min-width:0;
}
.faq-page__group{scroll-margin-top:7rem}
.faq-page .wp-block-group.faq-page__group-head,
.faq-page__group-head{
margin:0 0 clamp(1.5rem,3vw,2rem);
}
.faq-page__group-head .faq-page__group-title,
.faq-page__group-head .faq-page__group-desc{
margin:.5rem 0 0;
}
.faq-page__group-title{
font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.5rem);font-weight:700;
line-height:1.2;letter-spacing:-.02em;color:var(--text);
}
.faq-page__group-desc{
font-family:var(--font-mono);font-size:max(var(--font-min),.88rem);
line-height:1.6;color:var(--text-muted);max-width:60ch;
}
.faq-page .faq-list{max-width:100%}
@media(prefers-reduced-motion:reduce){
.faq-answer{
display:grid!important;
grid-template-rows:0fr;
opacity:0;
}
.faq-item[open] .faq-answer{
grid-template-rows:1fr;
opacity:1;
}
.faq-answer > *{min-height:0;overflow:hidden}
}
.faq-answer p{padding:0 0 1.5rem;font-family:var(--font-mono);font-size:1rem;line-height:1.65;color:var(--text-muted);margin:0;letter-spacing:0.005em}
@media(max-width:1024px){
.stack-grid{grid-template-columns:repeat(2,1fr)}
.stack-header{flex-direction:column;align-items:flex-start}
.pd-shell{padding:3rem 1.75rem}
}
.back-to-top{position:fixed;bottom:1.75rem;right:calc(1.75rem + var(--scrollbar-comp,0px));width:48px;height:48px;border-radius:50%;background:var(--bg-dark);color:#fff;border:1px solid rgba(255,255,255,0.08);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--ease),visibility .35s var(--ease),transform .35s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);z-index:9998;box-shadow:0 12px 28px -10px rgba(0,0,0,0.45);padding:0}
.back-to-top svg{
width:18px;
height:12px;
fill:#fff;
stroke:none;
transform:rotate(-90deg);
transition:transform .3s var(--ease);
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--accent);box-shadow:0 16px 36px -8px rgba(147,4,119,0.55)}
.nav-mobile-backdrop{position:fixed;inset:0;z-index:9190;background:rgba(14,11,18,0.38);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility .3s var(--ease)}
body.nav-open .nav-mobile-backdrop{opacity:1;visibility:visible;pointer-events:auto}
.nav-burger{display:none;position:relative;background:transparent;border:none;width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;z-index:2;justify-self:end;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease),background .25s var(--ease)}
.nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.active span:nth-child(2){opacity:0;transform:translateX(8px)}
.nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open .nav-burger{background:#fff;border-radius:50%;box-shadow:0 4px 24px rgba(14,11,18,0.22),0 0 0 1px rgba(26,21,35,0.08)}
body.nav-open .nav-burger span{background:var(--text);height:2px}
body.nav-open .nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav-mobile{--nav-mobile-pad-top:calc(env(safe-area-inset-top,0px) + 4.35rem);position:fixed;top:0;left:0;bottom:0;right:auto;width:80%;max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;z-index:9200;background:#fff;padding:0 1.5rem 2rem;padding-top:var(--nav-mobile-pad-top);padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:1.5rem;box-sizing:border-box;display:flex;flex-direction:column;gap:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-100%);transition:opacity .3s var(--ease),visibility .3s var(--ease),transform .35s var(--ease);overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-mobile.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition-delay:0s}
.nav-mobile-top{display:none;align-items:center;padding:0 0 1.25rem;border-bottom:1px solid var(--border);margin-bottom:0.25rem;margin-left:0;margin-right:0;flex-shrink:0}
.nav-mobile-top+*{margin-top:clamp(1.25rem,4.5vw,2rem)}
.nav-mobile-brand{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--font-display);font-size:1.85rem;font-weight:800;letter-spacing:-0.025em;color:var(--text);text-decoration:none;opacity:1}
.nav-mobile-brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.nav-mobile-brand-text{display:inline-flex;align-items:baseline;color:var(--text)}
.nav-mobile-brand-team{color:var(--text)}
.nav-mobile-brand-exio{color:var(--text)}
.nav-mobile a{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--text);text-decoration:none;padding:1.1rem 0;border-bottom:1px solid var(--border);letter-spacing:-0.01em;transition:color .25s var(--ease),padding-left .3s var(--ease)}
.nav-mobile a.nav-mobile-brand{font-size:1.85rem;font-weight:800;padding:0;border-bottom:none;letter-spacing:-0.025em}
.nav-mobile a.nav-mobile-brand:hover{color:var(--text);padding-left:0}
.nav-mobile a:hover{color:var(--accent);padding-left:.4rem}
.nav-mobile a.nav-cta{margin-top:2rem;align-self:flex-start;border-bottom:none!important;padding:0!important;opacity:1}
.nav-mobile a.nav-cta:hover{color:inherit;padding-left:0!important}
.nav-mobile-submenu{border-bottom:1px solid var(--border)}
.nav-mobile-submenu-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--text);text-align:left;letter-spacing:-0.01em;padding:1.1rem 0;background:transparent;border:none;border-radius:0;cursor:pointer;transition:color .25s var(--ease),padding-left .3s var(--ease)}
.nav-mobile-submenu-chevron{flex-shrink:0;color:var(--text-muted);transition:transform .28s var(--ease)}
.nav-mobile-submenu-toggle:hover{color:var(--accent);padding-left:.4rem}
.nav-mobile-submenu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-mobile-submenu-toggle.is-open .nav-mobile-submenu-chevron{transform:rotate(180deg);color:var(--accent)}
.nav-mobile-submenu-panel{display:flex;flex-direction:column;padding:0 0 .35rem}
.nav-mobile-submenu-panel[hidden]{display:none!important;padding:0}
.nav-mobile-submenu-panel a{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;font-size:1.12rem;font-weight:600;padding:.75rem 0 .85rem;padding-left:.5rem;text-decoration:none;border-bottom:1px solid rgba(26,21,35,0.08);transition:color .22s var(--ease),padding-left .25s var(--ease)}
.nav-mobile-submenu-panel a:last-child{border-bottom:none;padding-bottom:.5rem}
.nav-mobile-sublink-title{color:var(--text)}
.nav-mobile-sublink-desc{font-family:var(--font-mono);font-size:max(var(--font-min),.62rem);font-weight:500;color:var(--text-muted);letter-spacing:.02em;line-height:1.35}
.nav-mobile-sublink-desc--link{color:var(--accent)}
.nav-mobile-submenu-panel a:hover{color:var(--accent);padding-left:.65rem}
.nav-mobile-submenu-panel a:hover .nav-mobile-sublink-title{color:inherit}
.nav-mobile-sublink-all{margin-top:.15rem;font-weight:700}
/* RESPONSIVE */
@media(max-width:1024px){
.services-grid{grid-template-columns:repeat(2,1fr)}
.hero-stats{gap:3rem}
.pd-grid{grid-template-columns:repeat(2,1fr);max-width:none}
.ps-grid{grid-template-columns:repeat(2,1fr);max-width:none}
.work-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
.work-grid .work-item,
.work-grid .work-item:nth-child(7n+2),
.work-grid .work-item:nth-child(7n+6){grid-column:span 1;height:auto}
.work-grid .work-item-media,
.work-grid .work-item:nth-child(7n+1) .work-item-media,
.work-grid .work-item:nth-child(7n) .work-item-media,
.work-grid .work-item:nth-child(7n+2) .work-item-media,
.work-grid .work-item:nth-child(7n+6) .work-item-media{
flex:0 0 auto;aspect-ratio:16/11;min-height:0;height:auto;
}
.work-item-cat{max-width:50%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiflow-grid{gap:1.25rem}
.faq-grid{grid-template-columns:1fr;gap:3rem}
.faq-header{position:static;width:100%;max-width:100%}
.faq-sub{max-width:60ch}
.hero{padding:5.5rem clamp(1.25rem,4vw,2rem) 2.25rem;min-height:min(92vh,700px)}
.wp-service-tabs,.wp-why-accordion,.wp-work-process,.services-pillars{padding-left:clamp(1.25rem,4vw,2rem);padding-right:clamp(1.25rem,4vw,2rem)}
.wp-service-tabs__desc{max-width:100%}
section.services,section.work:not(.work--page),section.aiflow,section.why,section.stack,section.testimonials{padding:5.5rem clamp(1.25rem,4vw,2rem) 6.5rem}
section.work.work--page,.wp-block-group.work.work--page{padding:clamp(2.5rem,5vw,4rem) clamp(1.25rem,4vw,2rem) 6.5rem}
section.about-testimonials{padding:5.5rem clamp(1.25rem,4vw,2rem)}
section.faq{padding:5.5rem clamp(1.25rem,4vw,2rem)}
section.pricing-spline{padding:5.5rem clamp(1.25rem,4vw,2rem)}
section.logos{padding:5.5rem 0}
.testimonials,
section.testimonials,
section.wp-block-group.testimonials{
--testi-pad-x:clamp(1.25rem,4vw,2rem);
--testi-card-basis:min(560px,calc(100vw - 4.5rem));
}
.testimonials .testi-card,
section.testimonials .testi-card,
section.wp-block-group.testimonials .testi-card{
flex:0 0 min(560px,calc(100vw - 4.5rem));
max-width:min(560px,calc(100vw - 4.5rem));
}
.testi-card{padding:2rem;min-height:280px}
.testi-track{
scroll-snap-type:x mandatory;
scroll-padding-inline:var(--testi-pad-x,1.5rem);
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
}
.testi-card{scroll-snap-align:center}
.footer-top{grid-template-columns:1fr 1fr;gap:3rem}
nav#nav.scrolled{background:#fafafa;border-bottom:1px solid rgba(26,21,35,0.12);box-shadow:0 6px 28px -14px rgba(14,11,18,0.14)}
}
@media(max-width:900px){
nav#nav .nav-inner{grid-template-columns:auto auto}
nav#nav .nav-inner > .nav-cta{display:none}
.nav-links{display:none}
.nav-burger{display:flex}
.nav-mobile{--nav-mobile-pad-top:calc(env(safe-area-inset-top,0px) + 4.65rem);padding-right:2rem;padding-left:max(3.5rem,env(safe-area-inset-left,0px))}
}
@media(min-width:481px) and (max-width:900px){
.nav-mobile{width:70%}
}
@media(max-width:767px){
html{overflow-x:hidden;max-width:100%;overscroll-behavior-x:none}
}
@media(max-width:1024px){
/* Flat service stack on tablet/phone — avoids sticky scroll jank */
.sservice-inner{grid-template-columns:1fr;padding:0 clamp(1.5rem,4vw,2rem) 1.75rem;min-height:auto}
.sservice-tag{padding:1.5rem clamp(1.5rem,4vw,2rem) .25rem;text-align:left}
.sservice{position:relative!important;top:auto!important;margin-bottom:1.25rem}
.sservice-visual{display:none}
}
@media(max-width:768px){
nav#nav{padding:1rem 1.5rem}
nav#nav.scrolled{padding:.75rem 1.5rem}
.nav-mobile{--nav-mobile-pad-top:calc(env(safe-area-inset-top,0px) + 3.85rem);padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(1.5rem,env(safe-area-inset-right,0px))}
section.hero{padding:4rem 1.5rem}
.wp-service-tabs,.wp-why-accordion,.wp-work-process,.services-pillars{padding-left:1.5rem;padding-right:1.5rem}
section.services,section.work:not(.work--page),section.aiflow,section.why,section.stack,section.testimonials{padding:4rem 1.5rem 5rem}
section.work.work--page,.wp-block-group.work.work--page{padding:clamp(2.5rem,5vw,4rem) 1.5rem 3.5rem}
section.logos{padding:4rem 0}
section.about-testimonials{padding:4rem 1.5rem}
section.faq{padding:4rem 1.5rem}
section.pricing-spline{padding:4rem 1.25rem}
.testimonials,
section.testimonials,
section.wp-block-group.testimonials{
--testi-pad-x:1.5rem;
--testi-card-basis:min(560px,calc(100vw - 4.5rem));
}
.testimonials .testi-card,
section.testimonials .testi-card,
section.wp-block-group.testimonials .testi-card{
flex:0 0 min(560px,calc(100vw - 4.5rem));
max-width:min(560px,calc(100vw - 4.5rem));
}
section.wp-work-process{padding-top:4rem;padding-bottom:clamp(3rem,10vh,5.5rem)}
.services-grid{grid-template-columns:1fr}
.hero-stats{flex-direction:column;gap:1.5rem}
.hero-desc{min-height:auto}
.services-intro{margin-bottom:3rem}
.pd-grid,.ps-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
.pricing-dark{padding:4rem 1.25rem}
.clients{padding:2.5rem 1.5rem}
.clients-grid{gap:2rem}
.stack-grid{grid-template-columns:1fr}
.stack-card-list li{white-space:normal;align-items:flex-start}
.work-grid{grid-template-columns:1fr;gap:1rem}
.work-grid > .work-item{grid-column:span 1!important}
.aiflow-grid{grid-template-columns:1fr}
.faq-grid{grid-template-columns:1fr;gap:2.5rem}
.faq-header{position:static}
.faq-icon{width:16px;height:16px}
.why-grid{grid-template-columns:1fr;gap:1rem}
.why-grid > .why-card,.why-grid > .why-card--1,.why-grid > .why-card--2,.why-grid > .why-card--3,.why-grid > .why-card--4,.why-grid > .why-card--5{grid-column:span 1!important}
.section-title,.work-title,.aiflow-title,.testi-title,.stack-title,.pd-title,.ps-title,.why-title,.faq-title,.about-testimonials__title,.section-display-title,.services-intro .section-title,.wp-service-tabs__title{font-size:36px}
.logos-track{gap:3.5rem}
.footer{padding:4rem 1.5rem 0}
.footer-top{grid-template-columns:1fr;gap:2.5rem;padding-bottom:3rem}
.footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,3vw,1.25rem)}
.footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.footer-legal{flex-wrap:wrap;justify-content:center}
/* Phones: additive safe-area; avoid max()+env() (WebKit can resolve differently once body scroll locks) */
.back-to-top{
left:auto;
right:calc(1rem + env(safe-area-inset-right,0px));
bottom:calc(2rem + env(safe-area-inset-bottom,0px));
}
body.nav-open .back-to-top{z-index:10050}
}
@media(max-width:767px){
section.testimonials,
section.wp-block-group.testimonials{--testi-card-basis:min(560px,calc(100vw - 3rem))}
.testi-header{
flex-direction:column;
align-items:center;
text-align:center;
}
.testi-header-left{align-items:center;width:100%}
.testi-nav{align-self:center}
.testimonials .section-display-title.testimonials__title{max-width:100%}
.testi-quote{font-size:16px}
.testi-brand{white-space:normal;letter-spacing:0.08em;font-size:.85rem}
.testi-title{font-size:36px}
.hero h1,
.contact-page__title,
.work-page__title,
.blog-hero__title,
.pricing-page--calc h1{font-size:clamp(2rem,11vw,2.85rem)}
section.hero{padding-top:6rem}
section.hero .hero-actions,
.pricing-page--calc .hero-actions{
flex-direction:column;
align-items:stretch;
align-self:flex-start;
width:min(280px,100%);
gap:1rem;
}
section.hero .hero-actions .btn-secondary,
section.hero .hero-actions .nav-cta,
.pricing-page--calc .hero-actions .btn-secondary,
.pricing-page--calc .hero-actions .nav-cta{
width:100%;
max-width:100%;
box-sizing:border-box;
}
section.hero .hero-actions .btn-secondary,
.pricing-page--calc .hero-actions .btn-secondary{justify-content:center}
section.hero .hero-actions .nav-cta,
.pricing-page--calc .hero-actions .nav-cta{justify-content:flex-start}
section.hero .hero-actions .nav-cta .nav-cta-text,
.pricing-page--calc .hero-actions .nav-cta .nav-cta-text{min-width:238px;justify-content:center}
.hero-trust{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.75rem 1rem;
align-items:stretch;
width:100%;
}
.hero-trust .trust-badge{min-width:0}
.hero-trust .trust-badge:nth-child(3){
grid-column:1/-1;
min-height:5.25rem;
padding-top:1.2rem;
padding-bottom:1.2rem;
}
.footer-cols{
grid-template-columns:1fr 1fr;
gap:1.75rem .85rem;
align-items:start;
}
.footer-cols > .footer-col:nth-child(1){
grid-column:1/-1;
display:grid;
grid-template-columns:1fr 1fr;
column-gap:1rem;
row-gap:.35rem;
align-items:start;
}
.footer-cols > .footer-col:nth-child(1) .footer-col-title{
grid-column:1/-1;
margin-bottom:.35rem;
}
/* 3 links col 1, 2 links col 2 */
.footer-cols > .footer-col:nth-child(1) a:nth-child(2){grid-column:1;grid-row:2}
.footer-cols > .footer-col:nth-child(1) a:nth-child(3){grid-column:1;grid-row:3}
.footer-cols > .footer-col:nth-child(1) a:nth-child(4){grid-column:1;grid-row:4}
.footer-cols > .footer-col:nth-child(1) a:nth-child(5){grid-column:2;grid-row:2}
.footer-cols > .footer-col:nth-child(1) a:nth-child(6){grid-column:2;grid-row:3}
.footer-cols > .footer-col:nth-child(1) a{
display:block;
padding:.55rem 0;
font-size:1rem;
font-family:var(--font-body);
font-weight:400;
}
.footer-cols > .footer-col:nth-child(1) a:hover{padding-left:0}
.footer-cols > .footer-col:nth-child(2),
.footer-cols > .footer-col:nth-child(3){
min-width:0;
}
.footer-wordmark{font-size:5rem;padding-bottom:10px}
}
@media(max-width:390px){
.footer-wordmark{font-size:4.5rem}
}
@media(max-width:767px){
.testimonials,
section.testimonials,
section.wp-block-group.testimonials{--testi-card-basis:min(560px,calc(100vw - 3rem))}
.testimonials .testi-card,
section.testimonials .testi-card,
section.wp-block-group.testimonials .testi-card{
flex:0 0 min(560px,calc(100vw - 3rem));
max-width:min(560px,calc(100vw - 3rem));
}
}
@supports (width: 1cqi) {
@media(max-width:1024px){
.testimonials,
section.testimonials,
section.wp-block-group.testimonials{--testi-card-basis:min(560px,calc(100cqi - 4.5rem))}
.testimonials .testi-card,
section.testimonials .testi-card,
section.wp-block-group.testimonials .testi-card{
flex:0 0 min(560px,calc(100cqi - 4.5rem));
max-width:min(560px,calc(100cqi - 4.5rem));
}
}
@media(max-width:767px){
.testimonials,
section.testimonials,
section.wp-block-group.testimonials{--testi-card-basis:min(560px,calc(100cqi - 2rem))}
.testimonials .testi-card,
section.testimonials .testi-card,
section.wp-block-group.testimonials .testi-card{
flex:0 0 min(560px,calc(100cqi - 2rem));
max-width:min(560px,calc(100cqi - 2rem));
}
}
}
@media(max-width:480px){
.hero h1,
.contact-page__title,
.pricing-page--calc h1{font-size:clamp(2rem,11vw,2.85rem)}
.hero-actions{flex-direction:column;align-items:stretch;gap:1rem}
.hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%;max-width:100%;justify-content:center}
.faq-question{font-size:1rem;gap:1rem;padding:1.2rem 0}
.why-card-title{font-size:clamp(1.35rem,5vw,1.75rem)}
.ps-card{min-height:480px}
.nav-mobile{padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px));padding-bottom:2rem}
}
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* PRICING PAGE */
.pricing-page{
position:relative;
padding:clamp(7.5rem,14vh,9.5rem) 3.5rem clamp(2.5rem,6vh,4rem);
overflow:hidden;
}
.pricing-page__grid-bg{
position:absolute;inset:0;
background-image:linear-gradient(rgba(147,4,119,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(147,4,119,0.04) 1px,transparent 1px);
background-size:48px 48px;
pointer-events:none;z-index:0;
}
.pricing-page__glow{
position:absolute;top:-8%;right:-12%;width:min(640px,70vw);height:min(640px,70vw);
background:radial-gradient(circle,rgba(147,4,119,0.07) 0%,transparent 65%);
pointer-events:none;z-index:0;
}
.pricing-page__inner{position:relative;z-index:1;max-width:1440px;margin:0 auto}
.pricing-page--calc .hero-label{margin-top:1.35rem;margin-bottom:1.5rem;text-transform:none;letter-spacing:0.08em;font-weight:600}
.pricing-page--calc h1{display:block;max-width:min(820px,100%)}
.pricing-page--calc{padding-bottom:clamp(4rem,8vh,6rem)}
.pricing-page--calc .hero-main{
align-items:start;
gap:clamp(2.25rem,5vw,4.5rem);
}
@media(min-width:1081px){
.pricing-page--calc .hero-main{
grid-template-columns:minmax(0,1fr) minmax(320px,560px);
}
}
@media(max-width:1080px) and (min-width:1025px) and (hover:hover) and (pointer:fine){
.pricing-page--calc .hero-main{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(1.75rem,3vw,2.5rem);
}
.pricing-page--calc h1{max-width:100%}
.pricing-page--calc .hero-left,
.pricing-page--calc .hero-right{min-width:0;max-width:100%}
.pricing-page--calc .price-calc{
max-width:100%;
margin-left:0;
margin-right:0;
}
}
.pricing-page--calc .hero-left{align-self:start}
.pricing-page--calc .hero-right{
align-self:start;
height:auto;
position:relative;
display:block;
margin-top:0;
margin-block-start:0;
}
.pricing-page--calc .hero-left > .wp-hero-trust{margin:0 0 1.35rem;display:inline-flex}
@media(max-width:1024px){
.pricing-page--calc .hero-right{display:block}
.pricing-page--calc .hero-main{grid-template-columns:1fr;gap:clamp(2.85rem,5.5vw,4rem)}
.pricing-page--calc .price-calc{margin-left:auto;margin-right:auto;max-width:560px;width:100%}
}
/* WORK PAGE */
.work-page{
position:relative;
padding:clamp(7.5rem,14vh,9.5rem) 3.5rem clamp(5rem,10vh,7rem);
overflow:hidden;
}
.work-page__grid-bg{
position:absolute;inset:0;
background-image:linear-gradient(rgba(147,4,119,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(147,4,119,0.04) 1px,transparent 1px);
background-size:48px 48px;
pointer-events:none;z-index:0;
}
.work-page__glow{
position:absolute;top:0;right:0;bottom:0;
width:min(720px,58vw);
background:radial-gradient(ellipse 85% 55% at 100% 0%,rgba(147,4,119,0.09) 0%,rgba(147,4,119,0.04) 28%,transparent 62%);
pointer-events:none;z-index:0;
}
.work-page.blog-page .work-page__glow,
.work-page.blog-post-page .work-page__glow{
width:min(780px,62vw);
background:radial-gradient(ellipse 90% 58% at 100% 0%,rgba(147,4,119,0.08) 0%,rgba(147,4,119,0.035) 30%,transparent 65%);
}
.work-page__inner{position:relative;z-index:1;max-width:1440px;margin:0 auto}
.work-page__hero{max-width:min(820px,100%);margin-bottom:clamp(2.5rem,5vw,4rem)}
.work-page__hero .hero-label{margin-top:0;margin-bottom:1.5rem;text-transform:none;letter-spacing:0.08em;font-weight:600}
.work-page__title{margin-bottom:1.75rem}
.work-page__lede{
font-family:var(--font-mono);font-size:1.125rem;line-height:1.65;color:var(--text-muted);
margin:0;max-width:48ch;letter-spacing:.02em;
}
/* Portfolio grid section — top gap matches HTML .work-page__hero margin-bottom; bottom matches work-page padding. */
.work.work--page,
section.work.work--page{
padding:clamp(2.5rem,5vw,4rem) 3.5rem clamp(5rem,10vh,7rem);
background:transparent;
}
.portfolio-list,
[data-portfolio-list]{
padding-top:0;
padding-bottom:0;
}
.work-page.portfolio-page,
section.work-page.portfolio-page{
padding-top:clamp(7.5rem,14vh,9.5rem);
padding-right:3.5rem;
padding-left:3.5rem;
padding-bottom:0;
}
.portfolio-list__actions{
display:flex;flex-direction:column;align-items:center;gap:1rem;
margin-top:clamp(2.5rem,5vw,3.5rem);
margin-bottom:0;
}
.portfolio-list__count{
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);
color:var(--text-muted);margin:0;letter-spacing:.02em;
}
.portfolio-list .nav-cta.portfolio-list__load-more{
margin:0;
opacity:1;
border:0;
background:transparent;
padding:0;
}
.portfolio-list__load-more.is-loading{
pointer-events:none;
opacity:.72;
}
.portfolio-list__load-more.has-error .nav-cta-text::after{
content:' — try again';
font-weight:400;
letter-spacing:0;
text-transform:none;
}
.portfolio-list .work-item.portfolio-list__item--entering{
opacity:0;
transform:translateY(28px);
}
.portfolio-list .work-item.portfolio-list__item--revealed{
opacity:1;
transform:none;
}
@media(max-width:900px){
.work-page{padding:7rem 1.5rem 3.5rem}
.work-page.portfolio-page,
section.work-page.portfolio-page{
padding-top:7rem;
padding-right:1.5rem;
padding-left:1.5rem;
padding-bottom:0;
}
.work-page__lede{font-size:1rem}
}
/* BLOG PAGE */
.work-page.blog-page{
padding-bottom:0;
}
.blog-hero{
margin-bottom:0;
}
/* Latest articles: white block, same width as hero (work-page__inner) */
.blog-page .blog-list{
position:relative;
background:#fff;
width:100%;
margin-top:clamp(3rem,6vw,5rem);
padding:clamp(3rem,6vw,4.5rem) 0 clamp(7.5rem,14vh,11.5rem);
box-sizing:border-box;
}
.blog-page .blog-list::before{
content:'';
position:absolute;inset:0;
left:50%;transform:translateX(-50%);
width:100vw;background:#fff;z-index:-1;
}
@media(max-width:900px){
.blog-page .blog-list{
margin-top:clamp(2.5rem,5vw,4rem);
padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(5.5rem,12vh,8rem);
}
}
.blog-page .blog-hero,
.blog-page .blog-list__head,
.blog-page .blog-grid,
.blog-page .blog-pagination{
width:100%;
max-width:none;
margin-left:0;
margin-right:0;
}
.blog-hero__top{
display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
gap:1.25rem 2rem;margin-bottom:clamp(2rem,4vw,3rem);
}
.blog-hero__search{align-self:center}
.blog-hero__head{
flex:1 1 auto;min-width:min(100%,16rem);
}
.blog-hero__head .hero-label{
margin-top:0;margin-bottom:1.5rem;text-transform:none;letter-spacing:0.08em;font-weight:600;
}
.blog-hero__title{
max-width:none;margin:0;
}
.blog-hero__search{
flex:0 1 18.5rem;width:min(100%,18.5rem);display:flex;align-items:center;gap:.65rem;
margin:0;padding:0 1.15rem 0 1.25rem;height:3.25rem;background:#fff;
border:1px solid var(--border);border-radius:999px;box-shadow:0 12px 40px -28px rgba(14,11,18,.12);
}
.blog-hero__search-icon{
flex:0 0 auto;display:flex;color:var(--text-muted);opacity:.55;
}
.blog-hero__search-icon svg{width:1.15rem;height:1.15rem}
.blog-hero__search-input{
flex:1 1 auto;min-width:0;border:0;background:transparent;
font-family:var(--font-mono);font-size:max(var(--font-min),.88rem);color:var(--text);
letter-spacing:.03em;
}
.blog-hero__search-input::placeholder{color:var(--text-muted);opacity:.7}
.blog-hero__search-input:focus{outline:none}
.blog-featured{
border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden;
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
@media(hover:hover) and (pointer:fine){
.blog-featured:hover{transform:translateY(-3px);box-shadow:0 24px 56px -32px rgba(14,11,18,.16)}
}
.blog-featured__link{
display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
align-items:stretch;text-decoration:none;color:inherit;min-height:100%;
}
.blog-featured__media{
position:relative;
min-height:clamp(220px,32vw,360px);
height:100%;
align-self:stretch;
background:#0c0614;
overflow:hidden;
}
.blog-featured__media img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;object-position:center;
display:block;
}
.blog-featured__content{
display:flex;flex-direction:column;justify-content:center;gap:1rem;
padding:clamp(1.75rem,4vw,3rem) clamp(1.75rem,4vw,3rem) clamp(1.75rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);
}
.blog-featured__meta{
display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .65rem;margin:0;
font-family:var(--font-mono);font-size:max(var(--font-min),.72rem);
letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
}
.blog-featured__meta-dot{opacity:.45}
.blog-featured__title{
font-family:var(--font-display);font-size:clamp(1.65rem,3.2vw,2.35rem);
font-weight:700;line-height:1.12;letter-spacing:-0.03em;margin:0;color:var(--text);
}
.blog-featured__excerpt{
font-family:var(--font-mono);font-size:max(16px,1rem);line-height:1.6;
color:var(--text-muted);margin:0;max-width:52ch;
}
.blog-list__head{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.blog-list__head .section-label{margin-bottom:0}
.blog-list__empty{
margin:2rem 0 0;text-align:center;font-family:var(--font-mono);
font-size:max(var(--font-min),.85rem);color:var(--text-muted);letter-spacing:.04em;
}
@media(max-width:900px){
.blog-hero__top{align-items:flex-start}
.blog-hero__search{flex:1 1 100%;width:100%;max-width:22rem}
.blog-featured__link{grid-template-columns:1fr}
.blog-featured__content{padding:1.75rem 1.5rem 2rem}
.blog-featured__media{
min-height:clamp(200px,52vw,280px);
height:auto;
aspect-ratio:3/2;
}
}
@media(max-width:820px){
.blog-featured__title{font-size:34px}
}
@media(max-width:767px){
.blog-featured__title{font-size:28px}
}
.blog-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:1.75rem 1.5rem;align-items:stretch;
}
.blog-grid .blog-card[hidden]{display:none!important}
.blog-card{
display:flex;flex-direction:column;height:100%;
margin:0;background:#fff;border:1px solid var(--border);border-radius:20px;
overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
@media(hover:hover) and (pointer:fine){
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px -24px rgba(14,11,18,.18)}
}
.blog-card__link{
display:flex;flex-direction:column;flex:1 1 auto;width:100%;height:100%;
text-decoration:none;color:inherit;
}
.blog-card__media{
flex:0 0 auto;aspect-ratio:16/10;width:100%;
background:linear-gradient(135deg,#2a1e4a 0%,#7a5ac9 100%);
overflow:hidden;
}
.blog-card__media img{
display:block;width:100%;height:100%;
object-fit:cover;object-position:center;
}
.blog-card__media--1{background:linear-gradient(135deg,#2a1e14 0%,#a85a1f 100%)}
.blog-card__media--2{background:linear-gradient(135deg,#1a2e3a 0%,#e89f6b 100%)}
.blog-card__media--3{background:linear-gradient(135deg,#1e3a5f 0%,#4a90d9 100%)}
.blog-card__media--4{background:linear-gradient(135deg,#2d1b4e 0%,#9b59b6 100%)}
.blog-card__media--5{background:linear-gradient(135deg,#1a4a3a 0%,#2ecc71 100%)}
.blog-card__media--6{background:linear-gradient(135deg,#4a2c1a 0%,#e67e22 100%)}
.blog-card__media--7{background:linear-gradient(135deg,#1a2a4a 0%,#6b8fd4 100%)}
.blog-card__media--8{background:linear-gradient(135deg,#3a1a2e 0%,#c94b7a 100%)}
.blog-card__media--9{background:linear-gradient(135deg,#1e3d2f 0%,#5cb88a 100%)}
.blog-card__media--10{background:linear-gradient(135deg,#4a3520 0%,#d4a24a 100%)}
.blog-card__media--11{background:linear-gradient(135deg,#2e1f4a 0%,#8b6fd4 100%)}
.blog-card__media--12{background:linear-gradient(135deg,#1f3a4a 0%,#4ac4d4 100%)}
.blog-pagination{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:.75rem 1rem;margin-top:clamp(2.75rem,5vw,4rem);
}
.blog-pagination[hidden]{display:none!important}
.blog-pagination__btn{
display:inline-flex;align-items:center;gap:.45rem;
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);
letter-spacing:.08em;text-transform:uppercase;font-weight:500;
padding:.7rem 1.35rem;border:1px solid var(--border);border-radius:999px;
background:#fff;color:var(--text);cursor:pointer;
transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.blog-pagination__btn svg{width:.85rem;height:.85rem;flex-shrink:0}
.blog-pagination__btn:disabled{opacity:.4;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){
.blog-pagination__btn:not(:disabled):hover{background:var(--bg-dark);color:#fff;border-color:var(--bg-dark)}
}
.blog-pagination__pages{
display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0;
}
.blog-pagination__page{
min-width:2.65rem;height:2.65rem;padding:0 .5rem;border-radius:999px;
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);
letter-spacing:.06em;color:var(--text-muted);background:transparent;
border:1px solid transparent;cursor:pointer;
transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.blog-pagination__page[aria-current="page"]{
background:var(--bg-dark);color:#fff;border-color:var(--bg-dark);
}
@media(hover:hover) and (pointer:fine){
.blog-pagination__page:not([aria-current="page"]):hover{
border-color:var(--border);color:var(--text);
}
}
.blog-card__body{
display:flex;flex-direction:column;flex:1 1 auto;gap:.75rem;
padding:1.35rem 1.35rem 1.5rem;
}
.blog-card__cat{
font-family:var(--font-mono);font-size:max(var(--font-min),.62rem);
letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;
}
.blog-card__title{
font-family:var(--font-display);font-size:1.6rem;font-weight:700;line-height:1.25;
letter-spacing:-0.02em;color:var(--text);margin:0;flex:0 0 auto;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
overflow:hidden;
min-height:calc(1.6rem * 1.25 * 2);
max-height:calc(1.6rem * 1.25 * 2);
}
.blog-card__excerpt{
font-family:var(--font-mono);font-size:max(16px,1rem);line-height:1.6;
color:var(--text-muted);margin:0;flex:1 0 auto;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
overflow:hidden;
min-height:calc(max(16px,1rem) * 1.6 * 3);
max-height:calc(max(16px,1rem) * 1.6 * 3);
}
.blog-card__meta{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
margin-top:auto;padding-top:.85rem;border-top:1px solid rgba(26,21,35,.08);
font-family:var(--font-mono);font-size:max(var(--font-min),.72rem);
color:var(--text-muted);letter-spacing:.04em;
}
.blog-card__read{color:var(--text);font-weight:500}
@media(max-width:1024px){
.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.blog-grid{grid-template-columns:minmax(0,1fr);gap:1.25rem}
.blog-card__title{
font-size:1.5rem;
min-height:calc(1.5rem * 1.25 * 2);
max-height:calc(1.5rem * 1.25 * 2);
}
}
/* BLOG POST (DETAIL) */
.work-page.blog-post-page{
padding-top:clamp(9.5rem,18vh,12rem);
padding-bottom:0;
}
.blog-post__back{
display:inline-flex;align-items:center;gap:.5rem;
margin-bottom:clamp(1.75rem,4vw,2.5rem);
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);
letter-spacing:.08em;text-transform:uppercase;font-weight:500;
color:var(--text-muted);text-decoration:none;
transition:color .35s var(--ease);
}
.blog-post__back svg{width:1rem;height:1rem;flex-shrink:0}
@media(hover:hover) and (pointer:fine){
.blog-post__back:hover{color:var(--accent)}
}
.blog-post__header{
max-width:min(920px,100%);margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.blog-post__header .hero-label{
margin-top:0;margin-bottom:1.25rem;text-transform:none;letter-spacing:0.08em;font-weight:600;
overflow:visible;
}
.blog-post__title{
font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.25rem);
line-height:1.08;letter-spacing:-0.03em;font-weight:700;margin:0 0 1.25rem;color:var(--text);
}
.blog-post__title em{
font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
font-size:1em;letter-spacing:-0.015em;color:var(--accent);
}
.blog-post__meta{
display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .65rem;margin:0;
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);
letter-spacing:.06em;color:var(--text-muted);
}
.blog-post__meta-dot{opacity:.45}
.blog-post__cover{
margin:0 0 clamp(2rem,4vw,3rem);border-radius:10px;overflow:hidden;
border:1px solid var(--border);
}
.blog-post__cover img{
display:block;width:100%;height:auto;object-fit:contain;object-position:center;
}
.blog-post__layout{
display:grid;grid-template-columns:minmax(0,1fr) min(300px,32%);
gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
@media(min-width:1025px){
.blog-post__layout{align-items:stretch}
.blog-post__sidebar{
display:flex;flex-direction:column;align-self:stretch;
min-height:100%;
}
.blog-post-sidebar__sticky{flex:1 1 auto;min-height:0}
}
.blog-post__main{min-width:0}
.blog-post__body{
max-width:100%;margin:0;
font-family:var(--font-body);font-size:max(16px,1rem);line-height:1.75;color:var(--text);
background:#fff;padding:clamp(1.75rem,4vw,2.5rem);
border:1px solid var(--border);border-radius:12px;
}
.blog-post__body > *:first-child{margin-top:0}
.blog-post__lede{
font-size:max(17px,1.0625rem);line-height:1.7;color:var(--text);margin:0 0 1.75rem;
}
.blog-post__body h2{
font-family:var(--font-display);font-size:clamp(1.35rem,2.5vw,1.75rem);
font-weight:700;line-height:1.2;letter-spacing:-0.02em;color:var(--text);
margin:2.25rem 0 1rem;
scroll-margin-top:clamp(5.5rem,14vh,7.5rem);
}
.blog-post__body p{margin:0 0 1.25rem}
.blog-post__body ul{
margin:0 0 1.5rem;padding-left:1.25rem;color:var(--text);
}
.blog-post__body li{margin-bottom:.65rem;color:var(--text)}
.blog-post__body li strong{font-weight:600}
.blog-post__body a{
color:var(--accent);text-decoration:underline;text-underline-offset:.15em;
transition:color .35s var(--ease);
}
@media(hover:hover) and (pointer:fine){
.blog-post__body a:hover{color:var(--accent2)}
}
.blog-post__body blockquote{
margin:2rem 0;padding:1.35rem 1.5rem;border-left:3px solid var(--accent);
background:var(--accent-dim);border-radius:0 12px 12px 0;
}
.blog-post__body blockquote p{margin:0;color:var(--text);font-size:max(16px,1rem);line-height:1.65}
.blog-post__footer{
margin:clamp(2.5rem,5vw,3.5rem) 0 0;
padding-top:2rem;border-top:1px solid var(--border);
display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:1.25rem;
}
.blog-post__footer--main{display:none}
.blog-post__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.blog-post__tags--sidebar{margin-top:1.25rem}
.blog-post__sidebar{min-width:0}
.blog-post-sidebar__sticky{
position:static;
display:flex;flex-direction:column;gap:1rem;
}
.blog-post-sidebar__above{
display:flex;flex-direction:column;gap:1rem;
}
.blog-post-sidebar__pin{
display:flex;flex-direction:column;gap:1rem;
}
.blog-post-sidebar__spacer{display:block;flex-shrink:0}
.blog-post-sidebar__pin.is-pinned{z-index:5}
@media(min-width:1025px){
.blog-post-sidebar__pin{align-self:flex-start;width:100%}
.blog-post-toc{margin-bottom:0}
}
.blog-post-sidebar__card{
padding:1.25rem 1.35rem;border-radius:12px;
border:1px solid var(--border);background:#fff;
}
.blog-post-sidebar__label{
margin:0 0 1rem;font-family:var(--font-mono);
font-size:max(var(--font-min),.68rem);letter-spacing:.12em;
text-transform:uppercase;color:var(--text-muted);
}
.blog-post-sidebar__label span{display:inline-block}
.blog-post-sidebar__label::before{
content:'//';color:var(--accent);opacity:.5;margin-right:.5rem;font-size:.75rem;
}
.blog-post-toc{
padding:1.5rem 1.5rem 1.65rem;
margin-bottom:.25rem;
background:linear-gradient(165deg,#fff 0%,#fcfafb 100%);
border:1px solid rgba(26,21,35,.07);
border-radius:16px;
box-shadow:0 22px 50px -34px rgba(26,21,35,.14),inset 0 1px 0 rgba(255,255,255,.95);
}
.blog-post-toc__title{
font-family:var(--font-display);
font-size:1.125rem;
font-weight:700;
letter-spacing:-0.025em;
color:var(--text);
margin:0 0 1.35rem;
padding-bottom:1.15rem;
border-bottom:1px solid rgba(26,21,35,.08);
}
.blog-post-toc__list{
margin:0;
padding:0 0 0 1.85rem;
list-style:none;
position:relative;
}
.blog-post-toc__list::before{
content:'';
position:absolute;
left:5px;
top:.55em;
bottom:.55em;
width:1px;
background:linear-gradient(180deg,transparent 0%,rgba(26,21,35,.14) 12%,rgba(26,21,35,.14) 88%,transparent 100%);
}
.blog-post-toc__list li{
position:relative;
padding-left:.85rem;
}
.blog-post-toc__list li::before{
content:'';
position:absolute;
left:calc(-1.85rem + 5px);
top:.72em;
width:7px;
height:7px;
transform:translate(-50%,-50%);
border-radius:50%;
background:#fff;
border:1.5px solid rgba(26,21,35,.16);
box-sizing:content-box;
z-index:2;
transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.blog-post-toc__list li::after{
content:'';
position:absolute;
left:calc(-1.85rem + 5px);
top:.72em;
width:17px;
height:17px;
transform:translate(-50%,-50%) scale(.6);
border-radius:50%;
border:1.5px solid transparent;
box-sizing:border-box;
z-index:1;
opacity:0;
transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);
}
.blog-post-toc__list li + li{margin-top:1.35rem}
.blog-post-toc__list a{
display:block;
font-family:var(--font-display);
font-size:.9375rem;
font-weight:500;
line-height:1.45;
letter-spacing:-0.012em;
color:rgba(26,21,35,.52);
text-decoration:none;
transition:color .35s var(--ease),transform .35s var(--ease);
}
.blog-post-toc__list li.is-active::before{
width:8px;
height:8px;
background:var(--accent);
border-color:var(--accent);
box-shadow:0 0 0 1px rgba(255,255,255,.6);
}
.blog-post-toc__list li.is-active::after{
opacity:1;
transform:translate(-50%,-50%) scale(1);
border-color:rgba(147,4,119,.38);
}
.blog-post-toc__list li.is-active a{
color:var(--accent);
font-weight:600;
}
@media(hover:hover) and (pointer:fine){
.blog-post-toc__list a:hover{color:var(--accent)}
.blog-post-toc__list li:not(.is-active):hover::before{
border-color:rgba(147,4,119,.32);
transform:translate(-50%,-50%) scale(1.08);
}
.blog-post-toc__list li:not(.is-active):hover a{transform:translateX(2px)}
}
.blog-post-sidebar__meta{
margin:0;display:grid;gap:.85rem;
font-family:var(--font-mono);font-size:max(var(--font-min),.82rem);
}
.blog-post-sidebar__meta div{
display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem 1rem;align-items:baseline;
}
.blog-post-sidebar__meta dt{
margin:0;color:var(--text-muted);font-weight:500;
letter-spacing:.06em;text-transform:uppercase;font-size:max(var(--font-min),.68rem);
}
.blog-post-sidebar__meta dd{margin:0;color:var(--text);font-weight:500}
.blog-post-sidebar__cta-text{
margin:0 0 1.25rem;font-family:var(--font-mono);
font-size:max(var(--font-min),.82rem);line-height:1.6;color:var(--text-muted);
}
.blog-post-sidebar__cta-btn{
opacity:1;
width:100%;
max-width:100%;
justify-content:flex-start;
box-sizing:border-box;
}
.blog-post-sidebar__cta-btn .nav-cta-text{
flex:0 0 auto;
width:calc(100% - 44px);
justify-content:center;
}
.blog-post-share{
display:flex;flex-wrap:wrap;gap:.5rem;
}
.blog-post-share__btn{
width:3rem;height:3rem;padding:0;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--border);background:#fff;color:var(--text);
cursor:pointer;text-decoration:none;
transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.blog-post-share__btn svg{width:1.25rem;height:1.25rem}
.blog-post-share__btn--copy{
position:relative;
overflow:visible;
}
.blog-post-share__btn--copy .blog-post-share__btn-icon{
display:inline-flex;align-items:center;justify-content:center;
width:1.25rem;height:1.25rem;
}
.blog-post-share__btn--copy .blog-post-share__btn-icon svg{width:1.25rem;height:1.25rem}
.blog-post-share__btn--copy .blog-post-share__btn-icon--check{display:none}
.blog-post-share__btn--copy.is-copied .blog-post-share__btn-icon--link{display:none}
.blog-post-share__btn--copy.is-copied .blog-post-share__btn-icon--check{display:inline-flex}
.blog-post-share__btn--copy::after{
content:attr(data-copy-success-label);
position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%) translateY(4px);
font-family:var(--font-mono);font-size:max(var(--font-min),.58rem);font-weight:600;
letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
color:var(--accent);background:#fff;border:1px solid rgba(147,4,119,.22);
border-radius:999px;padding:.3rem .6rem;box-shadow:0 8px 20px -10px rgba(147,4,119,.35);
pointer-events:none;opacity:0;visibility:hidden;
transition:opacity .25s var(--ease),visibility .25s var(--ease),transform .25s var(--ease);
}
.blog-post-share__btn--copy.is-copied::after{
opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.blog-post-share__btn.is-copied{
border-color:var(--accent);color:var(--accent);
}
@media(hover:hover) and (pointer:fine){
.blog-post-share__btn:hover{
border-color:var(--accent);color:var(--accent);transform:translateY(-2px);
}
}
.blog-post__tag{
font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);
letter-spacing:.1em;text-transform:uppercase;font-weight:500;
padding:.45rem .85rem;border-radius:999px;
border:1px solid var(--border);color:var(--text-muted);background:#fff;
}
.blog-post-page .blog-post-related{
position:relative;width:100%;
margin-top:clamp(4rem,8vw,6rem);
padding:clamp(3rem,6vw,4.5rem) 0 clamp(5.5rem,12vh,8rem);
box-sizing:border-box;
}
.blog-post-page .blog-post-related::before{
content:'';position:absolute;inset:0;
left:50%;transform:translateX(-50%);
width:100vw;background:#fbfbfb;z-index:-1;pointer-events:none;
}
.blog-post-page .blog-post-related .blog-list__head,
.blog-post-page .blog-post-related .blog-grid{
position:relative;z-index:1;
}
.blog-post-related__title{
font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);
font-weight:700;letter-spacing:-0.02em;margin:0;color:var(--text);
}
.blog-post-related__title em{
font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
font-size:1em;letter-spacing:-0.015em;color:var(--accent);
}
.blog-grid--related{
margin-top:0;align-items:stretch;
}
.blog-grid--related > .blog-card{
display:flex;flex-direction:column;height:100%;min-height:100%;
}
.blog-grid--related .blog-card__link{
flex:1 1 auto;min-height:100%;
}
.blog-grid--related .blog-card__body{
flex:1 1 auto;min-height:0;
}
.blog-grid--related .blog-card__meta{
flex-shrink:0;margin-top:auto;
}
@media(max-width:1024px){
.blog-post__layout{
grid-template-columns:1fr;
display:flex;flex-direction:column;
}
.blog-post-toc{position:static}
.blog-post-sidebar__sticky{
display:flex;flex-direction:column;gap:1rem;
}
.blog-post-sidebar__above{
display:flex;flex-direction:column;gap:1rem;
}
.blog-post-sidebar__cta{display:block;order:-1}
.blog-post__footer--main{display:none}
.blog-post-sidebar__cta-btn{
width:fit-content;
max-width:100%;
}
.blog-post-sidebar__cta-btn .nav-cta-text{
width:auto;
min-width:min(238px,calc(100vw - 5rem));
}
}
@media(max-width:900px){
.work-page.blog-post-page,
.work-page.legal-page{padding-top:8.5rem;padding-bottom:0}
.blog-post__footer{flex-direction:column;align-items:flex-start}
}
.work-page.legal-page{
padding-top:clamp(9.5rem,18vh,12rem);
padding-bottom:clamp(5rem,10vh,7rem);
background:#fff;
}
.work-page.error-page,
section.work-page.not-found-page{
padding-top:clamp(9.5rem,18vh,12rem);
padding-bottom:clamp(5rem,10vh,7rem);
background:#fff;
min-height:calc(100dvh - 6rem);
}
.work-page.error-page .work-page__inner,
section.work-page.not-found-page .work-page__inner{
display:flex;align-items:center;min-height:clamp(320px,55vh,520px);
}
.work-page.error-page .error-page__hero,
section.work-page.not-found-page .error-page__hero{
max-width:min(720px,100%);margin-bottom:0;
}
.error-page__code{
font-family:var(--font-display);font-size:clamp(3.5rem,14vw,6.5rem);
font-weight:800;line-height:1;letter-spacing:-0.05em;
color:var(--accent);opacity:.22;margin:0 0 .5rem;
}
.error-page__actions{
display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;
margin-top:clamp(1.75rem,4vw,2.5rem);
}
.error-page__actions .nav-cta,
.error-page__actions .btn-secondary{margin:0}
@media(max-width:767px){
.error-page__actions{flex-direction:column;align-items:flex-start}
.error-page__actions .nav-cta,
.error-page__actions .btn-secondary{width:100%;max-width:100%;justify-content:center}
}
.work-page.legal-page .work-page__grid-bg,
.work-page.legal-page .work-page__glow{
display:none!important;
}
.legal-page .blog-post__layout{
display:grid;grid-template-columns:minmax(0,1fr) min(300px,32%);
gap:clamp(2rem,4vw,3.5rem);align-items:start;
margin-top:0;
}
.legal-page .blog-post__main{min-width:0}
.legal-page .work-page__hero{margin-bottom:clamp(2rem,4vw,3rem)}
.legal-page .blog-post__layout .work-page__hero{margin-bottom:clamp(1.5rem,3vw,2rem)}
.legal-page__intro{
max-width:80ch;margin-bottom:1rem;
}
.legal-page__intro a{
color:var(--accent);text-decoration:underline;text-underline-offset:.12em;
}
.legal-page__intro:last-of-type{margin-bottom:0}
.legal-page__meta{
margin:1.25rem 0 0;
font-family:var(--font-mono);font-size:max(var(--font-min),.75rem);
letter-spacing:.08em;text-transform:uppercase;
color:var(--text-muted);
}
.legal-page__body.blog-post__body{
max-width:none;
width:100%;
margin:0;
background:transparent;
border:none;border-radius:0;
padding:0;
box-shadow:none;
font-family:var(--font-mono);
font-size:max(16px,1.0625rem);
line-height:1.65;
letter-spacing:.02em;
}
/* WP “constrained” layout (theme.json contentSize 800px) — full-width copy on legal pages. */
.legal-page__body.blog-post__body.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide):not(.wp-block-list)),
.legal-page__body.blog-post__body > .wp-block-paragraph,
.legal-page__body.blog-post__body > .wp-block-heading,
.legal-page__body.blog-post__body > .wp-block-html{
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
}
.legal-page__body.blog-post__body ul.wp-block-list,
.legal-page__body.blog-post__body > ul.wp-block-list,
.legal-page__body ul.wp-block-list{
max-width:none!important;
margin:0 0 1.5rem!important;
margin-left:0!important;
margin-right:0!important;
padding-left:clamp(1.25rem,3vw,2rem)!important;
padding-right:0!important;
list-style-position:outside;
list-style-type:disc;
}
.legal-page__body.blog-post__body ol.wp-block-list,
.legal-page__body.blog-post__body > ol.wp-block-list,
.legal-page__body ol.wp-block-list{
max-width:none!important;
margin:0 0 1.5rem!important;
margin-left:0!important;
margin-right:0!important;
padding-left:clamp(1.25rem,3vw,2rem)!important;
padding-right:0!important;
list-style-position:outside;
}
.legal-page__body p,
.legal-page__body li,
.legal-page__body td{
font-family:inherit;
letter-spacing:inherit;
}
.legal-page__body h2{
font-family:var(--font-display);
font-size:clamp(1.65rem,3.2vw,2.15rem);
letter-spacing:-0.02em;
line-height:1.2;
margin-top:clamp(2.25rem,4vw,3rem);
scroll-margin-top:clamp(5.5rem,14vh,7.5rem);
}
.legal-page__body h2:first-child{margin-top:0}
.legal-page__body h3{
font-family:var(--font-display);font-size:max(17px,1.0625rem);
font-weight:600;line-height:1.35;margin:1.5rem 0 .75rem;color:var(--text);
}
.legal-page__effective{
margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding-top:1.75rem;
border-top:1px solid var(--border);
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);
letter-spacing:.04em;color:var(--text-muted);
}
.legal-page__table-wrap{
margin:1.5rem 0 1.75rem;overflow-x:auto;
border:1px solid var(--border);border-radius:12px;
}
.legal-page__table{
width:100%;border-collapse:collapse;font-size:max(var(--font-min),.9rem);
}
.legal-page__table th,
.legal-page__table td{
padding:.85rem 1rem;text-align:left;vertical-align:top;
border-bottom:1px solid var(--border);
}
.legal-page__table th{
font-family:var(--font-mono);font-size:max(var(--font-min),.72rem);
letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
background:rgba(255,255,255,.02);
}
.legal-page__table tr:last-child td{border-bottom:0}
.legal-page__table td:first-child{font-weight:500;color:var(--text)}
@media(max-width:1024px){
.legal-page .blog-post__layout{
display:block;
grid-template-columns:1fr;
}
.legal-page .blog-post__sidebar,
.legal-page aside.blog-post__sidebar{
display:none!important;
}
}
.project-detail-page .project-related .work-grid--related{
margin-top:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(1rem,2vw,1.5rem);
position:relative;z-index:1;
}
.project-detail-page .project-related .work-grid--related .work-item{
grid-column:span 1!important;height:auto;
}
.project-detail-page .project-related .work-grid--related .work-item-media{
flex:0 0 auto!important;aspect-ratio:4/3!important;min-height:0;
}
.project-detail-page .project-related .blog-list__head--projects{
display:flex;align-items:center;justify-content:space-between;
gap:clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap;
}
.project-detail-page .project-related .blog-list__head-main{
flex:1 1 auto;min-width:0;
}
.project-detail-page .project-related .blog-list__head-main .section-label{margin-bottom:1rem}
.project-detail-page .project-related__cta{
flex-shrink:0;opacity:1;
}
@media(max-width:768px){
.project-detail-page .project-related .blog-list__head--projects{
flex-direction:column;align-items:flex-start;
}
}
@media(max-width:900px){
.project-detail-page .project-related .work-grid--related{
grid-template-columns:1fr;
}
}
/* PROJECT CASE STUDY */
.project-detail-page .project-header{
display:flex;align-items:center;justify-content:space-between;
gap:clamp(1.25rem,3vw,2.5rem);max-width:100%;
}
.project-detail-page .project-header__main{
flex:1 1 auto;min-width:0;max-width:min(920px,100%);
}
.project-detail-page .project-header__cta{
flex-shrink:0;opacity:1;align-self:center;
}
@media(max-width:768px){
.project-detail-page .project-header{
flex-direction:column;align-items:flex-start;
}
.project-detail-page .project-header__cta{
align-self:flex-start;margin-bottom:0;
}
}
.project-detail-page .case-story{
display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.75rem);
}
.project-detail-page .case-section{
background:#fff;border:1px solid var(--border);border-radius:12px;
padding:clamp(1.75rem,4vw,2.5rem);
scroll-margin-top:clamp(5.5rem,14vh,7.5rem);
}
.project-detail-page .case-section .section-label{margin-bottom:1rem}
.project-detail-page .case-section__title{
font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.15rem);
font-weight:700;line-height:1.12;letter-spacing:-0.025em;margin:0 0 1rem;color:var(--text);
}
.project-detail-page .case-section__title em{
font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
color:var(--accent);letter-spacing:-0.015em;
}
.project-detail-page .case-section__lede,
.project-detail-page .case-section__intro{
font-family:var(--font-mono);font-size:max(16px,1rem);line-height:1.65;
letter-spacing:.02em;color:var(--text-muted);margin:0 0 1.5rem;max-width:62ch;
}
.project-detail-page .case-section__lede{font-size:max(17px,1.0625rem);color:var(--text)}
.project-detail-page .case-section__closing{
margin:1.5rem 0 0;font-family:var(--font-mono);font-size:max(16px,1rem);
line-height:1.65;letter-spacing:.02em;color:var(--text-muted);
}
.project-detail-page .case-section__closing a{
color:var(--accent);text-decoration:underline;text-underline-offset:.15em;
}
.project-detail-page .case-meta{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;
margin:0;padding:1.25rem 0 0;border-top:1px solid var(--border);
}
.project-detail-page .case-meta dt{
font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);
letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0 0 .35rem;
}
.project-detail-page .case-meta dd{
margin:0;font-family:var(--font-body);font-size:max(15px,.95rem);
font-weight:600;color:var(--text);line-height:1.4;
}
.project-detail-page .case-points{
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem;
}
.project-detail-page .case-points__item{
display:grid;grid-template-columns:auto 1fr;gap:1rem 1.25rem;align-items:start;
padding:1.15rem 1.25rem;border-radius:10px;border:1px solid var(--border);
background:var(--bg, #fafafa);
}
.project-detail-page .case-section--problem .case-points__item{background:rgba(147,4,119,0.03)}
.project-detail-page .case-section--solution .case-points__item{background:rgba(147,4,119,0.05);border-color:rgba(147,4,119,0.12)}
.project-detail-page .case-points__num{
font-family:var(--font-mono);font-size:max(var(--font-min),.72rem);
letter-spacing:.08em;color:var(--accent);font-weight:600;line-height:1.4;
}
.project-detail-page .case-points__label{
font-family:var(--font-display);font-size:max(17px,1.05rem);font-weight:600;
letter-spacing:-0.015em;margin:0 0 .4rem;color:var(--text);
}
.project-detail-page .case-points__item p{
margin:0;font-family:var(--font-mono);font-size:max(15px,.95rem);
line-height:1.65;letter-spacing:.02em;color:var(--text-muted);
}
.project-detail-page .case-compare{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);
}
.project-detail-page .case-compare__panel{margin:0}
.project-detail-page .case-compare__tag{
display:inline-block;margin:0 0 .85rem;
font-family:var(--font-mono);font-size:max(var(--font-min),.7rem);
letter-spacing:.12em;text-transform:uppercase;font-weight:600;
color:var(--text-muted);padding:.35rem .75rem;border-radius:999px;
border:1px solid var(--border);background:#f5f5f5;
}
.project-detail-page .case-compare__tag--after{
color:var(--accent);border-color:rgba(147,4,119,0.25);background:var(--accent-dim);
}
.project-detail-page .case-compare__shot{
border-radius:12px;overflow:hidden;border:1px solid var(--border);
background:#f8f8f8;
}
.project-detail-page .case-compare__shot img{
display:block;width:100%;height:auto;object-fit:cover;vertical-align:middle;
}
.project-detail-page .case-compare__panel:first-child .case-compare__shot img{
filter:saturate(0.15) contrast(1.05) brightness(1.04);
}
.project-detail-page .case-compare__caption{
margin:.85rem 0 0;font-family:var(--font-mono);font-size:max(14px,.88rem);
line-height:1.65;letter-spacing:.02em;color:var(--text-muted);
}
.project-detail-page .case-outcomes{
margin:0 0 1.5rem;padding:0;list-style:none;
display:flex;flex-direction:column;gap:.75rem;
}
.project-detail-page .case-outcomes li{
position:relative;padding-left:1.35rem;font-family:var(--font-mono);
font-size:max(16px,1rem);line-height:1.65;letter-spacing:.02em;color:var(--text-muted);
}
.project-detail-page .case-outcomes li::before{
content:'';position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;
background:var(--accent);
}
.project-detail-page .case-pullquote{
margin:0;padding:1.35rem 1.5rem;border-left:3px solid var(--accent);
background:var(--accent-dim);border-radius:0 12px 12px 0;
}
.project-detail-page .case-pullquote p{
margin:0;font-family:var(--font-mono);font-size:max(16px,1rem);
line-height:1.65;letter-spacing:.02em;color:var(--text);
}
@media(max-width:768px){
.project-detail-page .case-meta{grid-template-columns:1fr}
.project-detail-page .case-compare{grid-template-columns:1fr}
.project-detail-page .case-points__item{grid-template-columns:1fr;gap:.5rem}
}
@media(max-width:900px){
.project-detail-page .case-section{padding:1.35rem 1.25rem}
}
/* CONTACT PAGE */
.contact-page{
position:relative;
padding:clamp(7.5rem,14vh,9.5rem) 3.5rem clamp(5rem,10vh,7rem);
overflow:hidden;
}
.contact-page__grid-bg{
position:absolute;inset:0;
background-image:linear-gradient(rgba(147,4,119,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(147,4,119,0.04) 1px,transparent 1px);
background-size:48px 48px;
pointer-events:none;
z-index:0;
}
.contact-page__glow{
position:absolute;top:-8%;right:-12%;width:min(640px,70vw);height:min(640px,70vw);
background:radial-gradient(circle,rgba(147,4,119,0.07) 0%,transparent 65%);
pointer-events:none;z-index:0;
}
.contact-page__inner{position:relative;z-index:1;max-width:1440px;margin:0 auto}
.contact-layout{
display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,560px);
gap:clamp(2.25rem,5vw,4.5rem);align-items:start;
}
.contact-layout.wp-block-group.is-layout-grid{
grid-template-columns:minmax(0,1fr) minmax(360px,560px);
gap:clamp(2.25rem,5vw,4.5rem);
align-items:start;
}
.contact-layout > .contact-main,
.contact-layout > .wp-block-group.contact-main{
min-width:0;margin:0;align-self:start;
}
/* Align form with headline row (skip the // label line), matching static HTML. */
.contact-layout > .contact-aside,
.contact-layout > .wp-block-group.contact-aside,
.contact-layout > .wp-block-html,
.contact-layout > .wp-block-group.contact-form-panel{
margin:4rem 0 0;align-self:start;justify-self:end;width:100%;max-width:560px;min-width:0;
}
.contact-layout > .contact-aside .wp-block-html,
.contact-layout > .wp-block-html .contact-form-panel,
.contact-layout > .wp-block-group.contact-form-panel{
margin:0;width:100%;
}
.contact-main{min-width:0}
.contact-intro .section-label{margin-bottom:1.15rem}
.contact-page__lede{
font-family:var(--font-mono);font-size:18px;line-height:1.65;color:var(--text-muted);
margin:0;max-width:44ch;letter-spacing:.02em;
}
.contact-page__note{
font-family:var(--font-mono);font-size:max(var(--font-min),.76rem);line-height:1.55;
color:var(--text-muted);margin:.85rem 0 0;max-width:55ch;letter-spacing:.02em;
}
.contact-social-proof{
display:flex;align-items:center;gap:1.1rem;margin-top:clamp(1.5rem,3vw,2rem);
}
.contact-social-proof.wp-block-group.is-layout-flow > *{
margin-block-start:0;margin-block-end:0;
}
.contact-social-proof__content.wp-block-group.is-layout-flow > *{
margin-block-start:0;margin-block-end:0;
}
.contact-social-proof__content.wp-block-group.is-layout-flow > * + *{
margin-block-start:.4rem;
}
.contact-stats.wp-block-group.is-layout-grid,
.contact-stats.wp-block-group.is-layout-grid.contact-stats{
gap:clamp(1.35rem,2.5vw,1.75rem) clamp(1.15rem,3vw,2rem);
}
.contact-stats.wp-block-group.is-layout-grid > .contact-stats__item,
.contact-stats.wp-block-group.is-layout-flow > .contact-stats__item{
margin:0;
}
.contact-stats__item.wp-block-group{
display:flex;flex-direction:column;gap:.45rem;align-items:flex-start;min-width:0;
}
.contact-stats__item.wp-block-group.is-layout-flow > *,
.contact-stats__item.wp-block-group.is-layout-flex > *{
margin-block-start:0;margin-block-end:0;
}
.contact-stats__item .contact-stats__value,
.contact-stats__item .contact-stats__label,
.contact-stats__item p.contact-stats__value,
.contact-stats__item p.contact-stats__label{
margin:0;
}
.contact-social-proof__avatars{display:flex;align-items:center;flex-shrink:0;padding-right:.15rem}
.contact-social-proof__avatars img{
width:48px;height:48px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;
margin-left:-14px;box-shadow:0 3px 14px rgba(26,21,35,.14);position:relative;
}
.contact-social-proof__avatars img:first-child{margin-left:0;z-index:1}
.contact-social-proof__avatars img:nth-child(2){z-index:2}
.contact-social-proof__avatars img:nth-child(3){z-index:3}
.contact-social-proof__content{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.contact-social-proof__rating{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.contact-social-proof__rating .wp-hero-trust__stars--svg{position:relative;line-height:0}
.contact-social-proof__rating .wp-hero-trust__sstar{width:17px}
.contact-social-proof__score{
font-family:var(--font-display);font-size:.72rem;font-weight:700;color:#fff;
background:var(--bg-dark);padding:.28rem .55rem;border-radius:999px;line-height:1;letter-spacing:-.02em;
}
.contact-social-proof__label{
font-family:var(--font-display);font-size:clamp(.95rem,1.8vw,1.05rem);font-weight:700;
color:var(--text);margin:0;letter-spacing:-.02em;line-height:1.2;
}
.contact-stats{
list-style:none;margin:clamp(2rem,4vw,2.75rem) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(1.35rem,2.5vw,1.75rem) clamp(1.15rem,3vw,2rem);max-width:min(100%,28rem);
}
.contact-stats__item{display:flex;flex-direction:column;gap:.45rem;text-align:left;min-width:0}
.contact-stats__value{
font-family:'Playfair Display',Georgia,serif;font-weight:600;font-variant-numeric:lining-nums;
font-size:clamp(1.85rem,4.2vw,2.65rem);line-height:1.05;letter-spacing:.02em;color:var(--text);
}
.contact-stats__label{
font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);line-height:1.4;
letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
}
.contact-intro__trust{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.contact-intro__trust .wp-hero-trust--about{margin:0}
.contact-intro__meta{
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);line-height:1.5;
color:var(--text-muted);margin:0;letter-spacing:.02em;
}
.contact-aside{display:flex;flex-direction:column;gap:1rem;margin-top:clamp(1.75rem,4vw,2.5rem)}
.contact-form-panel{
position:sticky;top:clamp(6.5rem,12vh,8rem);width:100%;max-width:560px;justify-self:end;min-width:0;
}
.contact-card{
border:1px solid var(--border);border-radius:18px;background:#fff;
padding:1.35rem 1.4rem;box-shadow:0 22px 48px -34px rgba(26,21,35,.18);
}
.contact-card--team{display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem;align-items:center}
.contact-card__logo{
width:72px;height:72px;border-radius:16px;border:1px solid var(--border);
background:linear-gradient(145deg,#faf7fc,#fff);display:flex;align-items:center;justify-content:center;padding:.65rem;box-sizing:border-box;
}
.contact-card__logo img{width:100%;height:auto;display:block}
.contact-card__name{font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--text);margin:0 0 .2rem;letter-spacing:-.02em}
.contact-card__role{font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);color:var(--text-muted);margin:0;letter-spacing:.06em;text-transform:uppercase}
.contact-trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.contact-trust-row .wp-hero-trust--about{margin:0}
.contact-avatars{display:flex;align-items:center;margin-top:.15rem}
.contact-avatars img{
width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff;
margin-left:-10px;box-shadow:0 4px 12px rgba(26,21,35,.12);
}
.contact-avatars img:first-child{margin-left:0}
.contact-avatars__label{
font-family:var(--font-mono);font-size:max(var(--font-min),.72rem);color:var(--text-muted);
letter-spacing:.04em;margin:.35rem 0 0;
}
.contact-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.85rem}
.contact-steps li{
display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;align-items:start;
}
.contact-steps__num{
font-family:var(--font-mono);font-size:max(var(--font-min),.62rem);font-weight:600;
color:var(--accent);letter-spacing:.12em;padding-top:.15rem;
}
.contact-steps__title{font-family:var(--font-display);font-size:.98rem;font-weight:700;color:var(--text);margin:0 0 .15rem;letter-spacing:-.015em}
.contact-steps__desc{font-family:var(--font-mono);font-size:max(var(--font-min),.76rem);line-height:1.5;color:var(--text-muted);margin:0;letter-spacing:.02em}
.contact-direct{display:flex;flex-direction:column;gap:.65rem}
.contact-direct a{
font-family:var(--font-mono);font-size:max(var(--font-min),.85rem);color:var(--text);
text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;transition:color .25s var(--ease);
}
.contact-direct a:hover{color:var(--accent)}
.contact-direct svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.contact-form{
background:#fff;
border:1px solid var(--border);
border-radius:18px;
padding:1.5rem 1.5rem 1.65rem;
box-shadow:0 22px 48px -34px rgba(26,21,35,.12);
}
.contact-form__fields{display:flex;flex-direction:column;gap:0}
.contact-form__row{display:flex;flex-direction:column;gap:0}
.contact-form__row--2{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem;align-items:start;
}
.contact-field{display:flex;flex-direction:column;gap:.55rem;min-width:0;margin-bottom:2rem}
.contact-form__row{margin-bottom:2rem}
.contact-form__fields>.contact-field:last-child,
.contact-form__fields>.contact-form__row:last-child{margin-bottom:0}
.contact-form__row--2 .contact-field{margin-bottom:0}
.contact-field--full{grid-column:1/-1}
.contact-field label,.contact-field-label{
font-family:var(--font-display);font-size:18px;font-weight:700;
letter-spacing:-.02em;text-transform:capitalize;color:var(--text);line-height:1.25;
min-height:1.35em;
}
.contact-card__note{
font-family:var(--font-mono);font-size:max(var(--font-min),.78rem);line-height:1.55;
color:var(--text-muted);margin:0;letter-spacing:.02em;
}
.contact-field label .req{color:var(--text);margin-left:.12em;font-weight:700}
.contact-field input,.contact-field select,.contact-field textarea{
width:100%;box-sizing:border-box;font-family:var(--font-mono);font-size:16px;
color:var(--text);background:transparent;border:none;border-bottom:1px solid rgba(26,21,35,.22);
border-radius:0;padding:.55rem 0 .65rem;transition:border-color .25s var(--ease);
}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(26,21,35,.38)}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{
outline:none;border-bottom-color:var(--text);box-shadow:none;
}
.contact-field textarea{min-height:4.5rem;resize:vertical;line-height:1.55;padding-top:.35rem}
.contact-chips,
.contact-form-panel .fluentform.teamexio-contact-fluent .contact-chips{
display:flex;flex-wrap:wrap;gap:.45rem;
}
.contact-chip,
.contact-form-panel .fluentform.teamexio-contact-fluent label.contact-chip{
position:relative;cursor:pointer;margin:0;display:inline-flex;
}
.contact-chip input,
.contact-form-panel .fluentform.teamexio-contact-fluent label.contact-chip input{
position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
.contact-chip span,
.contact-form-panel .fluentform.teamexio-contact-fluent label.contact-chip>span{
display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:13px;font-weight:500;
padding:.42rem .72rem;border-radius:999px;border:1px solid rgba(26,21,35,.14);background:#fff;
color:var(--text);transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
line-height:1.3;white-space:nowrap;box-shadow:none;
}
.contact-chip input:checked+span,
.contact-chip input:checked+span:hover,
.contact-form-panel .fluentform.teamexio-contact-fluent label.contact-chip input:checked+span,
.contact-form-panel .fluentform.teamexio-contact-fluent label.contact-chip input:checked+span:hover,
.contact-form-panel .fluentform.teamexio-contact-fluent .ff-el-form-check.ff_item_selected label.contact-chip>span,
.contact-form-panel .fluentform.teamexio-contact-fluent .ff-el-form-check.ff_item_selected label.contact-chip>span:hover{
border-color:var(--bg-dark);background:var(--bg-dark);color:#fff;
}
.contact-chip span:hover,
.contact-form-panel .fluentform.teamexio-contact-fluent label.contact-chip:not(:has(input:checked))>span:hover{
border-color:rgba(26,21,35,.28);
}
.contact-chip input:focus-visible+span,
.contact-form-panel .fluentform.teamexio-contact-fluent label.contact-chip input:focus-visible+span{
outline:2px solid var(--accent);outline-offset:2px;
}
.contact-form__check{
display:flex;align-items:flex-start;gap:.6rem;font-family:var(--font-mono);
font-size:14px;color:var(--text-muted);line-height:1.45;cursor:pointer;
}
.contact-form__check input{
width:.95rem;height:.95rem;margin-top:.2rem;accent-color:var(--bg-dark);flex-shrink:0;
border:1px solid rgba(26,21,35,.25);border-radius:3px;
}
.contact-form__actions{
display:flex;margin-top:2.5rem;padding-top:0;border-top:none;
}
.contact-form__actions .nav-cta{opacity:1;margin-left:0}
.contact-form__submit{
cursor:pointer;border:none;background:transparent;padding:0;font:inherit;
}
.contact-form__submit:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.contact-form__success,.contact-form__error{
font-family:var(--font-mono);font-size:max(var(--font-min),.9rem);line-height:1.55;
padding:1.25rem 1.35rem;border-radius:14px;margin-bottom:1rem;
}
.contact-form__success{background:rgba(147,4,119,.06);border:1px solid rgba(147,4,119,.18);color:var(--text)}
.contact-form__error{background:rgba(180,40,40,.06);border:1px solid rgba(180,40,40,.2);color:#6b2020}
.contact-process{
background:var(--bg2);padding:clamp(4rem,8vh,5.5rem) 3.5rem;border-top:1px solid var(--border);
}
.contact-process__inner{max-width:1440px;margin:0 auto}
.contact-process__title{
font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2rem);font-weight:700;
letter-spacing:-.03em;margin:0 0 2rem;color:var(--text);text-align:center;
}
.contact-process__grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;
}
.contact-process__item{
background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.35rem 1.25rem;text-align:center;
}
.contact-process__item strong{
display:block;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);
margin:.65rem 0 .35rem;letter-spacing:-.015em;
}
.contact-process__item p{
font-family:var(--font-mono);font-size:max(var(--font-min),.74rem);line-height:1.5;color:var(--text-muted);margin:0;letter-spacing:.02em;
}
.contact-process__icon{
width:44px;height:44px;margin:0 auto;border-radius:12px;background:rgba(147,4,119,.08);
display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.contact-platforms{padding:clamp(3.5rem,7vh,5rem) 3.5rem}
.contact-platforms__inner{max-width:1440px;margin:0 auto;text-align:center}
.contact-platforms__title{
font-family:var(--font-display);font-size:clamp(1.35rem,2.5vw,1.75rem);font-weight:700;
letter-spacing:-.025em;margin:0 0 1.75rem;color:var(--text);
}
.contact-platforms__row{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 1.35rem;
}
.contact-platforms__badge{
font-family:var(--font-mono);font-size:max(var(--font-min),.68rem);font-weight:600;
letter-spacing:.1em;text-transform:uppercase;padding:.55rem 1rem;border-radius:999px;
border:1px solid var(--border);background:#fff;color:var(--text-muted);
}
.contact-platforms__badge--accent{border-color:rgba(147,4,119,.22);color:var(--accent);background:rgba(147,4,119,.04)}
/* Desktop comp only (~1080px) — 50/50 columns; not iPad / tablet (≤1024px). */
@media(max-width:1080px) and (min-width:1025px) and (hover:hover) and (pointer:fine){
.contact-layout,
.contact-layout.wp-block-group.is-layout-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(1.75rem,3vw,2.5rem);
}
.contact-layout > .contact-aside,
.contact-layout > .wp-block-group.contact-aside,
.contact-layout > .wp-block-html,
.contact-layout > .wp-block-group.contact-form-panel{
max-width:100%;justify-self:stretch;
}
.contact-form-panel{max-width:100%;justify-self:stretch}
}
@media(max-width:1024px){
.contact-layout,
.contact-layout.wp-block-group.is-layout-grid{
grid-template-columns:1fr;
gap:2.5rem;
width:100%;
}
.contact-layout > .contact-main,
.contact-layout > .wp-block-group.contact-main,
.contact-layout > .contact-aside,
.contact-layout > .wp-block-group.contact-aside,
.contact-layout > .wp-block-html,
.contact-layout > .wp-block-group.contact-form-panel{
width:100%;
max-width:100%;
margin-top:0;
justify-self:stretch;
align-self:stretch;
}
.contact-form-panel{
position:static;
width:100%;
max-width:100%;
justify-self:stretch;
}
.contact-process__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
.pricing-page{padding:7rem 1.5rem 2.5rem}
.contact-page{padding:7rem 1.5rem 3.5rem}
.contact-page__lede{font-size:16px}
.contact-stats{max-width:100%;gap:1.25rem 1rem}
.contact-stats__value{font-size:clamp(1.65rem,7vw,2.15rem)}
.contact-form-panel{max-width:100%}
.contact-process{padding:3.5rem 1.5rem}
.contact-process__grid{grid-template-columns:1fr}
.contact-platforms{padding:3rem 1.5rem}
.contact-form__row--2{grid-template-columns:1fr}
.contact-form__actions .nav-cta{width:100%;max-width:320px;justify-content:center}
}
/* ── Mobile scroll performance (visual parity, lower paint cost) ── */
@media(max-width:767px){
html{scroll-behavior:auto}
html.perf-mobile body{-webkit-overflow-scrolling:touch}
/* Fixed full-viewport layers — worst scroll offenders */
.cursor,.hero-canvas{display:none!important}
.nav-logo-cursor,.hero-desc-cursor,.sservice-note-cursor{display:none!important}
.nav-logo img{height:40px}
nav#nav{
isolation:auto;
contain:layout style;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
background:rgba(250,250,250,.98);
transition:border-color .25s var(--ease),padding .25s var(--ease),box-shadow .25s var(--ease);
}
nav#nav.scrolled{
background:rgba(250,250,250,.98);
box-shadow:0 1px 0 rgba(26,21,35,.1);
}
.hero-bg-grid,.hero-glow,.hero-glow-2{display:none!important}
.hero-deliver-card,.hero-stat-card,.hero-side-badge,.hero-hex-filled,
.hero-about-timeline,.deliver-fill{
animation:none!important;
}
.stat-card-icon,.stat-card-icon::after,.stat-card-icon svg,
.milestone.active .milestone-dot::after{
animation:none!important;
}
.milestone.active .milestone-dot{
box-shadow:0 0 0 4px rgba(147,4,119,.18);
}
.aiflow::before{display:none!important}
.aiflow-card{
animation:none!important;
background:rgba(147,4,119,.42);
border:1px solid rgba(231,139,213,.22);
padding:0;
}
.aiflow-hub-core,.aiflow-hub-core::before{animation:none!important}
.aiflow-hub-core::before{display:none}
.aiflow-hub-logo,.aiflow-brief-check,.aiflow-tag::before{filter:none!important;box-shadow:none!important}
.aiflow-sprint-fill::after{animation:none!important}
.stack::before{display:none}
.stack::after{
background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(147,4,119,.14),transparent 72%);
}
.stack-card,.stack-card-label{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
background:rgba(255,255,255,.94);
box-shadow:0 2px 14px -6px rgba(26,21,35,.08);
}
.stack-card:hover{transform:none;box-shadow:0 2px 14px -6px rgba(26,21,35,.08)}
.work-item-view{
-webkit-backdrop-filter:none;
backdrop-filter:none;
background:rgba(255,255,255,.22);
}
.work-item-media{contain:layout style paint}
.work-item:hover .work-item-media{transform:none}
.pd-glow,.work-page__glow,.work-page__grid-bg{display:none!important}
.pd-card,.pd-badge,.ps-card{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
.ps-shape img{filter:none!important;will-change:auto!important}
.ps-card:hover .ps-shape img{animation:none!important}
.proposal-modal__backdrop,.img-lightbox{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
.logos-row{
-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.logos-track--ltr,.logos-track--rtl{
animation-play-state:running!important;
will-change:transform;
transform:translateZ(0);
backface-visibility:hidden;
}
.marquee-track{
will-change:auto!important;
transform:none;
}
.sservice-visual [class*="mock-"] *,
.sservice-visual .mock-code-caret,
.sservice-visual .mock-code-line,
.sservice-visual .mock-block,
.sservice-visual .mock-rev-line,
.sservice-visual .mock-rev-dot,
.sservice-visual .mock-order,
.sservice-visual .mock-design-tool,
.sservice-visual .mock-design-layer,
.sservice-visual .mock-design-node,
.sservice-visual .mock-design-handles > span{
animation:none!important;
}
.wp-hero-trust__stars--run .wp-hero-trust__sstar,
.wp-hero-trust__sstar{
animation:none!important;
filter:none!important;
}
.wp-work-process__card{
position:relative!important;
top:auto!important;
margin-top:0!important;
margin-bottom:1.25rem!important;
box-shadow:0 12px 28px -18px rgba(26,21,35,.12)!important;
}
.wp-work-process__card + .wp-work-process__card{margin-top:0!important}
.wp-work-process__card:last-child{margin-bottom:2rem!important}
.about-provide-watermark{
opacity:.05!important;
transform:translateX(-50%)!important;
-webkit-text-stroke:0;
}
.why-icon > *{will-change:auto!important}
.work-item,.stack-card,.blog-card,.faq-item,.pd-card,.ps-card,.step,
.aiflow-card,.sservice,.why-card,.testi-card{
content-visibility:auto;
contain-intrinsic-size:auto 260px;
}
section.hero,section.services,section.work,section.aiflow,section.why,
section.stack,section.testimonials,section.faq,section.logos,
section.pricing-spline,section.about-provide,.footer{
content-visibility:auto;
contain-intrinsic-size:auto 480px;
}
.testi-track,.about-testimonials__track{
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;
}
.testi-card,.about-testimonials__track > article{
scroll-snap-align:start;
}
img,picture img{max-width:100%;height:auto}
.work-item-media img{width:100%;height:100%;object-fit:cover}
.sservice{box-shadow:0 12px 28px -16px rgba(14,11,18,.12)!important}
.sservice-visual .mock-code,
.sservice-visual .mock-blocks,
.sservice-visual .mock-rev,
.sservice-visual .mock-design,
.sservice-visual .mock-orders{
box-shadow:0 10px 24px -14px rgba(0,0,0,.22)!important;
}
.wp-service-tabs__media{box-shadow:0 10px 24px -16px rgba(26,21,35,.14)!important}
}
@media(max-width:767px) and (hover:none){
.work-item:hover .work-item-media,
.work-item:hover .work-item-media img,
.stack-card:hover,.why-card:hover,.trust-badge:hover,
.service-card:hover,.sservice-cta:hover,.pd-card:hover,.ps-card:hover{
transform:none!important;
}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
.logos-track--ltr,.logos-track--rtl,.marquee-track{animation:none!important}
}
/* CSS-only accordion on mobile (no height layout thrash) */
html.details-acc-css .faq-answer,
html.perf-mobile .faq-answer,
html.details-acc-css .about-provide-panel,
html.perf-mobile .about-provide-panel{
display:grid!important;
grid-template-rows:0fr;
height:auto!important;
opacity:0;
transition:grid-template-rows .38s var(--ease),opacity .32s var(--ease);
}
html.details-acc-css .faq-item[open] .faq-answer,
html.perf-mobile .faq-item[open] .faq-answer,
html.details-acc-css .about-provide-item[open] .about-provide-panel,
html.perf-mobile .about-provide-item[open] .about-provide-panel{
grid-template-rows:1fr;
opacity:1;
}
html.details-acc-css .faq-answer>*,
html.perf-mobile .faq-answer>*,
html.details-acc-css .about-provide-panel-inner,
html.perf-mobile .about-provide-panel-inner{
min-height:0;
overflow:hidden;
}
@media(max-width:1024px){
.logos-track--ltr,.logos-track--rtl{animation-duration:80s}
}
@media(max-width:767px){
.logos-track--ltr,.logos-track--rtl{animation-duration:100s}
}
/* Mobile-lite: no GSAP, no loader, minimal motion (Orbix-style scroll) */
html.mobile-lite #loader{display:none!important}
html.mobile-lite .nav-logo,
html.mobile-lite .nav-links>a,
html.mobile-lite .nav-top-link,
html.mobile-lite .nav-cta{opacity:1!important;transform:none!important}
html.mobile-lite .hero-deliver-card,
html.mobile-lite .hero-stat-card,
html.mobile-lite .hero-side-badge,
html.mobile-lite .hero-hex-outline,
html.mobile-lite .hero-hex-filled{display:none!important}
html.mobile-lite .hero-bg-grid,
html.mobile-lite .hero-glow,
html.mobile-lite .hero-glow-2,
html.mobile-lite .hero-actions,
html.mobile-lite .hero .hero-label,
html.mobile-lite .hero .hero-label span,
html.mobile-lite .hero h1,
html.mobile-lite .hero h1 .line,
html.mobile-lite .hero h1 .line span,
html.mobile-lite .trust-badge,
html.mobile-lite .milestone,
html.mobile-lite .stat,
html.mobile-lite .work-item,
html.mobile-lite .section-label span,
html.mobile-lite .section-title,
html.mobile-lite .step,
html.mobile-lite .stack-card,
html.mobile-lite .pd-card,
html.mobile-lite .ps-card,
html.mobile-lite .faq-item,
html.mobile-lite .blog-card{opacity:1!important;transform:none!important}
html.mobile-lite .marquee-track{animation:none!important;transform:none!important}
html.mobile-lite .logos-track--ltr,
html.mobile-lite .logos-track--rtl{
animation-play-state:running!important;
will-change:transform;
transform:translateZ(0);
backface-visibility:hidden;
}
html.mobile-lite .logos-row{
-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
html.mobile-lite .marquee{overflow:hidden}
/* Mobile-lite render mode — same brand, fewer compositor layers */
html.mobile-lite .cursor,
html.mobile-lite .hero-canvas{display:none!important}
html.mobile-lite nav#nav{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
background:rgba(250,250,250,.98);
}
html.mobile-lite .aiflow::before{display:none!important}
html.mobile-lite .aiflow-card{
animation:none!important;
background:rgba(147,4,119,.42);
border:1px solid rgba(231,139,213,.22);
padding:0;
}
html.mobile-lite .stack-card,
html.mobile-lite .stack-card-label{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
background:rgba(255,255,255,.94);
}
html.mobile-lite .stack::before{display:none}
html.mobile-lite .pd-card,
html.mobile-lite .pd-badge,
html.mobile-lite .ps-card{
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
html.mobile-lite .pd-glow,
html.mobile-lite .work-page__glow{display:none!important}
html.mobile-lite .wp-work-process__card{
position:relative!important;
top:auto!important;
margin-top:0!important;
}
html.mobile-lite .work-item-media{contain:layout style paint}
html.mobile-lite .marquee-track{will-change:auto!important}