/*══════════════════════════════════════════════════════════════════════
  MANOVA TECH — GLOBAL SECTION RHYTHM  ·  SURFACE DESIGN SYSTEM
  ─────────────────────────────────────────────────────────────────────
  Gives every page an intentional, editorial dark → light → tinted →
  brand rhythm — the same idea that already works on the About page —
  without every section sharing one flat background.

  HOW IT WORKS
  A top-level content <section> opts into a "surface" via a data
  attribute, e.g. <section class="services" data-surface="charcoal">.
  Each surface sets a small set of working tokens (background, ink,
  muted, hairline, panel, accent) and — for the light surfaces — also
  remaps the theme's neutral ramp so ramp-based components (home,
  service-single) adapt automatically. A single targeted override layer
  then re-tints the hand-coloured component families used by the
  destination pages (work / contact / services), so light
  sections stay legible and premium rather than white-on-white.

  Curated palette (one cohesive brand):
    charcoal   near-black graphite — the premium, cinematic default
    graphite   a lifted charcoal — feature / gallery bands
    deep       deep neutral with a faint brand-blue cast
    brand-soft dark, softly washed with the brand gradient
    ivory      warm ivory editorial paper  (About "paper" family)
    stone      soft cool stone
    beige      muted warm beige
    mist       subtle cool, brand-tinted light
    brand      full brand-indigo band — stats, CTAs, punctuation

  The About templates (.editorial-page) and the Resources hub keep their
  own approved editorial systems and are intentionally left untouched.
══════════════════════════════════════════════════════════════════════*/

:root{
  /* Single source of truth for the surface palette. */
  --s-charcoal:#0c0c0f;
  --s-graphite:#15161b;
  --s-deep:#0a0d16;
  --s-ivory:#f4f2ec;
  --s-stone:#e8e5dd;
  --s-beige:#e2dacb;
  --s-mist:#ebeef6;
  --s-brand-1:#008da3;
  --s-brand-2:#29d3df;
  --s-ink:#17130d;          /* editorial ink on light surfaces      */
  --s-ink-soft:#6d6a60;     /* secondary text on light surfaces     */
  --s-accent-onlight:#00788c;/* accessible indigo accent on light   */
  --s-accent-ondark:#67e8ed; /* accent on dark surfaces             */
}

/* Respect the OS: form controls, scrollbars & UA widgets match the
   surface they sit on instead of fighting it. The theme is authored
   dark; light surfaces declare their own scheme locally below. */
html{color-scheme:dark}

/*──────────────────────────────────────────────────────────
  BASE  ·  every opted-in section
  The doubled attribute lifts specificity to (0,2,0) so a surface's
  background wins over page-specific section rules on source order —
  this sheet always loads last.
──────────────────────────────────────────────────────────*/
[data-surface][data-surface]{
  background:var(--s-bg);
  color:var(--s-fg);
  color-scheme:var(--s-scheme, dark);
  transition:background-color .6s var(--ease-expo), color .6s var(--ease-expo);
}
/* A whisper-thin seam where two surfaces meet keeps the editorial
   rhythm crisp without a heavy divider. */
[data-surface] + [data-surface]{ border-top:1px solid var(--s-seam, transparent); }

