/* Sogalpes — per-language base stylesheet: marketing-digital-montreal-base.css
   (V4 "Warm editorial luxury + navy"). Every class selector carries the
   marketing-digital-montreal- language-root prefix (zero cross-language sharing,
   CLAUDE.md S1). This file's :root is the canonical runtime token layer
   (single source of truth). */
/* Inter — AUTO-HÉBERGÉE (#81 lot B, 2026-08-07). Elle était chargée depuis
   fonts.googleapis.com, ce qui enchaînait DEUX origines tierces avant le premier
   rendu (document -> css2 -> woff2 gstatic). Mesuré sur 3 pages, les deux langues :
   bloquer ces deux origines fait passer la perf mobile de 89 à 98 et le premier
   affichage de 2,64 s à 1,54 s — un gain identique d'environ 1,1 s sur chaque page,
   soit tout le déficit R41 mobile des 12 pages.
   Fichier variable (wght 100..900) : une seule requête couvre 400/500/600 ET les
   700/800 qui étaient jusqu'ici synthétisés (l'ancienne requête css2 ne demandait
   que 400;500;600).
   Sous-ensemble `latin` uniquement : un balayage de tout le contenu .php/.js n'a rien
   trouvé en dehors — accents FR, Œ/œ, « », €, tirets cadratins y sont tous, et les
   quatre glyphes hors plage (-> ↺ ◆ ✓) sont également absents des sous-ensembles
   Google, donc ils passaient déjà par une police système et continuent de le faire.
   latin-ext ajouterait 83 Ko pour zéro glyphe.
   Préchargée dans includes/head.php AVANT les feuilles de style, pour que le
   téléchargement démarre avec le HTML au lieu d'attendre l'analyse du CSS ; l'url()
   ci-dessous résout vers ce même chemin absolu, donc le navigateur fusionne les deux
   en une seule requête.
   Copie propre à la langue — zéro partage inter-langues (CLAUDE.md §Keyword Saturation). */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/marketing-digital-montreal-inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fallback aux métriques ajustées pour Inter (#93 / batterie 20260806-163640, lot C).
   Inter est chargée avec display=swap : le navigateur peint d'abord Arial puis
   redistribue la mise en page à l'arrivée d'Inter. Mesuré à 100px, Inter est 7,13%
   PLUS LARGE qu'Arial — assez pour rebriser les lignes et décaler la page. La page
   FR ne perdait « que » 0,0533 de CLS contre 0,4333 pour sa jumelle EN, mais la
   cause est la même et le hasard des longueurs de texte est la seule différence.
   Surcharger les métriques du fallback rend les mises en page avant/après swap
   identiques. Dérivation mesurée dans le navigateur : size-adjust = largeur Inter /
   largeur Arial = 107,13% ; métriques d'Inter ascent .9688 / descent .2415 /
   lineGap 0 de l'em, chaque override étant divisé par le ratio size-adjust car il
   se résout sur l'em AJUSTÉ. Liberation Sans est métriquement compatible avec Arial. */
@font-face{
  font-family:"marketing-digital-montreal-fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:107.13%;
  ascent-override:90.44%;
  descent-override:22.55%;
  line-gap-override:0%;
}
/* Playfair Display — display face of the Modern Agency system (ticket 101 U2, KTD4).
   Self-hosted per language (zero cross-language sharing); latin subset preloaded in
   head.php, latin-ext loads on demand (Google's latin subset covers FR accents incl. oe).
   Metric-matched display fallback vs Georgia, calibrated AT WEIGHT 700 — every display-face
   consumer ships at 700, and the Playfair/Georgia width ratio is weight-dependent
   (98.2%% at 400 vs 88.09%% at 700; measured in-browser 2026-08-09). Playfair em metrics
   ascent 1.082 / descent .251 / lineGap 0 (fontTools on the shipped woff2); each override
   divided by the size-adjust ratio because it resolves on the ADJUSTED em. */
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/marketing-digital-montreal-playfair-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/marketing-digital-montreal-playfair-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"marketing-digital-montreal-display-fallback";
  src:local("Georgia");
  size-adjust:88.09%;
  ascent-override:122.83%;
  descent-override:28.49%;
  line-gap-override:0%;
}
:root{
--layout-reading-width:72ch;
  --layout-gap:1.5rem;
  --layout-editorial-gap:3rem;
  --layout-anchor-offset:12rem;
  --layout-nav-gap:1rem;
  --layout-nav-size:.875rem;
  --layout-cell-pad:1rem;
  --layout-proof-size:clamp(1.125rem,2vw,1.875rem);
  /* Modern Agency palette (ticket 101 U2) — mapping table + contrast ratios:
     docs/design-system-modern-agency.md, "Shipped runtime tokens" section. */
  --bg:#FFFFFF; --surface:#F7F5F0; --surface-2:#EFECE5; --ink:#111827;
  --text:#4B5563; --muted:#626976; /* design #6B7280 darkened in-family: 4.44 on cream -> 5.07 */
  --line:#F3F4F6; --line-2:#E5E7EB; --line-on-navy:rgba(255,255,255,.1);
  --navy:#152536; --navy-deep:#0D1B2A; --navy-deep-rgb:21,37,54; /* rgb = hero-overlay navy (design 7.2) */
  --navy-weak:rgba(21,37,54,.08); --on-navy:#FFFFFF; --on-navy-soft:#F3F4F6;
  --on-navy-muted:#D1D5DB; --on-navy-faint:#9CA3AF;
  --accent:#C9A364; --accent-deep:#816331; /* design gold-deep #A8813F darkened in-family: 3.28 on cream -> 5.12 */
  --accent-deepest:#6A5128; --accent-weak:rgba(201,163,100,.12);
  --on-accent:#152536; --white:#fff; --gold-light:#C9A364; --gold-hover:#DAB87F;
  --card-dark:#0D1B2A; --field-line:#D8D4CC; --field-line-dark:#6B7280;
  --gold-grad-a:#DFB97B; --gold-grad-b:#F0E2B6; --gold-grad-c:#D9B978; --gold-grad-d:#B4915A;
  --shadow-sm:0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-card:0 4px 20px -4px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-2xl:0 25px 50px -12px rgba(0,0,0,.35);
  --shadow-up:0 -12px 30px -22px rgba(0,0,0,.35);
  --font-display:"Playfair Display","marketing-digital-montreal-display-fallback",Georgia,serif;
  --font-body:"Inter","marketing-digital-montreal-fallback",system-ui,sans-serif;
  --fs-display:clamp(2.125rem,4.2vw,3.25rem);
  --fs-h2:clamp(1.875rem,2.6vw,2.25rem);
  --fs-h3:1.25rem;
  --fs-form-title:1.5rem;
  --fs-body:1rem;
  --container:min(92vw,1280px);
  --section-pad:clamp(2.5rem,6vw,5rem);
  --motion-duration:.2s; --motion-easing:ease; /* feedback scale (12b) - the .15s focus affordance and the .7s entrance are other categories and keep their own durations */
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --ring:0 0 0 2px var(--navy),0 0 0 4px var(--accent); /* KTD11: gold ring + dark inner offset, visible on cream AND navy */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Body prose justified — owner directive 2026-07-07 (deliberate deviation from the
   WCAG 1.4.8 left-align norm; revert to left if readability suffers). Only multi-line
   <p> are affected; single-line <p> stay natural. Centered components re-asserted where needed. */

h1,h2,h3{font-family:var(--font-display);color:var(--ink);line-height:1.1;font-weight:700}
h3{font-size:var(--fs-h3);margin:2.5rem 0 1rem}
.marketing-digital-montreal-container>p+.marketing-digital-montreal-grid,.marketing-digital-montreal-container>div:not([class])+.marketing-digital-montreal-grid{margin-top:2.5rem}
/* design 3: h2 (section) is --fs-h2, margin-bottom 3rem, or 1rem when a sub-paragraph follows.
   Declared on the element so a bare <h2> (legal pages) is covered too. */
h2{font-size:var(--fs-h2);margin-bottom:3rem}
h2:has(+ p){margin-bottom:1rem}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.marketing-digital-montreal-skip-link{position:absolute;left:.5rem;top:-3.5rem;z-index:100;background:var(--navy);color:var(--on-navy);padding:.6rem 1rem;border-radius:var(--radius-sm);font-family:var(--font-body);font-weight:600;transition:top .15s var(--motion-easing)}
@media (prefers-reduced-motion:reduce){.marketing-digital-montreal-skip-link{transition:none}}
.marketing-digital-montreal-skip-link:focus{top:.5rem}
.marketing-digital-montreal-hero-form div:has(> :required) > label::after,.marketing-digital-montreal-contact-form div:has(> :required) > label::after,.marketing-digital-montreal-consent:has(> input:required)::after{content:" *";color:var(--gold-light);font-weight:700}
.marketing-digital-montreal-container{max-width:var(--container);margin-inline:auto;padding-inline:1.5rem}
section{padding-block:var(--section-pad)}
section.marketing-digital-montreal-alt{background:var(--surface)}
.marketing-digital-montreal-eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;font-family:var(--font-body)}
.marketing-digital-montreal-lead{font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.7}
.marketing-digital-montreal-muted{color:var(--muted)}
.marketing-digital-montreal-accent{color:var(--accent-deep)}
.marketing-digital-montreal-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:600;font-size:1rem;padding:.9rem 1.6rem;border-radius:.25rem;min-height:50px;cursor:pointer;transition:background var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing),color var(--motion-duration) var(--motion-easing);border:1px solid transparent}
@media (prefers-reduced-motion:reduce){.marketing-digital-montreal-btn{transition:none}}
.marketing-digital-montreal-btn-primary{background:var(--accent);color:var(--on-accent)}
.marketing-digital-montreal-btn-primary:hover{background:var(--gold-hover);transform:translateY(-1px)}
.marketing-digital-montreal-btn-ghost{border-color:var(--ink);color:var(--ink)}
.marketing-digital-montreal-btn-ghost:hover{background:var(--ink);color:var(--surface)}
.marketing-digital-montreal-topbar{border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.marketing-digital-montreal-topbar .marketing-digital-montreal-container{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;padding-block:.6rem}
.marketing-digital-montreal-topbar a:hover{color:var(--ink)}
.marketing-digital-montreal-topbar .marketing-digital-montreal-spacer{margin-left:auto}
.marketing-digital-montreal-lang .marketing-digital-montreal-on{color:var(--ink);font-weight:600}
header.marketing-digital-montreal-site{position:sticky;top:0;z-index:50;background:var(--navy);box-shadow:var(--shadow-sm)}
header.marketing-digital-montreal-site .marketing-digital-montreal-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.marketing-digital-montreal-brand{display:inline-flex;align-items:center;gap:.6rem}
.marketing-digital-montreal-brand img{height:38px;width:auto;display:block}
/* owner directive 2026-08-09: brand name set live in the display face, brand gold gradient (design 10) */
.marketing-digital-montreal-brand-name{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:.01em;background:linear-gradient(135deg,var(--gold-grad-b) 0%,var(--gold-grad-c) 42%,var(--accent) 72%,var(--gold-grad-d) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
nav.marketing-digital-montreal-main{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2.5vw,2rem)}
nav.marketing-digital-montreal-main a.marketing-digital-montreal-link{color:var(--on-navy-muted);font-weight:500;font-family:var(--font-body)}
nav.marketing-digital-montreal-main a.marketing-digital-montreal-link:hover{color:var(--accent)}
/* #55 U2 — registry-driven pillar disclosure (native <details>: crawlable, no-JS, keyboard + touch). */
.marketing-digital-montreal-nav-group{position:relative}
.marketing-digital-montreal-nav-group>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;color:var(--on-navy-muted);font-weight:500;font-family:var(--font-body)}
.marketing-digital-montreal-nav-group>summary::-webkit-details-marker{display:none}
.marketing-digital-montreal-nav-group>summary::after{content:"";width:.46rem;height:.46rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform var(--motion-duration) var(--motion-easing)}
@media (prefers-reduced-motion:reduce){.marketing-digital-montreal-nav-group>summary::after{transition:none}}
.marketing-digital-montreal-nav-group[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.marketing-digital-montreal-nav-group>summary:hover{color:var(--accent)}
.marketing-digital-montreal-nav-panel{position:absolute;top:calc(100% + .55rem);left:0;min-width:236px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:.5rem;display:grid;gap:.15rem;z-index:60}
.marketing-digital-montreal-nav-panel-link{display:block;padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--muted);font-weight:500;font-family:var(--font-body)}
.marketing-digital-montreal-nav-panel-link:hover{background:var(--navy-weak);color:var(--ink)}
.marketing-digital-montreal-hero{padding-top:var(--section-pad)}
.marketing-digital-montreal-hero-grid{display:grid;gap:clamp(2rem,5vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:center}
.marketing-digital-montreal-hero h1{font-size:var(--fs-display);margin:1.1rem 0 1.4rem}
.marketing-digital-montreal-hero h1 em{font-style:italic;color:var(--accent-deep)}
.marketing-digital-montreal-hero p.marketing-digital-montreal-lead{font-size:clamp(1.05rem,1.5vw,1.1875rem);color:var(--text);max-width:46ch}
.marketing-digital-montreal-hero>.marketing-digital-montreal-container>p.marketing-digital-montreal-lead~p{font-size:clamp(1.05rem,1.5vw,1.1875rem);line-height:1.7;color:var(--text);max-width:46ch}
.marketing-digital-montreal-hero .marketing-digital-montreal-cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
/* ===== Trust strip (home) — ported verbatim from the approved mockup ===== */
.marketing-digital-montreal-trust{border-block:1px solid var(--line-2);background:var(--white)}
.marketing-digital-montreal-trust-row{width:var(--container);margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem clamp(1.4rem,3.5vw,2.6rem);align-items:center;justify-content:center;padding-block:1.5rem;font-size:.9rem;color:var(--text)}
.marketing-digital-montreal-trust-item{display:inline-flex;align-items:center;gap:.55rem}
.marketing-digital-montreal-trust svg{width:20px;height:20px;flex:none;color:var(--accent)}
ul.marketing-digital-montreal-container,ul.marketing-digital-montreal-grid{list-style:none}
/* ===== KPI proof band (home) — ported verbatim from the approved mockup ===== */
.marketing-digital-montreal-kpi{background:var(--white);padding:clamp(1.2rem,2.4vw,1.8rem)}
.marketing-digital-montreal-kpi .marketing-digital-montreal-k{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:clamp(1.8rem,3.2vw,2.25rem);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.marketing-digital-montreal-kpi .marketing-digital-montreal-k span{color:var(--accent-deep)}
.marketing-digital-montreal-kpi .marketing-digital-montreal-l{margin-top:.5rem;font-size:.84rem;color:var(--muted)}
.marketing-digital-montreal-sec-head{max-width:62ch;margin-bottom:clamp(2.5rem,4vw,3.4rem)}
.marketing-digital-montreal-sec-head h2{margin-top:.7rem}
.marketing-digital-montreal-sec-head p{color:var(--muted)}
/* Layout bricks relocated from inline style= (A4 audit finding, home 2026-07-17) */
.marketing-digital-montreal-container p+p{margin-top:1.5rem}
.marketing-digital-montreal-note{margin-top:1.5rem}
.marketing-digital-montreal-container p+p.marketing-digital-montreal-muted{color:inherit}
.marketing-digital-montreal-lead+.marketing-digital-montreal-note{font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.7;color:var(--text)}
.marketing-digital-montreal-lead-cta{margin-top:1.3rem}
.marketing-digital-montreal-sec-head--center{text-align:center;margin-inline:auto}
.marketing-digital-montreal-sec-head--tight{margin-bottom:1.2rem}
.marketing-digital-montreal-grid--center{align-items:center}
.marketing-digital-montreal-footer-tagline{margin-top:.6rem;max-width:30ch;font-size:var(--fs-body)}
.marketing-digital-montreal-grid{display:grid;gap:clamp(1.1rem,2vw,1.5rem)}
.marketing-digital-montreal-cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.marketing-digital-montreal-cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.marketing-digital-montreal-cols-4{grid-template-columns:1fr}
@media (min-width:768px){.marketing-digital-montreal-cols-4{grid-template-columns:repeat(2,1fr)}}
.marketing-digital-montreal-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2rem);box-shadow:var(--shadow-card);transition:border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing),box-shadow var(--motion-duration) var(--motion-easing)}
@media (prefers-reduced-motion:reduce){.marketing-digital-montreal-card{transition:none}}
.marketing-digital-montreal-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.marketing-digital-montreal-card h3{font-size:var(--fs-h3);margin:0 0 1rem}
.marketing-digital-montreal-card p{color:var(--muted);font-size:.875rem;line-height:1.7}
.marketing-digital-montreal-card .marketing-digital-montreal-more{display:inline-block;margin-top:1.1rem;color:var(--navy);font-weight:600;font-family:var(--font-body)}
.marketing-digital-montreal-card .marketing-digital-montreal-more:hover{color:var(--accent-deep)}
.marketing-digital-montreal-pillar .marketing-digital-montreal-num{font-family:var(--font-display);font-weight:600;font-style:italic;font-size:clamp(1.5rem,2.2vw,1.9rem);color:var(--accent-deep)}
.marketing-digital-montreal-pillar h3{font-size:1.5rem;margin:.5rem 0 1rem}
.marketing-digital-montreal-pillar p a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.marketing-digital-montreal-pillar p a:hover{color:var(--accent-deep)}
.marketing-digital-montreal-methode .marketing-digital-montreal-lead,.marketing-digital-montreal-methode .marketing-digital-montreal-lead+.marketing-digital-montreal-note{font-size:clamp(1.1rem,1.6vw,1.1875rem);color:var(--text);max-width:64ch}
.marketing-digital-montreal-methode .marketing-digital-montreal-lead strong{color:var(--navy)}
/* Data tables — real <table> for GEO/AEO extraction (owner directive 2026-06-20) */
figure.marketing-digital-montreal-data{margin:2.5rem 0 0}
figure.marketing-digital-montreal-data figcaption{font-family:var(--font-body);font-size:.84rem;color:var(--muted);margin-bottom:.8rem;max-width:70ch}
.marketing-digital-montreal-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.marketing-digital-montreal-data-table{width:100%;border-collapse:collapse;min-width:520px}
.marketing-digital-montreal-data-table th,.marketing-digital-montreal-data-table td{text-align:left;padding:.85rem 1.15rem;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.marketing-digital-montreal-data-table thead th{background:var(--navy);color:var(--on-navy);font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.marketing-digital-montreal-data-table tbody tr:last-child td{border-bottom:none}
.marketing-digital-montreal-data-table tbody td{color:var(--text)}
.marketing-digital-montreal-data-table tbody td:first-child{font-weight:600;color:var(--ink);background:var(--surface-2)}
.marketing-digital-montreal-data-table tbody td.marketing-digital-montreal-fig{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--accent-deep);white-space:nowrap}
/* ===== Pricing panel (home) — ported verbatim from the approved mockup ===== */
.marketing-digital-montreal-project{display:grid;gap:clamp(1.4rem,3vw,2.4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:center}
.marketing-digital-montreal-project-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.5rem)}
.marketing-digital-montreal-project-cap{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:1rem}
.marketing-digital-montreal-faq details{border-bottom:1px solid var(--line);padding:1.2rem .2rem}
.marketing-digital-montreal-faq summary{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.marketing-digital-montreal-faq summary::-webkit-details-marker{display:none}
.marketing-digital-montreal-faq summary::after{content:"+";color:var(--accent);font-size:1.6rem;line-height:1}
.marketing-digital-montreal-faq details[open] summary::after{content:"−"}
.marketing-digital-montreal-faq p{color:var(--muted);margin-top:.9rem;max-width:70ch}
.marketing-digital-montreal-final{background:var(--navy);border-radius:var(--radius-lg);padding:clamp(2rem,5vw,2.5rem);color:var(--on-navy-soft)}
.marketing-digital-montreal-final h2{font-size:var(--fs-h2);text-align:center;color:var(--white)}
.marketing-digital-montreal-final .marketing-digital-montreal-sub{text-align:center;color:var(--on-navy-muted);margin:.9rem auto 2.4rem;max-width:52ch}
.marketing-digital-montreal-final .marketing-digital-montreal-sub .marketing-digital-montreal-accent{color:var(--gold-light)}
form{display:grid;gap:1rem;max-width:640px;margin-inline:auto}
.marketing-digital-montreal-form-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.marketing-digital-montreal-final label{display:block;font-size:.84rem;color:var(--on-navy-muted);margin-bottom:.4rem;font-family:var(--font-body)}
.marketing-digital-montreal-final input,.marketing-digital-montreal-final textarea,.marketing-digital-montreal-final select{width:100%;background:transparent;border:1px solid var(--field-line-dark);border-radius:var(--radius-sm);color:var(--white);padding:.85rem .95rem;font:inherit;min-height:50px}
.marketing-digital-montreal-final textarea{min-height:120px;resize:vertical}
.marketing-digital-montreal-final .marketing-digital-montreal-btn-primary{background:var(--accent);color:var(--on-accent);justify-content:center}
.marketing-digital-montreal-final .marketing-digital-montreal-btn-primary:hover{background:var(--gold-hover)}
.marketing-digital-montreal-consent{font-size:.8rem;color:var(--on-navy-muted);display:flex;gap:.6rem;align-items:flex-start}
.marketing-digital-montreal-consent input{width:auto;min-height:auto;margin-top:.25rem}
footer.marketing-digital-montreal-site{border-top:6px solid var(--accent);padding-block:clamp(2.6rem,5vw,4rem) 2rem;color:var(--on-navy-muted);font-size:.9rem;background:var(--navy)}
footer.marketing-digital-montreal-site .marketing-digital-montreal-cols{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
footer.marketing-digital-montreal-site nav{display:flex;flex-wrap:wrap;gap:1rem}
footer.marketing-digital-montreal-site a:hover{color:var(--accent)}
footer .marketing-digital-montreal-legal{margin-top:2rem;border-top:1px solid var(--line-on-navy);padding-top:1.5rem;font-size:.8rem;color:var(--on-navy-faint)}
/* Cibles tactiles — #84 (batterie 20260806-163640, lot D). Les commandes AUTONOMES
   (navigation, téléphone/courriel du pied de page, sélecteur de langue) reçoivent une
   zone tactile d'au moins 44px. Pour la nav d'en-tête le changement est INVISIBLE : le
   conteneur fait déjà 58px de haut et les liens n'en occupaient que 27 — les centrer
   dans une boîte de 44px agrandit la zone cliquable sans déplacer le texte.
   Les liens EN MILIEU DE PHRASE sont volontairement laissés tels quels : la règle WCAG
   2.5.8 les exempte explicitement, et les gonfler à 44px casserait l'interlignage du
   corps de texte. Mesuré à 375px : nav du pied 24,5px, téléphone/courriel 17px,
   FR/EN 17,9×17px — ce dernier étant le pire de la page. */
nav.marketing-digital-montreal-main a.marketing-digital-montreal-link,
.marketing-digital-montreal-nav-group>summary{min-height:44px;display:inline-flex;align-items:center}
footer.marketing-digital-montreal-site nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
#marketing-digital-montreal-footer-phone,
#marketing-digital-montreal-footer-email{display:inline-flex;align-items:center;min-height:44px}
footer.marketing-digital-montreal-site .marketing-digital-montreal-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.marketing-digital-montreal-footer-lockup{height:96px;width:auto;display:block;margin-bottom:.6rem}
/* navy footer: the lang-switcher state colors are light-ground values — rescope for dark */
footer.marketing-digital-montreal-site .marketing-digital-montreal-lang .marketing-digital-montreal-on{color:var(--white)}
footer.marketing-digital-montreal-site .marketing-digital-montreal-lang .marketing-digital-montreal-muted{color:var(--on-navy-faint)}
@media (prefers-reduced-motion:no-preference){.marketing-digital-montreal-reveal{opacity:0;transform:translateY(16px);animation:rise .7s var(--motion-easing) forwards}@keyframes rise{to{opacity:1;transform:none}}}
/* ===== Option D above-the-fold conversion hero + mobile CTA bar (#23) ===== */
/* Hero as a full-bleed CSS background photo. The COMPLETE layered background-image
   (overlay gradient + photo url) is emitted INLINE on the section in the page PHP
   (KTD11); this class sets size/position ONLY — never background-image — so the
   inline value is the sole background-image and the overlay can never be dropped. */
.marketing-digital-montreal-hero-photo{background-size:cover;background-position:center;background-repeat:no-repeat;padding-block:var(--section-pad)}
.marketing-digital-montreal-hero-photo h1{color:var(--white)}
.marketing-digital-montreal-hero-photo h1 em{color:var(--accent)}
.marketing-digital-montreal-hero-photo .marketing-digital-montreal-eyebrow{color:var(--accent)}
/* p.<lead> matches the base `.hero p.lead` specificity (0,2,1) so the light color wins over the dark --text default on the photo. */
.marketing-digital-montreal-hero-photo p.marketing-digital-montreal-lead{color:var(--on-navy-soft)}
.marketing-digital-montreal-hero-photo h1,.marketing-digital-montreal-hero-photo p.marketing-digital-montreal-lead{text-shadow:0 2px 16px rgba(var(--navy-deep-rgb),.6)}
/* Proof line replacing the removed floating "2,5 G$" badge *//* Floating condensed contact-form card (navy) over the hero photo */
.marketing-digital-montreal-hero-form{background:var(--card-dark);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:clamp(1.4rem,3vw,2rem);color:var(--on-navy-soft);display:grid;gap:.7rem;max-width:460px;box-shadow:var(--shadow-2xl)}
.marketing-digital-montreal-hero-form-title{font-size:var(--fs-form-title);color:var(--white);line-height:1.1}
.marketing-digital-montreal-hero-form-sub{color:var(--on-navy-muted);margin-bottom:.3rem}
.marketing-digital-montreal-hero-form-sub .marketing-digital-montreal-accent{color:var(--gold-light)}
.marketing-digital-montreal-hero-form label{display:block;font-size:.78rem;color:var(--on-navy-muted);margin-bottom:.3rem;font-family:var(--font-body)}
.marketing-digital-montreal-hero-form input,.marketing-digital-montreal-hero-form textarea{width:100%;background:transparent;border:1px solid var(--field-line-dark);border-radius:var(--radius-sm);color:var(--white);padding:.7rem .8rem;font:inherit;min-height:48px}
.marketing-digital-montreal-hero-form textarea{min-height:70px;resize:vertical}
.marketing-digital-montreal-hero-form .marketing-digital-montreal-consent{font-size:.78rem;color:var(--on-navy-muted)}
.marketing-digital-montreal-hero-form .marketing-digital-montreal-consent input{width:auto;min-height:auto;margin-top:.25rem}
.marketing-digital-montreal-hero-form .marketing-digital-montreal-btn-primary{background:var(--accent);color:var(--on-accent);justify-content:center;width:100%}
.marketing-digital-montreal-hero-form .marketing-digital-montreal-btn-primary:hover{background:var(--gold-hover)}
/* Visible form-failure notice (#27) — renders at the top of the navy contact section */
.marketing-digital-montreal-form-error{max-width:640px;margin:0 auto 1.6rem;background:var(--accent-weak);border:1px solid var(--accent-deep);border-left-width:4px;border-radius:var(--radius-sm);padding:.9rem 1.1rem;color:var(--ink);font-size:.92rem}
.marketing-digital-montreal-form-error strong{color:var(--accent-deepest)}
/* dark-ground variant, SCOPED (KTD12): the notice rendered inside the navy contact/final
   panels must not go cream-on-cream; unscoped default stays light-ground-legible. */
.marketing-digital-montreal-final .marketing-digital-montreal-form-error,.marketing-digital-montreal-hero-form .marketing-digital-montreal-form-error{background:var(--accent-weak);border-color:var(--accent);color:var(--on-navy-soft)}
.marketing-digital-montreal-final .marketing-digital-montreal-form-error strong,.marketing-digital-montreal-hero-form .marketing-digital-montreal-form-error strong{color:var(--accent)}
.marketing-digital-montreal-form-error ul{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.3rem}
/* Mobile-only CTA bar + centered-logo header (< 768px) — matches fr.excavationchanthier.ca/egouts */
.marketing-digital-montreal-mobile-cta-bar{display:none}
.marketing-digital-montreal-mobile-cta-call{background:var(--navy);color:var(--on-navy)}
.marketing-digital-montreal-mobile-cta-call:hover{background:var(--navy-deep)}
.marketing-digital-montreal-mobile-cta-consultation{background:var(--accent);color:var(--on-accent)}
.marketing-digital-montreal-mobile-cta-consultation:hover{background:var(--gold-hover)}
/* All mobile chrome overrides are SCOPED to the flagged-body class (KTD4) so ONLY
   the homepages get the centered-logo header + hidden topbar/nav + CTA bar; every
   other page keeps its normal mobile chrome. */
@media (max-width:767.98px){
  body.marketing-digital-montreal-has-mobile-cta .marketing-digital-montreal-topbar{display:none}
  body.marketing-digital-montreal-has-mobile-cta header.marketing-digital-montreal-site .marketing-digital-montreal-container{justify-content:center}
  body.marketing-digital-montreal-has-mobile-cta nav.marketing-digital-montreal-main{display:none}
  body.marketing-digital-montreal-has-mobile-cta{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  body.marketing-digital-montreal-has-mobile-cta .marketing-digital-montreal-mobile-cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--shadow-up)}
  body.marketing-digital-montreal-has-mobile-cta .marketing-digital-montreal-mobile-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  body.marketing-digital-montreal-has-mobile-cta .marketing-digital-montreal-mobile-cta-bar .marketing-digital-montreal-btn{width:100%;justify-content:center;min-height:52px;padding-inline:.6rem;white-space:nowrap}
}

/* #7 — cookie-consent banner (Loi 25): fixed bottom bar, rendered only while no
   consent cookie is stored (footer.php). Buttons reuse the shared -btn classes. */
.marketing-digital-montreal-consent-banner{position:fixed;inset-inline:0;bottom:0;z-index:200;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:center;padding:1rem 1.2rem;background:var(--card-dark);color:var(--on-navy-soft);border-top:2px solid var(--accent);box-shadow:var(--shadow-up)}
/* A4: the Refuse ghost button was ink-on-ink on the dark banner — give it an on-dark treatment. */
.marketing-digital-montreal-consent-banner .marketing-digital-montreal-btn-ghost{background:transparent;border-color:var(--on-navy-muted);color:var(--on-navy-soft)}
.marketing-digital-montreal-consent-banner .marketing-digital-montreal-btn-ghost:hover{background:var(--on-navy-soft);color:var(--ink)}
.marketing-digital-montreal-consent-banner-text{margin:0;max-width:62ch}
.marketing-digital-montreal-consent-banner-text a{color:var(--accent)}
.marketing-digital-montreal-consent-banner-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ============================================================================
   ticket 101 U5 — "Modern Agency" homepage components.
   Spec: docs/design-system-modern-agency.md §7 (components) + §11 (forms).
   Every selector carries the FR language-root prefix; every colour, radius and
   shadow comes from the :root token layer above (no raw hex — TOKENS-NO-RAW-HEX).
   ========================================================================= */

/* --- Hero band (§7.2). Scoped to -hero-home so the bare -hero utility pages and
   the service heroes keep their current height until their own unit. --------- */
.marketing-digital-montreal-hero-home{min-height:600px;display:grid;align-content:center}
.marketing-digital-montreal-hero-home .marketing-digital-montreal-hero-form{margin-inline:auto 0}

/* --- Form card (§7.3 + §11). The card's signature is two corner brackets drawn
   with pseudo-elements .75rem OUTSIDE the card; at very narrow viewports the
   offset shrinks so the right bracket can never push past the viewport edge
   (the fluid-layout gate measures element rects, not just body overflow).
   Fields are the §11 LIGHT treatment: solid white on the dark card, because the
   card floats over a photograph and needs maximum separation. ---------------- */
.marketing-digital-montreal-hero-form input,
.marketing-digital-montreal-hero-form textarea{background:var(--white);border-color:var(--field-line);color:var(--navy)}
.marketing-digital-montreal-consent input{accent-color:var(--accent)}

/* --- Arrow link (§7.6/§7.7). align-items:flex-end keeps the chevron on the last
   line when the label wraps; margin-top:auto pins it to the card's bottom edge. */
.marketing-digital-montreal-more{display:inline-flex;align-items:flex-end;gap:.5rem;font-weight:700;font-family:var(--font-body)}
.marketing-digital-montreal-card .marketing-digital-montreal-more{display:inline-flex;align-items:flex-end;gap:.5rem;margin-top:auto;padding-top:1.1rem}
.marketing-digital-montreal-chev{display:inline-block;transition:transform var(--motion-duration) var(--motion-easing)}
.marketing-digital-montreal-more:hover .marketing-digital-montreal-chev,
.marketing-digital-montreal-btn:hover .marketing-digital-montreal-chev{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.marketing-digital-montreal-chev{transition:none}}

/* --- Cards: full-height flex column so every card in a row ends level (§7.7). */
.marketing-digital-montreal-card{display:flex;flex-direction:column}
@media (min-width:1025px){.marketing-digital-montreal-cols-4{grid-template-columns:repeat(4,1fr)}}

/* --- KPI card (§7.5): cream badge circle, display figure, grey caption. ----- */
.marketing-digital-montreal-kpi{text-align:center;align-items:center}
.marketing-digital-montreal-kpi-badge{width:3rem;height:3rem;flex:none;border-radius:999px;background:var(--surface);display:grid;place-items:center;margin:0 auto 1rem;color:var(--accent-deep)}
.marketing-digital-montreal-kpi-badge svg{width:24px;height:24px;display:block}

/* --- Twin feature cards (§7.6): navy A / gold-gradient B, link pinned bottom. */
.marketing-digital-montreal-big-card-grid{gap:clamp(1.2rem,2.6vw,2rem)}
.marketing-digital-montreal-big-card{border-radius:var(--radius-lg);padding:clamp(1.6rem,3.5vw,2.5rem);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;height:100%}
.marketing-digital-montreal-big-card h3{font-size:clamp(1.5rem,2.6vw,1.875rem);margin:0 0 1rem}
.marketing-digital-montreal-big-card-icon{margin-bottom:1.5rem}
.marketing-digital-montreal-big-card-icon svg{width:40px;height:40px;display:block}
.marketing-digital-montreal-big-card-navy{background:var(--navy);color:var(--on-navy-soft)}
.marketing-digital-montreal-big-card-navy h3{color:var(--accent)}
.marketing-digital-montreal-big-card-navy p{color:var(--on-navy-muted)}
.marketing-digital-montreal-big-card-navy .marketing-digital-montreal-big-card-icon,
.marketing-digital-montreal-big-card-navy .marketing-digital-montreal-more{color:var(--accent)}
.marketing-digital-montreal-big-card-navy .marketing-digital-montreal-more:hover{color:var(--white)}
.marketing-digital-montreal-big-card-gold{background:linear-gradient(135deg,var(--gold-grad-a) 0%,var(--accent) 100%);color:var(--on-accent)}
.marketing-digital-montreal-big-card-gold h3,
.marketing-digital-montreal-big-card-gold .marketing-digital-montreal-big-card-icon,
.marketing-digital-montreal-big-card-gold .marketing-digital-montreal-more{color:var(--on-accent)}
.marketing-digital-montreal-big-card-gold p{color:var(--on-accent);opacity:.9}
.marketing-digital-montreal-big-card-gold .marketing-digital-montreal-more:hover{opacity:.7}

/* --- Service card ring icon (§7.7). ---------------------------------------- */
.marketing-digital-montreal-svc-icon{width:3rem;height:3rem;flex:none;border:2px solid var(--accent);border-radius:999px;display:grid;place-items:center;margin-bottom:1.4rem;color:var(--accent-deep)}
.marketing-digital-montreal-svc-icon svg{width:24px;height:24px;display:block}

/* --- Feature panel, La méthode (§7.8). Full container width; the two
   paragraphs run as columns so the measure stays ~62 characters. Both are ONE
   voice: same face, size, colour and line-height (§3 owner rule) — only the
   gold <strong> runs in the first distinguish them. ------------------------- */
.marketing-digital-montreal-methode-panel{background:var(--navy);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,3.5rem);color:var(--on-navy-soft);box-shadow:var(--shadow-lg)}
.marketing-digital-montreal-methode-cols{display:grid;gap:clamp(1.5rem,3vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-bottom:2rem}
.marketing-digital-montreal-methode-panel .marketing-digital-montreal-lead,
.marketing-digital-montreal-methode-panel .marketing-digital-montreal-lead+.marketing-digital-montreal-note{font-size:clamp(1.05rem,1.4vw,1.1875rem);line-height:1.7;color:var(--on-navy-soft);max-width:none;margin-top:0}
.marketing-digital-montreal-methode-panel .marketing-digital-montreal-lead strong{color:var(--accent)}
.marketing-digital-montreal-methode-panel .marketing-digital-montreal-more{color:var(--accent);margin-top:0}
.marketing-digital-montreal-methode-panel .marketing-digital-montreal-more:hover{color:var(--white)}

/* --- Data table (§7.10): the figure reads as one raised object. ------------- */
figure.marketing-digital-montreal-data .marketing-digital-montreal-table-scroll{box-shadow:var(--shadow-card)}

/* --- Project-start pair: navy invitation + light preparation panel. ------ */
.marketing-digital-montreal-project:has(> .marketing-digital-montreal-project-main){align-items:stretch}
.marketing-digital-montreal-project-main{background:var(--navy);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.5rem);color:var(--on-navy-soft);box-shadow:var(--shadow-lg);text-align:center;display:flex;flex-direction:column;justify-content:center}
.marketing-digital-montreal-project-main p{color:var(--on-navy-muted);max-width:38ch;margin:1.4rem auto 0;text-align:center}
.marketing-digital-montreal-project-main .marketing-digital-montreal-btn{align-self:center;margin-top:1.7rem}

