/* ==========================================================================
   bshdo.co — additive components for SEO / AEO / CRO work.
   Everything here is namespaced .bshd-* so it can never collide with the
   Webflow export in webflow.css / bshdo-co-*.webflow.css.
   Uses the design tokens already declared on :root by the Webflow stylesheet
   (--cream, --red, --light-black, --white).
   ========================================================================== */

/* ---------- shared ---------- */

.bshd-section {
  padding: 5rem 0;
}

.bshd-section--cream {
  background-color: var(--cream);
}

.bshd-section--dark {
  background-color: var(--light-black);
  color: var(--white);
}

.bshd-inner {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
}

.bshd-h2 {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.bshd-h3 {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.bshd-p {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.62;
  margin: 0 0 1rem;
  max-width: 44rem;
}

.bshd-p:last-child {
  margin-bottom: 0;
}

/* The site's signature device: an asterisked aside that defines a term.
   Used for the Japanese vocabulary already; reused here for the AI one. */
.bshd-footnote {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.65;
  max-width: 32rem;
  margin: -0.5rem 0 1.75rem;
}

/* ---------- hero copy block ---------- */

/* The hero row bottom-aligned a 550px illustration against a text block
   half its height, which pushed the copy to the top of the viewport with
   the marginal gloss stranded at the bottom. Top-align all three so the
   gloss sits beside the line it annotates. */
.hero_section {
  padding-top: 3rem;
}

.hero_section-wrapper {
  align-items: flex-start;
}

.bshd-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 34rem;
}

/* The Webflow H1 is sized for four short words on their own lines. With an
   offer in the headline plus a lede and a CTA beneath it, the block has to
   fit a laptop viewport - otherwise the only action on the page is below
   the fold, which is the problem this section exists to fix. */
.bshd-hero-copy .hero_tagline-text {
  font-size: 4.5rem;
  line-height: 1.05;
}

.bshd-lede {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.55;
  margin: 1.75rem 0 0;
  max-width: 30rem;
}

.bshd-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.bshd-proof {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin: 1.25rem 0 0;
}

/* ---------- buttons ---------- */

.bshd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1;
  padding: 0.9375rem 1.5rem;
  border-radius: 2rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.bshd-btn--primary {
  background-color: var(--red);
  color: var(--white);
}

.bshd-btn--primary:hover {
  background-color: var(--light-black);
  color: var(--white);
}

/* Inherits the section's text colour so a ghost button stays legible on
   whatever ground it lands on - contact-us renders on the dark wrapper. */
.bshd-btn--ghost {
  background-color: transparent;
  color: inherit;
  border-color: currentColor;
}

.bshd-btn--ghost:hover {
  background-color: var(--light-black);
  color: var(--cream);
}

.bshd-section--dark .bshd-btn--ghost {
  color: var(--white);
}

.bshd-section--dark .bshd-btn--ghost:hover {
  background-color: var(--white);
  color: var(--light-black);
}

.bshd-btn:focus-visible {
  outline: 0.125rem solid var(--red);
  outline-offset: 0.1875rem;
}

/* ---------- answer block ----------
   The passage an answer engine quotes. It used to be a 3px red left rule
   with an uppercase red kicker - a side tab, which is the category default,
   not this brand. The site's own devices are a hairline that runs under a
   phrase (.projects_splitter, .h-line) and an asterisked marginal gloss
   (*Bushido is a moral code...). Those are what this uses now. */

.bshd-answer {
  border-top: 0.0375rem solid var(--light-black);
  padding: 1.5rem 0 0;
  margin: 0 0 2.5rem;
  max-width: calc(var(--bshd-measure) + 2rem);
}

.bshd-section--dark .bshd-answer {
  border-top-color: rgba(255, 255, 255, 0.55);
}

.bshd-answer__q {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
  margin: 0 0 0.875rem;
}

.bshd-answer__q::before {
  content: "*";
  margin-right: 0.15em;
}

.bshd-answer__a {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

/* ---------- offer cards ----------
   Four-sided hairline cells are the lazy container. The site marks a block
   with a rule above it (.projects_splitter) and labels things with a
   stadium pill (.tag-element, 0.03125rem border, 2.5rem radius). */

.bshd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: 3rem;
}

.bshd-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bshd-card {
  border-top: 0.0375rem solid var(--light-black);
  padding: 1.25rem 0 0;
}

.bshd-section--dark .bshd-card {
  border-top-color: rgba(255, 255, 255, 0.55);
}

.bshd-card__label {
  display: inline-block;
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  border: 0.03125rem solid currentColor;
  border-radius: 2.5rem;
  padding: 0.4rem 0.8rem;
  margin: 0 0 1rem;
}

/* One of six offers is where most engagements actually begin. */
.bshd-card__label--lead {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.bshd-card p {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.55;
  margin: 0;
  max-width: 24rem;
}

/* ---------- FAQ (visible; mirrored 1:1 in FAQPage JSON-LD) ---------- */

.bshd-faq {
  max-width: 48rem;
  border-top: 1px solid rgba(33, 36, 39, 0.18);
}

.bshd-section--dark .bshd-faq,
.bshd-section--dark .bshd-faq__item {
  border-color: rgba(255, 255, 255, 0.18);
}

.bshd-faq__item {
  border-bottom: 1px solid rgba(33, 36, 39, 0.18);
  padding: 1.25rem 0;
}

/* <summary> so the questions are a scannable list rather than 2062px of
   permanently open answers. The answers stay in the DOM, which is what
   both Google and FAQPage schema require. */
.bshd-faq__q {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.bshd-faq__q::-webkit-details-marker {
  display: none;
}

/* The site marks things with a hairline and an asterisk, not a chevron. */
.bshd-faq__q::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bshd-accent-light);
  flex: none;
  transition: transform 0.18s ease;
}

.bshd-section--dark .bshd-faq__q::after {
  color: var(--bshd-accent-dark);
}

.bshd-faq__item[open] .bshd-faq__q::after {
  transform: rotate(45deg);
}

.bshd-faq__item[open] .bshd-faq__a {
  margin-top: 0.875rem;
}

.bshd-faq__q:focus-visible {
  outline: 0.125rem solid var(--bshd-accent-light);
  outline-offset: 0.25rem;
}

.bshd-faq__a {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}

/* ---------- closing CTA band ---------- */

.bshd-close {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.bshd-close__text {
  max-width: 34rem;
}

/* ---------- testimonial <-> case-study links ---------- */

.bshd-quote-link {
  display: inline-block;
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-top: 1.125rem;
  padding-bottom: 0.125rem;
}

.bshd-quote-link:hover {
  color: var(--light-black);
}

.bshd-section--dark .bshd-quote-link:hover {
  color: var(--white);
}

/* ---------- calendly ---------- */

.bshd-calendly {
  margin-top: 2.25rem;
  border: 1px solid rgba(33, 36, 39, 0.18);
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: var(--cream);
}

.bshd-calendly {
  position: relative;
}

.bshd-calendly .calendly-inline-widget {
  min-height: 40rem;
  position: relative;
  z-index: 1;
}

/* The embed reserves a 640px box and paints nothing until it loads - on the
   highest-stakes page that is half a screen of blank. This sits behind it
   and is covered the moment the iframe paints. */
.bshd-calendly__fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 24rem;
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--light-black);
}

