/* Color-only reconciliation layer. Layout and explicit block overrides stay intact. */
:root, .editor-styles-wrapper, .octopi-designed, .octopi-builder-section {
  --color-bg: var(--color-background);
  --color-text: var(--color-foreground);
  --color-surface-soft: var(--color-card);
  --color-accent-warm: var(--color-primary);
  --octopi-muted: var(--color-muted);
}
body.octopi-body {
  background: radial-gradient(circle at top left,color-mix(in srgb,var(--color-accent) 7%,transparent),transparent 24%),radial-gradient(circle at top right,color-mix(in srgb,var(--color-primary) 5%,transparent),transparent 22%),var(--color-background);
}
/* Navigation, footer and shared text. */
.octopi-block-header.is-scrolled {
  background: color-mix(in srgb,var(--color-surface) calc(var(--glass-opacity) * 100%),transparent)!important;
  border-bottom-color: color-mix(in srgb,var(--color-foreground) calc(var(--glass-border-opacity) * 100%),transparent)!important;
}
.octopi-nav.is-scrolled { background: color-mix(in srgb,var(--color-surface) 82%,transparent); }
.octopi-nav__mobile-panel { background: color-mix(in srgb,var(--color-background) 98%,transparent); }
.octopi-block-header .wp-block-navigation-item__content,
.octopi-menu a, .octopi-footer-menu a { color: var(--color-muted); }
.octopi-block-header .wp-block-navigation-item__content:hover,
.octopi-block-header .current-menu-item > .wp-block-navigation-item__content,
.octopi-menu a:hover, .octopi-footer-menu a:hover { color: var(--color-foreground); }
.octopi-brand__mark, .octopi-nav__cta-dot { background: var(--color-accent); }
.octopi-brand__mark { box-shadow: 0 0 18px color-mix(in srgb,var(--color-accent) 55%,transparent); }
.octopi-menu .current-menu-item > a::after, .octopi-menu .current_page_item > a::after,
.octopi-menu .current-menu-ancestor > a::after { background: var(--color-accent); }
.octopi-brand__accent, .octopi-home-title em, .octopi-homepage-hero__title em,
.octopi-quote__mark, .octopi-process-card__number,
.home .octopi-editorial-grid--clients .octopi-editorial-grid__marquee span::after { color: var(--color-accent); }
.octopi-lead, .octopi-nav__mobile-meta, .octopi-homepage-hero__title .is-muted,
.octopi-homepage-hero__copy, .octopi-homepage-hero__availability, .octopi-home-title .is-muted,
.octopi-hero__aside-copy, .octopi-section-head__note, .octopi-home-intro__muted,
.octopi-home-services__copy, .octopi-home-service-card__body p, .octopi-audience-card p:last-child,
.octopi-home-quote__support, .octopi-process-card p:last-child, .octopi-home-clients__note,
.octopi-card__placeholder-meta, .octopi-service-cell__index, .octopi-work-hero p:last-child,
.octopi-thoughts-hero p:last-child, .octopi-work-empty, .octopi-back-link,
.octopi-case-copy-block__body, .octopi-service-row__content > p:not(.octopi-eyebrow),
.octopi-service-row__meta ul, .octopi-thought-row__date, .octopi-thought-row__copy p,
.octopi-thought-row__arrow, .octopi-contact-page__links a, .octopi-marquee,
.octopi-scroll-cue, .octopi-consent, .octopi-footer__muted,
.octopi-editorial-grid--belief h2 span, .octopi-project-back,
.octopi-project-intro__copy > .wp-block-post-excerpt, .octopi-contact-reference-note,
.octopi-project-spotlight__body > div:first-child > p:last-child, .octopi-project-spotlight__meta > p,
.octopi-editorial-grid__studio-body p, .octopi-editorial-grid__studio-thoughts a > p:last-child,
.octopi-visual-cta h2 span, .single-project .octopi-content-section__copy .octopi-entry-content,
.octopi-project-outcome > div:first-child > p:last-child,
.octopi-project-related-thoughts a > p:last-child, .octopi-project-next a > p:last-child,
.home .octopi-editorial-grid--audiences .octopi-editorial-grid__items article > span,
.home .octopi-editorial-grid--audiences article::before { color: var(--color-muted); }
.octopi-homepage-hero__tag, .octopi-tag, .octopi-home-section-head__link,
.octopi-project-tile__body p, .octopi-home-clients .octopi-marquee,
.octopi-case-deliverables li, .octopi-quote, .octopi-case-meta dd { color: var(--color-foreground); }

