/* ═══════════════════════════════════════════════════════════════════
   CREO / 2026 — GLOBAL INTEGRATION STYLES · revision 1.0
   Applies ONLY to the nine CREO sections and their T123 wrappers.
   Do not remove each section's own  / .
   Source: original CREO 01 V7, 02, 03, 04, 05 ABOUT, 06, 07, 08 V2, 09 V2.
   Global theme state: html[data-creo-theme="dark" | "light"]
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --creo-bg-dark:#101010;
  --creo-bg-light:#ffffff;
  --creo-ink-dark:#f3f0e9;
  --creo-ink-light:#171713;
  --creo-orange:#ff4e00;
  --creo-orange-hot:#ff6500;
  --creo-scroll-duration:.44s;
}

/* Page canvas: no white Tilda gaps between HTML sections. */
html[data-creo-theme="dark"],html[data-creo-theme="dark"] body,
html[data-creo-theme="dark"] #allrecords,html[data-creo-theme="dark"] .t-records{
  background-color:#101010!important;
  color:#f3f0e9;
}
html[data-creo-theme="light"],html[data-creo-theme="light"] body,
html[data-creo-theme="light"] #allrecords,html[data-creo-theme="light"] .t-records{
  background-color:#ffffff!important;
  color:#171713;
}
html[data-creo-theme] {scroll-padding-top:82px;scroll-behavior:smooth;}
html[data-creo-theme] body{margin:0;overflow-x:clip;}
@supports not (overflow:clip){html[data-creo-theme] body{overflow-x:hidden;}}

/* T123 parent records can carry an opaque background or block padding.
   :has is supported by current Safari/Chrome/Firefox. Unsupported browsers
   simply keep the original block-level layout. */
@supports selector(.t-rec:has(#creo26-hero)) {
  html[data-creo-theme] .t-rec:has(:is(
    #creo26-hero,#creo-works,#creo-services,#creo-reports,
    #creo-about,#creo-approach,#creo-why,#creo-faq,#creo-contacts
  )){background:transparent!important;margin-block:0!important;padding-block:0!important;}
}

/* Dark is the opening design. Use the section's existing CSS variables and
   native dark class names, NOT a blanket "filter:invert" or CSS transform. */
html[data-creo-theme="dark"] #creo26-hero{
  --c26-paper:#101010;
  --c26-ink:#f3f0e9;
  --c26-muted:#bcb5a9;
  --c26-edge:rgba(243,240,233,.20);
  --c26-panel:#101010;
  background:#101010!important;
  color:#f3f0e9;
}
html[data-creo-theme="dark"] #creo26-hero .c26-header{
  background:#101010!important;
  color:#f3f0e9;
}
html[data-creo-theme="dark"] #creo26-hero .c26-menu{
  background:#101010!important;
}
/* Keep the actual animated orange studio art; remove unrelated full-screen
   background lighting in dark mode. */
html[data-creo-theme="dark"] #creo26-hero .c26-spot{background:none!important;}
html[data-creo-theme="dark"] #creo26-hero .c26-grid{background-image:none!important;}

html[data-creo-theme="dark"] #creo-works{
  --w-bg:#101010;--w-paper:#1b1a18;--w-fg:#f3f0e9;
  --w-muted:#aaa49c;--w-line:rgba(255,255,255,.19);
  --w-surf:#201d1a;background-color:#101010!important;color:#f3f0e9;
}
html[data-creo-theme="dark"] #creo-services{
  --s3-paper:#101010;--s3-ink:#f3f0e9;--s3-muted:#aba59c;
  --s3-line:rgba(255,255,255,.18);--s3-card:#1d1c1b;
  --s3-shadow:rgba(0,0,0,.24);background-color:#101010!important;
  color:#f3f0e9;
}
html[data-creo-theme="dark"] #creo-reports{
  --r-bg:#101010;--r-ink:#f3f0e9;--r-muted:#aaa39a;
  --r-outline:rgba(243,240,233,.16);--r-pane:#1b1a18;
  --r-panel:#1a1917;--r-shadow:rgba(0,0,0,.38);
  background-color:#101010!important;color:#f3f0e9;
}
/* Block 05: About us, NOT old Before/After comparison. */
html[data-creo-theme="dark"] #creo-about{
  --ca-paper:#101010;--ca-paper-2:#141414;
  --ca-ink:#f4efe7;--ca-ink-soft:#d7cec2;--ca-muted:#9b948b;
  --ca-line:rgba(255,255,255,.08);--ca-card:rgba(255,255,255,.04);
  --ca-card-border:rgba(255,255,255,.09);
  background:#101010!important;color:#f4efe7;
}
/* No full-section gradient; the animated orange glass sculpture remains. */
html[data-creo-theme="dark"] #creo-about .creo-about__bg{background:none!important;}
html[data-creo-theme="dark"] #creo-about .creo-about__noise{display:none!important;}

