/* The site-wide "reach out to us" block — restyled to the design system.
 * ===========================================================================
 *
 * `.cta_component` appears verbatim on ten pages, so it is re-dressed rather
 * than replaced: a string rewrite of a block that deep would be fragile, and
 * the same markup is still what a re-scrape produces.
 *
 * What it was: a 1.25rem-rounded panel with the drone line-art on the right
 * and two white Webflow pills stacked on the left — the last full-width block
 * on the site still speaking the old language.
 *
 * What it is now: the same two-column head every rebuilt section uses. Mono
 * eyebrow, display heading, and the two actions as tag buttons — the primary
 * one filled in the brand colour, the second outlined, so the pair reads as a
 * choice rather than two identical pills. Corners at 2px, hairline instead of
 * a floating card.
 *
 * Scoped to [data-mode="frontier"], like the rest of the design layer.
 */

/* Two columns, and each one is a whole thing.
 *
 * The first version left the drawing where Webflow had it — absolutely
 * positioned against the right edge — and put the copy in a 9fr column beside
 * a 3fr column holding nothing but the eyebrow. So the heading ran under the
 * drone, the left third was empty, and the block had no structure to read.
 *
 * Now: the label and the drawing stack down the left, the sentence and its two
 * actions hold the right. The drawing stops being a background wash and
 * becomes the thing the label introduces. */
[data-mode="frontier"] .cta_component {
  --cta-line: rgba(255, 255, 255, 0.14);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  gap: 1.75rem clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background-color: color-mix(in srgb, var(--site-accent, #c4b798) 6%, transparent);
  border: 1px solid var(--cta-line);
  border-radius: 2px;
}

/* The eyebrow the block never had — it is what makes it a section of the
   system rather than a panel that wandered in. */
[data-mode="frontier"] .cta_component::before {
  content: "// Get in touch";
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  color: var(--site-accent, #c4b798);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

[data-mode="frontier"] .cta_component .cta_content-wrapper {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: 46ch;
}

[data-mode="frontier"] .cta_component .heading-style-h4 {
  color: #fff;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* --- The two actions ------------------------------------------------------ */

[data-mode="frontier"] .cta_component .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* Webflow's pill, re-cut as the tag button. The doubled label it uses for its
   hover slide is collapsed to one — the tag button does not slide.
 *
 * Two components, not one: Defence's block uses `.button`, Lawenforcement's
 * the `.btn-bubble-arrow` pill. Styling only the first left the second site's
 * CTA on 160px pills — found by verify/blocks.mjs, which checks each shared
 * block on every page that carries it rather than on the one it was built
 * against. */
[data-mode="frontier"] .cta_component .button-group .button,
[data-mode="frontier"] .cta_component .btn-bubble-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 2.625rem;
  padding: 0 1.125rem;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

/* The first action is the one to take, so it carries the brand colour. */
[data-mode="frontier"] .cta_component .button-group .button:first-child,
[data-mode="frontier"] .cta_component .btn-bubble-arrow:first-child {
  background-color: var(--site-accent, #c4b798);
  border-color: var(--site-accent, #c4b798);
  color: #0b0b0b;
}

[data-mode="frontier"] .cta_component .button-group .button:hover,
[data-mode="frontier"] .cta_component .btn-bubble-arrow:hover {
  background-color: #fff;
  border-color: #fff;
  color: #0b0b0b;
}

[data-mode="frontier"] .cta_component .button-inner-wrap,
[data-mode="frontier"] .cta_component .btn-bubble-arrow__content {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
  background: none;
  border: 0;
}

/* Only the first copy of the label is kept; the second exists purely for the
   slide animation the pill used to do. */
[data-mode="frontier"] .cta_component .button-text-wrap {
  overflow: visible;
  height: auto;
}

[data-mode="frontier"] .cta_component .buton-text.button-text-hover {
  display: none;
}

/* `!important`, and repeated for :hover, because the slide is not CSS: Webflow
   IX2 writes the transform as an inline style, which no ordinary rule can
   outrank. With the second label hidden above, the remaining one still slid
   12px up on hover and left the button empty — nothing was behind it to arrive.
   The hover here is the arrow travelling, and that alone. */
[data-mode="frontier"] .cta_component .buton-text,
[data-mode="frontier"] .cta_component .button:hover .buton-text,
[data-mode="frontier"] .cta_component .button:focus-visible .buton-text {
  transform: none !important;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* The arrow loses its disc and simply travels on hover. */
[data-mode="frontier"] .cta_component .button-arrow-container {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

[data-mode="frontier"] .cta_component .button-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-mode="frontier"] .cta_component .button:hover .button-icon {
  transform: translateX(3px);
}

/* --- The line drawing ----------------------------------------------------- */

/* Back in the flow, under the label, in the column it belongs to. It was taken
   out of the grid when it was decoration against the right edge; as the left
   column's subject it is placed like everything else.

   Held at 0.72 rather than the 0.4 it wore as a background wash: it has to
   read as a drawing now, but the heading beside it still leads. */
[data-mode="frontier"] .cta_component .img_cta-wrapper {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

/* `position` and `inset` have to be named explicitly: Webflow pins the drawing
   with `position: absolute; inset: 25% 0 0 auto`, and simply not repeating
   those in this rule left it pinned to the right edge — the wrapper took its
   place in the grid while the image stayed exactly where it had been. */
[data-mode="frontier"] .cta_component .img_cta {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  opacity: 0.72;
  pointer-events: none;
}

/* The copy must not run under the drawing. */
[data-mode="frontier"] .cta_component .cta_content-wrapper {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  /* One column, in reading order: label, sentence, actions, drawing. The
     explicit placements have to be undone or the two columns survive the
     change to a single-column template. */
  [data-mode="frontier"] .cta_component {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
  }
  [data-mode="frontier"] .cta_component::before,
  [data-mode="frontier"] .cta_component .cta_content-wrapper,
  [data-mode="frontier"] .cta_component .img_cta-wrapper {
    grid-column: 1;
    grid-row: auto;
  }
  /* Webflow turns the wrapper into `display: flex; justify-content: flex-end`
     below 991, which parked the drawing against the right edge while the label,
     the sentence and the buttons all sat on the left. */
  [data-mode="frontier"] .cta_component .img_cta-wrapper {
    display: block;
  }
  [data-mode="frontier"] .cta_component .img_cta {
    max-width: 22rem;
    opacity: 0.55;
  }
}

/* The bubble-arrow pill's own parts: the arrow discs and the duplicate that
   swaps in on hover, plus the label, which carries its own colour. */
[data-mode="frontier"] .cta_component .btn-bubble-arrow__arrow,
[data-mode="frontier"] .cta_component .btn-bubble-arrow__arrow.is--duplicate,
[data-mode="frontier"] .cta_component .btn-bubble-arrow__arrow.is-light {
  position: static;
  width: 0.8125rem;
  height: 0.8125rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  transform: none;
}

/* It slid its label in from the left; the tag button does not slide. The pill
   radius lives on this element too, not only on the anchor. */
[data-mode="frontier"] .cta_component .btn-bubble-arrow__content {
  transform: none;
  border-radius: 2px;
}

[data-mode="frontier"] .cta_component .btn-bubble-arrow__content-text {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}