/* ==========================================================================
   RULE (owner, 2026-10-15): a card and the page section it links to always share ONE
   variable, so changing a card's image changes the linked section's image too.
   Imagery layer. Since 2026-10-12 every image the v4 pages show is a local WebP in
   assets/ (originals: IOL Genius Web/Stock imagery). Only --img-web is still a remote
   Unsplash URL (original not downloaded yet). Unsplash URLs left below belong to
   variables no v4 page uses.
   Loaded after styles.css. v3: photos render at full colour with no brand wash, since imagery
   is the only source of colour in this design. Every rule keeps a flat
   Bone fallback colour, so a 404 shows an empty panel, not a broken image.
   Swap any unsplash URL below for real photography later.
   ========================================================================== */

:root {
  /* Home: hero slider (3 slides) */
  --img-hero-1: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=2000&q=70');
  --img-hero-2: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2000&q=70');
  --img-hero-3: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2000&q=70');
  --img-who-1:       url('../assets/photo-glass-corridor.webp?v=101');   /* 800x800 square, nastuh-abootalebi-yWwob8kwOCk glass office corridor (2026-10-13) */
  --img-who-2:       url('../assets/photo-whiteboard-notes.webp?v=101');   /* 800x800 square, jakub-zerdzicki-fQOyF0D0cDU whiteboard sticky notes (2026-10-13) */
  --img-who-3:       url('../assets/photo-meeting-laptop.webp?v=101');
  /* About · Our Company tiles (PLACEHOLDERS reused from other pages, swap for About-specific photos) */
  --img-about-1:     var(--img-u-about-1);
  --img-about-2:     var(--img-u-about-2);
  --img-about-3:     var(--img-u-about-3);
  --img-about-4:     var(--img-u-about-4);
  --img-who-4:       url('../assets/photo-modern-building.webp?v=101');   /* 800x800 square, daniela-paola-alchapar-HTBGlMTswJw modern glass building (2026-10-13) */
  --img-values:      url('../assets/photo-values-holo.webp?v=101');   /* 1448x1086 owner image 'Holographic Values in a Modern Office' (2026-10-13) */

  /* Industries */
  --img-health:      url('../assets/industry-healthcare.webp?v=101');   /* IOLGenius card image (IOL Genius Web/assets/industry-healthcare.jpg, 1200x800), 2026-10-15 */
  --img-insurance:   url('../assets/industry-insurance.webp?v=101');   /* IOLGenius card image (IOL Genius Web/assets/industry-insurance.jpg, 1200x800), 2026-10-15 */
  --img-hr:          url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=800&q=60');
  --img-logistics:   var(--img-u-logistics);   /* own photo (was the hero step 2 roads, which repeated); homepage card + Solutions/Work logistics   /* aerial roads photo (hero step 2), shared by the homepage card and the Solutions/Work logistics blocks (owner, 2026-10-15) */
  --img-mobile:      url('../assets/industry-mobile.webp?v=101');   /* IOLGenius card image (IOL Genius Web/assets/industry-mobile.jpg, 1200x800), 2026-10-15 */
  --img-web:         url('../assets/web-design.webp?v=101');   /* Unsplash i1VQZsU86ok (website layout being designed in Photoshop), 2000x1577, owner's pick 2026-10-15; shared by the Web card, Solutions › Web and the web.html header */

  /* Solutions page: additional categories */
  --img-integration: url('../assets/industry-integration.webp?v=101');   /* IOLGenius card image (IOL Genius Web/assets/industry-integration.jpg, 1200x800), 2026-10-15 */
  --img-bigdata:     url('../assets/photo-data-analytics.webp?v=101');   /* 1448x1086 (4:3) owner image 'Holographic Global Analytics Workspace' (2026-10-12) */
  --img-cloud:       url('../assets/photo-cloud-saas.webp?v=101');   /* 1448x1086 (4:3) owner image 'Cloud SaaS Network Workspace' (2026-10-12) */

  /* Page heroes */
  --img-hero-about:        url('../assets/page-about.webp?v=101');   /* 2560x1280, shutterstock_2147248723 hand with stylus on laptop + tablet (2026-10-13) */
  --img-hero-services:     url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1400&q=55');
  --img-hero-solutions:    url('../assets/page-solutions.webp?v=101');   /* 2560x1280, tyler-casey-4uCdG0scCJ0 olive leaves + light flare (2026-10-12) */
  --img-hero-technologies: url('../assets/page-technology.webp?v=101');   /* 2560x1280, luke-jones-tBvF46kmwBw blue fibre-optic strands (2026-10-13) */
  --img-hero-contact:      url('../assets/page-contact-phones.webp?v=101');   /* 3800x1240 composite of pavan-trikutam's three payphones, wall extended left (2026-10-12) */

  /* Team headshots (about page) */
  --img-avatar-1: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=60');
  --img-avatar-2: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=60');
  --img-avatar-3: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=60');
  --img-avatar-4: url('https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=200&q=60');

  /* Contact page visual */
  --img-contact: url('../assets/photo-office-table.webp?v=101');

  /* Technologies page: tech cards */
  --img-tech-uiux:       url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=60');
  --img-tech-servers:    url('../assets/photo-datacentre.webp?v=101');   /* 1448x1086 owner image 'Cinematic Data Centre Infrastructure Corridor', Technology Cloud & Infrastructure card (2026-10-13) */
  --img-tech-social:     url('https://images.unsplash.com/photo-1526925539332-aa3b66e35444?auto=format&fit=crop&w=800&q=60');
  --img-tech-backend:    url('../assets/photo-dev-code.webp?v=101');   /* 1600x1067, fotis-fotopoulos-DuHKoV44prg code on two monitors + backlit keyboard, Technology Development card (2026-10-13) */
  --img-tech-middleware: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=60');
  --img-tech-db:         url('../assets/photo-fibre-data.webp?v=101');   /* 1600x1067, compare-fibre-jlrnBE3Jn3o fibre-optic ends, Technology Data card (2026-10-13) */
  --img-tech-cms:        url('../assets/photo-cms-workspace.webp?v=101');   /* 1448x1086 owner image 'Modern CMS Workspace with Floating UI Panels', Technology Web & CMS card (2026-10-13) */
  --img-tech-frontend:   url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=800&q=60');
  --img-tech-mobile:     url('../assets/photo-mobile-desk.webp?v=101');   /* 1600x1025, fotis-fotopoulos-6sAl6aQ4OWI phone on a developer desk, Technology Mobile card (2026-10-13) */

  /* v4: leaf hero: owner-supplied photo per scroll step (1200x800 webp) */
  --img-hero-step-1: url('../assets/hero-1-city.webp?v=101');    /* 2880x1620, owner's full-size city (2026-10-12) */
  --img-hero-step-2: url('../assets/hero-2-roads.webp?v=101');   /* 2880x1620 owner road photo (2026-10-12) */
  --img-hero-step-3: url('../assets/hero-3-code.webp?v=101');    /* 2880x1620 owner code photo (2026-10-12) */

  /* v3 additions */
  --img-showcase: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=2000&q=70');
  --img-hero-work: url('../assets/page-work-globe.webp?v=101');   /* 2560x1280 local, shutterstock_566877226 hand + network globe (2026-10-12) */
  /* Case studies: each Selected Work card (homepage) shares one variable with its
     section on the Work page, separate from the six Industries images (owner, 2026-10-15) */
  --img-case-nhs:   url('../assets/case-nhs-scotland.webp?v=101');   /* doctor using a phone (national-cancer-institute-L8tWZT4CcVQ) */
  --img-case-wales: url('../assets/case-wales-lab.webp?v=101');   /* pipette filling a row of tubes (louis-reed-pwcKF7L4-no, Unsplash), 1800x1200 (2026-10-15) */
  --img-case-esa:   var(--img-space);
  --img-case-dbp:   url('../assets/case-daybookpro.webp?v=101');   /* DaybookPro's own homepage hero (truck at night), from DaybookPro Web/Claude/Assets/hero-truck.png, 2:1 1788x894 (2026-10-15) */
  --img-space: url('../assets/photo-earth-night.webp?v=101');
  --img-case-mhr: var(--img-u-case-mhr);   /* Mobile Health Record: own photo (Work card, MHR header, Mobile page MHR box) */

  /* ---- Unsplash replacements (2026-10-19): one photo per spot, so a photo repeats only where a card
     links to the section/page that uses it. Saved locally as assets/u-<slot>.webp (1600px wide, about tiles
     1000x1000; owner: always save Unsplash photos to assets/). ---- */
  --img-u-nhs-1: url('../assets/u-nhs-1.webp?v=101');   /* Unsplash photo-1758691463203-cce9d415b2b5: two doctors looking at a tablet (2kopEHjST-g) */
  --img-u-ins-integration: url('../assets/u-ins-integration.webp?v=101');   /* Unsplash photo-1544197150-b99a580bb7a8: blue network cable (40XgDxBfYXM) */
  --img-u-dbp-connect: url('../assets/u-dbp-connect.webp?v=101');   /* Unsplash photo-1780367261654-45395777b560: row of loading docks (SJGC3NNOqU4) */
  --img-u-wal-3: url('../assets/u-wal-3.webp?v=101');   /* Unsplash photo-1606206591513-adbfbdd7a177: blood collection tubes in a rack (0jE8ynV4mis) */
  --img-u-wal-2: url('../assets/u-wal-2.webp?v=101');   /* Unsplash photo-1727091506038-5451111dc2fb: gloved hands at a microscope (L1ip8dEWuzE) */
  --img-u-case-mhr: url('../assets/u-case-mhr.webp?v=101');   /* Unsplash photo-1609921141835-710b7fa6e438: person holding a smartphone (QwAL909kTiY) */
  --img-u-hc-trakcare: url('../assets/u-hc-trakcare.webp?v=101');   /* Unsplash photo-1758691461888-b74515208d7a: doctor typing on a computer (vHm47nsCBkM) */
  --img-u-int-hospital: url('../assets/u-int-hospital.webp?v=101');   /* Unsplash photo-1758691462848-31a39258dbd8: doctor on the phone at a laptop (egCFrNJ6Djw) */
  --img-u-hc-traklab: url('../assets/u-hc-traklab.webp?v=101');   /* Unsplash photo-1758685848543-5c8ba81bc822: scientists working with test tubes (UJHANmlaHwc) */
  --img-u-logistics: url('../assets/u-logistics.webp?v=101');   /* Unsplash photo-1601584115197-04ecc0da31d7: white truck on the road (GBVDilE8yvI) */
  --img-u-hc-industry: url('../assets/u-hc-industry.webp?v=101');   /* Unsplash photo-1519494026892-80bbd2d6fd0d: hospital lobby reception (nMyM7fxpokE) */
  --img-u-mhr-care: url('../assets/u-mhr-care.webp?v=101');   /* Unsplash photo-1666886573531-48d2e3c2b684: clinician showing patient data on a tablet (J5UTvRgse7Q); replaced the nurse photo at owner's request */
  --img-u-mob-android: url('../assets/u-mob-android.webp?v=101');   /* Unsplash photo-1598965402089-897ce52e8355: hand holding an Android phone (aiUAxBNe3Xk) */
  --img-u-mhr-control: url('../assets/u-mhr-control.webp?v=101');   /* Unsplash photo-1758273706077-cd89007983e8: young woman smiling at her phone (rsbgKRJF8jk) */
  --img-u-mhr-grow: url('../assets/u-mhr-grow.webp?v=101');   /* Unsplash photo-1629909614456-6b1c5c94cecc: clinic waiting area (B_sK_xgzwVA) */
  --img-u-ins-industry: url('../assets/u-ins-industry.webp?v=101');   /* Unsplash photo-1635859890085-ec8cb5466806: woman at a table with paperwork (ZH4FUYiaczY) */
  --img-u-mob-windows: url('../assets/u-mob-windows.webp?v=101');   /* Unsplash photo-1588872657578-7efd1f1555ed: Dell laptop on a white surface (i5UV2HpITYA) */
  --img-u-int-systems: url('../assets/u-int-systems.webp?v=101');   /* Unsplash photo-1584169417032-d34e8d805e8b: server room aisle (lVZjvw-u9V8) */
  --img-u-dbp-scale: url('../assets/u-dbp-scale.webp?v=101');   /* Unsplash photo-1644079446600-219068676743: large warehouse with shelving (h3pVxOIpnzk) */
  --img-u-cloud-what: url('../assets/u-cloud-what.webp?v=101');   /* Unsplash photo-1667984390538-3dea7a3fe33d: 3D cloud computing concept (Am6pBe2FpJw) */
  --img-u-web-seo: url('../assets/u-web-seo.webp?v=101');   /* Unsplash photo-1551288049-bebda4e38f71: analytics graphs on a laptop (JKUTrJ4vK00) */
  --img-u-dbp-tools: url('../assets/u-dbp-tools.webp?v=101');   /* Unsplash photo-1504868584819-f8e8b4b6d7e3: laptop with charts (mcSDtbWXUZU) */
  --img-u-esa-1: url('../assets/u-esa-1.webp?v=101');   /* Unsplash photo-1464802686167-b939a6910659: galaxy (E0AHdsENmDg) */
  --img-u-bd-cloud: url('../assets/u-bd-cloud.webp?v=101');   /* Unsplash photo-1757466762489-52fea38071ad: glowing blue particle waves (qY-XlCf9Zs4) */
  --img-u-web-site: url('../assets/u-web-site.webp?v=101');   /* Unsplash photo-1499951360447-b19be8fe80f5: designer desk with iMac and MacBook (hGV2TfOh0ns) */
  --img-u-web-ecommerce: url('../assets/u-web-ecommerce.webp?v=101');   /* Unsplash photo-1563013544-824ae1b704d3: paying online with a card (Q59HmzK38eQ) */
  --img-u-mob-ios: url('../assets/u-mob-ios.webp?v=101');   /* Unsplash photo-1512941937669-90a1b58e7e9c: iPhone X (9e9PD9blAto) */
  --img-u-dbp-mobile: url('../assets/u-dbp-mobile.webp?v=101');   /* Unsplash photo-1762095996527-126e49ef9d72: van driver giving a thumbs up (zxsh85YyplA) */
  --img-u-bd-access: url('../assets/u-bd-access.webp?v=101');   /* Unsplash photo-1644088379091-d574269d422f: blue lines and dots data graphic (xuTJZ7uD7PI) */
  --img-u-esa-2: url('../assets/u-esa-2.webp?v=101');   /* Unsplash photo-1609929986805-6fc98967b2a1: white observatory dome on a hill (S7xG_Urs24k) */
  --img-u-about-1: url('../assets/u-about-1.webp?v=101');   /* Unsplash photo-1572021335469-31706a17aaef: four coworkers around a laptop (Of_m3hMsoAA), square */
  --img-u-about-2: url('../assets/u-about-2.webp?v=101');   /* Unsplash photo-1629904853893-c2c8981a1dc5: people coding at monitors (Im_cQ6hQo10), square */
  --img-u-about-3: url('../assets/u-about-3.webp?v=101');   /* Unsplash photo-1746392680855-ac08e8281e2e: the Acropolis above Athens (c1w27nHMirk), square */
  --img-u-about-4: url('../assets/u-about-4.webp?v=101');   /* Unsplash photo-1672380135241-c024f7fbfa13: handshake in front of a laptop (_XeQ8XEWb4Q), square */
}

