/*
 * BHA Future Co — Service landing pages
 * Scoped under .bha-sp so it can be enqueued next to the bhafuture2022 theme
 * (Bootstrap 4) without leaking styles.
 * Figma: desktop 1512 (60px margins, 1392 content) / mobile 414 (30px margins, 354 content).
 * Breakpoint matches the live theme: max-width 767px = mobile.
 */

@font-face {
  font-family: 'DINPro-black';
  src: url('../fonts/din-black.woff2') format('woff2');
  font-display: swap;
}

.bha-sp {
  --bha-black: #000;
  --bha-ink: #0b0a0a;
  --bha-white: #fff;
  --bha-hairline: rgba(0, 0, 0, .15);
  --bha-muted: .7;
  --bha-gutter: 60px;
  --bha-max: 1392px;
  --bha-display: 'DINPro-black', 'DIN Pro', 'Titillium Web', sans-serif;
  --bha-body: 'Titillium Web', sans-serif;

  background: var(--bha-white);
  color: var(--bha-black);
  font-family: var(--bha-body);
  -webkit-font-smoothing: antialiased;
}
.bha-sp *, .bha-sp *::before, .bha-sp *::after { box-sizing: border-box; }
.bha-sp img { display: block; max-width: 100%; height: auto; }
.bha-sp p, .bha-sp h1, .bha-sp h2, .bha-sp h3, .bha-sp ul, .bha-sp dl, .bha-sp dd { margin: 0; padding: 0; }
.bha-sp ul { list-style: none; }
.bha-sp a { color: inherit; }

.bha-sp .wrap {
  width: 100%;
  max-width: calc(var(--bha-max) + var(--bha-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--bha-gutter);
}
.bha-sp .rule { border: 0; border-top: 1px solid var(--bha-hairline); margin: 0; }

/* ---------- Type ---------- */
.bha-sp .display {
  font-family: var(--bha-display);
  font-style: italic;
  font-weight: 900;
}
.bha-sp .h2 { font-size: 32px; line-height: 1.25; }

/* ---------- Buttons & links ---------- */
.bha-sp .btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 8px 16px;
  background: var(--bha-black);
  border: 2px solid var(--bha-black);
  color: var(--bha-white);
  font: 600 16px/1 var(--bha-body);
  text-decoration: none;
  text-transform: capitalize;
  transition: background .2s, color .2s;
}
.bha-sp .btn-cta:hover, .bha-sp .btn-cta:focus-visible { background: var(--bha-white); color: var(--bha-black); }

.bha-sp .case-link {
  display: inline-block;
  font: 600 14px/1.3 var(--bha-body);
  opacity: .55;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bha-sp a.case-link:hover { opacity: 1; }
.bha-sp span.case-link { text-decoration: none; }

/* ---------- Header (stand-in for theme header partial) ---------- */
.bha-sp .site-hdr .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 200px;
  position: relative;
}
.bha-sp .site-hdr .wrap::after {
  content: ''; position: absolute; left: var(--bha-gutter); right: var(--bha-gutter); bottom: 0;
  border-top: 1px solid var(--bha-hairline);
}
.bha-sp .site-hdr .logo img { width: 339px; height: 119px; }
.bha-sp .site-hdr .burger { background: none; border: 0; padding: 0; cursor: pointer; }
.bha-sp .site-hdr .burger img { width: 40px; height: 28.19px; }

