/* ClarityPOD composition: a local, role-based visual system, 6 November 2026.
   The existing header container, approved copy and native artwork remain the anchors. */
/* Alex explicitly requested right-aligned header navigation for this pass. */
.site-header .desktop-nav{margin-left:auto;width:auto}
#main[data-okto-system]{
  --okto-edge:var(--gutter);--section-space:64px;
  --clarity-chapter:56px;--clarity-subsection:36px;--clarity-small-title:24px;
  --okto-paper:#fff;--paper:#fff;--ink:var(--okto-ink);--graphite:var(--okto-ink);
  --steel:var(--okto-muted);--line:var(--okto-line);--brand-gradient:var(--okto-context-gradient);
  --okto-focus-gap:#fff;
  background:#fff;color:var(--okto-ink);font-family:var(--okto-font);font-weight:200;
}
#main h2.okto-type-chapter{font-size:var(--clarity-chapter);line-height:1.06}
#main h3.okto-type-subsection{font-size:var(--clarity-subsection);line-height:1.14}
#main :is(h1,h2,h3){text-wrap:balance}
#main .hero{padding-block:clamp(48px,7svh,88px) 72px}
#main .hero-grid,.product-proof-intro,#main .sprint-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap);align-items:center}
#main .hero-copy{gap:40px;min-width:0}
.product-arrival .okto-product-descriptor{margin-top:0}
/* OKTObrand opening scale; Ink on white, with the canonical Brand accent. */
#main .hero h1.okto-type-chapter{font-size:clamp(60px,7.77778vw,112px);line-height:.96;letter-spacing:-.04em;color:var(--okto-ink)}
#main .hero h1 .clarity-heading-accent{background:var(--okto-brand);background-clip:text;-webkit-background-clip:text;color:transparent}
#main .hero-promise{gap:32px}
#main .hero-promise>p{max-width:48ch}
#main .hero-grid>.clarity-lens-stage{width:100%;max-width:700px;justify-self:center}
#main .okto-lens--value .clarity-lens-word{font-size:6.5cqw;font-weight:400;letter-spacing:-.025em;line-height:1.15;width:auto}
#main .client-strip-wrap{margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
#main .client-strip-wrap>.motion-toggle{top:-20px}
#main .motion-toggle{position:absolute;padding:8px 12px;opacity:1;background:#fff}

/* Verbatim quotations keep their own carousel; content determines card height. */
#main .testimonials{--quote-width:clamp(360px,36vw,560px);--quote-gap:48px;padding-block:56px 64px;background:#fff;border-bottom:1px solid var(--line)}
#main .testimonials>.motion-toggle{top:8px;right:var(--gutter)}
#main .testimonial-card{padding:24px 0;background:transparent;border-radius:0;gap:24px;border-top:1px solid var(--line)}
#main .testimonial-header{height:auto;min-height:48px}
#main .testimonial-person{width:auto;min-width:0;flex:1}
#main .testimonial-person p{font:200 14px/20px var(--okto-font);color:var(--okto-muted)}
#main .testimonial-person p:first-child{font-weight:400;color:var(--ink)}
#main .testimonial-card blockquote{font:200 21px/30px var(--okto-font);letter-spacing:-.02em;min-height:0;flex:1;color:var(--ink)}
#main .testimonial-rule{display:none}

/* One overview, then the four original examples. No repeated illustration. */
.product-proof-intro{align-items:start}
#main .output-index{list-style:none;margin:0;padding:0}
#main .output-index li{border-top:1px solid var(--line)}
#main .output-index a{display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:16px;align-items:baseline;padding:18px 0;min-height:56px;font:200 21px/28px var(--okto-font);letter-spacing:-.02em}
#main .output-index a:hover>span:nth-child(2){text-decoration:underline;text-underline-offset:5px}
#main .output-index-number{font:400 14px/20px var(--okto-font);color:var(--steel)}
#main .output-index-arrow{font-size:20px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#main .output-index a:hover .output-index-arrow{transform:translateY(3px)}
#main .deliverable-list{margin-top:0}
#main .deliverable,#main .deliverable.image-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap);align-items:center;padding-block:64px;scroll-margin-top:32px}
#main .deliverable-copy{max-width:48ch;min-width:0}
#main .deliverable-number{display:block;margin-bottom:20px;color:var(--steel)}
#main .deliverable-copy p{margin-top:24px}
#main .artwork-open-label{min-height:44px;display:flex;align-items:center;position:relative;top:auto;margin-top:12px;font:400 16px/24px var(--okto-font);color:var(--ink)}
#main .artwork-open:hover .artwork-open-label{text-decoration-thickness:2px}
#main .asset-inventory{max-width:88ch;padding-top:24px;border-top:1px solid var(--line);color:var(--steel)}
#main .scope-note{max-width:88ch;margin-top:16px;color:var(--steel)}

