/* Shared theme treatment. Light is intentionally the base experience. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="light"] body,
:root[data-theme="light"] html {
  background: #fff3f4 !important;
  color: #24191a !important;
}

:root[data-theme="light"] body {
  background: radial-gradient(circle at 88% 0%, rgba(255, 52, 62, .13), transparent 30%), linear-gradient(180deg, #ffe8ea 0%, #fff8f8 38%, #fff3f4 100%) !important;
  background-attachment: fixed !important;
}

:root[data-theme="light"] .shell,
:root[data-theme="light"] .board {
  background: transparent !important;
}

:root[data-theme="light"] nav,
:root[data-theme="light"] header,
:root[data-theme="light"] .topbar {
  background: linear-gradient(180deg, rgba(255, 248, 248, .98) 70%, rgba(255, 248, 248, 0)) !important;
}

:root[data-theme="light"] :is(.side-card,.stat,.compare-card,.loop-step,.capability,.agent-card,.layer,.outcome,.faq details,.footer-cta,article,.column,.panel,.product,.focus div,.site-nav,.nav-links,.filters,.service,.summary-service,.phase,.channel) {
  background: #ffffff !important;
  border-color: #ead6d8 !important;
  color: #24191a !important;
}

:root[data-theme="light"] :is(.description,.section-intro,.top p,.intro p,header p,.compare ul,.capability p,.agent-card p,.layer p,.outcome p,.faq-answer,.footer-cta p,.note,.empty,.summary-empty,.summary-row,.field,label) {
  color: #735e60 !important;
}

/* Keep text readable against the light cards, including collapsed FAQ items. */
:root[data-theme="light"] :is(h1,h2,h3,h4,.faq summary,.compare-kicker,.column-title h2,.panel-head h2,.product h3,.service b,.summary-service b,.summary-row span:last-child,.item span,.empty b) {
  color: #2d1b1d !important;
}