html[data-creo-theme="dark"] #creo-approach{
  --p-paper:#101010;--p-ink:#f4efe7;--p-muted:#aaa39b;
  --p-line:rgba(255,255,255,.16);background-color:#101010!important;color:#f4efe7;
}
html[data-creo-theme="dark"] #creo-why{
  --w-paper:#101010;--w-ink:#f3f0e9;--w-secondary:#aba49c;
  --w-line:rgba(255,255,255,.19);background-color:#101010!important;color:#f3f0e9;
}
html[data-creo-theme="dark"] #creo-faq.creo8{
  --paper:#101010;--paper2:#151515;--ink:#f3efe8;
  --ink2:#cfc7bc;--muted:#938a80;--line:rgba(255,255,255,.10);
  --soft:rgba(255,255,255,.04);--card:rgba(255,255,255,.03);
  --shadow:0 20px 70px rgba(0,0,0,.28);
  background-color:#101010!important;color:#f3efe8;
}
html[data-creo-theme="dark"] #creo-faq .creo8-bg{background:none!important;}
html[data-creo-theme="dark"] #creo-faq .creo8-noise{display:none!important;}
html[data-creo-theme="dark"] #creo-contacts{
  --c9-paper:#101010;
  background-color:#101010!important;
}

/* Main backgrounds in light mode retain cream; final block is white by design.
   These explicit light rules also cleanly reverse a dark first paint. */
html[data-creo-theme="light"] #creo26-hero,
html[data-creo-theme="light"] #creo-works,
html[data-creo-theme="light"] #creo-services,
html[data-creo-theme="light"] #creo-reports,
html[data-creo-theme="light"] #creo-about,
html[data-creo-theme="light"] #creo-approach,
html[data-creo-theme="light"] #creo-why,
html[data-creo-theme="light"] #creo-faq{background-color:#ffffff!important;}
html[data-creo-theme="light"] #creo-contacts{background-color:#ffffff!important;}
/* The user-facing light theme is TRUE WHITE; creamy cards remain for depth. */
html[data-creo-theme="light"] #creo26-hero{--c26-paper:#ffffff;--c26-panel:#ffffff;}
html[data-creo-theme="light"] #creo26-hero .c26-header{background:#ffffff!important;}
html[data-creo-theme="light"] #creo-works{--w-bg:#ffffff;}
html[data-creo-theme="light"] #creo-services{--s3-paper:#ffffff;}
html[data-creo-theme="light"] #creo-reports{--r-bg:#ffffff;}
html[data-creo-theme="light"] #creo-about{--ca-paper:#ffffff;}
html[data-creo-theme="light"] #creo-approach{--p-paper:#ffffff;}
html[data-creo-theme="light"] #creo-why{--w-paper:#ffffff;}
html[data-creo-theme="light"] #creo-faq{--paper:#ffffff;}
html[data-creo-theme="light"] #creo-contacts{--c9-paper:#ffffff;}

/* Don't override independent scroll animations or interactive transforms. */
html[data-creo-theme] :is(#creo26-hero,#creo-works,#creo-services,
#creo-reports,#creo-about,#creo-approach,#creo-why,#creo-faq,#creo-contacts){
  transition-property:background-color,color,border-color;
  transition-duration:var(--creo-scroll-duration);
  transition-timing-function:cubic-bezier(.22,1,.36,1);
  scroll-margin-top:82px;
}
html[data-creo-theme] :is(#creo26-hero,#creo-works,#creo-services,
#creo-reports,#creo-about,#creo-approach,#creo-why,#creo-faq,#creo-contacts) :is(a,button,input,textarea):focus-visible{
  outline:2px solid #ff6500!important;outline-offset:3px;
}
html[data-creo-theme] :is(#creo26-hero,#creo-works,#creo-services,
#creo-reports,#creo-about,#creo-approach,#creo-why,#creo-faq,#creo-contacts) :is(button,a){
  -webkit-tap-highlight-color:transparent;
}

/* All platform-independent arrows/sparkles are inline SVG icons created by
   the companion JS; color follows the surrounding text, never iOS emoji. */
.creo-ui-vector{
  display:inline-block!important;
  width:1em!important;height:1em!important;min-width:1em!important;
  vertical-align:-.14em!important;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;pointer-events:none;
}
.creo-ui-vector[data-creo-icon="spark"]{stroke-width:1.7;}
.creo-ui-vector[data-creo-icon="check"]{stroke-width:2.4;}
/* Fallback for symbols created later by CSS or third-party components. */
html[data-creo-theme] :is(#creo26-hero,#creo-works,#creo-services,
#creo-reports,#creo-about,#creo-approach,#creo-why,#creo-faq,#creo-contacts) .creo-text-symbol{
  font-family:Arial,Helvetica,sans-serif!important;
  font-variant-emoji:text;
}

@media(max-width:767px){
  html[data-creo-theme]{scroll-padding-top:72px;}
  html[data-creo-theme] :is(#creo26-hero,#creo-works,#creo-services,
  #creo-reports,#creo-about,#creo-approach,#creo-why,#creo-faq,#creo-contacts){scroll-margin-top:72px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-creo-theme]{scroll-behavior:auto!important;}
  html[data-creo-theme] :is(#creo26-hero,#creo-works,#creo-services,#creo-reports,
  #creo-about,#creo-approach,#creo-why,#creo-faq,#creo-contacts){transition-duration:0ms!important;}
}

/* One acid-orange family across the two hand-authored sections. */
html[data-creo-theme] #creo-about{--ca-acid:#ff4e00;--ca-acid-2:#ff7800;}
html[data-creo-theme] #creo-faq{--orange:#ff4e00;--orange2:#ff7800;}