/* ClarityPOD / Desktop / Structure and content 04. Original tokens and artwork. */
.brandmark{font-size:40.896px;line-height:57.745px}
.brandmark-pod{font-weight:800;background:linear-gradient(90deg,#ffd400 0%,#ff7300 36%,#ff1e1e 62%,#ff1e1e 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-eyebrow{font-size:14px;line-height:20px;letter-spacing:.16em;color:var(--steel)}
.hero-art{width:100%}
.testimonials{padding-block:112px}
.deliverable.image-left>.artwork-open{grid-column:1;grid-row:1}
.artwork-open{display:block;position:relative;padding:0;width:100%;text-align:left;justify-self:center;cursor:zoom-in}
.artwork-open-label{display:block;position:absolute;top:100%;left:0;margin-top:16px;font-size:14px;line-height:20px;color:var(--steel);text-decoration:underline;text-underline-offset:4px}
.artwork-open:hover .artwork-open-label{color:var(--ink)}
.scope-note{margin-top:96px}
.continuation-grid{grid-template-columns:minmax(0,592px);gap:32px}
.continuation-grid a:hover{text-decoration:underline;text-underline-offset:6px}
.footer-brand{font-size:calc(100cqw * .2153173);line-height:1.4115}
#artwork-dialog{width:min(1000px,calc(100vw - 48px));max-width:none;max-height:calc(100svh - 48px);padding:24px;overflow:hidden}
.artwork-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.artwork-dialog-header h2{font-size:20px;line-height:26px;font-weight:400;letter-spacing:-.02em;max-width:650px}
.artwork-dialog-header button{font-size:15px;line-height:20px;text-decoration:underline;text-underline-offset:4px;padding:8px;flex:none}
.artwork-dialog-scroll{width:100%;max-height:calc(100svh - 180px);overflow:auto;overscroll-behavior:contain;background:var(--paper);touch-action:pan-x pan-y}
.artwork-dialog-stage{position:relative;max-width:none;flex:none}
.artwork-dialog-stage>.native-art{position:absolute;left:0;top:0;transform-origin:0 0}

@media(min-width:901px) and (max-width:1200px){
  .hero h1:not(.okto-type-chapter){font-size:clamp(56px,6.67vw,80px)}
}
@media(max-width:900px){
  .brandmark{font-size:32.7168px;line-height:46.5px}
  .hero-promise>p:not(.okto-type-body){font-weight:400}
  .hero-art{max-width:504px}
  .hero-eyebrow{font-size:12px;letter-spacing:.12em}
  .testimonials{padding-block:64px}
  .scope-note{margin-top:48px}
  .phase>.artwork{width:100%;max-width:384px}
  .phase h3:not(.okto-type-subsection){min-height:0}
  .deliverable{padding-bottom:88px}
  .continuation-grid{grid-template-columns:minmax(0,1fr)}
  .footer-brand{font-size:calc(100cqw * .2153173);line-height:1.4115}
}
@media(max-width:640px){
  #artwork-dialog{width:calc(100vw - 24px);padding:16px;max-height:calc(100svh - 24px)}
  .artwork-dialog-header{margin-bottom:16px;gap:16px;align-items:start}
  .artwork-dialog-header h2{font-size:18px;line-height:24px}
}