/* ---------- Who we are tiles ---------- */
.who-visual .tile:nth-child(1) { background: var(--img-who-1) center/cover, var(--color-bone); }
.who-visual .tile:nth-child(2) { background: var(--img-who-2) center/cover, var(--color-bone); }
.who-visual .tile:nth-child(3) { background: var(--img-who-3) center/cover, var(--color-bone); }
.who-visual .tile:nth-child(4) { background: var(--img-who-4) center/cover, var(--color-bone); }

/* ---------- Values visual ---------- */
.values-visual { background: var(--img-values) center/cover, var(--color-bone); }

/* ---------- Industry cards (front face photo) ---------- */
.industry-card.i-health .flip-front    { background: var(--img-health) center/cover, var(--color-bone); }
.industry-card.i-insurance .flip-front { background: var(--img-insurance) center/cover, var(--color-bone); }
.industry-card.i-hr .flip-front        { background: var(--img-hr) center/cover, var(--color-bone); }
.industry-card.i-logistics .flip-front { background: var(--img-logistics) center/cover, var(--color-bone); }
.industry-card.i-integration .flip-front { background: var(--img-integration) center/cover, var(--color-bone); }
.industry-card.i-mobile .flip-front    { background: var(--img-mobile) center/cover, var(--color-bone); }
.industry-card.i-web .flip-front       { background: var(--img-web) center/cover, var(--color-bone); }

