/* /assets/okto-system.css */
/* OKTOPODS shared content system v1, 29 October 2026.
   Canonical source: oktopods-relaunch-2026. Copy with sync-design-system.py.
   Opt-in components only. No global element/type resets; the locked header,
   opening and authored case compositions keep their existing styles. */
@font-face{font-family:OktoSystem;src:url('/assets/system/fonts/lausanne-100.woff2') format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:OktoSystem;src:url('/assets/system/fonts/lausanne-200.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:OktoSystem;src:url('/assets/system/fonts/lausanne-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:OktoSystem;src:url('/assets/system/fonts/lausanne-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:OktoSystem;src:url('/assets/system/fonts/lausanne-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{
 --okto-paper:#f8f8f8;--okto-ink:#181b18;--okto-muted:#62665f;--okto-line:#d9dcd5;
 --okto-brand:linear-gradient(90deg,#ffd400,#ff1e1e);
 --okto-tech:linear-gradient(90deg,#00e5ff,#2962ff);
 --okto-creative:linear-gradient(90deg,#6a2bff,#ff2d95);
 --okto-font:OktoSystem,Lausanne,Arial,sans-serif;
 --okto-edge:16px;--okto-grid-gap:clamp(40px,6.667vw,96px);
 --okto-chapter-space:clamp(104px,12svh,176px);--okto-chapter-gap:clamp(48px,6svh,80px);
 --okto-context-gradient:var(--okto-brand);--okto-focus:#181b18;--okto-focus-gap:#f8f8f8;
}
[data-okto-heart=brand]{--okto-context-gradient:var(--okto-brand)}
[data-okto-heart=tech]{--okto-context-gradient:var(--okto-tech)}
[data-okto-heart=creative]{--okto-context-gradient:var(--okto-creative)}
.okto-surface-paper{background:var(--okto-paper);color:var(--okto-ink)}
.okto-surface-dark{--okto-focus:#f8f8f8;--okto-focus-gap:#181b18;background:var(--okto-ink);color:var(--okto-paper)}
.okto-equal-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap)}
.okto-equal-columns>*{min-width:0}
.okto-type-chapter.okto-type-chapter,.okto-type-statement.okto-type-statement,.okto-type-subsection.okto-type-subsection,.okto-type-body.okto-type-body,.okto-type-supporting.okto-type-supporting,.okto-type-caption.okto-type-caption,.okto-type-label.okto-type-label,.okto-type-ui.okto-type-ui{font-family:var(--okto-font)}
.okto-type-chapter.okto-type-chapter{font-size:clamp(45.6px,4.8vw,72px);line-height:1.02;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
.okto-type-statement.okto-type-statement{font-size:clamp(40px,3.35vw,52px);line-height:1.12;font-weight:200;letter-spacing:-.035em;max-width:29ch}
.okto-type-subsection.okto-type-subsection{font-size:36px;line-height:42px;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.okto-type-body.okto-type-body{font-size:21px;line-height:30px;font-weight:200;letter-spacing:-.02em;max-width:58ch}
.okto-type-supporting.okto-type-supporting{font-size:18px;line-height:26px;font-weight:200;letter-spacing:-.01em}
.okto-type-caption.okto-type-caption{font-size:14px;line-height:20px;font-weight:200;letter-spacing:0;color:var(--okto-muted)}
.okto-type-label.okto-type-label{font-size:14px;line-height:20px;font-weight:400;letter-spacing:.15em;text-transform:uppercase}
.okto-type-ui.okto-type-ui{font-size:16px;line-height:20px;font-weight:400;letter-spacing:0}
.okto-product-name.okto-product-name{display:block;margin:0;font-family:var(--okto-font);font-size:clamp(72px,7.778vw,112px);line-height:1.04;letter-spacing:-.04em;font-weight:100;white-space:nowrap;color:var(--okto-ink);text-transform:none}
.okto-product-prefix.okto-product-prefix{font-family:var(--okto-font);font-weight:100;color:var(--okto-ink)}
.okto-product-pod.okto-product-pod{font-family:var(--okto-font);font-weight:800;background:var(--okto-context-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.okto-product-pod.okto-product-pod{display:inline-block;padding-right:.035em;margin-right:-.035em}
.okto-product-name--teaser.okto-product-name--teaser{font-size:clamp(56px,5.556vw,80px)}
.okto-product-name--compact.okto-product-name--compact{font-size:56px}
.okto-product-descriptor.okto-product-descriptor{margin:16px 0 0;font-family:var(--okto-font);font-size:24px;line-height:32px;font-weight:200;letter-spacing:-.015em;color:var(--okto-ink);text-transform:none}
.okto-product-title.okto-product-title{font-family:var(--okto-font);font-size:clamp(45.6px,4.8vw,72px);line-height:1.02;font-weight:700;letter-spacing:-.04em;text-wrap:balance;text-transform:none}
.okto-action,.okto-text-action,.okto-control,.okto-tab{box-sizing:border-box;font-family:var(--okto-font);letter-spacing:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.okto-action.okto-action{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;width:fit-content;max-width:100%;min-height:56px;padding:17px 24px;border:1px solid var(--okto-ink);border-radius:0;background:var(--okto-ink);color:var(--okto-paper);font-size:16px;font-weight:700;line-height:20px;text-transform:uppercase;text-decoration:none;white-space:normal;box-shadow:none;cursor:pointer;transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease}
.okto-action.okto-action:hover{background:#303530;border-color:#303530;color:var(--okto-paper);box-shadow:none;transform:none}
.okto-action.okto-action:active{background:#000;border-color:#000;transform:none}
.okto-action.okto-action--large{min-height:64px;padding-block:21px}
.okto-action.okto-action--inverse{--okto-focus:#f8f8f8;--okto-focus-gap:#181b18;background:var(--okto-paper);border-color:var(--okto-paper);color:var(--okto-ink)}
.okto-action.okto-action--inverse:hover{background:#e7eae4;border-color:#e7eae4;color:var(--okto-ink)}
.okto-action.okto-action--inverse:active{background:#cdd2c9;border-color:#cdd2c9}
.okto-action.okto-action:disabled,.okto-action.okto-action[aria-disabled=true]{background:var(--okto-line);border-color:var(--okto-line);color:var(--okto-muted);cursor:not-allowed}
.okto-action.okto-action--inverse:disabled{background:#3e433c;border-color:#3e433c;color:#a6ada1}
.okto-action :is(svg,img),.okto-text-action svg{width:20px;height:20px;flex:0 0 20px}
.okto-action .button-arrow{font-family:var(--okto-font);font-size:20px;line-height:20px;flex:0 0 20px;color:currentColor;background:none}
.okto-action .okto-icon,.okto-text-action .okto-icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.okto-text-action.okto-text-action{display:inline-flex;align-items:center;gap:20px;min-height:44px;max-width:100%;padding:10px 0;border:0;border-radius:0;background:none;color:inherit;font-size:16px;font-weight:400;line-height:24px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.okto-text-action.okto-text-action:hover{text-decoration-thickness:2px}
.okto-control.okto-control{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:0;font-family:var(--okto-font);font-size:16px;font-weight:400;line-height:24px;cursor:pointer}
.okto-control.okto-control[hidden]{display:none}
.okto-control.okto-control:disabled{cursor:default;opacity:.6}
.okto-control--text.okto-control--text{width:auto;gap:8px;padding-inline:8px;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:5px}
.okto-tab.okto-tab{min-height:44px;padding-block:10px;font-family:var(--okto-font);font-size:16px;line-height:24px;font-weight:400;border-radius:0}
.okto-tab.okto-tab[aria-selected=true]{font-weight:700}
:is(.okto-action,.okto-text-action,.okto-control,.okto-tab,.okto-field):focus-visible{outline:2px solid var(--okto-focus);outline-offset:4px;box-shadow:0 0 0 4px var(--okto-focus-gap)}
.okto-field{font-family:var(--okto-font);font-size:18px;line-height:26px}
.okto-field[aria-invalid=true],.okto-field:user-invalid{border-color:#b02525}
/* Existing glass renderers, shared framing. They sleep offscreen/at rest. */
.okto-lens{position:relative;aspect-ratio:1;width:100%;min-width:0;container-type:inline-size;overflow:hidden;isolation:isolate;background:var(--okto-paper)}
.okto-lens :is(.clarity-lens-word,.brandpod-lens-word){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:baseline;white-space:nowrap;font-family:var(--okto-font);font-size:14.5cqw;font-weight:100;line-height:1;letter-spacing:-.05em;pointer-events:none;color:var(--okto-ink)}
.okto-lens .clarity-lens-word{filter:blur(calc((1 - var(--clarity-focus,0)) * max(7px,2.1cqw)))}
.okto-lens :is(.clarity-lens-word,.brandpod-lens-word)>strong{font-weight:800;background:var(--okto-context-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.okto-lens :is(canvas,.clarity-lens-fallback,.brandpod-lens-fallback){position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.okto-lens canvas{z-index:2}
.okto-lens :is(.clarity-lens-fallback,.brandpod-lens-fallback){z-index:3;object-fit:contain}
.okto-lens[data-state=ready] :is(.clarity-lens-fallback,.brandpod-lens-fallback){visibility:hidden}
@media(max-width:1100px){:root{--okto-grid-gap:48px}.okto-type-chapter.okto-type-chapter,.okto-product-title.okto-product-title{font-size:clamp(42px,4.8vw,56px)}}
@media(max-width:800px){.okto-equal-columns{grid-template-columns:minmax(0,1fr);gap:40px}.okto-lens{max-width:640px;justify-self:center}}
@media(max-width:700px){
 :root{--okto-grid-gap:40px;--okto-chapter-space:96px;--okto-chapter-gap:40px}
 .okto-type-chapter.okto-type-chapter,.okto-product-title.okto-product-title{font-size:clamp(34px,8.72vw,44px);line-height:1.05}
 .okto-type-statement.okto-type-statement{font-size:32px;line-height:1.12}
 .okto-type-subsection.okto-type-subsection{font-size:25px;line-height:31px}
 .okto-type-body.okto-type-body{font-size:20px;line-height:29px}
 .okto-product-name.okto-product-name{font-size:clamp(52px,14.36vw,72px)}
 .okto-product-name--compact.okto-product-name--compact{font-size:48px}
 .okto-product-descriptor.okto-product-descriptor{font-size:20px;line-height:28px}
}
@media(prefers-reduced-motion:reduce){.okto-action.okto-action{transition:none}.okto-lens .clarity-lens-word{filter:none}}

/* Content hierarchy: large chapter messages, tangible outputs and one check.
   These opt-in roles grow with wide reading layouts; utility copy stays compact. */
.okto-copy-lead.okto-copy-lead{font-family:var(--okto-font);font-size:clamp(24px,1.35vw,32px);font-weight:200;line-height:1.38;letter-spacing:-.025em;max-width:44ch}
.okto-type-banner.okto-type-banner{font-family:var(--okto-font);font-size:clamp(64px,7.778vw,144px);line-height:.98;letter-spacing:-.045em;font-weight:700;text-transform:uppercase;text-wrap:balance;margin:0}
.okto-gradient{background:var(--okto-context-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.okto-check.okto-check{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:1.5px;border:0;border-radius:50%;background:var(--okto-context-gradient);box-sizing:border-box}
.okto-check.okto-check>svg{display:block;box-sizing:border-box;width:33px;height:33px;padding:7px;border-radius:50%;background:var(--okto-paper);fill:none;stroke:var(--okto-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.okto-deliverables{width:100%;min-width:0}
.okto-deliverables>h3{font-family:var(--okto-font);font-size:clamp(24px,2vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.025em;margin:0 0 28px}
.okto-deliverables-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--okto-grid-gap);row-gap:0;list-style:none;margin:0;padding:0}
.okto-deliverable.okto-deliverable{display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;align-items:start;padding:28px 0 32px;border-top:1px solid var(--okto-line);min-width:0}
.okto-deliverable h4{font-family:var(--okto-font);font-size:clamp(26px,2vw,36px);font-weight:400;line-height:1.16;letter-spacing:-.03em;margin:0;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.okto-deliverable p{font-family:var(--okto-font);font-size:clamp(20px,1.1vw,26px);font-weight:200;line-height:1.38;letter-spacing:-.015em;margin:12px 0 0;max-width:40ch;color:var(--okto-ink)}
.okto-lens--value :is(.clarity-lens-word,.brandpod-lens-word){font-size:6.5cqw;font-weight:400;letter-spacing:-.025em;line-height:1.15;width:auto}
@media(min-width:1600px){.okto-deliverables--wide .okto-deliverables-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}}
@media(max-width:700px){
 .okto-copy-lead.okto-copy-lead{font-size:22px;line-height:1.35}
 .okto-type-banner.okto-type-banner{font-size:clamp(38px,10.5vw,72px);line-height:1.02;letter-spacing:-.04em;overflow-wrap:break-word}
 .okto-check.okto-check{width:32px;height:32px}.okto-check.okto-check>svg{width:29px;height:29px;padding:6px}
 .okto-deliverables-grid{grid-template-columns:minmax(0,1fr)}
 .okto-deliverables>h3{font-size:25px;margin-bottom:24px}
 .okto-deliverable.okto-deliverable{grid-template-columns:32px minmax(0,1fr);gap:16px;padding:24px 0}
 .okto-deliverable h4{font-size:25px;line-height:1.2}.okto-deliverable p{font-size:20px;line-height:1.4;margin-top:8px}
}


/* Layout spacing pass: wider page edges, calmer section rhythm and secondary text sized like boost.oktopods.com. */
:root{--pad:clamp(32px,calc(13.77vw - 70px),160px);--okto-edge:var(--pad);--okto-chapter-gap:clamp(56px,8svh,104px)}
.intro.section-pad,.services.section-pad,.connection.section-pad,.brandpod.section-pad,.contact.section-pad{padding-left:var(--pad);padding-right:var(--pad)}
.offering-page .offering-intro{padding-left:var(--pad);padding-right:var(--pad)}
.heart-index{max-width:calc(100% - 2 * var(--pad))}
.okto-type-supporting.okto-type-supporting{font-size:16px;line-height:26px}
.okto-type-caption.okto-type-caption,.home-product-footer .home-clarity-scope.okto-type-caption{font-size:16px;line-height:24px}
.ado-content li p{font-size:16px;line-height:24px}
/* Checklist descriptions share one size under their large titles. */
.offering-main .engagement-item-body.okto-type-supporting,.okto-deliverable.okto-deliverable p{font-size:20px;line-height:28px}
/* Heart heroes and handoffs start on the page edge like every other section. */
.arrival-content{padding-inline:0}
@media(min-width:801px){
 /* Engagement: the review points sit side by side under the message instead of leaving an empty column. */
 .engagement-grid{grid-template-columns:minmax(0,1fr);gap:40px}
 .engagement-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:var(--heart-gutter);border-top:0}
 .engagement-item{border-top:1px solid #181b182e;border-bottom:0}
 .engagement-item-title{hyphens:auto;overflow-wrap:break-word}
 /* POD features: one block. The lens stays in view while the copy, deliverables and action scroll beside it. */
 .offering-page :is(.clarity-feature,.brandpod-feature){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--heart-gutter);row-gap:56px;align-items:start}
 :is(.clarity-feature-main,.brandpod-feature-main){display:contents}
 :is(.clarity-feature-copy,.brandpod-feature-copy){grid-column:1;grid-row:1}
 :is(.clarity-feature,.brandpod-feature) .okto-lens{grid-column:2;grid-row:1/span 3;position:sticky;top:calc(var(--heart-primary-height) + var(--heart-index-height) + 32px);width:min(100%,calc(100svh - var(--heart-primary-height) - var(--heart-index-height) - 64px));justify-self:end}
 :is(.clarity-feature-output-band,.brandpod-feature-output-band){grid-column:1;grid-row:2}
 :is(.clarity-feature,.brandpod-feature) .okto-deliverables-grid{grid-template-columns:minmax(0,1fr)}
 :is(.clarity-feature,.brandpod-feature) .product-feature-footer{grid-column:1;grid-row:3;flex-direction:column;align-items:flex-start;gap:24px}
}
/* One headline scale. Display (the POD wordmark size) opens a section; Heading and Subheading sit below it. */
@media(min-width:701px){
 :root{--okto-chapter-space:clamp(160px,19.5svh,240px);--okto-display:clamp(56px,7.778vw,112px);--okto-subheading:clamp(36px,3.9vw,56px)}
 .home-offerings .services-intro h2,.connection.section-pad>h2,.offering-page .engagement-heading.okto-type-banner{font-size:var(--okto-display);line-height:.96}
 .okto-product-name--teaser.okto-product-name--teaser,.home-product-identity .okto-product-name.okto-product-name{font-size:clamp(72px,7.778vw,112px)}
 :is(.home-clarity-copy,.brandpod-copy,.clarity-feature-copy,.brandpod-feature-copy) .okto-product-title.okto-product-title{font-size:var(--okto-subheading);line-height:1.06}
 .contact.section-pad .contact-heading h2{font-size:clamp(45.6px,4.8vw,72px)}
}
/* Every homepage section uses the same chapter spacing as the heart pages. */
.home-offerings.services.section-pad,.home-testimonials.home-testimonials,.connection.section-pad,.contact.section-pad{padding-top:var(--okto-chapter-space);padding-bottom:var(--okto-chapter-space)}
@media(max-width:700px){
 :root{--pad:24px;--okto-chapter-space:120px;--okto-chapter-gap:48px}
 .offering-main .engagement-item-body.okto-type-supporting,.okto-deliverable.okto-deliverable p{font-size:18px;line-height:26px}
}

/* Product inscriptions: two measured lines, painted through the glass.
   Font sizes belong to the bubble's container, not the viewport. */
.okto-lens--value .pod-inscription.pod-inscription,
.brandpod-visual .brandpod-glass-word.pod-inscription{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 width:max-content;max-width:none;gap:.35cqw;margin:0;
 font-family:var(--okto-font);line-height:.94;letter-spacing:-.055em;
 text-align:center;white-space:nowrap;color:var(--okto-ink);
}
.pod-inscription.pod-inscription>span{display:block;flex:none;line-height:.94;letter-spacing:-.055em;white-space:nowrap}
.pod-inscription--clarity .pod-inscription-lead{font-size:16cqw;font-weight:100}
.pod-inscription--clarity .pod-inscription-outcome{font-size:11.5cqw;font-weight:700}
.pod-inscription--brandpod .pod-inscription-lead{font-size:11.5cqw;font-weight:200}
.pod-inscription--brandpod .pod-inscription-outcome{font-size:12.5cqw;font-weight:700}
:lang(de) .pod-inscription--clarity .pod-inscription-outcome{font-size:9cqw}
:lang(de) .pod-inscription--brandpod .pod-inscription-lead{font-size:10.3cqw}

/* Compact dialog typography: one utility composition on every site. */
#cookie-dialog[data-okto-system]{box-sizing:border-box;width:calc(100% - 40px);max-width:560px;max-height:calc(100svh - 40px);overflow:auto;margin:auto;padding:48px 40px 40px;border:0;border-radius:0;background:var(--okto-paper);color:var(--okto-ink);font-family:var(--okto-font)}
#cookie-dialog[data-okto-system] h2{font-family:var(--okto-font);font-size:36px;line-height:42px;font-weight:700;letter-spacing:-.035em;text-transform:none;margin:0 0 24px}
#cookie-dialog[data-okto-system] p{font-family:var(--okto-font);font-size:20px;line-height:29px;font-weight:200;letter-spacing:-.02em;margin:0 0 24px}
#cookie-dialog[data-okto-system]::backdrop{background:#181b1888}
#cookie-dialog[data-okto-system] .dialog-close{position:absolute;top:8px;right:8px}
#cookie-dialog[data-okto-system] form{display:flex;flex-direction:column;align-items:flex-start}
#cookie-dialog[data-okto-system] .okto-text-action{max-width:100%;white-space:normal}
#cookie-dialog[data-okto-system] .dialog-done{margin-top:24px}
#cookie-dialog[data-okto-system] :is(.okto-action,.okto-text-action,.okto-control):focus-visible{outline:2px solid var(--okto-focus);outline-offset:4px;box-shadow:0 0 0 4px var(--okto-focus-gap)}
@media(max-width:700px){#cookie-dialog[data-okto-system]{padding:48px 24px 24px}#cookie-dialog[data-okto-system] h2{font-size:25px;line-height:31px}}

/* /case-system.css */
/* Shared editorial system for all 17 original case compositions.
   Media dimensions, grids, overlaps, sources and source order are untouched.
   Surface decisions follow each case's transparent artwork; five stay dark. */
:root:has([data-okto-surface="white"]) { background-color: #fff !important; color-scheme: light; }
body:has([data-okto-surface="white"]),
body:has([data-okto-surface="white"]) :is(#__next, #smooth-wrapper, #smooth-content, main) { background-color: #fff; }
[data-okto-case][data-okto-case] {
  --case-ink: #f7f7f7;
  --case-muted: #b9bcb8;
  font-family: var(--okto-font);
  color: var(--case-ink);
}
[data-okto-case][data-okto-surface="white"] { --case-ink: #181b18; --case-muted: #646a62; background: #fff; }
[data-okto-case][data-okto-case] :is(.h3-cap,.h5-locator,.h4-primary-bold,.h4-primary,.h2,.h4-ps,.p-ps,p) { font-family: var(--okto-font); color: var(--case-ink); }
[data-okto-case="pirate-ship-fun-shipping"] :is(.case-ps,.bg-ps,.bg-ps-b,.bg-ps-bl,.ps-case_PSBackgroundAWrapper__dbdrh,.ps-case_PSBackgroundBWrapper__tl3Go) { background-color:#fff; }
/* The title and discipline label share a text column; image wrappers stay intact. */
[data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
[data-okto-case][data-okto-case] .h3-cap {
  width: 100%;
  font-size: clamp(44px, 4.45vw, 64px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
[data-okto-case][data-okto-case] .h5-locator {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--case-muted);
}
[data-okto-case][data-okto-case] p.h4-primary-bold {
  font-size: clamp(24px, 1.35vw, 32px);
  font-weight: 200;
  line-height: 1.38;
  letter-spacing: -.025em;
  max-width: 27ch;
}

/* Statement / subsection / body roles match the homepage and heart pages. */
[data-okto-case][data-okto-case] .h2 {
  font-size: clamp(40px, 3.35vw, 52px);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -.035em;
  max-width: 29ch;
  text-wrap: balance;
}
[data-okto-case][data-okto-case] :is(.h4-ps, h2.h4-primary-bold) {
  font-size: 36px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -.035em;
  text-wrap: balance;
}
[data-okto-case][data-okto-case] .h4-ps:has(+ .p-ps) {
  margin-bottom: 24px;
}
[data-okto-case][data-okto-case] .p-ps,
[data-okto-case][data-okto-case] ul.h4-primary {
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
  letter-spacing: -.02em;
  max-width: 58ch;
  opacity: 1;
}
[data-okto-case][data-okto-case] .p-ps span {
  opacity: 1;
  color: var(--case-muted);
}
[data-okto-case][data-okto-case] .bg-ps-b .h4-ps {
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -.035em;
}

/* Identical paths, dimensions and viewBoxes; only white marks become Ink.
   Original src/alt/order remain owned by React, including dynamic arrivals. */
[data-okto-case][data-okto-case] img[src$="ps-img-3.2edc7184.svg"] { content: url('/assets/case-details/ps-img-3-paper.svg'); }
[data-okto-case][data-okto-case] img[src$="ps-img-6.404fa442.svg"] { content: url('/assets/case-details/ps-img-6-paper.svg'); }
[data-okto-case][data-okto-case] img[src$="ps-img-13.svg"] { content: url('/assets/case-details/ps-img-13-paper.svg?v=2'); }
[data-okto-case][data-okto-case] img[src$="ps-img-14.svg"] { content: url('/assets/case-details/ps-img-14-paper.svg?v=2'); }

@media (max-width: 767px) {
  [data-okto-case][data-okto-case] .h3-cap { font-size: clamp(44px, 11vw, 72px); line-height: 1.02; }
  [data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) { gap: 20px; }
  [data-okto-case][data-okto-case] .h2 { font-size: 32px; line-height: 1.12; }
  [data-okto-case][data-okto-case] :is(.h4-ps, h2.h4-primary-bold) { font-size: 25px; line-height: 31px; }
  [data-okto-case][data-okto-case] .bg-ps-b .h4-ps { font-size: 30px; line-height: 1.12; }
  [data-okto-case][data-okto-case] .p-ps,
  [data-okto-case][data-okto-case] ul.h4-primary { font-size: 20px; line-height: 29px; }
}


/* Long institutional name needs a compact display role in its original column. */
[data-okto-case="adg"][data-okto-case] .h3-cap { font-size:clamp(28px,2.65vw,40px); line-height:1.06; overflow-wrap:anywhere; }
[data-okto-case="pirate-ship-fun-shipping"][data-okto-case] .h3-cap { font-size:clamp(44px,7.778vw,112px); }
[data-okto-case][data-okto-case]  :is(h4,div).h4-primary { font-size:clamp(24px,1.35vw,32px); font-weight:200; line-height:1.38; letter-spacing:-.025em; }
[data-okto-case][data-okto-case] p:not([class]) { font-size:21px; line-height:1.43; font-weight:200; letter-spacing:-.02em; }
[data-okto-case="ado-reborn"] svg:not(.logo-horizontal) .SVG_fill { fill:var(--case-ink); }
[data-okto-case="ado-reborn"] [class*="Block_Logos_B"] { color:var(--case-muted); }

/* The original Fader owns each media surface. Match the homepage cadence
   without adding a second transform, changing crops or clipping overlaps. */
[data-okto-case][data-okto-case] .Fader_Fader__koW22 { --FaderTranlation:32px; }
[data-okto-case][data-okto-case] .Fader_ShortVersion__zvEMp { --FaderTranlation:16px; }
[data-okto-case][data-okto-case] .Fader_EffectTarget__jFidD { transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .8s cubic-bezier(.22,1,.36,1); }
[data-okto-case][data-okto-case] .Fader_Fader__koW22:not(.fade-up-in) > .Fader_EffectTarget__jFidD { opacity:0; }
[data-case-hold] { opacity:0; }
@media(prefers-reduced-motion:reduce) {
 [data-okto-case][data-okto-case] .Fader_EffectTarget__jFidD { transition:none;transform:none;opacity:1!important; }
 [data-case-hold] { opacity:1; }
}
@media(max-width:767px) {
 [data-okto-case][data-okto-case] p:not([class]) { font-size:20px;line-height:1.45; }
}
/* Lead sizing follows the canonical role, including its 700px breakpoint. */
@media(max-width:700px) {
 [data-okto-case][data-okto-case] :is(p.h4-primary-bold,h4.h4-primary,div.h4-primary) { font-size:22px;line-height:1.35; }
}
@media print { [data-case-hold],[data-okto-case] .Fader_EffectTarget__jFidD { opacity:1!important;transform:none!important; } }

[data-okto-case][data-okto-case] .Fader_Fader__koW22:focus-within > .Fader_EffectTarget__jFidD { opacity:1!important;transform:none;transition:none; }

/* Retired agency marks (SPARK, CORE, REAL, LINK, FOCUS): remove the complete
   strip, including its margins. Unrelated case captions and artwork are untouched. */
[data-okto-case] [data-case-agency],
[data-okto-case] [data-case-obsolete-agencies] { display:none!important; }

/* Approved spacing audit, 31 October: only empty/text/scope spacing changes.
   Native media geometry and media-only clearances remain authored. */
[data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) > .h3-cap + div:empty,
[data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) > .h5-locator:empty,
[data-okto-case][data-okto-case] [data-case-empty-copy] { display:none; }
[data-okto-case][data-okto-case] [data-case-gap="0"] { height:0; }
[data-okto-case][data-okto-case] [data-case-gap="64"] { height:64px; }
[data-okto-case][data-okto-case] [data-case-gap="80"] { height:80px; }
[data-okto-case][data-okto-case] [data-case-gap="112"] { height:112px; }
@media(min-width:768px) {
  [data-okto-case][data-okto-case] [data-case-scope-copy] { padding-block:48px; }
  [data-okto-case="routewise-smart-logistics"][data-okto-case] .container.gap-48 { gap:64px; }
}
@media(max-width:767px) {
  [data-okto-case][data-okto-case] [data-case-scope-grid] { gap:64px; }
  [data-okto-case][data-okto-case] [data-case-empty-scope-grid] { gap:0; }
  [data-okto-case][data-okto-case] [data-case-empty-scope-column] { display:none; }
  [data-okto-case][data-okto-case] .container > .flex > .md\:w-1\/12:empty { display:none; }
  [data-okto-case][data-okto-case] .container > .flex > div:has(> .h3-cap:empty):has(> .h5-locator:empty) { display:none; }
  /* The original sm:h-0 starts at 375px; hide at 320px as well. */
  [data-okto-case][data-okto-case] :is(.h-28,.h-56).sm\:h-0 { height:0; }
  [data-okto-case][data-okto-case] .h4-primary.py-20,
  [data-okto-case][data-okto-case] .py-20:has(> p:not(.hidden)) { padding-block:40px; }
  [data-okto-case="violife-join-the-good-life"][data-okto-case] .pt-20:has(> p),
  [data-okto-case="adg"][data-okto-case] .pt-20:has(ul.h4-primary) { padding-top:48px; }
  [data-okto-case="routewise-smart-logistics"][data-okto-case] .container.gap-48 { gap:40px; }
  [data-okto-case="ado-virtual-journey"][data-okto-case] .Block_0_01_D_Content3Wrapper__nfbKo { gap:40px; }
  [data-okto-case="ado-virtual-journey"][data-okto-case] .Block_0_01_D_Content3Wrapper__nfbKo > .h4-primary { margin-top:0; }
  [data-okto-case="ado-reborn"][data-okto-case] .Block_Logos_B_ContentWrapper__r2W_4 { padding-block:64px; }
}

/* /assets/okto-motion.css */
/* Shared scroll motion (assets/okto-motion.js). Hold states only apply while
   the script runs, so content never depends on it. */
.okto-motion .okto-hold-block,.okto-motion .okto-hold-lines,.okto-motion .okto-hold-list .okto-lead,.okto-motion .okto-hold-list .okto-row>*{opacity:0}
.okto-motion .okto-hold-list .okto-row{border-color:transparent!important;border-image-source:none!important}
.okto-motion .okto-hold-image{clip-path:inset(100% 0 0 0)}

/* Headline lines rise inside their own mask; gradient words paint in after. */
.okto-line{display:block;clip-path:inset(-0.3em -0.6em -0.14em -0.6em)}
.okto-line-inner{display:block;white-space:nowrap;will-change:transform}

/* List dividers draw from the left before their row arrives. */
.okto-rule{position:absolute;left:0;right:0;transform-origin:left center;pointer-events:none}

/* Buttons: the label rolls up to a copy of itself and the arrow leans toward its direction. */
.okto-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.okto-roll-text{display:inline-block}
.okto-roll::after{content:attr(data-label);content:attr(data-label) / "";position:absolute;left:0;top:100%;white-space:nowrap}
.okto-roll-text,.okto-roll::after,.okto-action .button-arrow{transition:transform .36s cubic-bezier(.22,1,.36,1)}
.okto-action:is(:hover,:focus-visible) .okto-roll-text,.okto-action:hover .okto-roll::after,.okto-action:focus-visible .okto-roll::after{transform:translateY(-100%)}
.okto-action:is(:hover,:focus-visible) .button-arrow[data-dir=ne]{transform:translate(3px,-3px)}
.okto-action:is(:hover,:focus-visible) .button-arrow[data-dir=e]{transform:translateX(4px)}
.okto-action:is(:hover,:focus-visible) .button-arrow[data-dir=s]{transform:translateY(3px)}

@media(prefers-reduced-motion:reduce){
 .okto-roll-text,.okto-roll::after,.okto-action .button-arrow{transition:none}
 .okto-action:is(:hover,:focus-visible) :is(.okto-roll-text,.button-arrow),.okto-action:hover .okto-roll::after,.okto-action:focus-visible .okto-roll::after{transform:none}
}
:is(.motion-paused,.bp-motion-paused) :is(.okto-roll-text,.button-arrow),:is(.motion-paused,.bp-motion-paused) .okto-roll::after{transition:none}
@media print{
 .okto-motion :is(.okto-hold-block,.okto-hold-lines,.okto-hold-list .okto-lead,.okto-hold-list .okto-row>*){opacity:1!important}
 .okto-motion .okto-hold-image{clip-path:none!important}
}

/* /assets/ado-campaign/page.css */
@font-face{font-family:Inter;src:url(/assets/ado-campaign/inter-200.ttf) format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/ado-campaign/inter-300.ttf) format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/ado-campaign/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/ado-campaign/inter-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Lausanne;src:url(/assets/system/fonts/lausanne-200.woff2) format('woff2');font-weight:200 300;font-display:swap}
@font-face{font-family:Lausanne;src:url(/assets/system/fonts/lausanne-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Lausanne;src:url(/assets/system/fonts/lausanne-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(/assets/ado-campaign/nunito-600.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--paper:#fff;--ink:#181b18;--u:calc(100vw / 1440);--gutter:11.458333vw;--ease:cubic-bezier(.4,0,.2,1)}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:clip}body{margin:0}h1,h2,p{margin:0}img{display:block;max-width:100%}video{display:block;width:100%;height:100%;object-fit:cover}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}main{overflow:clip}::selection{background:#e5ed9d;color:#181b18}
.skip-link{position:fixed;z-index:200;left:16px;top:-60px;background:#fff;padding:12px 18px;font-size:16px}.skip-link:focus{top:12px}.page-inset{padding-inline:var(--gutter)}
.hero{height:100svh;min-height:560px;background:#d7d0b6;position:relative;overflow:hidden}.hero-film{object-position:center center}
/* Current Alex board: readable copy stays in document flow. */
.case-intro{padding:calc(39 * var(--u)) calc(64 * var(--u)) calc(110 * var(--u))}.case-services{width:calc(632 * var(--u));color:#121212}.services-label{margin-bottom:5px}.case-intro h1{margin-top:calc(88 * var(--u))}.intro-rule{height:1px;background:#dedede;margin-top:calc(-.6875 * var(--u))}.intro-content{display:grid;grid-template-columns:1fr 1fr;gap:calc(48 * var(--u));margin-top:calc(24.6875 * var(--u));align-items:start}.intro-copy.okto-copy-lead{max-width:calc(574 * var(--u));margin-top:2px}.intro-copy .intro-heading{font-weight:700;margin-bottom:1.38em}.chapter-copy{width:calc(523 * var(--u));max-width:100%}.chapter-copy p+p{margin-top:1.38em}
.wide-film{width:100%;aspect-ratio:1440/544;background:#e5e0d2;overflow:hidden}
#chapter-one{position:relative;padding-top:calc(93 * var(--u));padding-bottom:calc(236.586 * var(--u))}#statement-one{margin-left:var(--gutter)}.intro-phone-field{position:relative;margin-top:calc(181 * var(--u));height:calc(619.415 * var(--u))}.intro-phone{position:absolute;width:calc(193.85028 * var(--u));height:calc(421.4556 * var(--u));border-radius:calc(27.968 * var(--u));overflow:hidden;transform-origin:center;will-change:transform}.intro-phone img{width:100%;height:100%;object-fit:cover}.intro-phone:nth-child(1){left:calc(250 * var(--u));top:calc(35.597 * var(--u))}.intro-phone:nth-child(2){left:calc(498.7164 * var(--u));top:calc(197.959 * var(--u))}.intro-phone:nth-child(3){left:calc(747.4331 * var(--u));top:0}.intro-phone:nth-child(4){left:calc(996.15 * var(--u));top:calc(83.351 * var(--u))}
.scroll-scene{position:relative;background:transparent}.scene-stage{position:relative;background:transparent}.website-world,.campaign-world{position:relative;width:1440px;height:900px;transform-origin:0 0}.film-mask{overflow:hidden;background:#e8e9e4}.film-mask video{max-width:none}#website-film{position:absolute;left:285.096px;top:242.626px;width:733.362px;height:326.9px;border-radius:0}#website-laptop-art{position:absolute;left:210.09375px;top:170px;width:883.36816px;height:508.35425px;max-width:none}#website-mobile{position:absolute;left:975.39844px;top:295.4414px;width:204.60167px;height:427.36887px}#website-mobile>img{width:100%;height:100%;max-width:none}.mobile-site-film{position:absolute;left:3.04%;top:15.32%;width:93.93%;height:83.56%;border-radius:0 0 26px 26px;overflow:hidden}.mobile-site-film video{object-fit:cover}.mobile-campaign-logo{position:absolute;left:19%;top:38%;width:62%;height:auto}.mobile-site-film span{position:absolute;top:50%;left:0;width:100%;text-align:center;font-family:Nunito,sans-serif;font-weight:600;font-size:12.244px;color:#fff}
.statement-two{margin-top:calc(-111.805 * var(--u));padding-top:0;padding-bottom:calc(158.4 * var(--u));position:relative}.motion-ready .statement-two{margin-top:calc(65.385 * var(--u) - max(0px,50svh - 272.81 * var(--u)))}.campaign-story{padding-top:calc(131 * var(--u));padding-bottom:0;position:relative}.motion-ready .campaign-story{margin-top:0}
.campaign-world{height:auto;min-height:700px}.campaign-world #campaign-film{display:none}#campaign-field{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding:60px 6%}.field-phone{position:relative;aspect-ratio:170/369.602;border-radius:24.527px;overflow:hidden;background:#e8e9e4;isolation:isolate}.field-phone .field-photo,.field-phone>.site-motion{position:absolute;left:-2%;top:-2%;width:104%;height:104%;object-fit:cover;max-width:none}.field-phone .phone-scrim{opacity:1}.phone-scrim{position:absolute;left:0;right:0;top:58.06%;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.5));pointer-events:none}.phone-logo{position:absolute;left:18%;top:73.05%;width:64%;height:10.42%;object-fit:contain;pointer-events:none}.phone-copy{position:absolute;left:0;top:84%;width:100%;padding:0 4px;font:600 9.867px/1.08 Nunito,sans-serif;text-align:center;white-space:pre-line;color:white;pointer-events:none}.island{position:absolute;left:39.55%;top:1.37%;width:20.9%;height:2.975%;border-radius:99px;background:#000;pointer-events:none}.field-phone.fr-laughing .phone-scrim{top:34.6%;height:41.94%;bottom:auto;background:linear-gradient(rgba(0,0,0,.45),transparent)}.field-phone.fr-laughing .phone-logo{left:23.53%;top:48.7%;width:52.94%;height:4.33%}.field-phone.fr-laughing .phone-copy{top:56.41%}
.motion-ready .scroll-scene{margin-top:calc(-1 * max(0px,50svh - 270 * var(--u)))}.motion-ready .website-scene{height:220svh}.motion-ready .campaign-scene{height:388svh}.motion-ready .scene-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:transparent}.motion-ready .website-world,.motion-ready .campaign-world{position:absolute;height:900px;min-height:0;max-width:none}.motion-ready #website-laptop-art{opacity:0}.motion-ready #website-mobile{opacity:0}.motion-ready #website-film{left:0;top:180px;width:1440px;height:540px}.motion-ready #campaign-field{display:block;position:absolute;inset:0;padding:0}.motion-ready .field-phone{position:absolute;width:170px;height:369.602px;aspect-ratio:auto;will-change:transform}.motion-ready #campaign-film{display:block;position:absolute;left:0;top:180px;width:1440px;height:540px;z-index:3}.motion-ready #campaign-film .island,.motion-ready #campaign-film .phone-scrim,.motion-ready #campaign-film .phone-logo,.motion-ready #campaign-film .phone-copy{opacity:0}
.project-scope{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;padding-top:120px;padding-bottom:calc(240 * var(--u))}.scope-copy{text-align:center}.scope-copy h2{margin-bottom:24px}.scope-copy ul{list-style:none;margin:0;padding:0;max-width:none}.project-scope>img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
html:not(.motion-ready) .website-world{width:100%;height:auto;aspect-ratio:1440/900}html:not(.motion-ready) #website-laptop-art{left:14.5898%;top:18.8889%;width:61.345%;height:56.484%}html:not(.motion-ready) #website-film{left:19.7983%;top:26.9584%;width:50.9279%;height:36.3222%}html:not(.motion-ready) #website-mobile{left:67.736%;top:32.827%;width:14.2084%;height:47.4854%}html:not(.motion-ready) .campaign-world{width:100%}
@media(max-width:759px){
 :root{--gutter:24px}.hero{min-height:520px}.case-intro{padding:40px 24px 64px}.case-services{width:100%}.case-intro h1{margin-top:56px}.intro-rule{margin-top:20px}.intro-content{display:block;margin-top:24px}.intro-copy.okto-copy-lead{margin-top:40px;max-width:100%}.intro-copy .intro-heading{margin-bottom:1.38em}.chapter-copy{width:100%;max-width:100%}.wide-film{aspect-ratio:16/9}#chapter-one{padding:64px 24px 100px}#statement-one{margin:0}.intro-phone-field{margin-top:64px;height:calc(90px + (100vw - 48px) * 1.87)}.intro-phone{width:43%;height:auto;aspect-ratio:193.85028/421.4556;border-radius:24px}.intro-phone:nth-child(1){left:0;top:0}.intro-phone:nth-child(2){left:55%;top:58px}.intro-phone:nth-child(3){left:0;top:calc(20px + (100vw - 48px) * .935)}.intro-phone:nth-child(4){left:55%;top:calc(90px + (100vw - 48px) * .935)}.statement-two{margin-top:calc(-111.805 * var(--u));padding-top:0;padding-bottom:72px}.motion-ready .statement-two{margin-top:calc(56px - max(0px,50svh - 339.5 * (100vw / 760)))}.campaign-story{padding-top:72px}.motion-ready .scroll-scene{margin-top:calc(-1 * max(0px,50svh - 142.5 * (100vw / 760)))}.motion-ready .website-scene{height:200svh}.motion-ready .campaign-scene{height:406svh}.mobile-site-film span{font-size:12.244px}.field-phone{border-radius:24.527px}#campaign-field{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 24px}.field-phone .phone-copy{font-size:8px}.project-scope{grid-template-columns:1fr;padding-top:80px;padding-bottom:100px;gap:52px}.project-scope>img{max-width:540px;margin:auto}.motion-ready .field-phone .phone-copy{font-size:9.867px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.intro-phone{transform:none!important;will-change:auto}.site-motion{object-fit:cover}}
/* Figma export render bounds include the original device shadows. */
#website-laptop-art>img{position:absolute;left:0;top:-3.606%;width:100%;height:108.85%;max-width:none}
#website-mobile>img{position:absolute;left:-10.513%;top:-2.685%;width:121.03%;height:110.74%;max-width:none}
.mobile-site-film{border-radius:0 0 26.302px 26.302px}
/* Match the authored device silhouette at every responsive scale. */
#website-mobile{overflow:hidden;border-radius:15.071725% / 7.215547%;box-shadow:0 10.884px 21.768px rgba(0,0,0,.18)}
.split-phone{background:#1a1a1a}.split-panel{position:absolute;left:0;width:100%;height:50%;overflow:hidden}.split-top{top:0}.split-bottom{top:50%}.split-drift{position:absolute;inset:0;transform-origin:center}.split-panel img{width:100%;height:100%;object-fit:cover;max-width:none}.split-couple .split-top img{position:absolute;width:223%;height:148.28%;left:-53.03%;top:-5.17%}.intro-phone .split-logo{position:absolute;left:32%;top:88.5%;width:36%;height:5.86%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.split-drift{transform:none!important}}

/* Alex's supplied result reference: a single shared text/artwork grid. */
.campaign-signoff{width:calc(523 * var(--u));max-width:100%;height:auto;margin-top:calc(90 * var(--u))}
.case-results{padding-top:calc(163 * var(--u));padding-bottom:calc(160 * var(--u))}
.result-primary-value{display:inline-block;font-size:calc(232 * var(--u));font-weight:700;line-height:1.05;letter-spacing:-.055em;background:linear-gradient(100deg,#7626ff 0%,#f3299d 100%);color:#7626ff;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.result-primary-caption{margin-top:calc(24 * var(--u))}
.results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(34 * var(--u));margin-top:calc(108 * var(--u))}
.result-item{border-top:1px solid #5d625c;padding-top:calc(20 * var(--u))}
[data-okto-case][data-okto-case] .result-value{text-transform:none}
.result-caption{overflow-wrap:anywhere;hyphens:auto;margin-top:12px}
@media(max-width:759px){
 .campaign-signoff{width:100%;margin-top:48px}.case-results{padding-top:88px;padding-bottom:16px}.result-primary-value{font-size:clamp(86px,24vw,150px);line-height:1.05;letter-spacing:-.055em}.result-primary-caption{margin-top:16px}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;margin-top:56px}.result-item{padding-top:16px}.result-caption{margin-top:12px}
}

/* Keep editorial role sizes in the synchronized shared sheets; composition only here. */
.case-intro .h3-cap{overflow-wrap:anywhere;white-space:normal}

[data-okto-case][data-okto-case] .result-caption{color:var(--okto-muted)}

/* Individual campaign artwork exports retain the current source crops/marks. */
.field-phone .field-artwork-image{width:100%;height:100%;max-width:none;object-fit:fill}

.motion-ready .field-static-only{display:none}.field-static-only .field-photo{object-position:37.7965% center}

/* /assets/ado-campaign/next-case.css */
/* Original case handoff composition, scoped to the approved ADO campaign. */
.ado-case-next{position:relative;height:100svh;min-height:440px;overflow:hidden;isolation:isolate;background:#171918;color:#f8f8f8}
.ado-case-next .ado-next-visual{position:absolute;inset:0;overflow:hidden;opacity:var(--ado-next-opacity,1)}
.ado-case-next .ado-next-image{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(var(--ado-next-scale,1));transform-origin:center}
.ado-case-next .ado-next-caption{position:absolute;left:32px;right:32px;top:var(--ado-next-caption-top,50%);transform:translateY(-50%);opacity:var(--ado-next-opacity,1)}
.ado-case-next .ado-next-link{display:inline-flex;flex-direction:column;gap:3px;max-width:100%;color:inherit;text-decoration:none;text-align:left;font-family:Lausanne,Arial,sans-serif;font-weight:300;line-height:1.2;text-shadow:0 1px 14px #0008}
.ado-case-next .ado-next-label{font-size:16px}
.ado-case-next .ado-next-title{font-size:clamp(16px,2.5vw,36px);overflow-wrap:anywhere}
.ado-case-next .ado-next-link:focus-visible{outline:2px solid currentColor;outline-offset:10px}
.ado-case-next .ado-next-progress-track{height:3px;max-width:80vw;width:max-content;min-width:220px;margin-top:12px;overflow:hidden;border-radius:3px;background:#808080}
.ado-case-next .ado-next-progress{display:block;width:var(--case-next-progress,100%);height:100%;background:#f0f0f0}
@media(max-width:700px){.ado-case-next{min-height:400px}.ado-case-next .ado-next-caption{left:24px;right:24px}.ado-case-next .ado-next-title{font-size:24px}.ado-case-next .ado-next-progress-track{min-width:min(280px,80vw)}}
@media(prefers-reduced-motion:reduce){.ado-case-next .ado-next-visual,.ado-case-next .ado-next-caption{opacity:1}.ado-case-next .ado-next-image{transform:none}.ado-case-next .ado-next-caption{top:50%}.ado-case-next .ado-next-progress{width:100%}}

/* /case-shell.css */
/* Current approved shell only. Original case CSS owns everything inside #__next.
   Load the unchanged menu.css after this file. */
@font-face{font-family:Lausanne;src:url('/assets/lausanne-light.woff2') format('woff2');font-weight:200 500;font-display:swap}
@font-face{font-family:Lausanne;src:url('/assets/lausanne-bold.woff2') format('woff2');font-weight:600 900;font-display:swap}

/* --pad matches the shared side margin in assets/okto-system.css (24px at 700px and below). */
.site-header,.menu-panel,#cookie-dialog{--paper:#f8f8f8;--ink:#181b18;--lime:#c3e660;--muted:#62665f;--line:#d9dcd5;--pad:clamp(32px,calc(13.77vw - 70px),160px);font-family:Lausanne,Arial,sans-serif;font-size:16px;font-weight:300;font-style:normal;line-height:normal;letter-spacing:normal;text-transform:none;-webkit-font-smoothing:antialiased;color-scheme:light}
:where(.site-header,.menu-panel,#cookie-dialog),:where(.site-header,.menu-panel,#cookie-dialog) *{box-sizing:border-box}
:where(.site-header,.menu-panel,#cookie-dialog) a{color:inherit;text-decoration:none}
:where(.site-header,.menu-panel,#cookie-dialog) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:where(.site-header,.menu-panel,#cookie-dialog) :is(h1,h2,h3,h4,p){margin:0}
:where(.site-header,.menu-panel,#cookie-dialog) img{display:block;width:100%;height:auto}
:where(.site-header,.menu-panel,#cookie-dialog) :is(button,a){-webkit-tap-highlight-color:transparent}
:where(.site-header,.menu-panel,#cookie-dialog) ::selection{background:var(--lime);color:var(--ink)}
:where(.site-header,.menu-panel,#cookie-dialog) :focus-visible{outline:2px solid #83ab42;outline-offset:6px}

/* Header and legacy menu base, extracted from style.css in their original order. */
.site-header{position:fixed;inset:0 0 auto;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;height:64px;padding:0 var(--pad);color:var(--paper);transition:background .25s,color .25s}
.site-header .header-actions{display:contents}
.site-header .brand{width:35px;padding:12px 0}
.site-header .dotmark{display:grid;grid-template-columns:repeat(4,4px);gap:3px}
.site-header .dotmark i{display:block;width:4px;height:4px;background:currentColor;border-radius:50%}
.site-header .language-toggle{justify-self:start;font-size:14px;min-width:28px;padding:10px 0}
.site-header .talk-link{justify-self:end;text-transform:uppercase;font-size:14px;letter-spacing:.02em}
.site-header .talk-link>span{display:none}
.site-header .menu-toggle{justify-self:end;border:1px solid currentColor;border-radius:100px;font-size:13px;padding:9px 16px;min-width:78px}
.past-hero .site-header{color:var(--ink);background:rgba(248,248,248,.93);backdrop-filter:blur(12px)}
.menu-open .site-header{color:var(--ink);background:transparent}
.menu-panel{position:fixed;inset:0;z-index:25;background:var(--paper);padding:125px max(var(--pad),5vw) 40px;overflow:auto}
.menu-panel[hidden]{display:none}
.menu-panel nav{max-width:1050px}
.menu-panel nav a{display:flex;align-items:baseline;gap:35px;font-size:clamp(46px,7vw,96px);line-height:1.5;border-bottom:1px solid var(--line)}
.menu-panel nav small{font-size:13px}
.menu-panel nav a>span{margin-left:auto;font-size:.65em}
.menu-panel .menu-email{display:block;font-size:22px;margin-top:45px}

/* The menu's existing native dialog, scoped so original project dialogs are untouched. */
#cookie-dialog{margin:auto;max-width:420px;width:calc(100% - 40px);border:0;background:var(--paper);color:var(--ink);padding:35px}
#cookie-dialog::backdrop{background:#181b1888}
#cookie-dialog h2{font-size:30px;font-weight:300;margin-bottom:20px}
#cookie-dialog p{line-height:1.5;margin-bottom:25px}
#cookie-dialog a:not(.okto-text-action){font-size:13px;text-decoration:underline}
#cookie-dialog .dialog-close{position:absolute;right:12px;top:8px}
#cookie-dialog .dialog-close:not(.okto-control){font-size:25px}
#cookie-dialog .dialog-done{margin-top:25px}
#cookie-dialog .dialog-done:not(.okto-action){display:block;padding:12px 25px;background:var(--lime)}

@media(max-width:700px){
 .site-header,.menu-panel,#cookie-dialog{--pad:24px}
 .site-header{height:60px;grid-template-columns:repeat(4,1fr)}
 .site-header .talk-link{font-size:10px;white-space:nowrap}
 .site-header .language-toggle{font-size:12px}
 .site-header .menu-toggle{font-size:10px;padding:7px 12px;min-width:62px}
 .site-header .dotmark{gap:2px;grid-template-columns:repeat(4,3px)}
 .site-header .dotmark i{width:3px;height:3px}
 .menu-panel{padding-top:100px}
 .menu-panel nav a{font-size:52px;gap:20px}
 .menu-panel .menu-email{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
 .site-header,.site-header *,.menu-panel,.menu-panel *,#cookie-dialog,#cookie-dialog *{transition:none!important}
}
/* Later approved header refinements from style.css lines 18–19. */
.site-header .dotmark{grid-template-columns:repeat(8,7px);gap:5px}
.site-header .dotmark i{width:7px;height:7px}
.site-header .brand{width:100px}
.site-header .menu-toggle{border-radius:0}
@media(max-width:700px){
 .site-header .dotmark{grid-template-columns:repeat(8,4px);gap:3px}
 .site-header .dotmark i{width:4px;height:4px}
 .site-header .brand{width:56px}
}
/* Place the original fixed scroll canvas below the approved site shell. */
#__next{position:relative;z-index:0;isolation:isolate}

/* /menu.css */
/* Open menu, translated from the approved Figma layout. Header styles are owned by style.css. */
@font-face {
  font-family: "Lausanne Menu";
  src: url("/assets/menu-lausanne-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

#menu.site-menu {
  --menu-header-height: 64px;
  position: fixed;
  inset: 0;
  z-index: 25;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper, #f8f8f8);
  color: var(--ink, #181b18);
  font-family: "Lausanne Menu", Lausanne, Arial, sans-serif;
  font-weight: 400;
  -webkit-overflow-scrolling: touch;
}

#menu.site-menu[hidden] { display: none; }
#menu.site-menu::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: var(--menu-header-height);
  z-index: 1;
  background: var(--paper, #f8f8f8);
  pointer-events: none;
}

#menu .site-menu-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  padding: calc(var(--menu-header-height) + 96px) 16px 32px;
}

#menu .site-menu-primary { width: 100%; max-width: none; }
#menu .site-menu-columns,
#menu .site-menu-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 96px;
}
#menu .site-menu-group { min-width: 0; }
#menu .site-menu-label {
  margin: 0 0 24px;
  color: var(--muted, #62665f);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 2.24px;
}
#menu .site-menu-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu .site-menu-list > li { min-width: 0; }
#menu .menu-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 8px 0;
  border: 0;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  scroll-margin-top: calc(var(--menu-header-height) + 16px);
}
#menu .menu-entry .menu-entry-title {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
#menu .menu-entry-heading { display:flex; align-items:center; gap:8px; width:100%; font-size:inherit; line-height:inherit; letter-spacing:inherit; }
#menu .menu-entry-heading .menu-entry-title { flex:1; min-width:0; }
#menu .menu-entry-external { display:block; flex:none; width:30px; height:30px; }
#menu .menu-entry-external img { display:block; width:30px; height:30px; }
#menu .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#menu .menu-entry > .menu-entry-promise {
  margin: 0;
  color: var(--muted, #62665f);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0;
}
#menu .menu-entry:hover .menu-entry-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
}
#menu .site-menu-lower { margin-top: 64px; }
#menu .site-menu-rule {
  height: 1px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #ffd400 0%, #ffd400 12%, #c8e82e 30%, #3fe07a 52%, #00e5ff 66%, #00e5ff 100%);
}

#menu .site-menu-utilities { width: 100%; }
#menu .site-menu-contact-row,
#menu .site-menu-legal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
#menu .site-menu-email { font-size: 28px; line-height: 1.2; }
#menu .site-menu-social,
#menu .site-menu-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}
#menu .site-menu-utilities a,
#menu .site-menu-utilities button { scroll-margin-top: calc(var(--menu-header-height) + 16px); }
#menu .site-menu-social,
#menu .site-menu-legal-row {
  color: var(--muted, #62665f);
  font-size: 14px;
  line-height: 1.2;
}
#menu .site-menu-legal-row {
  align-items: flex-start;
  border-top: 1px solid var(--line, #d9dcd5);
  margin-top: 8px;
  padding-top: 16px;
}
#menu .site-menu-utilities button { padding: 0; font: inherit; }
#menu .site-menu-utilities a:hover,
#menu .site-menu-utilities button:hover { text-decoration: underline; text-underline-offset: 3px; }
#menu .site-menu-location { white-space: nowrap; }

@media (min-width: 801px) and (max-width: 1199px) {
  #menu .menu-entry { font-size: 36px; line-height: 44px; }
}

@media (max-width: 800px) {
  #menu .site-menu-body { gap: 64px; padding-top: calc(var(--menu-header-height) + 24px); padding-bottom: 24px; }
  #menu .site-menu-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #menu .site-menu-label { margin-bottom: 16px; }
  #menu .site-menu-list { height: auto; }
  #menu .menu-entry { font-size: 28px; line-height: 36px; }
  #menu .menu-entry-external, #menu .menu-entry-external img { width:24px; height:24px; }
  #menu .menu-entry > .menu-entry-promise { font-size: 16px; line-height: 22px; }
  #menu .site-menu-lower { margin-top: 32px; }
  #menu .site-menu-rule { margin-bottom: 16px; }
  #menu .site-menu-secondary { gap: 32px; }
  #menu .site-menu-contact-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  #menu .site-menu-email { font-size: 20px; }
  #menu .site-menu-social,
  #menu .site-menu-legal { gap: 8px 16px; }
  #menu .site-menu-legal-row { padding-top: 8px; }
  #menu .site-menu-location { display: none; }
}

@media (max-width: 700px) {
  #menu.site-menu { --menu-header-height: 60px; }
}