/* ==========================================================================
   artwork.css — page artwork and background system
   iGears Technology Limited · 2026-08-15
   --------------------------------------------------------------------------
   Register it in includes/head.php alongside portfolio.css / tools.css:

       asset_url('/assets/css/artwork.css') . site_asset_version_suffix()

   Without site_asset_version_suffix() this file is served stale from caches.

   This file is ADDITIVE and CSS-only. It adds no markup and changes no PHP.
   Removing the <link> reverts the site exactly. Do not edit foundation.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — scoped to this file, never added to foundation.css :root
   -------------------------------------------------------------------------- */
:root {
  /* Band base fill. Matched to the mean border colour of the delivered
     band artwork (#030305–#07090d) so the image blends into the fill with
     no visible seam, and the band is still correct if the image never loads. */
  --art-ink:         #05070b;
  --art-ink-soft:    #10151d;   /* a card sitting inside a dark band */
  --art-on-ink:      #ffffff;   /* 18.9:1 on --art-ink */
  --art-on-ink-mut:  #b8c2d0;   /* 10.6:1 on --art-ink */
  --art-band-min:    clamp(360px, 40vh, 460px);

  /* Accessible orange for TEXT on light bands.
     --brand #f39a17 is 2.22:1 on white and --brand-dark #d88308 is 2.93:1 —
     both fail WCAG AA (4.5:1). This passes at 5.67:1 on white, 5.04:1 on cream.
     --brand stays the fill/graphic colour and the text colour on dark bands. */
  --brand-text:      #9a5600;
}

/* --------------------------------------------------------------------------
   2. Register A — full-bleed dark punctuation band
   -------------------------------------------------------------------------- */
.art-band,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
main > section.geo-answer-summary,
body.page-id-home main > section.section-home-ai-focus {
  position: relative;
  background-color: var(--art-ink) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 72% center !important;
  color: var(--art-on-ink);
  /* full-bleed out of the container without touching markup */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3rem, 6vw, 5rem);
  min-height: var(--art-band-min);
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* Scrim. The artwork is already near-black on the left (mean luminance
   0.0011–0.0028), so this is insurance rather than correction. */
.art-band::before,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"])::before,
main > section.geo-answer-summary::before,
body.page-id-home main > section.section-home-ai-focus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(5, 7, 11, 0.94) 0%,
              rgba(5, 7, 11, 0.76) 42%,
              rgba(5, 7, 11, 0.08) 78%);
  pointer-events: none;
}

.art-band > *,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) > *,
main > section.geo-answer-summary > *,
body.page-id-home main > section.section-home-ai-focus > * {
  position: relative;
  z-index: 1;
}

/* Text colours inside a band — written flat (no CSS nesting) for maximum
   browser support. Kept low-specificity so page rules can still override. */
