/* Shared editorial foundation. Product demos retain their own interface styles. */
:root{--font-sans:'Geist',sans-serif;--bg:#fff;--text:#0a0b0d;--text-paragraph:var(--text);--muted:#6b7280;--reading-width:42rem;--space-section:80px;--space-media:28px;--type-title:30px;--type-heading:22px;--type-subheading:16px;--type-body:16px}
:root[data-theme=dark]{--bg:#111;--text:#eee;--muted:#b4b4b4}
body.portfolio-page{font:400 var(--type-body)/26px var(--font-sans);letter-spacing:0;color:var(--text);background:var(--bg)}
.portfolio-page .site-shell{--content-width:var(--reading-width);padding-inline:24px}
.portfolio-page :is(.back-link,.back-control){margin-bottom:48px}
.portfolio-page .back-link{display:flex}
.portfolio-page .site-shell--home{--space-section:64px;padding-top:64px;padding-bottom:64px}
.portfolio-page .site-shell--home .identity{gap:16px}
.portfolio-page .identity--home .name-heading,.portfolio-page .identity--home .name-reveal{font-size:22px;line-height:30px;font-weight:500;letter-spacing:-.4px}
.portfolio-page .identity--home .identity-role{font-size:16px;line-height:26px;font-weight:400;letter-spacing:0;color:var(--muted)}
.portfolio-page .site-shell--home .intro{margin-top:24px;font-size:16px;line-height:26px;color:var(--text)}
.portfolio-page .site-shell--home .intro+.intro{margin-top:16px}
.portfolio-page .site-shell--home .intro .role-explainer-trigger{color:inherit}
.portfolio-page .site-shell--home>.section,.portfolio-page .site-shell--home>.section:first-of-type{margin-top:var(--space-section)}
.portfolio-page .site-shell--home .section-heading{font-size:16px;line-height:26px;font-weight:500;letter-spacing:0;margin-bottom:16px;color:var(--text)}
.portfolio-page .site-shell--home .experiment-row{padding-block:8px}
.portfolio-page .site-shell--home .experiment-row .row-title{font-size:16px;line-height:26px;font-weight:500}
.portfolio-page .site-shell--home .project-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,21rem);gap:8px;align-items:stretch;margin:0 0 24px}
.portfolio-page .site-shell--home .project-filters button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:10px 12px;border:1px solid transparent;border-radius:999px;background:var(--raised);font:500 14px/22px var(--font-sans);white-space:nowrap}
.portfolio-page .site-shell--home .project-filter-count{display:inline;font-size:inherit;line-height:inherit;font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums;color:inherit;opacity:.65}
.portfolio-page .site-shell--home .project-filters button[aria-pressed=true]{border-color:var(--text);background:var(--text);color:var(--bg)}
.portfolio-page .site-shell--home .project-filters button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.portfolio-page .card-note p{font-family:var(--font-sans);font-size:14px;line-height:22px}
.portfolio-page .role-explainer-copy{font-family:var(--font-sans);font-size:16px;line-height:26px;letter-spacing:0}
.portfolio-page .section--showcase .row-title{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.2px}
.portfolio-page .section--showcase .row-description{font-size:14px;line-height:22px;color:color-mix(in srgb,var(--muted) 88%,var(--text))}
.portfolio-page .site-shell--home>site-footer{margin-top:var(--space-section)}
.portfolio-page .case-facts{margin:24px 0 var(--space-section);border-top:1px solid var(--border)}
.portfolio-page .case-facts>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--border)}
.portfolio-page .case-facts dt{padding-top:2px;color:var(--muted);font:400 14px/22px var(--font-sans);letter-spacing:0;text-transform:none}
.portfolio-page .case-facts dd{margin:0;color:var(--text);font-size:16px;line-height:26px}
.portfolio-page .case-study .case-facts+section{margin-top:0}
.portfolio-page .case-study .case-facts+h2{margin-top:0}
.portfolio-page .case-study :is(.case-media,.ayo-figure,.honda-media-grid,.honda-state-switch)>figcaption:not(:where(.case-showcase *,[data-case-interactive] *)){text-align:center;font-size:14px;line-height:22px;color:var(--muted);margin-top:10px}
.portfolio-page .case-study .honda-tabs__lede{font-size:14px;line-height:22px;text-align:center}
.portfolio-page .case-study .page-meta{column-gap:12px}
.portfolio-page .case-study .page-header>p:empty{display:none}
.portfolio-page .ayana-case-study #ayana-overview{display:grid;gap:24px;margin-bottom:0}
.portfolio-page .ayana-case-study #ayana-overview .case-facts{margin-bottom:0}
.portfolio-page .ayana-case-study #ayana-overview+.ay-chapter{margin-top:0}
.portfolio-page .case-study #maybank-outcome{margin-bottom:0}
.portfolio-page .ayana-case-study #ayana-overview .case-facts{margin-top:0}
@media(max-width:600px){
 :root{--space-section:64px;--space-media:24px}
 .portfolio-page .site-shell--home{--space-section:48px;padding-top:32px;padding-bottom:48px}
 .portfolio-page .case-facts>div{grid-template-columns:72px minmax(0,1fr);gap:16px}
 .portfolio-page :is(.back-link,.back-control){margin-bottom:32px}
}
@media(max-width:360px){.portfolio-page .site-shell--home .project-filters{gap:4px}.portfolio-page .site-shell--home .project-filters button{padding-inline:6px;gap:6px}}

