/* =========================================================
   Sonke Design — UX / information architecture layer
   ========================================================= */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }

.page-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}
.page-subnav::-webkit-scrollbar { display: none; }
.page-subnav a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.page-subnav a:hover,
.page-subnav a:focus-visible { background: var(--color-text); color: var(--color-bg); }

.ux-routes { padding-top: clamp(64px, 8vw, 118px); }
.ux-routes__head { display:grid; grid-template-columns: .7fr 1.5fr; gap: 40px; align-items:end; margin-bottom: clamp(34px,5vw,64px); }
.ux-routes__head .display { margin:0; max-width: 760px; }
.ux-route-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top:1px solid var(--color-border); border-left:1px solid var(--color-border); }
.ux-route-card { min-height: 320px; padding: clamp(26px,3.3vw,48px); border-right:1px solid var(--color-border); border-bottom:1px solid var(--color-border); color:inherit; text-decoration:none; display:flex; flex-direction:column; transition: background .25s ease, transform .25s ease; }
.ux-route-card:hover { background: var(--color-bg-secondary); }
.ux-route-card > span { color:var(--color-accent-dark); font-size:10px; font-weight:600; letter-spacing:.14em; }
.ux-route-card h3 { margin:48px 0 16px; font-family:var(--serif); font-size:clamp(31px,2.9vw,44px); font-weight:400; line-height:.96; letter-spacing:-.035em; }
.ux-route-card p { margin:0 0 28px; color:var(--color-text-muted); font-size:14px; line-height:1.7; }
.ux-route-card strong { margin-top:auto; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

.ux-studio-teaser__grid, .studio-approach__grid, .ux-context__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,8vw,120px); align-items:start; }
.ux-studio-teaser .display { margin-top:0; }
.ux-studio-teaser__grid > div:last-child { max-width:610px; justify-self:end; }

.studio-approach { padding-bottom: clamp(56px,7vw,100px); }
.studio-approach .display { margin-top:0; max-width:780px; }
.studio-approach .lead { max-width:720px; }
.studio-process { background:var(--color-bg); }
.studio-process__head { display:grid; grid-template-columns:.7fr 1.4fr; gap:40px; margin-bottom:clamp(44px,6vw,80px); }
.studio-process__head .display { margin:0 0 20px; }
.studio-process__head .lead { max-width:760px; }

.developer-workflow__head { max-width:940px; margin-bottom:clamp(42px,6vw,76px); }
.developer-workflow__head .lead { max-width:760px; }

.ux-context { border-top:1px solid var(--color-border); }
.ux-context h2 { margin:0 0 16px; font-family:var(--serif); font-size:clamp(38px,4vw,58px); font-weight:400; line-height:.98; letter-spacing:-.04em; }
.ux-context p { max-width:650px; color:var(--color-text-muted); line-height:1.7; }

.ux-moved-note { padding:10px 0; background:var(--color-text); color:var(--color-bg); }
.ux-moved-note p { margin:0; font-size:11px; letter-spacing:.03em; }
.ux-moved-note a { color:inherit; }

/* Results page: filters work as navigation, not decoration. */
.filter-bar { position:sticky; top:74px; z-index:5; padding-top:12px; padding-bottom:12px; background:var(--color-bg-secondary); }

@media (max-width: 900px) {
  .ux-routes__head, .ux-studio-teaser__grid, .studio-approach__grid, .studio-process__head, .ux-context__grid { grid-template-columns:1fr; gap:24px; }
  .ux-route-grid { grid-template-columns:1fr; }
  .ux-route-card { min-height:240px; }
  .ux-route-card h3 { margin-top:30px; }
  .ux-studio-teaser__grid > div:last-child { justify-self:start; }
  .filter-bar { top:62px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .filter-bar::-webkit-scrollbar { display:none; }
  .filter { flex:0 0 auto; }
}
@media (max-width: 560px) {
  .page-subnav { margin-left:16px; margin-right:16px; width:auto; }
  .page-subnav a { font-size:10px; padding:9px 11px; }
}

/* v5: content ownership / de-duplication */
.studio-principles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.studio-principles__grid article { min-height: 300px; }
.studio-principles__grid h3 { margin-top: 54px; }
.studio-principles__grid p { margin: 18px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.7; }
.marketing-proof--teaser .marketing-stats-grid { margin-bottom: clamp(38px, 5vw, 64px); }
@media (max-width: 900px) {
  .studio-principles__grid { grid-template-columns: 1fr; }
  .studio-principles__grid article { min-height: auto; }
  .studio-principles__grid h3 { margin-top: 34px; }
}