/* ---------- Solution / case-study visuals ---------- */
.solution-visual.v-integration { background: var(--img-integration) center/cover, var(--color-bone); }
.solution-visual.v-mobile      { background: var(--img-mobile) center/cover, var(--color-bone); }
.solution-visual.v-health      { background: var(--img-health) center/cover, var(--color-bone); }
.solution-visual.v-bigdata     { background: var(--img-bigdata) center/cover, var(--color-bone); }
.solution-visual.v-web         { background: var(--img-web) center/cover, var(--color-bone); }
.solution-visual.v-logistics   { background: var(--img-logistics) center/cover, var(--color-bone); }
.solution-visual.v-insurance   { background: var(--img-insurance) center/cover, var(--color-bone); }
.solution-visual.v-cloud       { background: var(--img-cloud) center/cover, var(--color-bone); }
.solution-visual.v-space       { background: var(--img-space) center/cover, var(--color-bone); }

/* Work / showcase card media share the same image set */
.m-health    { background-image: var(--img-case-nhs); }
.m-bigdata   { background-image: var(--img-bigdata); }
.m-mobile    { background-image: var(--img-mobile); }
.m-logistics { background-image: var(--img-logistics); }
.m-space     { background-image: var(--img-case-esa); }
.m-lab       { background-image: var(--img-case-wales); }
.m-dbp       { background-image: var(--img-case-dbp); }   /* homepage card shares the DaybookPro page header */

