/* Version B, industrial: an A/B proposal (24 September), on with
   ?style=industrial (html[data-style="industrial"]). Same content, same URLs.

   Round 3, same day. Hulusi: B still read as the colorium.fr base design.
   Direction (project/research/version-b-industrial-direction-2026-09-24.md):
   B is a spec sheet about our work. Structure, not decoration.
   - Gone: the page-height frame, the section seams and their cobalt squares,
     the notched button corner, mono on sentences and labels.
   - Everything is rows, columns and cells ruled with 1px hairlines.
   - Aeonik for everything readable, tabular figures; mono only for indexes
     (N° 01) and unit tags. 14px floor, sentence case.
   - Ink, white, one grey; cobalt #0052F8 for action only.
   Round 3c: every section of A stays in B with its layout and behaviour;
   only the hero is B's own (style-variant.js re-sources its photograph). */

/* Version B's own sections live in the HTML with data-variant="industrial";
   outside B they are hidden. Approving B for A = removing the attribute. */
html:not([data-style="industrial"]) [data-variant="industrial"] { display: none !important; }
/* Inline additions to shared copy (method texts): same rule, they are spans. */

/* ---------- Palette: concrete, steel, graphite; cobalt the only colour ----------
   Round 4 (Hulusi: "feel more industrial", freedom to evolve). References on
   Mobbin: Mora and Dovetail (graphite bands, cool greys, one bright accent). */
html[data-style="industrial"] .editorial {
  --background: #ffffff;
  --ed-canvas: #ffffff;      /* the page is white (Hulusi, round 17) */
  --ind-surface: #eff0f1;    /* concrete, for a few section bands */
  --ed-frame: #e1e4e7;       /* steel */
  --ed-line: #cdd2d8;
  --ed-ink: #0f1113;
  --ed-muted: #50565f;
  --ed-blue-wash: #e3e8f0;   /* steel blue, replaces the candy wash */
}
html[data-style="industrial"] body.editorial { background: var(--ed-canvas); }

