/* /assets/okto-system.css */
/* OKTOPODS shared content system v1, 29 October 2026; type tokens 6 November 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;
 /* Type roles (see DESIGN_SYSTEM.md). Applied by type-system.css; case-system.css and legal.css read them too. */
 --type-display:clamp(56px,7.778vw,112px);--type-chapter:clamp(45.6px,4.8vw,72px);
 --type-statement:clamp(32px,3.333vw,48px);--type-title:clamp(24px,2.222vw,32px);
 --type-body:clamp(19px,1.528vw,22px);--type-supporting:16px;--type-label:14px;
 --type-light:200;
 --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:none;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: var(--okto-muted, #62665f); 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: none;
}
/* Use each heading's authored casing in both languages. Never lowercase the
   source: project names, acronyms and German nouns retain their spelling.
   Locator labels and image/SVG artwork remain outside this headline role. */
[data-okto-case][data-okto-case] :is(.h2,.h4-ps,h2.h4-primary-bold,h1.title,h2.title,h3.title,h4.title) {
  text-transform: none;
}
[data-okto-case][data-okto-case] .h5-locator {
  width: 100%;
  font-size: var(--type-label, 14px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--case-muted);
}
/* Case lead: Body role (the five-role system retired the separate lead size). */
[data-okto-case][data-okto-case] p.h4-primary-bold {
  font-size: var(--type-body, 22px);
  font-weight: var(--type-light, 200);
  line-height: 1.45;
  letter-spacing: -.01em;
  max-width: 27ch;
}

/* Statement / Title / Body roles: the same tokens as every other page (assets/okto-system.css). */
[data-okto-case][data-okto-case] .h2 {
  font-size: var(--type-statement, 48px);
  font-weight: var(--type-light, 200);
  line-height: 1.12;
  letter-spacing: -.03em;
  max-width: 29ch;
  text-wrap: balance;
}
[data-okto-case][data-okto-case] :is(.h4-ps, h2.h4-primary-bold) {
  font-size: var(--type-title, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  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: var(--type-body, 22px);
  font-weight: var(--type-light, 200);
  line-height: 1.45;
  letter-spacing: -.01em;
  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: var(--type-statement, 48px);
  font-weight: var(--type-light, 200);
  line-height: 1.12;
  letter-spacing: -.03em;
}

/* 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; }
  /* Statement, Title and Body scale down through their tokens. */
}


/* 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:var(--type-body,22px); font-weight:var(--type-light,200); line-height:1.45; letter-spacing:-.01em; }
[data-okto-case][data-okto-case] p:not([class]) { font-size:var(--type-body,22px); line-height:1.45; font-weight:var(--type-light,200); letter-spacing:-.01em; }
[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) {
}
/* Lead sizing follows the canonical role, including its 700px breakpoint. */
@media(max-width:700px) {
}
@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; }
}

/* Native next-case titles sit outside the tagged editorial content. Keep the
   same authored casing through the incoming/outgoing photographic handoff. */
.case-original [class*="MobileParallaxTeaser_Title__"] { text-transform: none; }

/* /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; }
}

/* /type-system.css */
/* One type system: seven roles, nothing in between. 6 November 2026.
   Sizes live as tokens in assets/okto-system.css (--type-*); this sheet maps
   page classes onto them and is loaded last. It sets family, size, weight,
   line height and colour only — never layout.

   Display    112 caps, 700  section banners (unchanged compositions keep theirs)
   Chapter     72, 700       chapter headings, contact and legal titles
   Statement   48, light     intro statements, product promises, case names in heart pages
   Title       32, 700       item titles: services, cases, deliverables, subsections
   Body        22, light     all running text, always ink (incl. .okto-type-supporting)
   Supporting  16, 400       captions, hints, footer, small links (matches boost.oktopods.com)
   Label       14 caps, 400  eyebrows, numbers, client names — muted

   "Light" is --type-light (200): Lausanne ships no 300, so 300 always rendered
   as 200. Declaring 200 changes nothing on screen; it makes the rule honest.
   Every role sets font-family, because the same Lausanne files are loaded
   under four family names and the "Lausanne" family maps 400 to its 200 file. */