/* Surface roles and separators: no geometry is changed here. */
.octopi-cinematic-hero__support > .octopi-lead, .octopi-cinematic-hero__meta,
.octopi-editorial-grid__intro > p, .octopi-editorial-grid__items p,
.octopi-editorial-grid__belief > p:last-child, .octopi-editorial-grid__clients > p:last-child,
.octopi-project-tile footer, .octopi-project-filters button,
.octopi-thought-index__featured p, .octopi-thought-index__featured time,
.octopi-thought-index__row p, .octopi-thought-index__row time,
.octopi-block-footer__bottom p { color: var(--color-muted); }
.octopi-cinematic-hero__media, .octopi-cinematic-hero__meta span,
.octopi-editorial-grid__items, .octopi-editorial-grid__marquee,
.octopi-project-tile__media, .octopi-project-filters, .octopi-project-filters button,
.octopi-project-spotlight__media, .octopi-thought-index__row,
.octopi-block-footer__bottom { border-color: var(--color-border); }
.octopi-editorial-grid__items { background: var(--color-border); }
.octopi-editorial-grid__items article, .octopi-cinematic-hero__media,
.octopi-project-tile__media { background: var(--color-card); }
.octopi-editorial-grid__items article > span { color: var(--color-accent); }
.octopi-fluid-orb--a { background: var(--color-accent); }
.octopi-fluid-orb--b { background: var(--color-primary); }
.octopi-cinematic-hero__media figcaption, .octopi-project-tile__media > div { color: var(--color-on-media); }
.octopi-project-tile__media > div { text-shadow: 0 2px 22px var(--color-overlay); }
.octopi-project-spotlight__media::after { background: linear-gradient(transparent,color-mix(in srgb,var(--color-overlay) 82%,transparent)); }
.octopi-button--light { border-color: var(--color-button); }
.octopi-visual-hero__media, .octopi-visual-reel__video, .octopi-content-section__media,
.octopi-visual-gallery__item, .octopi-visual-card__media, .octopi-project-meta > div,
.octopi-project-snapshot, .octopi-project-spotlight__frame, .octopi-project-outcome,
.home .octopi-editorial-grid--audiences .octopi-editorial-grid__items article { background: var(--color-card); }
.octopi-process-card, .octopi-project-outcome span { background: var(--color-background); }
.octopi-card, .octopi-panel, .octopi-service-row, .octopi-case-layout__meta-inner,
.octopi-spotlight-card { background: var(--color-card); box-shadow: inset 0 1px 0 var(--color-border),0 24px 50px color-mix(in srgb,var(--color-ink) 14%,transparent); }
.octopi-case-deliverables li, .octopi-accordion details,
.octopi-project-outcome > div:last-child { background: var(--color-surface); }
.octopi-project-meta, .octopi-form-grid { background: var(--color-border); }
.octopi-block-footer, .octopi-visual-cta__grid, .octopi-visual-marquee, .octopi-core-card,
.octopi-project-snapshot, .octopi-contact-reference-note, .octopi-project-spotlight__frame,
.octopi-editorial-grid__studio-thoughts, .octopi-editorial-grid__studio-thoughts a,
.single-project .wp-block-post-content > .octopi-content-section .octopi-content-section__grid,
.single-project .octopi-content-section__media, .single-project .octopi-visual-gallery > .octopi-container,
.single-project .octopi-visual-gallery__item, .octopi-project-outcome, .octopi-project-outcome > div:last-child,
.octopi-project-related-thoughts a, .octopi-project-next a, .octopi-project-next,
.home .octopi-editorial-grid--audiences .octopi-editorial-grid__items article,
.home .octopi-project-spotlight--home .octopi-project-spotlight__media,
.home .octopi-visual-cta__grid { border-color: var(--color-border); }
.octopi-button:hover, .octopi-button:focus-visible, .octopi-audience-card:hover,
.octopi-filter-chip.is-active, .octopi-filter-chip:hover, .octopi-project-filters button:hover,
.octopi-card--project:hover { border-color: color-mix(in srgb,var(--color-foreground) 35%,transparent); }
.octopi-button:hover, .octopi-button:focus-visible { box-shadow: 0 12px 40px color-mix(in srgb,var(--color-ink) 22%,transparent); }
.octopi-button--ghost { background: color-mix(in srgb,var(--color-foreground) 8%,transparent); }
.octopi-button.is-primary, .octopi-button--light,
.octopi-builder-section .octopi-button--light {
  background: var(--builder-button-bg,var(--color-button));
  color: var(--builder-button-text,var(--color-button-text));
}
.octopi-work-filters .octopi-filter-chip { color: var(--color-muted); }
.octopi-work-filters .octopi-filter-chip.is-active,
.octopi-project-filters button.is-active { background: var(--color-button); color: var(--color-button-text); }