/* Work page case-study sections use the case variables (same as their Selected Work card) */
#nhs-scotland .solution-visual  { background: var(--img-case-nhs) center/cover, var(--color-bone); }
#wales-traklab .solution-visual { background: var(--img-case-wales) center/cover, var(--color-bone); }
#esa .solution-visual           { background: var(--img-case-esa) center/cover, var(--color-bone); }
#mobile-health-record .solution-visual { background: var(--img-case-mhr) center/cover, var(--color-bone); }

/* ---------- Page hero framed photo ---------- */
#page-hero-about     { --img-page: var(--img-hero-about); }
#page-hero-solutions { --img-page: var(--img-hero-solutions); }
#page-hero-technologies { --img-page: var(--img-hero-technologies); }
#page-hero-contact   { --img-page: var(--img-hero-contact); }
#page-hero-work      { --img-page: var(--img-hero-work); }
/* Standalone header photo sections (v4) */
#page-photo-solutions { --img-page: var(--img-hero-solutions); }
#page-photo-contact { --img-page: var(--img-hero-contact); }
/* Contact payphones: the image is extra wide (3.06:1) with the phones near its right
   edge, so pinning it right keeps the phones the same size and distance from the right
   at every width; only the plain wall on the left gets trimmed. */
#page-photo-contact .page-photo__img { background-position: right center; }
#page-photo-work { --img-page: var(--img-hero-work); }
/* DaybookPro case study page (daybookpro.html): header = DaybookPro's own hero (truck),
   shared with the Work page's DaybookPro section that links to it */