/* --- Terminologie (editorial two-column + §9 figure card). ----------------- */
.marketing-digital-montreal-term-grid{gap:clamp(2.5rem,4vw,3rem)}
.marketing-digital-montreal-term-fig{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(.9rem,2vw,1.5rem);box-shadow:var(--shadow-card)}
.marketing-digital-montreal-term-fig img{width:100%;height:auto;display:block}

/* --- FAQ accordion (§7.12): one card per row, gold + rotating 45deg. ------- */
.marketing-digital-montreal-faq-list{display:grid;gap:1rem}
.marketing-digital-montreal-faq-list .marketing-digital-montreal-faq-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:0}
.marketing-digital-montreal-faq-list .marketing-digital-montreal-faq-card>summary{padding:1.25rem 1.4rem;font-size:1.125rem}
.marketing-digital-montreal-faq-list .marketing-digital-montreal-faq-card>summary::after{content:"+";display:inline-block;font-family:var(--font-body);font-size:1.5rem;transition:transform var(--motion-duration) var(--motion-easing)}
.marketing-digital-montreal-faq-list .marketing-digital-montreal-faq-card[open]>summary::after{content:"+";transform:rotate(45deg)}
.marketing-digital-montreal-faq-list .marketing-digital-montreal-faq-card>p{margin-top:0;padding:0 1.4rem 1.4rem;max-width:none}
@media (prefers-reduced-motion:reduce){.marketing-digital-montreal-faq-list .marketing-digital-montreal-faq-card>summary::after{transition:none}}