/* ── Home ──────────────────────────────────────────────────────────────── */

/* Statement */
html body :is(.intro.section-pad > h2, .home-clarity .okto-product-title) {
  font-family: var(--okto-font); font-size: var(--type-statement); font-weight: var(--type-light); line-height: 1.12; letter-spacing: -.03em;
}

/* Title */
html body :is(
  .services .service-copy > h3,
  .ado-content > h3,
  .ado-proof-title,
  .home-clarity .okto-lead
) {
  font-family: var(--okto-font); font-size: var(--type-title); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-transform: none;
}

/* Body */
html body :is(
  .work .project-description,
  .services-intro > p,
  .services .service-delivery,
  .services-engagement,
  .ado-lead,
  .ado-content li p,
  .home-clarity .okto-product-descriptor,
  .home-clarity .okto-copy-lead,
  .home-clarity .okto-deliverable p,
  .home-clarity .home-clarity-scope,
  .contact-bottom > p,
  .contact-email
) {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: var(--type-light); line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}

/* Label */
html body :is(
  .section-label,
  .work .project-disciplines,
  .services .service-number,
  .ado-story ol > li > span:first-child,
  .home-clarity-eyebrow
) {
  font-family: var(--okto-font); font-size: var(--type-label); font-weight: 400; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--okto-muted, #62665f);
}

/* Names inside a list read as body text set in bold, so tight grids never hyphenate. */
html body .home-clarity .okto-deliverable h4 {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; hyphens: manual;
}
/* An eyebrow is one line. */
html body .home-clarity .home-clarity-eyebrow { max-width: none; width: max-content; white-space: nowrap; }

/* Case text sits on photographs and keeps its white. */
html body .work .project .project-description,
html body .work .project .project-disciplines { color: inherit; }

/* Product blocks: the shared system and scene styles set these with doubled
   classes, so the roles repeat that weight here. */
html body .home-clarity .okto-product-name.okto-product-name--teaser.okto-product-name--teaser { font-size: var(--type-product, clamp(64px, 7.778vw, 112px)); line-height: .95; }
html body .home-pod-scene .home-product-identity .okto-product-descriptor.okto-product-descriptor,
html body .home-pod-scene .home-product-footer .home-clarity-scope.okto-type-caption.okto-type-caption {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: var(--type-light); line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}

/* ── Other pages ─────────────────────────────────────────────────────────
   The shared content classes carry the roles; page classes fill the gaps.
   Text on ink or photographs keeps its own colour (see the last rule).
   Page styles here use deep selectors (and #about-main), so these roles add
   one ID step with :not(#type-roles), an ID no element carries. */

/* Chapter */
html body:not(#type-roles) :is(
  .okto-type-chapter.okto-type-chapter,
  .offering-heading,
  .journey-chapter,
  .journey-statement-copy > h3
) {
  font-family: var(--okto-font); font-size: var(--type-chapter); font-weight: 700; line-height: 1.02; letter-spacing: -.04em;
}

/* Statement */
html body:not(#type-roles) :is(
  .offering-lead,
  .clarity-feature-title,
  .brandpod-feature-title,
  .okto-product-title.okto-product-title,
  .offering-case-caption > h2
) {
  font-family: var(--okto-font); font-size: var(--type-statement); font-weight: var(--type-light); line-height: 1.12; letter-spacing: -.03em;
}

/* Title */
html body:not(#type-roles) :is(
  .okto-type-subsection.okto-type-subsection,
  .okto-lead.okto-lead,
  .about-brand-point-heading,
  .engagement-item-title,
  .case-caption :is(h2, h3),
  .journey-dna-cards h3,
  .journey-scope-result h3,
  .case-campaign .intro-heading
) {
  font-family: var(--okto-font); font-size: var(--type-title); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-transform: none;
}

