/* Homepage content first built in version B, now in A too (24 Sept):
   the technologies section, case captions, articles rail, FAQ credentials
   and call line, plus the laptop sizing and section spacing. Shared rules
   are unscoped; rules that give A its own look are scoped to
   html:not([data-style="industrial"]) so B's industrial.css keeps its look. */

.ind-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Shared ---------- */
.ind-call { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.5; color: var(--ed-muted); }
.ed-contact-card__actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .625rem; }
.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; }
@media (max-width: 420px) { .ed-contact-card__actions { flex-wrap: wrap; } }
.ed-faq summary { text-wrap: pretty; }
[data-case-rail] { align-items: start; transition: height 220ms ease; }
@media (prefers-reduced-motion: reduce) { [data-case-rail] { transition: none; } }
/* The counter sits beside the caption, so the space kept for it under the
   rail goes to the sticky stack. */
.case-category .case-category__presentation { padding-bottom: 0; }

/* More air between homepage sections (Hulusi, 24 Sept). */
.home-editorial { --home-section-gap: clamp(5.5rem, 10vw, 10rem); --home-heading-gap: clamp(2.25rem, 3.5vw, 3.25rem); }
.home-editorial .ed-heading { margin-bottom: var(--home-heading-gap); }

/* ---------- A's look ---------- */
/* Technologies: a frame of white cards, like the capabilities block. */
html:not([data-style="industrial"]) .ind-stack__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: .75rem; list-style: none;
  background: var(--ed-frame); border-radius: var(--ed-radius-xl);
}
html:not([data-style="industrial"]) .ind-stack__grid li { border-radius: calc(var(--ed-radius-xl) - .75rem); background: var(--surface, #fff); }
html:not([data-style="industrial"]) .ind-stack__grid a { display: flex; align-items: center; gap: .875rem; min-height: 4.5rem; padding: 1rem 1.25rem; border-radius: inherit; color: var(--ed-ink); text-decoration: none; font-size: 1.0625rem; transition: background-color 160ms ease; }
html:not([data-style="industrial"]) .ind-stack__grid a:hover { background: var(--ed-blue-wash); }
html:not([data-style="industrial"]) .ind-stack__grid a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html:not([data-style="industrial"]) .ind-stack__grid svg { width: 1.75rem; height: 1.75rem; flex: none; }
html:not([data-style="industrial"]) .ind-stack__grid .ind-stack__arrow { width: 1rem; height: 1rem; margin-left: auto; opacity: .5; }
html:not([data-style="industrial"]) .ind-stack__more { background: var(--brand) !important; }
html:not([data-style="industrial"]) .ind-stack__more a { color: #fff; }
html:not([data-style="industrial"]) .ind-stack__more a:hover { background: transparent; }
html:not([data-style="industrial"]) .ind-stack__more .ind-stack__arrow { opacity: 1; }
html:not([data-style="industrial"]) .ind-proof { margin-top: 2.5rem; }
html:not([data-style="industrial"]) .ind-proof__title { margin: 0 0 1rem; font-size: .9375rem; color: var(--ed-muted); }
html:not([data-style="industrial"]) .ind-proof ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
html:not([data-style="industrial"]) .ind-proof li { display: grid; gap: .375rem; align-content: start; padding: 1.5rem; border-radius: var(--ed-radius-lg); background: var(--surface, #fff); box-shadow: 0 0 0 1px var(--ed-line) inset; }
html:not([data-style="industrial"]) .ind-proof img { height: 1.5rem; width: auto; max-width: 8.5rem; margin-bottom: 1.25rem; object-fit: contain; object-position: left; filter: grayscale(1); opacity: .75; }
html:not([data-style="industrial"]) .ind-proof b { font-size: clamp(2.25rem, 3.2vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: -.04em; color: var(--ed-ink); font-variant-numeric: tabular-nums; }
html:not([data-style="industrial"]) .ind-proof span { font-size: .9375rem; color: var(--ed-muted); }
@media (max-width: 899px) {
  html:not([data-style="industrial"]) :is(.ind-stack__grid, .ind-proof ul) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Case captions: A keeps the name and tag on the card, so the caption shows
   the description only. */
html:not([data-style="industrial"]) .case-caption__id { display: none; }
html:not([data-style="industrial"]) .case-caption { margin-right: 7rem; padding: 1rem .25rem 0; }
html:not([data-style="industrial"]) .case-caption__body p { margin: 0; max-width: 72ch; font-size: 1rem; line-height: 1.6; color: var(--ed-muted); }
@media (max-width: 719px) { html:not([data-style="industrial"]) .case-caption { margin-right: 0; padding-top: 3.75rem; } }

/* Articles: a rail, three at a time, rounded like the rest of A. */
html:not([data-style="industrial"]) .ind-articles__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 3); gap: 1.5rem;
  margin: 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:not([data-style="industrial"]) .ind-articles__grid > li { scroll-snap-align: start; }
html:not([data-style="industrial"]) .ind-articles__grid a { display: grid; gap: .875rem; color: var(--ed-ink); text-decoration: none; }
html:not([data-style="industrial"]) .ind-articles__grid img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--ed-radius-lg); background: var(--ed-frame); }
html:not([data-style="industrial"]) .ind-articles__grid h3 { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
html:not([data-style="industrial"]) .ind-articles__grid a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
html:not([data-style="industrial"]) .ind-articles__grid a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--ed-radius-lg); }
html:not([data-style="industrial"]) .ind-articles__more { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--ed-muted); }
html:not([data-style="industrial"]) .ind-articles__more svg { width: 1rem; height: 1rem; }
html:not([data-style="industrial"]) .ind-articles__nav { display: flex; gap: .5rem; margin-top: 1rem; }
html:not([data-style="industrial"]) .ind-articles__nav button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--ed-line); border-radius: 50%; background: var(--surface, #fff); color: var(--ed-ink); cursor: pointer; }
html:not([data-style="industrial"]) .ind-articles__nav button:hover:not(:disabled) { border-color: var(--ed-ink); }
html:not([data-style="industrial"]) .ind-articles__nav button:disabled { opacity: .35; cursor: default; }
html:not([data-style="industrial"]) .ind-articles__nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html:not([data-style="industrial"]) .ind-articles__nav svg { width: 1.125rem; height: 1.125rem; }
html:not([data-style="industrial"]) .ind-articles__nav [data-dir="-1"] svg { rotate: 180deg; }
@media (max-width: 899px) { html:not([data-style="industrial"]) .ind-articles__grid { grid-auto-columns: calc((100% - 1.5rem) / 1.6); } }
@media (max-width: 599px) { html:not([data-style="industrial"]) .ind-articles__grid { grid-auto-columns: 82%; } }

/* FAQ credentials: a frame of rounded cells. */
html:not([data-style="industrial"]) .ind-creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; max-width: 56rem; margin: 2rem auto 3.5rem; padding: .5rem; list-style: none; background: var(--ed-frame); border-radius: var(--ed-radius-lg); }
html:not([data-style="industrial"]) .ind-creds li { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem; border-radius: var(--ed-radius-md); background: var(--surface, #fff); }
html:not([data-style="industrial"]) .ind-creds li > a { display: flex; align-items: center; gap: .875rem; flex: 1; color: inherit; text-decoration: none; }
html:not([data-style="industrial"]) .ind-creds img { flex: none; height: 2.25rem; width: auto; max-width: 5.5rem; object-fit: contain; }
html:not([data-style="industrial"]) .ind-creds span { display: grid; gap: .125rem; font-size: .875rem; line-height: 1.35; color: var(--ed-muted); }
html:not([data-style="industrial"]) .ind-creds b { font-size: 1rem; font-weight: 500; color: var(--ed-ink); }
html:not([data-style="industrial"]) .ind-creds a:hover b { text-decoration: underline; }
@media (max-width: 719px) { html:not([data-style="industrial"]) .ind-creds { grid-template-columns: 1fr; } }

/* ---------- Laptop tier, both versions (a 14" MacBook shows about
   1350 x 700 of browser window; everything had been tuned on a 27"). ---------- */
@media (min-width: 1024px) and (max-width: 1600px) {
  .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;
  }
  .client-spotlight__metric strong { font-size: clamp(3.5rem, 15cqw, 5rem); }
  .case-category { --case-media-height: min(30rem, calc(100svh - 18rem), calc((100vw - var(--ed-gutter) * 2) / 1.92)); margin-bottom: clamp(3rem, 9svh, 5rem); }
  .case-category__heading h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
  :is(.case-stage__value, .case-stage__result-value) { font-size: clamp(2.25rem, 3.2vw, 3rem); }
  .case-category .case-stage__kpi { padding: .75rem 1rem; }
  .o1-pin[data-mode="pinned"] .o1-step h3 { font-size: clamp(1.5em, 2vw, 1.875em); }
  .o1-pin[data-mode="pinned"] .o1-step__text { font-size: 1em; }
  .closing-contact__title { font-size: var(--ed-title); }
  .ed-faq summary { min-height: 4rem; padding-block: 1rem; font-size: 1.0625rem; }
  /* Two lines on laptops so the sticky stack fits a 14" window; the full
     description stays in the HTML. */
  .case-caption__body p { font-size: .9375rem !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ASCII field behind the technologies section in A (home-content.js). */
html:not([data-style="industrial"]) .ind-stack { position: relative; overflow: hidden; isolation: isolate; }
html:not([data-style="industrial"]) .ind-stack > .ind-ascii { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* The frame lets the field show through between the cards. */
html:not([data-style="industrial"]) .ind-stack__grid { background: color-mix(in srgb, var(--ed-frame) 55%, transparent); backdrop-filter: blur(1px); }

/* Hero A keeps its own padding: the section gap was raised for the space
   between sections, and the hero read it too (151px above and below on a
   14" window). */
html:not([data-hero]) .home-editorial .hero__inner { padding-block: clamp(2rem, 5svh, 4rem); }
/* Laptop tier for hero A: title, logos and the photo pair fit a 14" window. */
@media (min-width: 1024px) and (max-width: 1600px) {
  html:not([data-hero]) .home-editorial .hero__title { font-size: clamp(2.25rem, 3.1vw, 2.875rem); }
  html:not([data-hero]) .home-editorial .hero__body { gap: 1.375rem; }
  html:not([data-hero]) .home-editorial .hero__clients { row-gap: .75rem; }
  html:not([data-hero]) .home-editorial .hero__client-logo { height: calc(var(--logo-h, 1.4rem) * .85); }
  html:not([data-hero]) .home-editorial .hero__media { height: min(30.25rem, calc(100svh - 12rem)); }
}