/* Pixo Box Art — global refinement layer. Loaded last on every page. */

/* Brand accent: logo pink (the dot on the "i") is the secondary color.
   Remaps the DS accent ramp so every accent surface site-wide is pink. */
:root{
--pink:#C4185C;
--pink-700:#9E1149;
--pink-600:#C4185C;
--pink-500:#DE2A72;
--pink-400:#EE5B95;
--pink-100:#FCE4EE;
--blue:#DE2A72;
--purple:#9E1149;
--indigo:#C4185C;
--violet:#EE5B95;
--gradient-accent:linear-gradient(135deg,var(--pink-500),var(--pink-700));
--gradient-accent-hover:linear-gradient(135deg,var(--pink-400),var(--pink-600));
--focus-ring:var(--pink-600);
}
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty;overflow-wrap:anywhere}
img,video{max-width:100%}
::selection{background:var(--black);color:var(--white)}
:where(section,div,article)[id]{scroll-margin-top:104px}

/* Focus — visible, on-brand, never on mouse clicks */
:focus{outline:none}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}
a:focus-visible,button:focus-visible{outline-offset:4px}

/* Vertical rhythm: more air, consistent across pages */
.px-section{padding-top:120px;padding-bottom:120px}
.px-dark{padding-top:128px;padding-bottom:128px}
.px-pagehero{padding-top:88px;padding-bottom:80px}
.px-lede{max-width:62ch}

/* Type polish */
.px-eyebrow,.pba2-eyebrow-dark{font-variant-numeric:tabular-nums}
.px-h2,.pba2-h2{text-wrap:balance}

/* Card + link motion, unified easing */
.px-card{transition:transform 400ms var(--ease-out),box-shadow 400ms var(--ease-out),border-color 400ms var(--ease-out)}
.px-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--border-strong)}
footer a{transition:color 250ms var(--ease-out),opacity 250ms var(--ease-out)}
footer a:hover{opacity:1}
nav a{transition:color 250ms var(--ease-out)}

/* Buttons: keep the lift, add a considered press */
.btn,button[class*="btn"]{transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out),background 300ms var(--ease-out),color 300ms var(--ease-out)}
.btn:active,button[class*="btn"]:active{transform:translateY(-1px)}

/* Portfolio media: slower, more expensive-feeling zoom */
.pba2-svc-media img,.pba2-post-img img{transition:transform 900ms cubic-bezier(0.16,1,0.3,1)}

/* Subtle, quiet scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--gray-200) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:640px){
.px-section{padding-top:80px;padding-bottom:80px}
.px-dark{padding-top:88px;padding-bottom:88px}
.px-pagehero{padding-top:56px;padding-bottom:48px}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

html,body{overflow-x:hidden}

/* ---- Mobile alignment layer ---- */
@media (max-width:640px){
/* One consistent gutter everywhere */
.px-section,.px-pagehero,.px-dark{padding-left:20px;padding-right:20px}
.pba2-dark{padding-left:20px;padding-right:20px}
.sd-hero{padding-left:20px!important;padding-right:20px!important}
/* Nothing decorative may push the page wide */
.px-hero-glow,[class*="-glow"]{max-width:100vw}
/* Multi-column grids collapse cleanly */
.px-grid-4{grid-template-columns:1fr!important}
/* DS buttons: wrap long labels, fill the row, never overflow */
a[style*="inline-flex"][style*="radius-pill"],button[style*="inline-flex"][style*="radius-pill"]{white-space:normal!important;text-align:center;line-height:1.3;max-width:100%}
.px-pagehero div[style*="flex"]>a[style*="inline-flex"],.px-pagehero div[style*="flex"]>button[style*="inline-flex"]{width:100%!important;justify-content:center!important}
/* Email capture: stack so the button never clips */
.pba2-capture{flex-direction:column;border-radius:var(--radius-lg)!important;padding:12px!important}
.pba2-capture-input{padding:10px 12px!important;min-height:44px}
.pba2-capture a[style*="inline-flex"],.pba2-capture button[style*="inline-flex"]{width:100%!important;justify-content:center!important}
/* Long words and headings never break the box */
h1,h2,h3{overflow-wrap:break-word}
/* Tables and wide blocks scroll instead of bleeding */
table,pre{display:block;max-width:100%;overflow-x:auto}
}