/* DESORDEN: shared editorial rhythm, using the current HOME palette and scale. */
:root{
  --display:clamp(40px,10vw,76px);
  --heading:clamp(28px,5vw,44px);
  --subheading:clamp(24px,4vw,32px);
  --copy:clamp(17.5px,1.5vw,20px);
  --small:clamp(13px,1.05vw,14px);
  --measure:660px;
  --editorial-space:clamp(32px,4vw,48px);
}

/* Page introductions share one hierarchy; the HOME hero keeps its composition. */
body .shell .page-hero{padding-block:max(40px,env(safe-area-inset-top)) var(--editorial-space)}
body .page-hero .desorden-label{margin-block:16px 0}
body .page-hero .back-home+.desorden-label{margin-top:24px}
body .shell .page-hero .display{
  max-width:900px;
  margin-top:20px;
  font:var(--display)/1.02 var(--anton);
  letter-spacing:-.01em;
  text-transform:uppercase;
  overflow-wrap:break-word;
}
body .page-hero .lead{max-width:var(--measure);margin-block:20px 0}
body .page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:20px}
.display{text-transform:uppercase}

/* Editorial sections, including services that previously fell back to browser H2 styles. */
body .case-detail{padding-block:var(--editorial-space)}
body .case-detail .inner{max-width:none}
body .case-detail h2{
  max-width:26ch;
  margin:12px 0 16px;
  color:var(--o);
  font:var(--heading)/1.1 var(--anton);
  text-transform:uppercase;
  overflow-wrap:break-word;
}
body .shell .service-item h3,body .shell .offer h3,body .shell .product-grid h3{
  font:var(--subheading)/1.12 var(--anton);
  text-transform:uppercase;
}
body .shell .service-faq-item h3{font:24px/1.2 var(--anton)}
body .case-detail p,body .shell .service-copy,body .shell .service-item p,body .shell .service-faq p{
  max-width:var(--measure);
  color:var(--g);
  font-size:var(--copy);
  line-height:1.65;
}
body .case-detail p{margin-block:0}
body .case-detail p+p{margin-top:12px}
body .shell .service-faq p{margin-top:12px}
.lead{font-size:var(--copy);line-height:1.65}
body .desorden-label,body .case-kicker,body .case-meta,body .work-meta{
  font:var(--small)/1.55 var(--meta);
  letter-spacing:.07em;
  text-transform:uppercase;
}
body .case-meta{gap:8px 20px;margin-top:20px}
body .shell .case-media figcaption{margin-top:14px;color:var(--g);font:var(--small)/1.55 var(--meta)}

/* The same text CTA and chevron language across project and service links. */
.submit,.channel,.desorden-action,.case-link,body .shell .service-work figcaption a{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:44px;max-width:100%;padding:6px 0;
  border:0;border-radius:0;background:transparent;color:var(--o);
  font:15px/1.35 var(--anton);letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;
}
.case-link{font-size:15px!important}
.back-home{font:13px/1.55 var(--meta);font-size:13px!important;letter-spacing:.07em}
.submit:active,.channel:active,.desorden-action:active,.case-link:active,
.case-link:hover,body .shell .service-work figcaption a:hover{color:var(--w)}
.submit span[aria-hidden],.desorden-action span[aria-hidden]{flex:none}
body .contact .channels{gap:12px 24px;margin-block:24px 0}
body.case-page .contact{padding-top:var(--space)}

/* One footer rhythm, retaining the links required by each page. */
body footer,body .shell .service-footer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 24px;margin-top:32px;padding-block:18px max(18px,env(safe-area-inset-bottom));
  border:0;color:var(--g);font:13px/1.55 Arial,sans-serif;text-align:left;
}
body .shell .service-footer{padding-inline:var(--gutter)}
body footer .legal-links,body .shell .service-footer nav{display:flex;flex-wrap:wrap;gap:0 20px}
body footer .legal-links a,body .shell .service-footer .legal-links a{min-height:44px;color:var(--o);font-size:13px}
body .shell .service-footer .service-footer-links{flex-basis:100%;margin:0}
body footer>.back-home,body footer>span .back-home{font-size:13px!important}
@media(max-width:699px){
  body footer,body .shell .service-footer{flex-direction:column;align-items:flex-start}
}

/* Legal copy retains a readable text column instead of portfolio proportions. */
body.legal-page .case-detail .inner{max-width:820px}
body.legal-page .case-detail strong{color:var(--w)}
body.legal-page .contact{padding-top:var(--editorial-space)}