#page-photo-daybookpro { --img-page: var(--img-case-dbp); }
#daybookpro .solution-visual { background: var(--img-case-dbp) center/cover, var(--color-bone); }   /* Work card that links to daybookpro.html shares its header image */
.solution-visual.v-dbp-tools  { background: var(--img-u-dbp-tools) center/cover, var(--color-bone); }
.solution-visual.v-dbp-mobile { background: var(--img-u-dbp-mobile) center/cover, var(--color-bone); }
.m-dbp-connect { background-image: var(--img-u-dbp-connect); }
.m-dbp-scale   { background-image: var(--img-u-dbp-scale); }
.m-dbp-roi     { background-image: url('../assets/industry-web.webp?v=101'); }   /* hand with holographic charts (was --img-web until web.html got its own photo) */
/* Mobile Health Record image cards: placeholders from the existing set until the owner supplies healthcare images */
.m-mhr-control { background-image: var(--img-u-mhr-control); }
.m-mhr-grow    { background-image: var(--img-u-mhr-grow); }
.m-mhr-care    { background-image: var(--img-u-mhr-care); }
#page-photo-technologies { --img-page: var(--img-hero-technologies); }
#page-photo-about { --img-page: var(--img-hero-about); }

/* ---------- Team avatars (about page) ---------- */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  margin: 0 0 var(--space-4);
  background: var(--color-bone) center/cover;
}
.avatar-1 { background-image: var(--img-avatar-1); }
.avatar-2 { background-image: var(--img-avatar-2); }
.avatar-3 { background-image: var(--img-avatar-3); }
.avatar-4 { background-image: var(--img-avatar-4); }