/* Approved global layout refinement (owner 2026-09-05). Content stays intact.
   Structural guards keep rich service sections and homepage grids unchanged. */


/* Keep the desktop navigation compact enough for the tablet/desktop seam.
   At narrower widths it forms intentional rows; the approved mobile bar stays. */
nav.marketing-digital-montreal-main{
  gap:var(--layout-nav-gap);
  justify-content:flex-end;
  font-size:var(--layout-nav-size);
}
nav.marketing-digital-montreal-main>.marketing-digital-montreal-link,
nav.marketing-digital-montreal-main>.marketing-digital-montreal-btn{white-space:nowrap}
#marketing-digital-montreal-hero-contact,
#marketing-digital-montreal-contact,
#marketing-digital-montreal-contact-form{
  scroll-margin-top:var(--layout-anchor-offset);
}

/* Long prose gets a readable measure without deleting or shrinking the copy. */
[data-spine="faq"] .marketing-digital-montreal-faq-list{
  max-width:var(--layout-reading-width);
}

/* Services: an open editorial table. The real headers/cells remain intact. */
[data-spine="included"] .marketing-digital-montreal-table-scroll{box-shadow:none}
[data-spine="included"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child) tbody td{
  background:transparent;
  padding-block:var(--layout-gap);
  border-color:var(--line-2);
}
[data-spine="included"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child) th:first-child{width:30%}

