:root{--page-bg:#f5f5f5;--card-bg:#fff;--text-primary:#111827;--text-secondary:#545b68;--brand-primary:#5850ec;--brand-dark:#4037c5;--surface:#fff;--surface-lilac:#ecebff;--border:#dedee5;--radius-card:12px;--radius-control:100px;--content-width:880px;--font-body:Inter,sans-serif;--font-display:Sora,Inter,sans-serif;--ease-out:cubic-bezier(.2,.7,.2,1)}
html,body{background:var(--page-bg);color:var(--text-primary);font-family:var(--font-body)}body{margin:0}body:has(.portfolio-header){background:var(--page-bg)!important}
.ds-button,.art-tools button,.back-top,.walk-controls button,.close-walk,#loading-preview>button,.ovalix-section a{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;min-width:44px;min-height:44px;padding:10px 22px;border:1px solid var(--border);border-radius:100px;background:var(--card-bg);color:var(--text-primary);font:500 1rem/1.4 var(--font-body);letter-spacing:0;text-align:center;text-decoration:none;white-space:normal;cursor:pointer;transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out),transform 220ms var(--ease-out)}
.ds-button-primary,.walk-controls .walk-next,.ovalix-section a{background:var(--brand-primary);border-color:#8da2fb;color:white}.ds-button-secondary,.art-tools button,.back-top,.walk-controls .walk-prev{background:transparent;color:var(--text-primary);border-color:#d7d8df}.ds-button-quiet{border-color:transparent;background:transparent;color:var(--text-secondary);font-size:.875rem;padding:8px 12px}
.ds-button span{transition:transform 220ms var(--ease-out)}.ds-button:hover span{transform:translate(2px,-2px)}.ds-button:hover,.art-tools button:hover,.back-top:hover,.walk-controls button:not(:disabled):hover{border-color:var(--brand-primary);background:var(--surface-lilac);box-shadow:0 3px 10px #11182708}.ds-button-primary:hover,.walk-controls .walk-next:hover,.ovalix-section a:hover{background:var(--brand-dark);color:#fff}.ds-button:active,.art-tools button:active{transform:translateY(1px)}:where(.ds-button,.art-tools button,.back-top,.ovalix-section a):focus-visible{outline:3px solid var(--brand-primary);outline-offset:4px}.walk-controls button:disabled{opacity:.55;cursor:default}
.ovalix-section a{height:auto!important;min-height:44px;min-width:0!important;flex:none!important;padding:10px 22px!important;align-self:flex-start}.ovalix-section a p{font:inherit!important;color:inherit!important;white-space:normal!important;margin:0!important}.ovalix-section a>div{height:auto!important;min-height:0!important}.ovalix-section p:not([aria-hidden=true] *),.walk-controls{font-family:var(--font-body)!important}.close-walk{width:44px;padding:0;font-size:26px;background:white}.walk-controls{background:white}.walk-controls .walk-label{font-family:var(--font-body)}
.responsive-site #website>.flow-box{background:transparent!important}.page-home #website{max-width:1280px}.page-home #website>.flow-box,.page-home #node-577-2079{gap:0!important;padding:0!important}.page-home #node-577-2079>.flow-box{background:transparent!important}.page-home .home-hero{padding:72px 24px 64px!important}.page-home .home-hero>.flow-box{max-width:880px!important;gap:28px!important}.page-home .home-hero h1{font-family:var(--font-display)!important;font-weight:400!important;font-size:clamp(2rem,3.5vw,2.5rem)!important;line-height:1.2!important;letter-spacing:-.045em!important}.page-home .home-hero .flow-copy{max-width:38ch}.page-home .home-hero .flow-art{max-width:120px!important}.page-home .home-hero .flow-box:has(>.ds-button){align-items:flex-start}
.page-home .featured-section{padding:72px 24px!important;gap:32px!important}.page-home .featured-section>.flow-box{max-width:880px!important}.page-home .project-card{border-radius:12px!important;background:transparent!important;box-shadow:none!important;transition:transform 280ms var(--ease-out)}.project-card:hover{transform:none}.project-card:hover .project-title-link{text-decoration:none!important}.project-card .project-cta{position:relative;z-index:3;align-self:flex-start;margin-top:8px}.project-card .card-copy{gap:20px!important;background:transparent!important}.project-card .card-copy h3{font-family:var(--font-body)!important;font-size:clamp(1.5rem,2.5vw,2rem)!important;line-height:1.25!important;letter-spacing:-.035em!important}.project-card .card-copy p{font-size:1rem!important;line-height:1.6!important;color:var(--text-secondary)!important}.page-home .quote-grid>.flow-box{border-radius:12px!important}.page-home #node-739-69669{padding:64px 24px!important;gap:32px!important}.page-home .quote-grid{padding:0!important;max-width:880px!important;gap:24px!important}.page-home .quote-grid>.flow-box{background:var(--card-bg)!important;box-shadow:0 6px 18px #11182708!important;border:1px solid var(--border)!important;padding:28px!important}.page-home .quote-grid .flow-copy{font-family:var(--font-body)!important;font-size:1rem!important;line-height:1.65!important}
.ds-section{width:calc(100% - 48px);max-width:880px;margin:0 auto;padding:72px 0}.ds-section h2,.clients-section h2{font:600 1.5rem/1.4 var(--font-body);letter-spacing:-.04em;margin:0 0 32px}.skills-grid{display:grid;grid-template-columns:388fr 460fr;column-gap:32px;row-gap:48px;align-items:start}.skill-card{min-width:0;border-radius:12px}.skill-card-3{grid-column:1/-1}.skill-card .flow-art{border-radius:12px;max-width:100%!important}.skill-copy{padding-top:24px}.skill-copy h3{font:600 1.5rem/1.4 var(--font-body);letter-spacing:-.035em;margin:0 0 12px}.skill-copy p{font:400 1.125rem/1.6 var(--font-body);color:var(--text-secondary);margin:0;max-width:62ch}
.home-about-grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}.portrait-link{display:block;overflow:hidden;border-radius:12px;background:#e8e8eb}.portrait-link img{display:block;width:100%;height:auto;aspect-ratio:418/534;object-fit:cover;transition:transform 500ms var(--ease-out)}.portrait-link:hover img{transform:scale(1.025)}.home-about-copy h3{font:600 1.5rem/1.4 var(--font-body);letter-spacing:-.035em;margin:0 0 12px}.home-about-copy p{font:400 1rem/1.75 var(--font-body);color:var(--text-secondary);margin:0 0 20px}.home-about-copy .about-lead{font-size:1.25rem;color:var(--text-primary);line-height:1.5}
.clients-section{padding:32px 24px 48px;max-width:1040px;width:100%;margin:auto}.clients-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:880px;margin:auto auto 24px}.clients-section h2{margin:0}.logo-slider{overflow:hidden;max-width:100%;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.logo-slider-track{display:flex;width:max-content;animation:clients-slide 36s linear infinite;will-change:transform}.logo-slider-group{display:flex;gap:40px;align-items:center;padding-right:40px}.client-logo{width:160px;height:84px;display:flex;align-items:center;justify-content:center;flex:none}.client-logo .flow-art{max-width:150px!important}.logo-slider:hover .logo-slider-track,.logo-slider:focus-within .logo-slider-track,.logo-slider.is-paused .logo-slider-track{animation-play-state:paused}@keyframes clients-slide{to{transform:translateX(-50%)}}
.portfolio-footer{width:calc(100% - 48px);max-width:880px;margin:auto;padding:72px 0 48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}.portfolio-footer h2{font:600 1.5rem/1.4 var(--font-body);letter-spacing:-.035em;margin:0 0 8px}.portfolio-footer p{color:var(--text-secondary);margin:0;font:400 1rem/1.6 var(--font-body)}.footer-actions{display:flex;flex-wrap:wrap;gap:12px}.footer-links{display:flex;gap:24px;width:100%;font:500 .875rem/1.5 var(--font-body)}.footer-links a{padding-block:10px}.footer-links a:hover{color:var(--brand-primary)}
@media(max-width:700px){.page-home .home-hero{padding:40px 24px!important}.page-home .featured-section{padding:40px 24px!important}.ds-section{padding:48px 0}.skills-grid{grid-template-columns:1fr;gap:40px}.skill-card-3{grid-column:auto}.home-about-grid{grid-template-columns:1fr;gap:28px}.portrait-link{max-width:280px;width:100%}.clients-heading{align-items:flex-start;gap:12px}.clients-heading h2{font-size:1.25rem}.logo-motion-toggle{font-size:.75rem;flex-shrink:0;padding-inline:4px}.clients-section{padding:24px 20px}.client-logo{width:140px}.logo-slider-group{gap:24px;padding-right:24px}.portfolio-footer{padding:48px 0 32px}.footer-actions{align-items:flex-start}.page-home #node-739-69669{padding:40px 24px!important}.page-home .quote-grid>.flow-box{max-width:100%!important}.skill-copy p{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.logo-slider{overflow:auto;mask-image:none}.logo-slider-track{animation:none}.logo-slider-group[aria-hidden]{display:none}.logo-motion-toggle{display:none}.project-card:hover,.portrait-link:hover img{transform:none}*,*::before,*::after{transition:none!important}}
.client-logo .flow-art{width:min(150px,calc(var(--art-width)*1px));flex:none}
.page-home .home-hero p.flow-copy{color:#737780!important;font-weight:400!important;font-size:clamp(1.125rem,1.9vw,1.5rem)!important;line-height:1.5!important}
.flow-art{display:block}.page-home .flow-art>.design-frame{border-radius:12px!important}

/* Shared outline icon geometry; never rely on font glyph rendering. */
.ui-icon{width:18px;height:18px;flex:none;vertical-align:middle;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}.ds-button .ui-icon{transition:transform 180ms var(--ease-out)}.ds-button:hover .ui-icon{transform:translateX(2px)}.footer-links a{display:inline-flex;align-items:center;gap:6px}.footer-links .ui-icon{width:14px;height:14px}.project-card .flow-video{border-radius:12px;overflow:hidden;background:#d6d3e5;pointer-events:none}.project-card .flow-video video{position:absolute;inset:0;width:100%;height:100%;border-radius:12px}.footer-actions{margin-left:auto;justify-content:flex-end}@media(prefers-reduced-motion:reduce){.ds-button:hover .ui-icon{transform:none}}

/* Portfolio typography: regular-weight narrative, aligned to its content column.
   Embedded product canvases keep the original design typography. */
:root{--weight-body:400;--weight-heading:400;--weight-emphasis:500}
.flow-copy,.ds-section,.clients-heading,.portfolio-footer,.page .grid,.page-end{text-align:left!important}
.flow-copy{font-weight:var(--weight-body)!important}
:where(h1,h2,h3,h4,[role="heading"]):not(.design-frame *):not(.product-canvas *):not(.walk-canvas *){font-weight:var(--weight-heading)!important;text-align:left!important}
.ds-section strong,.page strong{font-weight:var(--weight-emphasis)}
.ds-button,.back-top,.art-tools button,.footer-links,.portfolio-header{font-weight:var(--weight-body)!important}
.page :is(.name,.role,.bio,.small-heading,.job h3,.date,.tools-list a,.aside h3){font-weight:var(--weight-body)!important;text-align:left!important}
.ovalix-section p:not(.product-canvas *):not([aria-hidden="true"] *){font-weight:var(--weight-body)!important;text-align:left!important}
.page-home .featured-section>h2,.page-home #node-739-69669>h2{width:100%;max-width:var(--content-width)!important;margin-inline:auto!important}
.page-home .project-card{gap:32px!important}
.page-home .project-card .card-copy{padding:24px 0!important;align-items:flex-start}
.page-home .project-card .card-copy>.flow-box{margin-inline:0!important;align-self:flex-start!important}
@media(max-width:700px){.page-home .project-card{gap:24px!important}.page-home .project-card .card-copy{padding:0!important}.clients-section{padding-inline:24px}.page-home .featured-section>.flow-box{gap:56px!important}}
.page-home #node-415-1308,.page-home #node-739-69672{width:100%;max-width:var(--content-width)!important;margin-inline:auto!important}
.page-home .project-card>.flow-box:not(.card-copy){border-radius:12px!important;overflow:hidden}

/* Clip each visual independently of the transparent project row. */
.page-home .project-card :is(.flow-art,.flow-video){border-radius:var(--radius-card)!important;overflow:hidden;clip-path:inset(0 round var(--radius-card))}

/* Mobile branding lives in the navigation; avoid repeating the wordmark. */
@media(max-width:700px){.page-home .home-hero>.flow-box>.flow-art{display:none}}

/* A clear contact invitation, with secondary navigation on a separate baseline. */
.portfolio-footer{display:block;padding:64px 0 32px}
.footer-invitation{display:flex;align-items:center;justify-content:space-between;gap:32px}
.footer-invitation h2{margin:0 0 12px}
.footer-contact{flex-shrink:0;padding:14px 28px;min-height:52px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.footer-bottom .footer-links{width:auto;gap:24px}
.footer-utilities{display:flex;align-items:center;gap:24px}
.footer-utilities a,.footer-utilities button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;border:0;background:none;color:var(--text-secondary);font:400 .875rem/1.5 var(--font-body);text-decoration:none;cursor:pointer;transition:color 180ms}
.footer-utilities a:hover,.footer-utilities button:hover{color:var(--brand-primary)}
@media(max-width:700px){.portfolio-footer{padding:48px 0 24px}.footer-invitation{align-items:flex-start;flex-direction:column;gap:24px}.footer-contact{align-self:flex-end}.footer-bottom{align-items:flex-start;flex-direction:column;gap:12px;margin-top:32px}.footer-bottom .footer-links,.footer-utilities{gap:24px;flex-wrap:wrap}}

.anatomy-caption{width:100%;min-width:0;display:grid;gap:16px}
.anatomy-pills{display:flex;flex-wrap:nowrap;gap:12px;max-width:100%;overflow-x:auto;padding:3px 3px 8px;scrollbar-width:thin}
.anatomy-pill{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;border:1px solid var(--border);border-radius:100px;background:transparent;color:var(--text-secondary);font:400 .875rem/1.4 var(--font-body);white-space:nowrap}
#node-700-4905 .flow-video{overflow:hidden;border-radius:12px}
.anatomy-caption>p{color:var(--text-secondary)}
/* CARA uses a continuous white canvas, including the navigation backdrop. */
html:has(body.page-cara),body.page-cara:has(.portfolio-header),.page-cara #website{background:#fff!important}

/* Give each project room, with feedback that keeps the artwork and title linked. */
.page-home .featured-section{gap:64px!important}
.page-home .featured-section>#node-738-14585{gap:96px!important}
.project-title-text{display:inline-block;transition:color 220ms var(--ease-out)}
.project-card:is(:hover,:focus-within) .project-title-text{color:var(--brand-primary)}
.project-card .project-cta{transition:background-color 180ms,border-color 180ms,color 180ms}
.project-card:is(:hover,:focus-within) .project-cta,.project-card .project-cta:is(:hover,:focus-visible){border-color:var(--brand-primary);color:var(--brand-primary)}

/* A native, swipeable review gallery; controls enhance rather than replace scrolling. */
.page-home #node-739-69669.testimonials{padding:64px 0!important;min-width:0}
.testimonials-heading{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:32px}
.testimonials-heading h2{margin:0;max-width:640px}
.testimonial-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 28px);gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#c9c8d2 transparent;padding:4px 0 24px;max-width:100%;border-radius:12px}
.testimonial-track:focus-visible{outline:2px solid var(--brand-primary);outline-offset:6px}
.testimonial-card{display:flex;flex-direction:column;gap:32px;min-width:0;margin:0;padding:28px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 6px 18px #11182706;scroll-snap-align:start}
.testimonial-card blockquote{margin:0;color:var(--text-secondary);font:400 1rem/1.65 var(--font-body)}
.testimonial-card figcaption{display:flex;align-items:center;gap:16px;margin-top:auto;font:400 1rem/1.5 var(--font-body)}
.testimonial-card img{width:48px;height:48px;object-fit:cover;border-radius:6px;flex:none}
.testimonial-name,.testimonial-role{display:block}
.testimonial-role{color:var(--text-secondary);font-size:.875rem;margin-top:4px}
@media(max-width:700px){
 .page-home .featured-section{gap:40px!important}
 .page-home .featured-section>#node-738-14585{gap:64px!important}
 .page-home #node-739-69669.testimonials{padding:40px 0!important}
 .testimonials-heading{align-items:flex-start;gap:24px;flex-direction:column;margin-bottom:24px}
 .testimonial-track{grid-auto-columns:88%;gap:16px;padding-bottom:20px}
 .testimonial-card{padding:24px;gap:28px}
}
@media(prefers-reduced-motion:reduce){.project-card:is(:hover,:focus-within) .project-title-text{transform:none}}

/* Project rows stay borderless, including while their links have focus. */
.page-home .project-card{border:0!important;outline:none!important}
.ds-button[href^="mailto:"]:hover .ui-icon{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.ds-button[href^="mailto:"]:hover .ui-icon{transform:none}}

/* Descriptive metadata, separate from the actionable case-study button. */
.page-home .project-badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;max-width:100%}
.page-home .project-badge{display:inline-flex;align-items:center;min-height:28px;padding:4px 11px;border-radius:100px;background:#eae9ef;color:#545366;font:400 .8125rem/1.4 var(--font-body);letter-spacing:0;white-space:nowrap}


/* Testimonials run as a continuous loop that pauses while hovered or focused; reduced motion gets a static grid. */
.testimonial-marquee{position:relative;overflow:hidden;padding:8px 0 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.testimonial-marquee .testimonial-track{display:flex;align-items:stretch;gap:0;width:max-content;max-width:none;overflow:visible;padding:0;border-radius:0;scroll-snap-type:none}
.testimonial-marquee .testimonial-track.is-looping{animation:testimonial-marquee 55s linear infinite}
.testimonial-marquee:is(:hover,:focus-within) .testimonial-track{animation-play-state:paused}
.testimonial-marquee .testimonial-card{flex:none;width:min(360px,80vw);margin-right:24px}
.testimonial-highlight{color:var(--brand-primary);font-weight:500}
.heading-highlight{color:var(--brand-primary)}
@keyframes testimonial-marquee{to{transform:translateX(-50%)}}
@media(max-width:700px){.testimonial-marquee .testimonial-card{margin-right:16px;padding:24px}}
@media(prefers-reduced-motion:reduce){
 .testimonial-marquee{-webkit-mask-image:none;mask-image:none}
 .testimonial-marquee .testimonial-track,.testimonial-marquee .testimonial-track.is-looping{animation:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;width:auto}
 .testimonial-marquee .testimonial-card{width:auto;margin:0}
 .testimonial-marquee .is-clone{display:none}
}

/* Testimonials: wide, low cards. Author on the left, quote on the right, about half the former height. */
.testimonial-marquee .testimonial-card{width:min(640px,86vw);flex-direction:row-reverse;align-items:center;gap:28px;padding:22px 28px}
.testimonial-card blockquote{flex:1;min-width:0;font-size:.9375rem;line-height:1.55}
.testimonial-card figcaption{flex:0 0 156px;flex-direction:column;align-items:flex-start;gap:10px;margin-top:0;padding-right:24px;border-right:1px solid var(--border);align-self:stretch;justify-content:center}
.testimonial-card img{width:40px;height:40px}
.testimonial-role{font-size:.8125rem;line-height:1.4}
@media(max-width:700px){.testimonial-marquee .testimonial-card{flex-direction:column;align-items:stretch;gap:16px;padding:20px}.testimonial-card figcaption{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:16px 0 0;border-right:0;border-top:1px solid var(--border)}}