/* =========================================================================
   template-parts/sections/section-cta.php
   Moved out of the partial's inline <style id="es-cta-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

/* ── Panel ─────────────────────────────────────────────────
   Dark card inset on the page surface, built to the supplied
   artwork: a warm glow bleeding out of the top left corner, a
   faint lift through the middle, and a copper hairline frame.
   Clips its own decoration, so nothing can push the page
   sideways. */
.es-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 5vw, 76px) clamp(20px, 4vw, 64px);
  /* Flat frame first: it is what shows if the gradient ring
     below is unsupported. */
  border: 1px solid rgba(232, 93, 32, 0.22);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(
      ellipse 58% 62% at 1% 0%,
      rgba(232, 93, 32, 0.2),
      transparent 66%
    ),
    radial-gradient(
      ellipse 78% 76% at 52% 58%,
      rgba(255, 255, 255, 0.035),
      transparent 72%
    ),
    var(--gray-900);
  text-align: center;
}

/* Copper frame that brightens toward the top left and the top
   right, the way the artwork does. Drawn as a 1px gradient ring
   using the border-box / content-box mask trick, so the corner
   radius follows the panel exactly. */
.es-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(232, 93, 32, 0.8) 0%,
    rgba(232, 93, 32, 0.3) 26%,
    rgba(232, 93, 32, 0.14) 52%,
    rgba(232, 93, 32, 0.22) 78%,
    rgba(232, 93, 32, 0.42) 100%
  );
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Panel decoration ──────────────────────────────────────
   Two concentric arcs sweeping out of the bottom left, two more
   out of the top right, and a pair of dot fields. Drawn as real
   circles rather than repeating gradients so each radius lands
   where the artwork puts it. All clipped by the panel. */
.es-cta__deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.es-cta__arc {
  position: absolute;
  border: 1px solid rgba(232, 93, 32, 0.3);
  border-radius: 50%;
}

.es-cta__arc--bl-1 {
  width: 760px;
  height: 760px;
  left: -300px;
  bottom: -430px;
}
.es-cta__arc--bl-2 {
  width: 1020px;
  height: 1020px;
  left: -400px;
  bottom: -560px;
}
.es-cta__arc--tr-1 {
  width: 700px;
  height: 700px;
  right: -190px;
  top: -330px;
}
.es-cta__arc--tr-2 {
  width: 960px;
  height: 960px;
  right: -290px;
  top: -450px;
}

/* Dot fields fade out along their length, so they read as a
   patch rather than a hard-edged block. */
.es-cta__dots {
  position: absolute;
  width: 108px;
  height: 112px;
  background-image: radial-gradient(
    circle at center,
    var(--brand-500) 1.6px,
    transparent 1.8px
  );
  background-size: 22px 22px;
}

.es-cta__dots--left {
  top: 45%;
  left: 4%;
  -webkit-mask-image: linear-gradient(100deg, #000 20%, transparent 95%);
  mask-image: linear-gradient(100deg, #000 20%, transparent 95%);
}

.es-cta__dots--right {
  top: 15%;
  right: 4%;
  -webkit-mask-image: linear-gradient(260deg, #000 25%, transparent 98%);
  mask-image: linear-gradient(260deg, #000 25%, transparent 98%);
}

@media (max-width: 767px) {
  .es-cta__deco {
    display: none;
  }
}

/* ── Copy ──────────────────────────────────────────────── */
.es-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  color: var(--brand-300);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--font-bold);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.es-cta__eyebrow svg {
  flex-shrink: 0;
}

.es-cta__title {
  max-width: 20ch;
  margin: 0 auto var(--space-5);
  color: var(--text-inverse);
  font-size: var(--fs-section-title);
  font-weight: var(--font-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-normal);
  text-wrap: balance;
}

.es-cta__title .es-hl {
  color: var(--brand-400);
}

.es-cta__lede {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--gray-300);
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.es-cta__actions {
  margin-top: var(--gap-fluid-md);
}

/* ── Panel artwork ──────────────────────────────────────────
   An <img> rather than a CSS background, for two reasons: it can
   carry loading="lazy", and this band sits well below the fold,
   so the browser is free to skip it until it is needed; and it
   takes explicit width and height, which a background cannot.

   Absolutely positioned and out of flow, so those dimensions
   never contribute layout and the panel cannot shift when the
   file lands. The --gray-900 base and its gradients stay behind
   it, so the copy keeps its contrast before the image arrives
   and if it never does. */
.es-cta__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The artwork's detail sits on its right edge. On a narrow panel,
     cover crops from both sides and would cut it off, so the right
     edge is pinned instead. */
  object-position: right center;
  pointer-events: none;
}

/* Scrim over the artwork, under the copy.
   The supplied artwork is near-black except for its arcs and three orange
   dots, and the brightest of those dots measures rgb(204,98,36). In the
   original mock the arcs sit in empty margin to the right of the copy, but
   this panel is narrower than the artwork is wide, so they land under the
   right-hand column. Text on a bare dot measures 2.54:1 against the body
   ink, which fails AA.

   A flat scrim would fix that and flatten the artwork with it, so this is a
   gradient: heaviest on the left under the heading, lightest at the right
   edge where the arcs are meant to show. It never reaches transparent. At
   the 0.55 floor the worst pixel composites to 6.3:1 against --gray-300 and
   10.6:1 against white, so every layer of copy clears AA wherever it falls.
   Raising that floor is safe; lowering it is not. */
.es-cta__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(22, 20, 16, 0.9) 0%,
    rgba(22, 20, 16, 0.86) 42%,
    rgba(22, 20, 16, 0.68) 74%,
    rgba(22, 20, 16, 0.55) 100%
  );
}

