@charset "UTF-8";
/* ===================================================================
   cta.css — the pre-footer call to action (template-parts/site-cta.php)
   Class prefix: ts-cta
   Loaded site-wide after ds.css. The markup it styles renders only on
   pages that do not already close with the same ask, so on the front
   page, the thirteen country pages and the contact page there is
   nothing here for any of this to apply to.
   ===================================================================

   THE SURFACE PROBLEM, AND WHAT IS DONE ABOUT IT

   This band is sandwiched. Above it is the reviews seal, which is
   --cream. Below it is <footer>, which is a solid --ac slab. Below
   that again is .ts-why, which is --cream with a 4px gold rule on top.

   A second --ac band here would fuse with the footer into one very
   tall green block with a mysterious seam through the middle, which is
   the exact failure .ts-why and .ts-rev were both written to avoid.
   Going cream instead would fuse it upward with the reviews seal and
   throw away the dark band the design is built on.

   So the band goes DARKER, not lighter: --ac-dark, the deepest green
   in the palette, which reads as the base note of the page and makes
   the footer's --ac step up rather than continue. On its own that step
   is a quiet one, so the join is sealed with a 4px gold rule on the
   bottom edge — deliberately the same rule, the same weight and the
   same colour as .ts-why's border-top.

   The effect, read down the page:

       cream  reviews seal
       DARK   this band            <- deepest green
       ====   4px gold
       green  <footer>             <- --ac
       ====   4px gold
       cream  .ts-why

   The footer is now bracketed top and bottom in the brand's flourish
   colour, and the three surfaces are three different values instead of
   two greens pretending to be one. The gold rules are the only two
   places on the page where the two brand colours meet edge to edge,
   and now they answer each other.

   WHAT IS NOT HERE

   No portrait, and therefore no medallion, no ring and no avatar
   frame. The reasoning is in site-cta.php. The focal object is the
   gold script line of the heading — the logo's own device, which the
   whole site already uses to mean "this is us speaking". It is set
   larger here than anywhere else in the theme for exactly that reason.

   Radii follow the house scale: 12px on the buttons. The reference's
   buttons are near-square; ours are not. Nothing here is
   square-cornered.
   =================================================================== */

.ts-cta {
  background: var(--ac-dark);
  border-bottom: 4px solid var(--gold);
  color: #fff;
  /*
   * The band is full-bleed and its own stacking context, so the gold
   * seam cannot be overlapped by a margin collapsing out of <footer>.
   */
  position: relative;
  isolation: isolate;
}

.ts-cta *,
.ts-cta *::before,
.ts-cta *::after { box-sizing: border-box; }

.ts-cta-in {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-block: clamp(48px, 5.6vw, 84px);
  padding-inline: clamp(20px, 4vw, 28px);
  text-align: center;
}

/* ------------------------------------------------------------------
   The broken rule

   The reference runs a hairline across the whole band and drops the
   word MORE into the gap. Kept as a device, dropped as a word: MORE
   says nothing, and this is the one label on the page that can say
   what the band is for.

   The rules are gradients that fade out towards the edges rather than
   flat hairlines that stop dead. On a dark surface a hard-ended 1px
   line looks like a rendering artefact; a fade reads as intentional.
   Capped at 200px each so the device stays a device and does not
   become a full-width divider competing with the gold seam below.
   ------------------------------------------------------------------ */

.ts-cta-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}

.ts-cta-rule__l {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 100%);
}

.ts-cta-rule__l:last-child {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 100%);
}

.ts-cta-rule__t {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Heading — the house pattern, scaled up

   A white sans line with the gold Cormorant script line under it,
   mirroring the logo. .sf is the theme's own class (style.css) and is
   reused rather than re-declared, so if the house script line changes
   this changes with it. Only the size and the line-height are set
   here, because this is the band's focal object and it is carrying
   the space the reference gave to a photograph.
   ------------------------------------------------------------------ */

.ts-cta-h {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(27px, 3.4vw, 43px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}

.ts-cta-h .sf {
  color: var(--gold);
  font-size: 1.24em;
  line-height: 1.04;
  margin-top: 4px;
}

.ts-cta-lede {
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.75;
  /*
   * Not pure white. The heading is #fff; a lede at the same value
   * flattens the two into one block of text. This sits at roughly
   * 9.5:1 on --ac-dark, well clear of the 4.5:1 floor.
   */
  color: rgba(255, 255, 255, 0.82);
}

/* ------------------------------------------------------------------
   The two buttons

   Different weight, as in the reference: a solid gold primary and an
   outlined secondary. Gold #EAB924 with --ink text on it is about
   6.9:1; white on --ac-dark is about 13.8:1. Gold text on a light
   surface is banned in this theme and does not appear here.

   Both are 52px tall at every width, comfortably over the 44px tap
   floor, and both are plain <a> elements — the band has no JavaScript
   of any kind and works identically with scripting disabled.
   ------------------------------------------------------------------ */

.ts-cta-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 36px);
}