#main .sprint-intro{align-items:start}
#main .sprint-intro>div:first-child>p{max-width:48ch;margin-top:24px}
#main .sprint-collaboration h3{margin-top:24px;font-size:32px}
#main .sprint-collaboration p{max-width:40ch;margin-top:24px}
#main .gradient-rule{height:1px;background:var(--okto-context-gradient)}
#main .phases{gap:40px;margin-top:48px}
#main .phase-copy{margin-top:24px}
#main .phase h3{font-size:var(--clarity-small-title);line-height:1.2}
#main .phase p{margin-top:16px}

#main .work h2{max-width:24ch;margin-bottom:32px}
#main .case-tabs{gap:32px;align-items:stretch;padding-bottom:12px;margin-bottom:32px;border-bottom:1px solid var(--line)}
#main .case-tabs button{width:auto;min-width:0;padding-inline:0}
#main .case-panel{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center}
#main .case-copy{max-width:48ch}
#main .case-copy p{margin-top:24px}
#main .case-art{background:#fff}

/* Optional services and questions use the quieter subsection/title roles. */
#main .continuation h2,#main .faq h2{font-size:var(--clarity-subsection)}
#main .continuation-intro{max-width:58ch;margin-top:24px}
#main .continuation-grid{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:32px}
#main .continuation-grid article{padding-top:20px}
#main .continuation-grid h3{font-size:var(--clarity-small-title);line-height:1.2;font-weight:700}
#main .continuation-grid h3 a{display:inline-flex;align-items:center;min-height:44px;padding:0;font:inherit;letter-spacing:inherit}
#main .continuation-grid p{margin-top:16px}
#main .faq h2{margin-bottom:32px}
#main .faq article{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--okto-grid-gap);align-items:start;padding-block:28px;border-top:1px solid var(--line)}
#main .faq article+article{margin-top:0}
#main .faq h3{font-size:var(--clarity-small-title);line-height:1.25;max-width:28ch}
#main .faq p{margin:0;max-width:48ch}
#main .contact .container{gap:24px;align-items:flex-start;text-align:left}
#main .contact .gradient-rule{margin-bottom:16px}
#main .contact p{max-width:48ch}
.site-footer[data-okto-system]{padding-inline:var(--gutter);padding-block:64px 32px}
.site-footer[data-okto-system]>.container{width:100%}
.site-footer[data-okto-system] .footer-brand{font-size:calc(100cqw * .2153173);line-height:1.08;letter-spacing:-.04em;color:var(--okto-paper)}
.site-footer[data-okto-system] .footer-brand .okto-product-prefix{color:inherit}
.site-footer[data-okto-system] .footer-legal{grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer[data-okto-system] .footer-legal a{display:inline-flex;min-height:44px;align-items:center}
.site-footer[data-okto-system] .footer-legal button{text-align:left;justify-content:flex-start}
#artwork-dialog[data-okto-system],#cookie-dialog[data-okto-system]{--okto-paper:#fff;--paper:#fff;--ink:var(--okto-ink);background:#fff;color:var(--okto-ink)}
#artwork-dialog[data-okto-system] .artwork-dialog-header button{padding:8px 12px}
#artwork-dialog .artwork-dialog-scroll:focus-visible{outline-offset:-3px}
.artwork-dialog-header{align-items:flex-start}
.artwork-dialog-header .artwork-dialog-title{min-width:0;flex:1}
.artwork-dialog-tools{display:flex;gap:8px;flex:none}
.artwork-dialog-tools .okto-control{min-height:44px;white-space:nowrap}
.artwork-dialog-scroll{display:block}

@media(max-width:1100px){
  #main[data-okto-system]{--clarity-chapter:48px;--clarity-subsection:32px}
  #main .hero-copy{gap:32px}
  #main .hero-grid,#main .sprint-intro{grid-template-columns:minmax(0,1fr);gap:40px}
  #main .hero-grid>.clarity-lens-stage{max-width:540px}
  #main .hero h1.okto-type-chapter{font-size:clamp(60px,7.77778vw,88px)}
  #main .case-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main .phases,#main .continuation-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  #main .phase{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
  #main .phase-copy{margin:0}
  #main .phase>.artwork{max-width:360px;width:100%;justify-self:center}
  #main .continuation-grid article{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:32px;align-items:baseline}
  #main .continuation-grid p{margin:0}
}
@media(max-width:900px){
  #main[data-okto-system]{--clarity-chapter:40px;--okto-grid-gap:40px}
  #main .hero{padding-block:48px 56px}
  #main .hero-grid,.product-proof-intro,#main .sprint-intro,#main .case-panel{grid-template-columns:minmax(0,1fr);gap:40px}
  #main .hero-grid>.clarity-lens-stage{max-width:540px}
  .product-arrival .okto-product-descriptor{margin-top:0}
  #main .client-strip-wrap{margin-top:40px}
  #main .testimonials{--quote-width:360px;--quote-gap:32px;padding-block:48px}
  #main .deliverable,#main .deliverable.image-left{display:flex;flex-direction:column;gap:32px;padding-block:48px;align-items:stretch}
  #main .deliverable-copy{max-width:58ch}
  #main .artwork-open{max-width:640px}
  #main .case-tabs{gap:16px 24px}
  #main .case-panel{gap:32px}
  #main .case-copy{max-width:58ch}
  #main .faq article{gap:32px}
  #main .contact p{max-width:100%}
  .site-footer[data-okto-system] .footer-legal{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:700px){
  #main .hero h1.okto-type-chapter{font-size:clamp(36px,11.8vw,68px);line-height:.98}
  #main .faq article{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media(max-width:600px){
  #main[data-okto-system]{--section-space:48px;--clarity-chapter:32px;--clarity-subsection:28px;--clarity-small-title:22px}
  #main .hero-grid{gap:24px}
  #main .hero-copy{gap:28px}
  #main .hero-promise{gap:24px}
  #main .hero-grid>.clarity-lens-stage{width:calc(100% + 24px);margin-inline:-12px}
  #main .testimonials{--quote-width:calc(100vw - 64px);--quote-gap:32px}
  #main .testimonial-header{gap:12px}
  #main .testimonial-card blockquote{font-size:20px;line-height:28px}
  #main .testimonial-logo{width:80px;transform:scale(.83);transform-origin:right center}
  #main .output-index a{font-size:20px;line-height:28px;grid-template-columns:24px minmax(0,1fr) 16px;gap:12px;padding-block:16px}
  #main .phase,#main .continuation-grid article{grid-template-columns:minmax(0,1fr);gap:16px}
  #main .phase>.artwork{max-width:320px}
  #main .sprint-collaboration h3{font-size:var(--clarity-subsection)}
  #main .case-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main .faq article{padding-block:24px}
  .site-footer[data-okto-system] .footer-legal{grid-template-columns:1fr}
  .artwork-dialog-header{flex-wrap:wrap;gap:12px}
  .artwork-dialog-header .artwork-dialog-title{flex-basis:100%}
  .artwork-dialog-tools{width:100%;justify-content:space-between}
  .artwork-dialog-scroll{max-height:calc(100svh - 210px)}
}
@media(max-width:360px){
  #main[data-okto-system]{--clarity-chapter:28px;--clarity-subsection:26px}
}
@media(prefers-reduced-motion:reduce){#main .output-index-arrow,#main .motion-toggle{transition:none}}