/* BrandPOD layouts using the canonical OKTOPODS content system.
   Product-specific diagrams and workflow remain intact; no shared header rules. */
.brandpod-system{--ink:var(--okto-ink);--paper:var(--okto-paper);--line:var(--okto-line);--muted:var(--okto-muted);--pad:var(--okto-edge);font-family:var(--okto-font);font-weight:200;-webkit-font-smoothing:antialiased;background:var(--okto-paper);color:var(--okto-ink)}
.brandpod-system :is(.section-paper,.bp-section-paper){background:var(--okto-paper);color:var(--okto-ink)}
.brandpod-system :is(.section-ink,.bp-section-ink){background:var(--okto-ink);color:var(--okto-paper)}
.brandpod-system :is(.muted,.bp-muted){color:var(--okto-muted)}
.brandpod-system :is(.pad,.bp-pad){padding:var(--okto-chapter-space) var(--okto-edge)}
.brandpod-system :is(.hero,.bp-hero){padding:32px var(--okto-edge) 32px;min-height:calc(100svh - 90px);height:auto}
.brandpod-content.brandpod-system .bp-hero{min-height:calc(100svh - 64px)}
.brandpod-system :is(.hero-top,.bp-hero-top){gap:24px;align-items:flex-start}
.brandpod-system :is(.hero-index,.bp-hero-index){font-size:14px;line-height:20px;color:var(--okto-muted)}
.brandpod-system :is(.hero-grid,.bp-hero-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap);width:100%;max-width:none;padding:48px 0;align-items:center}
.brandpod-system :is(.hero-copy,.bp-hero-copy){min-width:0}
.brandpod-system :is(.hero-intro,.bp-hero-intro){margin-top:40px;color:var(--okto-ink);max-width:43ch}
.brandpod-system :is(.hero,.bp-hero) .okto-text-action{margin-top:24px}
.brandpod-system :is(.hero-bottom,.bp-hero-bottom){border-color:var(--okto-line);font-size:14px;line-height:20px;color:var(--okto-muted);padding-top:24px}
.brandpod-system :is(.section-top,.bp-section-top){margin-bottom:var(--okto-chapter-gap);padding-top:24px}
.brandpod-system :is(.split,.bp-split,.system-explorer,.bp-system-explorer,.workflow-heading,.bp-workflow-heading,.workflow-panel,.bp-workflow-panel){grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap)}
.brandpod-system :is(.split,.bp-split,.system-explorer,.bp-system-explorer,.workflow-heading,.bp-workflow-heading,.workflow-panel,.bp-workflow-panel)>*{min-width:0}
.brandpod-system :is(.problem,.bp-problem,.people-section,.bp-people-section){padding-bottom:var(--okto-chapter-space)}
.brandpod-system :is(.problem,.bp-problem) h2{max-width:12ch}
.brandpod-system :is(.system,.bp-system,.engagement,.bp-engagement){padding-top:var(--okto-chapter-space)}
.brandpod-system :is(.system-visual-intro,.bp-system-visual-intro){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap);align-items:center;margin:0 calc(-1 * var(--okto-edge));padding:72px var(--okto-edge)}
.brandpod-system :is(.system-heading,.bp-system-heading){display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.brandpod-system :is(.system-heading,.bp-system-heading)>.okto-type-body{max-width:40ch;padding:0}
.brandpod-system :is(.hero-art,.bp-hero-art){width:100%;height:clamp(360px,36vw,560px);margin:0}
.brandpod-system :is(.orbit-label,.bp-orbit-label){background:var(--okto-ink);color:var(--okto-paper);font-size:14px;line-height:20px}
.brandpod-system :is(.art-caption,.bp-art-caption){color:#bac1b7;font-size:14px;line-height:20px}
.brandpod-system :is(.art-orbit,.bp-art-orbit){border-color:#494d46}
.brandpod-system :is(.system-explorer,.bp-system-explorer){margin-top:var(--okto-chapter-space)}
.brandpod-system :is(.tabs,.bp-tabs){gap:32px;margin-bottom:40px}
.brandpod-system :is(.tabs,.bp-tabs) .okto-tab{padding-inline:0;color:var(--okto-muted)}
.brandpod-system :is(.tabs,.bp-tabs) .okto-tab[aria-selected=true]{color:var(--okto-ink)}
.brandpod-system :is(.map-center,.bp-map-center){background:var(--okto-paper);border-color:var(--okto-ink)}
.brandpod-system :is(.map-center,.bp-map-center) strong{font-family:var(--okto-font);font-weight:700}
.brandpod-system :is(.plain-list,.bp-plain-list) li{font-family:var(--okto-font);font-size:18px;line-height:26px;font-weight:200;padding:14px 0}
.brandpod-system :is(.workflow-tabs,.bp-workflow-tabs){gap:24px;margin-top:64px}
.brandpod-system :is(.workflow-tabs,.bp-workflow-tabs) .okto-tab{padding:16px 0;text-align:left;min-width:0;color:#bac1b7}
.brandpod-system :is(.workflow-tabs,.bp-workflow-tabs) .okto-tab[aria-selected=true]{color:var(--okto-paper)}
.brandpod-system :is(.workflow-tabs,.bp-workflow-tabs) .okto-tab small{font-family:var(--okto-font);font-size:14px;line-height:20px;font-weight:200}
.brandpod-system :is(.workflow-panel,.bp-workflow-panel){margin-top:0;padding-top:56px;min-height:440px}
.brandpod-system :is(.step-copy,.bp-step-copy){padding:0;min-width:0}
.brandpod-system :is(.step-copy,.bp-step-copy) .okto-text-action{margin-top:32px}
.brandpod-system :is(.example-sheet,.bp-example-sheet){background:var(--okto-paper);color:var(--okto-ink)}
.brandpod-system :is(.responsibilities,.bp-responsibilities,.engagement-steps,.bp-engagement-steps){gap:48px;margin-top:64px}
.brandpod-system :is(.responsibilities,.bp-responsibilities,.engagement-steps,.bp-engagement-steps) p{max-width:35ch}
.brandpod-system :is(.foundations,.bp-foundations){display:grid;grid-template-columns:1fr 2fr;gap:var(--okto-grid-gap);margin-top:var(--okto-chapter-space);padding-top:40px;border-top:1px solid var(--okto-line)}
.brandpod-system :is(.foundations,.bp-foundations) p{margin-bottom:24px;max-width:62ch}
.brandpod-system :is(.foundations,.bp-foundations) a{text-decoration:underline;text-underline-offset:4px;border:0}
.brandpod-system :is(.contact-bottom,.bp-contact-bottom){gap:48px;margin-top:64px;align-items:flex-end}
.brandpod-system :is(.contact-bottom,.bp-contact-bottom)>.okto-type-body{color:#bac1b7;max-width:42ch}
.brandpod-system .brandpod-enquiry{flex-shrink:0}
.brandpod-system :is(.hero-art,.bp-hero-art) .okto-control{position:absolute;bottom:24px;right:0;background:transparent;color:var(--okto-paper);border:1px solid #767676;border-radius:0;z-index:3}
.brandpod-system .site-header .okto-control{color:var(--okto-paper);background:transparent;border-left:1px solid #767676;flex-shrink:0}
.brandpod-system :is(.hero-art,.bp-hero-art) canvas[data-fluid-unavailable=true]{border-radius:50%;width:70%;height:70%;left:15%;top:15%;background:radial-gradient(ellipse at 30% 25%,#ffffffb0,transparent 15%),radial-gradient(ellipse at 60% 60%,#02c9d4,#127c91 60%,#b2db32);box-shadow:inset 0 0 30px #02f0ff80}
.brandpod-system :is(footer,.site-footer){background:var(--okto-ink)}
.brandpod-system :is(.footer-links,.bp-footer-links) :is(a,button){display:inline-flex;align-items:center;min-height:44px}
@media(max-width:1000px){.brandpod-system :is(.contact-bottom,.bp-contact-bottom){align-items:flex-start}}
@media(max-width:800px){
 .brandpod-system :is(.hero-grid,.bp-hero-grid,.split,.bp-split,.system-visual-intro,.bp-system-visual-intro,.system-explorer,.bp-system-explorer,.workflow-heading,.bp-workflow-heading,.workflow-panel,.bp-workflow-panel){grid-template-columns:minmax(0,1fr)}
 .brandpod-system :is(.hero-grid,.bp-hero-grid){padding:56px 0 40px;gap:40px}
 .brandpod-system .okto-lens{max-width:520px}
 .brandpod-system :is(.system-visual-intro,.bp-system-visual-intro){gap:24px;padding-block:64px}
 .brandpod-system :is(.hero-art,.bp-hero-art){max-width:580px;justify-self:center;height:400px}
 .brandpod-system :is(.system-heading,.bp-system-heading){gap:32px}
 .brandpod-system :is(.foundations,.bp-foundations){grid-template-columns:minmax(0,1fr);gap:32px}
}
@media(max-width:700px){
 .brandpod-system :is(.hero,.bp-hero){min-height:0;padding-top:28px}
 .brandpod-system :is(.hero-top,.bp-hero-top) .okto-type-label{font-size:12px;line-height:20px}
 .brandpod-system :is(.hero-intro,.bp-hero-intro){margin-top:32px}
 .brandpod-system :is(.hero-bottom,.bp-hero-bottom){font-size:14px;line-height:20px}
 .brandpod-system :is(.hero-art,.bp-hero-art){height:320px}
 .brandpod-system :is(.section-word,.bp-section-word){font-size:14px;line-height:20px;max-width:16ch}
 .brandpod-system :is(.tabs,.bp-tabs){gap:24px}
 .brandpod-system :is(.workflow-tabs,.bp-workflow-tabs){gap:12px;margin-top:40px}
 .brandpod-system :is(.workflow-tabs,.bp-workflow-tabs) .okto-tab{font-size:14px;line-height:20px}
 .brandpod-system :is(.workflow-panel,.bp-workflow-panel){min-height:0;padding-top:40px}
 .brandpod-system :is(.responsibilities,.bp-responsibilities,.engagement-steps,.bp-engagement-steps){grid-template-columns:1fr;gap:40px;margin-top:48px}
 .brandpod-system :is(.engagement-steps,.bp-engagement-steps)>div{grid-template-columns:48px minmax(0,1fr)}
 .brandpod-system :is(.contact-bottom,.bp-contact-bottom){gap:40px;margin-top:40px;align-items:stretch}
 .brandpod-system .brandpod-enquiry{width:100%;gap:16px}
}
@media(max-width:360px){.brandpod-system .site-header{gap:8px}.brandpod-system .site-header .brand-logo{width:118px}.brandpod-system :is(.workflow-tabs,.bp-workflow-tabs){gap:8px}.brandpod-system :is(.workflow-tabs,.bp-workflow-tabs) .okto-tab{font-size:13px}}

.brandpod-system .okto-surface-dark .okto-type-caption{color:#bac1b7}
.brandpod-system .okto-surface-dark :is(.cyan-mark,.bp-cyan-mark){color:var(--okto-ink)}

.brandpod-system :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--okto-focus);outline-offset:4px;box-shadow:0 0 0 4px var(--okto-focus-gap)}