/**
 * Responsive layer.
 *
 * The design canvas produced fixed desktop layouts with inline styles, so the
 * overrides here have to be attribute selectors with !important - an inline
 * style beats a class rule otherwise. Matching is on the distinctive fragment
 * of each declaration rather than the whole string, so small edits upstream
 * do not silently drop a breakpoint.
 */

/* --------------------------------------------------------------------------
 * Always on: nothing may push the page sideways.
 * ----------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  /* hidden would force the other axis to auto, making body its own scroll
     container - and position:sticky then has nothing to stick to. clip does
     the same job without that side effect. The hidden line stays first as a
     fallback for browsers that do not know clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

#bta-main img,
#bta-main svg {
  max-width: 100%;
}

/* Long unbroken strings - an email address in a narrow column, a URL in body
   copy - used to overflow their column and print over the next one. */
#bta-main aside,
#bta-main p,
#bta-main li,
#bta-main h1,
#bta-main h2,
#bta-main h3,
#bta-main a {
  overflow-wrap: anywhere;
}

/* wpautop is off for articles, but a stray <br> inside a grid would still take
   a cell and push the next child into the wrong column. */
#bta-main [style*="display:grid"] > br {
  display: none;
}

/* Wide content keeps its shape but scrolls inside its own box. */
#bta-main table,
#bta-main pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* The logo must never be squeezed by its flex row: the height is fixed, so a
   narrowed width distorts it. */
.bta-logo {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}

/* On phones the 52px header logo would push the menu button onto a second
   line, so it drops back to 40px there. */
@media (max-width: 620px) {
  header .bta-logo {
    height: 40px !important;
  }
}

/* --------------------------------------------------------------------------
 * The page wrapper carries overflow-x:hidden from the design. Hidden forces
 * the other axis to auto, which makes the wrapper a scroll container - and a
 * scroll container is what position:sticky sticks to, so the contents sidebar
 * never stuck to the viewport. clip does the same clipping without creating
 * one. The hidden line stays first as a fallback for browsers without clip.
 * ----------------------------------------------------------------------- */
#bta-main {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* --------------------------------------------------------------------------
 * The article contents sidebar follows the reader on a wide screen. It sits
 * below the sticky header, so it starts where that ends.
 * ----------------------------------------------------------------------- */
@media (min-width: 901px) {
  .bta-aside {
    position: sticky !important;
    /* Clears the stuck header, whatever height it is - the fallback matches a
       two-row header on a wide screen. */
    top: calc(var(--bta-header-height, 141px) + 28px) !important;
    align-self: start;
  }
}

@media (max-width: 900px) {
  .bta-aside {
    position: static !important;
  }
}

/* An anchor jump must not land the heading under the fixed header. */
#bta-main h2[id],
#bta-main h3[id],
#bta-main section[id] {
  scroll-margin-top: calc(var(--bta-header-height, 141px) + 28px);
}

/* --------------------------------------------------------------------------
 * Sticky header. The design sets position:relative inline, so the stuck state
 * has to shout; the insets follow the page gutter at each breakpoint.
 * ----------------------------------------------------------------------- */
[data-site-header].is-stuck {
  position: fixed !important;
  top: 12px !important;
  left: 16px !important;
  right: 16px !important;
  box-shadow: 0 14px 40px rgba(6, 34, 28, 0.12);
}

/* --------------------------------------------------------------------------
 * Hamburger button - hidden until the nav collapses.
 * ----------------------------------------------------------------------- */
.bta-nav-toggle {
  display: none;
  pointer-events: auto;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--bta-line, #D3E4DF);
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
}

.bta-nav-toggle__bars {
  display: block;
  width: 18px;
}

.bta-nav-toggle__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--bta-ink, #101A17);
  transition: transform 160ms ease, opacity 160ms ease;
}

.bta-nav-toggle__bars span + span {
  margin-top: 4px;
}

.bta-nav-toggle[aria-expanded="true"] .bta-nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.bta-nav-toggle[aria-expanded="true"] .bta-nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.bta-nav-toggle[aria-expanded="true"] .bta-nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
 * Discovery call: the two panels sit side by side when there is room.
 * ----------------------------------------------------------------------- */
.bta-discovery-head {
  margin-bottom: 34px;
}

.bta-discovery-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
}

/* Both panels start at the same line, so the design's 520px caps have to go. */
.bta-discovery-book,
.bta-discovery-book > div,
.bta-discovery-expect [style*="max-width:520px"],
.bta-discovery-head [style*="max-width:520px"] {
  max-width: none !important;
}

.bta-discovery-book,
.bta-discovery-book > div {
  /* The panel carried 28px of top padding, which pushed "Pick a time" below
     "What to expect". Both columns now start on the same line. */
  padding-top: 0 !important;
}