/* Forms and feedback. Status wording remains available in addition to color. */
.octopi-lead-form, .octopi-form-grid > label { background: var(--color-surface); border-color: var(--color-border); }
.octopi-lead-form input, .octopi-lead-form select, .octopi-lead-form textarea,
.octopi-form input, .octopi-form select, .octopi-form textarea {
  background: var(--color-background); color: var(--color-foreground); border-color: var(--color-input);
}
.octopi-lead-form :is(input,textarea)::placeholder, .octopi-form :is(input,textarea)::placeholder { color: var(--color-muted); opacity: 1; }
.octopi-choice-grid span { color: var(--color-foreground)!important; border-color: var(--color-input); }
.octopi-choice-pills span { color: var(--color-foreground); background: var(--color-card); }
.octopi-choice-grid input:checked + span, .octopi-choice-pills input:checked + span,
.octopi-choice-pills label:hover span { border-color: var(--color-accent); background: color-mix(in srgb,var(--color-accent) 14%,transparent); }
.octopi-form-actions [data-form-message][data-state="success"] { color: var(--color-success); }
.octopi-form-actions [data-form-message][data-state="error"] { color: var(--color-error); }

/* Media uses a dedicated pair, independent of light/dark page text. */
.octopi-project-tile__meta strong, .octopi-project-tile__icon,
.octopi-visual-card__overlay, .octopi-visual-card__overlay h3,
.octopi-spotlight-card__copy h3, .octopi-service-story__master figcaption,
.octopi-service-story__outputs figcaption { color: var(--color-on-media); }
.octopi-project-tile__meta small, .octopi-visual-card__overlay p,
.octopi-spotlight-card__copy p, .octopi-spotlight-card__copy .octopi-eyebrow,
.octopi-spotlight-card__meta, .octopi-spotlight-card__corner,
.octopi-homepage-hero__visual-copy, .octopi-hero__visual-copy,
.octopi-hero__visual.is-home-hero .octopi-hero__visual-copy,
.octopi-service-story__master figcaption span,
.home .octopi-project-spotlight--home .octopi-project-spotlight__media > div > p:nth-of-type(2) { color: color-mix(in srgb,var(--color-on-media) 80%,transparent); }
.octopi-project-tile__pill, .octopi-homepage-hero__visual-pill, .octopi-hero__visual-pill,
.octopi-service-story__outputs figcaption {
  color: var(--color-on-media); border-color: color-mix(in srgb,var(--color-on-media) 18%,transparent);
  background: color-mix(in srgb,var(--color-overlay) 58%,transparent);
}
.octopi-project-tile__icon, .octopi-service-story__project-arrow {
  border-color: color-mix(in srgb,var(--color-on-media) 20%,transparent);
  background: color-mix(in srgb,var(--color-overlay) 20%,transparent);
}
.home .octopi-project-spotlight--home .octopi-button {
  color: var(--color-on-media); border-color: color-mix(in srgb,var(--color-on-media) 25%,transparent);
  background: color-mix(in srgb,var(--color-overlay) 20%,transparent);
}
.octopi-project-tile__overlay { background: linear-gradient(180deg,color-mix(in srgb,var(--color-overlay) 3%,transparent),color-mix(in srgb,var(--color-overlay) 12%,transparent) 42%,color-mix(in srgb,var(--color-overlay) 62%,transparent)); }
.octopi-spotlight-card__overlay { background: linear-gradient(180deg,color-mix(in srgb,var(--color-overlay) 8%,transparent),color-mix(in srgb,var(--color-overlay) 28%,transparent) 45%,color-mix(in srgb,var(--color-overlay) 72%,transparent)); }
.octopi-homepage-hero__visual-overlay { background: linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--color-overlay) 52%,transparent)); }
.octopi-visual-card__overlay { background: linear-gradient(transparent,color-mix(in srgb,var(--color-overlay) 82%,transparent)); }
.octopi-service-story__master figcaption { background: linear-gradient(transparent,color-mix(in srgb,var(--color-overlay) 78%,transparent)); }
.octopi-project-tile__sheen { background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-on-media) 12%,transparent),transparent); }
.octopi-service-tile__shade { background: linear-gradient(180deg,color-mix(in srgb,var(--color-overlay) 4%,transparent),color-mix(in srgb,var(--color-overlay) 40%,transparent)),color-mix(in srgb,var(--color-overlay) calc(var(--service-hover-overlay,.65) * 100%),transparent); }
.octopi-editorial-grid--services .has-hover-image:focus-visible .octopi-service-tile__body :is(h3,p) { color: var(--color-on-media); }
@media (hover:hover) {
  .octopi-editorial-grid--services .has-hover-image:hover .octopi-service-tile__body :is(h3,p) { color: var(--color-on-media); }
}
.octopi-thought-index__hover::after { background: color-mix(in srgb,var(--color-overlay) calc(var(--thought-hover-overlay,.7) * 100%),transparent); }
.octopi-thought-index__row.has-hover-image:focus-visible h2 { color: var(--color-on-media); }
.octopi-thought-index__row.has-hover-image:focus-visible > div > p { color: color-mix(in srgb,var(--color-on-media) 80%,transparent); }
@media (hover:hover) and (pointer:fine) { .octopi-thought-index__row.has-hover-image:hover h2 { color: var(--color-on-media); } }
@media (hover:hover) and (pointer:fine) { .octopi-thought-index__row.has-hover-image:hover > div > p { color: color-mix(in srgb,var(--color-on-media) 80%,transparent); } }

