/* Scoped case-study styles. Shared portfolio files remain unchanged. */
#boltwagon img.bw-image-fade { transition: opacity 750ms cubic-bezier(.22, 1, .36, 1); }
#boltwagon img.bw-image-fade-pending { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #boltwagon img.bw-image-fade { opacity: 1; transition: none; }
}
.boltwagon-page { --sans: "Inter", "Inter Fallback", Arial, sans-serif; font-family: var(--sans); background: #fff; overflow-x: visible; }
.boltwagon-page .topbar { position: sticky; top: 0; z-index: 100; margin-bottom: -62px; }
.boltwagon-content { --bw-section-before: 120px; --bw-section-after: 80px; width: 100%; min-width: 0; }
.boltwagon-content .page-shell { max-width: 1360px; }
.boltwagon-content figure { min-width: 0; margin: 0; }
.boltwagon-content img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
/* Banners run edge to edge; only ultra-wide screens see side space */
.bw-cover { width: 100%; max-width: 1920px; margin-inline: auto; }
/* The topbar overlaps the page top (negative margin), so the cover starts below it plus a gap.
   Fuctureshit is excluded: its cover image draws its own nav, with hotspots placed over it. */
.boltwagon-page .bw-cover:not(.fn-cover) { padding-top: 80px; }
@media (max-width: 760px) { .boltwagon-page .bw-cover:not(.fn-cover) { padding-top: 64px; } }
.bw-opening { display: flow-root; height: auto; min-height: 0; margin-bottom: 0; padding-bottom: 0; background: #f4f4f4; }
.bw-introduction { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 60px; padding-block: var(--bw-section-before) var(--bw-section-after); }
.bw-introduction h1 { margin: 0; font-size: 56px; line-height: 1.15; letter-spacing: -.04em; font-weight: 700; }
.bw-introduction-details { min-width: 0; }
.bw-introduction-details > p { margin: 0; }
.boltwagon-page :is(.bw-introduction-details > p, .bw-section-heading p) { font-family: "Inter", "Inter Fallback", Arial, sans-serif; font-weight: 500; font-size: 24px; line-height: 36px; letter-spacing: -1px; color: #6F6F6F; }
.bw-details { margin: 60px 0 0; }
.bw-details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid #dcdcdc; }
/* Shared typography for metadata, section eyebrows, and the next-project label. */
.boltwagon-page :is(.bw-details dt, .bw-section-heading h2, .bw-next-project > p) { font-family: "Inter", "Inter Fallback", Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 28px; color: #6F6F6F; text-transform: uppercase; }
.bw-details dd { margin: 0; text-align: right; color: #262626; font-size: 24px; line-height: 1.4; }
.bw-section-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 60px; padding-block: var(--bw-section-before) var(--bw-section-after); }
.bw-section-heading h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.bw-section-heading h2::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #05DF72; align-self: flex-start; margin-top: calc((28px - 10px) / 2); }
.bw-section-heading p { min-width: 0; margin: 0; }
/* Shared by all five case studies; keep Wireframes text-to-image spacing
   at 80px even when page-specific responsive section spacing is smaller. */
.boltwagon-content .bw-section[aria-labelledby$="-wireframes"] { padding-top: 80px; }
.boltwagon-content .bw-section[aria-labelledby$="-wireframes"] > .bw-section-heading { padding-top: 0; padding-bottom: 80px; }
.bw-gallery { display: grid; gap: 20px; align-items: start; }
.bw-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Problem / solution cards: real text (they were images, unreadable once shrunk on phones) */
.bw-pair:has(.bw-insight) { align-items: stretch; }
.bw-insight { padding: 40px; border-radius: 12px; background: #fff; font-family: "Inter", "Inter Fallback", Arial, sans-serif; --insight-accent: #F06A6A; --insight-tint: #FDE4E4; }
.bw-insight--solution { --insight-accent: #1FC16B; --insight-tint: #DFF7E8; }
.bw-insight__icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--insight-tint); color: var(--insight-accent); }
.bw-insight__icon svg { width: 36px; height: 36px; }
.bw-insight h3 { margin: 32px 0 0; padding-bottom: 12px; font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.03em; color: #0A0A0A; background: linear-gradient(var(--insight-accent), var(--insight-accent)) no-repeat 0 100% / 48px 4px; }
.bw-insight p { max-width: 34em; margin: 24px 0 0; font-size: 18px; line-height: 30px; letter-spacing: -.01em; color: #525252; }
@media (max-width: 760px) {
  .bw-insight { padding: 24px; }
  .bw-insight__icon { width: 56px; height: 56px; }
  .bw-insight__icon svg { width: 26px; height: 26px; }
  .bw-insight h3 { margin-top: 24px; font-size: 32px; line-height: 40px; }
  .bw-insight p { margin-top: 20px; font-size: 18px; line-height: 28px; }
}
.bw-wide-left { grid-template-columns: minmax(0, 3140fr) minmax(0, 2220fr); }
.bw-wide-right { grid-template-columns: minmax(0, 2220fr) minmax(0, 3140fr); }
.bw-challenge { --bw-section-after: 80px; height: auto; min-height: 0; margin-bottom: 0; padding-bottom: 80px; }
.boltwagon-page .bw-challenge > .bw-section-heading { padding-bottom: 80px; }
.bw-challenge > .bw-gallery { height: auto; min-height: 0; margin-bottom: 0; padding-bottom: 0; }
/* Only this transition is flush; retain the Wireframes text-to-image spacing. */
.bw-opening + .bw-section[aria-labelledby="bw-wireframes"] { --bw-section-before: 0px; --bw-section-after: 80px; margin-top: 0; }
.bw-components { padding-bottom: 120px; }
/* ---------- Footer: next project (every case study) ----------
   A pill label and a big centred title. While the title is hovered, next-project.js draws a card
   of that project with WebGL behind it; without WebGL the <img> card below fades in instead. */
.portfolio-footer--next { position: relative; isolation: isolate; overflow: hidden; }
.portfolio-footer--next > :not(canvas, .footer-next) { position: relative; z-index: 1; }
/* No z-index here: the title must share the footer's stacking context with the card so its
   difference blend can invert over the image and stay readable on light and dark areas. */
.footer-next { position: relative; flex: 1; justify-content: center; display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-next__label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 12px 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.footer-next__label, .footer-next__heading { mix-blend-mode: difference; }
.footer-next__label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #05DF72; }
.footer-next__heading { max-width: 100%; margin: var(--space-heading) 0 0; font-size: min(var(--fs-cta), 8.5vw); line-height: 1.1; font-weight: 400; letter-spacing: -.04em; overflow-wrap: anywhere; }
/* Underline draws in from the left on hover and retracts to the right */
.footer-next__link { display: inline-block; padding-bottom: .06em; color: #fff; background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0% max(3px, .045em); transition: background-size 600ms cubic-bezier(.65, 0, .35, 1); cursor: pointer; }
.footer-next__link:is(:hover, :focus-visible) { background-position: 0 100%; background-size: 100% max(3px, .045em); }
.footer-next__card { display: none; }
@media (hover: hover) and (pointer: fine) {
  .footer-next__card { display: block; position: absolute; left: 50%; top: 55%; z-index: -1; width: clamp(180px, 20vw, 280px); height: auto; border-radius: 12px; opacity: 0; transform: translate(-50%, -40%) rotate(10deg) scale(.9); transition: opacity 300ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
  .footer-next:has(.footer-next__link:hover) .footer-next__card { opacity: 1; transform: translate(-50%, -50%) rotate(10deg); }
  .portfolio-footer--next.has-webgl .footer-next__card { display: none; }
}
.footer-next__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.portfolio-footer--next .footer-socials { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin-top: var(--space-block); }
.portfolio-footer--next .footer-bottom { margin-top: 32px; }
@media (max-width: 760px) {
  .portfolio-footer--next { padding-inline: 16px; }
  .portfolio-footer--next .footer-socials { gap: 12px 24px; margin-top: var(--space-block); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-next__link, .footer-next__card { transition: opacity 200ms linear; }
}
@media (max-width: 1024px) {
  .boltwagon-content { --bw-section-before: 80px; --bw-section-after: 56px; }
  .boltwagon-page .topbar { margin-bottom: -62px; }
  .boltwagon-content .page-shell { width: calc(100% - 40px); }
  .bw-introduction { gap: 40px; }
  .bw-introduction h1 { font-size: 44px; }
  .bw-details { margin-top: 40px; }
  .bw-details dd { font-size: 18px; }
  .bw-section-heading { gap: 40px; }
  .bw-components { padding-bottom: 80px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  #boltwagon .bw-introduction { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .topbar .desktop-nav[data-menu="boltwagon"] { border-radius: 12px; }
  .topbar .desktop-nav[data-menu="boltwagon"] a { background: #EBEDEF; color: var(--ink); cursor: pointer; transition: background-color 225ms ease, color 225ms ease; }
  .topbar .desktop-nav[data-menu="boltwagon"] a:hover { background: #DCDDDE; color: var(--ink); }
  .topbar .desktop-nav[data-menu="boltwagon"] a:active { background: #000; color: #fff; }
  .boltwagon-page .topbar { margin-bottom: -58px; }
  .boltwagon-content { --bw-section-before: 48px; --bw-section-after: 32px; }
  .boltwagon-content .page-shell { width: calc(100% - 32px); }
  .bw-introduction { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bw-introduction h1 { font-size: 36px; }
  .bw-details { margin-top: 28px; }
  .bw-details > div { gap: 12px; padding-block: 12px; }
  .bw-details dd { font-size: 15px; }
  .bw-section-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bw-pair, .bw-wide-left, .bw-wide-right { grid-template-columns: minmax(0, 1fr); }
  .bw-components { padding-bottom: 48px; }
}