/*──────────────────────────────────────────────────────────
  DARK SURFACES
  Sections here are already dark-built, so we only retune the
  background, hairline seam and accent — existing translucent-white
  panels keep working.
──────────────────────────────────────────────────────────*/
[data-surface="charcoal"]{
  --s-bg:var(--s-charcoal); --s-fg:#f6f6f3; --s-scheme:dark;
  --s-soft:#a4a4ae; --s-rule:rgba(255,255,255,.09);
  --s-panel:rgba(255,255,255,.03); --s-panel-brd:rgba(255,255,255,.08);
  --s-accent:var(--s-accent-ondark); --s-seam:rgba(255,255,255,.05);
}
[data-surface="graphite"]{
  --s-bg:var(--s-graphite); --s-fg:#f7f7f4; --s-scheme:dark;
  --s-soft:#adadb7; --s-rule:rgba(255,255,255,.1);
  --s-panel:rgba(255,255,255,.04); --s-panel-brd:rgba(255,255,255,.09);
  --s-accent:var(--s-accent-ondark); --s-seam:rgba(255,255,255,.06);
}
[data-surface="deep"]{
  --s-bg:var(--s-deep); --s-fg:#eef1fb; --s-scheme:dark;
  --s-soft:#98a4c2; --s-rule:rgba(103,232,237,.16);
  --s-panel:rgba(120,150,255,.05); --s-panel-brd:rgba(103,232,237,.16);
  --s-accent:var(--s-accent-ondark); --s-seam:rgba(103,232,237,.14);
}
/* A dark section softly washed with the brand gradient — the "subtle
   tinted" beat in the rhythm, without going fully light. */
[data-surface="brand-soft"]{
  --s-bg:
    radial-gradient(ellipse 60% 50% at 82% 8%, rgba(0,175,193,.16), transparent 62%),
    radial-gradient(ellipse 50% 45% at 8% 96%, rgba(0,127,147,.1), transparent 60%),
    #0a0b14;
  --s-fg:#eef0fa; --s-scheme:dark;
  --s-soft:#9aa2bd; --s-rule:rgba(103,232,237,.16);
  --s-panel:rgba(103,232,237,.06); --s-panel-brd:rgba(103,232,237,.16);
  --s-accent:var(--s-accent-ondark); --s-seam:rgba(103,232,237,.12);
}

/*──────────────────────────────────────────────────────────
  LIGHT SURFACES
  Set light working tokens AND remap the neutral ramp so every
  ramp-based component (var(--white), var(--gray-*)) flips correctly.
  Hand-coloured components are handled in the override layer below.
──────────────────────────────────────────────────────────*/
[data-surface="ivory"],
[data-surface="stone"],
[data-surface="beige"],
[data-surface="mist"]{
  --s-fg:var(--s-ink); --s-scheme:light;
  --s-soft:var(--s-ink-soft);
  --s-accent:var(--s-accent-onlight);
  color-scheme:light;

  /* Remap the global neutral ramp for descendants that use it. */
  --white:var(--s-ink);
  --gray-600:#34322b; --gray-500:var(--s-ink-soft); --gray-400:#87837a;
  --gray-300:var(--s-rule); --gray-200:var(--s-panel-2); --gray-100:var(--s-panel-2); --gray-50:var(--s-panel-3);
  /* Deepen the brand blue a touch so it stays legible on paper. */
  --blue:#00788c; --blue-light:#008da3; --blue-bright:#00788c;
  /* Service-landing tokens so every svc-* component adapts on light. */
  --svc-line:var(--s-panel-brd); --svc-surface:var(--s-panel); --svc-muted:var(--s-ink-soft);
  /* Resources tokens, for any resource-* component placed on a light surface. */
  --res-line:var(--s-panel-brd); --res-muted:var(--s-ink-soft);
}
[data-surface="ivory"]{
  --s-bg:var(--s-ivory);
  --s-rule:rgba(23,19,13,.14); --s-seam:rgba(23,19,13,.12);
  --s-panel:rgba(23,19,13,.035); --s-panel-2:#faf8f2; --s-panel-3:#f7f5ef;
  --s-panel-brd:rgba(23,19,13,.1);
}
[data-surface="stone"]{
  --s-bg:var(--s-stone);
  --s-rule:rgba(23,19,13,.16); --s-seam:rgba(23,19,13,.14);
  --s-panel:rgba(23,19,13,.04); --s-panel-2:#f1efe8; --s-panel-3:#eeece4;
  --s-panel-brd:rgba(23,19,13,.12);
}
[data-surface="beige"]{
  --s-bg:var(--s-beige);
  --s-rule:rgba(26,20,12,.17); --s-seam:rgba(26,20,12,.15);
  --s-panel:rgba(26,20,12,.045); --s-panel-2:#ece4d5; --s-panel-3:#e8e0d0;
  --s-panel-brd:rgba(26,20,12,.13);
}
[data-surface="mist"]{
  --s-bg:var(--s-mist);
  --s-ink:#15161d; --s-ink-soft:#5c6172; --s-accent-onlight:#00788c;
  --s-fg:var(--s-ink); --s-soft:var(--s-ink-soft); --s-accent:var(--s-accent-onlight);
  --s-rule:rgba(24,28,50,.14); --s-seam:rgba(24,28,50,.12);
  --s-panel:rgba(24,28,50,.04); --s-panel-2:#f3f5fb; --s-panel-3:#eff2fa;
  --s-panel-brd:rgba(24,28,50,.11);
}

