/* Sogalpes — page CSS for the FR AI Services hub page.
   Page-unique → the file NAME carries the page keyword
   (agence-intelligence-artificielle-montreal.css). Class/id SELECTORS inside carry the FR
   language-root keyword (marketing-digital-montreal-*, KTD3) — nothing generic,
   nothing cross-language. The hero is a full-bleed CSS background photo
   (agence-intelligence-artificielle-montreal-hero-photo.webp) behind a navy overlay + the floating
   contact-form card — the same Option-D background hero model as the homepage +
   the SEO/Ads hubs. Base .hero / .hero-photo own the layout; this file only sets
   the page-specific photo framing + page-unique overrides. Colours reference the
   base :root tokens (no raw hex, no own :root block). */

.marketing-digital-montreal-hero-photo{
  min-height:clamp(32rem, 64vh, 44rem);
  background-position:center right;
}

/* Page-unique layout relocated from inline style= (no-inline-style build rule) */

/* #81 — phone-width hero. The desktop URL stays in the section's inline style=
   (page-lint reads it as the in-<main> content image, and the preload dedupes
   against it). An inline style outranks normal stylesheet rules, so this override
   needs !important — that is the whole reason it is here. The 1200px file renders
   at 412 CSS px, still ~3x oversampled at DPR 3, for ~100KB less. */
@media (max-width:767px){
  .marketing-digital-montreal-hero-photo{
    background-image:linear-gradient(90deg,rgba(var(--navy-deep-rgb),.92) 0%,rgba(var(--navy-deep-rgb),.72) 46%,rgba(var(--navy-deep-rgb),.40) 100%),url('/images/agence-intelligence-artificielle-montreal-hero-photo-mobile.webp')!important;
  }
}