/* Case study cards and carousel, shared by the homepage and the /case-studies
   page (Kristian, 15 Oct 2026). Same dark picture cards as the "More case
   studies" row on each case study page; that page keeps its own inline copy. */
.cs2-more,
.cs-index {
  --ink: #232A31;
  --paper: #FAFAF8;
  --sky: #AFC4DD;
  --blue: #1B3A5B;
  --steel: #586069;
}

.cs2-more__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cs2-more__nav { display: flex; gap: 10px; flex: none; }
.cs2-more__nav[hidden] { display: none; }
.cs2-more__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(35, 42, 49, 0.25); border-radius: 50%; background: var(--paper); color: var(--ink); font: 500 20px/1 'Source Sans 3', system-ui, sans-serif; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.cs2-more__btn:focus-visible { background: var(--ink); color: var(--paper); }
.cs2-more__btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .cs2-more__btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
}
.cs2-more__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 16px; }
.cs2-more__track::-webkit-scrollbar { display: none; }
.cs2-more__track:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.cs2-more__track > .cs2-card { scroll-snap-align: start; }
@media (max-width: 900px) { .cs2-more__track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 620px) { .cs2-more__track { grid-auto-columns: 86%; } }
@media (prefers-reduced-motion: reduce) { .cs2-more__track { scroll-behavior: auto; } }

.cs2-card { position: relative; display: flex; flex-direction: column; min-height: 440px; border-radius: 16px; overflow: hidden; background: var(--ink); color: var(--paper); text-decoration: none; }
.cs2-card__img { position: absolute; inset: 0 0 auto; height: 62%; }
.cs2-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.cs2-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 42, 49, 0.15) 0%, rgba(35, 42, 49, 0.55) 55%, var(--ink) 100%); }
.cs2-card__body { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 28px 30px 30px; }
.cs2-card__k { font: 500 13px/1.3 'IBM Plex Mono', ui-monospace, monospace; color: rgba(250, 250, 248, 0.66); }
.cs2-card__h { font: 500 clamp(22px, 2.2vw, 28px)/1.15 'Fraunces', Georgia, serif; color: var(--paper); text-wrap: balance; transition: color 200ms ease; }
.cs2-card__go { margin-top: 6px; font-weight: 600; font-size: 16px; color: var(--paper); }
.cs2-card__go::after { content: ' \2192'; }
.cs2-card:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.cs2-card:focus-visible .cs2-card__h { color: var(--sky); }
@media (hover: hover) and (pointer: fine) {
  .cs2-card:hover .cs2-card__h { color: var(--sky); }
  .cs2-card:hover .cs2-card__img img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .cs2-card__img img { transition: none; } @media (hover: hover) and (pointer: fine){.cs2-card:hover .cs2-card__img img{ transform: none; }} }
@media (max-width: 720px) { .cs2-card { min-height: 380px; } }