/*──────────────────────────────────────────────────────────
  BRAND BAND  ·  full-colour punctuation (stats, CTAs)
──────────────────────────────────────────────────────────*/
[data-surface="brand"]{
  --s-bg:linear-gradient(135deg, var(--s-brand-1) 0%, var(--s-brand-2) 100%);
  --s-fg:#ffffff; --s-scheme:dark;
  --s-soft:rgba(255,255,255,.82);
  --s-rule:rgba(255,255,255,.3); --s-seam:transparent;
  --s-panel:rgba(255,255,255,.1); --s-panel-2:rgba(255,255,255,.14); --s-panel-brd:rgba(255,255,255,.3);
  --s-accent:#ffffff;
  --white:#ffffff;
  --gray-600:rgba(255,255,255,.9); --gray-500:rgba(255,255,255,.82); --gray-400:rgba(255,255,255,.72);
  --gray-300:rgba(255,255,255,.3);
  --svc-line:rgba(255,255,255,.3); --svc-surface:rgba(255,255,255,.1); --svc-muted:rgba(255,255,255,.82);
}

/*══════════════════════════════════════════════════════════════════════
  OVERRIDE LAYER  ·  make hand-coloured components obey the surface
  Grouped selectors so a single block themes every light + brand band.
══════════════════════════════════════════════════════════════════════*/

/* ---- shared light-surface group ---- */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) :is(h1,h2,h3,h4,h5,h6){
  color:var(--s-ink);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) :is(p,li,dd,figcaption,blockquote,label,td,th){
  color:var(--s-soft);
}
/* Prominent non-heading "titles / names / values" that hardcode white. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  :is(.section-title,.case-study-title,.page-hero__title,.service-cta-heading,.stat-val,
      .testi-author,.map-content h4,.contact-form h3,.blog-card-title,.hub-answers__head h2,
      .stat strong,.page-section__title,.feature-title,.benefit-title){
  color:var(--s-ink);
}
/* Eyebrows, kickers, tags & the label rule → accent. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  :is(.section-label,.resource-eyebrow,.blog-card-tag,.case-study-tag,.svc-eyebrow,
      .page-hero__eyebrow,.section-eyebrow,.eyebrow){
  color:var(--s-accent);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .section-label::before,
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .section-label::after{
  background:var(--s-accent);
}
/* Panels / cards / tiles → subtle dark-tinted panel on light. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  :is([class*="-card"],[class*="__card"],[class*="-panel"],[class*="__panel"],[class*="-tile"],
      .service-faq,.faq-item,.service-testimonial,.contact-map,.field input,.field textarea){
  background:var(--s-panel);
  border-color:var(--s-panel-brd);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  :is([class*="-card"]:hover,[class*="__card"]:hover,.service-faq:hover,.faq-item:hover){
  background:var(--s-panel-2);
}
/* Hairlines: only touches border-COLOUR, so borderless elements are
   unaffected. Covers the common structural wrappers. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  :is([class*="-card"],[class*="__card"],[class*="-grid"],[class*="__grid"],[class*="-row"],[class*="-list"],
      [class*="-board"],[class*="-item"],[class*="-tile"],.stats,.stat,.service-faq,.faq-item,
      .svc-row,.about-p,.marquee,hr){
  border-color:var(--s-panel-brd);
}
/* Links inside light surfaces. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) a:not(.btn){
  color:inherit;
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  a:not(.btn):hover{ color:var(--s-accent); }

/* Big stat "+" accent & gradient text stay branded but legible on paper. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  :is(.stat-val .accent){
  background:linear-gradient(135deg,var(--s-accent),#29d3df);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"])
  .gradient-text{
  background:linear-gradient(135deg,#00788c,#29d3df 55%,#67e8ed);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/*──── Buttons on light + brand ────*/