/* ---------- Technology page: tech card photo strip ---------- */
.tech-card.t-uiux       { --tech-img: var(--img-tech-uiux); }
.tech-card.t-servers    { --tech-img: var(--img-tech-servers); }
.tech-card.t-social     { --tech-img: var(--img-tech-social); }
.tech-card.t-backend    { --tech-img: var(--img-tech-backend); }
.tech-card.t-backend::before { background-position: center 15%; }   /* show the code on the monitors, not just the desk glow */
.tech-card.t-middleware { --tech-img: var(--img-tech-middleware); }
.tech-card.t-db         { --tech-img: var(--img-tech-db); }
.tech-card.t-cms        { --tech-img: var(--img-tech-cms); }
.tech-card.t-frontend   { --tech-img: var(--img-tech-frontend); }
.tech-card.t-mobile     { --tech-img: var(--img-tech-mobile); }

/* ---------- Contact page visual ---------- */
.contact-visual {
  border-radius: var(--radius-2xl);
  aspect-ratio: 16/9;
  margin-top: var(--space-2);
  background: var(--img-contact) center/cover, var(--color-bone);
  box-shadow: var(--shadow-sm);
}

/* Case study pages (2026-10-15): header photo = the case variable shared with its Work section;
   the two solution-block images per page are placeholders from the existing set, swap per slot */
#page-photo-nhs-scotland { --img-page: var(--img-case-nhs); }
#page-photo-wales-traklab { --img-page: var(--img-case-wales); }
#page-photo-esa { --img-page: var(--img-case-esa); }
#page-photo-mobile-health-record { --img-page: var(--img-case-mhr); }
.solution-visual.v-nhs-1 { background: var(--img-u-nhs-1) center/cover, var(--color-bone); }
.solution-visual.v-wal-2 { background: var(--img-u-wal-2) center/cover, var(--color-bone); }
.solution-visual.v-wal-3 { background: var(--img-u-wal-3) center/cover, var(--color-bone); }
.solution-visual.v-esa-1 { background: var(--img-u-esa-1) center/cover, var(--color-bone); }
.solution-visual.v-esa-2 { background: var(--img-u-esa-2) center/cover, var(--color-bone); }

/* ---------- Web service page (web.html, 2026-10-15) ----------
   Header photo = --img-web, shared with the homepage Web card and Solutions › Web & Digital
   (card = linked section rule). The three section images are placeholders from the existing
   set until the owner supplies web-specific photos (supply 1200x900, subject centred). */
#page-photo-web { --img-page: var(--img-web); }
.solution-visual.v-web-site      { background: var(--img-u-web-site) center/cover, var(--color-bone); }
.solution-visual.v-web-seo       { background: var(--img-u-web-seo) center/cover, var(--color-bone); }
.solution-visual.v-web-ecommerce { background: var(--img-u-web-ecommerce) center/cover, var(--color-bone); }

/* ---------- Insurance service page (insurance.html, 2026-10-16) ----------
   Header = --img-insurance, shared with the homepage Insurance card and Solutions › Insurance
   (card = linked section rule). The two section images are placeholders from the existing set
   until the owner supplies insurance photos (supply 1200x900, subject centred). */
