/* Homepage polish pass, Oct 2026
   Method: unslop by Damir Sokolovsky (@heydamir, CC BY 4.0), https://github.com/heydamir/unslop
   Loaded on index.html only, before ps-a11y.css so the accessibility toolbox still wins.
   Remove the <link> to undo everything in this file. */

:root{
  --u-text-1:#202020;        /* primary text on light surfaces */
  --u-text-2:#686868;        /* secondary text on light surfaces */
  --u-text-1-dark:#fff;      /* primary text on the ink panel */
  --u-text-2-dark:#a8a8a8;   /* secondary text on the ink panel */
  --u-section:96px;          /* between sections */
  --u-head:32px;             /* from a section heading to its content */
  --u-ease:cubic-bezier(.22,1,.36,1);
}
@media (max-width:760px){:root{--u-section:64px;--u-head:24px}}

/* 1. Spacing: one rhythm between sections, one gap from heading to content, 4px grid */
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 body .selected.wrap > h2{margin:0 0 var(--u-head) !important}
html body .selected .work-item{margin:0 0 32px !important}
html body .selected .work-item:last-child{margin-bottom:0 !important}
html body .evidence-work-item > a.ps-spot{column-gap:32px !important;row-gap:32px !important}
html body .evidence-work-copy .project-company{margin:0 0 16px !important;row-gap:12px !important;column-gap:12px !important}
html body .evidence-work-copy h3{margin:0 0 12px !important}
html 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 body .pg-canvas .pg-folders{padding-top:40px !important;row-gap:48px !important;column-gap:40px !important}
  html body .pg-canvas .pg-folder-front{padding:16px 20px !important}
}
html body .pg-folder-label small{margin-top:8px !important}
html 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 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 body .selected .work-item{margin-bottom:24px !important}
  html 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}
}

/* 2. Color: three text roles, greyscale as decided on 16 Sep */
html body .editorial-hero .editorial-summary,
html body .editorial-hero .editorial-mobile-bio,
html body .evidence-work-copy .project-subtitle,
html body .ps-builder-head p,
html body .delivery-points p,
html body .ps-feature-sub{color:var(--u-text-2) !important}
html body .editorial-hero strong,
html body .evidence-work-copy .evidence-read,
html body .pg-folder-label,
html 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(--u-text-1) !important}
html body .nda-preview .ps-feature > h2{color:var(--u-text-1-dark) !important}
html body .nda-preview .ps-feature{--pf-fg:#fff;--pf-muted:#a8a8a8}
html body .nda-preview .ps-feature-copy p{color:var(--u-text-2-dark) !important}

/* 5. Type: one scale. Desktop 12 14 16 18 20 26 36 40 48. Mobile 12 14 16 18 22 28 30 32.
      The hero headline is always the largest text on the page. */
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:18px !important}
html body .editorial-hero .button{font-size:16px !important;padding:0 16px !important}
html body .selected.wrap > h2,
html body .ps-builder-head h2,
html body .delivery-title h2{font-size:36px !important;line-height:1.15 !important;letter-spacing:-.02em !important}
html body .evidence-work-copy h3{letter-spacing:-.01em !important}
html body .ps-builder-head p{font-size:18px !important}
html body .pg-folder-label{font-size:26px !important;font-weight:500 !important;letter-spacing:-.01em !important}
html body .pg-folder-label small{font-size:12px !important;font-weight:500 !important;letter-spacing:0 !important}
html body .nda-preview .ps-feature > h2{font-size:40px !important;line-height:1.1 !important;letter-spacing:-.02em !important}
html body .ps-feature-name{font-size:26px !important}
html body .ps-feature-sub{font-size:14px !important}
html body .ps-nda-name{font-size:16px !important}
@media (max-width:760px){
  html body .editorial-hero h1{font-size:32px !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:28px !important}
  html body .nda-preview .ps-feature > h2{font-size:30px !important}
  html body .evidence-work-copy h3,
  html body .pg-folder-label,
  html body .ps-feature-name{font-size:22px !important}
  html body .ps-builder-head p,
  html body .ps-feature-copy p{font-size:16px !important}
}

/* 6. Layout: the mobile hero gets its CV and LinkedIn buttons back */
@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;flex:1 1 auto;justify-content:center;white-space:nowrap}
}

/* 7. Details: radius scale 4 / 10 / 16 / 24, inner radius = outer minus padding */
html body .evidence-work-image{border-radius:4px !important}
html body .pg-folder-link{border-radius:16px !important}
html body .ps-builder .pg-canvas{border-radius:16px !important}
html body .nda-preview .ps-feature{border-radius:24px !important}
html body .ps-nda-link{border-radius:16px !important}

/* 9. Motion: the product list is static, hover moves stay within a few pixels */
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}
}
/* Hover caps and easing now live in ps-ui.css so every page shares them */

/* Heading to content is 32px (24px on phones) in every section, including the ID-scoped work list and the ink panel */
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}