html[data-style="industrial"] {
  --ind-graphite: #15171a;
  --ind-graphite-2: #1d2024;
  --ind-ink: #121417;
  --ind-muted: #5b616b;
  --ind-grey: #f4f5f6;
  --ind-line: rgb(18 20 23 / .14);
  --ind-line-strong: rgb(18 20 23 / .32);
  --ind-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
html[data-style="industrial"] body { font-variant-numeric: tabular-nums; }

/* ---------- Square, flat ---------- */
/* Devices keep their corners in every version (a phone is a phone, Hulusi 30 Sept): the case scenes' screens and layers are excluded. Certification stickers too: a seal is a logo (7 Oct). */
html[data-style="industrial"] :not(.showreel, .showreel *, .rl-tabs, .rl-tabs *, .ex__layer, .mo__box, .mo__tab, .mo__tab *, .ph__screen, .cc__screen, .mac__screen, .rb__shot, .rb__mac-screen, .sticker, .sticker *),
html[data-style="industrial"] :not(.showreel, .showreel *, .rl-tabs, .rl-tabs *)::before,
html[data-style="industrial"] :not(.showreel, .showreel *, .rl-tabs, .rl-tabs *, .sticker)::after { border-radius: 0 !important; }
/* The réalisations filter pills keep their round shape in B (Hulusi: "love this, keep it"). */
html[data-style="industrial"] :is(.case-category__dots button, .hero__star-part, [class*="avatar"]) { border-radius: 50% !important; }
html[data-style="industrial"] :is(.ed-card, .client-story, .case-category__surface, .contact-form, .estimator-card) { box-shadow: none !important; }
html[data-style="industrial"] :is(.popup, .navbar__mega, .navbar__panel) { box-shadow: none !important; }
/* The blue scroll line belongs to version A. */
html[data-style="industrial"] svg.thread { display: none !important; }

/* ---------- Mono: indexes and units only ---------- */
html[data-style="industrial"] :is(.ind-n, .ind-unit) { font-family: var(--ind-mono); font-weight: 400; letter-spacing: -.01em; }
html[data-style="industrial"] .ind-unit {
  display: inline-block; margin-left: .5rem; padding: .125rem .375rem; vertical-align: middle;
  border: 1px solid var(--ind-line-strong); color: var(--ind-ink); font-size: .875rem; line-height: 1.4;
}
html[data-style="industrial"] .ind-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Buttons: plain rectangles, instant inversion ---------- */
html[data-style="industrial"] :is(.ed-button, .navbar__project-link, .navbar__button, .popup__submit, .contact-form button[type="submit"], .button) {
  min-height: 3rem; padding-inline: 1.375rem; clip-path: none;
  transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}
html[data-style="industrial"] :is(.ed-button--brand, .navbar__button, .navbar__project-link):hover { background: var(--ind-ink); border-color: var(--ind-ink); color: #fff; }
html[data-style="industrial"] .ed-button--secondary { border-color: var(--ind-line-strong); }
html[data-style="industrial"] .ed-button--secondary:hover { background: var(--ind-ink); border-color: var(--ind-ink); color: #fff; }
html[data-style="industrial"] :is(.ed-button, .navbar__button, .navbar__project-link):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  /* Same :is() list as the rule above: :is() takes its strongest member's
     specificity, so a shorter list here lost to it and buttons kept moving. */
  html[data-style="industrial"] :is(.ed-button, .navbar__project-link, .navbar__button, .popup__submit, .contact-form button[type="submit"], .button) { transition: none; }
}

/* ---------- Navigation: A's bar, square, no extra lines ---------- */
html[data-style="industrial"] .navbar { box-shadow: none; }

/* ---------- Showreel: A's, untouched (its sky carries the scroll
   animation; round 4 put it on graphite and broke that, reverted). ---------- */

/* ---------- Contact and everything below it: white (Hulusi, round 5) ---------- */
html[data-style="industrial"] :is(#contact, #questions) { background: #fff; }

/* ---------- Hero B tiles: square, figures that fit their pane ---------- */
html[data-style="industrial"] .hero-cluster__tile--kpi { container-type: inline-size; }
html[data-style="industrial"] .hero-cluster__tile--kpi b { font-size: clamp(1.25rem, 26cqi, 2rem); }
/* 13 Oct 2026: the app tile stands on its dream plate (hero-options.css); no graphite, no ASCII field. */

/* ---------- Technologies: a new graphite section (built by style-variant.js)
   from the eleven technologies the navigation already lists. ---------- */
html[data-style="industrial"] .ind-stack { background: var(--ind-graphite); color: #fff; padding-block: var(--ed-section); }
html[data-style="industrial"] .ind-stack .ed-heading h2 { color: #fff; }
html[data-style="industrial"] .ind-stack .ed-heading h2 span { color: rgb(255 255 255 / .56); }
html[data-style="industrial"] .ind-stack .ed-heading p { color: rgb(255 255 255 / .72); }
html[data-style="industrial"] .ind-stack__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 3rem 0 0; padding: 0; list-style: none;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .12);
}
html[data-style="industrial"] .ind-stack__grid li { background: var(--ind-graphite); }
html[data-style="industrial"] .ind-stack__grid a {
  display: flex; align-items: center; gap: .875rem; min-height: 5.5rem; padding: 1.25rem 1.5rem;
  color: #fff; text-decoration: none; font-size: 1.0625rem; transition: background-color 120ms linear;
}
html[data-style="industrial"] .ind-stack__grid a:hover { background: var(--ind-graphite-2); }
/* 13 Oct 2026 (Hulusi: "maybe put dreamy on hover"): each cell opens onto
   a dream plate under a graphite veil, a different one per cell as on the
   réalisations reveal; the blue "all expertises" cell stays blue. */
html[data-style="industrial"] .ind-stack__grid a { position: relative; isolation: isolate; overflow: hidden; }
html[data-style="industrial"] .ind-stack__grid a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(21 23 26 / .62), rgb(21 23 26 / .22)), var(--stack-plate) center / cover no-repeat; opacity: 0; transform: scale(1.08); transition: opacity 320ms ease, transform 1200ms cubic-bezier(.2, .8, .2, 1); }
html[data-style="industrial"] .ind-stack__grid a:is(:hover, :focus-visible)::before { opacity: 1; transform: none; }
html[data-style="industrial"] .ind-stack__grid .ind-stack__more a::before { content: none; }
html[data-style="industrial"] .ind-stack__grid li:nth-child(6n + 1) a { --stack-plate: url("../../img/backgrounds/dream/figma/band/ai-bg-033.webp"); }
html[data-style="industrial"] .ind-stack__grid li:nth-child(6n + 2) a { --stack-plate: url("../../img/backgrounds/dream/figma/band/ai-bg-097.webp"); }
html[data-style="industrial"] .ind-stack__grid li:nth-child(6n + 3) a { --stack-plate: url("../../img/backgrounds/dream/figma/band/ai-bg-095.webp"); }
html[data-style="industrial"] .ind-stack__grid li:nth-child(6n + 4) a { --stack-plate: url("../../img/backgrounds/dream/figma/band/ai-bg-081.webp"); }
html[data-style="industrial"] .ind-stack__grid li:nth-child(6n + 5) a { --stack-plate: url("../../img/backgrounds/dream/figma/band/ai-bg-088.webp"); }
html[data-style="industrial"] .ind-stack__grid li:nth-child(6n + 6) a { --stack-plate: url("../../img/backgrounds/dream/figma/band/ai-bg-096.webp"); }
@media (prefers-reduced-motion: reduce) { html[data-style="industrial"] .ind-stack__grid a::before { transition: none; transform: none; } }
html[data-style="industrial"] .ind-stack__grid a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
html[data-style="industrial"] .ind-stack__grid svg { width: 1.75rem; height: 1.75rem; flex: none; }
html[data-style="industrial"] .ind-stack__grid .ind-stack__arrow { margin-left: auto; width: 1rem; height: 1rem; opacity: .5; }
html[data-style="industrial"] .ind-stack__grid .ind-stack__more { background: var(--brand); }
html[data-style="industrial"] .ind-stack__grid .ind-stack__more a:hover { background: #0046d4; }
html[data-style="industrial"] .ind-stack__grid .ind-stack__more .ind-stack__arrow { opacity: 1; }
@media (max-width: 899px) { html[data-style="industrial"] .ind-stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The ASCII field sits behind; content above it. */
html[data-style="industrial"] .ind-stack { position: relative; overflow: hidden; isolation: isolate; }
html[data-style="industrial"] .ind-ascii { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
html[data-style="industrial"] .ind-stack__grid li { background: rgb(21 23 26 / .86); backdrop-filter: blur(2px); }
/* 13 Oct (Hulusi: the mark vanished on hover): white on the plate, not blue. */
html[data-style="industrial"] .ind-stack__grid a:is(:hover, :focus-visible) svg:not(.ind-stack__arrow) { color: #fff; }
html[data-style="industrial"] .ind-stack__grid a:hover .ind-stack__arrow { opacity: 1; transform: translateX(2px); }
/* Proof row: live apps built on this stack. Dark cells on the graphite
   band (Hulusi: white cells read cheap); the figures lead by size, white,
   and count up once on entering view. Logos in white. */
html[data-style="industrial"] .ind-proof { margin-top: 3rem; }
html[data-style="industrial"] .ind-proof__title { margin: 0 0 1rem; font-size: .9375rem; color: rgb(255 255 255 / .72); }
html[data-style="industrial"] .ind-proof ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .12); }
html[data-style="industrial"] .ind-proof li { display: grid; gap: .375rem; align-content: start; padding: 1.5rem 1.5rem 1.75rem; background: rgb(21 23 26 / .9); }
html[data-style="industrial"] .ind-proof img { height: 1.5rem; width: auto; max-width: 8.5rem; margin-bottom: 1.75rem; object-fit: contain; object-position: left; filter: brightness(0) invert(1); opacity: .9; }
html[data-style="industrial"] .ind-proof b { font-size: clamp(2.75rem, 4vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }
html[data-style="industrial"] .ind-proof span { font-size: .9375rem; color: rgb(255 255 255 / .64); }
@media (max-width: 899px) { html[data-style="industrial"] .ind-proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* FAQ credentials. */
html[data-style="industrial"] .ind-creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 56rem; margin: 2rem auto 3.5rem; padding: 0; list-style: none; background: var(--ed-line); border: 1px solid var(--ed-line); }
html[data-style="industrial"] .ind-creds li { display: flex; align-items: center; background: #fff; }
html[data-style="industrial"] .ind-creds li > a { display: flex; align-items: center; gap: .875rem; flex: 1; color: inherit; text-decoration: none; }
html[data-style="industrial"] .ind-creds li, html[data-style="industrial"] .ind-creds li:has(> a) { padding: 1rem 1.25rem; gap: .875rem; }
html[data-style="industrial"] .ind-creds img { flex: none; height: 2.25rem; width: auto; max-width: 5.5rem; object-fit: contain; }
html[data-style="industrial"] .ind-creds span { display: grid; gap: .125rem; font-size: .875rem; line-height: 1.35; color: var(--ed-muted); }
html[data-style="industrial"] .ind-creds b { font-size: 1rem; font-weight: 500; color: var(--ed-ink); }
html[data-style="industrial"] .ind-creds a:hover b { text-decoration: underline; }
@media (max-width: 719px) { html[data-style="industrial"] .ind-creds { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html[data-style="industrial"] .ind-stack__grid a { transition: none; } }

/* ---------- Figures: A's bento, square, labels in Aeonik ---------- */
html[data-style="industrial"] .ed-card-label { font-family: inherit; letter-spacing: 0; }

/* Réalisations, témoignages, méthode and contact keep A's sections and
   behaviour (carousel, globe, pinned method, cobalt contact plate). Round 3c:
   Hulusi, "you broke my whole section design ... improve and evolve but don't
   lose" them. B changes their surface only (square, flat, no notch). */
html[data-style="industrial"] :is(.input, .select, textarea, .textarea-group) { border-color: var(--ind-line-strong); }

/* ---------- Details ---------- */
html[data-style="industrial"] :is(.chip, .tech-chip) { border-color: var(--ind-line-strong); background: transparent; }
html[data-style="industrial"] :is(.case-stage__kpi, .case-stage__result) { border-left: 1px solid var(--ind-line-strong); padding-left: .875rem; }

/* ---------- The switch between the two versions ---------- */
.ab-switch { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; display: flex; background: #fff; border: 1px solid #d8dce1; font-size: .875rem; }
.ab-switch a { padding: .625rem .875rem; color: #51565e; text-decoration: none; }
.ab-switch a[aria-current="true"] { background: #121417; color: #fff; }

/* ---------- Case cards: the card is the picture, the caption is the project ----------
   Round 11 (Hulusi: be consistent). In B the card shows the artwork and the
   key figure only; everything about the project sits under it in one place:
   the name (the one link, with its arrow), the category, the description and
   the tags. The in-card title, tag and full-card link of A are hidden in B. */
html[data-style="industrial"] .case-category .case-art__credit,
html[data-style="industrial"] .case-category .case-stage__link { display: none !important; }
html[data-style="industrial"] .case-caption { display: grid; gap: .625rem; margin-right: 7rem; padding: 1.25rem .25rem 0; }
/* One line of identity: logo, name (the link), category after a hairline. */
html[data-style="industrial"] .case-caption__id { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: 2.5rem; }
/* One visual weight for every logo: height from its proportions
   (--logo-h = 3.3rem x ratio^-0.4, set in the HTML), like the logo strips. */
html[data-style="industrial"] .case-caption__logo { width: auto; height: var(--logo-h, 1.5rem); max-width: none; margin-right: .25rem; object-fit: contain; mix-blend-mode: multiply; }
html[data-style="industrial"] .case-caption__logo--ink { filter: brightness(0); mix-blend-mode: normal; opacity: .85; }
html[data-style="industrial"] .case-caption__title { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
html[data-style="industrial"] .case-caption__title a { color: var(--ed-ink); text-decoration: none; }
html[data-style="industrial"] .case-caption__title a:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
html[data-style="industrial"] .case-caption__title a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
html[data-style="industrial"] .case-caption__tag { margin: 0; padding-left: .875rem; border-left: 1px solid var(--ed-line); font-size: .9375rem; line-height: 1.2; color: var(--ed-muted); }
html[data-style="industrial"] .case-caption__body p { margin: 0; max-width: 72ch; font-size: 1rem; line-height: 1.6; color: var(--ed-muted); }
/* The rail takes the height of the case on screen, not of the tallest one
   (captions differ in length); style-variant.js sets it. */
html[data-style="industrial"] [data-case-rail] { align-items: start; transition: height 220ms ease; }
@media (prefers-reduced-motion: reduce) { html[data-style="industrial"] [data-case-rail] { transition: none; } }
@media (max-width: 719px) { html[data-style="industrial"] .case-caption { margin-right: 0; padding-top: 3.75rem; } }

/* ---------- Nos articles: a rail, three at a time, before the footer ---------- */
html[data-style="industrial"] .ind-articles { background: #fff; }
html[data-style="industrial"] .ind-articles__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 3); gap: 1.5rem;
  margin: 2.5rem 0 0; padding: 0 0 1.25rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
html[data-style="industrial"] .ind-articles__grid > li { scroll-snap-align: start; }
html[data-style="industrial"] .ind-articles__grid a { display: grid; gap: .875rem; color: var(--ed-ink); text-decoration: none; }
html[data-style="industrial"] .ind-articles__grid img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ed-frame); }
html[data-style="industrial"] .ind-articles__grid h3 { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
html[data-style="industrial"] .ind-articles__grid a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
html[data-style="industrial"] .ind-articles__grid a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
html[data-style="industrial"] .ind-articles__more { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--ed-muted); }
html[data-style="industrial"] .ind-articles__more svg { width: 1rem; height: 1rem; }
html[data-style="industrial"] .ind-articles__nav { display: flex; gap: .5rem; margin-top: 1rem; }
html[data-style="industrial"] .ind-articles__nav button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--ed-line); background: #fff; color: var(--ed-ink); cursor: pointer; }
html[data-style="industrial"] .ind-articles__nav button:hover:not(:disabled) { background: var(--ed-ink); border-color: var(--ed-ink); color: #fff; }
html[data-style="industrial"] .ind-articles__nav button:disabled { opacity: .35; cursor: default; }
html[data-style="industrial"] .ind-articles__nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html[data-style="industrial"] .ind-articles__nav svg { width: 1.125rem; height: 1.125rem; }
html[data-style="industrial"] .ind-articles__nav [data-dir="-1"] svg { rotate: 180deg; }
@media (max-width: 899px) { html[data-style="industrial"] .ind-articles__grid { grid-auto-columns: calc((100% - 1.5rem) / 1.6); } }
@media (max-width: 599px) { html[data-style="industrial"] .ind-articles__grid { grid-auto-columns: 82%; } }
@media (prefers-reduced-motion: no-preference) { html[data-style="industrial"] .ind-articles__grid { scroll-behavior: smooth; } }

/* ---------- FAQ: a titled, numbered list; the call explained in the card ---------- */

html[data-style="industrial"] .ed-faq { counter-reset: faq; }
html[data-style="industrial"] .ed-faq details { counter-increment: faq; }
html[data-style="industrial"] .ed-faq summary { justify-content: flex-start; }
html[data-style="industrial"] .ed-faq summary::before { content: counter(faq, decimal-leading-zero); flex: none; width: 2.5rem; font-family: var(--ind-mono); font-size: .875rem; font-weight: 400; color: var(--ed-muted); }
html[data-style="industrial"] .ed-faq summary::after { margin-left: auto; }
html[data-style="industrial"] .ed-faq details p { padding-left: 4rem; }
html[data-style="industrial"] .ind-call { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.5; color: var(--ed-muted); }
/* The two actions side by side, left to right. */
html[data-style="industrial"] .ed-contact-card__actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .625rem; }
html[data-style="industrial"] .ed-contact-card__actions .ed-button { width: auto; min-width: 0; flex: 1 1 auto; justify-content: center; gap: .5rem; padding-inline: .75rem; font-size: .9375rem; white-space: nowrap; }
html[data-style="industrial"] .ed-faq summary { text-wrap: pretty; }
html[data-style="industrial"] .ed-contact-card__actions .ed-button__icon { margin-right: .125rem; }
@media (max-width: 420px) { html[data-style="industrial"] .ed-contact-card__actions { flex-wrap: wrap; } }

/* ---------- Hero B tiles: ASCII field behind the phone and the figure ---------- */
html[data-style="industrial"] :is(.hero-cluster__tile--app, .hero-cluster__tile--kpi) { isolation: isolate; }
html[data-style="industrial"] :is(.hero-cluster__tile--app, .hero-cluster__tile--kpi) > .ind-ascii { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Hero B: one-colour title, more air (Hulusi: squeezed on a 14") ---------- */
html[data-style="industrial"] .hero__accent { color: inherit !important; }
@media (min-width: 1024px) {
  html[data-style="industrial"][data-hero="b"] .home-editorial .hero__inner { grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); gap: clamp(3rem, 4.5vw, 5.5rem); padding-block: clamp(3.5rem, 7vh, 5.5rem) clamp(3rem, 6vh, 4.5rem); }
  html[data-style="industrial"][data-hero="b"] .home-editorial .hero__title { font-size: clamp(2.25rem, 2.9vw, 3rem); line-height: 1.08; max-width: 14em; }
  html[data-style="industrial"][data-hero="b"] .home-editorial .hero__body { gap: 2.25rem; }
  html[data-style="industrial"][data-hero="b"] .hero-cluster { --g: 12px; gap: 12px; }
}
html[data-style="industrial"] .hero-cluster__tile--kpi span { hyphens: manual; overflow-wrap: normal; }

/* ---------- Laptop tier (Hulusi, 24 Sept: most visitors use a 14" MacBook,
   about 1350 x 700 of browser window; everything was tuned on a 27").
   Between 1024 and 1600px wide: smaller headings and figures, tighter
   section spacing, case cards that fit the window with their caption. ---------- */
@media (min-width: 1024px) and (max-width: 1600px) {
  html[data-style="industrial"] .editorial {
    --ed-title: clamp(2rem, 2.9vw, 2.5rem);
    --ed-display: clamp(2.25rem, 3.3vw, 3rem);
    --ed-stat: clamp(2.75rem, 3.8vw, 3.5rem);
    --ed-section: clamp(3.5rem, 6vw, 5rem);
    --ed-lede: 1.0625rem;
  }
  html[data-style="industrial"] .client-spotlight__metric strong { font-size: clamp(3.5rem, 15cqw, 5rem); }
  html[data-style="industrial"] .case-category { --case-media-height: min(30rem, calc(100svh - 18rem), calc((100vw - var(--ed-gutter) * 2) / 1.92)); margin-bottom: clamp(3rem, 9svh, 5rem); }
  html[data-style="industrial"] .case-category__heading h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
  html[data-style="industrial"] :is(.case-stage__value, .case-stage__result-value) { font-size: clamp(2.25rem, 3.2vw, 3rem); }
  html[data-style="industrial"] .case-category .case-stage__kpi { padding: .75rem 1rem; }
  html[data-style="industrial"] .o1-pin[data-mode="pinned"] .o1-step h3 { font-size: clamp(1.5em, 2vw, 1.875em); }
  html[data-style="industrial"] .o1-pin[data-mode="pinned"] .o1-step__text { font-size: 1em; }
  html[data-style="industrial"] .ind-proof b { font-size: clamp(2.25rem, 3vw, 3rem); }
  html[data-style="industrial"] .ind-stack__grid a { min-height: 4.5rem; padding: 1rem 1.25rem; }
  html[data-style="industrial"] .closing-contact__title { font-size: var(--ed-title); }
  html[data-style="industrial"] .ed-faq summary { min-height: 4rem; padding-block: 1rem; font-size: 1.0625rem; }
  html[data-style="industrial"] .case-caption { gap: .375rem; padding-top: .75rem; }
  /* The counter sits beside the caption in B, so the space A keeps for it
     under the rail is not needed; that height goes to the sticky stack. */
  html[data-style="industrial"] .case-category__presentation { padding-bottom: 0 !important; }
  html[data-style="industrial"] .case-caption__id { min-height: 2rem; }
  html[data-style="industrial"] .case-caption__logo { height: calc(var(--logo-h, 1.5rem) * .8); }
  html[data-style="industrial"] .case-caption__title { font-size: 1.125rem; }
  /* Two lines on laptops so the sticky stack still fits a 14" window; the
     full description stays in the HTML. */
  html[data-style="industrial"] .case-caption__body p { font-size: .9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- More air between sections (Hulusi: sections too close) ---------- */
html[data-style="industrial"] .home-editorial { --home-section-gap: clamp(5.5rem, 10vw, 10rem); --home-heading-gap: clamp(2.25rem, 3.5vw, 3.25rem); }
html[data-style="industrial"] .home-editorial .ed-heading { margin-bottom: var(--home-heading-gap); }
html[data-style="industrial"] .rl-tabs { background: var(--ed-frame); }

/* ---------- Grey section bands on a white page (round 17) ---------- */
html[data-style="industrial"] :is(#realisations, #methode, .rq, .rw-archive) { background: var(--ind-surface); }
html[data-style="industrial"] #realisations .case-category__surface { background: var(--ind-surface); }
html[data-style="industrial"] #methode .o1-stage { background: transparent; }
/* Bands ease in and out of the white page (Hulusi: smooth, then "more
   eased"): smoothstep stops over 14rem, so the change starts and ends
   imperceptibly instead of at a visible linear edge. */
html[data-style="industrial"] :is(#realisations, #methode, .rq, .rw-archive) {
  --ind-fade: 14rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ind-surface) 0.0%, var(--ed-canvas)) calc(var(--ind-fade) * 0.0), color-mix(in srgb, var(--ind-surface) 2.8%, var(--ed-canvas)) calc(var(--ind-fade) * 0.1), color-mix(in srgb, var(--ind-surface) 10.4%, var(--ed-canvas)) calc(var(--ind-fade) * 0.2), color-mix(in srgb, var(--ind-surface) 21.6%, var(--ed-canvas)) calc(var(--ind-fade) * 0.3), color-mix(in srgb, var(--ind-surface) 35.2%, var(--ed-canvas)) calc(var(--ind-fade) * 0.4), color-mix(in srgb, var(--ind-surface) 50.0%, var(--ed-canvas)) calc(var(--ind-fade) * 0.5), color-mix(in srgb, var(--ind-surface) 64.8%, var(--ed-canvas)) calc(var(--ind-fade) * 0.6), color-mix(in srgb, var(--ind-surface) 78.4%, var(--ed-canvas)) calc(var(--ind-fade) * 0.7), color-mix(in srgb, var(--ind-surface) 89.6%, var(--ed-canvas)) calc(var(--ind-fade) * 0.8), color-mix(in srgb, var(--ind-surface) 97.2%, var(--ed-canvas)) calc(var(--ind-fade) * 0.9), color-mix(in srgb, var(--ind-surface) 100.0%, var(--ed-canvas)) calc(var(--ind-fade) * 1.0), color-mix(in srgb, var(--ind-surface) 100.0%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 1.0), color-mix(in srgb, var(--ind-surface) 97.2%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.9), color-mix(in srgb, var(--ind-surface) 89.6%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.8), color-mix(in srgb, var(--ind-surface) 78.4%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.7), color-mix(in srgb, var(--ind-surface) 64.8%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.6), color-mix(in srgb, var(--ind-surface) 50.0%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.5), color-mix(in srgb, var(--ind-surface) 35.2%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.4), color-mix(in srgb, var(--ind-surface) 21.6%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.3), color-mix(in srgb, var(--ind-surface) 10.4%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.2), color-mix(in srgb, var(--ind-surface) 2.8%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.1), color-mix(in srgb, var(--ind-surface) 0.0%, var(--ed-canvas)) calc(100% - var(--ind-fade) * 0.0));
}
html[data-style="industrial"] :is(.rq, .rw-archive) { --ind-fade: 7rem; }

/* The homepage case studies sit on pure white (Hulusi, 8 Oct): no grey band. */
html[data-style="industrial"] #realisations,
html[data-style="industrial"] #realisations .case-category__surface { background: #fff; }