#page-photo-insurance { --img-page: var(--img-insurance); }
.solution-visual.v-ins-industry    { background: var(--img-u-ins-industry) center/cover, var(--color-bone); }
.solution-visual.v-ins-integration { background: var(--img-u-ins-integration) center/cover, var(--color-bone); }

/* ---------- Healthcare service page (healthcare.html, 2026-10-16) ----------
   Header = --img-health, shared with the homepage Healthcare card and Solutions › Healthcare.
   Section image and the two product cards are placeholders from the existing set:
   TrakCare = the NHS Scotland case photo, TrakCare Lab = the Wales lab photo (the two case
   studies that use them). Supply 1200x900 healthcare photos to replace. */
#page-photo-healthcare { --img-page: var(--img-health); }
.solution-visual.v-hc-industry { background: var(--img-u-hc-industry) center/cover, var(--color-bone); }
.m-hc-trakcare { background-image: var(--img-u-hc-trakcare); }
.m-hc-traklab  { background-image: var(--img-u-hc-traklab); }

/* ---------- Integration service page (integration.html, 2026-10-16) ----------
   Header = --img-integration, shared with the homepage Integration card and Solutions › Integration.
   The two section images are placeholders from the existing set (the live page's own images are an
   InterSystems Cache/Ensemble diagram and header graphic, not copied). Supply 1200x900 to replace. */
#page-photo-integration { --img-page: var(--img-integration); }
.solution-visual.v-int-hospital { background: var(--img-u-int-hospital) center/cover, var(--color-bone); }
.solution-visual.v-int-systems  { background: var(--img-u-int-systems) center/cover, var(--color-bone); }

/* ---------- Big Data service page (big-data.html, 2026-10-16) ----------
   Header = --img-bigdata, shared with Solutions › Data & Analytics. ESA box = --img-case-esa (shared
   with the ESA case study). The other two section images are placeholders from the existing set. */
#page-photo-big-data { --img-page: var(--img-bigdata); }
.solution-visual.v-bd-access { background: var(--img-u-bd-access) center/cover, var(--color-bone); }
.solution-visual.v-bd-cloud  { background: var(--img-u-bd-cloud) center/cover, var(--color-bone); }
.solution-visual.v-bd-esa    { background: var(--img-case-esa) center/cover, var(--color-bone); }  /* Earth at night (ESA case study) */

/* ---------- Cloud Computing service page (cloud.html, 2026-10-16) ----------
   Header = --img-cloud, shared with Solutions › Cloud & SaaS. Section image is a placeholder. */
#page-photo-cloud { --img-page: var(--img-cloud); }
.solution-visual.v-cloud-what { background: var(--img-u-cloud-what) center/cover, var(--color-bone); }

/* ---------- Mobile service page (mobile.html, 2026-10-16) ----------
   Header = --img-mobile, shared with the homepage Mobile card and Solutions › Mobile.
   Latest project box = --img-case-mhr (Mobile Health Record case study). Platform images are placeholders. */
#page-photo-mobile { --img-page: var(--img-mobile); }
.solution-visual.v-mob-ios     { background: var(--img-u-mob-ios) center/cover, var(--color-bone); }
.solution-visual.v-mob-android { background: var(--img-u-mob-android) center/cover, var(--color-bone); }
.solution-visual.v-mob-windows { background: var(--img-u-mob-windows) center/cover, var(--color-bone); }
.solution-visual.v-mob-mhr     { background: var(--img-case-mhr) center/cover, var(--color-bone); }   /* links to the MHR case study, so it shares its header photo */
/* About · Our Company uses the Why IOL layout with its own four tiles */
#company .who-visual .tile:nth-child(1) { background: var(--img-about-1) center/cover, var(--color-bone); }
#company .who-visual .tile:nth-child(2) { background: var(--img-about-2) center/cover, var(--color-bone); }
#company .who-visual .tile:nth-child(3) { background: var(--img-about-3) center/cover, var(--color-bone); }
#company .who-visual .tile:nth-child(4) { background: var(--img-about-4) center/cover, var(--color-bone); }