/* Homepage section. */
.hp-cs { padding: clamp(64px, 9vw, 128px) 0; }
.hp-cs__wrap { max-width: 1480px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); }
.hp-cs .cs2-more__top { margin-bottom: clamp(32px, 3.4vw, 48px); }
.hp-cs__all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; font-weight: 600; font-size: 16px; color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.hp-cs__all::after { content: ' \2192'; white-space: pre; }
@media (hover: hover) and (pointer: fine) { .hp-cs__all:hover { text-decoration-color: #1B3A5B; } }

/* /case-studies page grid: every case study, three across. */
.cs-index__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.cs-index__grid > li { display: flex; }
.cs-index__grid .cs2-card { flex: 1; }
@media (max-width: 900px) { .cs-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cs-index__grid { grid-template-columns: minmax(0, 1fr); } }

/* /case-studies page layout. */
.cs-index__wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .cs-index__wrap { padding: 0 32px; } }
.cs-index__hero { padding: 132px 0 0; }
.cs-index__hero h1 { margin: 0; max-width: 18ch; font: 500 clamp(36px, 4.4vw, 56px)/1.06 'Fraunces', Georgia, serif; color: var(--ink); }
.cs-index__lead { margin: 16px 0 0; max-width: 54ch; font-size: 19px; line-height: 1.5; color: var(--steel); }
.cs-index__list { margin-top: clamp(32px, 3.4vw, 48px) !important; }
.cs-index__end { padding: clamp(64px, 9vw, 128px) 0; }
.cs-index__card { padding: clamp(28px, 3.4vw, 44px); border-radius: 16px; background: var(--ink); color: var(--paper); }
.cs-index__card h2 { margin: 0; max-width: 22ch; font: 500 clamp(26px, 2.6vw, 34px)/1.15 'Fraunces', Georgia, serif; color: var(--paper); }
.cs-index__card p { margin: 14px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: rgba(250, 250, 248, 0.86); }
.cs-index__btn { display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; padding: 0 22px; border-radius: 10px; background: var(--sky); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color 200ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.cs-index__btn:active { transform: scale(0.97); }
.cs-index__btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cs-index__btn:hover { background: var(--paper); } }

/* Aimpoint layout (Kristian, 15 Oct 2026). 1. Dark band: title, then a featured
   carousel of wide picture cards with two numbers each. */
html body main.cs-index > section.csx-hero:not(#cs) { padding: 132px 0 clamp(64px, 8vw, 112px) !important; background: var(--ink); color: var(--paper); }
html body main .csx-hero h1:not(#cs) { margin: 0; color: var(--paper); font: 500 clamp(36px, 4.4vw, 56px)/1.06 'Fraunces', Georgia, serif !important; }
.csx-hero__lead { margin: 16px 0 0 !important; max-width: 54ch; font-size: 19px; line-height: 1.5; color: rgba(250, 250, 248, 0.78); }
.csx-feats { position: relative; margin-top: clamp(32px, 3.4vw, 48px); }
.csx-feats__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 1080px); gap: 20px; padding: 0 max(16px, calc((100% - 1240px) / 2 + 32px)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(16px, calc((100% - 1240px) / 2 + 32px)); scroll-behavior: smooth; scrollbar-width: none; }
.csx-feats__track::-webkit-scrollbar { display: none; }
.csx-feats__track:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }
.csx-feat { position: relative; display: flex; min-height: clamp(420px, 40vw, 520px); border-radius: 18px; overflow: hidden; background: #1B3A5B; scroll-snap-align: start; }
.csx-feat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csx-feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 42, 49, 0.1) 0%, rgba(35, 42, 49, 0.55) 45%, rgba(35, 42, 49, 0.95) 100%); }
.csx-feat__body { position: relative; z-index: 1; margin-top: auto; width: 100%; padding: clamp(24px, 3vw, 40px); }
.csx-feat__k { margin: 0; font: 500 13px/1.3 'IBM Plex Mono', ui-monospace, monospace; color: rgba(250, 250, 248, 0.72); }
html body main .csx-feat__h:not(#cs) { margin: 10px 0 0 !important; max-width: 24ch; font: 500 clamp(24px, 2.6vw, 34px)/1.15 'Fraunces', Georgia, serif !important; color: var(--paper); text-wrap: balance; }
.csx-feat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 24px !important; }
.csx-feat__stats { display: flex; gap: clamp(20px, 3vw, 40px); }
.csx-feat__stat { padding-left: 16px; border-left: 2px solid var(--sky); }
.csx-feat__num { margin: 0; font: 500 clamp(22px, 2.4vw, 30px)/1.1 'Fraunces', Georgia, serif; color: var(--paper); white-space: nowrap; }
.csx-feat__lab { margin: 6px 0 0; max-width: 22ch; font-size: 14px; line-height: 1.35; color: rgba(250, 250, 248, 0.72); }
.csx-feat__btn { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid rgba(250, 250, 248, 0.6); border-radius: 999px; color: var(--paper); font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.csx-feat__btn:active { transform: scale(0.97); }
.csx-feat__btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .csx-feat__btn:hover { background: var(--paper); color: var(--ink); } }
.csx-feats__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font: 500 20px/1 'Source Sans 3', system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 20px rgba(35, 42, 49, 0.3); transition: opacity 200ms ease, transform 160ms ease; }
.csx-feats__btn:active { transform: scale(0.94); }
.csx-feats__btn:disabled { opacity: 0; pointer-events: none; }
.csx-feats__btn--prev { left: max(8px, calc((100% - 1240px) / 2 + 8px)); }
.csx-feats__btn--next { right: max(8px, calc((100% - 1240px) / 2 + 8px)); }
@media (max-width: 720px) {
  .csx-feats__track { grid-auto-columns: 88%; }
  .csx-feat__row { flex-direction: column; align-items: flex-start; }
  .csx-feat__stats { flex-direction: column; gap: 14px; }
  .csx-feats__btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .csx-feats__track { scroll-behavior: auto; } }

