/* site.css: the one stylesheet for petershalaby.com. Every page loads it.

   Pages     <html data-page="..."> names the page. A rule meant for some pages only is scoped with a
             zero-specificity :where(), for example :where([data-page="contact"]) .x, so it never
             changes which rule wins. Each section header lists the pages its rules were written for.
   Tokens    Section 01. Text roles --ink #202020, --ink-2 #686868, --ink-3 #737373.
   Type      Desktop 12 14 16 18 20 26 36 48, mobile 12 14 16 18 22 28 32 (--text-*). Weights 400 and 500.
             The Basyt lettering on its Playground page is artwork and keeps its own size and weight.
   Spacing   4px grid.
   Order     Later sections win ties, so keep new rules in the section they belong to and keep the
             accessibility toolbox near the end.
   Credit    The October 2026 polish passes follow unslop by Damir Sokolovsky (@heydamir, CC BY 4.0),
             https://github.com/heydamir/unslop
*/

/* 01 Tokens | every page */
:root {
  /* Text roles */
  --ink: #202020;
  --ink-2: #686868;
  --ink-3: #737373;
  --on-dark: #fff;
  --slate: #687180;
  /* Surfaces and lines */
  --surface: #fff;
  --panel: #f1f4f8;
  --bg: #f8f9fb;
  --line: #e5e8ee;
  /* Type */
  --font: Portfolio,"Avenir Next","Helvetica Neue",sans-serif;
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-26: 26px;
  --text-28: 28px;
  --text-32: 32px;
  --text-36: 36px;
  --text-48: 48px;
  --weight-regular: 400;
  --weight-medium: 500;
  /* Radii */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  /* Elevation */
  --shadow-card: 0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --shadow-hover: 0 2px 4px rgba(16,24,40,.06),0 8px 20px -8px rgba(16,24,40,.12);
  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* 02 Base: fonts, page layout, typography and case study blocks | every page */
@font-face { font-family: Portfolio; font-style: normal; font-weight: 1 1000; font-display: swap; src: url(assets/fonts/google-sans-flex-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: Portfolio; font-style: normal; font-weight: 1 1000; font-display: swap; src: url(assets/fonts/google-sans-flex-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 82px }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--text-16); line-height: 1.5; -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
a:hover { color: #415578 }
a:focus-visible, summary:focus-visible { outline: 3px solid #506b9a; outline-offset: 5px }
img { display: block; max-width: 100%; height: auto }
p { color: var(--slate); margin: 0 0 18px }
strong { font-weight: var(--weight-medium); color: var(--ink) }
h1, h2, h3 { font-weight: var(--weight-medium); letter-spacing: -.035em; line-height: 1.13; margin: 0 0 24px }
h1 { font-size: var(--text-48) }
h2 { font-size: var(--text-36) }
.wrap, .footer-inner { width: min(800px,calc(100% - 48px)); margin-inline: auto }
nav { font-size: var(--text-14); align-items: center }
nav a[aria-current=page] { text-underline-offset: 6px }
.skip { position: fixed; top: -70px; left: 20px; background: var(--ink); color: white; z-index: 20; padding: 10px }
.skip:focus { top: 10px }
.intro { padding: 128px 0 120px }
.actions { display: flex; align-items: center }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #292929; color: white; border: 1px solid #292929; padding: 7px 16px; font-size: 15px; line-height: 1.35 }
.button:hover { background: #454545; color: white }
.button.secondary { color: var(--ink); background: transparent }
.button.secondary:hover { background: #e9edf3 }
.work-meta { display: flex; align-items: center; gap: 10px; font-size: var(--text-14) }
.client-mark { display: inline-grid; place-items: center; background: #e0e7ef; border-radius: 50%; width: 22px; height: 22px }
.nda-preview p { max-width: 730px }
.footer-inner { display: flex; justify-content: space-between; align-items: center; min-height: 125px }
footer { background: #212121 }
.footer-inner>div { display: flex; gap: 24px; font-size: var(--text-14) }
.footer-inner p { font-size: var(--text-12); margin: 0 }
.case>.work-meta { margin: 0 0 27px }
.case>h1 { line-height: 1.1 }
.case-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; padding: 0 0 38px; border-bottom: 1px solid var(--line) }
.case-summary h2 { font-size: var(--text-16); margin-bottom: 12px }
.case-summary p { font-size: 15px; line-height: 1.5; margin: 0 }
.case-context { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; margin: 0 0 72px }
.case-context dt { margin-bottom: 8px }
.case-context dd { font-size: var(--text-14); margin: 0 }
.story { margin: 0 0 65px }
.story h2 { font-size: var(--text-36); margin-bottom: 28px }
.story h3 { margin: 30px 0 18px }
.story p { font-size: var(--text-18); line-height: 1.55; margin-bottom: 24px }
figcaption { font-size: 13px !important; text-align: center; margin: 14px 0 0; color: var(--slate) }
.next-work { padding-top: 32px; border-top: 1px solid var(--line) }
.next-work a { line-height: 1.35 }
.next-work a>span:first-child { font-size: 13px; color: var(--slate) }
.simple-page { padding-top: 112px; padding-bottom: 100px }
.lede { line-height: 1.5 }
.about-intro { display: grid; grid-template-columns: 200px 1fr; gap: 40px; margin: 45px 0 70px }
.about-intro>img { width: 200px; height: 315px; object-fit: cover; border-radius: 25px }
.contact-page { min-height: calc(100vh - 185px) }
@media (max-width:700px) {
  .wrap, .footer-inner { width: calc(100% - 40px) }
  nav { font-size: var(--text-12) }
  .button { font-size: var(--text-14) }
  .selected { padding-block: 65px }
  .work-meta { font-size: var(--text-12); gap: 8px }
  .footer-inner { display: block; padding-block: 30px }
  .footer-inner p { margin-top: 20px }
  .case-summary { grid-template-columns: 1fr; gap: 24px }
  .case-summary p { font-size: var(--text-16) }
  .case-context { grid-template-columns: 1fr }
  .story h2 { font-size: 30px }
  .about-intro { grid-template-columns: 1fr; gap: 28px }
  .about-intro img { width: 150px; height: 210px }
}
@media (max-width:380px) {
  nav { font-size: 11px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important; animation: none !important }
}
@media print {
  header, footer, .skip, .actions, .next-work { display: none }
  .wrap { width: 100%; max-width: 800px }
  .intro, .simple-page, .case { padding: 30px 0 }
  .work-item { break-inside: avoid }
  .selected { padding: 30px 0 }
  .case-summary { grid-template-columns: 1fr 1fr 1fr }
  .case-context { margin-bottom: 35px }
}

/* 03 Case studies: Figma evidence boards | Dubai Portal, Government AI, Unlock */
.figma-evidence { margin: 60px 0 70px; padding-top: 38px; border-top: 1px solid #dfe3e6 }
.figma-evidence>header { max-width: 670px }
.figma-evidence h2 { margin: 16px 0 }
.figma-evidence p { line-height: 1.85 }
.fe-detail-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: start }
.fe-detail-pair p.fe-small { font-size: var(--text-12); border-top: 1px solid #dfe3e6 }
:where([data-page="dubai-portal"], [data-page="government-ai"], [data-page="unlock"]) .footer-inner>div { display: flex; flex-wrap: wrap; gap: 18px }
:where([data-page="dubai-portal"], [data-page="government-ai"], [data-page="unlock"]) .footer-inner>div>a { margin-right: 0 }
@media (max-width:650px) {
  .figma-evidence { margin: 38px 0; padding-top: 28px }
  .fe-detail-pair { grid-template-columns: 1fr }
}

/* 04 Case studies: decision stories | Dubai Portal, Government AI, Unlock */
.decision-story { --decision-accent: #145c70; --decision-wash: #edf5f6 }
.decision-story--unlock { --decision-accent: #204c80; --decision-wash: #edf2f9 }
.decision-trail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; counter-reset: research; gap: 24px; padding: 24px 0 30px !important; margin: 0 0 40px; border-bottom: 1px solid #dfe3e6 }
.decision-trail li { counter-increment: research; min-width: 0 }
.decision-trail li:before { content: '0' counter(research); display: block; font-size: var(--text-12); letter-spacing: 2px; margin-bottom: 14px }
.decision-trail p { line-height: 1.7; margin: 8px 0 0 }
.decision-heading { margin: 48px 0 24px }
.decision-heading h3 { line-height: 1.23; letter-spacing: -.7px; margin: 12px 0 }
.decision-heading p { margin: 0 }
.decision-graphic { margin: 0 0 32px; overflow: hidden }
.decision-graphic figcaption { grid-column: 1/-1; line-height: 1.65 }
.city-map, .action-map { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 12px }
.diagram-arrow { text-align: center }
.decision-graphic p { font-size: var(--text-12); line-height: 1.6; margin: 18px 0 0 }
.service-stack { padding: 0 8px }
.service-stack span { display: block; background: white; border: 1px solid #dce5e9; border-radius: 5px; box-shadow: 0 5px 14px #33333308; transform: rotate(-3deg) }
.service-stack span:nth-child(2) { transform: rotate(2deg); margin: -2px 0 }
.service-stack span:nth-child(3) { transform: rotate(-1deg) }
.intent-grid { display: grid; grid-template-columns: 1fr 1fr }
.intent-grid span { padding: 20px 8px; text-align: center; border: 1px solid #c4d8df; background: #ffffffd9; border-radius: 6px; font-size: var(--text-14) }
.decision-trade { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0 30px; padding: 20px 0; border-block: 1px solid #dfe3e6 }
.decision-trade p { font-size: var(--text-14); line-height: 1.7; margin: 8px 0 0 }
.interaction-sequence { list-style: none; padding: 0 !important; counter-reset: interaction }
.interaction-sequence li { counter-increment: interaction; position: relative; padding: 0 0 23px 37px; border-left: 1px solid #c8d9df; margin-left: 10px }
.interaction-sequence li:before { content: counter(interaction); position: absolute; left: -12px; top: 0; background: var(--decision-wash); color: var(--decision-accent); border: 1px solid #c8d9df; border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; font-size: 11px }
.interaction-sequence li:last-child { border-color: transparent }
.interaction-sequence p { margin: 6px 0 0 }
.delivery-note { margin: 38px 0 0 }
.delivery-note p { margin: 10px 0 0; font-size: var(--text-14) }
.abstract-request { background: var(--surface); border: 1px solid #d6e0e8; border-radius: 8px; padding: 20px; box-shadow: 0 9px 24px #264a7209 }
.request-line { display: block; width: 73%; height: 8px; background: #dce5ed; border-radius: 2px; margin: 5px 0 10px }
.request-line.short { width: 45%; height: 6px; background: #eef2f6 }
.mock-actions { display: flex; flex-wrap: wrap; align-items: center }
.mock-actions span { border: 1px solid #bdcbd8; border-radius: 4px }
.mock-actions small { color: #5e6e7d }
.action-after .mock-actions span { background: var(--decision-accent); border-color: var(--decision-accent) }
.decision-story .fe-detail-pair { margin-top: 24px }
.decision-graphic * { box-sizing: border-box }
@media (hover:hover) and (pointer:fine) {
  .service-stack span { transition: transform .25s }
  .city-map:hover .service-stack span { transform: rotate(0) }
}
@media (max-width:650px) {
  .decision-trail { grid-template-columns: 1fr }
  .decision-trail li { position: relative }
  .decision-trail li:before { position: absolute; left: 0; top: 2px }
  .city-map, .action-map { grid-template-columns: 1fr }
  .diagram-arrow { transform: rotate(90deg) }
  .service-stack { max-width: 260px; margin: auto }
  .intent-grid span { padding: 17px 8px }
}
@media (prefers-reduced-motion:reduce) {
  .service-stack span { transition: none !important }
}

/* 05 Playground: base layout | Playground, Akmefolio, Basyt, Bigboy, Storybooks World */
.pg-main { overflow: hidden }
.pg-wrap { margin: auto }
:where([data-page^="playground"]) .amber { --pg-light: #f4d49d; --pg-mid: #e6b66b; --pg-dark: #704b23; --pg-wash: #f5ecdb }
:where([data-page^="playground"]) .mint { --pg-light: #bce1d6; --pg-mid: #8bc8b7; --pg-dark: #24594c; --pg-wash: #e8f1ed }
:where([data-page^="playground"]) .sage { --pg-light: #d7dfb8; --pg-mid: #b8c68c; --pg-dark: #465633; --pg-wash: #eff1e6 }
:where([data-page^="playground"]) .sky { --pg-light: #c7dcf3; --pg-mid: #a0bfdc; --pg-dark: #355677; --pg-wash: #eaf0f6 }
:where([data-page^="playground"]) .pg-folder-link { text-decoration: none !important; color: inherit }
:where([data-page^="playground"]) .pg-folder { position: relative }
:where([data-page^="playground"]) .pg-tab { position: absolute; font-size: 9px; letter-spacing: 1.1px; color: var(--pg-dark); font-weight: 650 }
:where([data-page^="playground"]) .pg-folder-back { position: absolute; inset: sixty }
:where([data-page^="playground"]) .pg-sheet { position: absolute }
:where([data-page^="playground"]) .pg-project.sky .pg-sheet--image img { object-position: 40% center }
:where([data-page^="playground"]) .pg-folder-front { position: absolute; left: 0; right: 0; bottom: 0; transform-origin: bottom; transition: transform .48s cubic-bezier(.2,.75,.2,1); display: flex; justify-content: space-between }
:where([data-page^="playground"]) .pg-folder-label small { display: block; font-weight: var(--weight-medium) }
:where([data-page^="playground"]) .pg-folder-link:focus-visible { outline: 2px solid var(--pg-dark) }
:where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-sheet--back { transform: translate(-7px,-38px) rotate(-11deg) }
:where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-sheet--image { transform: translate(12px,-48px) rotate(9deg) }
:where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-folder-front { transform: rotateX(-17deg) }
.pg-detail { padding: 36px 0 65px }
.pg-back { font-size: var(--text-12); text-decoration: none }
.pg-detail-heading { margin: 58px 0 28px; max-width: 760px }
.pg-detail h1 { line-height: 1.1; margin: 18px 0 24px }
.pg-detail h1>span { display: block; line-height: 1.35 }
.pg-detail-intro { line-height: 1.8 }
.pg-meta { display: flex; flex-wrap: wrap; margin-top: 24px }
.pg-meta span { border: 1px solid #d7ddd0; border-radius: var(--radius-xl); padding: 7px 12px }
.pg-hero { margin: 34px 0 0; overflow: hidden; background: var(--pg-wash) }
.pg-hero>a { position: relative; display: block; padding: 38px; text-decoration: none }
.pg-hero img { display: block; width: 100%; object-fit: contain; border-radius: 7px; box-shadow: 0 10px 30px #24352e10 }
.pg-hero--hadoota>a { padding: 0 }
.pg-hero--hadoota img { border-radius: 0; max-height: none }
.pg-hero--bigboy>a { padding: 46px 22px }
.pg-ownership { display: grid; grid-template-columns: 1fr 2fr; border-top: 1px solid #dedfd7; border-bottom: 1px solid #dedfd7; padding: 24px 0 }
.pg-ownership h2 { font-size: var(--text-14); margin: 0 }
.pg-ownership p { font-size: var(--text-14); line-height: 1.7; margin: 0 }
.pg-process { display: grid; grid-template-columns: 1fr 2fr; margin: 60px 0 }
.pg-section-title h2 { font-size: var(--text-28); font-weight: var(--weight-medium); margin: 15px 0 }
.pg-process ol { list-style: none; padding: 0; margin: 0 }
.pg-process li { display: flex; margin-bottom: 28px }
.pg-process li:last-child { margin-bottom: 0 }
.pg-step-number { padding-top: 4px }
.pg-process h3 { font-size: var(--text-18); font-weight: var(--weight-medium); letter-spacing: -.3px; margin: 0 0 9px }
.pg-process p { font-size: var(--text-14); line-height: 1.8; margin: 0 }
.pg-choice h2 { font-weight: var(--weight-medium); letter-spacing: -.7px; line-height: 1.25; margin: 16px 0 }
.pg-choice p { line-height: 1.8; max-width: 660px; margin: 0 }
.pg-provenance { max-width: 750px; line-height: 1.7 }
.pg-provenance a { text-underline-offset: 3px }
.pg-lightbox { position: fixed; inset: 0; width: min(1100px,94vw); max-width: none; max-height: 94vh; border: 0; border-radius: var(--radius-md); background: #faf9f6; padding: 48px 18px 16px; color: #252923; box-shadow: 0 20px 80px #0005 }
.pg-lightbox::backdrop { background: #141c19c9; backdrop-filter: blur(6px) }
.pg-lightbox>img { display: block; max-width: 100%; max-height: 75vh; object-fit: contain; margin: auto }
.pg-lightbox>p { margin: 12px 0 0; font-size: var(--text-12); text-align: center }
.pg-close { position: absolute; right: 15px; top: 10px; border: 1px solid #cfd5c8; background: var(--surface); padding: 8px 16px; border-radius: var(--radius-xl); cursor: pointer; color: #252923 }
.pg-close:focus-visible { outline: 2px solid #355f51; outline-offset: 3px }
@media (hover:hover) and (pointer:fine) {
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-sheet--back { transform: translate(-7px,-38px) rotate(-11deg) }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-sheet--image { transform: translate(12px,-48px) rotate(9deg) }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-folder-front { transform: rotateX(-17deg) }
}
@media (max-width:650px) {
  .pg-hero>a { padding: 18px }
  .pg-hero--hadoota>a { padding: 0 }
  .pg-hero--bigboy>a { padding: 30px 8px }
  .pg-process, .pg-ownership { grid-template-columns: 1fr }
  .pg-process { margin: 38px 0 }
  .pg-body nav { gap: 16px }
  .pg-body nav a { font-size: var(--text-12) }
}
@media (prefers-reduced-motion:reduce) {
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-sheet, :where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-sheet { transform: none }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-folder-front, :where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-folder-front { transform: none }
}

/* 06 Playground: folder canvas | Playground, Akmefolio, Basyt, Bigboy, Storybooks World */
.pg-body { background: var(--surface); color: #282828 }
.pg-wrap { width: min(800px,calc(100% - 48px)) }
.pg-intro { padding: 65px 0 30px }
.pg-intro h1 { font: 500 48px/1.15 "Avenir Next",sans-serif; margin: 0 0 16px }
.pg-intro>p { font-size: 17px; line-height: 1.65; max-width: 600px; margin: 0 }
:where([data-page^="playground"]) .pg-canvas { position: relative; isolation: isolate; margin: 5px -32px 70px; padding: 27px 26px 34px; border: 1px solid #e9edf0; border-radius: var(--radius-sm); background-color: #fafbfd; background-image: linear-gradient(#e8edf280 1px,transparent 1px),linear-gradient(90deg,#e8edf280 1px,transparent 1px),radial-gradient(ellipse at 45% 40%,#fff8,transparent 75%); background-size: 24px 24px,24px 24px,100% 100% }
:where([data-page^="playground"]) .pg-folders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 38px 8px 36px; margin: 0; max-width: none }
:where([data-page^="playground"]) .pg-project { --angle: -3deg; --offset: 0px; --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px; position: relative; min-width: 0; transform: translateY(var(--offset)); z-index: 1 }
:where([data-page^="playground"]) .pg-project:nth-child(2) { --angle: 4deg; --offset: 26px }
:where([data-page^="playground"]) .pg-project:nth-child(3) { --angle: 2deg; --offset: -2px }
:where([data-page^="playground"]) .pg-project:nth-child(4) { --angle: -3deg; --offset: 30px }
:where([data-page^="playground"]) .pg-project:focus-within { z-index: 4 }
:where([data-page^="playground"]) .pg-folder-link { position: relative; display: block; border-radius: 15px; outline-offset: 8px }
:where([data-page^="playground"]) .pg-folder { height: 285px; margin: 0; perspective: 1100px; transform: perspective(1100px) rotateZ(var(--angle)) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--px),var(--py),0); transform-style: preserve-3d; transition: transform .23s ease-out }
:where([data-page^="playground"]) .pg-tab { top: 91px; left: 0; width: 41%; height: 30px; padding: 0; background: var(--pg-mid); border-radius: 11px 17px 0 0; box-shadow: inset 0 1px #ffffffb0 }
:where([data-page^="playground"]) .pg-folder-back { top: 110px; bottom: 0; left: 0; right: 0; border-radius: 0 12px 12px 12px; background: linear-gradient(145deg,var(--pg-mid),var(--pg-light)); box-shadow: 0 24px 26px -21px #35353566; transform: translateZ(-5px) }
:where([data-page^="playground"]) .pg-sheet { top: 27px; bottom: auto; left: 6%; width: 88%; height: 211px; border: 5px solid white; border-radius: 7px; padding: 0; box-shadow: 0 6px 15px #2c2c2c1c; overflow: hidden; transition: transform .35s cubic-bezier(.2,.75,.2,1) }
:where([data-page^="playground"]) .pg-sheet--back { transform: translate(-9px,0) rotate(-8deg); background: var(--surface) }
:where([data-page^="playground"]) .pg-sheet--image { transform: translate(5px,-6px) rotate(3deg); background: var(--surface); z-index: 1 }
:where([data-page^="playground"]) .pg-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: var(--surface) }
:where([data-page^="playground"]) .pg-project[data-project="hadoota"] .pg-sheet--image img { object-fit: cover }
:where([data-page^="playground"]) .pg-project[data-project="hadoota"] .pg-sheet--back img { object-fit: cover; object-position: center 25% }
:where([data-page^="playground"]) .pg-project[data-project="bigboy"] .pg-sheet img { object-fit: contain; background: #2b2b2b }
:where([data-page^="playground"]) .pg-project[data-project="akmefolio"] .pg-sheet--image img { object-fit: cover; object-position: right center }
:where([data-page^="playground"]) .pg-project[data-project="basyt"] .pg-sheet--back img { object-position: top }
:where([data-page^="playground"]) .pg-folder-front { height: 78px; border-radius: 11px; background: linear-gradient(135deg,var(--pg-light),var(--pg-mid)); box-shadow: inset 0 1px 0 #ffffffbd,inset 0 -3px 1px #00000007,0 6px 13px #34343412; z-index: 2; transform: translateZ(8px); align-items: center }
:where([data-page^="playground"]) .pg-folder-label { line-height: 1.1 }
:where([data-page^="playground"]) .pg-folder-label small { line-height: 1.4; letter-spacing: 0 }
:where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-sheet--image { transform: translate(9px,-18px) rotate(4deg) }
:where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-sheet--back { transform: translate(-12px,-9px) rotate(-11deg) }
:where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-folder-front { transform: translateZ(8px) rotateX(-13deg) }
.pg-detail { padding-top: 32px }
.pg-detail h1 { font-weight: var(--weight-medium) }
.pg-detail h1>span { margin-top: 12px }
.pg-detail-intro { font-size: var(--text-16) }
.pg-hero { margin-top: 28px }
.pg-hero--basyt { background: #f2f5f2 }
.pg-hero--basyt img { max-height: none }
.pg-meta span { border-color: #e0e4e7 }
.pg-related { border-top: 1px solid #e2e6e9; margin-top: 52px; padding-top: 30px }
.pg-related>h2 { font-weight: var(--weight-medium); letter-spacing: -.5px; margin: 0 0 24px }
.pg-provenance { font-size: 11px; color: #7b8388 }
.pg-provenance:empty { display: none }
:where([data-page^="playground"]) .pg-project[data-project="basyt"] .pg-sheet img { background: #f0f3ed; object-fit: contain }
.pg-brand-stage { display: flex; align-items: center; justify-content: center; gap: 32px; min-height: 360px; padding: 38px; background: radial-gradient(ellipse at 50% 35%,#fff,#eaf0e8) }
.pg-brand-stage>img { width: 150px !important; max-width: 35%; height: auto; box-shadow: none; transition: transform .35s }
.pg-brand-stage>div>span { font-size: 70px; line-height: 1.3; font-weight: 600; color: #284432 }
.pg-brand-stage p { font-size: var(--text-14); color: #546959 }
.pg-hero--basyt>figcaption { padding: 12px 20px; margin: 0 }
.pg-original-assets { margin-top: 28px }
.pg-original-assets h2 { font-weight: var(--weight-medium); letter-spacing: -.4px }
.pg-tool-art { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; background: #f5f7f3; border-radius: var(--radius-sm) }
.pg-tool-art figure { margin: 0; text-align: center; padding: 12px 2px }
.pg-tool-art img { width: 30px; height: 30px }
.pg-tool-art figcaption { margin-top: 12px }
.pg-body .pg-detail-intro { max-width: 690px }
@media (hover:hover) and (pointer:fine) {
  :where([data-page^="playground"]) .pg-project:hover { z-index: 4 }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-sheet--image { transform: translate(9px,-18px) rotate(4deg) }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-sheet--back { transform: translate(-12px,-9px) rotate(-11deg) }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-folder-front { transform: translateZ(8px) rotateX(-13deg) }
  .pg-brand-stage:hover>img { transform: rotate(-6deg) translateY(-5px) }
}
@media (max-width:850px) {
  :where([data-page^="playground"]) .pg-canvas { margin-inline: 0 }
  :where([data-page^="playground"]) .pg-folders { gap: 38px 30px; padding-inline: 0 }
  :where([data-page^="playground"]) .pg-folder { height: 260px }
  :where([data-page^="playground"]) .pg-sheet { height: 190px }
  :where([data-page^="playground"]) .pg-folder-front { height: 73px; padding: 14px 16px }
}
@media (max-width:600px) {
  .pg-wrap { width: calc(100% - 36px) }
  .pg-intro { padding-top: 40px; padding-bottom: 24px }
  .pg-intro>p { font-size: var(--text-16) }
  :where([data-page^="playground"]) .pg-canvas { padding: 25px 20px 30px; margin-bottom: 40px; background-size: 20px 20px,20px 20px,100% 100% }
  :where([data-page^="playground"]) .pg-folders { grid-template-columns: 1fr; gap: 36px; padding: 6px 0 8px; max-width: 360px; margin: auto }
  :where([data-page^="playground"]) .pg-project:nth-child(n) { --offset: 0px; --angle: -2deg }
  :where([data-page^="playground"]) .pg-project:nth-child(even) { --angle: 2deg }
  :where([data-page^="playground"]) .pg-folder { height: 270px }
  :where([data-page^="playground"]) .pg-sheet { height: 199px; top: 23px }
  :where([data-page^="playground"]) .pg-folder-front { height: 73px }
  .pg-related { margin-top: 36px; padding-top: 24px }
}
@media (max-width:600px) {
  .pg-brand-stage { min-height: 260px; padding: 24px }
  .pg-brand-stage>div>span { font-size: 47px }
  .pg-brand-stage p { font-size: var(--text-12) }
  .pg-tool-art { grid-template-columns: repeat(2,1fr); gap: 12px }
}
@media (prefers-reduced-motion:reduce) {
  :where([data-page^="playground"]) .pg-folder, :where([data-page^="playground"]) .pg-sheet, :where([data-page^="playground"]) .pg-folder-front, .pg-brand-stage>img { transition: none !important }
  .pg-brand-stage:hover>img { transform: none }
  :where([data-page^="playground"]) .pg-folder { transform: rotateZ(var(--angle)) !important }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-sheet--image, :where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-sheet--image { transform: translate(5px,-6px) rotate(3deg) }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-sheet--back, :where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-sheet--back { transform: translate(-9px,0) rotate(-8deg) }
  :where([data-page^="playground"]) .pg-folder-link:hover .pg-folder-front, :where([data-page^="playground"]) .pg-folder-link:focus-visible .pg-folder-front { transform: translateZ(8px) }
}

/* 07 Playground: project pages | Akmefolio, Basyt, Bigboy, Storybooks World */
.pg-captures { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 24px; margin: 44px 0 }
.pg-capture { margin: 0; min-width: 0 }
.pg-capture--wide, .pg-capture--scroll { grid-column: 1/-1 }
.pg-capture>a { display: block; overflow: hidden; outline-offset: 5px }
.pg-capture img { display: block; width: 100%; height: auto; object-fit: contain }
.pg-capture--portrait>a { padding: 18px }
.pg-capture--portrait img { max-height: 580px; margin: auto; object-fit: contain }
.pg-capture--scroll>a { max-height: 540px; overflow: auto; scrollbar-width: thin }
.pg-capture figcaption { padding: 14px 1px 0 }
.pg-capture figcaption strong { font-size: var(--text-16); letter-spacing: -.2px }
.pg-capture figcaption p { font-size: var(--text-12); line-height: 1.75; margin: 7px 0 0 }
.pg-related-folders { display: flex; align-items: flex-start; gap: 22px; margin: 0; padding: 12px 0 20px; background: none; border: 0 }
.pg-related-folders .pg-project { flex: 1; min-width: 0; --angle: 0deg; --offset: 0px; transform: none }
.pg-related-folders .pg-folder { height: 217px }
.pg-related-folders .pg-tab { top: 80px; height: 25px }
.pg-related-folders .pg-folder-back { top: 100px }
.pg-related-folders .pg-sheet { top: 25px; height: 145px; border-width: 4px }
.pg-related-folders .pg-folder-front { height: 64px; padding: 12px }
.pg-related-folders .pg-project[data-project="basyt"] .pg-sheet img { padding: 0; object-fit: contain; background: #f3f5f5 }
.pg-related-folders .pg-project[data-project="bigboy"] .pg-sheet img { object-fit: cover }
.pg-related-folders .pg-project[data-project="akmefolio"] .pg-sheet img { object-fit: cover; object-position: center }
.pg-detail .pg-hero--bigboy img, .pg-detail .pg-hero--akmefolio img { max-height: 550px; object-fit: contain }
.pg-related { padding-bottom: 12px }
@media (max-width:650px) {
  .pg-captures { grid-template-columns: 1fr }
  .pg-capture { grid-column: auto }
  .pg-capture--portrait>a { max-width: 360px; margin: auto }
  .pg-capture--scroll>a { max-height: 450px }
  .pg-related-folders { flex-direction: column; align-items: center }
  .pg-related-folders .pg-project { width: 100%; max-width: 330px; flex: none }
  .pg-related-folders .pg-folder { height: 257px }
  .pg-related-folders .pg-sheet { height: 186px }
  .pg-related-folders .pg-folder-front { height: 72px }
}

/* 08 Portrait | every page */
img[src="assets/peter-portrait.png"] { filter: grayscale(1) !important; object-fit: cover; object-position: 50% 39% }

/* 09 Navigation: island bar and phone menu | every page */
.portfolio-navigation { color: var(--nav-fg); font-family: inherit; position: relative; z-index: 100 }
.portfolio-navigation * { box-sizing: border-box }
.portfolio-navigation a { color: inherit }
.island { position: fixed; z-index: 100; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-xl); -webkit-backdrop-filter: blur(20px) }
.island-logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border: 1px solid #ffffff0d; font-size: 24px; font-weight: var(--weight-medium) }
.island-tabs { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid #ffffff0d }
.chip { position: relative; display: flex; align-items: center; justify-content: center; white-space: nowrap; height: 44px; padding: 0 19px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: var(--text-14); font-weight: var(--weight-medium); transition: background .25s }
.chip:hover { background: #ffffff14 }
.chip[aria-current=page] { border-color: #ffffffcc }
.chip.chip-cta { background: var(--surface); color: var(--ink); font-weight: 600 }
.chip.chip-cta:hover { background: #e5e9f0 }
.menu-trigger { display: none; position: relative; width: 48px; height: 48px; border: 1px solid #ffffff4d; border-radius: 14px; background: transparent; cursor: pointer; flex-shrink: 0 }
.qd { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; transition: transform .45s cubic-bezier(.33,1,.68,1) }
.menu-trigger.open { background: rgba(8,8,8,.95) }
.mobile-panel { display: none; position: fixed; left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 99; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--radius-xl); opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; transition: transform .6s cubic-bezier(.16,1,.3,1),opacity .3s,visibility .3s }
.mobile-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto }
.m-item { align-items: center; padding: 0 20px; border-radius: 14px; font-size: var(--text-16); opacity: 0; transform: translateY(14px); transition: transform .5s cubic-bezier(.16,1,.3,1),opacity .3s }
.mobile-panel.open .m-item { opacity: 1; transform: none }
.mobile-panel.open .m-item:nth-child(2) { transition-delay: .06s }
.mobile-panel.open .m-item:nth-child(3) { transition-delay: .12s }
.mobile-panel.open .m-item:nth-child(4) { transition-delay: .18s }
.mobile-panel.open .m-item:nth-child(5) { transition-delay: .24s }
.m-item.m-cta { font-weight: 600 }
.portfolio-navigation :focus-visible { outline: 3px solid #94caff; outline-offset: 3px }
.page-navigation summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px }
.page-navigation nav { display: flex; flex-wrap: wrap }
.page-navigation nav a { color: inherit; text-decoration: none }
.page-navigation nav a:hover { color: var(--ink) }
.page-navigation .section-dot { display: none }
.page-nav-chevron { margin-left: auto }
.page-nav-dots { display: flex; gap: 3px }
.page-nav-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor }
@media (max-width:760px) {
  .island-tabs { display: none }
  .island-logo { width: 48px; height: 48px; font-size: 24px }
  .menu-trigger { display: block }
  .mobile-panel { display: flex }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-navigation * { transition: none !important }
}
.qd.tl-o { transform: translate(-9px,-9px) }
.menu-trigger.open .qd.tl-o { transform: translate(-10px,-10px) }
.qd.tl-h { transform: translate(-9px,-5px) }
.menu-trigger.open .qd.tl-h { transform: translate(-7.5px,-7.5px) }
.qd.tl-v { transform: translate(-5px,-9px) }
.menu-trigger.open .qd.tl-v { transform: translate(-2px,-2px) }
.qd.tl-i { transform: translate(-5px,-5px) }
.menu-trigger.open .qd.tl-i { transform: translate(-5px,-5px) }
.qd.tr-o { transform: translate(9px,-9px) }
.menu-trigger.open .qd.tr-o { transform: translate(10px,-10px) }
.qd.tr-h { transform: translate(9px,-5px) }
.menu-trigger.open .qd.tr-h { transform: translate(7.5px,-7.5px) }
.qd.tr-v { transform: translate(5px,-9px) }
.menu-trigger.open .qd.tr-v { transform: translate(2px,-2px) }
.qd.tr-i { transform: translate(5px,-5px) }
.menu-trigger.open .qd.tr-i { transform: translate(5px,-5px) }
.qd.bl-o { transform: translate(-9px,9px) }
.menu-trigger.open .qd.bl-o { transform: translate(-10px,10px) }
.qd.bl-h { transform: translate(-9px,5px) }
.menu-trigger.open .qd.bl-h { transform: translate(-7.5px,7.5px) }
.qd.bl-v { transform: translate(-5px,9px) }
.menu-trigger.open .qd.bl-v { transform: translate(-2px,2px) }
.qd.bl-i { transform: translate(-5px,5px) }
.menu-trigger.open .qd.bl-i { transform: translate(-5px,5px) }
.qd.br-o { transform: translate(9px,9px) }
.menu-trigger.open .qd.br-o { transform: translate(10px,10px) }
.qd.br-h { transform: translate(9px,5px) }
.menu-trigger.open .qd.br-h { transform: translate(7.5px,7.5px) }
.qd.br-v { transform: translate(5px,9px) }
.menu-trigger.open .qd.br-v { transform: translate(2px,2px) }
.qd.br-i { transform: translate(5px,5px) }
.menu-trigger.open .qd.br-i { transform: translate(5px,5px) }
.portfolio-navigation { --nav-fg: var(--ink) }
.portfolio-navigation .island { justify-content: space-between; border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); transition: width .38s var(--ease-soft),top .38s,box-shadow .3s }
body.nav-compact .portfolio-navigation .island { top: 12px; width: min(760px,calc(100% - 48px)); box-shadow: 0 12px 32px #20202012 }
.portfolio-navigation .island-logo { background: transparent; border-color: transparent; letter-spacing: normal; color: var(--ink) }
.portfolio-navigation .island-tabs { background: transparent; border-color: transparent }
.portfolio-navigation .chip { color: #3a3a3a; border-color: transparent }
.portfolio-navigation .chip:hover { background: #20202008 }
.portfolio-navigation .chip[aria-current=page] { border-color: transparent; background: #2020200a; color: var(--ink) }
.portfolio-navigation .chip.chip-cta { background: var(--ink); color: var(--on-dark) }
.portfolio-navigation .chip.chip-cta:hover { background: #373737 }
.portfolio-navigation a, .portfolio-navigation a:hover, .portfolio-navigation a:focus, .portfolio-navigation a[aria-current] { text-decoration: none !important; background-image: none !important; box-shadow: none !important; border-bottom-color: transparent !important }
.portfolio-navigation a::after, .portfolio-navigation a::before { content: none !important; display: none !important }
.portfolio-navigation .menu-trigger { color: var(--ink) }
.portfolio-navigation .menu-trigger.open { background: #20202008 }
.portfolio-navigation .qd { background: var(--ink) }
.portfolio-navigation .mobile-panel { background: rgba(255,255,255,.9); border: 1px solid #ffffffc9; color: var(--ink); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); box-shadow: 0 8px 32px #20202012; align-items: stretch; max-height: calc(100dvh - 128px); overflow-y: auto }
.portfolio-navigation .mobile-panel .m-item { display: flex; width: 100%; flex: 0 0 auto; justify-content: flex-start; align-self: stretch; min-height: 56px; background: #20202005; color: #3a3a3a; border: 0; margin: 0 }
.portfolio-navigation .mobile-panel .m-item[aria-current=page] { background: #2020200c; color: var(--ink) }
.portfolio-navigation .mobile-panel .m-item:hover { background: #2020200d }
.portfolio-navigation .mobile-panel .m-cta { background: var(--ink); color: var(--on-dark); justify-content: center }
body { padding-top: 112px; padding-bottom: 0 }
.page-navigation { position: fixed; z-index: 90; top: 102px; right: max(24px,calc((100vw - 800px)/2)); width: 220px; margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 5px 24px #2020200d; color: #585858; transition: opacity .22s,transform .22s,visibility .22s }
.page-navigation nav { flex-direction: column; gap: 0; padding: 8px 0 0 }
.page-navigation nav a { display: block; padding: 10px 0 }
.page-navigation details[open] { max-height: calc(100dvh - 150px); overflow: auto }
body.toc-hidden .page-navigation { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) }
@media (max-width:760px) {
  body { padding-top: 0; padding-bottom: 0 }
  body>footer { padding-bottom: calc(108px + env(safe-area-inset-bottom)) }
  .portfolio-navigation .island, body.nav-compact .portfolio-navigation .island { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto; max-width: none; transform: none }
  .portfolio-navigation .mobile-panel { left: 16px; right: 16px; width: auto; bottom: calc(92px + env(safe-area-inset-bottom)); padding: 8px; gap: 6px }
  .page-navigation { width: 205px }
  .page-navigation details[open] { max-height: calc(100dvh - 140px) }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-navigation .island, .page-navigation { transition: none !important }
}
.island-logo svg { display: block; flex-shrink: 0 }
@media (min-width:761px) {
  .portfolio-navigation .island { bottom: auto; max-width: none; border-width: 0 0 1px; box-shadow: none }
  body.nav-compact .portfolio-navigation .island { top: 12px; left: 50%; right: auto; transform: translateX(-50%); width: min(760px,calc(100% - 48px)); max-width: none; border-radius: var(--radius-xl); padding: 8px; border-width: 1px; box-shadow: 0 12px 32px #20202012 }
}

/* 10 Action rows | Home, About, Contact */
:where([data-page="index"], [data-page="about"], [data-page="contact"]) .actions { flex-wrap: wrap }
.mentorship-actions { display: flex; align-items: center }
.mentorship-action { white-space: normal; text-align: center }

/* 11 Playground: Bigboy 3D objects | Bigboy */
.bb-objects { margin: 64px 0 }
.bb-object-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 24px }
.bb-object-heading h2 { margin: 8px 0 0 }
.bb-object-heading>p { font-size: var(--text-14); line-height: 1.7; margin: 0 }
.bb-object-stage { border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%,#fafdfd 0,#e8f0f1 52%,#ceddde 100%) }
.bb-object-stage model-viewer { display: block; width: 100%; height: 460px; touch-action: pan-y }
.bb-load { position: absolute; inset: 0; margin: auto; width: 170px; height: 48px; background: #272727; color: var(--on-dark); border: 0; border-radius: 28px; font: inherit; font-size: var(--text-14); cursor: pointer }
.bb-load span { margin-left: 8px }
.bb-stage-label { position: absolute; bottom: 20px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; color: #494949; font-size: 13px }
.bb-stage-label button { pointer-events: auto; border: 0; border-radius: var(--radius-xl); background: #ffffffc9; color: #494949; font: inherit; cursor: pointer }
.bb-object-controls { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap }
.bb-object-controls button { flex: 1; padding: 15px 12px; border: 0; border-radius: var(--radius-md); background: #edf1f2; color: #424242; font: inherit; cursor: pointer; transition: background .2s,color .2s }
.bb-object-controls button span { opacity: .55; margin-right: 8px }
.bb-object-controls button[aria-pressed=true] { background: #383838; color: var(--on-dark) }
.bb-object-controls button:hover { background: #cfdfe0; color: #2f2f2f }
.bb-object-hint, .bb-object-note { font-size: var(--text-12) !important; line-height: 1.6 !important; margin: 8px 0 !important }
.bb-object-note { opacity: .8 }
.bb-objects :focus-visible { outline: 3px solid #467e9c; outline-offset: 4px }
@media (max-width:600px) {
  .bb-object-heading { grid-template-columns: 1fr; gap: 16px }
  .bb-object-stage model-viewer { height: 340px }
  .bb-object-controls { gap: 6px }
  .bb-object-controls button { padding: 14px 6px }
  .bb-object-controls button span { display: block; margin: 0 0 4px }
  .bb-objects { margin: 44px 0 }
}

/* 12 Editorial refinements | every page */
footer a, footer a:hover, footer a:focus-visible { color: inherit !important; opacity: 1 !important; filter: none !important; background: transparent !important; background-image: none !important; text-decoration: none !important; box-shadow: none !important; border-color: transparent !important }
footer a:hover, footer a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; border-radius: 3px }
footer a::after { background: transparent !important; box-shadow: none !important }

/* 13 Phone layout pass | every page */
.delivery-title { max-width: 520px; margin-bottom: 24px }
#work :is(article, .project-card, .work-card) { transition: transform .28s ease }
#work a:has(img) { transition: transform .28s ease; outline-offset: 8px }
#work a:has(img):focus-visible { outline: 2px solid #506479; border-radius: var(--radius-lg) }
@media (hover:hover) and (pointer:fine) {
  #work a:has(img):hover { transform: translateY(-5px) }
  #work :is(article, .project-card, .work-card):hover h3 { color: #345b71 }
}
@media (max-width:760px) {
  #work a:has(img):active { transform: scale(.99) }
}
@media (prefers-reduced-motion:reduce) {
  #work a:has(img), #work :is(article, .project-card, .work-card) { transition: none !important; transform: none !important }
}
.ui-icon { display: inline-block; width: 20px !important; height: 20px !important; min-width: 20px; flex: 0 0 20px; vertical-align: middle; fill: none; stroke: currentColor }
.button .ui-icon { margin-left: 6px }
.pg-back .ui-icon { margin-right: 6px }

/* 14 Evidence blocks and page contents menu | every page */
h1, h2, h3 { text-transform: none !important }
#work .work-item, .evidence-work-item { margin: 0 0 56px !important; padding: 0 !important }
.evidence-work-item:last-child { margin-bottom: 0 !important }
#work .evidence-work-item>a, .evidence-work-item>a { display: grid !important; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 30px; align-items: center; color: inherit; text-decoration: none }
.evidence-work-copy h3 { font-size: var(--text-26) !important; line-height: 1.2 !important; letter-spacing: -.025em }
.evidence-read { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-14) }
.evidence-work-item>a:hover .evidence-read { text-decoration: underline; text-underline-offset: 4px }
.evidence-crop { display: block; position: relative; width: 100%; overflow: hidden; background: #f4f6f7; border-radius: 8px }
.evidence-crop img { position: absolute !important; max-width: none !important; object-fit: fill !important; object-position: initial !important; transform: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important }
.evidence-figure { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; min-width: 0 }
.evidence-zoom { display: block; overflow: hidden; text-decoration: none }
.evidence-zoom:focus-visible { outline: 2px solid #345b71; outline-offset: 5px }
.evidence-figure figcaption { display: flex; flex-direction: column; text-align: left !important; font-size: var(--text-14) !important; line-height: 1.6; color: #687180; margin: 14px 0 0 !important; padding: 0 !important }
.evidence-figure figcaption strong { font-weight: var(--weight-medium) }
.evidence-figure figcaption a { text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-14) }
.evidence-figure .ui-icon { width: 16px !important; height: 16px !important; min-width: 16px }
.case { padding-top: 24px !important }
.case-product-hero { margin: 24px 0 40px !important; max-width: 620px }
.case-product-hero .evidence-crop { max-height: none }
.case-context { font-size: 15px; line-height: 1.6 }
.decision-evidence { margin-top: 48px }
.decision-evidence>header { max-width: 680px }
.decision-evidence p:not(.evidence-kicker), .delivery-record p, .delivery-record li { font-size: var(--text-16); line-height: 1.75 }
.decision-block { margin-top: 48px }
.decision-copy { max-width: 660px; margin-bottom: 24px }
.decision-block h3 { font-size: var(--text-26); line-height: 1.25; letter-spacing: -.02em; margin: 0 0 16px }
.evidence-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; align-items: start }
.evidence-pair .narrow-evidence { width: 100%; max-width: 290px; justify-self: center }
.responsive-pair { grid-template-columns: 1.5fr 1fr }
.responsive-pair .narrow-evidence { max-width: 215px }
.delivery-responsibility { padding: 24px 0; border-top: 1px solid #dfe5ea }
.delivery-record { padding-top: 32px !important }
.scope-document { padding-top: 28px; padding-bottom: 56px }
.scope-document h1 { font-size: clamp(32px,5vw,48px); line-height: 1.15; margin: 0 0 20px }
.scope-intro { max-width: 640px; font-size: var(--text-20); line-height: 1.6 }
.scope-policy { margin: 28px 0 40px; font-size: 15px; line-height: 1.7 }
.scope-policy p { margin: 8px 0 }
.scope-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid #e0e6eb }
.scope-row h2 { line-height: 1.3; margin: 0 }
.scope-row ul { margin: 0; padding-left: 20px; font-size: var(--text-16); line-height: 1.9; color: #596575 }
.scope-conversation { margin-top: 32px; padding-top: 24px }
.scope-conversation h2 { font-size: var(--text-28) }
.scope-conversation p { font-size: var(--text-16); line-height: 1.7; max-width: 650px }
.scope-conversation .actions { display: flex; align-items: center; flex-wrap: wrap }
.page-navigation.toc-muted { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important }
.page-navigation { font-size: var(--text-14) }
.page-navigation summary { min-height: 28px }
@media (min-width:1280px) {
  .page-navigation { right: max(16px,calc((100vw - 1280px)/2)); width: 200px; top: 108px }
}
@media (max-width:760px) {
  #work>h2 { font-size: var(--text-28) !important }
  #work .evidence-work-item>a, .evidence-work-item>a { grid-template-columns: 1fr; gap: 18px }
  #work .work-item, .evidence-work-item { margin-bottom: 48px !important }
  .case { padding-top: 28px !important }
  .case-product-hero { margin-top: 24px !important; margin-bottom: 28px !important }
  .decision-evidence { margin-top: 36px }
  .decision-evidence h2 { font-size: var(--text-28) }
  .decision-block { margin-top: 36px }
  .evidence-pair, .responsive-pair { grid-template-columns: 1fr; gap: 28px }
  .evidence-pair .narrow-evidence { justify-self: start; max-width: 300px }
  .responsive-pair .narrow-evidence { max-width: 245px }
  .evidence-figure figcaption { font-size: var(--text-14) !important }
  .wide-evidence .evidence-zoom { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin }
  .wide-evidence .evidence-crop { width: 800px; max-width: none }
  .scope-document { padding-top: 28px }
  .scope-policy { font-size: var(--text-14); margin: 24px 0 28px }
  .scope-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0 }
  .scope-row ul { font-size: var(--text-16) }
  .page-navigation { top: 12px; right: 16px; max-width: calc(100% - 32px) }
}
@media (prefers-reduced-motion:reduce) {
  .evidence-work-item>a { transition: none !important; transform: none !important }
}

/* 15 NDA work: avatar decision | NDA work */
.avatar-decision { margin: 8px 0 40px; padding: 32px 0; border-top: 1px solid #e0e6eb }
.avatar-decision h2 { max-width: 620px; margin: 0 0 20px }
.avatar-lead { line-height: 1.65; max-width: 650px }
.avatar-decision-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 28px 0 }
.avatar-decision-points h3 { line-height: 1.4; margin: 0 0 10px }
.avatar-decision-points p { line-height: 1.75; margin: 0 }
.avatar-model-header { font-size: var(--text-14); color: #4b4b4b }
@media (max-width:760px) {
  .avatar-decision { padding-top: 24px }
  .avatar-decision h2 { font-size: var(--text-28) }
  .avatar-decision-points { grid-template-columns: 1fr; gap: 24px }
  .avatar-decision-points p { font-size: var(--text-16) }
  .avatar-model-header { flex-direction: column }
}

/* 16 Hero navigation | every page */
.home-intro.editorial-hero { display: grid !important; grid-template-columns: 194px minmax(0,1fr) !important; gap: 48px !important; padding-top: 56px !important }
.editorial-hero .editorial-portrait { display: block; width: 194px; height: 320px; max-width: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1); border-radius: 24px; margin: 0 }
.editorial-introduction { min-width: 0 }
.editorial-hero h1 { line-height: 1.12 !important; font-weight: var(--weight-medium); margin: 0 0 26px !important; text-transform: none !important; text-wrap: balance }
.editorial-hero .editorial-summary { line-height: 1.6 !important; margin: 0 !important }
.editorial-summary strong { font-weight: var(--weight-medium) }
.editorial-hero .actions { margin-top: 28px !important; flex-wrap: wrap }
@media (min-width:761px) {
  .portfolio-navigation .island, body.nav-compact .portfolio-navigation .island { left: 50%; right: auto; transform: translateX(-50%); transition: width .9s var(--ease-soft),top .9s var(--ease-soft),border-radius .9s var(--ease-soft),padding .9s var(--ease-soft),box-shadow .9s ease,border-color .9s ease }
  .portfolio-navigation .island { width: 100%; top: 0; border-radius: 0; padding: 12px 24px }
  body.nav-compact .portfolio-navigation .island { width: min(760px,calc(100% - 48px)); top: 12px; border-radius: var(--radius-xl); padding: 8px }
}
@media (max-width:760px) {
  .home-intro.editorial-hero { grid-template-columns: minmax(0,1fr) 88px !important }
  .editorial-hero .editorial-summary { grid-column: 1/-1; grid-row: 3; margin-top: -8px !important }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-navigation .island, body.nav-compact .portfolio-navigation .island { transition: none !important }
}

/* 17 Phone project covers | Home, Work */

/* 18 Interaction cards | every page */
:is(button, [role="button"], a.button, a.text-link, .portfolio-navigation .chip, .portfolio-navigation .m-item) { transition: transform .28s cubic-bezier(.2,.8,.2,1),background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent }
:is(button, [role="button"], a.button, a.text-link):focus-visible { outline: 2px solid #506479; outline-offset: 4px }
:is(button, [role="button"], a.button, a.text-link, .portfolio-navigation .chip, .portfolio-navigation .m-item):active { transform: scale(.98) }
:is(a.button, a.text-link, .evidence-read) .ui-icon { transition: transform .28s cubic-bezier(.2,.8,.2,1) }
@media (hover:hover) and (pointer:fine) {
  :is(button:not(.menu-trigger), [role="button"], a.button, a.text-link):hover { transform: translateY(-2px) }
  :is(a.button, a.text-link):hover .ui-icon, .evidence-work-item>a:hover .evidence-read .ui-icon { transform: translateX(2px) }
}
.project-company { display: flex; align-items: center; min-height: 34px; flex-wrap: wrap }
.project-company img { display: block; position: static; width: 96px; height: 32px; object-fit: contain; object-position: left center; flex: 0 0 96px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent }
.evidence-work-copy .project-subtitle { font-size: var(--text-16); line-height: 1.65 }
@media (max-width:760px) {
  .evidence-work-copy .project-subtitle { font-size: var(--text-16); line-height: 1.6 }
}
@media (prefers-reduced-motion:reduce) {
  :is(button, [role="button"], a.button, a.text-link, .portfolio-navigation .chip, .portfolio-navigation .m-item), :is(a.button, a.text-link, .evidence-read) .ui-icon { transition: none !important; transform: none !important }
}

/* 19 Contribution cards | every page */
.delivery-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: stretch }
.delivery-points article { display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 28px !important }
.delivery-points .contribution-icon { display: block; flex: 0 0 56px; width: 56px !important; height: 56px !important; margin: 0 auto 28px 0; color: #3d3d3d; fill: none }
.delivery-points h3 { font-size: var(--text-20); line-height: 1.3; min-height: 3.9em; margin: 0 0 14px; letter-spacing: -.025em }
.delivery-points p { font-size: var(--text-16); line-height: 1.65; margin: 0 }
@media (max-width:760px) {
  .delivery-points { grid-template-columns: 1fr; gap: 16px }
  .delivery-points article { padding: 24px !important }
  .delivery-points h3 { font-size: var(--text-22); min-height: 0 }
  .delivery-points .contribution-icon { margin-bottom: 24px }
}

/* 20 Phone hero | Home */
.editorial-mobile-bio { display: none }
@media (max-width:760px) {
  .home-intro.editorial-hero { padding-top: 32px !important }
  .editorial-hero h1 { text-wrap: balance }
  .editorial-hero .editorial-summary { display: none !important }
  .editorial-hero .editorial-mobile-bio { display: block; font-size: clamp(18px,4.2vw,20px); line-height: 1.55; letter-spacing: -.015em; max-width: none }
  .editorial-mobile-bio strong { font-weight: var(--weight-medium) }
}

/* 21 Phone navigation colors | every page */
@media (max-width:760px) {
  .portfolio-navigation { --nav-fg: #f5f5f5 }
  .portfolio-navigation .island, body.nav-compact .portfolio-navigation .island { background: rgba(33,33,33,.94); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 36px #00000035; color: #f5f5f5 }
  .portfolio-navigation .island-logo { color: #f5f5f5; background: transparent; border-color: transparent }
  .portfolio-navigation .menu-trigger { color: #f5f5f5; background: transparent }
  .portfolio-navigation .menu-trigger.open { background: #ffffff14 }
  .portfolio-navigation .qd { background: #f5f5f5 }
  .portfolio-navigation .mobile-panel { background: rgba(33,33,33,.97); border-color: #ffffff26; color: #f5f5f5; box-shadow: 0 12px 36px #00000040 }
  .portfolio-navigation .mobile-panel .m-item { background: #ffffff08; color: #f5f5f5 }
  .portfolio-navigation .mobile-panel .m-item[aria-current=page] { background: #ffffff1f; color: var(--on-dark) }
  .portfolio-navigation .mobile-panel .m-item:hover { background: #ffffff18; color: var(--on-dark) }
  .portfolio-navigation .mobile-panel .m-cta, .portfolio-navigation .mobile-panel .m-cta[aria-current=page] { background: #f5f5f5; color: #212121 }
  .portfolio-navigation .mobile-panel .m-cta:hover { background: #dedede; color: #212121 }
  .portfolio-navigation :focus-visible { outline-color: #fff }
}

/* 22 Playground folders on the homepage | Home */
:where([data-page="index"]) .amber { --pg-light: #f4d49d; --pg-mid: #e6b66b; --pg-dark: #704b23; --pg-wash: #f5ecdb }
:where([data-page="index"]) .mint { --pg-light: #bce1d6; --pg-mid: #8bc8b7; --pg-dark: #24594c; --pg-wash: #e8f1ed }
:where([data-page="index"]) .sage { --pg-light: #d7dfb8; --pg-mid: #b8c68c; --pg-dark: #465633; --pg-wash: #eff1e6 }
:where([data-page="index"]) .sky { --pg-light: #c7dcf3; --pg-mid: #a0bfdc; --pg-dark: #355677; --pg-wash: #eaf0f6 }
:where([data-page="index"]) .pg-folder-link { text-decoration: none !important; color: inherit }
:where([data-page="index"]) .pg-folder { position: relative }
:where([data-page="index"]) .pg-tab { position: absolute; font-size: 9px; letter-spacing: 1.1px; color: var(--pg-dark); font-weight: 650 }
:where([data-page="index"]) .pg-folder-back { position: absolute; inset: sixty }
:where([data-page="index"]) .pg-sheet { position: absolute }
:where([data-page="index"]) .pg-project.sky .pg-sheet--image img { object-position: 40% center }
:where([data-page="index"]) .pg-folder-front { position: absolute; left: 0; right: 0; bottom: 0; transform-origin: bottom; transition: transform .48s cubic-bezier(.2,.75,.2,1); display: flex; justify-content: space-between }
:where([data-page="index"]) .pg-folder-label small { display: block }
:where([data-page="index"]) .pg-folder-link:focus-visible { outline: 2px solid var(--pg-dark) }
:where([data-page="index"]) .pg-folder-link:focus-visible .pg-sheet--back { transform: translate(-7px,-38px) rotate(-11deg) }
:where([data-page="index"]) .pg-folder-link:focus-visible .pg-sheet--image { transform: translate(12px,-48px) rotate(9deg) }
:where([data-page="index"]) .pg-folder-link:focus-visible .pg-folder-front { transform: rotateX(-17deg) }
@media (hover:hover) and (pointer:fine) {
  :where([data-page="index"]) .pg-folder-link:hover .pg-sheet--back { transform: translate(-7px,-38px) rotate(-11deg) }
  :where([data-page="index"]) .pg-folder-link:hover .pg-sheet--image { transform: translate(12px,-48px) rotate(9deg) }
  :where([data-page="index"]) .pg-folder-link:hover .pg-folder-front { transform: rotateX(-17deg) }
}
@media (prefers-reduced-motion:reduce) {
  :where([data-page="index"]) .pg-folder-link:hover .pg-sheet, :where([data-page="index"]) .pg-folder-link:focus-visible .pg-sheet { transform: none }
  :where([data-page="index"]) .pg-folder-link:hover .pg-folder-front, :where([data-page="index"]) .pg-folder-link:focus-visible .pg-folder-front { transform: none }
}

/* 23 Playground canvas on the homepage | Home */
:where([data-page="index"]) .pg-canvas { position: relative; isolation: isolate; border: 1px solid #e9edf0; background-color: #fafbfd; background-image: linear-gradient(#e8edf280 1px,transparent 1px),linear-gradient(90deg,#e8edf280 1px,transparent 1px),radial-gradient(ellipse at 45% 40%,#fff8,transparent 75%); background-size: 24px 24px,24px 24px,100% 100% }
:where([data-page="index"]) .pg-folders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 38px 8px 36px; margin: 0; max-width: none }
:where([data-page="index"]) .pg-project { --angle: -3deg; --offset: 0px; --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px; position: relative; min-width: 0; transform: translateY(var(--offset)); z-index: 1 }
:where([data-page="index"]) .pg-project:nth-child(2) { --angle: 4deg; --offset: 26px }
:where([data-page="index"]) .pg-project:nth-child(3) { --angle: 2deg; --offset: -2px }
:where([data-page="index"]) .pg-project:nth-child(4) { --angle: -3deg; --offset: 30px }
:where([data-page="index"]) .pg-project:focus-within { z-index: 4 }
:where([data-page="index"]) .pg-folder-link { position: relative; display: block; outline-offset: 8px }
:where([data-page="index"]) .pg-folder { height: 285px; margin: 0; perspective: 1100px; transform: perspective(1100px) rotateZ(var(--angle)) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--px),var(--py),0); transform-style: preserve-3d; transition: transform .23s ease-out }
:where([data-page="index"]) .pg-tab { top: 91px; left: 0; width: 41%; height: 30px; padding: 0; background: var(--pg-mid); border-radius: 11px 17px 0 0; box-shadow: inset 0 1px #ffffffb0 }
:where([data-page="index"]) .pg-folder-back { top: 110px; bottom: 0; left: 0; right: 0; border-radius: 0 12px 12px 12px; background: linear-gradient(145deg,var(--pg-mid),var(--pg-light)); box-shadow: 0 24px 26px -21px #35353566; transform: translateZ(-5px) }
:where([data-page="index"]) .pg-sheet { top: 27px; bottom: auto; left: 6%; width: 88%; height: 211px; border: 5px solid white; border-radius: 7px; padding: 0; box-shadow: 0 6px 15px #2c2c2c1c; overflow: hidden; transition: transform .35s cubic-bezier(.2,.75,.2,1) }
:where([data-page="index"]) .pg-sheet--back { transform: translate(-9px,0) rotate(-8deg); background: var(--surface) }
:where([data-page="index"]) .pg-sheet--image { transform: translate(5px,-6px) rotate(3deg); background: var(--surface); z-index: 1 }
:where([data-page="index"]) .pg-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: var(--surface) }
:where([data-page="index"]) .pg-project[data-project="hadoota"] .pg-sheet--image img { object-fit: cover }
:where([data-page="index"]) .pg-project[data-project="hadoota"] .pg-sheet--back img { object-fit: cover; object-position: center 25% }
:where([data-page="index"]) .pg-project[data-project="bigboy"] .pg-sheet img { object-fit: contain; background: #2b2b2b }
:where([data-page="index"]) .pg-project[data-project="akmefolio"] .pg-sheet--image img { object-fit: cover; object-position: right center }
:where([data-page="index"]) .pg-project[data-project="basyt"] .pg-sheet--back img { object-position: top }
:where([data-page="index"]) .pg-folder-front { height: 78px; border-radius: 11px; background: linear-gradient(135deg,var(--pg-light),var(--pg-mid)); box-shadow: inset 0 1px 0 #ffffffbd,inset 0 -3px 1px #00000007,0 6px 13px #34343412; z-index: 2; transform: translateZ(8px); align-items: center }
:where([data-page="index"]) .pg-folder-label { line-height: 1.1 }
:where([data-page="index"]) .pg-folder-label small { line-height: 1.4 }
:where([data-page="index"]) .pg-folder-link:focus-visible .pg-sheet--image { transform: translate(9px,-18px) rotate(4deg) }
:where([data-page="index"]) .pg-folder-link:focus-visible .pg-sheet--back { transform: translate(-12px,-9px) rotate(-11deg) }
:where([data-page="index"]) .pg-folder-link:focus-visible .pg-folder-front { transform: translateZ(8px) rotateX(-13deg) }
:where([data-page="index"]) .pg-project[data-project="basyt"] .pg-sheet img { background: #f0f3ed; object-fit: contain }
@media (hover:hover) and (pointer:fine) {
  :where([data-page="index"]) .pg-project:hover { z-index: 4 }
  :where([data-page="index"]) .pg-folder-link:hover .pg-sheet--image { transform: translate(9px,-18px) rotate(4deg) }
  :where([data-page="index"]) .pg-folder-link:hover .pg-sheet--back { transform: translate(-12px,-9px) rotate(-11deg) }
  :where([data-page="index"]) .pg-folder-link:hover .pg-folder-front { transform: translateZ(8px) rotateX(-13deg) }
}
@media (max-width:850px) {
  :where([data-page="index"]) .pg-canvas { margin-inline: 0 }
  :where([data-page="index"]) .pg-folders { gap: 38px 30px; padding-inline: 0 }
  :where([data-page="index"]) .pg-folder { height: 260px }
  :where([data-page="index"]) .pg-sheet { height: 190px }
  :where([data-page="index"]) .pg-folder-front { height: 73px; padding: 14px 16px }
}
@media (max-width:600px) {
  :where([data-page="index"]) .pg-canvas { background-size: 20px 20px,20px 20px,100% 100% }
  :where([data-page="index"]) .pg-folders { grid-template-columns: 1fr; gap: 36px; padding: 6px 0 8px; max-width: 360px; margin: auto }
  :where([data-page="index"]) .pg-project:nth-child(n) { --offset: 0px; --angle: -2deg }
  :where([data-page="index"]) .pg-project:nth-child(even) { --angle: 2deg }
  :where([data-page="index"]) .pg-folder { height: 270px }
  :where([data-page="index"]) .pg-sheet { height: 199px; top: 23px }
  :where([data-page="index"]) .pg-folder-front { height: 73px }
}
@media (prefers-reduced-motion:reduce) {
  :where([data-page="index"]) .pg-folder, :where([data-page="index"]) .pg-sheet, :where([data-page="index"]) .pg-folder-front { transition: none !important }
  :where([data-page="index"]) .pg-folder { transform: rotateZ(var(--angle)) !important }
  :where([data-page="index"]) .pg-folder-link:hover .pg-sheet--image, :where([data-page="index"]) .pg-folder-link:focus-visible .pg-sheet--image { transform: translate(5px,-6px) rotate(3deg) }
  :where([data-page="index"]) .pg-folder-link:hover .pg-sheet--back, :where([data-page="index"]) .pg-folder-link:focus-visible .pg-sheet--back { transform: translate(-9px,0) rotate(-8deg) }
  :where([data-page="index"]) .pg-folder-link:hover .pg-folder-front, :where([data-page="index"]) .pg-folder-link:focus-visible .pg-folder-front { transform: translateZ(8px) }
}

/* 24 Bento grids | NDA work, Dubai Portal, Government AI, Unlock, Akmefolio, Basyt, Storybooks World */
.psb { --psb-card: #ffffff; --psb-ink: var(--ink); --psb-r-card: 16px; --psb-font: "Portfolio","Avenir Next","Avenir","Helvetica Neue",Arial,sans-serif }
.psb, .psb * { box-sizing: border-box }
.psb { font-family: var(--psb-font); color: var(--psb-ink); line-height: 1.55; -webkit-font-smoothing: antialiased }
.psb h2, .psb h3 { color: var(--psb-ink) }
.psb.psb-cs { background: transparent; padding-inline: 0; margin: 0 }
.psb.psb-cs { padding-block: 12px 72px }
.psb .psb-cs-head { margin-bottom: 24px; max-width: 70ch }
.psb .psb-cs-head h2 { font-size: clamp(1.75rem,3.2vw,2.25rem); font-weight: var(--weight-medium); margin: 0 0 28px }
.psb .psb-cs-head p.psb-lede { margin: 0 }
.psb .psb-bento { container: psb / inline-size; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px }
.psb .psb-s7 { grid-column: span 7 }
.psb .psb-s5 { grid-column: span 5 }
.psb .psb-s4 { grid-column: span 4 }
.psb .psb-s6 { grid-column: span 6 }
@container psb (max-width:900px) {
  .psb .psb-s7, .psb .psb-s5 { grid-column: span 12 }
  .psb .psb-s4 { grid-column: span 6 }
  .psb .psb-bento>.psb-s4:last-child:nth-child(odd), .psb .psb-bento>.psb-s4:nth-child(odd):has(+ :not(.psb-s4)) { grid-column: span 12 }
}
@container psb (max-width:560px) {
  .psb .psb-bento>* { grid-column: 1/-1 !important }
}
.psb .psb-card { background: var(--psb-card); border: 0; border-radius: var(--psb-r-card); display: flex; flex-direction: column; min-width: 0 }
.psb .psb-stage { position: relative; overflow: hidden }
.psb .psb-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(241,244,248,0),var(--panel) 85%); z-index: 2; pointer-events: none }
.psb .psb-card { transition: box-shadow .2s ease }
.psb .psb-card h3 { font-weight: var(--weight-medium); letter-spacing: -.01em }
.psb .psb-card .psb-copy>p:not(.psb-tag) { margin: 0 }
.psb .psb-s12 { grid-column: span 12 }
.psb .psb-cs-head .psb-lede { max-width: 62ch; font-size: 1rem; line-height: 1.6 }
.psb.psb-sticker { --ux-tint: #e7edf7; --cog-tint: #eeeaf6; --biz-tint: #e6efe9; --res-tint: #f5eee2 }
.psb.psb-sticker .psb-card, .psb.psb-sticker .psb-card:hover { box-shadow: none }
.psb.psb-sticker .psb-card { padding: 8px }
.psb.psb-sticker .psb-stage { height: 236px; background: var(--tint,#f1f2f4); background-image: none; box-shadow: none; border-radius: var(--radius-md) }
.psb.psb-sticker .psb-stage::after { display: none }
.psb.psb-sticker .d-ux { --tint: var(--ux-tint) }
.psb.psb-sticker .d-cog { --tint: var(--cog-tint) }
.psb.psb-sticker .d-biz { --tint: var(--biz-tint) }
.psb.psb-sticker .d-res { --tint: var(--res-tint) }
.psb.psb-sticker .psb-copy { padding: 16px 12px 12px }
.psb.psb-sticker .psb-card h3 { margin: 0 0 4px; font-size: 1.125rem; line-height: 1.3 }
.psb.psb-sticker .psb-card .psb-copy>p { line-height: 1.5; max-width: 52ch }
.psb .psk-label { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: .75rem; white-space: nowrap }
.psb.psb-sticker .psb-stage { container: pskst / inline-size }
.psb .psk-scene { position: absolute; inset: 0; transform-origin: 50% 55% }
.psb .psk { --x: var(--x-lg,0px); position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y,0px)); display: block; overflow: visible; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); transform: translate(-50%,-50%) rotate(var(--r,0deg)); transition: transform .25s var(--ease-out) }
.psb .psb-card:hover .psk { transform: translate(-50%,-50%) rotate(calc(var(--r,0deg) * 1.6)) translateY(-3px) }
@container pskst (max-width:360px) {
  .psb .psk-scene { transform: scale(.84) }
}
@container pskst (max-width:300px) {
  .psb .psk-scene { transform: scale(.8) }
}
@container pskst (max-width:250px) {
  .psb .psk-scene { transform: scale(.76) }
}
@container psb (min-width:700px) {
  .psb.psb-sticker.psb-cs .psb-bento>.psb-card.psb-s7 { grid-column: span 7 }
  .psb.psb-sticker.psb-cs .psb-bento>.psb-card.psb-s5 { grid-column: span 5 }
  .psb.psb-sticker.psb-cs .psb-bento>.psb-card.psb-s4 { grid-column: span 4 }
}
@container psb (max-width:560px) {
  .psb .psk-hide-sm { display: none }
  .psb .psk { --x: var(--x-sm,var(--x-lg,0px)) }
}
@media (prefers-reduced-motion:reduce) {
  .psb .psb-card:hover .psk { transform: translate(-50%,-50%) rotate(var(--r,0deg)) }
}
html body .psb .psb-card:hover .psk { transform: translate(-50%,-50%) rotate(var(--r,0deg)) }
@media (prefers-reduced-motion:no-preference) {
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle { transform-box: fill-box; transform-origin: center; --fx: -54px; animation: pk-slide 0.55s 0.1s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect { transform-box: fill-box; transform-origin: center; animation: pk-fill 0.5s 0.1s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > path { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.55s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(9) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.75s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(10) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.9s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { animation: pk-pop 0.5s 1.05s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-scan 0.45s 0s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-scan 0.45s 0.24s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center; animation: pk-scan 0.45s 0.36s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(6) { transform-box: fill-box; transform-origin: center; animation: pk-scan 0.45s 0.48s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-land 0.9s 0.1s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.9s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle { transform-box: fill-box; transform-origin: center; animation: pk-grow 0.55s 0.5s cubic-bezier(.34,1.56,.64,1) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > g { transform-box: view-box; transform-origin: 30px 30px; animation: pk-swap 1.1s 0.5s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --fx: 64px; --fy: 40px; animation: pk-fling 0.7s 0.3s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fx: -64px; --fy: 34px; animation: pk-fling 0.7s 0.38s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { animation: pk-shake 0.5s 0s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) { --fy: -58px; animation: pk-drop 0.6s 0.55s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) > path { transform-box: fill-box; transform-origin: center; stroke-dasharray: 24; --dl: 24; animation: pk-draw 0.35s 1.05s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --ps: 1.06; animation: pk-pulse 0.55s 0s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(1) { transform-box: fill-box; transform-origin: center; animation: pk-eq 0.55s 0.21s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-eq 0.55s 0.27s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-eq 0.55s 0.32999999999999996s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-eq 0.55s 0.39s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center; animation: pk-eq 0.55s 0.44999999999999996s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(6) { transform-box: fill-box; transform-origin: center; animation: pk-eq 0.55s 0.51s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(7) { transform-box: fill-box; transform-origin: center; animation: pk-eq 0.55s 0.57s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(1) { transform-box: fill-box; transform-origin: center; animation: pk-blink 1.2s 0s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text { transform-box: fill-box; transform-origin: center; animation: pk-blink 1.2s 0s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > g > circle { transform-box: fill-box; transform-origin: center; animation: pk-nod 0.6s 0.2s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(1) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.4s 0.4s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.4s 0.55s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.4s 0.7s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.4s 0.85s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(6):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-press 0.4s 0.1s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(6):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-press 0.4s 0.1s ease 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(6):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fx: -40px; animation: pk-in 0.5s 0.45s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(6):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { --fx: -40px; animation: pk-in 0.5s 0.5800000000000001s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(6):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) { --fx: -40px; animation: pk-in 0.5s 0.71s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-transcription"] .psb-card:nth-child(6):is(:hover, .psk-play) .psk-scene > .psk:nth-child(5) { --fx: -40px; animation: pk-in 0.5s 0.8400000000000001s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(1) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.1s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text:nth-of-type(1) { transform-box: fill-box; transform-origin: center; --fx: -12px; animation: pk-in 0.4s 0.3s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fx: -12px; animation: pk-in 0.4s 0.45s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fy: 26px; --fs: .6; animation: pk-in 0.55s 0.75s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(1) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.1s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text:nth-of-type(1) { transform-box: fill-box; transform-origin: center; --fx: -14px; animation: pk-in 0.35s 0.15s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.4s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fx: -14px; animation: pk-in 0.35s 0.44999999999999996s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.7s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text:nth-of-type(3) { transform-box: fill-box; transform-origin: center; --fx: -14px; animation: pk-in 0.35s 0.75s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > path:nth-of-type(1) { transform-box: fill-box; transform-origin: center; stroke-dasharray: 20; --dl: 20; animation: pk-draw 0.3s 0.35s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > path:nth-of-type(2) { transform-box: fill-box; transform-origin: center; stroke-dasharray: 20; --dl: 20; animation: pk-draw 0.3s 0.6499999999999999s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.9s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.95s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --fx: 66px; --fy: -8px; animation: pk-fan 0.65s 0.05s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { --fx: -66px; --fy: -8px; animation: pk-fan 0.65s 0.05s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.45s 0.6s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.7s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 0.85s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 0.9s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 0.95s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.45s 0.6s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.7s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 0.97s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 1.02s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 1.07s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(6) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 1.12s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.45s 0.6s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > circle { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.7s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 1.0899999999999999s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 1.14s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.35s 1.19s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { animation: pk-pop 0.45s 0.05s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fx: -44px; animation: pk-in 0.55s 0.3s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-press 0.35s 0.75s ease 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --fs: .6; animation: pk-in 0.45s 0.8s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > g > path:nth-of-type(1) { transform-box: fill-box; transform-origin: center; --fx: 10px; animation: pk-slide 0.45s 1.0s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > g > path:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fx: -10px; animation: pk-slide 0.45s 1.0s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-government-ai"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > g > path:nth-of-type(3) { transform-box: fill-box; transform-origin: center; stroke-dasharray: 50; --dl: 50; animation: pk-draw 0.4s 1.3s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { animation: pk-dim 1.2s 0s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.45s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.6s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.75s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.9s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(6) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 1.05s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --fy: 28px; --fs: .8; animation: pk-in 0.55s 0.0s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fy: 28px; --fs: .8; animation: pk-in 0.55s 0.12s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { --fy: 28px; --fs: .8; animation: pk-in 0.55s 0.24s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) { --fy: 28px; --fs: .8; animation: pk-in 0.55s 0.36s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --fx: 44px; --fy: 20px; animation: pk-fan 0.75s 0.05s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fx: 38px; --fy: -26px; animation: pk-fan 0.75s 0.13s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { --fx: -48px; --fy: 14px; animation: pk-fan 0.75s 0.21000000000000002s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) { --fx: -42px; --fy: -34px; animation: pk-fan 0.75s 0.29s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > path:nth-of-type(1) { transform-box: fill-box; transform-origin: center; --fx: -26px; animation: pk-point 0.8s 0.1s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > path:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fx: 26px; animation: pk-point 0.8s 0.35s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text { transform-box: fill-box; transform-origin: center; --ps: 1.2; animation: pk-pulse 0.6s 0.1s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-dubai-portal"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --sr: -180deg; animation: pk-spin 0.8s 0.25s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { animation: pk-dim 1.3s 0s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.75s 0.2s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle:nth-of-type(1) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.15s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > path:nth-of-type(1) { transform-box: fill-box; transform-origin: center; stroke-dasharray: 20; --dl: 20; animation: pk-draw 0.3s 0.35s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.35s 0.44999999999999996s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > path:nth-of-type(2) { transform-box: fill-box; transform-origin: center; stroke-dasharray: 20; --dl: 20; animation: pk-draw 0.3s 0.6499999999999999s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.45s 0.8s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.95s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --ps: 1.08; animation: pk-pulse 0.5s 0.05s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > path { transform-box: fill-box; transform-origin: center; --rr: -180deg; animation: pk-turn 0.45s 0.3s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > text:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fy: -8px; animation: pk-in 0.4s 0.4s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > text:nth-of-type(3) { transform-box: fill-box; transform-origin: center; --fy: -8px; animation: pk-in 0.4s 0.6s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fy: -8px; animation: pk-in 0.4s 0.5s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { animation: pk-hop 0.55s 0.0s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { animation: pk-hop 0.55s 0.12s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { animation: pk-hop 0.55s 0.24s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(3):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.75s 0.35s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.1s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.15000000000000002s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(6) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.2s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(7) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.25s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(8) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.30000000000000004s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(9) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.35s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(10) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.4s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(11) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.45000000000000007s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(12) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.5s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(13) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.55s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(14) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.6s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(15) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.65s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(16) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.7000000000000001s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(17) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.75s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(18) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.8s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(4):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { animation: pk-cursor 1.1s 0s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(1) { transform-box: fill-box; transform-origin: center; --fs: 0; animation: pk-in 0.55s 0.1s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fs: 0; animation: pk-in 0.5s 0.3s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle:nth-of-type(3) { transform-box: fill-box; transform-origin: center; --fs: 0; animation: pk-in 0.45s 0.5s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-unlock"] .psb-card:nth-child(5):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-dim 0.8s 0.9s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-avatars"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > g > circle { transform-box: fill-box; transform-origin: center; animation: pk-nod 0.6s 0.1s ease-in-out 2 both }
  html body .psb[aria-labelledby="psb-avatars"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(8) { transform-box: fill-box; transform-origin: center; --s1: -58px; --s2: 60px; animation: pk-sweep 1.5s 0.1s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-avatars"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(6) { transform-box: fill-box; transform-origin: center; --fx: -24px; animation: pk-slide 0.6s 0.55s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-avatars"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(7) { transform-box: fill-box; transform-origin: center; --fx: 22px; animation: pk-slide 0.6s 0.7s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-avatars"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; --fx: -95px; animation: pk-slide 0.6s 0.15s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-avatars"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-in 0.3s 0.6s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --fx: -48px; animation: pk-in 0.55s 0.0s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fx: -48px; animation: pk-in 0.55s 0.14s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { --fx: -48px; animation: pk-in 0.55s 0.28s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) { animation: pk-pulse 0.4s 0.5s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.6s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.3s 0.8s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) > path:nth-of-type(1) { transform-box: fill-box; transform-origin: center; stroke-dasharray: 14; --dl: 14; animation: pk-draw 0.3s 0.75s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) > path:nth-of-type(2) { transform-box: fill-box; transform-origin: center; stroke-dasharray: 14; --dl: 14; animation: pk-draw 0.3s 0.95s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.0s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.06s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.12s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.18s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.15s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.21s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.27s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.32999999999999996s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.3s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.36s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.42s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.48s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-market"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { animation: pk-lift 0.7s 0.55s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { animation: pk-lift 0.6s 0s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fs: .72; --fx: -30px; animation: pk-in 0.6s 0.3s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > path:nth-of-type(1) { transform-box: fill-box; transform-origin: right center; animation: pk-openl 0.55s 0.7s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > path:nth-of-type(2) { transform-box: fill-box; transform-origin: left center; animation: pk-openl 0.55s 0.7s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(1) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.1800000000000002s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.26s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.34s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.4200000000000002s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { animation: pk-wobble 0.9s 0s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle { transform-box: fill-box; transform-origin: center; --fx: -54px; animation: pk-slide 0.55s 0.65s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect { transform-box: fill-box; transform-origin: center; animation: pk-fill 0.5s 0.65s ease 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > path { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 1.1s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(1) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.28s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.3599999999999999s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.44s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-hadoota"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: left center; animation: pk-growx 0.35s 1.52s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { animation: pk-dim 0.8s 0.1s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { animation: pk-dim 0.8s 0.1s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { animation: pk-lift 0.7s 0.05s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.35s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > path { transform-box: fill-box; transform-origin: center; stroke-dasharray: 18; --dl: 18; animation: pk-draw 0.3s 0.65s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) { animation: pk-press 0.35s 0.95s ease 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(4) > path { transform-box: fill-box; transform-origin: center; animation: pk-shoot 0.55s 1.1s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) { --fx: -24px; animation: pk-in 0.45s 0s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { --fs: .5; animation: pk-in 0.5s 0.3s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > text:nth-of-type(1) { transform-box: fill-box; transform-origin: center; --fx: -8px; animation: pk-in 0.35s 0.7s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-akmefolio"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > text:nth-of-type(2) { transform-box: fill-box; transform-origin: center; --fx: -8px; animation: pk-in 0.35s 0.85s var(--ease-out) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > text { transform-box: fill-box; transform-origin: center; --ps: 1.15; animation: pk-pulse 0.6s 0.05s ease-in-out 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > path { transform-box: fill-box; transform-origin: center; stroke-dasharray: 130; --dl: 130; animation: pk-draw 0.65s 0.3s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) { animation: pk-pop 0.45s 0.75s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(1):is(:hover, .psk-play) .psk-scene > .psk:nth-child(3) { animation: pk-pop 0.45s 0.9s var(--ease-spring) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center; --fx: 94px; animation: pk-slide 0.55s 0.1s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > rect:nth-of-type(6) { transform-box: fill-box; transform-origin: left center; animation: pk-resize 1.5s 0.3s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(1) > circle { transform-box: fill-box; transform-origin: center; animation: pk-knob 1.5s 0.3s var(--ease-in-out) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > circle { transform-box: fill-box; transform-origin: center; animation: pk-grow 0.55s 0.75s cubic-bezier(.34,1.56,.64,1) 1 both }
  html body .psb[aria-labelledby="psb-basyt"] .psb-card:nth-child(2):is(:hover, .psk-play) .psk-scene > .psk:nth-child(2) > g { transform-box: view-box; transform-origin: 26px 26px; animation: pk-swap1 1.1s 0.75s var(--ease-in-out) 1 both }
}
@keyframes pk-slide { from { translate: var(--fx,0px) var(--fy,0px) } }
@keyframes pk-grow { 0% { scale: 0 } 70% { scale: 1.08 } }
@keyframes pk-swap { 0%,45% { rotate: 0deg } 100% { rotate: 180deg } }
@keyframes pk-swap1 { 0%,45% { rotate: 0deg } 100% { rotate: 360deg } }
@keyframes pk-point { 0% { translate: 0 0 } 45% { translate: calc(var(--fx) * -1) 0 } 100% { translate: 0 0 } }
@keyframes pk-wobble { 0%,100% { rotate: 0deg; translate: 0 0 } 15% { rotate: -4deg; translate: -3px -2px } 30% { rotate: 4deg; translate: 3px 1px } 45% { rotate: -3deg; translate: -2px -1px } 60% { rotate: 0deg; translate: 0 0 } }
@keyframes pk-resize { 0%,100% { scale: 1 1 } 35%,60% { scale: 1.45 1 } }
@keyframes pk-knob { 0%,100% { translate: 0 0 } 35%,60% { translate: 28px 0 } }
@keyframes pk-fill { from { fill: #d9dce1 } }
@keyframes pk-pop { 0% { opacity: 0; scale: .2 } 60% { scale: 1.14 } }
@keyframes pk-in { from { opacity: 0; translate: var(--fx,0px) var(--fy,0px); scale: var(--fs,1) } }
@keyframes pk-scan { 0%,100% { fill: #e8eaee } 50% { fill: #c9d5ec } }
@keyframes pk-land { 0%,55% { fill: #e8eaee; scale: 1 } 75% { scale: 1.12 } }
@keyframes pk-spin { from { rotate: var(--sr,-360deg) } }
@keyframes pk-fling { 0% { opacity: 0; translate: var(--fx) var(--fy) } 35% { opacity: 1 } }
@keyframes pk-shake { 0%,100% { rotate: 0deg } 20% { rotate: -5deg } 40% { rotate: 5deg } 60% { rotate: -3deg } 80% { rotate: 2deg } }
@keyframes pk-drop { from { opacity: 0; translate: 0 var(--fy,-40px); scale: .6 } }
@keyframes pk-draw { from { stroke-dashoffset: var(--dl,40) } }
@keyframes pk-pulse { 0%,100% { scale: 1 } 50% { scale: var(--ps,1.12) } }
@keyframes pk-eq { 0%,100% { scale: 1 1 } 25% { scale: 1 .3 } 50% { scale: 1 1.3 } 75% { scale: 1 .55 } }
@keyframes pk-blink { 0%,50%,100% { opacity: 1 } 25%,75% { opacity: .15 } }
@keyframes pk-nod { 0%,100% { translate: 0 0 } 50% { translate: 0 3px } }
@keyframes pk-growx { from { scale: 0 1 } }
@keyframes pk-growy { from { scale: 1 0 } }
@keyframes pk-press { 0%,100% { scale: 1 } 40% { scale: .86 } }
@keyframes pk-fan { from { translate: var(--fx,0px) var(--fy,0px); rotate: calc(var(--r,0deg) * -1) } }
@keyframes pk-dim { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes pk-turn { from { rotate: var(--rr,-180deg) } }
@keyframes pk-hop { 0%,100% { translate: 0 0 } 40% { translate: 0 -12px } 70% { translate: 0 2px } }
@keyframes pk-cursor { 0% { translate: -78px -44px } 35% { translate: -62px -18px } 70% { translate: -26px -4px } }
@keyframes pk-sweep { 0%,100% { translate: 0 0 } 40% { translate: var(--s1) 0 } 80% { translate: var(--s2) 0 } }
@keyframes pk-lift { 0%,100% { translate: 0 0 } 45% { translate: 0 -12px } }
@keyframes pk-openl { from { scale: 0 1 } }
@keyframes pk-shoot { 0%,100% { translate: 0 0; opacity: 1 } 45% { translate: 12px 0; opacity: 0 } 46% { translate: -10px 0; opacity: 0 } }
@property --am-p { syntax: '<number>'; inherits: false; initial-value: .38 }
html body .avatar-model.am-v2 { display: block; margin: 32px 0 0; padding: 24px; border: 0; background: #e7edf7; box-shadow: none; max-width: none }
html body .am-v2 .avatar-model-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 0; border: 0 }
html body .am-v2 .am-title { line-height: 1.3; letter-spacing: -.01em }
html body .am-v2 .am-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: .75rem; white-space: nowrap }
html body .am-v2 .am-canvas { --am-label: 88px; --am-gap: 12px; position: relative; padding: 14px 20px 18px; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.05),0 10px 24px -14px rgba(16,24,40,.18) }
html body .am-v2 .am-ruler { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 0 10px calc(var(--am-label) + var(--am-gap)); padding: 0 0 8px; border-bottom: 1px solid #eceff3; font-size: .75rem; line-height: 1; font-weight: var(--weight-medium); color: #65737d }
html body .am-v2 .am-track { display: grid; grid-template-columns: var(--am-label) 1fr; gap: var(--am-gap); align-items: center }
html body .am-v2 .am-label { font-size: .875rem }
html body .am-v2 .am-lane { position: relative; height: 44px; border-radius: var(--radius-sm); background: #f3f5f8 }
html body .am-v2 .am-clip { position: absolute; top: 5px; bottom: 5px; left: var(--s); width: var(--w); box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
html body .am-v2 .am-clip--script { background: #d6e0f2 }
html body .am-v2 .am-clip--script:not(.am-clip--main) { background: #e3eaf6 }
html body .am-v2 .am-clip--gesture { background: #cfe3d6 }
html body .am-v2 .am-clip--icon { padding: 0 }
html body .am-v2 .am-clip--drag { box-shadow: 0 0 0 2px #fff,0 8px 18px -8px rgba(16,24,40,.35) }
html body .am-v2 .am-playhead { --am-pad: 20px; position: absolute; top: 12px; bottom: 12px; left: calc(var(--am-pad) + var(--am-label) + var(--am-gap) + (100% - var(--am-pad) * 2 - var(--am-label) - var(--am-gap)) * var(--am-p)); width: 2px; border-radius: 1px; background: #1f2226; pointer-events: none }
html body .am-v2 .am-playhead::before { content: ""; position: absolute; top: -4px; left: 50%; width: 10px; height: 10px; border-radius: 3px; background: #1f2226; transform: translateX(-50%) }
html body .am-v2 figcaption { margin: 14px 0 0; padding: 0; text-align: left; line-height: 1.5 }
@media (max-width:560px) {
  html body .avatar-model.am-v2 { padding: 16px }
  html body .am-v2 .am-canvas { --am-label: 62px; --am-gap: 8px; padding: 12px 12px 14px }
  html body .am-v2 .am-playhead { --am-pad: 12px }
  html body .am-v2 .am-clip { padding: 0 6px }
  html body .am-v2 .am-label { font-size: .75rem }
}
@media (prefers-reduced-motion:no-preference) {
  html body .am-v2:is(:hover, .psk-play) .am-playhead { animation: am-play 2.2s var(--ease-in-out) both }
  html body .am-v2:is(:hover, .psk-play) .am-clip--drag { animation: am-drag 2.2s var(--ease-in-out) both }
  html body .am-v2:is(:hover, .psk-play) .am-clip--script.am-clip--main { animation: am-speak 2.2s ease-in-out both }
}
@keyframes am-play { 0% { --am-p: 0 } 70% { --am-p: 1 } 100% { --am-p: .38 } }
@keyframes am-drag { 0%,20% { translate: 0 0; scale: 1 } 32% { scale: 1.04 } 55% { translate: 28% 0; scale: 1.04 } 70%,100% { translate: 28% 0; scale: 1 } }
@keyframes am-speak { 0%,100% { background: #d6e0f2 } 15%,30% { background: #c3d2ee } }
html body .am-v2 figcaption { max-width: none }

/* 25 Interaction polish | every page */
[data-ps-eyebrow] { display: none !important }
.ps-js main h1 { opacity: 0; animation: ps-show 0s linear 1.2s forwards }
.ps-js.ps-ready main h1 { opacity: 1; animation: none }
@keyframes ps-show { to { opacity: 1 } }
.ps-word { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(6px); transition: opacity .3s ease,transform .3s var(--ease-out),filter .3s ease; transition-delay: calc(var(--ps-i,0) * 45ms) }
h1.ps-in .ps-word { opacity: 1; transform: none; filter: none }
.ps-spot { position: relative; isolation: isolate; transition: transform .15s ease }
.ps-spot:active { transform: scale(.985) }
.ps-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s ease; background: radial-gradient(280px circle at var(--ps-x,50%) var(--ps-y,50%),rgba(47,111,235,.10),rgba(47,111,235,0) 60%) }
.ps-spot:hover>.ps-glow, .ps-spot:focus-visible>.ps-glow { opacity: 1 }
.ps-spark { position: fixed; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--ink); pointer-events: none; z-index: 9999 }
.ps-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--ink); z-index: 9999; opacity: 0; transition: width 1.2s cubic-bezier(.1,.7,.2,1),opacity .15s ease; pointer-events: none }
.ps-progress.is-on { opacity: 1; width: 72% }
main img.ps-loading { background-color: #eef1f5; background-image: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 100%); background-size: 200% 100%; background-repeat: no-repeat; animation: ps-shimmer 1.2s linear infinite }
@keyframes ps-shimmer { from { background-position: 150% 0 } to { background-position: -50% 0 } }
@media (prefers-reduced-motion:reduce) {
  .ps-js main h1 { opacity: 1 }
  .ps-word { opacity: 1; transform: none; filter: none; transition: none }
  .ps-spot:active { transform: none }
  .ps-progress { transition: opacity .15s ease }
}

/* 26 Shared components: cards, buttons, footer and motion | every page */
html body a.button, html body .button { border-radius: var(--radius-sm) !important; min-height: 44px }
html body .evidence-work-item > a { background: var(--surface); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-card); transition: box-shadow .2s ease }
html body .evidence-work-item > a:hover { box-shadow: var(--shadow-hover) }
html body .evidence-work-copy { padding-right: 12px }
html body .delivery-points article { background: var(--surface) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card); border: 0 !important }
html body .delivery-note, html body .scope-policy, html body .pg-choice { border-left: 0 !important; background: var(--surface) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card); padding: 20px 24px !important }
html body .decision-trade, html body .figma-evidence.decision-story, html body .scope-row, html body .avatar-decision, html body .decision-block, html body .pg-ownership, html body .pg-related { border-top-color: var(--line) !important }
html body .decision-graphic { border: 0 !important; background: var(--surface) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card) }
html body .pg-capture a { border: 0 !important; border-radius: var(--radius-md) !important; background: var(--panel) !important }
html body .avatar-model, html body .pg-hero { border-radius: var(--radius-lg) !important }
html body nav.next-work { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: stretch !important; border-top-color: var(--line) !important }
html body nav.next-work > a { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 16px; background: var(--surface); border: 0 !important; border-radius: var(--radius-lg); padding: 20px 22px !important; box-shadow: var(--shadow-card); text-decoration: none; transition: box-shadow .2s ease }
html body nav.next-work > a:hover { box-shadow: var(--shadow-hover) }
html body nav.next-work .next-logo { display: flex !important; align-items: center; height: 34px; margin: 0 !important; background: none !important; border-radius: 0 !important; padding: 0 !important; width: auto !important }
html body nav.next-work .next-logo img { display: block; height: 34px !important; width: auto !important; max-width: 140px; object-fit: contain; border-radius: 0 !important; box-shadow: none !important; background: none !important }
html body nav.next-work > a > span[aria-hidden="true"] { grid-column: 2; grid-row: 2; transition: transform .15s ease }
html body nav.next-work > a:hover > span[aria-hidden="true"] { transform: translateX(4px) }
html body nav.next-work .next-logo img[alt="Unlock"] { height: 20px !important }
html body nav.next-work > a { align-self: stretch !important }
@media (max-width:760px) {
  html body nav.next-work { grid-template-columns: 1fr }
}
html body .evidence-work-image { display: block !important; padding: 0 !important; overflow: hidden !important; border-radius: var(--radius-md) !important; background: var(--panel) !important; align-self: start }
html body .evidence-work-image > :not(.approved-mobile-cover) { display: none !important }
html body .evidence-work-image > .approved-mobile-cover { display: block !important; position: static !important; inset: auto !important; width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: 3 / 2 !important; object-fit: cover !important; transform: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important }
@media (min-width:761px) {
  html body.nav-compact .portfolio-navigation .island { width: min(1200px, 100% - 48px) !important }
}
@view-transition { navigation: auto }
html body .portfolio-navigation .island { view-transition-name: ps-nav }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s }
::view-transition-group(ps-nav) { animation-duration: .28s; animation-timing-function: var(--ease-out) }
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation: none }
}
html body footer .footer-inner > div:has(.ps-icon-link) { display: flex !important; align-items: center; flex-wrap: wrap; column-gap: 4px }
html body footer .ps-icon-link { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; border-radius: var(--radius-sm); transition: color .15s ease,background-color .15s ease }
html body footer .ps-icon-link svg { width: 22px; height: 22px; display: block }
html body footer .ps-icon-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }
html body .ps-stack { list-style: none; grid-template-columns: repeat(auto-fill,minmax(172px,1fr)) }
html body .ps-stack li { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 0 14px; background: var(--surface); border-radius: var(--radius-md); font-size: .9375rem; line-height: 1.3 }
html body .ps-stack li::before { content: none }
html body .ps-stack svg, html body .ps-stack img { width: 28px; height: 28px; flex: none; border-radius: 6px }
@media (max-width:560px) {
  html body .ps-stack { grid-template-columns: repeat(2,minmax(0,1fr)) }
  html body .ps-stack li { padding: 0 12px; font-size: .875rem }
}
html body .ps-glow { display: none !important }
html body .nda-preview.band { background: transparent; overflow: visible }
html body .ps-feature { --pf-bg: #131519; --pf-line: rgba(255,255,255,.07); --pf-tile-hover: #22262c; --pf-tile-line: rgba(255,255,255,.07); --pf-tile-line-hover: rgba(255,255,255,.16); --pf-pad: clamp(24px,5.6vw,72px); --pf-ease: var(--ease-out); position: relative; box-sizing: border-box; width: min(1200px,100% - 48px); margin: 0 auto; padding: var(--pf-pad) var(--pf-pad) calc(var(--pf-pad) - 8px); background: var(--pf-bg); color: var(--pf-fg); border: 1px solid var(--pf-line); overflow: hidden; isolation: isolate; box-shadow: 0 1px 2px rgba(16,24,40,.08),0 48px 96px -56px rgba(16,24,40,.55) }
html body .ps-feature-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(32px,5vw,72px); align-items: end }
html body .ps-feature h2 { margin: 0; max-width: none; font-weight: var(--weight-medium) }
html body .nda-preview .ps-feature-copy p { margin: 0; max-width: 42ch; font-size: 1.125rem; line-height: 1.6 }
html body .ps-feature-actions { display: flex; align-items: center; margin-top: 32px; flex-wrap: wrap }
html body .ps-feature .ps-nda-cta { display: inline-flex; align-items: center; min-height: 48px; margin: 0; padding: 0 16px 0 20px; border: 0; background: var(--surface); color: #131519; font-size: 1rem; font-weight: var(--weight-medium); text-decoration: none; box-shadow: none; transition: background-color .2s var(--pf-ease),transform .2s var(--pf-ease) }
html body .ps-feature .ps-nda-cta:hover { background: #e8ebef; color: #131519 }
html body .ps-feature .ps-nda-cta .ui-icon { transition: transform .2s var(--pf-ease) }
html body .ps-feature .ps-nda-cta:hover .ui-icon { transform: translateX(2px) }
html body .ps-feature-pause { align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--pf-fg); cursor: pointer; transition: background-color .2s var(--pf-ease),border-color .2s var(--pf-ease) }
html body .ps-feature-pause:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.32) }
html body .ps-feature-pause .i-play, html body .ps-feature-pause[aria-pressed="true"] .i-pause { display: none }
html body .ps-feature-pause[aria-pressed="true"] .i-play { display: block }
html body .ps-feature a:focus-visible, html body .ps-feature button:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
html body .ps-feature-card { position: relative; display: flex; flex-direction: column; min-height: clamp(320px,30vw,400px); border-radius: 24px; background: #e6efe9; color: #1f2226; text-decoration: none; overflow: hidden; container: pfcard / inline-size; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,0 28px 56px -28px rgba(0,0,0,.7); transition: transform .24s var(--pf-ease),box-shadow .24s var(--pf-ease) }
html body .ps-feature-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,0 40px 72px -30px rgba(0,0,0,.8) }
html body .ps-feature-stage { position: relative; flex: 1; min-height: 210px }
html body .ps-feature-scene { position: absolute; inset: 0; transform-origin: 50% 50% }
html body .ps-feature .psk { position: absolute; left: calc(50% + var(--x,0px)); top: calc(50% + var(--y,0px)); display: block; overflow: visible; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); transform: translate(-50%,-50%) rotate(var(--r,0deg)); transition: transform .26s var(--pf-ease) }
html body .ps-feature-card:hover .psk { transform: translate(-50%,-50%) rotate(calc(var(--r,0deg) * 1.6)) translateY(-4px) }
@container pfcard (max-width:420px) {
  html body .ps-feature-scene { transform: scale(.84) }
}
@container pfcard (max-width:340px) {
  html body .ps-feature-scene { transform: scale(.72) }
}
html body .ps-feature-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 20px 20px 28px }
html body .ps-feature-name { display: block; line-height: 1.15; font-weight: var(--weight-medium); letter-spacing: -.02em }
html body .ps-feature-sub { display: block; line-height: 1.4 }
html body .ps-feature-go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--surface); color: #1f2226; transition: background-color .2s var(--pf-ease),color .2s var(--pf-ease) }
html body .ps-feature-card:hover .ps-feature-go { background: #1f2226; color: var(--on-dark) }
html body .ps-nda-carousel { -webkit-mask-image: linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent) }
html body .ps-nda-track { list-style: none; margin: 0; padding: 0 }
html body .ps-nda-item { margin: 0; padding: 0; background: none; list-style: none }
html body .ps-nda-item::before { content: none }
html body .ps-nda-link { display: flex; align-items: center; height: 96px; border: 1px solid var(--pf-tile-line); text-decoration: none; white-space: nowrap; transition: transform .22s var(--pf-ease),background-color .22s var(--pf-ease),border-color .22s var(--pf-ease) }
html body .ps-nda-link:hover { transform: translateY(-4px); background: var(--pf-tile-hover); border-color: var(--pf-tile-line-hover) }
html body .ps-nda-art { display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box }
html body .ps-nda-sticker { display: block; width: auto; overflow: visible; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) }
html body .ps-nda-name { font-family: "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif; line-height: 1.3; font-weight: var(--weight-medium); letter-spacing: -.01em }
@media (max-width:1023px) {
  html body .ps-feature-grid { grid-template-columns: 1fr; gap: 40px }
  html body .ps-feature-card { min-height: 360px }
}
@media (max-width:760px) {
  html body .ps-feature { width: calc(100% - 32px); padding-top: 36px }
  html body .ps-feature-actions { margin-top: 24px }
  html body .ps-feature-grid { gap: 32px }
  html body .ps-feature-card { min-height: 320px; border-radius: var(--radius-xl) }
  html body .ps-feature-meta { padding: 0 16px 16px 20px }
  html body .ps-nda-carousel { -webkit-mask-image: linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent) }
  html body .ps-nda-link { height: 80px }
}
@media (prefers-reduced-motion:reduce) {
  html body .ps-nda-carousel { -webkit-mask-image: none }
  html body .ps-nda-track { padding: 0 var(--pf-pad,24px) }
  html body .ps-nda-item[aria-hidden="true"] { display: none }
  html body .ps-feature-card, html body .ps-feature-card:hover, html body .ps-nda-link, html body .ps-nda-link:hover, html body .ps-feature .psk { transform: none }
  html body .ps-feature .psk { transform: translate(-50%,-50%) rotate(var(--r,0deg)) }
}
@media (max-width:760px) {
  html body .evidence-work-item > a { padding: 16px 16px 24px }
  html body .evidence-work-copy { padding: 0 8px }
}
html body .psb .psk-scene > .psk ~ .psk, html body .ps-feature-scene > .psk ~ .psk { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 10px rgba(16,24,40,.07)) drop-shadow(0 1px 2px rgba(16,24,40,.05)) }
html body .decision-trade > div > span, html body .decision-trail > li::before { color: #65737d !important }
html body .mock-actions span { color: #4b5360 !important }
html body .button { font-family: "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif; font-weight: 600; letter-spacing: -.005em }
html body .ps-btn-label { display: block; text-box: trim-both cap alphabetic }
html body .button.secondary, html body .button.secondary:hover { border-color: rgba(32,32,32,.2) !important }
html body .button.secondary:hover { background: rgba(32,32,32,.04); color: var(--ink) }
html body button.menu-trigger, html body .pg-close { border-color: rgba(32,32,32,.2) !important }
html body .ps-feature-pause, html body .ps-feature-pause:hover { border-color: rgba(255,255,255,.2) }
html body .button .ps-btn-brand { display: block; flex: none; width: 18px; height: 18px; margin-left: 6px; fill: currentColor }
a:hover { color: #3f4652 }
html body .evidence-work-item > a:hover .evidence-read, html body a.button:hover, html body .chip:hover { text-decoration: none !important }
@media (min-width:761px) {
  html body .home-intro.editorial-hero { align-items: center }
}
html body .delivery-points .contribution-icon { overflow: visible }
html body .delivery-points .ci-part { transform-box: view-box; transform-origin: 12px 12px }
html body .delivery-points .ci-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0 }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  html body .delivery-points .ps-spot:hover .ci-dot-a { animation: ci-from-a .55s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-dot-b { animation: ci-from-b .55s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-route { animation: ci-draw-up .7s .45s var(--ease-in-out) both }
  html body .delivery-points .ps-spot:hover .ci-layer-top { animation: ci-from-top .6s .08s cubic-bezier(.34,1.35,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-layer-mid { animation: ci-from-mid .6s cubic-bezier(.34,1.35,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-layer-bot { animation: ci-from-bot .6s .16s cubic-bezier(.34,1.35,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-folder { animation: ci-grow .5s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-br-l { animation: ci-from-l .45s .3s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-br-r { animation: ci-from-r .45s .3s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot:hover .ci-slash { animation: ci-draw-on .45s .65s var(--ease-in-out) both }
}
@keyframes ci-from-a { from { transform: translate(-6px,7px) } to { transform: none } }
@keyframes ci-from-b { from { transform: translate(6px,-7px) } to { transform: none } }
@keyframes ci-draw-up { 0% { stroke-dashoffset: -1; opacity: 0 } 8% { opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 1 } }
@keyframes ci-draw-on { 0% { stroke-dashoffset: 1; opacity: 0 } 8% { opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 1 } }
@keyframes ci-from-top { from { transform: translateY(5.25px) } to { transform: none } }
@keyframes ci-from-mid { from { transform: translateY(-1.75px) } to { transform: none } }
@keyframes ci-from-bot { from { transform: translateY(-7.1px) } to { transform: none } }
@keyframes ci-grow { from { transform: scale(.2); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ci-from-l { from { transform: translate(3.5px,-.5px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ci-from-r { from { transform: translateX(-3.5px); opacity: 0 } to { transform: none; opacity: 1 } }
html body .scope-policy { max-width: none; width: 100%; box-sizing: border-box }
html body .scope-policy p { max-width: none }
html body .ps-nda-link { background: #e7edf7; border-color: transparent; color: #1f2226 }
html body .ps-nda-item.d-cog .ps-nda-link { background: #eeeaf6 }
html body .ps-nda-item.d-biz .ps-nda-link { background: #e6efe9 }
html body .ps-nda-item.d-res .ps-nda-link { background: #f5eee2 }
html body .ps-nda-link:hover { background: #e7edf7; border-color: transparent; box-shadow: 0 18px 32px -18px rgba(0,0,0,.55) }
html body .ps-nda-item.d-cog .ps-nda-link:hover { background: #eeeaf6 }
html body .ps-nda-item.d-biz .ps-nda-link:hover { background: #e6efe9 }
html body .ps-nda-item.d-res .ps-nda-link:hover { background: #f5eee2 }
html body .ps-nda-art, html body .ps-nda-item .ps-nda-art { background: none !important; padding: 0; min-width: 0; height: 64px; border-radius: 0 }
html body .ps-nda-sticker { height: 60px }
@media (max-width:760px) {
  html body .ps-nda-art, html body .ps-nda-item .ps-nda-art { height: 56px }
  html body .ps-nda-sticker { height: 50px }
}
html body .ps-feature-card:hover .psk { transform: translate(-50%,-50%) rotate(var(--r,0deg)) }
@media (prefers-reduced-motion:no-preference) {
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(1) > path { transform-box: fill-box; transform-origin: center; stroke-dasharray: 140; --dl: 140; animation: pk-draw 0.7s 0.15s var(--ease-in-out) 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(1) > circle { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 0.8s var(--ease-spring) 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(2) > rect:nth-of-type(2) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.1s var(--ease-spring) 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(2) > rect:nth-of-type(3) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.18s var(--ease-spring) 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(2) > rect:nth-of-type(4) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.26s var(--ease-spring) 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(2) > rect:nth-of-type(5) { transform-box: fill-box; transform-origin: center bottom; animation: pk-growy 0.45s 0.33999999999999997s var(--ease-spring) 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(3) > circle { transform-box: fill-box; transform-origin: center; --fx: -54px; animation: pk-slide 0.55s 0.55s var(--ease-in-out) 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(3) > rect { transform-box: fill-box; transform-origin: center; animation: pk-fill 0.5s 0.55s ease 1 both }
  html body .ps-feature-card:is(:hover, .psk-play) .ps-feature-scene > .psk:nth-child(3) > path { transform-box: fill-box; transform-origin: center; animation: pk-pop 0.4s 1s var(--ease-spring) 1 both }
}
@media (prefers-reduced-motion:no-preference) {
  html body .delivery-points .ps-spot.psk-play .ci-dot-a { animation: ci-from-a .55s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-dot-b { animation: ci-from-b .55s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-route { animation: ci-draw-up .7s .45s var(--ease-in-out) both }
  html body .delivery-points .ps-spot.psk-play .ci-layer-top { animation: ci-from-top .6s .08s cubic-bezier(.34,1.35,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-layer-mid { animation: ci-from-mid .6s cubic-bezier(.34,1.35,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-layer-bot { animation: ci-from-bot .6s .16s cubic-bezier(.34,1.35,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-folder { animation: ci-grow .5s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-br-l { animation: ci-from-l .45s .3s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-br-r { animation: ci-from-r .45s .3s cubic-bezier(.34,1.3,.5,1) both }
  html body .delivery-points .ps-spot.psk-play .ci-slash { animation: ci-draw-on .45s .65s var(--ease-in-out) both }
}
html body .button { box-sizing: border-box; height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0 }
html body :is(.actions, .ps-feature-actions, .mentorship-actions), html body :has(> .button + .button) { column-gap: 8px !important; row-gap: 8px !important }
html body .nda-preview.band.ps-nda-work-band { padding: 0 0 clamp(40px,7vw,96px) }
html body .bb-object-stage { position: relative }
html body .bb-still { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: inherit }
html body .bb-still[hidden] { display: none }
html body .bb-object-stage[data-mode="still"] #bb-viewer { visibility: hidden }
html body .bb-still { z-index: 2 }
html body .bb-still img { display: block; width: 100%; height: 100%; object-fit: cover }
html body .bb-object-stage[data-mode="3d"] #bb-viewer { cursor: grab }
html body .bb-pipeline { margin-top: clamp(56px,8vw,96px) }
html body .bb-flow { display: grid; gap: 28px; margin-top: 24px }
html body .bb-flow-step { position: relative; padding: 20px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.05),0 16px 32px -24px rgba(16,24,40,.25) }
html body .bb-flow-step + .bb-flow-step::before { content: ""; position: absolute; left: 50%; top: -28px; width: 2px; height: 28px; background: rgba(32,32,32,.14); transform: translateX(-50%) }
html body .bb-tool { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0 4px }
html body .bb-tool-logo { display: block; height: 28px; width: auto }
html body .bb-tool-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: #f1f3f6 }
html body .bb-tool-mark img, html body .bb-tool-mark svg { display: block; width: 24px; height: 24px }
html body .bb-tool-name { line-height: 1.3 }
html body .bb-tool p { margin: 0 0 0 auto; line-height: 1.4; text-align: right }
html body .bb-shot { margin: 0; border-radius: 14px; overflow: hidden; background: #f1f3f6 }
html body .bb-shot a, html body .bb-compare a { display: block }
html body .bb-shot img { display: block; width: 100%; height: auto }
html body .bb-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px }
html body .bb-compare figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #f1f3f6 }
html body .bb-compare img { display: block; width: 100%; height: auto; aspect-ratio: 530/640; object-fit: cover }
html body .bb-tag { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: .75rem; pointer-events: none }
@media (max-width:640px) {
  html body .bb-flow-step { padding: 12px; border-radius: var(--radius-lg) }
  html body .bb-tool { flex-wrap: wrap; gap: 8px 12px }
  html body .bb-tool p { margin: 0; width: 100%; text-align: left }
  html body .bb-compare { gap: 8px }
}
html body .bb-stage-label { z-index: 3 }
html body .ps-builder-head p { max-width: 56ch; line-height: 1.6 }
html.ps-lightbox-open { overflow: hidden }
html body .ps-lightbox { box-sizing: border-box; width: min(1200px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: #1f2226; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5) }
html body .ps-lightbox:not([open]) { display: none }
html body .ps-lightbox::backdrop { background: rgba(17,19,23,.72); backdrop-filter: blur(2px) }
html body .ps-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 20px; border-bottom: 1px solid #eceff3 }
html body .ps-lightbox-caption { margin: 0; font-size: .9375rem; line-height: 1.4; font-weight: var(--weight-medium); color: #3f4652; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
html body .ps-lightbox-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(32,32,32,.2); border-radius: var(--radius-md); background: var(--surface); color: #1f2226; cursor: pointer }
html body .ps-lightbox-close:hover { background: rgba(32,32,32,.04) }
html body .ps-lightbox-close:focus-visible { outline: 2px solid #1f2226; outline-offset: 2px }
html body .ps-lightbox-frame { flex: 1; min-height: 0; overflow: auto; background: #f1f3f6; overscroll-behavior: contain }
html body .ps-lightbox-frame img { display: block; width: 100%; height: auto; margin: 0 auto }
@media (prefers-reduced-motion:no-preference) {
  html body .ps-lightbox[open] { animation: ps-lb-in .22s var(--ease-out) }
  html body .ps-lightbox[open]::backdrop { animation: ps-lb-fade .22s ease }
}
@keyframes ps-lb-in { from { opacity: 0; transform: translateY(8px) scale(.985) } }
@keyframes ps-lb-fade { from { opacity: 0 } }
@media (max-width:760px) {
  html body .home-intro.editorial-hero { display: grid !important; align-items: center }
  html body .editorial-hero .editorial-introduction { display: contents }
  html body .editorial-hero .editorial-portrait { display: block !important; grid-area: 1/2; width: 88px; height: 116px; max-width: none; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-lg); align-self: center; margin: 0 }
  html body .editorial-hero h1 { grid-area: 1/1; margin: 0 !important; align-self: center }
  html body .editorial-hero .editorial-mobile-bio { grid-area: 2/1/auto/-1; margin: 0 }
}
html body .call-band { margin-top: clamp(28px,5vw,56px) }
@media (min-width:761px) {
  html body .portfolio-navigation .island { background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px) }
  html body:not(.nav-compact) .portfolio-navigation .island { padding-left: max(24px,calc((100% - 1200px) / 2 + 8px)); padding-right: max(24px,calc((100% - 1200px) / 2 + 8px)) }
  html body.nav-compact .portfolio-navigation .island { border-radius: 18px }
}
html body .portfolio-navigation .island-logo, html body .portfolio-navigation .island-tabs { border-radius: var(--radius-sm) }
html body .portfolio-navigation .island-tabs .chip { padding-left: 20px; padding-right: 20px }
html body .portfolio-navigation .island-tabs .chip:not(.chip-cta) { color: var(--ink) }
html body .portfolio-navigation .chip.chip-cta { font-weight: var(--weight-medium) }
html body .ps-btn-label { font-weight: var(--weight-medium); letter-spacing: 0 }
html body footer { color: var(--on-dark) }
html body footer .footer-inner { column-gap: 32px; row-gap: 32px }
html body footer .footer-inner > div { row-gap: 24px }
@media (max-width:760px) {
  html body footer .footer-inner { padding-top: 32px; padding-bottom: 32px }
}
@media (max-width:760px) {
  html body .portfolio-navigation .menu-trigger { border-radius: var(--radius-md) }
}
html body footer .footer-inner a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px }
html body footer .footer-inner p { color: #8f8f8f }
html body .ps-glow { display: none !important }
@media (hover:hover) and (pointer:fine) {
  html body a.ps-spot:hover, html body #work a:has(img):hover, html body .ps-feature-card:hover { transform: translateY(-2px) !important }
  html body a.ps-spot:active { transform: scale(.98) !important }
  html body .pg-folder-link:hover .pg-sheet--image { transform: translate(5px,-10px) rotate(3deg) !important }
  html body .pg-folder-link:hover .pg-sheet--back { transform: translate(-9px,-4px) rotate(-8deg) !important }
  html body .pg-folder-link:hover .pg-folder-front { transform: translateZ(8px) rotateX(-6deg) !important }
  html body .pg-brand-stage:hover > img { transform: translateY(-4px) !important }
}
html body .pg-folder-link:focus-visible .pg-sheet--image { transform: translate(5px,-10px) rotate(3deg) !important }
html body .pg-folder-link:focus-visible .pg-sheet--back { transform: translate(-9px,-4px) rotate(-8deg) !important }
html body .pg-folder-link:focus-visible .pg-folder-front { transform: translateZ(8px) rotateX(-6deg) !important }
html body a.ps-spot, html body .ps-feature-card, html body .pg-sheet, html body .pg-folder-front { transition-duration: .18s !important; transition-timing-function: var(--ease-soft) !important }
html body .psb-card *, html body .delivery-points .ps-spot *, html body .ps-feature-card * { animation-timing-function: var(--ease-soft) !important; transition-timing-function: var(--ease-soft) !important }
@media (prefers-reduced-motion:reduce) {
  html body a.ps-spot, html body .ps-feature-card, html body .pg-sheet, html body .pg-folder-front { transition: none !important }
}

/* 27 Homepage polish pass, October 2026 (unslop method) | Home */
:root:where([data-page="index"]) { --u-text-2-dark: #a8a8a8; --u-section: 96px; --u-head: 32px }
@media (max-width:760px) {
  :root:where([data-page="index"]) { --u-section: 64px; --u-head: 24px }
}
html body .home-intro.editorial-hero { padding-bottom: 0 !important }
html body #work.selected.wrap { padding-top: var(--u-section) !important; padding-bottom: 0 !important }
html:where([data-page="index"]) body .evidence-work-item > a.ps-spot { column-gap: 32px !important; row-gap: 32px !important }
html:where([data-page="index"]) body .evidence-work-copy .project-company { margin: 0 0 16px !important; row-gap: 12px !important; column-gap: 12px !important }
html:where([data-page="index"]) body .evidence-work-copy h3 { margin: 0 0 12px !important }
html:where([data-page="index"]) body .evidence-work-copy .project-subtitle { margin: 0 0 16px !important }
html body .ps-builder.wrap { margin-top: var(--u-section) !important; padding: 0 !important }
html body .ps-builder-head h2 { margin: 0 0 12px !important }
html body .ps-builder-head p { margin: 0 !important }
html body .ps-builder .pg-canvas { margin: var(--u-head) 0 0 !important; padding: 24px 24px 32px !important }
@media (min-width:761px) {
  html:where([data-page="index"]) body .pg-canvas .pg-folders { padding-top: 40px !important; row-gap: 48px !important; column-gap: 40px !important }
  html:where([data-page="index"]) body .pg-canvas .pg-folder-front { padding: 16px 20px !important }
}
html:where([data-page="index"]) body .pg-folder-label small { margin-top: 8px !important }
html:where([data-page="index"]) body .pg-canvas .pg-project[data-project="basyt"] .pg-sheet img { padding: 24px !important }
html body .delivery-summary.wrap { padding: var(--u-section) 0 0 !important }
html body .delivery-title h2 { margin: 0 0 var(--u-head) !important }
html:where([data-page="index"]) body .nda-preview.band { padding: var(--u-section) 0 !important }
html body .delivery-points article.ps-spot { padding-top: 24px !important }
html body .delivery-points article.ps-spot h3 { margin-bottom: 12px !important }
@media (min-width:761px) {
  html body .delivery-points article.ps-spot h3 { min-height: 2.6em }
}
html body .ps-feature .ps-nda-cta { gap: 8px !important }
html body .ps-feature-sub { margin-top: 4px !important }
html body .ps-nda-link { padding: 0 28px 0 16px !important; gap: 16px !important }
@media (max-width:760px) {
  html body .home-intro.editorial-hero { column-gap: 16px !important; row-gap: 20px !important }
  html:where([data-page="index"]) body .evidence-work-item > a.ps-spot { column-gap: 16px !important; row-gap: 16px !important }
  html body .ps-builder .pg-canvas { padding: 24px 20px 32px !important }
  html body .ps-feature { --pf-pad: 24px }
  html body .ps-nda-link { padding: 0 24px 0 12px !important; gap: 12px !important }
}
html body .editorial-hero .editorial-summary, html body .editorial-hero .editorial-mobile-bio, html:where([data-page="index"]) body .evidence-work-copy .project-subtitle, html body .ps-builder-head p, html body .delivery-points p, html body .ps-feature-sub { color: var(--ink-2) !important }
html body .editorial-hero strong, html:where([data-page="index"]) body .evidence-work-copy .evidence-read, html:where([data-page="index"]) body .pg-folder-label, html:where([data-page="index"]) body .pg-folder-label small, html body .ps-feature-name, html body .ps-nda-name, html body .ps-nda-cta .ps-btn-label { color: var(--ink) !important }
html body .nda-preview .ps-feature > h2 { color: var(--on-dark) !important }
html body .nda-preview .ps-feature { --pf-fg: #fff }
html body .nda-preview .ps-feature-copy p { color: var(--u-text-2-dark) !important }
html body .editorial-hero h1 { font-size: clamp(36px,3.5vw,48px) !important; letter-spacing: -.03em !important; margin-bottom: 24px !important }
html body .editorial-hero .editorial-summary { font-size: var(--text-18) !important }
html body .editorial-hero .button { font-size: var(--text-16) !important; padding: 0 16px !important }
html body .selected.wrap > h2, html body .ps-builder-head h2, html body .delivery-title h2 { font-size: var(--text-36) !important; line-height: 1.15 !important; letter-spacing: -.02em !important }
html:where([data-page="index"]) body .evidence-work-copy h3 { letter-spacing: -.01em !important }
html body .ps-builder-head p { font-size: var(--text-18) !important }
html:where([data-page="index"]) body .pg-folder-label { font-size: var(--text-26) !important; font-weight: var(--weight-medium) !important; letter-spacing: -.01em !important }
html:where([data-page="index"]) body .pg-folder-label small { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; letter-spacing: 0 !important }
html body .nda-preview .ps-feature > h2 { font-size: var(--text-36) !important; line-height: 1.1 !important; letter-spacing: -.02em !important }
html body .ps-feature-name { font-size: var(--text-26) !important }
html body .ps-feature-sub { font-size: var(--text-14) !important }
html body .ps-nda-name { font-size: var(--text-16) !important }
@media (max-width:760px) {
  html body .editorial-hero h1 { font-size: var(--text-32) !important; line-height: 1.1 !important; margin-bottom: 0 !important }
  html body .selected.wrap > h2, html body .ps-builder-head h2, html body .delivery-title h2 { font-size: var(--text-28) !important }
  html body .nda-preview .ps-feature > h2 { font-size: var(--text-28) !important }
  html:where([data-page="index"]) body .evidence-work-copy h3, html:where([data-page="index"]) body .pg-folder-label, html body .ps-feature-name { font-size: var(--text-22) !important }
  html body .ps-builder-head p, html body .ps-feature-copy p { font-size: var(--text-16) !important }
}
@media (max-width:760px) {
  html body .editorial-hero .actions { display: flex !important; grid-area: 3/1/auto/-1; margin: 0 !important; column-gap: 8px !important }
  html body .editorial-hero .mobile-hero-action { display: inline-flex !important }
}
html:where([data-page="index"]) body .evidence-work-image { border-radius: 4px !important }
html:where([data-page="index"]) body .pg-folder-link { border-radius: var(--radius-lg) !important }
html body .ps-builder .pg-canvas { border-radius: var(--radius-lg) !important }
html body .nda-preview .ps-feature { border-radius: 24px !important }
html body .ps-nda-link { border-radius: var(--radius-lg) !important }
html body .ps-nda-carousel { margin: var(--u-head) 0 0 !important; padding: 0 !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important }
html body .ps-nda-track { display: flex !important; flex-wrap: wrap; gap: 16px !important; width: auto !important; animation: none !important; transform: none !important }
html body .ps-nda-item { flex: 1 1 auto }
html body .ps-nda-item[aria-hidden="true"] { display: none !important }
html body .ps-feature-pause { display: none !important }
@media (max-width:760px) {
  html body .ps-nda-carousel { overflow-x: auto !important; scroll-snap-type: x mandatory; padding-bottom: 8px !important }
  html body .ps-nda-track { flex-wrap: nowrap; width: max-content !important }
  html body .ps-nda-item { flex: none; scroll-snap-align: start }
}
html body #work.selected > h2 { margin: 0 0 var(--u-head) !important }
html body .nda-preview .ps-feature > h2 { margin-bottom: 0 !important }
html body .nda-preview .ps-feature-grid { margin-top: var(--u-head) !important }
@media (max-width:760px) {
  html:where([data-page="index"]) body .actions, html body .ps-feature-actions { flex-direction: column !important; align-items: stretch !important }
  html:where([data-page="index"]) body .actions > .button, html body .ps-feature-actions > .button { width: 100% !important; flex: none !important; justify-content: center !important; white-space: normal !important }
}
html:where([data-page="index"]) body .button > span.ps-btn-label { font-size: var(--text-16) !important }

/* 28 Inner pages polish pass, October 2026 (unslop method) | every page except Home */
@media (min-width:761px) {
  html body .about-intro p { font-size: var(--text-18) !important; color: var(--ink-2) !important }
  html body .story > h3 { font-size: var(--text-26) !important }
  html body .story > p { color: var(--ink-2) !important }
  html body .simple-page > p.lede { font-size: var(--text-20) !important; color: var(--ink-2) !important }
  html:where([data-page]:not([data-page="index"])) body .evidence-work-copy > span.evidence-read { color: var(--ink) !important }
  html body main p.scope-intro { color: var(--ink-2) !important }
  html body .scope-policy > strong { font-size: var(--text-16) !important }
  html body .scope-policy > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .scope-row h2 { font-size: var(--text-26) !important }
  html body .scope-row li { color: var(--ink-2) !important }
  html body .psb-cs-head > p.psb-lede { color: var(--ink-2) !important }
  html body .psb-stage > span.psk-label { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .psb-copy > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .avatar-decision > h2 { font-size: var(--text-36) !important }
  html body .avatar-decision > p.avatar-lead { font-size: var(--text-20) !important; color: var(--ink-2) !important }
  html body .avatar-decision-points h3 { font-size: var(--text-18) !important }
  html body .avatar-decision-points p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .avatar-model-header > span.am-title { font-size: var(--text-18) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .avatar-model-header > span.am-chip { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .am-ruler > span { color: var(--ink-3) !important }
  html body .am-track > span.am-label { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .am-lane > span.am-clip.am-clip--script { font-size: var(--text-14) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .am-lane > span.am-clip.am-clip--gesture { font-size: var(--text-14) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .avatar-model > figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .scope-conversation > h2 { font-size: var(--text-36) !important }
  html body .scope-conversation > p { color: var(--ink-2) !important }
  html body .c-card__body > span.c-card__label { font-weight: var(--weight-medium) !important; text-transform: none !important; letter-spacing: 0 !important }
  html body .c-card__body > span.c-card__value { font-size: var(--text-18) !important; font-weight: var(--weight-medium) !important }
  html body .c-card__body > span.c-card__note { color: var(--ink-2) !important }
  html body .call-card > h2.call-card__title { font-size: var(--text-26) !important; font-weight: var(--weight-medium) !important }
  html body .call-card > p.call-card__text { color: var(--ink-2) !important }
  html body .pg-intro > p { font-size: var(--text-18) !important; color: var(--ink-2) !important }
  html:where([data-page]:not([data-page="index"])) body .pg-folder-front > span.pg-folder-label { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html:where([data-page]:not([data-page="index"])) body .pg-folder-label > small { font-size: var(--text-12) !important; color: var(--ink) !important }
  html body .case > div.work-meta { color: var(--ink-3) !important }
  html body .work-meta > span.client-mark { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .work-meta > span.dot { color: var(--ink-3) !important }
  html body .work-meta > span { color: var(--ink-3) !important }
  html body .evidence-figure strong { color: var(--ink) !important }
  html body .evidence-figure a { color: var(--ink) !important }
  html body .case-summary h2 { font-weight: var(--weight-medium) !important }
  html body .case-summary p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .case-context dt { font-size: var(--text-14) !important; font-weight: var(--weight-medium) !important }
  html body .case-context dd { color: var(--ink-2) !important }
  html body .decision-evidence h2 { font-size: var(--text-36) !important }
  html body .decision-evidence p { color: var(--ink-2) !important }
  html body .decision-copy > p { color: var(--ink-2) !important }
  html body .decision-block > p { color: var(--ink-2) !important }
  html body .story li { color: var(--ink-2) !important }
  html body .figma-evidence h2 { font-size: var(--text-36) !important }
  html body .figma-evidence > header > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .decision-trail strong { font-size: var(--text-16) !important }
  html body .decision-trail p { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .decision-heading > h3 { font-size: var(--text-26) !important }
  html body .city-input > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .service-stack > span { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .city-input > p { color: var(--ink-2) !important }
  html body .city-output > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .intent-grid > span { font-weight: var(--weight-medium) !important }
  html body .city-output > p { color: var(--ink-2) !important }
  html body .decision-graphic > figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .decision-trade p { color: var(--ink-2) !important }
  html body .decision-side > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .interaction-sequence p { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .decision-side > p.fe-small { color: var(--ink-2) !important }
  html body .delivery-note > p { color: var(--ink-2) !important }
  html body .action-example > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .action-example > p { color: var(--ink-2) !important }
  html body .pg-wrap > a.pg-back { color: var(--ink-3) !important }
  html body .pg-detail-heading > h1 { font-size: var(--text-48) !important; color: var(--ink) !important }
  html body .pg-detail-heading > p.pg-detail-intro { color: var(--ink-2) !important }
  html body .pg-meta > span { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .pg-ownership > h2 { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .pg-ownership > p { color: var(--ink-2) !important }
  html body .pg-section-title > h2 { font-size: var(--text-36) !important; color: var(--ink) !important }
  html body .pg-process span.pg-step-number { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .pg-process h3 { color: var(--ink) !important }
  html body .pg-process p { color: var(--ink-2) !important }
  html body .pg-choice > h2 { font-size: var(--text-26) !important; color: var(--ink) !important }
  html body .pg-choice > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .pg-capture strong { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .pg-capture p { color: var(--ink-2) !important }
  html body .pg-provenance > p { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .pg-provenance a { font-size: var(--text-12) !important; color: var(--ink) !important }
  html body .pg-related > h2 { font-size: var(--text-26) !important; color: var(--ink) !important }
  html body .pg-hero > figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .pg-original-assets > h2 { font-size: var(--text-26) !important; color: var(--ink) !important }
  html body .pg-tool-art figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .pg-original-assets > p { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .bb-object-heading h2 { font-size: var(--text-36) !important; color: var(--ink) !important }
  html body .bb-object-heading > p { color: var(--ink-2) !important }
  html body .bb-stage-label > span { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .bb-objects > p.bb-object-hint { color: var(--ink-3) !important }
  html body .bb-objects > p.bb-object-note { color: var(--ink-3) !important }
  html body .bb-tool > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .bb-tool > span.bb-tool-name { font-size: var(--text-18) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .bb-compare span.bb-tag { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
}
@media (max-width:760px) {
  html body .about-intro p { font-size: var(--text-18) !important; color: var(--ink-2) !important }
  html body .story > h2 { font-size: var(--text-28) !important }
  html body .story > h3 { font-size: var(--text-22) !important }
  html body .story > p { color: var(--ink-2) !important }
  html body .simple-page > p.lede { color: var(--ink-2) !important }
  html:where([data-page]:not([data-page="index"])) body .evidence-work-copy > h3 { font-size: var(--text-22) !important }
  html:where([data-page]:not([data-page="index"])) body .evidence-work-copy > span.evidence-read { color: var(--ink) !important }
  html body main p.scope-intro { font-size: var(--text-18) !important; color: var(--ink-2) !important }
  html body .scope-policy > p { color: var(--ink-2) !important }
  html body .scope-row h2 { font-size: var(--text-22) !important }
  html body .scope-row li { color: var(--ink-2) !important }
  html body .psb-cs-head > p.psb-lede { color: var(--ink-2) !important }
  html body .psb-stage > span.psk-label { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .psb-copy > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .avatar-decision > p.avatar-lead { font-size: var(--text-18) !important; color: var(--ink-2) !important }
  html body .avatar-decision-points h3 { font-size: var(--text-18) !important }
  html body .avatar-decision-points p { color: var(--ink-2) !important }
  html body .avatar-model-header > span.am-title { font-size: var(--text-18) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .avatar-model-header > span.am-chip { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .am-ruler > span { color: var(--ink-3) !important }
  html body .am-track > span.am-label { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .am-lane > span.am-clip.am-clip--script { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .am-lane > span.am-clip.am-clip--gesture { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .avatar-model > figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .scope-conversation > p { color: var(--ink-2) !important }
  html body .c-card__body > span.c-card__label { font-weight: var(--weight-medium) !important; text-transform: none !important; letter-spacing: 0 !important }
  html body .c-card__body > span.c-card__value { font-size: var(--text-18) !important; font-weight: var(--weight-medium) !important }
  html body .c-card__body > span.c-card__note { color: var(--ink-2) !important }
  html body .call-card > h2.call-card__title { font-size: var(--text-22) !important; font-weight: var(--weight-medium) !important }
  html body .call-card > p.call-card__text { color: var(--ink-2) !important }
  html body .pg-intro > p { color: var(--ink-2) !important }
  html:where([data-page]:not([data-page="index"])) body .pg-folder-front > span.pg-folder-label { font-size: var(--text-22) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html:where([data-page]:not([data-page="index"])) body .pg-folder-label > small { font-size: var(--text-12) !important; color: var(--ink) !important }
  html body .case > div.work-meta { color: var(--ink-3) !important }
  html body .work-meta > span.client-mark { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .work-meta > span.dot { color: var(--ink-3) !important }
  html body .work-meta > span { color: var(--ink-3) !important }
  html body .evidence-figure strong { color: var(--ink) !important }
  html body .evidence-figure a { color: var(--ink) !important }
  html body .case-summary h2 { font-weight: var(--weight-medium) !important }
  html body .case-summary p { color: var(--ink-2) !important }
  html body .case-context dt { font-size: var(--text-14) !important; font-weight: var(--weight-medium) !important }
  html body .case-context dd { color: var(--ink-2) !important }
  html body .decision-evidence p { color: var(--ink-2) !important }
  html body .decision-copy > h3 { font-size: var(--text-22) !important }
  html body .decision-copy > p { color: var(--ink-2) !important }
  html body .decision-block > h3 { font-size: var(--text-22) !important }
  html body .decision-block > p { color: var(--ink-2) !important }
  html body .story li { color: var(--ink-2) !important }
  html body .figma-evidence h2 { font-size: var(--text-28) !important }
  html body .figma-evidence > header > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .decision-trail strong { font-size: var(--text-16) !important }
  html body .decision-trail p { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .city-input > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .service-stack > span { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .city-input > p { color: var(--ink-2) !important }
  html body .city-output > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .intent-grid > span { font-weight: var(--weight-medium) !important }
  html body .city-output > p { color: var(--ink-2) !important }
  html body .decision-graphic > figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .decision-trade p { color: var(--ink-2) !important }
  html body .decision-side > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .interaction-sequence p { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .decision-side > p.fe-small { color: var(--ink-2) !important }
  html body .delivery-note > p { color: var(--ink-2) !important }
  html body .action-example > span.diagram-label { font-size: var(--text-12) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .action-example > p { color: var(--ink-2) !important }
  html body .pg-wrap > a.pg-back { color: var(--ink-3) !important }
  html body .pg-detail-heading > h1 { font-size: var(--text-32) !important; color: var(--ink) !important }
  html body .pg-detail-heading > p.pg-detail-intro { color: var(--ink-2) !important }
  html body .pg-meta > span { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .pg-ownership > h2 { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .pg-ownership > p { color: var(--ink-2) !important }
  html body .pg-section-title > h2 { color: var(--ink) !important }
  html body .pg-process span.pg-step-number { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .pg-process h3 { color: var(--ink) !important }
  html body .pg-process p { color: var(--ink-2) !important }
  html body .pg-choice > h2 { color: var(--ink) !important }
  html body .pg-choice > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .pg-capture strong { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .pg-capture p { color: var(--ink-2) !important }
  html body .pg-provenance > p { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .pg-provenance a { font-size: var(--text-12) !important; color: var(--ink) !important }
  html body .pg-related > h2 { font-size: var(--text-22) !important; color: var(--ink) !important }
  html body .pg-hero > figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .pg-original-assets > h2 { font-size: var(--text-22) !important; color: var(--ink) !important }
  html body .pg-tool-art figcaption { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .pg-original-assets > p { font-size: var(--text-12) !important; color: var(--ink-3) !important }
  html body .bb-object-heading h2 { font-size: var(--text-28) !important; color: var(--ink) !important }
  html body .bb-object-heading > p { color: var(--ink-2) !important }
  html body .bb-stage-label > span { font-size: var(--text-14) !important; color: var(--ink-2) !important }
  html body .bb-objects > p.bb-object-hint { color: var(--ink-3) !important }
  html body .bb-objects > p.bb-object-note { color: var(--ink-3) !important }
  html body .bb-tool > p { font-size: var(--text-16) !important; color: var(--ink-2) !important }
  html body .bb-tool > span.bb-tool-name { font-size: var(--text-18) !important; font-weight: var(--weight-medium) !important; color: var(--ink) !important }
  html body .bb-compare span.bb-tag { font-weight: var(--weight-medium) !important; color: var(--ink) !important }
}
html:where([data-page]:not([data-page="index"])) body .evidence-work-copy > p.project-subtitle { color: var(--ink-2) !important }
html body .c-card__body > span.c-card__label { color: var(--ink-2) !important }
html body .intent-grid > span { color: var(--ink) !important }
html body .ps-stack li > span { font-size: var(--text-16) !important; color: var(--ink) !important }
html body .pg-detail-heading > h1 > span { font-size: var(--text-20) !important; font-weight: var(--weight-regular) !important; color: var(--ink-2) !important; letter-spacing: 0 !important }
html:where([data-page]:not([data-page="index"])) body .pg-canvas .pg-folder-label { font-size: var(--text-26) !important; letter-spacing: -.01em !important }
html body .pg-related .pg-folder-label { font-size: var(--text-20) !important; letter-spacing: -.01em !important }
@media (min-width:761px) {
  html body .about-intro h2 { font-size: var(--text-26) !important }
}
@media (max-width:760px) {
  html body .about-intro h2, html body .decision-heading > h3, html body .pg-choice > h2 { font-size: var(--text-22) !important }
  html body .simple-page > p.lede, html body .next-work > a { font-size: var(--text-18) !important }
  html body .pg-detail-heading > h1 > span { font-size: var(--text-18) !important }
}
html:where([data-page]:not([data-page="index"])) body main h1 { letter-spacing: -.03em !important }
html body .story > h2, html body .psb-cs-head > h2, html body .figma-evidence h2, html body .decision-evidence h2, html body .avatar-decision > h2, html body .scope-conversation > h2, html body .pg-section-title > h2, html body .bb-object-heading h2, html body .delivery-record > h2 { letter-spacing: -.02em !important; line-height: 1.15 !important }
html body .case-summary h2, html body .pg-ownership > h2 { letter-spacing: 0 !important }
html body .diagram-label { display: inline-block; text-transform: lowercase !important; letter-spacing: 0 !important }
html body .diagram-label::first-letter { text-transform: uppercase }
html body .evidence-figure figcaption a, html body .pg-wrap > a.pg-back { display: inline-flex; align-items: center; min-height: 44px }
html body .ps-cv__group > button { min-width: 44px }
html:where([data-page]:not([data-page="index"])) body main h1 { color: var(--ink) !important }
html body .evidence-figure figcaption > span { color: var(--ink-2) !important }
html body .decision-trade > div > span { font-size: var(--text-12) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-2) !important }
html body .diagram-arrow { color: var(--ink-3) !important }
html body .action-after .mock-actions span { color: var(--on-dark) !important }
html body .mock-actions span, html body .mock-actions small { font-size: var(--text-12) !important }
html body .mock-actions span { padding: 8px !important }
html body .mock-actions { gap: 8px !important; margin-top: 24px !important }
html body .bb-object-controls > button, html body .bb-stage-label > button { font-size: var(--text-14) !important }
html body .bb-stage-label > button { min-height: 44px }
@media (max-width:760px) {
  html:where([data-page]:not([data-page="index"])) body main h1 { font-size: var(--text-32) !important; line-height: 1.1 !important }
  html body .story > p { font-size: var(--text-16) !important }
  html body .bb-object-controls > button { font-size: var(--text-12) !important }
}
@media (min-width:761px) {
  html body .about-intro > div > p { margin-bottom: 20px !important }
  html body .abstract-request > span.request-line { margin-top: 4px !important; margin-bottom: 12px !important }
  html body .action-example > p { margin-top: 20px !important }
  html body .action-example > span.diagram-label { margin-bottom: 24px !important }
  html body .am-canvas > div.am-ruler { margin-bottom: 12px !important }
  html body .am-canvas > div.am-track { margin-top: 12px !important }
  html body .am-lane > span.am-clip:not(.am-clip--icon) { padding-right: 12px !important; padding-left: 12px !important; row-gap: 8px !important; column-gap: 8px !important }
  html body .avatar-decision > p.avatar-lead { margin-bottom: 20px !important }
  html body .avatar-decision-points > div > h3 { margin-bottom: 8px !important }
  html body .avatar-model > div.am-canvas { padding-top: 16px !important; padding-bottom: 20px !important }
  html body .avatar-model > figcaption { margin-top: 16px !important }
  html body .avatar-model-header > span.am-chip { padding-right: 12px !important; padding-left: 12px !important }
  html body .bb-stage-label > button { padding-top: 8px !important; padding-right: 16px !important; padding-bottom: 8px !important; padding-left: 16px !important }
  html body .bb-tag { padding-right: 12px !important; padding-left: 12px !important }
  html body .c-card__body > span.ps-cv { margin-top: 16px !important }
  html body .call-band > div.call-card { row-gap: 16px !important; column-gap: 16px !important }
  html body .call-card > a.button { margin-top: 12px !important }
  html body .case { padding-bottom: 76px !important }
  html body .case > div.case-summary { padding-bottom: 40px !important; margin-bottom: 32px !important }
  html body .case > div.work-meta { margin-bottom: 28px !important; row-gap: 12px !important; column-gap: 12px !important }
  html body .case > dl.case-context { row-gap: 24px !important; column-gap: 24px !important }
  html body .case > h1 { margin-bottom: 40px !important }
  html body .case > nav.next-work { margin-top: 64px !important }
  html body .case > section.figma-evidence { padding-top: 40px !important; margin-bottom: 72px !important }
  html body .case > section.story { margin-bottom: 64px !important }
  html body .city-input > p { margin-top: 20px !important }
  html body .city-input > span.diagram-label { margin-bottom: 24px !important }
  html body .city-output > div.intent-grid { row-gap: 8px !important; column-gap: 8px !important }
  html body .city-output > p { margin-top: 20px !important }
  html body .city-output > span.diagram-label { margin-bottom: 24px !important }
  html body .decision-block > p { margin-bottom: 20px !important }
  html body .decision-copy > p { margin-bottom: 20px !important }
  html body .decision-evidence > header > p { margin-bottom: 20px !important }
  html body .decision-graphic > figcaption { margin-top: 24px !important }
  html body .decision-side > p.fe-small { padding-top: 20px !important; margin-bottom: 20px !important }
  html body .decision-side > span.diagram-label { margin-bottom: 24px !important }
  html body .delivery-note > p { margin-top: 12px !important }
  html body .evidence-figure > figcaption { margin-top: 16px !important; row-gap: 8px !important; column-gap: 8px !important }
  html body .fe-detail-pair > div.decision-side { padding-top: 12px !important }
  html body .figma-evidence > aside.delivery-note { margin-top: 40px !important }
  html body .figma-evidence > div.decision-trade { margin-bottom: 32px !important }
  html body .figma-evidence > div.fe-detail-pair { row-gap: 40px !important; column-gap: 40px !important }
  html body .figma-evidence > figure.decision-graphic { padding-top: 36px !important; padding-right: 36px !important; padding-bottom: 36px !important; padding-left: 36px !important }
  html body .figma-evidence > header { margin-bottom: 32px !important }
  html body .figma-evidence > header:not(.decision-heading) > p { margin-bottom: 20px !important }
  html body .figma-evidence > header.decision-heading { margin-bottom: 32px !important }
  html body .figma-evidence > ol.decision-trail { padding-bottom: 32px !important }
  html body .interaction-sequence > li { padding-bottom: 24px !important; padding-left: 36px !important }
  html body .interaction-sequence > li > p { margin-top: 8px !important }
  html body .next-work > a.next-unlock { row-gap: 16px !important }
  html body .pg-brand-stage > div > p { margin-bottom: 20px !important }
  html:where([data-page]:not([data-page="index"])) body .pg-canvas > div.pg-folders { padding-top: 40px !important; row-gap: 48px !important }
  html body .pg-capture > figcaption { padding-top: 16px !important; margin-top: 16px !important }
  html body .pg-capture > figcaption > p { margin-top: 8px !important }
  html body .pg-detail-heading > div.pg-meta { row-gap: 12px !important; column-gap: 12px !important }
  html body .pg-detail-heading > h1 { margin-top: 20px !important }
  html body .pg-detail-heading > p.pg-detail-intro { margin-bottom: 20px !important }
  html:where([data-page]:not([data-page="index"])) body .pg-canvas .pg-folder > div.pg-folder-front { padding-top: 16px !important; padding-right: 20px !important; padding-bottom: 16px !important; padding-left: 20px !important }
  html body .pg-hero > div.pg-brand-stage { padding-top: 40px !important; padding-right: 40px !important; padding-bottom: 40px !important; padding-left: 40px !important }
  html body .pg-main > article.pg-wrap { padding-bottom: 64px !important }
  html body .pg-meta > span { padding-top: 8px !important; padding-bottom: 8px !important }
  html body .pg-original-assets > div.pg-tool-art { padding-top: 24px !important; padding-right: 24px !important; padding-bottom: 24px !important; padding-left: 24px !important }
  html body .pg-original-assets > p { margin-bottom: 20px !important }
  html body .pg-process > ol > li { row-gap: 16px !important; column-gap: 16px !important }
  html body .pg-provenance > p { margin-bottom: 20px !important }
  html body .pg-related > nav.pg-related-folders { row-gap: 24px !important; column-gap: 24px !important }
  html body .pg-section-title > h2 { margin-top: 16px !important; margin-bottom: 16px !important }
  html:where([data-page]:not([data-page="index"])) body .pg-canvas .pg-project[data-project="basyt"] .pg-sheet img { padding: 24px !important }
  html body .pg-wrap > header.pg-detail-heading { margin-top: 44px !important }
  html body .pg-wrap > section.pg-canvas { padding-top: 28px !important; padding-right: 28px !important; padding-bottom: 36px !important; padding-left: 28px !important; margin-top: 4px !important; margin-bottom: 72px !important }
  html body .pg-wrap > section.pg-captures { row-gap: 36px !important }
  html body .pg-wrap > section.pg-choice { margin-bottom: 40px !important }
  html body .pg-wrap > section.pg-intro { padding-top: 64px !important; padding-bottom: 32px !important }
  html body .pg-wrap > section.pg-ownership { margin-top: 36px !important; row-gap: 32px !important; column-gap: 32px !important }
  html body .pg-wrap > section.pg-process { row-gap: 32px !important; column-gap: 32px !important }
  html body .pg-wrap > section.pg-related { padding-top: 32px !important }
  html body .ps-stack > li { padding-right: 16px !important; padding-left: 16px !important }
  html body .psb-stage > span.psk-label { padding-right: 12px !important; padding-left: 12px !important }
  html body .scope-conversation > p { margin-bottom: 20px !important }
  html body .scope-intro { margin-bottom: 20px !important }
  html body .service-stack > span { padding-top: 12px !important; padding-right: 16px !important; padding-bottom: 12px !important; padding-left: 16px !important }
  html body .simple-page > div.about-intro { margin-top: 44px !important; margin-bottom: 72px !important }
  html body .simple-page > h1 { margin-bottom: 28px !important }
  html body .simple-page > p.lede { margin-bottom: 56px !important }
  html body .simple-page > section.story { margin-bottom: 64px !important }
  html body .story > figure { margin-bottom: 32px !important }
  html body .story > h3 { margin-top: 32px !important; margin-bottom: 16px !important }
  html body .story > ul:not(.ps-stack) { padding-left: 24px !important }
}
@media (max-width:760px) {
  html body .about-intro > div > p { margin-bottom: 20px !important }
  html body .abstract-request > span.request-line { margin-top: 4px !important; margin-bottom: 12px !important }
  html body .action-example > p { margin-top: 20px !important }
  html body .action-example > span.diagram-label { margin-bottom: 24px !important }
  html body .am-canvas > div.am-ruler { margin-bottom: 12px !important }
  html body .am-canvas > div.am-track { margin-top: 12px !important }
  html body .am-lane > span.am-clip:not(.am-clip--icon) { padding-right: 8px !important; padding-left: 8px !important; row-gap: 8px !important; column-gap: 8px !important }
  html body .avatar-decision > p.avatar-lead { margin-bottom: 20px !important }
  html body .avatar-decision-points > div > h3 { margin-bottom: 8px !important }
  html body .avatar-model > div.am-canvas { padding-bottom: 16px !important }
  html body .avatar-model > figcaption { margin-top: 16px !important }
  html body .avatar-model-header > span.am-chip { padding-right: 12px !important; padding-left: 12px !important }
  html body .bb-stage-label > button { padding-top: 8px !important; padding-right: 16px !important; padding-bottom: 8px !important; padding-left: 16px !important }
  html body .bb-tag { padding-right: 12px !important; padding-left: 12px !important }
  html body .c-card__body > span.ps-cv { margin-top: 16px !important }
  html body .call-band > div.call-card { row-gap: 16px !important; column-gap: 16px !important }
  html body .call-card > a.button { margin-top: 12px !important }
  html body .case { padding-bottom: 76px !important }
  html body .case > div.case-summary { padding-bottom: 32px !important; margin-bottom: 32px !important }
  html body .case > div.work-meta { margin-bottom: 28px !important }
  html body .case > dl.case-context { margin-bottom: 52px !important; row-gap: 20px !important; column-gap: 20px !important }
  html body .case > h1 { margin-bottom: 28px !important }
  html body .case > nav.next-work { margin-top: 36px !important }
  html body .case > section.figma-evidence { margin-top: 40px !important; margin-bottom: 40px !important }
  html body .case > section.story { margin-bottom: 44px !important }
  html body .city-input > p { margin-top: 20px !important }
  html body .city-input > span.diagram-label { margin-bottom: 24px !important }
  html body .city-output > div.intent-grid { row-gap: 8px !important; column-gap: 8px !important }
  html body .city-output > p { margin-top: 20px !important }
  html body .city-output > span.diagram-label { margin-bottom: 24px !important }
  html body .decision-block > p { margin-bottom: 20px !important }
  html body .decision-copy > p { margin-bottom: 20px !important }
  html body .decision-evidence > header > p { margin-bottom: 20px !important }
  html body .decision-graphic > figcaption { margin-top: 24px !important }
  html body .decision-side > p.fe-small { padding-top: 20px !important; margin-bottom: 20px !important }
  html body .decision-side > span.diagram-label { margin-bottom: 24px !important }
  html body .decision-trail > li { padding-left: 40px !important }
  html body .delivery-note > p { margin-top: 12px !important }
  html body .evidence-figure > figcaption { margin-top: 16px !important; row-gap: 8px !important; column-gap: 8px !important }
  html body .fe-detail-pair > div.decision-side { padding-top: 12px !important }
  html body .figma-evidence > aside.delivery-note { margin-top: 40px !important }
  html body .figma-evidence > div.decision-trade { margin-bottom: 32px !important; row-gap: 20px !important; column-gap: 20px !important }
  html body .figma-evidence > div.fe-detail-pair { row-gap: 20px !important; column-gap: 20px !important }
  html body .figma-evidence > figure.decision-graphic { padding-top: 24px !important; padding-right: 20px !important; padding-bottom: 24px !important; padding-left: 20px !important; row-gap: 16px !important; column-gap: 16px !important }
  html body .figma-evidence > header { margin-bottom: 32px !important }
  html body .figma-evidence > header:not(.decision-heading) > p { margin-bottom: 20px !important }
  html body .figma-evidence > header.decision-heading { margin-bottom: 32px !important }
  html body .figma-evidence > ol.decision-trail { padding-bottom: 32px !important; row-gap: 24px !important; column-gap: 24px !important }
  html body .intent-grid > span { padding-top: 16px !important; padding-bottom: 16px !important }
  html body .interaction-sequence > li { padding-bottom: 24px !important; padding-left: 36px !important }
  html body .interaction-sequence > li > p { margin-top: 8px !important }
  html body .next-work > a.next-unlock { row-gap: 16px !important }
  html body .pg-brand-stage > div > p { margin-bottom: 20px !important }
  html:where([data-page]:not([data-page="index"])) body .pg-canvas > div.pg-folders { padding-top: 8px !important }
  html body .pg-capture > figcaption { padding-top: 16px !important; margin-top: 16px !important }
  html body .pg-capture > figcaption > p { margin-top: 8px !important }
  html body .pg-detail-heading > div.pg-meta { row-gap: 12px !important; column-gap: 12px !important }
  html body .pg-detail-heading > h1 { margin-top: 20px !important }
  html body .pg-detail-heading > p.pg-detail-intro { margin-bottom: 20px !important }
  html:where([data-page]:not([data-page="index"])) body .pg-canvas .pg-folder > div.pg-folder-front { padding-top: 16px !important; padding-bottom: 16px !important }
  html body .pg-hero > div.pg-brand-stage { row-gap: 20px !important; column-gap: 20px !important }
  html body .pg-main > article.pg-wrap { padding-bottom: 64px !important }
  html body .pg-meta > span { padding-top: 8px !important; padding-bottom: 8px !important }
  html body .pg-original-assets > div.pg-tool-art { padding-top: 16px !important; padding-right: 16px !important; padding-bottom: 16px !important; padding-left: 16px !important }
  html body .pg-original-assets > p { margin-bottom: 20px !important }
  html body .pg-process > ol > li { row-gap: 16px !important; column-gap: 16px !important }
  html body .pg-provenance > p { margin-bottom: 20px !important }
  html body .pg-section-title > h2 { margin-top: 16px !important; margin-bottom: 16px !important }
  html:where([data-page]:not([data-page="index"])) body .pg-canvas .pg-project[data-project="basyt"] .pg-sheet img { padding: 24px !important }
  html body .pg-wrap > header.pg-detail-heading { margin-top: 44px !important }
  html body .pg-wrap > section.pg-canvas { padding-top: 24px !important; padding-bottom: 32px !important; margin-top: 4px !important }
  html body .pg-wrap > section.pg-captures { row-gap: 28px !important; column-gap: 28px !important }
  html body .pg-wrap > section.pg-choice { margin-bottom: 40px !important }
  html body .pg-wrap > section.pg-ownership { margin-top: 36px !important; row-gap: 16px !important; column-gap: 16px !important }
  html body .pg-wrap > section.pg-process { margin-top: 40px !important; margin-bottom: 40px !important; row-gap: 16px !important; column-gap: 16px !important }
  html body .ps-stack > li { row-gap: 12px !important; column-gap: 12px !important }
  html body .psb-stage > span.psk-label { padding-right: 12px !important; padding-left: 12px !important }
  html body .scope-conversation > p { margin-bottom: 20px !important }
  html body .scope-intro { margin-bottom: 20px !important }
  html body .service-stack > span { padding-top: 12px !important; padding-right: 16px !important; padding-bottom: 12px !important; padding-left: 16px !important }
  html body .simple-page { padding-top: 64px !important; padding-bottom: 64px !important }
  html body .simple-page > div.about-intro { margin-top: 32px !important; margin-bottom: 72px !important }
  html body .simple-page > h1 { margin-bottom: 28px !important }
  html body .simple-page > p.lede { margin-bottom: 56px !important }
  html body .simple-page > section.story { margin-bottom: 44px !important }
  html body .story > figure { margin-bottom: 32px !important }
  html body .story > h3 { margin-top: 32px !important; margin-bottom: 16px !important }
  html body .story > ul:not(.ps-stack) { padding-left: 24px !important }
}
html:where([data-page]:not([data-page="index"])) body .evidence-work-copy > div.project-company { margin: 0 0 16px !important; row-gap: 12px !important; column-gap: 12px !important }
html:where([data-page]:not([data-page="index"])) body .evidence-work-copy > h3 { margin: 0 0 12px !important }
html:where([data-page]:not([data-page="index"])) body .evidence-work-copy > p.project-subtitle { margin: 0 0 16px !important }
html:where([data-page]:not([data-page="index"])) body .evidence-work-item > a { column-gap: 32px !important; row-gap: 32px !important }
html:where([data-page]:not([data-page="index"])) body .pg-canvas .pg-folder-label small { margin-top: 8px !important }
html body .pg-related .pg-folder-label small { margin-top: 4px !important }
@media (min-width:761px) {
  html:where([data-page]:not([data-page="index"])) body .pg-canvas > div.pg-folders { column-gap: 40px !important }
}
html body .case nav.next-work > a { padding-left: 24px !important; padding-right: 24px !important }
html body .pg-process li > div > h3 { margin-bottom: 8px !important }
@media (max-width:760px) {
  html:where([data-page]:not([data-page="index"])) body .evidence-work-item > a { row-gap: 16px !important; column-gap: 16px !important }
}
.pg-clip-frame { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--panel); aspect-ratio: 16/9 }
.pg-clip-frame > video { display: block; width: 100%; height: 100%; object-fit: cover }
.pg-clip > figcaption { position: relative; padding-left: 56px; padding-right: 56px }
.pg-clip-toggle { position: absolute; right: 0; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); cursor: pointer; transition: background-color .18s var(--ease-soft) }
.pg-clip-toggle:hover { background: #e4e8ee }
.pg-clip-toggle:active { transform: scale(.98) }
.pg-clip-toggle svg { width: 20px; height: 20px }
.pg-clip-toggle .i-pause, .pg-clip-toggle[data-state="playing"] .i-play { display: none }
.pg-clip-toggle[data-state="playing"] .i-pause { display: block }
@media (max-width:760px) {
  html:where([data-page]:not([data-page="index"])) body .actions { flex-direction: column !important; align-items: stretch !important }
  html:where([data-page]:not([data-page="index"])) body .actions > .button { width: 100% !important; flex: none !important; justify-content: center !important; white-space: normal !important }
  html body .call-card__cta { align-self: stretch !important; justify-content: center !important }
  html body .ps-cv, html body .ps-cv__group { width: 100% !important }
  html body .ps-cv__group { display: flex !important }
  html body .ps-cv__group > .ps-cv__main { flex: 1 1 auto !important; justify-content: center !important }
}
html:where([data-page]:not([data-page="index"])) body .button > span.ps-btn-label { font-size: var(--text-16) !important }
@media (min-width:761px) {
  html body .next-work > a, html body .next-work > a.next-unlock { font-size: var(--text-20) !important }
}
@media (max-width:760px) {
  html body .next-work > a, html body .next-work > a.next-unlock { font-size: var(--text-18) !important }
}
@media (min-width:761px) {
  html body .delivery-record p, html body .delivery-record li { font-size: var(--text-18) !important }
}
html body .diagram-arrow { font-size: var(--text-26) !important }
@media (max-width:760px) {
  html body .diagram-arrow { font-size: var(--text-28) !important }
}
html body .ps-stack li > span > small { display: block; margin-top: 2px; font-size: var(--text-12); line-height: 16px; font-weight: var(--weight-regular); color: var(--ink-2) }
html body .ps-stack li > svg { color: var(--ink) }
html body .ps-stack-head { display: flex; align-items: center; justify-content: space-between; gap: 16px }
html body .ps-stack-head > h2 { margin-bottom: 0 !important }
html body .ps-stack-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); cursor: pointer; transition: background-color .18s var(--ease-soft) }
html body .ps-stack-toggle:hover { background: #e4e8ee }
html body .ps-stack-toggle svg { width: 20px; height: 20px }
html body .ps-stack-toggle .i-play, html body .ps-stack-toggle[data-state="paused"] .i-pause { display: none }
html body .ps-stack-toggle[data-state="paused"] .i-play { display: block }
html body .ps-stack-carousel { margin-top: 24px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%) }
html body .ps-stack-track { display: flex; width: max-content; animation: ps-stack-loop var(--ps-stack-duration,110s) linear infinite }
html body .ps-stack-carousel:hover .ps-stack-track, html body .ps-stack-carousel:focus-within .ps-stack-track, html body .ps-stack-carousel.is-paused .ps-stack-track, html body .ps-stack-carousel.is-offscreen .ps-stack-track { animation-play-state: paused }
html body .ps-stack-track > .ps-stack { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; padding: 0 8px 0 0 !important }
html body .ps-stack-track > .ps-stack > li { flex: none; white-space: nowrap }
@keyframes ps-stack-loop { to { transform: translateX(-50%) } }
@media (max-width:760px) {
  html body .ps-stack-carousel { -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%) }
}
@media (prefers-reduced-motion:reduce) {
  html body .ps-stack-toggle { display: none }
  html body .ps-stack-carousel { overflow: visible; -webkit-mask-image: none; mask-image: none }
  html body .ps-stack-track { display: block; width: auto }
  html body .ps-stack-track > .ps-stack { display: grid !important; flex-wrap: wrap !important; padding: 0 !important }
  html body .ps-stack-track > .ps-stack[aria-hidden="true"] { display: none !important }
  html body .ps-stack-track > .ps-stack > li { white-space: normal }
}
html body nav.next-work > a { align-items: start !important; row-gap: 16px !important }
html body nav.next-work > a > .next-logo { grid-column: 1 !important; grid-row: 1 !important }
html body nav.next-work > a > span[aria-hidden="true"] { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; display: flex }
html body nav.next-work > a > .next-title { grid-column: 1 / -1; grid-row: 2 }

/* 29 Accessibility toolbox (keep near the end so its settings win) | every page */
@font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: var(--weight-regular); font-display: swap; src: url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-400-normal.woff) format('woff') }
@font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-700-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.3.0/files/opendyslexic-latin-700-normal.woff) format('woff') }
@media (prefers-reduced-motion: reduce) {
  html body *:not(.ps-a11y-immune):not(.ps-a11y-immune *) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
  html body .ps-a11y-fab, html body .ps-a11y-panel, html body .ps-a11y-backdrop, html body .ps-a11y-fab *, html body .ps-a11y-panel * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}
html body .ps-a11y-skip { position: fixed; left: 12px; top: -60px; z-index: 9999; padding: 12px 22px; border-radius: var(--radius-sm); background: var(--ink); color: var(--on-dark); font: 600 .9375rem/1 "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif; text-decoration: none; transition: top .15s ease }
html body .ps-a11y-skip:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px }
html body *:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px }
html body footer *:focus-visible { outline-color: #fff }
html body *:focus:not(:focus-visible) { outline: none }
html body[data-a11y-panel-open] { overflow: hidden !important }
html body .ps-a11y-immune, html body .ps-a11y-immune * { filter: none !important }
html body .ps-a11y-immune [data-a11y-heading] { outline: none !important; box-shadow: none !important }
html body .ps-a11y-immune [data-a11y-heading]:focus, html body .ps-a11y-immune [data-a11y-heading]:focus-visible { outline: none !important; box-shadow: none !important }
html.a11y-scaled-text { font-size: calc(1rem * var(--a11y-text-scale,1)); zoom: var(--a11y-text-scale,1) }
html.a11y-scaled-text .ps-a11y-immune { zoom: calc(1 / var(--a11y-text-scale,1)) }
html.a11y-high-contrast body { background-color: var(--surface) !important; color: #000 !important }
html.a11y-high-contrast :is(p, span, h1, h2, h3, h4, h5, h6, label, li, td, th, dt, dd):not(.ps-a11y-immune):not(.ps-a11y-immune *) { color: #000 !important }
html.a11y-high-contrast a:not(.ps-a11y-immune):not(.ps-a11y-immune *) { color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important }
html.a11y-high-contrast button:not(.ps-a11y-immune):not(.ps-a11y-immune *) { border-color: #000 !important; color: #000 !important }
html.a11y-high-contrast :is(button, a, [role="button"]):not(.ps-a11y-immune):not(.ps-a11y-immune *) svg { color: inherit !important }
html.a11y-high-contrast footer { background-color: #000 !important }
html.a11y-high-contrast footer :is(p, span, a, button, li, h1, h2, h3, h4, h5, h6, dt, dd) { color: var(--on-dark) !important }
html.a11y-high-contrast footer a { text-decoration: underline !important }
html.a11y-high-contrast footer svg { color: var(--on-dark) !important }
html.a11y-max-contrast body { background-color: #0a0a0a !important; color: #f0f0f0 !important }
html.a11y-max-contrast :is(p, span, h1, h2, h3, h4, h5, h6, label, li, td, th, dt, dd):not(.ps-a11y-immune):not(.ps-a11y-immune *) { color: #f0f0f0 !important }
html.a11y-max-contrast a:not(.ps-a11y-immune):not(.ps-a11y-immune *) { color: #f0f0f0 !important; text-decoration: underline !important; text-underline-offset: 3px !important }
html.a11y-max-contrast :is(section, main):not(.ps-a11y-immune) { background-color: #0a0a0a !important }
html.a11y-max-contrast button:not(.ps-a11y-immune):not(.ps-a11y-immune *) { border-color: #555 !important; color: #f0f0f0 !important }
html.a11y-max-contrast :is(button, a, [role="button"]):not(.ps-a11y-immune):not(.ps-a11y-immune *) svg { color: inherit !important }
html.a11y-max-contrast img:not(.ps-a11y-immune):not(.ps-a11y-immune *) { opacity: .85 }
html.a11y-max-contrast footer { background-color: #000 !important }
html.a11y-max-contrast footer :is(p, span, a, button, li, h1, h2, h3, h4, h5, h6, dt, dd) { color: var(--on-dark) !important }
html.a11y-max-contrast footer a { text-decoration: underline !important }
html.a11y-max-contrast footer svg { color: var(--on-dark) !important }
html.a11y-max-contrast nav:not(.ps-a11y-immune) { background-color: rgba(10,10,10,.95) !important; backdrop-filter: blur(20px) !important }
html.a11y-max-contrast nav:not(.ps-a11y-immune) :is(p, span, h1, h2, h3, h4, h5, h6, label) { color: #f0f0f0 !important }
html.a11y-max-contrast nav:not(.ps-a11y-immune) a { color: #f0f0f0 !important; text-decoration: underline !important }
html.a11y-max-contrast nav:not(.ps-a11y-immune) button { color: #f0f0f0 !important; border-color: #555 !important }
html.a11y-max-contrast nav:not(.ps-a11y-immune) svg { color: #f0f0f0 !important }
html.a11y-max-contrast svg:not(.ps-a11y-immune):not(.ps-a11y-immune *):not([role="img"]) { color: #f0f0f0 !important }
html.a11y-underline-links a:not(.ps-a11y-immune):not(.ps-a11y-immune *) { text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: currentColor !important }
html.a11y-underline-links a:not(.ps-a11y-immune):not(.ps-a11y-immune *):hover { text-decoration-thickness: 2px !important }
html.a11y-pause-animations *:not(.ps-a11y-immune):not(.ps-a11y-immune *) { animation-play-state: paused !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
html.a11y-readable-font :is(body, p, span, li, td, th, input, textarea, select, button, label, a, h1, h2, h3, h4, h5, h6):not(.ps-a11y-immune):not(.ps-a11y-immune *) { font-family: 'OpenDyslexic','Comic Sans MS',system-ui,-apple-system,Arial,sans-serif !important }
html.a11y-readable-font .ps-a11y-panel, html.a11y-readable-font .ps-a11y-panel * { font-family: 'OpenDyslexic','Comic Sans MS',system-ui,-apple-system,Arial,sans-serif !important; letter-spacing: .05em !important; word-spacing: .12em !important }
html.a11y-large-targets :is(a, button, select, [role="button"], [role="switch"]):not(.ps-a11y-immune):not(.ps-a11y-immune *) { min-height: 44px !important; min-width: 44px !important }
html.a11y-highlight-focus *:not(.ps-a11y-immune):not(.ps-a11y-immune *):focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 3px !important; box-shadow: 0 0 0 5px rgba(32,32,32,.18) !important }
html.a11y-highlight-focus footer *:focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 5px rgba(255,255,255,.25) !important }
html.a11y-text-spacing :is(p, span, li, td, th, input, textarea, label, a, button, h1, h2, h3, h4, h5, h6):not(.ps-a11y-immune):not(.ps-a11y-immune *) { letter-spacing: var(--a11y-letter-spacing,.04em) !important; word-spacing: var(--a11y-word-spacing,.06em) !important }
html.a11y-line-height :is(p, span, li, td, th, label, a, h1, h2, h3, h4, h5, h6):not(.ps-a11y-immune):not(.ps-a11y-immune *) { line-height: var(--a11y-line-height,1.6) !important }
html.a11y-low-saturation::after, html.a11y-grayscale::after { content: ''; position: fixed; inset: 0; z-index: 59; pointer-events: none }
html.a11y-low-saturation::after { backdrop-filter: saturate(.35); -webkit-backdrop-filter: saturate(.35) }
html.a11y-grayscale::after { backdrop-filter: saturate(0); -webkit-backdrop-filter: saturate(0) }
html.a11y-big-cursor *:not(.ps-a11y-immune):not(.ps-a11y-immune *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 2 L5 26 L11 20 L18 28 L22 25 L15 17 L23 17 Z' fill='%23202020' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 4 2,auto !important }
html.a11y-big-cursor :is(a, button, [role="button"], input, textarea, select, label[for]):not(.ps-a11y-immune):not(.ps-a11y-immune *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23202020' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23202020'/%3E%3C/svg%3E") 16 16,pointer !important }
html.a11y-xl-cursor *:not(.ps-a11y-immune):not(.ps-a11y-immune *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M7 3 L7 39 L16 30 L27 42 L33 37 L22 25 L34 25 Z' fill='%23202020' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 6 3,auto !important }
html.a11y-xl-cursor :is(a, button, [role="button"], input, textarea, select, label[for]):not(.ps-a11y-immune):not(.ps-a11y-immune *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='18' fill='none' stroke='%23202020' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23202020'/%3E%3C/svg%3E") 24 24,pointer !important }
html.a11y-highlight-headings :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.ps-a11y-immune):not(.ps-a11y-immune *) { outline: 2px dashed rgba(32,32,32,.45) !important; outline-offset: 4px !important; border-radius: 4px }
html.a11y-hide-images :is(img, picture, video):not(.ps-a11y-immune):not(.ps-a11y-immune *) { opacity: .05 !important }
html.a11y-hide-images svg:not(.ps-a11y-immune):not(.ps-a11y-immune *):not([role="img"]) { opacity: .05 !important }
html body .ps-a11y-fab { position: fixed; z-index: 60; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: none; cursor: pointer; padding: 0; transition: background-color .35s ease,box-shadow .35s ease,transform .15s ease }
html body .ps-a11y-fab:hover { transform: scale(1.06) }
html body .ps-a11y-fab:active { transform: scale(.96) }
html body .ps-a11y-fab-badge { position: absolute; top: -2px; right: -3px; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-dark); font: 700 .5625rem/1 "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif; border: 2px solid var(--ink); transition: border-color .35s ease }
html body .ps-a11y-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .2s ease }
html body .ps-a11y-backdrop.open { opacity: 1; pointer-events: auto }
html body .ps-a11y-panel { position: fixed; z-index: 80; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.14),0 2px 12px rgba(0,0,0,.05); font: 1rem/1.5 "Portfolio","Avenir Next","Helvetica Neue",Arial,sans-serif; letter-spacing: 0; word-spacing: 0; transition: transform .3s cubic-bezier(.32,.72,0,1),opacity .3s cubic-bezier(.32,.72,0,1); opacity: .5; filter: none }
html body .ps-a11y-panel button { font-family: inherit }
html body .ps-a11y-panel:not(.open) { pointer-events: none }
@media (min-width:641px) {
  html body .ps-a11y-panel { bottom: 8px; right: 8px; width: 420px; max-width: calc(100vw - 16px); height: 80vh; min-height: 420px; max-height: calc(100vh - 16px); border-radius: var(--radius-xl); transform: translateX(105%) }
  html body .ps-a11y-panel.open { transform: translateX(0); opacity: 1 }
}
@media (max-width:640px) {
  html body .ps-a11y-panel { bottom: 0; left: 0; right: 0; width: auto; height: 60vh; border-radius: 14px 14px 0 0; transform: translateY(105%) }
  html body .ps-a11y-panel.open { transform: translateY(0); opacity: 1 }
}
html body .ps-a11y-head { flex: 0 0 auto; position: relative; overflow: hidden; background: var(--ink); padding: 16px 20px 12px; display: flex; align-items: center; justify-content: space-between }
html body .ps-a11y-head h2 { margin: 0; color: var(--on-dark); font-size: var(--text-20); letter-spacing: -.02em; outline: none; box-shadow: none; border: none }
html body .ps-a11y-head-actions { display: flex; align-items: center; gap: 8px; margin-inline-end: -10px }
html body .ps-a11y-icon-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--on-dark); cursor: pointer }
html body .ps-a11y-icon-btn:hover { background: rgba(255,255,255,.1) }
html body .ps-a11y-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px 16px; scrollbar-width: thin }
html body .ps-a11y-section-label { margin: 0 0 8px 2px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink) }
html body .ps-a11y-count-badge { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: 6px; width: 18px; height: 18px; border-radius: 9px; background: var(--ink); color: var(--on-dark); font-size: .625rem; font-weight: 700; vertical-align: middle }
html body .ps-a11y-profile-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; margin-bottom: 6px; border-radius: var(--radius-sm); background: rgba(32,32,32,.05) }
html body .ps-a11y-profile-bar span { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .8125rem; color: var(--ink) }
html body .ps-a11y-toggle { position: relative; display: inline-flex; align-items: center; width: 40px; height: 22px; flex: none; border-radius: 11px; padding: 2px; background: rgba(32,32,32,.14); border: none; cursor: pointer; transition: background-color .2s }
html body .ps-a11y-toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%) }
html body .ps-a11y-toggle.on { background: var(--ink) }
html body .ps-a11y-toggle-knob { display: block; width: 18px; height: 18px; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.15); transform: translateX(0); transition: transform .2s }
html body .ps-a11y-toggle.on .ps-a11y-toggle-knob { transform: translateX(18px) }
html body .ps-a11y-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px }
html body .ps-a11y-profile-pill { display: flex; align-items: center; gap: 9px; padding: 14px; border-radius: var(--radius-md); cursor: pointer; border: 1.5px solid rgba(32,32,32,.1); background: var(--surface); color: var(--ink); text-align: start; transition: border-color .15s,background-color .15s,color .15s }
html body .ps-a11y-profile-pill:hover { border-color: rgba(32,32,32,.25) }
html body .ps-a11y-profile-pill.active { border-color: var(--ink); background: var(--ink); color: var(--on-dark) }
html body .ps-a11y-profile-pill .icon { opacity: .55; flex: none; display: flex }
html body .ps-a11y-profile-pill.active .icon { opacity: .9 }
html body .ps-a11y-profile-pill .label { flex: 1; font-weight: 600; font-size: .875rem }
html body .ps-a11y-profile-pill .check { opacity: .65; display: flex }
html body .ps-a11y-divider { height: 1px; background: rgba(32,32,32,.08); margin-bottom: 10px }
html body .ps-a11y-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(8rem,1fr)); gap: 8px }
html body .ps-a11y-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 158px; border-radius: 14px; border: 2px solid transparent; background: var(--surface); padding: 10px 6px; cursor: pointer; box-shadow: none; transition: border-color .2s,box-shadow .2s }
html body .ps-a11y-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,.05) }
html body .ps-a11y-card.active { border-color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08) }
html body .ps-a11y-card-check { position: absolute; top: 5px; right: 5px; color: var(--ink); display: flex }
html body .ps-a11y-card .icon { color: rgba(32,32,32,.45); transition: color .15s; display: flex }
html body .ps-a11y-card:hover .icon { color: rgba(32,32,32,.65) }
html body .ps-a11y-card.active .icon { color: var(--ink) }
html body .ps-a11y-card .label { font-weight: 600; font-size: .8125rem; text-align: center; line-height: 1.25; color: rgba(32,32,32,.65); transition: color .15s }
html body .ps-a11y-card:hover .label { color: rgba(32,32,32,.8) }
html body .ps-a11y-card.active .label { color: var(--ink) }
html body .ps-a11y-card .level-label { min-height: .8125rem; font-weight: 700; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: transparent }
html body .ps-a11y-card.active .level-label { color: var(--ink) }
html body .ps-a11y-card .chip { margin-top: 2px; padding: 3px 8px; border-radius: 99px; background: rgba(32,32,32,.08); color: rgba(32,32,32,.78); font-weight: 700; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase }
html body .ps-a11y-card.active .chip { background: var(--ink); color: var(--on-dark) }
html body .ps-a11y-levelbar { display: flex; align-items: center; gap: 2px; width: 100% }
html body .ps-a11y-levelbar span { height: 4px; flex: 1; border-radius: 2px; background: rgba(32,32,32,.14) }
html body .ps-a11y-levelbar span.filled { background: var(--ink) }
html body .ps-a11y-stepper { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 44px }
html body .ps-a11y-stepper button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); border: none; background: rgba(32,32,32,.08); color: rgba(32,32,32,.6); cursor: pointer }
html body .ps-a11y-stepper button:disabled { background: rgba(32,32,32,.04); color: rgba(32,32,32,.18); cursor: default }
html body .ps-a11y-stepper strong { min-width: 18px; text-align: center; font-size: .75rem; font-weight: 700; color: var(--ink) }
html body .ps-a11y-foot { flex: 0 0 auto; border-top: 1px solid rgba(32,32,32,.08); padding: 2px 16px; display: flex; justify-content: center }
html body .ps-a11y-reset { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: .75rem; color: rgba(32,32,32,.6); background: transparent; border: none; cursor: pointer; border-radius: var(--radius-sm) }
html body .ps-a11y-reset:hover { background: rgba(32,32,32,.05) }
html body .ps-a11y-reset:hover { color: var(--ink) }
html body .ps-a11y-toast { position: absolute; left: 12px; right: 12px; bottom: 48px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--ink); color: #fbfbfb; font-size: .75rem; text-align: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s,transform .18s }
html body .ps-a11y-toast.show { opacity: 1; transform: translateY(0) }
html body .ps-a11y-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

/* 30 Contact cards | Contact */
.contact-cards { --c-pad: 24px; display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; margin: 40px 0 0 }
.c-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; box-sizing: border-box; padding: var(--c-pad); border: 0; border-radius: var(--radius-xl); background: var(--c-tint,#f4f5f7); color: var(--ink); text-decoration: none; transition: transform 200ms ease,box-shadow 200ms ease }
a.c-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(0,0,0,.22) }
a.c-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.c-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: var(--radius-lg); background: var(--c-chip,#fff); color: var(--c-ink,var(--ink)) }
.c-card__icon svg { width: 28px; height: 28px; display: block }
.c-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100% }
.c-card__label { font-size: .75rem }
.c-card__value { line-height: 1.35; color: var(--ink); overflow-wrap: anywhere }
.c-card__note { margin-top: 2px; font-size: .875rem; line-height: 1.45 }
.c-card__go { position: absolute; top: var(--c-pad); inset-inline-end: var(--c-pad); color: rgba(32,32,32,.4); transition: color 200ms ease }
a.c-card:hover .c-card__go { color: var(--ink) }
.c-card--mail { --c-tint: #eef3ff; --c-chip: #fff; --c-ink: #2f5fd4 }
.c-card--phone { --c-tint: #ecf8f0; --c-chip: #fff; --c-ink: #2c8a52 }
.c-card--place { --c-tint: #fff4e8; --c-chip: #fff; --c-ink: #bf7018 }
.c-card--network { --c-tint: #f0efff; --c-chip: #fff; --c-ink: #5148cc }
.c-card--cv { --c-tint: #f6eeff; --c-chip: #fff; --c-ink: #7a3fbd }
.c-card--mentor { --c-tint: #eaf7f5; --c-chip: #fff; --c-ink: #0f7f74 }
.call-band { padding-block: 56px 88px }
.call-card { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border: 0; border-radius: 24px; background: #f1f2f5 }
.call-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: var(--radius-lg); background: var(--surface); color: #b0692a }
.call-card__icon svg { width: 28px; height: 28px; display: block }
.call-card__title { margin: 0; line-height: 1.25; color: var(--ink) }
.call-card__text { margin: 0; max-width: 56ch; font-size: 1rem; line-height: 1.55 }
@media (max-width:560px) {
  .contact-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 32px }
  .call-band { padding-block: 40px 64px }
  .call-card { padding: 24px }
}
@media (prefers-reduced-motion:reduce) {
  a.c-card:hover { transform: none }
}

/* 31 CV download menu | Contact */
.ps-cv { --ps-cv-ink: var(--ink); --ps-cv-surface: #ffffff; --ps-cv-line: rgba(32,32,32,.14); --ps-cv-muted: rgba(32,32,32,.62); --ps-cv-wash: rgba(32,32,32,.06); position: relative; display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%; margin-inline-end: 14px }
.ps-cv__group { display: inline-flex; align-items: stretch; max-width: 100% }
.ps-cv--ready .ps-cv__group .ps-cv__main { border-start-end-radius: 0; border-end-end-radius: 0 }
.ps-cv--ready .ps-cv__group .ps-cv__toggle { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; border-inline-start-color: transparent }
.ps-cv .ps-cv__group .ps-cv__toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; padding-inline: 0; cursor: pointer }
.ps-cv .ps-cv__group .ps-cv__toggle::before { content: ""; position: absolute; top: 50%; inset-inline-end: -6px; transform: translateY(-50%); width: 44px; height: 44px }
.ps-cv__chevron { width: 18px; height: 18px; display: block; transition: transform 200ms ease }
.ps-cv--open .ps-cv__chevron { transform: rotate(180deg) }
.ps-cv__menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 60; box-sizing: border-box; min-width: 244px; max-width: calc(100vw - 32px); padding: 6px; display: flex; flex-direction: column; gap: 8px; background: var(--ps-cv-surface); border: 1px solid var(--ps-cv-line); border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0,0,0,.05),0 10px 24px -8px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease,transform 180ms ease,visibility 0s linear 180ms }
.ps-cv--open .ps-cv__menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 180ms ease,transform 180ms ease,visibility 0s }
.ps-cv__item { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 44px; padding: 7px 12px; border-radius: 8px; color: var(--ps-cv-ink); text-decoration: none; transition: background-color 150ms ease }
.ps-cv__item:hover, .ps-cv__item:focus-visible { background-color: var(--ps-cv-wash) }
.ps-cv__item:focus-visible { outline: 2px solid var(--ps-cv-ink); outline-offset: -2px }
.ps-cv__item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.ps-cv__item-label { font-size: .9375rem; font-weight: 600; line-height: 1.25 }
.ps-cv__item-hint { font-size: .75rem; line-height: 1.3; color: var(--ps-cv-muted) }
.ps-cv__fallback { display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: 12px; padding: 0 4px; color: var(--ps-cv-ink); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.ps-cv__fallback:focus-visible { outline: 2px solid var(--ps-cv-ink); outline-offset: 2px; border-radius: 6px }
.ps-cv:not(.ps-cv--ready) .ps-cv__group .ps-cv__toggle { display: none }
.ps-cv--ready .ps-cv__fallback { display: none }
@media (max-width:420px) {
  .ps-cv__menu { min-width: min(244px,calc(100vw - 32px)) }
}
@media (prefers-reduced-motion:reduce) {
  .ps-cv__menu { transform: none }
  .ps-cv--open .ps-cv__menu { transform: none }
  .ps-cv--open .ps-cv__chevron { transform: rotate(180deg) }
}