/* ---------- Hero ---------- */
.bha-sp .hero { padding: 32px 0 40px; }
.bha-sp .hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 708fr);
  column-gap: 64px;
  align-items: start;
}
.bha-sp .hero h1 { font-size: 44px; line-height: 50px; letter-spacing: -1px; }
.bha-sp .hero .lede { margin-top: 20px; font-size: 18px; line-height: 29px; }
.bha-sp .hero .btn-cta { margin-top: 28px; }
.bha-sp .hero-media { margin: 0; aspect-ratio: 708 / 420; border-radius: 2px; overflow: hidden; }
.bha-sp .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ---------- Trusted by ---------- */
.bha-sp .trusted .wrap > div {
  display: flex;
  align-items: center;
  gap: var(--label-gap, 71px);
  min-height: 101px;
  padding: 8px 0;
  border-top: 1px solid var(--bha-hairline);
  border-bottom: 1px solid var(--bha-hairline);
}
.bha-sp .trusted .label { font-size: 20px; white-space: nowrap; flex: none; }
.bha-sp .trusted ul { display: flex; align-items: center; flex-wrap: wrap; gap: 20px var(--gap, 60px); }
.bha-sp .trusted li img { width: var(--w); height: var(--h); object-fit: contain; }
.bha-sp .trusted li.m-only { display: none; }

/* ---------- Generic section ---------- */
.bha-sp .section .wrap > .inner { padding: 48px 0 40px; border-bottom: 1px solid var(--bha-hairline); }
/* Hub page opens "why", "work" and "who" with more air (88px in Figma) */
.bha-sp.is-hub .why .wrap > .inner, .bha-sp.is-hub .work .wrap > .inner, .bha-sp.is-hub .who .wrap > .inner { padding-top: 88px; }
.bha-sp .section .h2 + * { margin-top: 30px; }
.bha-sp .prose p { font-size: 20px; line-height: 32px; }
.bha-sp .prose p + p { margin-top: 20px; }

/* ---------- What we do ---------- */
.bha-sp .capabilities .wrap > .inner { padding-top: 48px; padding-bottom: 16px; }
.bha-sp .section .cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 36px;
  margin-top: 34px;
}
.bha-sp .cap-grid h3 { font: 600 20px/30px var(--bha-body); }
.bha-sp .cap-grid p { margin-top: 8px; font-size: 17px; line-height: 27.2px; opacity: var(--bha-muted); }

/* ---------- Selected work ---------- */
.bha-sp .work .wrap > .inner { padding-bottom: 0; border-bottom: 0; }
.bha-sp .section .work-list { margin-top: 34px; }
.bha-sp .work-item {
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
  column-gap: 72px;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--bha-hairline);
}
.bha-sp .work-item + .work-item { padding-top: 8px; }
.bha-sp .work-item:last-child { padding-bottom: 48px; }
.bha-sp .work-item figure { margin: 0; aspect-ratio: 1; border-radius: 2px; overflow: hidden; }
.bha-sp .work-item figure img { width: 100%; height: 100%; object-fit: cover; }
.bha-sp .work-item h3 { font-size: 34px; line-height: 42px; letter-spacing: -1px; }
.bha-sp .work-item p { margin-top: 14px; font-size: 18px; line-height: 28px; }
.bha-sp .work-item .case-link { margin-top: 12px; }

/* ---------- Work split into categories (UX/UI page) ---------- */
.bha-sp .wgroup .wrap > .inner { padding: 48px 0 0; border-bottom: 0; }
.bha-sp .wgroup .wg-h { font-size: 32px; line-height: 40px; }
.bha-sp .wg-intro { margin-top: 6px; font-size: 17px; line-height: 26px; opacity: var(--bha-muted); }
.bha-sp .wgroup .work-list { margin-top: 28px; }
.bha-sp .wgroup + .faq .wrap > .inner { padding-top: 48px; }

/* ---------- Also trusted by (text list) ---------- */
.bha-sp .also .wrap > .inner { padding-bottom: 30px; }
.bha-sp .also-list li { font-size: 18px; line-height: 28.8px; opacity: .75; }
.bha-sp .also-list li + li { margin-top: 10px; }
.bha-sp .also-list strong { font-weight: 700; }