/* 2. Light band: search and filters, then the grid of every case study. */
html body main.cs-index > section.csx-all:not(#cs) { padding: clamp(48px, 6vw, 80px) 0 0 !important; }
.csx-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 clamp(24px, 3vw, 36px); }
.csx-search input { width: min(320px, 80vw); min-height: 48px; padding: 0 18px; border: 1px solid rgba(35, 42, 49, 0.25); border-radius: 999px; background: var(--paper); color: var(--ink); font: 400 16px 'Source Sans 3', system-ui, sans-serif; }
.csx-selects { display: flex; flex-wrap: wrap; gap: 10px; }
.csx-selects select { min-height: 48px; padding: 0 40px 0 18px; border: 1px solid rgba(35, 42, 49, 0.25); border-radius: 999px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23232A31' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px; color: var(--ink); font: 500 16px 'Source Sans 3', system-ui, sans-serif; appearance: none; cursor: pointer; }
.csx-search input:focus-visible, .csx-selects select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.csx-grid > li[hidden] { display: none; }
.csx-none { margin: 0; font-size: 17px; color: var(--steel); }
.csx-none button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--blue); font: 600 17px 'Source Sans 3', system-ui, sans-serif; text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 620px) { .csx-filters { flex-direction: column; align-items: stretch; } .csx-search input { width: 100%; } .csx-selects { flex-wrap: nowrap; } .csx-selects label { flex: 1; min-width: 0; } .csx-selects select { width: 100%; } }

/* 3. Results bento, Vstorm layout (Kristian, 15 Oct 2026): big before-and-after
      numbers in mixed-size tiles. Our twist: two bars drawn to scale under each. */