.bshd-calendly__fallback a {
  color: var(--bshd-accent-light);
}

@media screen and (max-width: 767px) {
  .bshd-calendly .calendly-inline-widget {
    height: 50rem !important;
  }
}

/* ---------- contact form ---------- */

.bshd-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 36rem;
  margin-top: 2rem;
}

.bshd-field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.bshd-field--wide {
  grid-column: 1 / -1;
}

.bshd-field label {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.bshd-field input,
.bshd-field select,
.bshd-field textarea {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: inherit;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  padding: 0.75rem 0.875rem;
  width: 100%;
}

.bshd-field textarea {
  min-height: 7rem;
  resize: vertical;
}

.bshd-field input:focus-visible,
.bshd-field select:focus-visible,
.bshd-field textarea:focus-visible {
  outline: 0.125rem solid var(--red);
  outline-offset: 0.125rem;
}

.bshd-form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.bshd-form__note {
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.75;
  margin: 1rem 0 0;
  max-width: 30rem;
}


/* ==========================================================================
   LAYOUT SYSTEM
   The Webflow export resolves a different content edge in almost every
   section, because the gutter is a flexing .side-div rather than a token:
   measured 248 / 140 / 140 / 136 / 131 / 101 px at 2200 / 1600 / 1440 /
   1200 / 992 / 768. Eight left edges on the homepage was the result.

   One gutter, one edge, one rhythm. Everything below is a token.
   ========================================================================== */

:root {
  --bshd-gutter: 8.75rem;   /* the .side-div width, now fixed rather than flexing */
  --bshd-rhythm: 8rem;      /* one vertical beat between sections            */
  --bshd-measure: 38rem;    /* ~70 characters of Aeonik at 17px              */

  /* The brand red is 4.08:1 on cream and 3.39:1 on the dark band - both
     below the 4.5:1 WCAG AA floor for the 12px uppercase labels it is used
     on. These two stay in the same family and clear it: 4.85 and 4.87. */
  --bshd-accent-light: #b3453f;
  --bshd-accent-dark: #d4756c;

  /* --cream is #f5f1e8, which is also the page background, so the "cream
     band" painted nothing. This is a real step away from the ground. */
  --bshd-band: #ece5d6;
  --bshd-hairline: rgba(33, 36, 39, 0.14);
}

/* ---------- one gutter ---------- */

@media screen and (min-width: 768px) {
  /* Fixed, not flexed. This is what makes the edge identical in every
     section instead of a function of how the flex row happened to resolve. */
  .side-div {
    flex: 0 0 var(--bshd-gutter);
    width: var(--bshd-gutter);
    max-width: var(--bshd-gutter);
  }

  .bshd-inner {
    max-width: none;
    margin: 0;
    padding-left: var(--bshd-gutter);
    padding-right: 2rem;
  }

  /* The card strip is full-bleed by design; it aligns to the same edge. */
  .scrolling-wrapper {
    padding-left: var(--bshd-gutter);
  }

  /* Some sections drop .padding-global entirely and hang .container-large
     straight off .padding-vertical, losing the 5vw the rest of the page
     has. This selector matches exactly those. */
  .padding-vertical > .container-large {
    box-sizing: border-box;
    padding-left: 5vw;
    padding-right: 5vw;
    /* The cap has to sit on the CONTENT box, not the border box, or this
       chain and the canonical one diverge by 24px the moment the cap
       engages at 1440. */
    max-width: calc(87rem + 10vw);
  }

  /* Sections that hide their gutter spacer at some widths (.side-div.hide)
     lose the shared edge with it. Re-supply the gutter on the wrapper. */
  .key_services-section .container-vertical > .container-large,
  .key_services-section > .padding-vertical > .padding-global > div > .container-large {
    padding-left: 0;
  }

  .side-div.hide {
    display: block;
    flex: 0 0 var(--bshd-gutter);
    width: var(--bshd-gutter);
    max-width: var(--bshd-gutter);
  }

  /* The contact hero sits in its own wrapper and floated 128px right of
     every other heading on the page. */
  .div-block-47,
  .contact-us_heading-content {
    padding-left: 0;
  }

  .contact-us_side-div {
    flex: 0 0 var(--bshd-gutter);
    width: var(--bshd-gutter);
    max-width: var(--bshd-gutter);
  }

  /* The Webflow desktop rules add a second 8rem inset inside the container
     that already supplies the gutter, so the contact H1 landed 128px right
     of every other heading. */
  .daruma_content-container {
    padding-left: 0;
  }

  /* The heroes were the last blocks off the shared edge: space-between in
     the hero row pushed the headline 134px right of every line beneath it,
     and the services/work heroes centre their own wrapper. The first thing
     a visitor sees should sit on the same edge as everything after it. */
  .hero_section-wrapper {
    justify-content: flex-start;
  }

  .hero_section-wrapper > div:last-child {
    margin-left: auto;
  }

  /* The services and work heroes hang off .padding-global with no
     .container-large and no gutter spacer, so their headlines started at
     the page edge instead of the shared column. */
  .header-100svh,
  .our-work_tagline-component {
    box-sizing: border-box;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    max-width: 87rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* The work hero has no gutter spacer of its own; the services hero
     already carries a .side-div, so only one of them needs the padding. */
  .our-work_tagline-component {
    padding-left: var(--bshd-gutter);
  }

  /* The CTA block was centred inside its own section, so its heading
     floated 234px right of every other heading on the page. */
  .signup-section-wrapper {
    justify-content: flex-start;
  }

}

/* ---------- one rhythm ---------- */

.bshd-section {
  padding: var(--bshd-rhythm) 0;
}

/* Two adjacent sections on the same ground read as one slab - the dark
   "How we work" band ran straight into the dark tech section for 1735px
   with no boundary. A hairline is the cheapest honest separator. */
.bshd-section--dark + .tech_section,
.bshd-section--dark + .bshd-section--dark,
.bshd-section--cream + .bshd-section--cream {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.bshd-section--cream + .bshd-section--cream {
  border-top-color: var(--bshd-hairline);
}

/* The "Let's talk!" badge was 180px parked over the left gutter, which is what
   the old 4.5rem indent on .bshd-inner existed to dodge - one third of the
   page moved to avoid one circle. At 120px it fits inside the 140px gutter
   with clearance at every width, so nothing has to move around it. */
.div-block-23 {
  width: 7.5rem;
  height: 7.5rem;
  margin-left: 5vw;
}

.div-block-23 .cta-text {
  font-size: 1.125rem;
}

/* ---------- one accent, at legible contrast ----------
   The accent is now spent on one thing per page - the primary CTA and the
   lead pill - rather than sprayed over every label. What remains as red
   text still has to clear 4.5:1, which the brand red does not. */

.bshd-quote-link {
  color: var(--bshd-accent-light);
}

.bshd-section--dark .bshd-quote-link {
  color: var(--bshd-accent-dark);
}

.bshd-section--cream {
  background-color: var(--bshd-band);
}

/* ---------- one measure ---------- */

.bshd-p,
.bshd-faq__a,
.bshd-answer__a,
.bshd-lede {
  max-width: var(--bshd-measure);
}

/* The question row is a flex line, not running text - its "+" marker has to
   reach the same right edge as the hairline under it. */
.bshd-faq {
  max-width: calc(var(--bshd-measure) + 4rem);
}

.bshd-answer {
  max-width: calc(var(--bshd-measure) + 2rem);
}

.bshd-footnote {
  margin-top: 0;
  max-width: var(--bshd-measure);
}

/* ---------- one type scale ----------
   Before: three 96px headings ("Ready to achieve your vision?", "We are here
   to help.", "Bring us something difficult") shouted over a 72px H1, while
   the actual argument - "The tools changed. The standard did not." - sat at
   36px. The sign-off was set larger than the substance.

   H1 72 / section heading 48 / closer 48 / sub 32, held at every width. */

@media screen and (min-width: 1440px) {
  :root {
    font-size: 16px;
  }

  .container-large {
    width: 100%;
    max-width: 87rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The scale starts at 992px. Between 992 and 1440 the Webflow rules put
   .h2 at 58px against .bshd-h2 at 35px - the same inversion, one
   breakpoint down. */
@media screen and (min-width: 992px) {
  /* No H1 anywhere outranks the homepage H1. The Webflow min-width:1920
     block pushes these to 8rem (128px) and 6.5rem (104px). */
  .hero_tagline-text,
  .our-work_hero-tagline,
  .case-study_tagline-text,
  .contact-us_heading {
    font-size: 4.5rem;
  }

  /* Sentences, not display lines. */
  .h2,
  .mission_text {
    font-size: 3rem;
  }

  /* The closers come down to meet the argument. */
  .maneko_heading,
  .maneko_text,
  .cta-heading {
    font-size: 3rem;
  }

  .p-vision {
    font-size: 2.5rem;
  }

  /* The argument comes up to meet the closers. */
  .bshd-h2 {
    font-size: 3rem;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 991px) {
  :root {
    --bshd-rhythm: 4.5rem;
    /* Below desktop the gutter collapses to zero and every block - Webflow
       and new alike - shares .padding-global's 5vw. One edge here too. */
    --bshd-gutter: 0rem;
  }

  .side-div:empty {
    display: none;
  }

  .bshd-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .tech_content-wrapper {
    padding-left: 0;
  }

  /* This spacer holds the decorative star, which is display:none below
     desktop - so it is not :empty, but it is still reserving a gutter. */
  .tech_section .side-div,
  .section_projects .side-div {
    display: none;
  }

  /* The Webflow breakpoints keep a left margin on the hero headline that no
     longer has a gutter to sit in. */
  .hero_tagline-text,
  .bshd-hero-copy .hero_tagline-text {
    margin-left: 0;
    padding-left: 0;
  }

  /* The strip heading is full-bleed on services (no .padding-global in its
     chain) and already padded on the homepage. Pad only the bare one. */
  .projects-content-wrapper {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .padding-global .projects-content-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .bshd-grid,
  .bshd-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Below desktop the hero is a row with a fixed-width headline squeezed
     between a gutter and an illustration, so the H1 lands on a different
     edge from the lede beneath it. Stack it: copy first, art second. */
  .hero_section-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .hero_tagline-text {
    width: 100%;
  }

  /* Stacked, the gloss no longer needs to be a narrow marginal column. */
  .hero_section-wrapper .side-div {
    width: auto;
    max-width: 28rem;
  }

  .hero_section-wrapper .side-div .p {
    padding-right: 0;
  }

  .bshd-hero-copy {
    max-width: none;
  }

  /* The desktop hero override has two-class specificity, so it beat the
     Webflow breakpoints and rendered a 69px H1 into a 286px column - seven
     lines of one or two words, with the sticky badge sitting on top. */
  .bshd-hero-copy .hero_tagline-text {
    font-size: 2.75rem;
  }

  .bshd-h2 {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 767px) {
  .bshd-grid,
  .bshd-grid--pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .bshd-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .signup-section-wrapper,
  .div-block-27 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .maneko_section-wrapper {
    text-align: left;
  }

  .bshd-form {
    grid-template-columns: minmax(0, 1fr);
  }


  .bshd-btn {
    width: 100%;
    justify-content: center;
  }

  /* The sticky "Let's talk!" badge overlaps the headline on a phone. */
  .cta_hidden-div-wrapper {
    display: none;
  }

  /* 19.375rem wide at a 440:766 ratio is a 514px-tall illustration before
     the visitor reaches the headline. Cap the height instead of the width
     so the art keeps its proportions and the H1 comes up the screen. */
  .mobile-img.img_innovation {
    width: auto;
    max-height: 17rem;
  }


  .bshd-close {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 479px) {
  .bshd-hero-copy .hero_tagline-text {
    font-size: 2.25rem;
  }

  .bshd-h2 {
    font-size: 1.625rem;
  }

  .bshd-answer__a {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bshd-btn,
  .bshd-faq__item {
    transition: none;
  }
}

/* ==========================================================================
   IMAGES
   .project-img sets width:100% with a fixed height:3rem and .logo-img sets
   height:100%, so with the default object-fit:fill every partner logo was
   squashed into whatever box it landed in - AnyoneGroup's mark is 84x120
   portrait, CachePay's is 120x82 landscape, both forced into one circle.
   ========================================================================== */

.project-img,
.logo-img,
.img,
.mobile-img,
.case-study_img,
.case-study_mobile-img,
.project-content img,
.footer_logo-wrapper img {
  object-fit: contain;
}

.hero-background-img {
  object-fit: cover;
}