:root[data-theme="light"] .faq summary { font-weight: 700; }
:root[data-theme="light"] .faq-answer { color: #5e484a !important; }

/* Light-mode panels remain bright and use high-contrast dark copy. */
:root[data-theme="light"] :is(.side-card,.stat,.compare-card,.loop-step,.capability,.agent-card,.layer,.outcome,.faq details,.footer-cta,article,.column,.panel,.product,.focus div,.site-nav,.nav-links,.filters,.service,.summary-service,.phase,.channel) :is(h1,h2,h3,h4,p,span,strong,small,li,label,a,button,b,summary,.faq-answer,.compare-kicker,.kpi-sub,.top p,.note,.empty,.summary-row,.field) {
  color: #2d1b1d !important;
}

:root[data-theme="light"] :is(.side-card,.stat,.compare-card,.loop-step,.capability,.agent-card,.layer,.outcome,.faq details,.footer-cta,article,.column,.panel,.product,.focus div,.site-nav,.nav-links,.filters,.service,.summary-service,.phase,.channel) :is(input,textarea,select) {
  color: #2d1b1d !important;
  background: #fff !important;
}

:root[data-theme="light"] :is(.site-nav a.active,.nav-links a.active,.mobile-nav a.active,.button.primary,.call,.footer-actions a:first-child,.filters .active,.checkout,.button) {
  color: #fff !important;
}

:root[data-theme="light"] :is(.badge,.filters .active,.product-categories button.active,.service.active,.pagination button.active) {
  color: #fff !important;
}

:root[data-theme="light"] .badge {
  background: #080404 !important;
  color: #fff !important;
}

:root[data-theme="light"] .service.active {
  background: var(--red, #ff343e) !important;
  border-color: var(--red, #ff343e) !important;
  color: #fff !important;
}

:root[data-theme="light"] .service.active small { color: #fff !important; }

:root[data-theme="light"] .service:hover,
:root[data-theme="light"] .service.active,
:root[data-theme="light"] .service:hover small,
:root[data-theme="light"] .service.active small {
  color:#fff !important;
}

/* All red action surfaces retain white text in light mode. */
:root[data-theme="light"] :is(.button,.call,.checkout,.layer-button,.filters .active,.site-nav a.active,.nav-links a.active,.mobile-nav a.active,.theme-toggle button[aria-pressed="true"],.pagination button.active,.product-categories button.active,.service.active,.blazie-chat-button) {
  color:#fff !important;
}

:root[data-theme="light"] :is(.site-nav,.nav-links) a.active,
:root[data-theme="light"] .language-switcher button[aria-pressed="true"] {
  color:#fff !important;
}

:root[data-theme="light"] .workflow {
  background: #080404 !important;
  border-color: #72242b !important;
  color: #fff !important;
}

:root[data-theme="light"] .workflow strong { color: var(--red, #ff343e) !important; }

/* Project dashboard cards follow the light palette too. */
:root[data-theme="light"] .category-chart {
  background: #fff !important;
  border-color: #ead6d8 !important;
}

:root[data-theme="light"] .category-chart :is(strong,small) { color: #2d1b1d !important; }
:root[data-theme="light"] .donut::before { background: #fff !important; box-shadow: inset 0 0 0 1px #ead6d8 !important; }
:root[data-theme="light"] .donut b { color: #2d1b1d !important; }

:root[data-theme="light"] .display,
:root[data-theme="light"] .display * { color: #fff !important; }

:root[data-theme="light"] :is(.project-table,.project-row,.project-head) {
  background: #fff !important;
  border-color: #ead6d8 !important;
}

:root[data-theme="light"] :is(.project-head,.project-date,.project-date small,.project-service,.project-quantity,.project-client) {
  color: #2d1b1d !important;
}

:root[data-theme="light"] .project-row:not(.project-head):hover { background: #fff6f6 !important; }

/* Keep the workflow callout visually connected to the next section. */
.agent-team + .outcomes { padding-top:clamp(48px,7vw,80px) !important; }

.product.is-selected {
  border-color:var(--red, #ff343e) !important;
  box-shadow:0 0 0 1px var(--red, #ff343e),0 0 18px rgba(255,52,62,.18);
}

:root[data-theme="light"] .pagination button {
  min-width:44px;
  height:40px;
  padding:0 14px;
  background:#fff !important;
  border-color:#ead6d8 !important;
  color:#2d1b1d !important;
}

:root[data-theme="light"] .pagination button:hover {
  border-color:var(--red, #ff343e) !important;
  color:#2d1b1d !important;
}

:root[data-theme="light"] .pagination button.active {
  background:var(--red, #ff343e) !important;
  border-color:var(--red, #ff343e) !important;
  color:#fff !important;
}

:root[data-theme="light"] .topbar {
  background:#fff8f8 !important;
  box-shadow:0 8px 18px rgba(69, 32, 35, .08);
}

/* Remove the oversized header panel while retaining the navigation controls. */
:root[data-theme="light"] :is(.shell > nav,.shell > header,.shell > .topbar,.board > .topbar) {
  background:transparent !important;
  box-shadow:none !important;
}

/* Increase the brand mark by 50% across the site. */
.brand img { width:177px !important; max-height:69px !important; }
@media (max-width:760px) { :is(.shell > header,.shell > .topbar,.board > .topbar,.shell > nav) .brand img { width:114px !important; max-height:52px !important; } }

.shell > nav { border-top:0 !important; border-bottom:1px solid var(--line, #ead6d8) !important; }

/* Shared page canvas: Services, Pricing, and Projects follow the Index design. */
:is(.shell,.board) {
  width:min(1440px,100%) !important;
  margin-inline:auto !important;
}

:root[data-theme="light"] :is(.shell,.board) {
  background:transparent !important;
}

:root[data-theme="dark"] body { background:#030303 !important; }
:root[data-theme="dark"] :is(.shell,.board) {
  background:radial-gradient(circle at 90% 0%,rgba(85,6,13,.2),transparent 30%),#030303 !important;
}

/* A consistent outer rhythm keeps every page visually part of one site. */
.board { padding:18px clamp(18px,3vw,44px) 30px !important; }
.shell { padding-inline:clamp(18px,3vw,44px) !important; }

/* Product cards use a compact horizontal layout. */
.products .product {
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
}
.products .product button { align-self:center !important; margin-top:0 !important; }
.products section { grid-template-columns:1fr !important; }
@media (max-width:480px) {
  .products .product { grid-template-columns:1fr !important; gap:12px !important; }
  .products .product button { justify-self:start; }
  .pagination {
    display:flex !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }
  .pagination button {
    min-width:0 !important;
    width:100%;
    padding-inline:4px !important;
  }
  .pagination-ellipsis { display:grid; place-items:center; min-width:22px; color:#735e60; font-weight:700; }
}

#selected-service { display:grid; gap:4px; }
.summary-group { border-bottom:1px solid var(--line, #ead6d8); padding:0 0 8px; }
.summary-group + .summary-group { padding-top:10px; }
.summary-group > p { margin:0; color:var(--red, #ff343e); font-size:10px; font-weight:800; letter-spacing:.04em; }


:root[data-theme="light"] :is(.brand,.button,.chat-link,.footer-actions a,.site-nav a,.nav-links a,.mobile-nav a,.service,.field input,.field textarea,select,input,.pagination button,.quantity-controls button) {
  color: #3a2527 !important;
}

:root[data-theme="light"] :is(.field input,.field textarea,select,input,.product-categories button,.pagination button,.quantity-controls button) {
  background: #fff !important;
  border-color: #e6d0d2 !important;
}

:root[data-theme="light"] :is(.site-nav a:hover,.nav-links a:hover) { color: #24191a !important; }
:root[data-theme="light"] :is(.site-nav a.active,.nav-links a.active,.mobile-nav a.active,.button.primary,.call,.footer-actions a:first-child,.filters .active,.checkout,.button) { color: #fff !important; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  justify-self: end;
  white-space: nowrap;
  padding: 4px;
  border: 1px solid var(--line, #d8c7c8);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font: 700 11px Geist, Arial, sans-serif;
}

[data-theme="dark"] .theme-toggle { background: #100708; }
.theme-toggle button { border: 0; border-radius: 999px; padding: 8px 11px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.theme-toggle button[aria-pressed="true"] { background: var(--red, #ff343e); color: #fff; box-shadow: 0 0 14px rgba(255,52,62,.25); }
.blazie-chat-button { position:fixed; right:22px; bottom:22px; z-index:80; display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:13px 17px; background:#ff343e; box-shadow:0 10px 28px rgba(255,52,62,.28); color:#fff; font:700 12px Geist,Arial,sans-serif; text-decoration:none; }
.blazie-chat-button span:first-child { font-size:18px; line-height:1; }
@media (max-width:650px) { .blazie-chat-button { right:16px; bottom:16px; padding:12px 14px; } }
@media (min-width:901px) { .menu { display:none; } }
.back-to-top { position:fixed; right:178px; bottom:22px; z-index:80; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--red, #ff343e); border-radius:50%; background:#fff; box-shadow:0 8px 20px rgba(69,32,35,.15); color:var(--red, #ff343e); font:700 22px Geist,Arial,sans-serif; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease,transform .2s ease; }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
[data-theme="dark"] .back-to-top { background:#100708; color:#fff; }
@media (max-width:650px) { .back-to-top { right:150px; bottom:16px; width:38px; height:38px; } }

/* Navigation scrolls with the page on every screen. */
nav, header, .topbar { position:relative !important; top:auto !important; }
@media (max-width: 760px) {
  /* Keep the logo, navigation, and theme switch on one compact line. */
  :is(.shell > header,.shell > .topbar,.board > .topbar) {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    justify-items:initial !important;
    flex-direction:row !important;
    gap:8px !important;
  }
  :is(.shell > header,.shell > .topbar,.board > .topbar) .brand img { width:76px !important; }
  :is(.shell > header,.shell > .topbar,.board > .topbar) .site-nav {
    min-width:0;
    max-width:none !important;
    overflow-x:auto !important;
    scrollbar-width:none;
  }
  :is(.shell > header,.shell > .topbar,.board > .topbar) .site-nav a { padding:8px 9px !important; font-size:10px !important; }
  :is(.shell > nav) { gap:8px; }
  :is(.shell > nav) .brand img { width:86px; }
  :is(.shell > nav) .menu { padding:9px 10px; }
  .theme-toggle button { padding:7px 8px; }
  .nav-links {
    display:flex !important;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .nav-links a { white-space:nowrap; padding:8px 10px !important; font-size:10px !important; }
  .shell > nav .menu,
  .mobile-nav { display:none !important; }
}

.mobile-carousel-controls { display:none; }
@media (max-width: 650px) {
  .agent-grid,
  .outcome-grid,
  .capabilities {
    display:flex !important;
    grid-template-columns:none !important;
    gap:12px !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:0 2px 10px;
    scrollbar-width:none;
  }
  .agent-grid::-webkit-scrollbar,
  .outcome-grid::-webkit-scrollbar,
  .capabilities::-webkit-scrollbar { display:none; }
  .agent-grid .agent-card,
  .outcome-grid .outcome,
  .capabilities .capability {
    flex:0 0 calc(100% - 24px);
    scroll-snap-align:start;
  }
  .agent-grid .agent-art { height:220px !important; }
  .agent-grid .agent-art img { object-fit:contain !important; }
  .mobile-carousel-controls {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:16px 0 8px;
    color:#735e60;
    font-size:11px;
    font-weight:700;
  }
  .mobile-carousel-controls button {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid var(--red, #ff343e);
    border-radius:50%;
    background:#fff;
    color:var(--red, #ff343e);
    font:700 18px Geist,Arial,sans-serif;
    cursor:pointer;
  }
  [data-theme="dark"] .mobile-carousel-controls button { background:#100708; color:#fff; }
  .category-dashboard { display:flex !important; gap:12px !important; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:0 2px 10px; scrollbar-width:none; }
  .category-dashboard::-webkit-scrollbar { display:none; }
  .category-dashboard .category-chart { flex:0 0 calc(100% - 32px); scroll-snap-align:start; }
}