/* The panel is `isolation: isolate` already, so a z-index here is
   enough to lift the copy above the artwork. */
.es-cta__panel > *:not(.es-cta__art):not(.es-cta__scrim) {
  position: relative;
  z-index: 1;
}

/* ── Split layout ───────────────────────────────────────────
   The claim on the left, what you actually get on the right.
   One column below 992px, where a divided pair would leave two
   very narrow columns and split the checklist rows mid-line. */
.es-cta__panel--split {
  text-align: left;
}

.es-cta__panel--split .es-cta__title,
.es-cta__panel--split .es-cta__lede {
  margin-inline: 0;
  max-width: 24ch;
}

.es-cta__panel--split .es-cta__lede {
  max-width: 46ch;
}

.es-cta__split {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap-fluid-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .es-cta__split {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--gap-fluid-xl);
    align-items: center;
  }

  /* The rule between the columns. On the divider rather than a
     separate element so it cannot fall out of step with the gap. */
  .es-cta__side {
    padding-left: var(--gap-fluid-lg);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* ── What you get ───────────────────────────────────────────── */
.es-cta__points {
  margin: 0 0 var(--gap-fluid-md);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.es-cta__point {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.es-cta__point-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  /* Optical: the tick sits high in its own box, so the disc is nudged
     down to line up with the cap height of the title beside it. */
  margin-top: 2px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand-400);
}

.es-cta__point-mark svg {
  width: 13px;
  height: 8px;
}

.es-cta__point-title {
  display: block;
  margin: 0 0 2px;
  color: var(--text-inverse);
  font-size: var(--fs-body);
  font-weight: var(--font-bold);
  line-height: var(--lh-subhead);
}

/* gray-300, the same ink the lede uses, measured at 11.88:1 on the
   panel base in the note at the top of this file. */
.es-cta__point-text {
  display: block;
  margin: 0;
  color: var(--gray-300);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

/* ── Reassurance under the CTA ──────────────────────────────── */
.es-cta__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  color: var(--gray-300);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-subhead);
}

.es-cta__note-icon {
  flex-shrink: 0;
  color: var(--gray-400);
}

.es-cta__panel--split .es-cta__actions {
  margin-top: 0;
}

/* ── More than one button ───────────────────────────────────
   Only when a caller passes `ctas`, so a single-button panel keeps
   its original block flow. The row wraps rather than squeezing, and
   below 576px each button takes the full width so two labels of
   different lengths stack as an even pair instead of a ragged one. */
.es-cta__actions--multi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.es-cta__panel:not(.es-cta__panel--split) .es-cta__actions--multi {
  justify-content: center;
}

@media (max-width: 575px) {
  .es-cta__actions--multi .es-btn {
    flex: 1 1 100%;
  }
}

/* ── Secondary button on the dark panel ─────────────────────
   `.es-btn--secondary` paints --bg-sunken with --text-heading ink,
   which on this --gray-900 panel is a pale slab. It becomes the glass
   outline the dark header gives its own CTA: an 8% white wash, a 22%
   white hairline and --text-inverse ink, 14.9:1. The washes are
   translucent --gray-0 mixes on purpose, because every ground token is
   opaque and would cover the panel's copper glow. Geometry, chevron and
   arrowPulse sweep all stay `.es-btn`'s. Moved here from the homepage's
   retired `.rv-wl` rules so every CTA panel shares one treatment. */
.es-cta__panel .es-btn--secondary {
  background: color-mix(in srgb, var(--gray-0) 8%, transparent);
  border-color: color-mix(in srgb, var(--gray-0) 22%, transparent);
  color: var(--text-inverse);
}

.es-cta__panel .es-btn--secondary .arrow-icon {
  color: inherit;
}