/* Comparison: emphasize the Sogalpes column, not three identical columns. */
[data-spine="slot"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p + figure:last-child) .marketing-digital-montreal-data-table tbody td:last-child{
  background:var(--surface);
  color:var(--ink);
  font-weight:600;
}
[data-spine="slot"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p + figure:last-child) .marketing-digital-montreal-data-table thead th:last-child{
  background:var(--accent);
  color:var(--on-accent);
}

/* Proof: distinguish the actual figures while retaining the required table. */
[data-spine="proof"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child) tbody td:first-child{
  background:var(--white);
  font-weight:400;
}
[data-spine="proof"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child) td.marketing-digital-montreal-fig{
  font-size:var(--layout-proof-size);
}
[data-spine="proof"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child) th:first-child{width:60%}

@media (min-width:768px){
  [data-spine="problem"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p:last-child)>.marketing-digital-montreal-container,
  [data-spine="slot"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p + figure:last-child)>.marketing-digital-montreal-container{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--layout-editorial-gap);
  }
  [data-spine="problem"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p:last-child) .marketing-digital-montreal-sec-head,
  [data-spine="slot"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p + figure:last-child) .marketing-digital-montreal-sec-head,
  [data-spine="slot"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p + figure:last-child) figure{grid-column:1/-1}
  [data-spine="problem"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p:last-child)>.marketing-digital-montreal-container>p,
  [data-spine="slot"]:has(> .marketing-digital-montreal-container > .marketing-digital-montreal-sec-head + p + p + figure:last-child)>.marketing-digital-montreal-container>p{
    max-width:none;
    margin-top:0;
  }
}
@media (min-width:1024px){
  [data-spine="proof"]>.marketing-digital-montreal-container:has(> .marketing-digital-montreal-sec-head + figure:last-child):has(.marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child)){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    gap:var(--layout-editorial-gap);
    align-items:start;
  }
  [data-spine="proof"]>.marketing-digital-montreal-container:has(> .marketing-digital-montreal-sec-head + figure:last-child):has(.marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child))>figure{margin-top:0}
}
@media (max-width:767.98px){
  :root{
    --layout-anchor-offset:7rem;
    --layout-cell-pad:.75rem;
  }
  header.marketing-digital-montreal-site .marketing-digital-montreal-container{flex-wrap:wrap}
  nav.marketing-digital-montreal-main{min-width:0;justify-content:center}
  nav.marketing-digital-montreal-main>.marketing-digital-montreal-btn{white-space:normal;max-width:100%}
  [data-spine="included"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child),
  [data-spine="proof"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child){
    min-width:0;
    table-layout:fixed;
    overflow-wrap:anywhere;
  }
  [data-spine="included"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child) th:first-child{width:36%}
  .marketing-digital-montreal-data-table th,
  .marketing-digital-montreal-data-table td{padding-inline:var(--layout-cell-pad)}
  [data-spine="proof"] .marketing-digital-montreal-data-table:has(> thead > tr > th:nth-child(2):last-child) td.marketing-digital-montreal-fig{white-space:normal}
}


/* Owner-approved project-start content: preserve the former paired layout. */
.marketing-digital-montreal-project-title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em;color:var(--accent);margin:0}
.marketing-digital-montreal-project-cap{font-family:var(--font-body);line-height:1.5}
.marketing-digital-montreal-project-prompts{display:grid;gap:var(--layout-gap);margin:0}
.marketing-digital-montreal-project-prompts dt{font-weight:600;color:var(--navy)}
.marketing-digital-montreal-project-prompts dd{margin:.3rem 0 0;color:var(--text);line-height:1.6}