@media (max-width: 900px) {
  .bta-discovery-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

/* --------------------------------------------------------------------------
 * Laptop and below: give the generous desktop spacing back.
 * ----------------------------------------------------------------------- */
@media (max-width: 1100px) {
  #bta-main [style*="padding:76px 34px"],
  #bta-main [style*="padding:64px 34px"],
  #bta-main [style*="padding:60px 34px"] {
    padding: 54px 26px !important;
  }

  #bta-main [style*="font-size:62px"] { font-size: 46px !important; }
  #bta-main [style*="font-size:56px"] { font-size: 42px !important; }
  #bta-main [style*="font-size:54px"] { font-size: 41px !important; }
  #bta-main [style*="font-size:52px"] { font-size: 40px !important; }
  #bta-main [style*="font-size:44px"] { font-size: 36px !important; }
  #bta-main [style*="font-size:40px"] { font-size: 33px !important; }
  #bta-main [style*="font-size:38px"] { font-size: 31px !important; }
}

/* --------------------------------------------------------------------------
 * Tablet: the nav collapses and the label/content grids stack.
 * ----------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bta-nav-toggle {
    display: inline-flex;
  }

  /* Both groups collapse into the toggle. */
  .bta-headmeta,
  .bta-nav {
    display: none !important;
  }

  /* The bar wraps so the phone/CTA group gets a line of its own instead of
     competing with the logo for width - that is what squashed the button. */
  .bta-headbar {
    flex-wrap: wrap !important;
  }

  .bta-nav-toggle {
    margin-left: auto;
  }

  [data-site-header].is-open .bta-headmeta {
    display: flex !important;
    flex: 1 0 100%;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    padding: 4px 24px 0 !important;
  }

  /* Never let the button break a word per line. */
  [data-site-header].is-open .bta-headmeta > a[style*="border-radius:999px"] {
    white-space: nowrap;
    flex: none;
  }

  [data-site-header].is-open .bta-nav {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end !important;
    text-align: right;
    gap: 4px !important;
    padding: 14px 24px 20px !important;
  }

  [data-site-header].is-open .bta-nav > a,
  [data-site-header].is-open [data-menu] {
    width: 100%;
    text-align: right;
    padding: 9px 0 !important;
  }

  [data-site-header].is-open [data-menu] > a {
    justify-content: flex-end;
    width: 100%;
  }

  /* Insights starts closed; the caret opens it. */
  [data-site-header].is-open [data-submenu] {
    display: none !important;
    position: static !important;
    padding-top: 4px !important;
    min-width: 0 !important;
  }

  [data-site-header].is-open [data-menu].is-expanded [data-submenu] {
    display: block !important;
  }

  [data-site-header].is-open [data-submenu] > div {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  [data-site-header].is-open [data-submenu] a {
    text-align: right;
    padding: 8px 0 !important;
  }

  /* A 9px glyph is not a tap target. */
  .bta-caret {
    display: inline-block;
    padding: 10px;
    margin: -10px -10px -10px 0;
    font-size: 11px !important;
    transition: transform 160ms ease;
  }

  [data-menu].is-expanded .bta-caret {
    transform: rotate(180deg);
  }

  /* The thin rules between nav items are noise once it is a column. */
  [data-site-header] .bta-nav > span[style*="width:1px"] {
    display: none !important;
  }


  /* The five quiz progress segments are a bar, not a list - they stay in a
     row at every width. */
  /* Specificity has to beat the #bta-main collapse rule above. */
  #bta-main .bta-quiz [style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }

  /* Module table: "#" keeps the module name company, the focus text drops
     underneath both rather than stacking three deep. */
  #bta-main [style*="grid-template-columns:36px 250px"] {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 4px 12px !important;
  }

  #bta-main [style*="grid-template-columns:36px 250px"] > *:nth-child(3) {
    grid-column: 2 / -1;
  }

  /* The hero headline sat exactly on the header's bottom edge. */
  #bta-main [style*="flex:1"][style*="padding:0 34px"] {
    padding: 30px 18px 0 !important;
    align-items: flex-start !important;
  }

  /* The hero buttons keep their own 34px gutter, so they were indented 16px
     further than the headline above them. */
  #bta-main [style*="padding:0 34px 34px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* min-height:340px was zeroed for stacking, which collapsed the
     margin-bottom:auto that held the icon away from the card title. */
  #bta-main [style*="margin-bottom:auto"] {
    margin-bottom: 20px !important;
  }

  /* Headline fragments were set to nowrap for the desktop line breaks. */
  #bta-main h1 span[style*="white-space:nowrap"],
  #bta-main h2 span[style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  /* A contact link must wrap rather than run past the card edge - except a
     phone number, which is short and should never be split. */
  #bta-main a[style*="white-space:nowrap"]:not([href^="tel:"]) {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Once the "why us" grid is a single column, every item after the first
     needs the rule that only rows two and three carried. */
  #bta-main [style*="gap:26px 44px"] > div {
    border-top: 1px solid #DFEBE8;
    padding-top: 26px !important;
  }

  #bta-main [style*="gap:26px 44px"] > div:first-child {
    border-top: 0;
    padding-top: 0 !important;
  }

  /* A fixed header holding an open menu still has to fit the screen. */
  [data-site-header].is-stuck.is-open {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .bta-headbar {
    padding: 16px 20px !important;
    gap: 14px !important;
  }

  .bta-headrule {
    margin: 0 20px !important;
  }

  /* Label / content / aside grids become one column. */
  #bta-main [style*="grid-template-columns:180px"],
  #bta-main [style*="grid-template-columns:230px"],
  #bta-main [style*="grid-template-columns:200px"],
  #bta-main [style*="grid-template-columns:70px"],
  #bta-main [style*="grid-template-columns:36px"],
  #bta-main [style*="repeat(3,1fr)"],
  #bta-main [style*="repeat(3,minmax(0,1fr))"],
  #bta-main [style*="repeat(5,1fr)"],
  #bta-main [style*="1.05fr 0.85fr 0.85fr 1.75fr"],
  #bta-main [style*="0.7fr 1.3fr"],
  #bta-main [style*="minmax(0,0.6fr)"],
  #bta-main [style*="minmax(0,1.25fr)"],
  #bta-main [style*="minmax(0,0.9fr)"],
  #bta-main [style*="minmax(0,0.95fr)"],
  #bta-main [style*="minmax(0,0.85fr)"],
  #bta-main [style*="grid-template-columns:1fr minmax(0,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }

  /* The hero is sized for a wide screen. */
  #bta-main [style*="min-height:760px"] { min-height: 560px !important; }
  #bta-main [style*="min-height:660px"] { min-height: 0 !important; }
  #bta-main [style*="min-height:440px"] { min-height: 0 !important; }
  #bta-main [style*="min-height:340px"],
  #bta-main [style*="min-height:300px"] { min-height: 0 !important; }

  /* The "problem we solve" collage is absolutely positioned by design. */
  .bta-collage > [style*="position:absolute"]:not(.bta-slot) {
    position: static !important;
    max-width: none !important;
    margin-top: 12px !important;
    inset: auto !important;
  }

  /* Every inner width cap, except the centring wrapper, would otherwise leave
     a stacked column stranded in the middle of the card. */
  #bta-main [style*="max-width:"]:not([style*="max-width:1080px"]) {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
 * Phone.
 * ----------------------------------------------------------------------- */
@media (max-width: 620px) {
  /* Outer page gutter and the card radius both shrink. */
  #bta-main[style*="padding:16px"] { padding: 8px !important; }

  [data-site-header].is-stuck {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }

  [data-site-header].is-stuck.is-open {
    max-height: calc(100vh - 16px);
  }

  #bta-main [style*="border-radius:22px"] { border-radius: 16px !important; }

  #bta-main [style*="padding:76px 34px"],
  #bta-main [style*="padding:64px 34px"],
  #bta-main [style*="padding:60px 34px"],
  #bta-main [style*="padding:56px 34px"] {
    padding: 36px 18px !important;
  }

  #bta-main [style*="padding:30px 32px"],
  #bta-main [style*="padding:26px 28px"],
  #bta-main [style*="padding:22px 24px"] {
    padding: 20px 18px !important;
  }

  /* Everything that is still two columns goes to one. */
  #bta-main [style*="repeat(2,1fr)"],
  #bta-main [style*="grid-template-columns:120px"],
  #bta-main [style*="minmax(0,1.05fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  /* Stat rows: the figure sits above its explanation. */
  #bta-main [style*="grid-template-columns:120px"] {
    align-items: start !important;
    gap: 6px !important;
  }

  #bta-main [style*="font-size:62px"],
  #bta-main [style*="font-size:56px"],
  #bta-main [style*="font-size:54px"],
  #bta-main [style*="font-size:52px"] {
    font-size: 32px !important;
    letter-spacing: -0.02em !important;
  }

  #bta-main [style*="font-size:44px"],
  #bta-main [style*="font-size:40px"],
  #bta-main [style*="font-size:38px"] {
    font-size: 26px !important;
  }

  #bta-main [style*="font-size:34px"],
  #bta-main [style*="font-size:32px"],
  #bta-main [style*="font-size:30px"] {
    font-size: 22px !important;
  }

  #bta-main [style*="min-height:760px"] { min-height: 520px !important; }

  /* The header CTA fills the row instead of wrapping to three lines. */
  [data-site-header].is-open .bta-headmeta > a[style*="border-radius:999px"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bta-nav-toggle__bars span {
    transition: none;
  }
}