.ts-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

.ts-cta-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform .22s ease;
}

.ts-cta-btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.ts-cta-btn--gold:hover {
  background: #F3C63F;
  border-color: #F3C63F;
}

.ts-cta-btn--gold:hover svg { transform: translateX(3px); }

.ts-cta-btn--ghost {
  background: transparent;
  /* ~4.6:1 against --ac-dark, clear of the 3:1 floor for a control edge. */
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.ts-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: #fff;
}

.ts-cta-btn:active { transform: translateY(1px); }

/* ------------------------------------------------------------------
   Focus

   The theme's global ring is `a:focus-visible{outline:2px solid
   var(--ac)}` — forest green, which on a forest-green band is an
   invisible focus indicator. Overridden here at higher specificity
   (0,2,1 against the global 0,1,1), and the sheet also loads after
   style.css, so it wins twice over.

   Gold on --ac-dark for the outlined button and any stray link. The
   gold button gets a white ring instead: a gold ring 3px outside a
   gold fill would read as a slightly fatter button, not as focus.
   ------------------------------------------------------------------ */

.ts-cta a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 12px;
}

.ts-cta a.ts-cta-btn--gold:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Small screens

   Below 520px the buttons go full width and stack. Two 52px buttons
   side by side at 390px would each be about 160px wide with the
   longer label wrapping to three lines, which is how a tap target
   ends up taller than it is wide and still hard to hit.
   ------------------------------------------------------------------ */

@media (max-width: 560px) {
  .ts-cta-acts { flex-direction: column; }
  .ts-cta-btn { width: 100%; }
  .ts-cta-lede { font-size: 16px; }
  .ts-cta-rule { gap: 12px; }
  .ts-cta-rule__t { letter-spacing: 0.14em; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-cta-btn,
  .ts-cta-btn svg { transition: none; }
  .ts-cta-btn--gold:hover svg { transform: none; }
  .ts-cta-btn:active { transform: none; }
}

/* --------------------------------------------------------------------
   The brand mark.

   A gold speech bubble with the house gorilla drawn inside it in white
   line, sitting between the lede and the buttons where the team
   photograph used to. It is the brand's own artwork on a real alpha
   channel, so it needs no plate, no ring and no disc behind it: the
   gold reads at about 7:1 against --ac-dark, and the silhouette is its
   own frame.

   IT MUST NOT BE MASKED

   The mark has a tail — the flourish that sweeps out of the bubble and
   runs down to the bottom right — and that tail is both the widest and
   the lowest thing in the file. The rule this replaces cropped the
   image square and then cut a 50% radius out of it, which left the tip
   of the tail 117px outside the mask and amputated it, so what showed
   was a gold disc inside a white ring with the bubble's one
   distinguishing feature gone.

   Hence: no border-radius, no object-fit, no fixed aspect-ratio. Width
   is set, height follows from the intrinsic 400x368, and the whole
   silhouette survives at every viewport.

   No box-shadow either. box-shadow is drawn from the element's box and
   not from its alpha, so on a transparent PNG it paints a rectangle
   behind a round mark — a square corner, which this theme does not
   have anywhere. Nothing replaces it: a black shadow on the darkest
   green in the palette buys almost nothing and only muddies the tail,
   which is the thinnest part of the artwork.

   The height is deliberately held level with the disc it replaces —
   140px wide resolves to about 129px tall, against the old 124px disc
   plus its 3px ring — because the owner asked for this band to be
   shortened and it was. Nothing here gives that back.
   -------------------------------------------------------------------- */
.ts-cta-figure{margin:clamp(6px,0.9vw,12px) auto 0;width:clamp(104px,13vw,140px)}
.ts-cta-figure img{display:block;width:100%;height:auto}
.ts-cta-body{min-width:0}