.es-cta__panel .es-btn--secondary:hover,
.es-cta__panel .es-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--gray-0) 14%, transparent);
  border-color: var(--brand-400);
  color: var(--text-inverse);
  transform: translateY(-2px);
}

/* ── Trust strip ────────────────────────────────────────────
   Deliberately outside the panel, on the page surface: these are
   facts about the offer, and stating them on the light background
   reads as a footnote rather than as more of the pitch. */
.es-cta__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--gap-fluid-md);
  margin: var(--gap-fluid-md) 0 0;
  padding: 0;
  list-style: none;
}

.es-cta__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-subhead);
}

.es-cta__trust-icon {
  flex-shrink: 0;
  color: var(--brand-600);
}

/* Hairline between items, drawn on the gap rather than as its own
   element. Dropped on the last item and whenever the row wraps,
   since a separator at the end of a wrapped line points at nothing. */
@media (min-width: 768px) {
  .es-cta__trust-item:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 18px;
    margin-left: var(--gap-fluid-md);
    background: var(--border-default);
  }
}

/* Hover carries no box-shadow (owner, 10 Sep 2026). This non-hover state keeps the shadow it had. */
.es-cta__actions .es-btn--primary:focus-visible {
  box-shadow: 0 16px 44px -8px rgba(232, 93, 32, 0.78);
}

/* Focus rings need to clear the dark panel. */
.es-cta__panel a:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
}

/* ── Tile wall ─────────────────────────────────────────────
   Centred rows that wrap naturally, so any number of tiles
   stays balanced without per-row markup. */
.es-cta__tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-fluid-xs);
  margin: var(--gap-fluid-lg) 0 0;
  padding: 0;
  list-style: none;
}

.es-cta__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(60px, 7vw, 78px);
  height: clamp(60px, 7vw, 78px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  transition:
    transform var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out);
}

.es-cta__tile img {
  width: clamp(28px, 3.4vw, 38px);
  height: auto;
  max-height: 60%;
  object-fit: contain;
}

.es-cta__tile:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 93, 32, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Light tile ────────────────────────────────────────────
   Default, because the stack icons cannot all survive a dark
   tile. Measured over the 15 supplied icons: four are largely
   or entirely black ink (two are 100% black), so they vanish on
   a translucent dark tile. None of the 15 is more than 23%
   near-white, so a light tile is safe for every one of them and
   each logo keeps its own brand colour.

   A CSS filter cannot solve this: rescuing a 100% black icon
   means forcing it light, which would flatten the eleven
   colour-correct logos into silhouettes.

   Doubled class so it beats the base tile rules above. */
.es-cta__tile.es-cta__tile--light {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--gray-0);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
}

.es-cta__tile.es-cta__tile--light:hover {
  transform: translateY(-4px);
  border-color: var(--brand-300);
  background: var(--gray-0);
}

/* ── Circle tile ───────────────────────────────────────────
   The header's tech chip, reproduced exactly: a 50px neutral
   dark disc with the brand mark inset, matching
   .hire-skils-list-main img in header.css down to the disc
   colour, which both read from --chip-surface.

   The tile count is not fixed: the row wraps, so any number of
   icons from the editor lands on the same disc. */
/* 56px rather than the header's 50px. The mark inside a disc is capped by
   the largest square that fits it, chip / sqrt(2), so at 50px the icon
   could not exceed ~35px however far the padding was cut. Growing the disc
   is the only way to grow the mark. 38px inside 56px leaves the corners
   just inside the circle (max 39.6px). */
.es-cta__tile.es-cta__tile--circle {
  width: clamp(46px, 4.9vw, 56px);
  height: clamp(46px, 4.9vw, 56px);
  padding: clamp(8px, 0.75vw, 9px);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--chip-surface);
  box-shadow: none;
}

.es-cta__tile.es-cta__tile--circle img {
  width: 100%;
  height: 100%;
  max-height: none;
}

/* ── Dark-ink marks ────────────────────────────────────────
   A few logos are drawn in solid black, which lands at 1.6:1 on
   the disc and reads as an empty chip. Inverting pure black
   ink gives pure white at 12.6:1, which is also how both of
   those brands are meant to appear on a dark background.
   Opt-in per tile, because inverting a coloured logo would
   wreck it. Alpha is untouched by `invert`, so the transparent
   area around the mark stays transparent. */
.es-cta__tile img.es-cta__tile-img--invert {
  filter: invert(1);
}

/* No border to tint, so the brand accent lands as a ring. */
.es-cta__tile.es-cta__tile--circle:hover {
  transform: translateY(-4px);
  background: var(--chip-surface);
}

@media (prefers-reduced-motion: reduce) {
  .es-cta__tile {
    transition: none;
  }
  .es-cta__tile:hover {
    transform: none;
  }
}