html body main.cs-index > section.csx-res:not(#cs) { padding: clamp(64px, 9vw, 128px) 0 0 !important; }
html body main.cs-index .csx-res h2:not(#cs) { margin: 0 !important; font: 500 clamp(30px, 3.2vw, 44px)/1.12 'Fraunces', Georgia, serif !important; color: var(--ink); }
.csx-res__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(32px, 3.4vw, 48px) 0 0 !important; padding: 0; list-style: none; }
.csx-res__t--wide { grid-column: span 2; }
.csx-res__t a { display: flex; flex-direction: column; height: 100%; min-height: 248px; padding: clamp(24px, 2.4vw, 36px); border-radius: 20px; background: rgba(229, 229, 226, 0.55); color: var(--ink); text-decoration: none; transition: background-color 200ms ease, translate 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.csx-res__t--dark a { background: var(--ink); color: var(--paper); }
.csx-res__t--sky a { background: #AFC4DD; }
.csx-res__k { margin: 0 !important; font-size: 14px; font-weight: 600; color: var(--steel); }
.csx-res__t--dark .csx-res__k { color: #AFC4DD; }
.csx-res__t--sky .csx-res__k { color: var(--ink); }
.csx-res__num { margin: auto 0 0 !important; padding-top: 28px; font: 500 clamp(40px, 4.4vw, 64px)/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: -0.03em; }
.csx-res__t:not(.csx-res__t--wide) .csx-res__num { font-size: clamp(34px, 3.2vw, 46px); }
.csx-res__was { opacity: 0.45; }
.csx-res__lab { margin: 12px 0 0 !important; font-size: 17px; line-height: 1.4; }
.csx-res__bars { display: grid; gap: 6px; margin-top: 22px; }
.csx-res__bar { display: block; height: 10px; border-radius: 5px; background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(250, 250, 248, 0.7) 9px 10px); }
.csx-res__bar--was { width: 100%; background-color: #586069; opacity: 0.35; }
.csx-res__bar--now { width: var(--w); background-color: #1B3A5B; }
.csx-res__t--dark .csx-res__bar--was { background-color: #FAFAF8; opacity: 0.25; }
.csx-res__t--dark .csx-res__bar--now { background-color: #AFC4DD; background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(35, 42, 49, 0.5) 9px 10px); }
.csx-res__t--sky .csx-res__bar--was { background-color: #232A31; opacity: 0.2; }
.csx-res__t a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .csx-res__t a:hover { translate: 0 -4px; } }
@media (max-width: 900px) { .csx-res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .csx-res__grid { grid-template-columns: minmax(0, 1fr); } .csx-res__t--wide { grid-column: auto; } .csx-res__t a { min-height: 0; } }

/* 4. Close, Datasparq layout (Kristian, 15 Oct 2026): large headline left, next
      steps right as full-width rows with an arrow. */
html body main.cs-index > section.csx-end:not(#cs) { padding: clamp(64px, 9vw, 128px) 0 !important; }
.csx-end__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
html body main.cs-index .csx-end h2:not(#cs) { margin: 0 !important; max-width: 14ch; font: 500 clamp(40px, 5.2vw, 72px)/1.04 'Fraunces', Georgia, serif !important; letter-spacing: -0.01em; color: var(--ink); }
.csx-end__p { margin: 24px 0 0 !important; max-width: 46ch; font-size: 19px; line-height: 1.5; color: var(--steel); }
.csx-end__list { margin: 0 !important; padding: 0; list-style: none; border-top: 1px solid #E5E5E2; }
.csx-end__list li { border-bottom: 1px solid #E5E5E2; }
.csx-end__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 0 12px; border-radius: 10px; color: var(--ink); font: 500 clamp(21px, 1.9vw, 26px)/1.2 'Fraunces', Georgia, serif; text-decoration: none; transition: background-color 200ms ease, padding 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.csx-end__list a::after { content: '\2192'; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 22px; transition: translate 200ms ease; }
.csx-end__list li:first-child a { background: var(--ink); color: var(--paper); padding: 0 20px; }
.csx-end__list a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .csx-end__list a:hover { background: #AFC4DD; padding-left: 20px; }
  .csx-end__list li:first-child a:hover { background: #1B3A5B; }
  .csx-end__list a:hover::after { translate: 4px 0; }
}
@media (max-width: 900px) { .csx-end__grid { grid-template-columns: minmax(0, 1fr); } }
.csx-res__u { font-size: 0.42em; letter-spacing: 0; }
.csx-res__t--full { grid-column: 1 / -1; }
.csx-res__t--full .csx-res__bars { max-width: 66%; }
@media (max-width: 560px) { .csx-res__t--full .csx-res__bars { max-width: none; } }

/* Homepage carousel crops (kept out of the homepage markup, which has a byte budget). */
.hp-cs [data-cs-cta="home-05"] img { object-position: center 30%; }
.hp-cs [data-cs-cta="home-04"] img { object-position: center 60%; }
.hp-cs [data-cs-cta="home-06"] img { object-position: center 40%; }
.hp-cs [data-cs-cta="home-tender-invitations"] img { object-position: center 50%; }
.hp-cs [data-cs-cta="home-estimating"] img { object-position: center 50%; }
.hp-cs [data-cs-cta="home-variations"] img { object-position: center 50%; }

/* Summary band (16 Oct 2026): stat tiles are not links, so they share the card box without the hover lift. */
.csx-res__in { display: flex; flex-direction: column; height: 100%; min-height: 200px; padding: clamp(24px, 2.4vw, 36px); border-radius: 20px; background: rgba(229, 229, 226, 0.55); color: var(--ink); }
.csx-res__t--dark .csx-res__in { background: var(--ink); color: var(--paper); }
.csx-res__grid--sum .csx-res__t .csx-res__num { margin-top: auto !important; padding-top: 0; font-size: clamp(40px, 4.4vw, 64px); }
.csx-res__grid--sum .csx-res__t--full a { min-height: 0; }
.csx-res__ask { margin: 10px 0 0 !important; font: 500 clamp(22px, 2.2vw, 30px)/1.2 'Fraunces', Georgia, serif; }
@media (max-width: 560px) { .csx-res__in { min-height: 0; } }