/* One segmented-control vocabulary, including native and React showcases. */
.portfolio-page .portfolio-pills.portfolio-pills{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:2px;width:fit-content;max-width:calc(100% - 32px);min-width:0;margin:16px auto;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--preview);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;isolation:isolate;overscroll-behavior-x:contain}
.portfolio-page .portfolio-pills.portfolio-pills::-webkit-scrollbar{display:none}
.portfolio-page .portfolio-pills.portfolio-pills>button{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:400 14px/22px var(--font-sans);text-align:center;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color 180ms ease,color 180ms ease}
.portfolio-page .portfolio-pills.portfolio-pills>button:is([aria-selected=true],[aria-pressed=true]){background:var(--text);color:var(--bg);font-weight:400}
.portfolio-page .portfolio-pills.portfolio-pills>button:focus-visible{outline:2px solid var(--text);outline-offset:-3px}
.portfolio-page .portfolio-pills.portfolio-pills :is(.honda-tabs__thumb,.mb4-tab-pill){display:none}
.portfolio-page .portfolio-pills.portfolio-pills svg{flex:none;width:16px;height:16px}
.portfolio-page .portfolio-pills.portfolio-pills .mb4-tab-label{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.portfolio-page .site-shell--home .project-filters.portfolio-pills{max-width:100%;margin:0 0 24px}
.portfolio-page .site-shell--home .project-filter-thumb{display:block;position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:var(--text);pointer-events:none;transition:transform 220ms cubic-bezier(.23,1,.32,1),width 220ms cubic-bezier(.23,1,.32,1)}
.portfolio-page .site-shell--home .project-filters.portfolio-pills>button{z-index:1}
.portfolio-page .site-shell--home .project-filters.portfolio-pills>button[aria-pressed=true]{background:transparent}
.portfolio-page .case-showcase__controls>.portfolio-pills.portfolio-pills{max-width:100%;margin:0}
@media(max-width:360px){.portfolio-page .portfolio-pills.portfolio-pills>button{padding-inline:6px;font-size:13px;gap:4px}}
@media(prefers-reduced-motion:reduce){.portfolio-page .portfolio-pills.portfolio-pills>button{transition:none}}
@media(prefers-reduced-motion:reduce){.portfolio-page .site-shell--home .project-filter-thumb{transition:none}}