/* Ambient artwork is derived from brand roles; uploaded images are not recolored. */
.home .octopi-visual-cta__grid, .octopi-panel--cta { background: linear-gradient(135deg,var(--color-surface),var(--color-background)); }
.octopi-panel--cta::after { background: radial-gradient(circle,color-mix(in srgb,var(--color-accent) 22%,transparent),transparent 60%); }
.octopi-homepage-hero__visual, .octopi-react-canary-media > div + div { background: linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 16%,var(--color-ink)),color-mix(in srgb,var(--color-accent) 28%,var(--color-ink)),var(--color-ink)); }
.octopi-react-canary-media > div { background: linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 16%,var(--color-ink)),color-mix(in srgb,var(--color-primary) 28%,var(--color-ink)),var(--color-ink)); }
.octopi-spotlight-card__placeholder { background: linear-gradient(135deg,color-mix(in srgb,var(--color-warm) 16%,var(--color-ink)),color-mix(in srgb,var(--color-warm) 32%,var(--color-ink)),var(--color-ink)); }
.octopi-spotlight-card__glow { background: radial-gradient(circle,color-mix(in srgb,var(--color-warm) 34%,transparent),color-mix(in srgb,var(--color-warm) 8%,transparent) 42%,transparent 72%); }
.octopi-homepage-hero__visual-glow { background: radial-gradient(circle,color-mix(in srgb,var(--color-accent) 18%,transparent),color-mix(in srgb,var(--color-primary) 10%,transparent) 34%,transparent 70%); }
.octopi-hero__visual, .octopi-card__placeholder { background: radial-gradient(circle at 22% 25%,color-mix(in srgb,var(--color-primary) 22%,transparent),transparent 22%),radial-gradient(circle at 78% 55%,color-mix(in srgb,var(--color-warm) 14%,transparent),transparent 22%),linear-gradient(135deg,var(--color-surface),var(--color-card)); }
.octopi-hero__visual.is-home-hero { background: radial-gradient(circle at 10% 56%,color-mix(in srgb,var(--color-accent) 24%,transparent),transparent 23%),radial-gradient(circle at 89% 59%,color-mix(in srgb,var(--color-primary) 18%,transparent),transparent 24%),var(--color-ink); }
.octopi-hero__visual-orb { background: radial-gradient(circle,color-mix(in srgb,var(--color-primary) 55%,transparent),color-mix(in srgb,var(--color-primary) 8%,transparent) 45%,transparent 70%); }
.octopi-card--project::before, .octopi-project-tile__frame::before { background: radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),color-mix(in srgb,var(--color-primary) 14%,transparent),transparent 35%); }
.octopi-scroll-cue i { background: var(--color-border); }
.octopi-scroll-cue i::after { background: linear-gradient(180deg,transparent,var(--color-primary),transparent); }
.octopi-homepage-hero::before { background-image: linear-gradient(to right,var(--color-border) 1px,transparent 1px); }
.octopi-homepage-hero__visual-grid, .octopi-hero__visual-grid, .octopi-spotlight-card__mesh { background-image: linear-gradient(to right,var(--color-border) 1px,transparent 1px),linear-gradient(to bottom,var(--color-border) 1px,transparent 1px); }
.octopi-hero__media, .octopi-media-frame, .octopi-card__media { background: var(--color-card); box-shadow: inset 0 1px 0 var(--color-border),0 40px 80px color-mix(in srgb,var(--color-ink) 18%,transparent); }