/* Linked thumbnails and titles (same URL as "View case study") */
.bha-sp .work-item figure a { display: block; width: 100%; height: 100%; }
.bha-sp .work-item figure a img { transition: opacity .2s; }
.bha-sp .work-item figure a:hover img { opacity: .85; }
.bha-sp .work-item h3 a { color: inherit; text-decoration: none; }
.bha-sp .work-item h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------- FAQ ---------- */
.bha-sp .faq .wrap > .inner { padding-top: 48px; padding-bottom: 0; }
.bha-sp .section.faq dl { margin-top: 34px; }
.bha-sp .faq .qa { padding: 4px 0 24px; border-bottom: 1px solid var(--bha-hairline); }
.bha-sp .faq .qa:first-child { padding-top: 0; }
.bha-sp .faq .qa:last-child { padding-bottom: 44px; }
.bha-sp .faq dt { font: 600 22px/35.2px var(--bha-body); }
.bha-sp .faq dd { margin-top: 10px; max-width: 1000px; font-size: 18px; line-height: 28.8px; opacity: var(--bha-muted); }
.bha-sp .faq .wrap > .inner { border-bottom: 0; }

/* ---------- Final CTA ---------- */
.bha-sp .final-cta .inner { padding: 64px 0 40px; border-bottom: 1px solid var(--bha-hairline); }
.bha-sp .final-cta h2 { font-size: 40px; line-height: 50px; max-width: 900px; }
.bha-sp .final-cta p { margin-top: 18px; max-width: 700px; font-size: 20px; line-height: 32px; opacity: .75; }
.bha-sp .final-cta .btn-cta { margin-top: 32px; }

/* ---------- Explore other services ---------- */
.bha-sp .explore .inner { padding: 32px 0 124px; border-bottom: 1px solid var(--bha-hairline); }
.bha-sp .explore .h2 + ul { margin-top: 34px; }
.bha-sp .explore li + li { margin-top: 24px; }
.bha-sp .explore a { font: 600 20px/30px var(--bha-body); text-decoration: underline; text-underline-offset: 3px; }
.bha-sp .explore a:hover { opacity: .6; }
.bha-sp .explore li p { margin-top: 4px; font-size: 17px; line-height: 26px; opacity: var(--bha-muted); }

/* ---------- Footer (stand-in for theme footer partial) ---------- */
.bha-sp .site-ftr { margin-top: 48px; background: var(--bha-ink); color: var(--bha-white); }
.bha-sp .site-ftr .wrap { padding-left: 58px; padding-right: 58px; max-width: none; }
.bha-sp .ftr-grid {
  display: grid;
  grid-template-columns: 291px 342px 345px 1fr;
  padding-top: 31px;
}
.bha-sp .ftr-nav, .bha-sp .ftr-info { display: contents; }
.bha-sp .ftr-nav a {
  grid-row: 1;
  font: 700 54px/82px var(--bha-body);
  text-decoration: none;
  text-transform: capitalize;
}
.bha-sp .ftr-nav a:hover { opacity: .7; }
.bha-sp .ftr-contact, .bha-sp .ftr-follow { grid-row: 2; margin-top: 30px; font-size: 16px; line-height: 1.86; }
.bha-sp .ftr-contact { grid-column: 3; }
.bha-sp .ftr-follow { grid-column: 4; }
.bha-sp .ftr-grid .k { color: rgba(255, 255, 255, .5); }
.bha-sp .ftr-contact a { display: block; text-decoration: none; }
.bha-sp .ftr-contact a + .k { margin-top: 29.76px; }
.bha-sp .social { display: flex; gap: 27.6px; margin-top: 8px; }
.bha-sp .social a { opacity: .6; }
.bha-sp .social a:hover { opacity: 1; }
.bha-sp .social img { width: 26.4px; height: 26.4px; }
.bha-sp .ftr-logos { display: grid; grid-template-columns: 291px auto; align-items: center; margin-top: -12px; }
.bha-sp .ftr-logos .fc { width: 151px; height: 55.36px; }
.bha-sp .ftr-logos .bfs { width: 180px; height: 53px; }
.bha-sp .copyright { padding: 16px 0 23px; font: 300 14px/1.86 var(--bha-body); color: rgba(255, 255, 255, .5); text-transform: uppercase; }