/* Body */
html body:not(#type-roles) :is(
  .okto-type-body.okto-type-body,
  .okto-copy-lead.okto-copy-lead,
  .okto-type-supporting.okto-type-supporting,
  .okto-product-descriptor.okto-product-descriptor,
  .about-brand-intro-copy,
  .about-brand-point-body,
  .about-heart-descriptor,
  .about-heart-copy,
  .about-brand-transformation-bottom,
  .SkillsRows_content__Eos_9 p,
  .engagement-item-body,
  .offering-body,
  .offering-email,
  .case-description,
  .okto-deliverable p,
  .bp-plain-list li,
  .bp-closing-line,
  .contact-intro,
  .home-clarity-scope.okto-type-caption,
  .brandpod-feature-scope.okto-type-caption,
  .journey-body,
  .journey-octopus-body p,
  .journey-dna-cards p,
  .journey-scope-result p,
  .journey-meet-actions a:not(.journey-talk),
  .case-campaign :is(.intro-paragraph, .campaign-tagline, .okto-row)
) {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: var(--type-light); line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}
/* Names inside lists: body size, bold. (Legal text reads the tokens in legal.css, which keeps its print sizes.) */
html body:not(#type-roles) .okto-deliverable h4.product-output-title {
  font-family: var(--okto-font); font-size: var(--type-body); font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}

/* Supporting — one size for everything secondary. */
html body:not(#type-roles) :is(
  .okto-type-caption.okto-type-caption:not(.home-clarity-scope, .brandpod-feature-scope),
  figcaption,
  .form-hint,
  .optional,
  .offering-case-link,
  .case-campaign :is(.result-caption, .services-list)
) {
  font-family: var(--okto-font); font-size: var(--type-supporting); font-weight: 400; line-height: 1.5; letter-spacing: 0;
}
html body:not(#type-roles) :is(figcaption, .okto-type-caption.okto-type-caption:not(.home-clarity-scope, .brandpod-feature-scope), .form-hint, .optional, .case-campaign .result-caption) {
  color: var(--okto-muted, #62665f);
}
/* Footer: one size, one weight, its own colour on ink. */
html body:not(#type-roles) .site-footer :is(.footer-meta span, .footer-links a, .footer-links .okto-control) {
  font-family: var(--okto-font); font-size: var(--type-supporting); font-weight: 400; line-height: 1.5;
}

/* Label */
html body:not(#type-roles) :is(
  .okto-type-label.okto-type-label,
  .about-brand-team-label,
  .case-client,
  .bp-hero-index,
  .bp-section-word,
  .journey-eyebrow,
  .journey-toggle span,
  .case-campaign .services-label
) {
  font-family: var(--okto-font); font-size: var(--type-label); font-weight: 400; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--okto-muted, #62665f);
}

/* Actions: one size and family for every button label. */
html body:not(#type-roles) :is(.okto-action .okto-roll-text, .handoff-link > span) {
  font-family: var(--okto-font); font-size: 16px; font-weight: 700; line-height: 1.25;
}

/* Ink sections and photographs keep their own text colour. */
/* Only the role classes above are recoloured, never gradient text
   (.heart-gradient and friends rely on color: transparent). */
html body:not(#type-roles) :is(.bp-section-ink, .offering-hero, .work .project, .journey-octopus, .site-footer) :is(
  .okto-type-body, .okto-copy-lead, .okto-type-supporting, .okto-product-descriptor,
  .offering-body, .offering-lead, .engagement-item-body, .case-description,
  .bp-plain-list li, .bp-closing-line, .okto-type-label, .case-client, .bp-hero-index, .bp-section-word,
  .journey-body, .journey-octopus-body p, .journey-eyebrow, .footer-meta span, .footer-links a, .footer-links .okto-control
) { color: inherit; }