/* Branflow appearance system. Loaded after the viewport-specific stylesheet. */
:root[data-theme="light"] body {
  color: #090b10;
  background: #edf0f6;
}

:root[data-theme="dark"] body {
  color: #f4f7fa;
  background: #0c0e13;
}

.studio-home,
.studio-header,
.studio-hero,
.studio-proof,
.studio-case,
.studio-assembly,
.studio-offers,
.studio-integrations,
.studio-about,
.studio-faq,
.studio-quote,
.studio-after,
.studio-footer {
  transition: color .28s ease, background-color .28s ease, border-color .28s ease;
}

.studio-home .theme-toggle .theme-toggle-sun,
.studio-home .theme-toggle .theme-toggle-moon {
  width: 18px;
  height: 18px;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}

.studio-home .theme-toggle .theme-toggle-sun { display: grid; }
.studio-home .theme-toggle .theme-toggle-moon { display: none; }
:root[data-theme="light"] .studio-home .theme-toggle .theme-toggle-sun { display: none; }
:root[data-theme="light"] .studio-home .theme-toggle .theme-toggle-moon { display: grid; }

/* Shared surfaces follow the selected theme in both desktop and mobile builds. */
:root[data-theme] .studio-proof,
:root[data-theme] .studio-integrations {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

:root[data-theme] .studio-proof div { border-color: var(--line); }
:root[data-theme] .studio-integrations-copy .studio-kicker,
:root[data-theme] .studio-integrations-copy > p:last-of-type { color: var(--muted); }
:root[data-theme] .studio-integrations-copy > a { border-color: var(--ink); }
:root[data-theme] .studio-integration-orbit,
:root[data-theme] .studio-integration-orbit::before,
:root[data-theme] .studio-integration-orbit::after { border-color: var(--line); }

:root[data-theme="dark"] .studio-orbit-item {
  color: #f4f7fa;
  background: #1b2130;
  border-color: rgba(244,247,250,.17);
  box-shadow: 0 12px 35px rgba(0,0,0,.24);
}

:root[data-theme="dark"] .studio-orbit-item.orbit-9 { color: #071022; background: var(--studio-cyan); }
:root[data-theme="dark"] .studio-orbit-item.orbit-10 { color: #fff; background: var(--studio-blue); }

/* The header becomes unmistakably light and remains readable above every section. */
:root[data-theme="light"] .studio-header {
  color: #090b10;
  background: rgba(255,255,255,.88);
  border-color: rgba(9,11,16,.16);
  box-shadow: 0 18px 55px rgba(19,31,58,.13);
}

:root[data-theme="light"] .studio-desktop-nav a { color: #414957; }
:root[data-theme="light"] .studio-desktop-nav a:hover { color: #090b10; }
:root[data-theme="light"] .studio-home .theme-toggle,
:root[data-theme="light"] .studio-home .language-switcher > summary,
:root[data-theme="light"] .studio-mobile-nav > summary,
:root[data-theme="light"] .studio-mobile-nav > nav > div > a {
  color: #090b10;
  background: rgba(9,11,16,.045);
  border-color: rgba(9,11,16,.15);
}

:root[data-theme="light"] .studio-home .theme-toggle:hover,
:root[data-theme="light"] .studio-home .language-switcher > summary:hover { background: rgba(9,11,16,.09); }
:root[data-theme="light"] .studio-mobile-nav > summary span { background: #090b10; }
:root[data-theme="light"] .studio-home .language-menu,
:root[data-theme="light"] .studio-mobile-nav > nav {
  color: #090b10;
  background: rgba(255,255,255,.98);
  border-color: rgba(9,11,16,.15);
  box-shadow: 0 22px 55px rgba(19,31,58,.16);
}

:root[data-theme="light"] .studio-home .language-menu a,
:root[data-theme="light"] .studio-mobile-nav > nav > a { color: #414957; border-color: rgba(9,11,16,.1); }
:root[data-theme="light"] .studio-home .language-menu a:hover,
:root[data-theme="light"] .studio-home .language-menu a[aria-current="page"],
:root[data-theme="light"] .studio-mobile-nav > nav > div > a[aria-current="page"] { color: #fff; background: #090b10; }
:root[data-theme="light"] .studio-mobile-nav > nav > div { border-color: rgba(9,11,16,.12); }

/* Hero: the visual remains cinematic, while its surrounding story actually changes theme. */
:root[data-theme="light"] .studio-hero {
  color: #090b10;
  background:
    linear-gradient(90deg, rgba(247,249,253,.99) 0%, rgba(247,249,253,.94) 45%, rgba(230,237,250,.7) 70%, rgba(247,249,253,.96) 100%),
    radial-gradient(circle at 72% 45%, rgba(59,91,255,.16), transparent 40%),
    #f7f9fd;
}

:root[data-theme="light"] .studio-hero::before {
  opacity: .38;
  background-image: linear-gradient(rgba(9,11,16,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(9,11,16,.055) 1px, transparent 1px);
}

:root[data-theme="light"] .studio-hero::after { color: rgba(9,11,16,.035); }
:root[data-theme="light"] .studio-hero-copy .studio-kicker,
:root[data-theme="light"] .studio-hero-intro { color: #4d5666; }
:root[data-theme="light"] .studio-hero h1 em,
:root[data-theme="light"] .studio-hero-price small { color: #244bd7; }
:root[data-theme="light"] .studio-hero-price {
  border-color: rgba(9,11,16,.17);
}
:root[data-theme="light"] .studio-hero-price p,
:root[data-theme="light"] .studio-direct-note,
:root[data-theme="light"] .studio-scroll-cue { color: #566071; }
:root[data-theme="light"] .studio-scroll-cue span { border-color: rgba(9,11,16,.24); }
:root[data-theme="light"] .studio-button-primary { color: #fff !important; background: #090b10; }
:root[data-theme="light"] .studio-button-ghost { color: #090b10 !important; border-color: rgba(9,11,16,.28); }
:root[data-theme="light"] .studio-button-ghost:hover { background: rgba(9,11,16,.07); }

/* Idea-to-product story */
:root[data-theme="light"] .studio-assembly {
  color: #090b10;
  background: #f3f6fb;
}

:root[data-theme="light"] .studio-assembly-heading h2 em,
:root[data-theme="light"] .studio-assembly-steps li > span { color: #244bd7; }
:root[data-theme="light"] .studio-assembly-heading > p:last-child { color: #596171; }
:root[data-theme="light"] .flow-grid {
  background-image: linear-gradient(rgba(9,11,16,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(9,11,16,.08) 1px, transparent 1px);
}
:root[data-theme="light"] .flow-fragment {
  color: #11151d;
  background: rgba(255,255,255,.92);
  border-color: rgba(9,11,16,.2);
  box-shadow: 0 18px 45px rgba(32,47,77,.16);
}
:root[data-theme="light"] .studio-assembly-scene {
  border-color: rgba(9,11,16,.13);
  background: radial-gradient(circle at center, rgba(59,91,255,.12), transparent 60%);
}
:root[data-theme="light"] .studio-assembly-scene::after { color: #46505f; }
:root[data-theme="light"] .studio-assembly-steps li {
  color: #596171;
  background: rgba(255,255,255,.42);
  border-color: rgba(9,11,16,.14);
}
:root[data-theme="light"] .studio-assembly-steps li[data-active] { color: #090b10; }
:root[data-theme="light"] .studio-assembly-steps li p { color: #596171; }
:root[data-theme="dark"] .studio-assembly-steps li { color: rgba(255,255,255,.62); }
:root[data-theme="dark"] .studio-assembly-steps li[data-active] { color: #fff; }

/* Open brief and Control Ruta use the same mode as the page, while their mockups stay self-contained. */
:root[data-theme="light"] .studio-open-brief {
  color: #090b10;
  background: #fff;
  border: 1px solid rgba(9,11,16,.13);
  box-shadow: 0 30px 70px rgba(28,42,72,.09);
}
:root[data-theme="light"] .studio-open-brief small { color: #244bd7; }
:root[data-theme="light"] .studio-open-brief p { color: #596171; }
:root[data-theme="light"] .studio-open-orbit,
:root[data-theme="light"] .studio-open-orbit::before,
:root[data-theme="light"] .studio-open-orbit::after { border-color: rgba(9,11,16,.15); }

:root[data-theme="light"] .studio-case {
  color: #090b10;
  background: #f7f9fd;
}
:root[data-theme="light"] .studio-case::before { color: rgba(9,11,16,.035); }
:root[data-theme="light"] .studio-case-heading .studio-kicker,
:root[data-theme="light"] .studio-case-heading > p { color: #596171; }
:root[data-theme="light"] .studio-case-heading h2 em,
:root[data-theme="light"] .studio-case-details small { color: #244bd7; }
:root[data-theme="light"] .studio-case-stage { color: #fff; }
:root[data-theme="light"] .studio-case-details {
  border-color: rgba(9,11,16,.16);
}
:root[data-theme="light"] .studio-case-details article { border-color: rgba(9,11,16,.13); }
:root[data-theme="light"] .studio-case-details article > span { color: #697282; }
:root[data-theme="light"] .studio-case-details p { color: #596171; }
:root[data-theme="light"] .studio-case-actions .studio-button-light { color: #fff !important; background: #090b10; }
:root[data-theme="light"] .studio-case-actions > a:last-child { border-color: rgba(9,11,16,.5); }
.studio-case-badges .case-badge-4 { color: #071022; }

/* The real-photo card remains a self-contained dark editorial object in both themes. */
:root[data-theme] .studio-about-portrait {
  color: #fff;
  background: #0a0d13;
  border-color: rgba(93,108,134,.3);
}
:root[data-theme] .studio-about-portrait figcaption { color: #fff; }
:root[data-theme] .studio-about-portrait figcaption > small { color: rgba(255,255,255,.52); }
:root[data-theme] .studio-faq-list summary > span { color: var(--studio-blue-text); }

/* Quote configurator: every field and status has a complete light equivalent. */
:root[data-theme="light"] .studio-quote {
  color: #090b10;
  background: #edf1f7;
}
:root[data-theme="light"] .studio-quote-heading .studio-kicker,
:root[data-theme="light"] .studio-quote-heading > div:last-child > p { color: #596171; }
:root[data-theme="light"] .studio-quote-heading h2 em { color: #244bd7; }
:root[data-theme="light"] .studio-quote-heading > div:last-child > a { border-color: rgba(9,11,16,.48); }
:root[data-theme="light"] .studio-quote .bf-quote-form,
:root[data-theme="light"] .studio-quote .bf-compact-quote-form {
  color: #090b10;
  background: #fff;
  border-color: rgba(9,11,16,.15);
  box-shadow: 0 28px 70px rgba(28,42,72,.08);
}
:root[data-theme="light"] .studio-quote .bf-quote-progress { border-color: rgba(9,11,16,.14); }
:root[data-theme="light"] .studio-quote .bf-quote-progress li { color: #697282; }
:root[data-theme="light"] .studio-quote .bf-quote-progress li.active,
:root[data-theme="light"] .studio-quote .bf-quote-progress li.complete { color: #090b10; border-bottom-color: #244bd7; }
:root[data-theme="light"] .studio-quote .bf-quote-step > p,
:root[data-theme="light"] .studio-quote .bf-capability-block > p { color: #596171; }
:root[data-theme="light"] .studio-quote .bf-goal-grid label > span {
  color: #090b10;
  background: #f7f9fc;
  border-color: rgba(9,11,16,.15);
}
:root[data-theme="light"] .studio-quote .bf-goal-grid label:hover > span,
:root[data-theme="light"] .studio-quote .bf-goal-grid label.selected > span { background: rgba(59,91,255,.09); }
:root[data-theme="light"] .studio-quote .bf-goal-grid i { border-color: rgba(9,11,16,.45); }
:root[data-theme="light"] .studio-quote .bf-goal-grid label.selected i { box-shadow: inset 0 0 0 4px #fff; }
:root[data-theme="light"] .studio-quote .bf-goal-grid small { color: #596171; }
:root[data-theme="light"] .studio-quote .bf-capability-block { border-color: rgba(9,11,16,.14); }
:root[data-theme="light"] .studio-quote .bf-capability-grid span { color: #46505f; border-color: rgba(9,11,16,.16); }
:root[data-theme="light"] .studio-quote .bf-contact-fields label,
:root[data-theme="light"] .studio-quote .bf-compact-quote-form label > span,
:root[data-theme="light"] .studio-quote .bf-compact-consent { color: #46505f; }
:root[data-theme="light"] .studio-quote .bf-contact-fields input,
:root[data-theme="light"] .studio-quote .bf-contact-fields select,
:root[data-theme="light"] .studio-quote .bf-contact-fields textarea,
:root[data-theme="light"] .studio-quote .bf-compact-quote-form input,
:root[data-theme="light"] .studio-quote .bf-compact-quote-form select,
:root[data-theme="light"] .studio-quote .bf-compact-quote-form textarea {
  color: #090b10;
  background: #f8fafd;
  border-color: rgba(9,11,16,.17);
}
:root[data-theme="light"] .studio-quote .bf-quote-consent { color: #596171; }
:root[data-theme="light"] .studio-quote .bf-quote-back { color: #090b10; border-color: rgba(9,11,16,.2); }
:root[data-theme="light"] .studio-quote .bf-quote-privacy { color: #596171; }
:root[data-theme="dark"] .studio-quote .bf-quote-progress li { color: rgba(255,255,255,.6); }
:root[data-theme="dark"] .studio-quote .bf-quote-progress li.active,
:root[data-theme="dark"] .studio-quote .bf-quote-progress li.complete { color: #fff; }
:root[data-theme="dark"] .studio-quote .bf-quote-privacy { color: rgba(255,255,255,.62); }

/* Footer and the mobile quote bar complete the mode instead of snapping back to black. */
:root[data-theme="light"] .studio-footer {
  color: #090b10;
  background: #fff;
  border-color: rgba(9,11,16,.14);
}
:root[data-theme="light"] .studio-footer-claim small { color: #244bd7; }
:root[data-theme="light"] .studio-footer-links { border-color: rgba(9,11,16,.14); }
:root[data-theme="light"] .studio-footer-links small,
:root[data-theme="light"] .studio-footer-bottom { color: #596171; }
:root[data-theme="light"] .studio-footer-links a { color: #343c49; }
:root[data-theme="light"] .studio-footer-links a:hover { color: #090b10; }
:root[data-theme="light"] .studio-footer-bottom { border-color: rgba(9,11,16,.12); }
:root[data-theme="light"] .studio-mobile-quote {
  color: #090b10;
  background: rgba(255,255,255,.96);
  border-color: rgba(9,11,16,.16);
  box-shadow: 0 15px 45px rgba(19,31,58,.16);
}
:root[data-theme="light"] .studio-mobile-quote small { color: #596171; }

@media (prefers-reduced-motion: reduce) {
  .studio-home,
  .studio-header,
  .studio-hero,
  .studio-proof,
  .studio-case,
  .studio-assembly,
  .studio-offers,
  .studio-integrations,
  .studio-about,
  .studio-faq,
  .studio-quote,
  .studio-after,
  .studio-footer { transition: none; }
}