/* Ghost / outline: dark ink + hairline border on light. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .btn-outline{
  color:var(--s-ink); border-color:var(--s-rule);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .btn-outline:hover{
  border-color:var(--s-ink); background:var(--s-panel);
}
/* Filled buttons keep a solid brand fill + WHITE label on every surface. */
[data-surface] .btn-fill{ color:#fff; }
[data-surface] .btn-fill .btn-bg{ /* keep the hover gradient legible */ }

/* Filter chips (Work) themed on light. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .work-filter-btn{
  color:var(--s-soft); border-color:var(--s-panel-brd); background:var(--s-panel);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .work-filter-btn:hover{
  color:var(--s-ink); border-color:var(--s-ink);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .work-filter-btn.active{
  color:#fff; background:var(--blue); border-color:var(--blue);
}

/* Form fields sitting on a light surface. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) :is(.field input,.field textarea){
  color:var(--s-ink);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) :is(.field input:focus,.field textarea:focus){
  border-color:var(--blue); background:var(--s-panel-2);
  box-shadow:0 0 0 3px rgba(69,78,198,.12);
}
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) ::placeholder{ color:var(--s-soft); opacity:.8; }

/* Testimonials keep their glass look but read on paper. */
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .testi-role,
:is([data-surface="ivory"],[data-surface="stone"],[data-surface="beige"],[data-surface="mist"]) .stat-lbl{
  color:var(--s-soft);
}

/*──── Media / overlay safety net ────
  Text layered over a dark image inside any surface must stay light,
  regardless of the section's colour scheme. */
[data-surface] :is([class*="overlay"],[class*="__shade"],[class*="-shade"],[class*="__media"],[class*="-media"]) :where(h1,h2,h3,h4,p,span,strong,a,small){
  color:#fff;
}

/*──────────────────────────────────────────────────────────
  BRAND BAND component polish
──────────────────────────────────────────────────────────*/
[data-surface="brand"] :is(h1,h2,h3,h4,h5,h6,.section-title,.stat-val){ color:#fff; }
[data-surface="brand"] :is(p,li,dd,.stat-lbl,.section-sub){ color:rgba(255,255,255,.85); }
[data-surface="brand"] :is(.section-label,.resource-eyebrow){ color:#fff; }
[data-surface="brand"] .section-label::before{ background:rgba(255,255,255,.7); }
[data-surface="brand"] :is([class*="-card"],[class*="__card"],[class*="-panel"]){
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28);
}
[data-surface="brand"] .stats{ border-color:rgba(255,255,255,.28); }
[data-surface="brand"] .stat-val .accent{ -webkit-text-fill-color:#fff; color:#fff; background:none; }
/* On the brand band, a filled button inverts to white-on-brand for pop. */
[data-surface="brand"] .btn-fill{ background:#fff; color:var(--s-brand-1); }
[data-surface="brand"] .btn-fill .btn-bg{ display:none; }
[data-surface="brand"] .btn-outline{ color:#fff; border-color:rgba(255,255,255,.5); }
[data-surface="brand"] .btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
[data-surface="brand"] a:not(.btn):hover{ color:#fff; }

/*──────────────────────────────────────────────────────────
  MOTION / A11Y
──────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce){
  [data-surface]{ transition:none; }
}