.art-band :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
main > section.geo-answer-summary :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
body.page-id-home .section-home-ai-focus :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
.art-band :is(p, li, dd) { color: var(--art-on-ink-mut); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(p, li, dd) { color: var(--art-on-ink-mut); }
main > section.geo-answer-summary :is(p, li, dd) { color: var(--art-on-ink-mut); }
body.page-id-home .section-home-ai-focus :is(p, li, dd) { color: var(--art-on-ink-mut); }
.art-band :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
main > section.geo-answer-summary :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
body.page-id-home .section-home-ai-focus :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
.art-band a:not(.btn) { color: #ffd8a1; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) a:not(.btn) { color: #ffd8a1; }
main > section.geo-answer-summary a:not(.btn) { color: #ffd8a1; }
body.page-id-home .section-home-ai-focus a:not(.btn) { color: #ffd8a1; }
/* Inner panels: the live site paints .card / .geo-answer-card / .service-cta
   with light fills and gradient background-images. Inside a band those panels
   go dark — background (not background-color) so any gradient is cleared. */
.art-band :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
main > section.geo-answer-summary :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
body.page-id-home .section-home-ai-focus :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
main > section.geo-answer-summary .geo-answer-facts > div,
.art-band .geo-answer-facts > div { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; }
.art-band :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
main > section.geo-answer-summary :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
body.page-id-home .section-home-ai-focus :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
.art-band :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
main > section.geo-answer-summary :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
body.page-id-home .section-home-ai-focus :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
.art-band .eyebrow { color: var(--brand) !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .eyebrow { color: var(--brand) !important; }
main > section.geo-answer-summary .eyebrow { color: var(--brand) !important; }
body.page-id-home .section-home-ai-focus .eyebrow { color: var(--brand) !important; }

/* Buttons on a band */
.art-band .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
main > section.geo-answer-summary .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
body.page-id-home .section-home-ai-focus .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
.art-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
main > section.geo-answer-summary .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
body.page-id-home .section-home-ai-focus .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.art-band .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
main > section.geo-answer-summary .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
body.page-id-home .section-home-ai-focus .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }

/* --------------------------------------------------------------------------
   3. Band artwork, mapped by the page-id body class
   Bands are 2400×760 / 1600×507 WebP, 15–27 KB each.
   `simulation` is deliberately unassigned — it is reserved for Case 7 and
   nothing on the live site should carry it yet.
   -------------------------------------------------------------------------- */
:root { --art-band-src: url("../img/bands/band-default-2400.webp"); }

.art-band,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
main > section.geo-answer-summary,
body.page-id-home main > section.section-home-ai-focus {
  background-image: var(--art-band-src) !important;
}

body.page-id-service-ai-knowledge-assistant,
body.page-id-service-ai-document-processing,
body.page-id-service-ai-hub,
body.page-id-service-private-ai-agent,
body.page-id-service-workflow-automation,
body.page-id-clients-ai-digital-workflow {
  --art-band-src: url("../img/bands/band-ai-workflow-2400.webp");
}

body.page-id-service-system-development,
body.page-id-clients-system-development,
body.page-solution-pattern {
  --art-band-src: url("../img/bands/band-system-development-2400.webp");
}

body.page-id-service-web-platform,
body.page-id-service-digital-operations,
body.page-id-clients-web-platform {
  --art-band-src: url("../img/bands/band-ecommerce-2400.webp");
}

body.page-id-service-cybersecurity-risk-assurance,
body.page-id-industry-listed-corporate {
  --art-band-src: url("../img/bands/band-engineering-2400.webp");
}

body.page-id-products-hub,
body.page-tools,
body.page-id-service-voicebot-speech-analytics {
  --art-band-src: url("../img/bands/band-mobile-2400.webp");
}

body.page-id-clients,
body.page-id-industries {
  --art-band-src: url("../img/bands/band-clients-2400.webp");
}

body.page-id-industry-education { --art-band-src: url("../img/bands/band-education-2400.webp"); }

body.page-id-industry-ngo,
body.page-id-industry-church { --art-band-src: url("../img/bands/band-nonprofit-2400.webp"); }

/* The homepage's second band is a different image from its CTA band, so the
   two dark landmarks on the page never repeat the same motif. */
body.page-id-home main > section.section-home-ai-focus {
  background-image: url("../img/bands/band-ai-workflow-2400.webp") !important;
}


/* The near-top answer band and the closing CTA band appear on the same page,
   so the answer band draws from a second image — the two dark landmarks on a
   page never repeat the same motif. */
:root { --art-band-alt: url("../img/bands/band-default-2400.webp"); }
body.page-id-industry-medical,
body.page-id-services { --art-band-alt: url("../img/bands/band-clients-2400.webp"); }
main > section.geo-answer-summary { background-image: var(--art-band-alt) !important; }

@media (max-width: 1400px) {
  :root { --art-band-alt: url("../img/bands/band-default-1600.webp"); }
  body.page-id-industry-medical,
  body.page-id-services { --art-band-alt: url("../img/bands/band-clients-1600.webp"); }
}

/* Narrow desktop / tablet: serve the 1600 px derivative */
@media (max-width: 1400px) {
  :root { --art-band-src: url("../img/bands/band-default-1600.webp"); }
  body.page-id-service-ai-knowledge-assistant,
  body.page-id-service-ai-document-processing,
  body.page-id-service-ai-hub,
  body.page-id-service-private-ai-agent,
  body.page-id-service-workflow-automation,
  body.page-id-clients-ai-digital-workflow { --art-band-src: url("../img/bands/band-ai-workflow-1600.webp"); }
  body.page-id-service-system-development,
  body.page-id-clients-system-development,
  body.page-solution-pattern { --art-band-src: url("../img/bands/band-system-development-1600.webp"); }
  body.page-id-service-web-platform,
  body.page-id-service-digital-operations,
  body.page-id-clients-web-platform { --art-band-src: url("../img/bands/band-ecommerce-1600.webp"); }
  body.page-id-service-cybersecurity-risk-assurance,
  body.page-id-industry-listed-corporate { --art-band-src: url("../img/bands/band-engineering-1600.webp"); }
  body.page-id-products-hub,
  body.page-tools,
  body.page-id-service-voicebot-speech-analytics { --art-band-src: url("../img/bands/band-mobile-1600.webp"); }
  body.page-id-clients,
  body.page-id-industries { --art-band-src: url("../img/bands/band-clients-1600.webp"); }
  body.page-id-industry-education { --art-band-src: url("../img/bands/band-education-1600.webp"); }
  body.page-id-industry-ngo,
  body.page-id-industry-church { --art-band-src: url("../img/bands/band-nonprofit-1600.webp"); }
  body.page-id-home main > section.section-home-ai-focus {
    background-image: url("../img/bands/band-ai-workflow-1600.webp") !important;
  }
}

/* Mobile: drop the artwork request entirely. The gradient keeps the rhythm —
   a dark landmark between light sections — at zero bytes. */
@media (max-width: 720px) {
  .art-band,
  main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
  body.page-id-home main > section.section-home-ai-focus {
    background-image: linear-gradient(158deg, #05070b 0%, #141b26 58%, #2a1c08 100%) !important;
    min-height: 0;
    padding-block: 2.75rem;
  }
}

@media print {
  .art-band,
  main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
  body.page-id-home main > section.section-home-ai-focus {
    background: none !important;
    color: var(--text) !important;
    width: auto; margin-inline: 0;
  }
  .art-band h2, .art-band p,
  main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) h2, main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) p { color: var(--text) !important; }
}

/* --------------------------------------------------------------------------
   4. Register B — light field texture, zero HTTP requests
   Differentiates adjacent light sections that would otherwise both read as
   flat #f5f1eb. Contrast against the band fill stays under 1.2:1 — it is
   texture, not pattern.
   -------------------------------------------------------------------------- */
main > section.section-alt:not([class*="-cta"]) {
  background-image:
    radial-gradient(ellipse 74% 62% at 50% 46%, rgba(245,241,235,0.94) 0%, rgba(245,241,235,0) 72%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="rgb(28,37,49)" stroke-opacity="0.055" stroke-width="1"><path d="M0 32h64M32 0v64"/></g><circle cx="32" cy="32" r="1.5" fill="rgb(243,154,23)" fill-opacity="0.13"/></svg>');
  background-size: auto, 64px 64px;
  background-position: center, center;
}

/* Every second alt band uses the dot field instead, so two alt sections never
   look identical when they end up adjacent. */
main > section.section-alt:not([class*="-cta"]):nth-of-type(even) {
  background-image:
    radial-gradient(ellipse 74% 62% at 50% 46%, rgba(245,241,235,0.94) 0%, rgba(245,241,235,0) 72%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="12" cy="12" r="1.4" fill="rgb(28,37,49)" fill-opacity="0.075"/><circle cx="36" cy="36" r="1.4" fill="rgb(243,154,23)" fill-opacity="0.15"/></svg>');
  background-size: auto, 48px 48px;
}

/* --------------------------------------------------------------------------
   5. Contrast repair on light bands
   Measured on the live 繁中 homepage: --brand-dark #d88308 renders at 2.88:1
   on #fffdf8 and 2.60:1 on #f5f1eb. Both fail WCAG AA for body text.
   These selectors were taken from the rendered page, not guessed. Verify the
   list against the repo and extend it — see the Cursor prompt, STEP 4.
   -------------------------------------------------------------------------- */
main .eyebrow,
main a.sector-link,
main a.related-page-link,
main a.insight-card-read-link,
main a.btn-ghost,
main .section-card-tag,
main .home-case-tag-pill-label {
  color: var(--brand-text);
}

/* …but not when they sit on a dark band, where --brand is already 8.4:1. */
.art-band :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
body.page-id-home .section-home-ai-focus :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
.art-band :is(a.sector-link, a.related-page-link, a.insight-card-read-link) { color: #ffd8a1; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(a.sector-link, a.related-page-link, a.insight-card-read-link) { color: #ffd8a1; }
body.page-id-home .section-home-ai-focus :is(a.sector-link, a.related-page-link, a.insight-card-read-link) { color: #ffd8a1; }

/* 148,163,184 on #fffdf8 is 2.52:1 at 10.88px — the least legible text on the
   site. Darkened to 4.6:1 without changing the visual hierarchy. */
main .case-detail-label { color: #5e6774; }

/* --------------------------------------------------------------------------
   6. Motion, forced colours, layout stability
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .art-band, main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) { background-attachment: scroll; }
}

@media (forced-colors: active) {
  .art-band, main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
  body.page-id-home main > section.section-home-ai-focus {
    background-image: none !important;
    forced-color-adjust: none;
  }
}