/* ---------- Contact page (dark template) ---------- */
.bha-sp.is-contact { --bha-hairline: rgba(255, 255, 255, .15); background: #000; color: #fff; }
.bha-sp.is-contact .site-hdr .logo-mark img { width: 100px; height: 100px; }
.bha-sp .burger-bars { display: flex; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; }
.bha-sp .burger-bars span { display: block; height: 2px; background: #fff; }
.bha-sp .contact-hero .inner { padding: 72px 0 64px; border-bottom: 1px solid var(--bha-hairline); }
.bha-sp .contact-hero h1 { margin: 0; font: 700 90px/137px var(--bha-body); text-transform: capitalize; }
.bha-sp .contact-hero p { margin-top: 28px; max-width: 700px; font-size: 20px; line-height: 32px; opacity: .85; }
.bha-sp .btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  height: 55px; margin-top: 36px; padding: 8px 24px;
  background: #fff; color: #000; border: 2px solid #fff;
  font: 600 16px/1 var(--bha-body); text-decoration: none;
  transition: background .2s, color .2s;
}
.bha-sp .btn-wa:hover, .bha-sp .btn-wa:focus-visible { background: transparent; color: #fff; }
.bha-sp .btn-wa:hover img { filter: invert(1); }
.bha-sp .btn-wa img { width: 22px; height: 22px; }
.bha-sp .contact-info .inner {
  display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); column-gap: 72px;
  padding: 48px 0; border-bottom: 1px solid var(--bha-hairline);
}
.bha-sp .contact-info .map { aspect-ratio: 660 / 420; background: #1f1f1f; border-radius: 2px; overflow: hidden; }
.bha-sp .contact-info iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.3) invert(.92) hue-rotate(180deg); }
.bha-sp .contact-info dl { max-width: 360px; }
.bha-sp .contact-info dl > div + div { margin-top: 28px; }
.bha-sp .contact-info dt { font-size: 16px; line-height: 20px; opacity: .5; }
.bha-sp .contact-info dd { margin-top: 4px; font-size: 18px; line-height: 28px; }
.bha-sp .contact-info dd a { text-decoration: underline; text-underline-offset: 3px; }
.bha-sp .contact-info dd a:hover { opacity: .7; }
.bha-sp .contact-info .social { display: flex; gap: 13px; margin-top: 12px; }
.bha-sp .contact-info .social a { opacity: 1; }
.bha-sp .contact-info .social img { width: 21px; height: 21px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .bha-sp { --bha-gutter: 40px; }
  .bha-sp .hero h1 { font-size: 38px; line-height: 44px; }
  .bha-sp .section .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bha-sp .work-item { grid-template-columns: 240px minmax(0, 1fr); column-gap: 40px; }
  .bha-sp .ftr-grid { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .bha-sp .ftr-nav a { font-size: 40px; line-height: 60px; }
  .bha-sp .ftr-logos { grid-template-columns: auto auto; justify-content: start; gap: 60px; }
  .bha-sp .contact-info .inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
}

/* ---------- Mobile (matches theme's 767px breakpoint) ---------- */
@media (max-width: 767px) {
  .bha-sp { --bha-gutter: 30px; }
  .bha-sp .h2 { font-size: 24px; line-height: 1.25; }

  .bha-sp .site-hdr .wrap { height: 95px; }
  .bha-sp .site-hdr .logo img { width: 145px; height: 50.9px; }
  .bha-sp .site-hdr .burger img { width: 23px; height: 16.2px; }

  .bha-sp .btn-cta { height: 42px; padding: 0 24px; font-size: 12px; }

  .bha-sp .hero { padding: 32px 0 24px; }
  .bha-sp .hero .wrap { grid-template-columns: 1fr; }
  .bha-sp .hero-media { order: -1; aspect-ratio: 1; margin-bottom: 32px; }
  .bha-sp .hero h1 { font-size: 32px; line-height: 38px; letter-spacing: -.5px; }
  .bha-sp .hero .lede { margin-top: 18px; font-size: 16px; line-height: 26px; }
  .bha-sp .hero .btn-cta { margin-top: 24px; }

  .bha-sp .trusted .wrap > div { display: block; min-height: 241px; padding: 24px 0 24px; }
  .bha-sp .trusted .label { font-size: 14px; }
  .bha-sp .trusted ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    align-items: center;
    gap: 34px 12px;
    margin-top: 26px;
  }
  .bha-sp .trusted ul { grid-template-columns: 37% 37% auto; justify-content: stretch; }
  .bha-sp .trusted li img { width: var(--mw, calc(var(--w) * .85)); height: var(--mh, calc(var(--h) * .85)); }
  .bha-sp .trusted li { order: var(--mo, 0); }
  .bha-sp .trusted li.m-only { display: block; }
  .bha-sp .trusted li.d-only { display: none; }
  .bha-sp .hero-media img { object-position: var(--mpos, 50% 50%); }

  .bha-sp .section .wrap > .inner { padding: 32px 0 32px; }
  .bha-sp.is-hub .why .wrap > .inner { padding-top: 48px; }
  .bha-sp .work .wrap > .inner, .bha-sp .faq .wrap > .inner { padding-bottom: 0; border-bottom: 0; }
  .bha-sp .section .h2 + * { margin-top: 24px; }
  .bha-sp .prose p { font-size: 16px; line-height: 25.6px; }

  .bha-sp .capabilities .wrap > .inner { padding-top: 32px; padding-bottom: 24px; }
  .bha-sp .section .cap-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
  .bha-sp .cap-grid h3 { font-size: 17px; line-height: 27.2px; }
  .bha-sp .cap-grid p { margin-top: 7px; font-size: 14px; line-height: 22.4px; }

  .bha-sp .work .wrap > .inner, .bha-sp.is-hub .work .wrap > .inner { padding-top: 32px; }
  .bha-sp .section .work-list { margin-top: 23px; }
  .bha-sp .work-item { grid-template-columns: 1fr; padding-bottom: 24px; }
  .bha-sp .work-item + .work-item { padding-top: 28px; }
  .bha-sp .work-item:last-child { padding-bottom: 32px; }
  .bha-sp .work-item figure { margin-bottom: 20px; }
  .bha-sp .work-item h3 { font-size: 24px; line-height: 30px; letter-spacing: 0; }
  .bha-sp .work-item p { margin-top: 9px; font-size: 15px; line-height: 24px; }
  .bha-sp .work-item .case-link { margin-top: 8px; font-size: 12px; line-height: 19.2px; }

  .bha-sp .who .wrap > .inner, .bha-sp.is-hub .who .wrap > .inner { padding-top: 36px; }
  .bha-sp .faq .wrap > .inner { padding-top: 32px; }
  .bha-sp .also .wrap > .inner { padding-bottom: 24px; }
  .bha-sp .wgroup .wrap > .inner { padding: 32px 0 0; border-bottom: 0; }
  .bha-sp .wgroup .wg-h { font-size: 22px; line-height: 27px; }
  .bha-sp .wg-intro { margin-top: 10px; font-size: 14px; line-height: 21px; }
  .bha-sp .wgroup .work-list { margin-top: 20px; }
  .bha-sp .why + .wgroup .wrap > .inner { padding-top: 14px; }
  .bha-sp .wgroup .work-item + .work-item { padding-top: 24px; }
  .bha-sp .wgroup + .faq .wrap > .inner { padding-top: 32px; }
  .bha-sp .also-list li { font-size: 15px; line-height: 24px; }
  .bha-sp .section.faq dl { margin-top: 24px; }
  .bha-sp .faq .qa { padding: 22px 0 22px; }
  .bha-sp .faq .qa:first-child { padding-top: 0; }
  .bha-sp .faq .qa:last-child { padding-bottom: 28px; }
  .bha-sp .faq dt { font-size: 18px; line-height: 28.8px; }
  .bha-sp .faq dd { margin-top: 8px; font-size: 15px; line-height: 24px; }

  .bha-sp .final-cta .inner { padding: 40px 0 32px; }
  .bha-sp .final-cta h2 { font-size: 26px; line-height: 32px; }
  .bha-sp .final-cta p { margin-top: 18px; font-size: 16px; line-height: 25.6px; }
  .bha-sp .final-cta .btn-cta { margin-top: 28px; }

  .bha-sp .explore .inner { padding: 24px 0 100px; }
  .bha-sp .explore .h2 + ul { margin-top: 24px; }
  .bha-sp .explore li + li { margin-top: 22px; }
  .bha-sp .explore a { font-size: 16px; line-height: 24px; }
  .bha-sp .explore li p { margin-top: 4px; font-size: 13px; line-height: 18px; }

  .bha-sp .site-ftr { margin-top: 40px; }
  .bha-sp .site-ftr .wrap { padding: 0 31px; }
  .bha-sp .ftr-grid { grid-template-columns: 1fr 1fr; padding-top: 19px; }
  .bha-sp .ftr-nav, .bha-sp .ftr-info { display: block; }
  .bha-sp .ftr-nav a { display: block; font-size: 36px; line-height: 48px; }
  .bha-sp .ftr-info { padding-top: 16px; }
  .bha-sp .ftr-contact, .bha-sp .ftr-follow { margin-top: 0; font-size: 12px; line-height: 18px; }
  .bha-sp .ftr-contact a + .k, .bha-sp .ftr-follow { margin-top: 18px; }
  .bha-sp .social { gap: 6px; margin-top: 4px; }
  .bha-sp .social img { width: 21px; height: 21px; }
  .bha-sp .ftr-logos { grid-template-columns: 1fr 1fr; margin-top: 28px; gap: 0; }
  .bha-sp .ftr-logos .fc { width: 103px; height: 37px; }
  .bha-sp .ftr-logos .bfs { width: 128px; height: 37px; object-fit: contain; object-position: left; }
  .bha-sp .copyright { padding: 18px 0 19px; font-size: 10px; text-align: center; }

  .bha-sp.is-contact .site-hdr .logo-mark img { width: 50px; height: 50px; }
  .bha-sp .burger-bars { width: 23px; height: 16px; }
  .bha-sp .contact-hero .inner { padding: 40px 0 40px; }
  .bha-sp .contact-hero h1 { font-size: 48px; line-height: 73px; }
  .bha-sp .contact-hero p { margin-top: 20px; font-size: 16px; line-height: 26px; }
  .bha-sp .btn-wa { height: 48px; margin-top: 28px; padding: 6px 20px; gap: 8px; font-size: 14px; }
  .bha-sp .contact-info .inner { grid-template-columns: 1fr; padding: 32px 0 36px; }
  .bha-sp .contact-info .map { aspect-ratio: 354 / 225; }
  .bha-sp .contact-info dl { margin-top: 51px; max-width: none; }
  .bha-sp .contact-info dl > div + div { margin-top: 24px; }
  .bha-sp .contact-info dt { font-size: 13px; line-height: 16px; }
  .bha-sp .contact-info dd { margin-top: 4px; font-size: 15px; line-height: 23px; }
  .bha-sp .contact-info .social { margin-top: 12px; }
  .bha-sp.is-contact .site-ftr { margin-top: 40px; }
}

/* ---------- Mobile nav overlay (preview only; WP uses the theme's menu) ---------- */
.bha-sp .menu-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; flex-direction: column; justify-content: center;
  padding: 0 var(--bha-gutter);
  background: var(--bha-ink); color: var(--bha-white);
}
.bha-sp .menu-overlay.open { display: flex; }
.bha-sp .menu-overlay a { font: 700 54px/1.4 var(--bha-body); text-decoration: none; }
.bha-sp .menu-overlay .close { position: absolute; top: 40px; right: var(--bha-gutter); background: none; border: 0; color: inherit; font-size: 40px; cursor: pointer; }