/* ==========================================================================
   FIX THE SUBJECT — design system
   Only what Elementor Free cannot reproduce natively. Everything else
   (colours, spacing, typography on individual widgets) is set in Elementor.
   --------------------------------------------------------------------------
   00  Tokens
   01  Typography helpers
   02  Topbar
   03  Header island
   04  Hero background layers
   05  Service toggle
   06  Price signal
   07  Showcase carousel
   08  Responsive
   ========================================================================== */

/* ---------- 00  Tokens --------------------------------------------------- */
:root {
  --ink: #0A0A0A;
  --ink-2: #111111;
  --ink-3: #1B1B1B;
  --yellow: #FFC800;
  --yellow-dark: #E5B400;
  --yellow-soft: #FFF3C9;

  /* Fill for a secondary button's hover, chosen by the ground it sits on.
     The bright yellow holds up on a dark section but reads bleached against
     white, so light grounds take the source's deeper --yellow-dark. The dark
     contexts put the bright one back. */
  --btn-fill-hover: var(--yellow-dark);

  --d-text: #FFFFFF;
  --d-muted: rgba(255, 255, 255, .62);
  --d-line: rgba(255, 255, 255, .14);
  --d-line-strong: rgba(255, 255, 255, .24);

  --r-sm: 10px;
  --r: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fts-header-h: 60px;
  --fts-header-pad: 10px;
  /* left edge of the showcase's centre card, used to park the arrows */
  --fts-card-edge: 14%;
}

body {
  font-family: var(--font-body);
}

/* ---------- 01  Typography helpers --------------------------------------- */
/* Applied to the Elementor Heading widget via its CSS Classes field. The
   original display face is Inter Tight with a tight negative tracking that
   Elementor's typography panel cannot express as a single reusable token. */
/* .display in the source: clamp(36px,4.9vw,56px) / 1.04 / -.035em / 700.
   The size stays fluid here because Elementor can only step at breakpoints. */
.fts-display,
.elementor .fts-display .elementor-heading-title{
  font-family: var(--font-display);
  font-size: clamp(36px, 4.9vw, 56px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
}

/* .eyebrow in the source: body face, 13px / 600 / .15em, dot before */
.fts-eyebrow,
.elementor .fts-eyebrow .elementor-heading-title{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* The yellow rule under "deadlines." in the H1. */
.fts-underline-y {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 6px;
  padding-bottom: 2px;
}

/* Hello Elementor's theme.css carries `.page-content a{text-decoration:underline}`,
   which underlined card headings, list links and buttons alike. The source sets
   `a{text-decoration:none}` globally, so this restores that across the page
   rather than exempting one widget at a time. */
.page-content a,
.page-content a:hover,
.page-content a:focus {
  text-decoration: none;
}

/* ---------- 02  Topbar --------------------------------------------------- */
.fts-topbar {
  background: var(--ink-2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Elementor gives every child container width:100%, which in a horizontal bar
   makes one child claim the whole row and crush its siblings to zero. In these
   two bars the children size to their content and the nav absorbs the slack.
   Both container shapes are covered so the rule survives a boxed/full switch. */
.fts-topbar .e-con-inner > .elementor-element,
.fts-header__in > .elementor-element,
.fts-header__in > .e-con-inner > .elementor-element {
  width: auto;
  max-width: none;
}

.fts-header__in .fts-nav {
  flex: 1 1 auto;
}

/* --- topbar contact pair -------------------------------------------------
   Email and WhatsApp are one icon-list. The source spaces them 12px apart and
   gives each link its own small hit area that fills yellow on hover, taking
   the label and the glyph to ink with it. */
/* The 12px between the two contact links comes from the widget's own
   spacing control, so it stays editable; the row must not add to it here. */
.fts-topbar .fts-topbar__l .elementor-icon-list-items {
  display: flex;
  align-items: center;
  gap: 0;
}

.fts-topbar .fts-topbar__l .elementor-icon-list-item {
  margin: 0;
  padding: 0;
}

.fts-topbar .fts-topbar__l .elementor-icon-list-item > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 6px;
  line-height: 23px;
  color: rgba(255, 255, 255, .78);
  transition: background .18s var(--ease), color .18s var(--ease);
}

.fts-topbar .fts-topbar__l .elementor-icon-list-item > a:hover {
  background: var(--yellow);
  color: var(--ink);
}

/* The glyph and the label both follow the link colour so one hover covers the
   whole pill. Elementor paints an explicit colour on the label and on the
   icon, which outranks a plain "inherit" — hence the .elementor prefix and the
   matching hover pair. Without them the label and glyph stay white on the
   yellow ground and the pill is unreadable. */
.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-icon,
.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-text {
  color: inherit;
  transition: color .18s var(--ease);
}

.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-item > a:hover .elementor-icon-list-icon,
.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-item > a:focus-visible .elementor-icon-list-icon,
.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
  color: var(--ink);
}

/* The icon-list widget prints its own per-element rule for the glyph —
   .elementor-54 .elementor-element.elementor-element-ftstbl01
   .elementor-icon-list-icon svg { fill: rgba(255,255,255,.78) } — which ties
   this file on specificity (0,4,1) and so pinned the envelope and the
   WhatsApp mark to the idle white on every state, including the yellow
   hover. Routing these through the list item outranks it, and the glyph
   follows the label to ink with the rest of the pill. Colour only: the 16px
   footprint is unchanged, so nothing shifts. */
.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-item > a .elementor-icon-list-icon svg {
  fill: currentColor;
  width: 16px;
  height: 16px;
  transition: fill .18s var(--ease);
}

.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg,
.elementor .fts-topbar .fts-topbar__l .elementor-icon-list-item > a:focus-visible .elementor-icon-list-icon svg {
  fill: var(--ink);
}

/* ---------- 03  Header island -------------------------------------------- */
/* A translucent island rather than a full-bleed band, so the hero reads as
   its own surface underneath instead of merging into the header. */
.fts-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  padding-block: var(--fts-header-pad);
  transition: padding-block .3s var(--ease);
}

/* The island is a centred 1200px box, not a full-bleed band: its left edge
   lines up with the logo and its right edge with the CTAs.

   Ground, border, radius and shadow are set on the container in Elementor so
   the editor shows the same island the front end does. Only the frosted
   backdrop stays here — no Elementor control can express it. */
/* The island and the bar above it are dark grounds, so everything inside
   them inherits light text. The button system reads `inherit`, which is how
   one pair of rules covers buttons on black and on white alike. */
.fts-topbar,
.fts-header__in { color: #fff; }

.fts-header__in {
  min-height: var(--fts-header-h);
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
  -webkit-backdrop-filter: saturate(165%) blur(16px);
  backdrop-filter: saturate(165%) blur(16px);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

@supports not (backdrop-filter: blur(4px)) {
  .fts-header__in { background: rgba(16, 16, 16, .96); }
}

.fts-header.is-stuck {
  padding-block: 9px;
}

/* the extra .elementor puts the scrolled state ahead of the container's own
   generated background rule, which is otherwise a tie it would lose */
.elementor .fts-header.is-stuck .fts-header__in {
  background: rgba(12, 12, 12, .88);
  border-color: rgba(255, 255, 255, .14);
}

@supports not (backdrop-filter: blur(4px)) {
  .fts-header__in {
    background: rgba(16, 16, 16, .96);
  }
}

/* --- navigation items ----------------------------------------------------
   The source nav uses a soft 8px pill on hover and on the current page.
   HFE ships square items, so the radius is restored here for every state. */
.fts-nav .hfe-menu-item,
.fts-nav .hfe-sub-menu-item {
  border-radius: 8px;
}

/* --- dropdown panel ------------------------------------------------------
   Each entry is a title with a muted subtitle beneath it. HFE lays the anchor
   out inline, which put the two on one line, so the anchor becomes a block. */
.fts-nav .sub-menu .hfe-sub-menu-item {
  display: block;
  line-height: 1.3;
}

.fts-menu-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, .42);
}

/* "All Services" / "All Work" read as the parent of the group */
.fts-nav .sub-menu li:first-child .hfe-sub-menu-item {
  color: var(--yellow);
}

/* --- the Partnership chip ------------------------------------------------
   A quiet yellow keyline on the header's own ground. The nav item and any
   Button widget carrying .fts-btn-partner share one definition, so the two
   can never drift apart. Sizing comes from the nav item's own metrics
   (8px radius, 12px/16px, 15px/500) rather than the generic button scale. */
/* --- the Partnership chip: tone ----------------------------------------
   The look only - keyline, label colour, transition. No metrics live here,
   so the treatment can travel to a button of any size without resizing it
   to the nav item. Scale is added by the modifiers below. */
.fts-nav .hfe-nav-menu > li.fts-nav-partner > .hfe-menu-item,
.elementor .fts-btn-partner.elementor-widget-button .elementor-button {
  border: 1px solid rgba(255, 200, 0, .3);
  color: var(--yellow) !important;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

.fts-nav .hfe-nav-menu > li.fts-nav-partner > .hfe-menu-item:hover,
.elementor .fts-btn-partner.elementor-widget-button .elementor-button:hover,
.elementor .fts-btn-partner.elementor-widget-button .elementor-button:focus-visible {
  background: rgba(255, 200, 0, .1) !important;
  border-color: rgba(255, 200, 0, .5);
}

/* the arrow, if the button has one, stays with the label in both states */
.elementor .fts-btn-partner.elementor-widget-button .elementor-button svg { fill: currentColor; }

/* --- scale: the header nav chip -----------------------------------------
   The nav item metrics, and the panel fill that only it and the header
   button beside it wear. */
.fts-nav .hfe-nav-menu > li.fts-nav-partner > .hfe-menu-item,
.elementor .fts-btn-nav-chip.fts-btn-partner.elementor-widget-button .elementor-button {
  background: var(--ink-2);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.125;
}

/* --- the chip as a reusable button --------------------------------------
   Ground and corner only, deliberately with no scale of its own: a button
   wearing this keeps the padding and type its own position calls for, so
   the treatment can reach a large action button without shrinking it.
   .fts-btn-chip--sm adds the hero toggle compact scale, which is the one
   place that wants to sit at the Image Editing baseline beside it. */
.elementor .fts-btn-chip.fts-btn-partner.elementor-widget-button .elementor-button {
  background: transparent;
  border-radius: 9px;
}

.elementor .fts-btn-chip--sm.fts-btn-partner.elementor-widget-button .elementor-button {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* --- region flags --------------------------------------------------------
   Elementor Free has no flag icons and SVG uploads stay disabled, so the
   three region links are one small HTML widget carrying inline SVG. */
.fts-regions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fts-regions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  opacity: .72;
  text-decoration: none;
  transition: opacity .22s var(--ease), color .22s var(--ease);
}

.fts-regions a:hover {
  opacity: 1;
  color: #fff;
}

.fts-flag {
  width: 20px;
  height: 14px;
  border-radius: 2.5px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset;
  overflow: hidden;
  display: block;
}

/* ---------- 04  Hero background layers ----------------------------------- */
/* Four decorative layers plus the base. Elementor Containers expose one
   background and one overlay, and its gradient control tops out at two
   stops, so the whole stack lives here. */
.fts-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--d-text);
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 200, 0, .15), rgba(255, 170, 0, .05) 26%, transparent 48%),
    radial-gradient(circle at 4% 112%, rgba(255, 255, 255, .055), transparent 38%),
    linear-gradient(180deg, transparent 62%, rgba(255, 200, 0, .055) 100%),
    radial-gradient(125% 90% at 50% -14%, #1C1C1A 0%, #111110 38%, #0B0B0B 68%, var(--ink) 100%),
    var(--ink);
  /* the header island floats over the hero */
  margin-top: calc(-1 * (var(--fts-header-h) + (var(--fts-header-pad) * 2)));
  padding-top: calc(var(--fts-header-h) + (var(--fts-header-pad) * 2) + clamp(20px, 2.4vw, 36px)) !important;
}

/* dot field across the top, fading downward */
.fts-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56%;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 42%, transparent 88%);
}

/* outlined aperture rings — a lens motif, not decoration for its own sake */
.fts-hero::after {
  content: "";
  position: absolute;
  right: 1%;
  top: 2%;
  width: min(48%, 580px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='196'/%3E%3Ccircle cx='200' cy='200' r='150'/%3E%3Ccircle cx='200' cy='200' r='104'/%3E%3Cpath d='M200 4v392M4 200h392'/%3E%3Cpath d='M62 62l276 276M338 62L62 338' opacity='.55'/%3E%3C/svg%3E");
}

/* The showcase lives in a Shortcode widget. Elementor collapses that widget
   and its container to zero height, which the hero's overflow then clipped —
   on mobile that hid the image entirely. Both are pinned to their content. */
.fts-hero .elementor-widget-shortcode,
.fts-hero .elementor-widget-shortcode > .elementor-widget-container,
.fts-hero .elementor-widget-shortcode .elementor-shortcode {
  height: auto !important;
  min-height: 0;
  width: 100%;
}

.fts-hero__in .e-con-inner > .e-con {
  height: auto !important;
}

/* ---------- 05  Service toggle ------------------------------------------- */
/* A segmented pill group: one bordered track holding two buttons, not two
   loose buttons sitting side by side. */
.fts-svc-toggle {
  display: inline-flex !important;
  width: auto !important;
  gap: 6px;
  padding: 5px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--d-line);
}

.fts-svc-toggle .elementor-widget-button {
  width: auto;
}

/* ---------- 06  Price signal --------------------------------------------- */
/* Editorial, not a promo sticker: a yellow keyline rather than a boxed badge. */
.fts-price-signal {
  position: relative;
  padding-left: 18px;
}

.fts-price-signal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--yellow);
}

.fts-price-signal .fts-price-lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}

.fts-price-signal .fts-price-v {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.2;
  color: #fff;
}

.fts-price-signal .fts-price-v em {
  font-style: normal;
  color: var(--yellow);
}

.fts-price-signal .fts-price-unit {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .68);
}

/* ---------- 07  Showcase carousel ---------------------------------------- */
/* Three frames on screen at once: the active one centred and sharp, its
   neighbours scaled back, blurred and dimmed at the edges. */
.showcase {
  position: relative;
}

.showcase__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.02;
  max-height: min(62vh, 560px);
}

/* Soft yellow rim-light behind the frame. Held close to the centre card
   rather than spread across the column, so it reads as light coming off the
   photograph instead of a wash over the whole hero. */
.showcase::before {
  content: "";
  position: absolute;
  inset: 4% 16% 6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 200, 0, .17), transparent 70%);
}

.showcase__slide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 72%;
  margin-left: -36%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--ink-3);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transform: translateX(0) scale(.82);
  transition: transform .9s var(--ease), opacity .9s var(--ease),
              filter .9s var(--ease), visibility .9s var(--ease);
}

.showcase__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 3;
  transform: translateX(0) scale(1);
  filter: none;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.showcase__slide.is-prev,
.showcase__slide.is-next {
  opacity: .4;
  visibility: visible;
  z-index: 2;
  filter: blur(3px) saturate(.75);
}

.showcase__slide.is-prev { transform: translateX(-76%) scale(.86); }
.showcase__slide.is-next { transform: translateX(76%) scale(.86); }

.showcase__slide:not(.is-active) { pointer-events: none; }

/* The hero stage presents finished work, so the comparison chrome that the
   portfolio needs is switched off here: the frame carries its own 4/5 ratio
   from .ba, which would leave the card part-empty, and the after layer is
   clipped to half its width. Both have to be released or the slide shows a
   blank band down one side instead of the photograph. */
.showcase__slide .ba {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  margin: 0;
  border-radius: 0;
  background: none;
}

.showcase .ba__layer--after { clip-path: none; }
.showcase .ba__layer--before { display: none; }
.showcase .ba__tag,
.showcase .ba__line,
.showcase .ba__grip { display: none; }
.showcase .ba__range { cursor: default; }

.showcase__slide .ba__layer,
.showcase__slide .ba__layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.showcase__slide .ba__layer img {
  object-fit: cover;
  display: block;
}

/* the floating HUD, inset to the width of the centre frame */
.showcase__hud {
  position: absolute;
  inset: 0 14%;
  z-index: 6;
  pointer-events: none;
}

.showcase__hud::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(8, 8, 8, .62), transparent);
}

.showcase__hud::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(8, 8, 8, .78), transparent);
}

/* The label belongs to the photograph, not to the stage under it. It is
   lifted well clear of the frame's bottom edge and set a step smaller than
   the source pill, so it reads as a caption sitting on the image. */
.showcase__label {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 11px;
  border-radius: 100px;
  background: rgba(12, 12, 12, .52);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}

.showcase__label.is-swapping {
  opacity: 0;
  transform: translateY(7px);
}

.showcase__label i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, .18);
}

.showcase__meta {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.showcase__dots {
  display: flex;
  gap: 6px;
  flex: none;
  pointer-events: auto;
}

/* Elementor's global kit styles bare <button> elements, which would turn these
   into yellow blocks — the extra class raises specificity above it. */
.showcase .showcase__dot {
  width: 7px;
  height: 7px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  border: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}

.showcase .showcase__dot:hover { background: rgba(255, 255, 255, .6); }

.showcase .showcase__dot.is-active {
  background: var(--yellow);
  width: 20px;
  border-radius: 100px;
}

/* --- manual navigation ---------------------------------------------------
   Bare chevrons, not buttons. The source has no arrows at all, so they are
   kept as quiet as possible: no disc, no border, no ground — just the mark,
   parked symmetrically against the two edges of the centre frame. Hover adds
   a drop-shadow and nothing else. */
.showcase .showcase__arrow {
  position: absolute;
  top: 50%;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: color .22s var(--ease), filter .22s var(--ease), transform .22s var(--ease);
}

.showcase .showcase__arrow:hover,
.showcase .showcase__arrow:focus-visible {
  background: none;
  border: 0;
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(255, 200, 0, .6)) drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}

/* symmetric: both sit the same distance inside the centre frame's edges */
.showcase .showcase__arrow--next { right: calc(var(--fts-card-edge) + 6px); }

.showcase .showcase__arrow:hover.showcase__arrow--next { transform: translateY(-50%) translateX(3px); }

.showcase .showcase__arrow svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}

/* ---------- 07a  Section system ------------------------------------------
   One set of rules shared by every homepage section, so no section needs
   styling of its own beyond its layout container. */
:root {
  --paper: #FFFFFF;
  --paper-2: #F5F5F3;
  --paper-3: #EDEDEA;
  --text: #101010;
  --muted: #5E5E5E;
  --line: rgba(10, 10, 10, .10);
  --line-strong: rgba(10, 10, 10, .16);
  --section-y: clamp(72px, 8vw, 124px);
  --r-lg: 20px;
}

.fts-section { padding-block: var(--section-y); }
.fts-section--tight { padding-block: clamp(52px, 5.5vw, 80px); }

/* A short band: enough air to separate it from its neighbours, no more.
   Used where the content is a single compact block — the FAQ list and the
   closing call to action both sat on far too much empty space. */
.elementor .fts-section--short { padding-block: clamp(44px, 4.4vw, 68px); }
.elementor .fts-section--short > .e-con-inner { padding-block: 0; }

/* --- Section ground system ----------------------------------------------
   Three grounds only: a major dark band, a major light band, and a quiet
   tint for the small supporting bands between them. That is the whole
   rhythm — no per-section colours.

   The colour itself is set on the Elementor container, not here, so it stays
   editable and the editor shows the same ground as the front end. These
   classes only carry what a colour picker cannot: the text-colour context a
   dark ground needs, and the optional depth wash. */
.fts-bg-dark  { color: var(--d-text); }

/* a barely-there vertical lift, so a flat picker colour still reads as a
   designed band rather than a slab. Sits behind content, never over it. */
.fts-bg-dark::after,
.fts-bg-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.fts-bg-dark::after {
  background: radial-gradient(115% 80% at 50% 0%, rgba(255, 255, 255, .045) 0%, transparent 58%);
}

.fts-bg-tint::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, transparent 45%, rgba(255, 255, 255, .5) 100%);
}

/* display face on any heading that opts in */
.elementor .fts-h2 .elementor-heading-title,
.elementor .fts-h3 .elementor-heading-title,
.elementor .fts-h5 .elementor-heading-title,
.elementor .fts-h6 .elementor-heading-title{
  font-family: var(--font-display);
  font-weight: 700;
}

.elementor .fts-h2 .elementor-heading-title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
.elementor .fts-h3 .elementor-heading-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; letter-spacing: -.025em; }
.elementor .fts-h5 .elementor-heading-title { font-size: 20px; line-height: 1.35; letter-spacing: -.015em; font-weight: 600; }
.elementor .fts-h6 .elementor-heading-title { font-size: 18px; line-height: 1.4; letter-spacing: -.01em; font-weight: 600; }

.fts-h2 em, .fts-h3 em, .fts-rail-title em { font-style: normal; color: var(--yellow); }

/* the eyebrow carries a small yellow dot in the source */
.elementor .fts-eyebrow .elementor-heading-title{
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.elementor .fts-eyebrow .elementor-heading-title::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}

.fts-lead { font-size: 18px; line-height: 1.6; color: var(--muted); }
.fts-body { font-size: 16px; line-height: 1.65; color: var(--muted); }

/* --- dark-surface variants ----------------------------------------------
   The source carries a full `.bg-dark .x` layer. Porting it here is what keeps
   dark sections correct without colouring each widget by hand. */
/* Body copy on a dark ground. This is deliberately broad: every widget that
   renders running text gets the dark-ground muted tone, so a section can be
   switched between light and dark from Elementor without anyone having to
   recolour its widgets one at a time. That per-widget colouring is exactly
   what made the page impossible to reskin before. */
.fts-bg-dark .fts-lead,
.fts-bg-dark .fts-body,
.fts-bg-dark .fts-card-body,
.fts-bg-dark .elementor-widget-text-editor,
.fts-bg-dark .elementor-widget-text-editor p,
.elementor .fts-bg-dark .elementor-widget-icon-list .elementor-icon-list-text { color: var(--d-muted); }

/* anything the design system has already spoken for keeps its own colour */
.fts-bg-dark .fts-tst .fts-card-body,
.fts-bg-dark .fts-tst-by .fts-tst-name p,
.fts-bg-dark .fts-price-list .elementor-icon-list-text { color: inherit; }

.elementor .fts-bg-dark .fts-display .elementor-heading-title { color: #fff; }
.elementor .fts-bg-dark .fts-eyebrow .elementor-heading-title { color: rgba(255, 255, 255, .55); }
.elementor .fts-bg-dark .fts-h2 .elementor-heading-title,
.elementor .fts-bg-dark .fts-h3 .elementor-heading-title { color: #fff; }

/* A review card is a white card wherever it sits. The section ground never
   repaints it — that is the mistake this whole pass exists to undo. */

/* ---------- 07a-0  Decorative layer --------------------------------------
   Low-opacity production motifs from the source: a warm glow, crop corners,
   a sparse dot field, an aperture arc and a timeline hairline. Each section
   carries one <div class="fts-deco fts-deco--x"> so these never compete with
   the section's own pseudo-elements. Decorative only, always behind content. */
.fts-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.fts-deco::before,
.fts-deco::after { content: ""; position: absolute; pointer-events: none; }

/* warm glow, top-right by default */
.fts-deco--glow::before {
  right: -12%;
  top: -32%;
  width: 56%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(255, 200, 0, .10), transparent 68%);
}

.fts-bg-dark .fts-deco--glow::before {
  background: radial-gradient(circle at 50% 50%, rgba(255, 200, 0, .13), transparent 70%);
}

.fts-deco--glow-l::before { right: auto; left: -14%; top: auto; bottom: -30%; width: 48%; }

/* sparse dot field, fading diagonally */
.fts-deco--dots::after {
  left: 0;
  top: 0;
  width: 46%;
  height: 58%;
  background-image: radial-gradient(rgba(10, 10, 10, .13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(150deg, #000, transparent 68%);
  mask-image: linear-gradient(150deg, #000, transparent 68%);
}

.fts-bg-dark .fts-deco--dots::after {
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
}

.fts-deco--dots-r::after {
  left: auto;
  right: 0;
  -webkit-mask-image: linear-gradient(210deg, #000, transparent 68%);
  mask-image: linear-gradient(210deg, #000, transparent 68%);
}

/* outlined aperture arc — the lens motif, reused sparingly */
.fts-deco--arc::before {
  right: -8%;
  top: 50%;
  width: min(46%, 560px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, .06);
  box-shadow: 0 0 0 clamp(30px, 5vw, 68px) rgba(10, 10, 10, .025);
}

.fts-bg-dark .fts-deco--arc::before {
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 clamp(30px, 5vw, 68px) rgba(255, 255, 255, .022);
}

.fts-deco--arc-l::before { right: auto; left: -10%; }

/* a single hairline rule, like a timeline scrub */
.fts-deco--rule::after {
  left: 0;
  right: 0;
  top: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10, 10, 10, .08) 22%, rgba(255, 200, 0, .28) 50%, rgba(10, 10, 10, .08) 78%, transparent);
}

.fts-bg-dark .fts-deco--rule::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08) 22%, rgba(255, 200, 0, .34) 50%, rgba(255, 255, 255, .08) 78%, transparent);
}

/* crop corners — declared last so it wins ::before where paired with a glow,
   exactly as the source cascade does */
.fts-deco--crop::before {
  right: 6%;
  top: 14%;
  left: auto;
  bottom: auto;
  width: clamp(90px, 10vw, 150px);
  aspect-ratio: 1;
  background: none;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: rgba(10, 10, 10, .07);
  border-radius: 0 12px 0 0;
}

.fts-deco--crop::after {
  left: 6%;
  bottom: 14%;
  right: auto;
  top: auto;
  width: clamp(90px, 10vw, 150px);
  aspect-ratio: 1;
  background: none;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  color: rgba(10, 10, 10, .07);
  border-radius: 0 0 0 12px;
}

.fts-bg-dark .fts-deco--crop::before,
.fts-bg-dark .fts-deco--crop::after { color: rgba(255, 255, 255, .09); }

/* the sections need a stacking context for the z-index:-1 layer to sit behind */
.fts-section { position: relative; isolation: isolate; overflow: hidden; }

/* ---------- 07a-1  Who we are -------------------------------------------- */
/* .fts-who-item padding + top keyline -> Elementor (widget Advanced) */

/* the even cells' left inset + keyline -> Elementor, per widget on whoI2/whoI4 */

/* glyph colour -> Elementor icon-box Primary Colour */

/* .fts-who-visual -> Elementor container (background, border, radius, overflow, min-height) */

/* the caption is a Text Editor pinned inside the framed image, so the picture
   stays a Container background and both remain editable in Elementor */
/* Ground, radius, padding and type -> Elementor. Only the backdrop blur stays:
   Elementor exposes no control for backdrop-filter. */
.fts-who-caption {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fts-who-caption b {
  display: block;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 5px;
}

/* the statement rail — an ink panel with a yellow spine */
.fts-rail {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* radius + keyline -> Elementor container. The ground stays here: a 3-stop
     radial with its own position and size, which Elementor's gradient control
     (2 stops, no size/position) cannot reproduce. */
  background: radial-gradient(120% 160% at 8% 0%, #1A1A18 0%, #101010 48%, var(--ink) 100%);
  color: var(--d-text);
}

/* The rail and the stats panel are dark surfaces that sit on light sections,
   so they carry the dark-ground text treatment themselves rather than
   inheriting the section's. Same rule shape as .fts-bg-dark. */
.elementor .fts-rail .elementor-widget-text-editor,
.elementor .fts-rail .elementor-widget-text-editor p,
.elementor .fts-rail .fts-body,
.elementor .fts-stats .elementor-widget-text-editor,
.elementor .fts-stats .elementor-widget-text-editor p,
.elementor .fts-stats .fts-body { color: var(--d-muted); }

/* rail heading colour -> Elementor heading Text Colour */

.fts-rail::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -60%;
  width: 44%;
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 200, 0, .15), transparent 68%);
  pointer-events: none;
}

.fts-rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: -1;
  background: linear-gradient(180deg, var(--yellow), rgba(255, 200, 0, .15));
}

/* .fts-rail-title -> Elementor heading typography. The font size uses the
   Custom unit so the fluid clamp() survives intact and stays editable. */

/* ---------- 07a-2  Client marquee ---------------------------------------- */
.fts-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}

.fts-marquee__track {
  display: flex;
  width: max-content;
  animation: fts-marquee-l 42s linear infinite;
}

/* The rail runs continuously. Pointing at it must not stop it — a client
   list that halts under the cursor reads as broken, not interactive. */

.fts-marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each slot is an Elementor Image widget, so a logo is swapped from the
   editor rather than from code. The `li` form is kept for any hand-written
   rail elsewhere on the site. */
.fts-marquee__group li,
.elementor .fts-marquee__group > .elementor-element {
  flex: 0 0 clamp(148px, 19vw, 236px);
  width: auto;
  max-width: none;
  display: grid;
  place-items: center;
  padding: 10px 18px;
  margin: 0;
}

/* greyscale plus reduced opacity keeps the marks a quiet client list;
   pointing at one brings it up without touching the animation */
.fts-marquee img,
.fts-marquee svg {
  height: clamp(30px, 3.2vw, 42px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}

.fts-marquee img:hover,
.fts-marquee svg:hover { filter: grayscale(0); opacity: .9; }

.elementor .fts-marquee__group .elementor-widget-image,
.elementor .fts-marquee__group .elementor-widget-image figure { margin: 0; }

@keyframes fts-marquee-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fts-marquee__track { animation: none; }
  .fts-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 07a-3  Before / after comparison ------------------------------
   The portfolio's drag-to-compare card. Elementor Free has no equivalent, so
   this component and its cards are rendered by [fts_portfolio]. */
.ba {
  position: relative;
  margin: 0;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-3);
  --pos: 50%;
  touch-action: pan-y;
  isolation: isolate;
}

.fts-pf .ba { aspect-ratio: 1/1; }

.ba__layer { position: absolute; inset: 0; z-index: 1; }

.ba__layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__layer--after  { clip-path: inset(0 0 0 var(--pos)); }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--yellow);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}

.ba__grip {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
  pointer-events: none;
}

.ba__grip svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ba__tag {
  position: absolute;
  top: 14px;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 6px;
  /* translucent so the frame underneath still reads through the badge,
     held high enough that the label stays legible on any image */
  background: rgba(10, 10, 10, .60);
  color: #fff;
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s var(--ease);
}

.ba__tag--b { left: 14px; }
.ba__tag--a { right: 14px; background: rgba(255, 200, 0, .80); color: var(--ink); }
.ba__tag.is-off { opacity: 0; }

.ba__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* portfolio card shell */
.fts-pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.fts-pf {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.fts-pf:hover {
  border-color: var(--line-strong);
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .45);
}

.fts-pf__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
}

.fts-pf__foot h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0;
}

.fts-pf__foot small {
  display: block;
  font-size: 14px;
  color: #8A8A8A;
  font-weight: 500;
  margin-top: 3px;
}

.fts-tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: gap .2s var(--ease);
}

.fts-tlink:hover { gap: 11px; }

/* Only the shortcode-rendered links carry a stroked arrow; the Button widget
   uses a filled Font Awesome glyph, which fill:none would erase. */
a.fts-tlink > svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
}

@media (max-width: 1024px) {
  .fts-pf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .fts-pf-grid { grid-template-columns: 1fr; }
}

/* ---------- 07a-3b  Shared icon box --------------------------------------
   .ico-box in the source: 56px tile, 12px radius, paper-2 ground, ink glyph;
   it flips to a translucent white tile on dark grounds and to solid yellow on
   hover. Shared by service cards, process steps and partnership cards. */
.fts-ico-box .elementor-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

/* The glyph inherits the tile's colour rather than Elementor's per-widget
   fill, so the dark-surface and hover variants recolour it in one place.
   The doubled class outranks Elementor's own
   .elementor-widget-icon.elementor-view-default .elementor-icon svg. */
.fts-ico-box.elementor-widget-icon .elementor-icon svg,
.fts-ico-box.elementor-widget-icon .elementor-icon i,
.fts-ico-box .elementor-icon svg,
.fts-ico-box .elementor-icon i {
  width: 26px;
  height: 26px;
  font-size: 24px;
  fill: currentColor;
  color: inherit;
}

/* the service card's tile sits a shade brighter than the generic dark tile */
.elementor .fts-bg-dark .fts-svc .fts-ico-box .elementor-icon {
  background: rgba(255, 255, 255, .07);
}

.fts-bg-dark .fts-ico-box .elementor-icon {
  background: rgba(255, 255, 255, .04);
  border-color: var(--d-line);
  color: var(--d-text);
}

/* Elementor fills icon-list glyphs from its global accent colour. Every list
   in this design takes its glyph colour from the list itself, so the fill
   follows the text colour instead. */
.elementor [class*="fts-"] .elementor-icon-list-icon svg { fill: currentColor; }

/* --- icon hover ----------------------------------------------------------
   One behaviour everywhere a tile sits inside a card: the tile eases back a
   little and lifts on a soft shadow. It keeps its own colour and its own
   footprint — no flooding the box with yellow, no growing into a bar. */
.fts-ico-box .elementor-icon {
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}

.fts-svc:hover .fts-ico-box .elementor-icon,
.fts-step:hover .fts-ico-box .elementor-icon,
.fts-why__item:hover .fts-ico-box .elementor-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

/* the partnership tile eases back slightly rather than growing, per your note,
   but takes the same yellow the source uses */
.fts-part:hover .fts-ico-box .elementor-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  transform: scale(.96);
  box-shadow: 0 10px 22px -10px rgba(255, 200, 0, .7);
}

.fts-bg-dark .fts-svc:hover .fts-ico-box .elementor-icon,
.fts-bg-dark .fts-step:hover .fts-ico-box .elementor-icon,
.fts-bg-dark .fts-part:hover .fts-ico-box .elementor-icon {
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .8);
}

/* the wrapper itself never moves — only the tile inside it does */
.fts-part .fts-ico-box,
.fts-step .fts-ico-box,
.fts-svc .fts-ico-box { transform: none; }

/* the accent variant: a soft yellow tile, used by the partnership cards */
.elementor .fts-ico-box.fts-ico-box--accent .elementor-icon {
  background: var(--yellow-soft);
  border-color: rgba(255, 200, 0, .42);
  color: var(--ink);
}

.elementor .fts-bg-dark .fts-ico-box.fts-ico-box--accent .elementor-icon {
  background: rgba(255, 200, 0, .13);
  border-color: rgba(255, 200, 0, .32);
  color: var(--yellow);
}

/* --- card lighting ------------------------------------------------------
   The source lights a card's edge on hover rather than flooding it: a thin
   gradient ring, masked to the border only, fading in while the card lifts.
   Shared by the process steps, the trust grid and the partnership cards. */
.fts-lit {
  position: relative;
  isolation: isolate;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.fts-lit::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: -1;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,
    var(--lit-a, rgba(255, 200, 0, .85)),
    var(--lit-b, rgba(90, 140, 255, .55)) 45%,
    var(--lit-c, rgba(255, 110, 90, .5)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.fts-lit:hover::after,
.fts-lit:focus-within::after { opacity: 1; }
.fts-lit:hover { transform: translateY(-3px); }

.fts-lit--y { --lit-a: rgba(255, 200, 0, .9);  --lit-b: rgba(255, 200, 0, .35); --lit-c: rgba(255, 160, 0, .5); }
.fts-lit--b { --lit-a: rgba(90, 140, 255, .75); --lit-b: rgba(255, 200, 0, .5);  --lit-c: rgba(90, 140, 255, .35); }
.fts-lit--r { --lit-a: rgba(255, 110, 90, .7);  --lit-b: rgba(255, 200, 0, .55); --lit-c: rgba(255, 110, 90, .3); }

/* --- trust grid (Why agencies trust us) --------------------------------- */
.fts-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.fts-why__item {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.fts-bg-dark .fts-why__item {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
}

.elementor .fts-why__item .fts-ico-box { margin-bottom: 18px; }
.elementor .fts-why__item .elementor-heading-title { margin-bottom: 8px; }
.elementor .fts-why__item .fts-card-body { font-size: 15px; }

@media (max-width: 1024px) { .fts-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .fts-why { grid-template-columns: 1fr; } }

/* the centred section divider: a rule, the title, a rule */
.fts-process-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
}

.fts-process-divider::before,
.fts-process-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.fts-bg-dark .fts-process-divider::before,
.fts-bg-dark .fts-process-divider::after { background: var(--d-line); }

/* ---------- 07a-3c  Text link (.tlink) ----------------------------------- */
.elementor .fts-tlink.elementor-widget-button .elementor-button{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: gap .22s var(--ease), color .22s var(--ease);
}

.elementor .fts-tlink.elementor-widget-button .elementor-button:hover { gap: 11px; background: none; }
.elementor .fts-bg-dark .fts-tlink.elementor-widget-button .elementor-button { color: #fff; }
.elementor .fts-tlink.elementor-widget-button .elementor-button svg,
.elementor .fts-tlink.elementor-widget-button .elementor-button i {
  width: 15px;
  height: 15px;
  font-size: 14px;
  fill: currentColor;
}

/* ---------- 07a-4  Service cards ------------------------------------------
   A Container per card holding Icon + Heading + Text + a "More details" link,
   so every part stays editable. The shell, its accent line and the dark
   surface variant come from the source stylesheet. */
.fts-svc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px 22px;
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease), background .3s var(--ease);
}

/* dark-surface variant — the services section runs on .fts-bg-dark */
.fts-bg-dark .fts-svc {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border-color: rgba(255, 255, 255, .10);
}

.fts-bg-dark .fts-svc:hover {
  border-color: rgba(255, 200, 0, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .9);
}



/* the video card keeps its own yellow tile rather than the generic dark one */
.fts-bg-dark .fts-svc--video .fts-ico-box .elementor-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  width: 60px;
  height: 60px;
}

.fts-bg-dark .fts-svc--video:hover .fts-ico-box .elementor-icon {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.fts-svc::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, var(--yellow), rgba(255, 200, 0, .25) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}

.fts-svc:hover::before { transform: scaleX(1); }

.fts-svc:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px -30px rgba(0, 0, 0, .55);
  border-color: var(--line-strong);
}

/* card typography — .h5 title, .body copy at 15px, both flipping on dark */
.elementor .fts-svc h3,
.elementor .fts-svc h3 a {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 20px 0 8px;
}

.fts-svc .fts-card-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
}

.fts-bg-dark .fts-svc h3,
.fts-bg-dark .fts-svc h3 a { color: #fff; }
.fts-bg-dark .fts-svc .fts-card-body { color: var(--d-muted); }

.fts-svc .fts-tlink { margin-top: 20px; }

/* --- service card: the source proportion --------------------------------
   The source card is .svc{display:flex;flex-direction:column;gap:0} and
   spaces its rows with margins alone, which lands it at 287x280 - square.
   An Elementor container inherits the kit gap (20px) instead, and three
   gaps add 60px, stretching the same content to 287x330. Zeroing the gap
   here hands the spacing back to the margins that are already in place.
   The feature variants keep their own gap: --support is a two-column grid
   whose 22px column gap is structural. */
.elementor .fts-svc:not(.fts-svc--support):not(.fts-svc--video):not(.fts-svc--prompt) {
  --row-gap: 0px;
  --column-gap: 0px;
  gap: 0;
}

/* the source link sits on the body line-height, which is the last 10px of
   the card height. Scoped to the service card so no other tlink moves. */
.elementor .fts-svc .fts-tlink.elementor-widget-button .elementor-button {
  line-height: 1.65;
}

/* --- service card hover: the tile and glyph hold -------------------------
   On a light section the source fills the tile yellow, but on a dark one
   .bg-dark .svc .ico-box ties .svc:hover .ico-box on specificity and is
   declared later, so it wins: the translucent tile and the white glyph
   both hold through hover. Without this the shared hover rule was taking
   the glyph to ink. The lift, the yellow keyline and the accent line are
   untouched - they are the whole hover effect on a dark section. The two
   feature cards are excluded; their yellow tile is their own treatment. */
.elementor .fts-bg-dark .fts-svc:not(.fts-svc--video):not(.fts-svc--support):hover .fts-ico-box .elementor-icon {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}

/* the arrow steps right when the card is hovered, not only the link:
   .svc:hover .tlink{gap:11px} in the source, a 4px shift from 7px. */
/* The text-to-arrow spacing is NOT the button gap: the button holds a
   single child, .elementor-button-content-wrapper, and Elementor prints
   the icon spacing on that wrapper per widget at (0,5,0) -
   "...elementor-element-sc9l .elementor-button .elementor-button-content-
   wrapper{gap:7px}". A gap set on the button itself therefore moves
   nothing. These target the wrapper and outrank that rule, which is what
   actually produces the source .tlink:hover{gap:11px} nudge: the wrapper
   is row-reverse, so the label holds its left edge and only the arrow
   steps right, by 4px. */
.elementor .fts-tlink.elementor-widget-button .elementor-button .elementor-button-content-wrapper {
  transition: gap .22s var(--ease);
}

.elementor .fts-svc:hover .fts-tlink.elementor-widget-button .elementor-button .elementor-button-content-wrapper,
.elementor .fts-tlink.elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper,
.elementor .fts-tlink.elementor-widget-button .elementor-button:focus-visible .elementor-button-content-wrapper {
  gap: 11px;
}

/* the video card spans two columns and carries a "Motion & film" flag */
/* The video card is two columns wide and carries a solid yellow tile, but its
   ground is the same translucent gradient as every other card on the band —
   the source never gives it an ink panel of its own. */
.elementor .fts-svc--video { grid-column: span 2; padding: 30px 28px; }

/* --- video feature card: the source layout ------------------------------
   The source is .svc--video{display:grid;grid-template-columns:auto 1fr;
   gap:0 24px;align-items:start} with the tile spanning the four content
   rows beside it - 591x325 rendered. As an Elementor flex container the
   tile stacked above the copy and the kit gap added 20px between every
   row, stretching the same content to 591x422. Because both feature cards
   share one grid row, that also dragged the support card to 422. */
.elementor .fts-svc--video {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 24px;
  align-items: start;
}

.elementor .fts-svc--video > .fts-ico-box { grid-row: span 4; }

/* the heading loses the stacked cards 20px lead-in, as in the source */
.elementor .fts-svc--video .elementor-heading-title { margin: 0 0 8px; }
.elementor .fts-svc--video .fts-tlink { margin-top: 18px; }

/* the flag opens the copy column level with the tile, as in the source:
   .svc__flag{margin-bottom:10px} and no lead-in above it */
.elementor .fts-svc--video .fts-svc__flag { margin: 0 0 10px; }

/* --- support feature card: dark treatment -------------------------------
   NOTE: the source tints this card warm - .bg-dark .svc--support carries
   linear-gradient(rgba(255,200,0,.10), rgba(255,200,0,.03)) on a
   rgba(255,200,0,.26) keyline. Removing it is a deliberate departure from
   the original, made on request, so the two feature cards read as one
   pair. The values below are the dark card treatment the video card uses,
   so the two now match exactly. The accent icon and the yellow link stay,
   which is where the source puts yellow on this card. */
.elementor .fts-bg-dark .fts-svc--support {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border-color: rgba(255, 255, 255, .10);
}

.elementor .fts-bg-dark .fts-svc--support:hover {
  border-color: rgba(255, 200, 0, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
}

/* a solid yellow tile with an ink glyph — the one card that leads in the
   brand colour. Placed after the generic dark tile so it wins the tie. */
.elementor .fts-bg-dark .fts-svc--video .fts-ico-box .elementor-icon,
.elementor .fts-svc--video .fts-ico-box .elementor-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

.elementor .fts-svc--video:hover .fts-ico-box .elementor-icon {
  background: #fff;
  border-color: #fff;
}

.elementor .fts-svc--video .fts-ico-box .elementor-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

.elementor .fts-svc--video:hover .fts-ico-box .elementor-icon {
  background: #fff;
  border-color: #fff;
}

.fts-svc--video .fts-ico-box .elementor-icon { width: 60px; height: 60px; }

.fts-svc--video .fts-card-body { font-size: 15px; }

/* the video card link is white in the source, like every other card link */

/* a thin ring bleeding off the top-right corner, as in the source */
.fts-svc--video::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  pointer-events: none;
}

.elementor .fts-svc__flag .elementor-heading-title{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yellow);
}

.elementor .fts-svc__flag .elementor-heading-title::before{
  content: "";
  width: 18px;
  height: 2px;
  background: var(--yellow);
}

/* Creative Production Support — a category card, distinct but not dominant.
   Two columns so the icon sits beside the stack rather than above it. */
.fts-svc--support {
  grid-column: span 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 22px;
  align-items: start;
  padding: 30px 28px;
  background: var(--paper-2);
  border-color: var(--line-strong);
}

.fts-svc--support > .fts-ico-box { grid-row: span 4; }
.elementor .fts-svc--support .elementor-heading-title { margin: 0 0 8px; }
.fts-svc--support .fts-card-body { font-size: 15px; }
.fts-svc--support .fts-tlink { margin-top: 18px; }

.fts-bg-dark .fts-svc--support {
  background: linear-gradient(180deg, rgba(255, 200, 0, .10), rgba(255, 200, 0, .03));
  border-color: rgba(255, 200, 0, .26);
}

.fts-bg-dark .fts-svc--support:hover { border-color: rgba(255, 200, 0, .5); }

.fts-bg-dark .fts-svc--support .fts-ico-box .elementor-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

.elementor .fts-bg-dark .fts-svc--support .fts-tlink.elementor-widget-button .elementor-button { color: var(--yellow); }

/* the capability chips under the support card copy */
.elementor .fts-svc-tags .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 7px; }

.elementor .fts-svc-tags .elementor-icon-list-item{
  margin: 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.elementor .fts-svc-tags .elementor-icon-list-text { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.elementor .fts-bg-dark .fts-svc-tags .elementor-icon-list-item{
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}

.elementor .fts-bg-dark .fts-svc-tags .elementor-icon-list-text { color: rgba(255, 255, 255, .78); }

@media (max-width: 680px) {
  /* both feature cards drop to one column and put the tile back on top, as
     the source does at this width */
  .elementor .fts-svc--support,
  .elementor .fts-svc--video { grid-column: span 1; grid-template-columns: 1fr; gap: 0; }
  .fts-svc--support > .fts-ico-box,
  .elementor .fts-svc--video > .fts-ico-box { grid-row: auto; margin-bottom: 18px; }
}

/* The source card is 26px 24px 22px with a 56px tile. Earlier passes shrank
   both to force a squarer tile; the brief is now to follow the HTML, so the
   source proportions are restored and the description is capped at three
   lines only so a row of cards lands on one height. */
.elementor .fts-svc .fts-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.elementor .fts-svc--support .fts-card-body p,
.elementor .fts-svc--video .fts-card-body p,
.elementor .fts-svc--prompt .fts-card-body p { -webkit-line-clamp: none; overflow: visible; }

/* "need something that isn't listed?" — spans the grid, centred, dashed */
.fts-svc--prompt {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
  padding: clamp(34px, 4vw, 52px) 28px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-style: dashed;
  border-color: var(--line-strong);
}

.fts-svc--prompt::before { display: none; }
.fts-svc--prompt:hover { transform: none; box-shadow: none; }

/* the prompt card heads at .h4, a step down from the service-card titles */
.elementor .fts-svc--prompt .elementor-heading-title{
  max-width: 26ch;
  margin-inline: auto;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.28;
  letter-spacing: -.02em;
  font-weight: 600;
}
.fts-svc--prompt .fts-card-body { max-width: 52ch; margin-inline: auto; flex: 0; }

.fts-bg-dark .fts-svc--prompt {
  background: rgba(255, 255, 255, .03);
  border-color: var(--d-line-strong);
}

.elementor .fts-bg-dark .fts-svc--prompt .elementor-heading-title { color: #fff; }
.fts-bg-dark .fts-svc--prompt .fts-card-body { color: var(--d-muted); }

.fts-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1024px) {
  .fts-svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .fts-svc-grid { grid-template-columns: 1fr; }
  .elementor .fts-svc--video { grid-column: span 1; }
}

/* ---------- 07a-4a  Button baseline ---------------------------------------
   Every Button widget on the site is secondary unless it says otherwise.
   Elementor's kit paints buttons yellow by default; that default is the
   exception here, not the rule, so it is reset once and opted back into
   with .fts-btn--primary. Text links (.fts-tlink) opt out entirely. */
.elementor .elementor-widget-button:not(.fts-tlink):not(.fts-btn--primary):not(.fts-btn-partner) .elementor-button {
  background: transparent;
  border: 1px solid rgba(10, 10, 10, .16);
  border-radius: 10px;
  color: inherit;
  white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.elementor .elementor-widget-button:not(.fts-tlink):not(.fts-btn--primary):not(.fts-btn-partner) .elementor-button:hover,
.elementor .elementor-widget-button:not(.fts-tlink):not(.fts-btn--primary):not(.fts-btn-partner) .elementor-button:focus-visible {
  background: var(--btn-fill-hover);
  border-color: var(--btn-fill-hover);
  color: var(--ink);
}

/* on a dark ground the same hairline reads at .24, as in the source */
/* dark grounds keep the bright yellow the source uses there */
.fts-bg-dark,
.fts-topbar,
.fts-header__in { --btn-fill-hover: var(--yellow); }

.elementor .fts-bg-dark .elementor-widget-button:not(.fts-tlink):not(.fts-btn--primary):not(.fts-btn-partner) .elementor-button,
.elementor .fts-topbar .elementor-widget-button:not(.fts-btn--primary):not(.fts-btn-partner) .elementor-button,
.elementor .fts-header__in .elementor-widget-button:not(.fts-btn--primary):not(.fts-btn-partner) .elementor-button {
  border-color: rgba(255, 255, 255, .24);
}

.elementor .elementor-widget-button:not(.fts-tlink) .elementor-button svg {
  fill: currentColor;
  transition: fill .22s var(--ease);
}

/* ---------- 07a-4b  Universal button system -------------------------------
   Two states, one rule, every section.

     default   transparent, hairline border, text inherits the ground
     hover     yellow ground, ink text, ink arrow

   A button marked .fts-btn--primary starts in the yellow state and stays
   there — it only deepens on hover, so a primary CTA never flips to
   something else mid-page. Everything else is secondary by default.

   The border and text colours are inherited from the ground via currentColor,
   which is why a single pair of rules covers both dark and light sections. */
.elementor .fts-btn.elementor-widget-button .elementor-button,
.elementor .fts-btn-ghost.elementor-widget-button .elementor-button,
.elementor .fts-btn-ghost-light.elementor-widget-button .elementor-button {
  background: transparent;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 26%, transparent);
  color: inherit;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.elementor .fts-btn.elementor-widget-button .elementor-button:hover,
.elementor .fts-btn.elementor-widget-button .elementor-button:focus-visible,
.elementor .fts-btn-ghost.elementor-widget-button .elementor-button:hover,
.elementor .fts-btn-ghost.elementor-widget-button .elementor-button:focus-visible,
.elementor .fts-btn-ghost-light.elementor-widget-button .elementor-button:hover,
.elementor .fts-btn-ghost-light.elementor-widget-button .elementor-button:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

/* the primary action: already yellow, so hover only deepens it */
.elementor .fts-btn--primary.elementor-widget-button .elementor-button {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

/* A primary action never changes identity on hover — it stays yellow and
   simply gains depth. Inverting it to dark would read as a different button. */
.elementor .fts-btn--primary.elementor-widget-button .elementor-button:hover,
.elementor .fts-btn--primary.elementor-widget-button .elementor-button:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  box-shadow: 0 16px 34px -18px rgba(255, 200, 0, .7);
  transform: translateY(-2px);
}

/* the pill shape the source uses for this CTA */
.elementor .fts-btn-pill.elementor-widget-button .elementor-button {
  border-radius: 100px;
  padding: 15px 28px;
}

/* the arrow follows the label in both states */
.elementor .fts-btn .elementor-button svg,
.elementor .fts-btn--primary .elementor-button svg,
.elementor .fts-btn-ghost .elementor-button svg,
.elementor .fts-btn-ghost-light .elementor-button svg {
  fill: currentColor;
  transition: fill .22s var(--ease);
}

/* small size, used by the rate cards */
.elementor .fts-btn-sm.elementor-widget-button .elementor-button {
  padding: 10px 18px;
  font-size: 14px;
}

/* ---------- 07a-5  Video section ----------------------------------------- */
.fts-video-facade {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--d-line);
  background: var(--ink-3);
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* the poster sits at half opacity so the play control reads first */
.fts-video-facade .elementor-widget-image img {
  opacity: .5;
  transition: opacity .35s var(--ease), transform .6s var(--ease);
}

.fts-video-facade:hover .elementor-widget-image img { opacity: .64; transform: scale(1.02); }

/* four corner brackets, inset 14px */
.fts-video-facade::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 2px;
  /* the shorthand carries position/size/repeat — mask-image alone cannot,
     and the border would draw as a full rectangle instead of four corners */
  -webkit-mask:
    linear-gradient(#000 0 0) top left    / 20px 20px no-repeat,
    linear-gradient(#000 0 0) top right   / 20px 20px no-repeat,
    linear-gradient(#000 0 0) bottom left / 20px 20px no-repeat,
    linear-gradient(#000 0 0) bottom right/ 20px 20px no-repeat;
  mask:
    linear-gradient(#000 0 0) top left    / 20px 20px no-repeat,
    linear-gradient(#000 0 0) top right   / 20px 20px no-repeat,
    linear-gradient(#000 0 0) bottom left / 20px 20px no-repeat,
    linear-gradient(#000 0 0) bottom right/ 20px 20px no-repeat;
}

/* the poster is a real Image widget rather than a container background, which
   keeps it clear of Elementor's container lazy-load suppression */
.fts-video-facade .elementor-widget-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.fts-video-facade .elementor-widget-image .elementor-widget-container,
.fts-video-facade .elementor-widget-image figure,
.fts-video-facade .elementor-widget-image img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  display: block;
}

.fts-video-facade .elementor-widget-icon,
.fts-video-facade .elementor-widget-text-editor { position: relative; z-index: 2; }

.fts-play .elementor-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: transform .25s var(--ease), background .25s var(--ease);
}

.fts-play:hover .elementor-icon { transform: scale(1.06); background: var(--yellow-dark); }

.fts-video-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.fts-video-label i { font-style: normal; color: var(--yellow); margin-left: 8px; }

/* format chips — 6px radius, not pills */
.elementor .fts-reel-meta .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; }

.elementor .fts-reel-meta .elementor-icon-list-item{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 11px;
  margin: 0;
}

.elementor .fts-reel-meta .elementor-icon-list-text{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
}

/* capability list — two columns, each row on a hairline */
/* Four capabilities, one per line — the two-column split belonged to the
   six-item list this replaced. */
.elementor .fts-caps .elementor-icon-list-items{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 28px;
  /* the inline-list variant carries side margins that push it past its column */
  margin: 0;
  padding: 0;
}

.elementor .fts-caps .elementor-icon-list-item{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.fts-caps .elementor-icon-list-icon { color: var(--yellow); }
.elementor .fts-caps .elementor-icon-list-icon svg,
.elementor .fts-caps .elementor-icon-list-icon i {
  width: 17px;
  height: 17px;
  font-size: 16px;
  fill: currentColor;
}
.elementor .fts-caps .elementor-icon-list-text { font-size: 16px; color: var(--text); }
.elementor .fts-bg-dark .fts-caps .elementor-icon-list-text { color: #fff; }
.fts-bg-dark .fts-caps .elementor-icon-list-item { border-bottom-color: var(--d-line); }

/* the video facade and its format chips on a dark ground */
.fts-bg-dark .fts-reel-meta .elementor-icon-list-item { border-color: var(--d-line); }
.elementor .fts-bg-dark .fts-reel-meta .elementor-icon-list-text { color: var(--d-muted); }

@media (max-width: 680px) {
  .elementor .fts-caps .elementor-icon-list-items { grid-template-columns: 1fr; }
}

.fts-note {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.fts-note b { color: var(--text); font-weight: 600; }

/* ---------- 07a-6  Stats --------------------------------------------------
   The figures sit on their own dark ink panel inside the light section, with
   a warm glow top-right — not on the section ground. */
.fts-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(120% 150% at 12% 0%, #1A1A18 0%, #101010 46%, var(--ink) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  position: relative;
  isolation: isolate;
}

.fts-stats::before {
  content: "";
  position: absolute;
  right: -6%;
  top: -46%;
  width: 38%;
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 200, 0, .13), transparent 68%);
}

.fts-stat {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.2vw, 32px);
  border-right: 1px solid rgba(255, 255, 255, .08);
  transition: background .3s var(--ease);
}

.fts-stat:last-child { border-right: 0; }
.fts-stat:hover { background: rgba(255, 255, 255, .025); }

.elementor .fts-stats .fts-stat-i .elementor-heading-title{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

.elementor .fts-stats .fts-stat-n .elementor-heading-title{
  font-family: var(--font-display);
  font-size: clamp(46px, 5.6vw, 72px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .9;
  color: #fff;
}

/* the "+" / "H" suffix is the yellow accent, at 44% of the figure */
.fts-stats .fts-stat-n em {
  font-style: normal;
  color: var(--yellow);
  font-size: .44em;
  font-weight: 700;
  letter-spacing: -.02em;
}

.elementor .fts-stats .fts-stat-l .elementor-heading-title{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: #fff;
}

/* short yellow rule under each label */
.elementor .fts-stats .fts-stat-l .elementor-heading-title::after{
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--yellow);
  margin-top: 13px;
}

.fts-stats .fts-stat .fts-body { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .55); line-height: 1.6; }

@media (max-width: 1024px) { .fts-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .fts-stats { grid-template-columns: 1fr; } }

/* ---------- 07a-7  Testimonials ------------------------------------------
   A right-to-left marquee, same mechanism as the client logo rail so there is
   one marquee pattern on the site. fts.js clones the group for a seamless
   loop, which keeps the cards themselves editable in Elementor. */
.fts-tst-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.fts-tst-marquee__track {
  display: flex;
  width: max-content;
  animation: fts-marquee-l 64s linear infinite;
}

/* The rail never stops, including under the cursor — see the client marquee.
   Focus does pause it, because a keyboard user tabbing through the reviews
   cannot read a card that is sliding away from them. */
.fts-tst-marquee:focus-within .fts-tst-marquee__track { animation-play-state: paused; }

.fts-tst-marquee__group {
  display: flex;
  align-items: stretch;
  flex: none;
  gap: 20px;
  padding-right: 20px;
}

/* Three cards on stage at a time: each is a third of the rail minus its share
   of the gaps. Squarer than the copy alone would make them, so the row reads
   as a set of cards rather than a stack of paragraphs. */
.elementor .fts-tst {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((var(--fts-rail-w, 1200px) - 40px) / 3);
  width: calc((var(--fts-rail-w, 1200px) - 40px) / 3);
  max-width: none;
  min-height: calc((var(--fts-rail-w, 1200px) - 40px) / 3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
  margin: 0;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease), filter .45s var(--ease), opacity .45s var(--ease);
}

/* The centre of the rail is the card in focus; the two flanking it are eased
   back so the eye lands in the middle. fts.js tags them as the rail moves. */
.fts-tst.is-side {
  filter: blur(1.6px) saturate(.9);
  opacity: .55;
}

/* Three across is a desktop shape. Below that the cards would go portrait,
   so the rail shows two and then one, keeping each card roughly square. */
@media (max-width: 1120px) {
  .elementor .fts-tst {
    flex-basis: calc((var(--fts-rail-w, 900px) - 20px) / 2);
    width: calc((var(--fts-rail-w, 900px) - 20px) / 2);
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .elementor .fts-tst {
    flex-basis: min(var(--fts-rail-w, 340px), 320px);
    width: min(var(--fts-rail-w, 340px), 320px);
  }

  /* one card on stage means the side treatment has nothing to say */
  .fts-tst.is-side { filter: none; opacity: 1; }
}

.fts-tst.is-focus {
  filter: none;
  opacity: 1;
  box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .45);
}

.fts-tst:hover {
  border-color: rgba(255, 200, 0, .5);
  filter: none;
  opacity: 1;
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .4);
}

.fts-tst-stars { color: var(--yellow); font-size: 15px; letter-spacing: 3px; margin-bottom: 16px; }

.elementor .fts-tst .elementor-heading-title{
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

.elementor .fts-tst .fts-card-body { font-size: 14.5px; line-height: 1.62; color: var(--muted); flex: 1; }

/* author row: initials disc, name, role */
.fts-tst-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* the initials disc is a Text Editor widget, so the name stays editable */
.fts-tst-by .fts-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--ink);
  color: var(--yellow);
}

.fts-tst-by .fts-avatar p {
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.elementor .fts-tst-by .fts-tst-name p { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.elementor .fts-tst-by .fts-tst-role p { margin: 0; font-size: 13.5px; color: #8A8A8A; }

@media (prefers-reduced-motion: reduce) {
  .fts-tst-marquee__track { animation: none; }
  .fts-tst-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 07a-8  Process steps -----------------------------------------
   The homepage uses the source's card variant (.steps--cards), not the
   hairline-separated one: four bordered boxes with a 16px gutter. */
.fts-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.fts-step {
  position: relative;
  isolation: isolate;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.fts-bg-dark .fts-step {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  border-color: rgba(255, 255, 255, .10);
}

.fts-step:hover { background: var(--paper-2); }

.fts-bg-dark .fts-step:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
}

.elementor .fts-step__n .elementor-heading-title{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #8A8A8A;
}

.elementor .fts-step .fts-ico-box { margin: 18px 0; }

.fts-step h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

.fts-bg-dark .fts-step h3 { color: #fff; }

.fts-step .fts-card-body {
  font-size: 15px;
  margin-top: 8px;
  max-width: 30ch;
  color: var(--muted);
}

.fts-bg-dark .fts-step .fts-card-body { color: var(--d-muted); }

/* the divider between the two step tiers */
.fts-process-divider .elementor-divider-separator { border-top-color: var(--d-line); }

@media (max-width: 1024px) { .fts-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .fts-steps { grid-template-columns: 1fr; } }

/* ---------- 07a-9  Pricing ------------------------------------------------ */
.fts-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fts-price {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 30px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* solid yellow cap along the top edge */
.fts-price::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--yellow);
}

.fts-price:hover {
  border-color: var(--line-strong);
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .4);
}

.elementor .fts-price-name .elementor-heading-title{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A8A8A;
}

.elementor .fts-price-v .elementor-heading-title{
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}

/* the unit sits on its own line beneath the figure */
.fts-price-v span {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #8A8A8A;
  letter-spacing: 0;
  margin-top: 8px;
}

/* the rate list opens on a hairline and each row closes on one */
.elementor .fts-price-list .elementor-icon-list-items{
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.elementor .fts-price-list .elementor-icon-list-item{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
}

.elementor .fts-price-list .elementor-icon-list-item:last-child { border-bottom: 0; }

.elementor .fts-price-list .elementor-icon-list-text { font-size: 15px; color: var(--muted); width: 100%; }
.fts-price-list b { color: var(--text); font-weight: 700; float: right; }

/* each card closes on a full-width ghost button at the small size */
.fts-price > .elementor-widget-button { margin-top: 26px; width: 100%; }
.elementor .fts-price > .elementor-widget-button .elementor-button { width: 100%; }

.elementor .fts-btn-sm.elementor-widget-button .elementor-button{
  padding: 10px 18px;
  font-size: 14px;
}

@media (max-width: 1024px) { .fts-price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .fts-price-grid { grid-template-columns: 1fr; } }

/* ---------- 07a-10  Partnership ------------------------------------------ */
.fts-part-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fts-part {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 28px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease), background .3s var(--ease);
}

/* a warm wash that rises into the card on hover */
.fts-part::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 200, 0, .16), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.fts-part:hover::before { opacity: 1; }

.fts-part:hover {
  border-color: rgba(255, 200, 0, .5);
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -32px rgba(0, 0, 0, .45);
}

/* the icon grows slightly and takes the brand colour with the card */
.fts-part .fts-ico-box {
  transition: transform .35s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}



.fts-part:hover .fts-tlink,
.elementor .fts-part:hover .fts-tlink.elementor-widget-button .elementor-button { gap: 12px; }

.elementor .fts-part .elementor-heading-title{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--text);
}

.fts-part .fts-card-body { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* The "not sure which track fits?" strip. In the source this is an ink
   panel with two warm washes across it — it closes the section the way the
   CTA band closes the page, so it stays dark whatever the section behind it
   is doing. */
.elementor .fts-part-foot {
  background:
    radial-gradient(90% 160% at 85% 0%, rgba(255, 110, 90, .14), transparent 58%),
    radial-gradient(80% 150% at 8% 100%, rgba(255, 200, 0, .20), transparent 60%),
    linear-gradient(180deg, #141412 0%, #0A0A0A 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r);
  padding: 40px 38px;
  color: var(--d-text);
}

.elementor .fts-part-foot p,
.elementor .fts-part-foot .elementor-widget-text-editor p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
  max-width: 52ch;
  margin: 0;
}

.elementor .fts-part-foot b { color: #fff; font-weight: 600; }

@media (max-width: 1024px) { .fts-part-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .fts-part-grid { grid-template-columns: 1fr; } }

/* ---------- 07a-11  FAQ (Elementor Accordion) ----------------------------
   The source is a flat list separated by hairlines — no cards, no radius.
   The item number is a CSS counter, so it never sits in the editable text. */
.elementor .fts-faq .elementor-accordion { border-top: 1px solid var(--line); counter-reset: fts-faq; }

.elementor .fts-faq .elementor-accordion-item{
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  margin: 0;
  transition: background .25s var(--ease);
}

.elementor .fts-faq .elementor-tab-title{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: none;
  border: 0;
  counter-increment: fts-faq;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -.015em;
  transition: color .2s var(--ease);
}

.elementor .fts-faq .elementor-tab-title::before{
  content: counter(fts-faq, decimal-leading-zero);
  flex: none;
  width: 28px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8A8A8A;
}

.elementor .fts-faq .elementor-tab-title a,
.elementor .fts-faq .elementor-tab-title .elementor-accordion-title { color: var(--text); }
.elementor .fts-faq .elementor-tab-title:hover { color: var(--muted); }

/* Elementor prints the chevron before the question. The source reads
   number · question · chevron, so the row is reordered rather than
   re-marked-up, and the question takes the slack between them. */
.elementor .fts-faq .elementor-tab-title::before { order: 1; }

.elementor .fts-faq .elementor-tab-title .elementor-accordion-title {
  order: 2;
  margin-right: auto;
}

/* the chevron sits in a 38px ring, pushed to the right */
.elementor .fts-faq .elementor-accordion-icon{
  order: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink);
  transition: transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.elementor .fts-faq .elementor-accordion-icon svg,
.elementor .fts-faq .elementor-accordion-icon i {
  width: 16px;
  height: 16px;
  font-size: 14px;
  fill: currentColor;
}

.elementor .fts-faq .elementor-active .elementor-accordion-icon{
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

.elementor .fts-faq .elementor-tab-content{
  border: 0;
  padding: 0 0 26px 48px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  background: none;
}

.elementor .fts-faq .elementor-tab-content p + p { margin-top: 12px; }

/* The open item lifts out of the list as a card — that is what separates the
   answer you are reading from the questions you are not. Closed rows stay
   flat, so the list reads as a list until you open something. */
.elementor .fts-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
  background: var(--paper);
  border-radius: var(--r);
  border-bottom-color: transparent;
  box-shadow: 0 18px 44px -34px rgba(0, 0, 0, .45);
}

.elementor .fts-faq .elementor-tab-content { padding: 0 22px 22px 62px; }

/* ---------- 07a-12  Blog cards ------------------------------------------- */
.fts-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.fts-blog-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.fts-blog-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .4);
}

.fts-blog-card .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--paper-3);
  display: block;
}

/* uppercase category / date line above the title — the extra .fts-blog-card
   keeps it ahead of the card's own title rule below */
.elementor .fts-blog-card .fts-blog-meta .elementor-heading-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #8A8A8A;
}

.elementor .fts-blog-card .elementor-heading-title{
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

@media (max-width: 1024px) { .fts-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .fts-blog-grid { grid-template-columns: 1fr; } }

/* ---------- 07a-13  CTA band --------------------------------------------- */
.fts-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--d-text);
  border-top: 3px solid var(--yellow);
}

.fts-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(255, 200, 0, .20), transparent 58%),
    radial-gradient(90% 120% at 8% 100%, rgba(255, 200, 0, .09), transparent 62%);
}

.fts-cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
  background-size: 88px 88px;
}

.elementor .fts-cta-band .elementor-heading-title { max-width: 19ch; }
/* the second sentence is set in yellow in the source, not italicised */
.elementor .fts-cta-band .elementor-heading-title em { font-style: normal; color: var(--yellow); }

/* Elementor's container default is width:100%, which pushes a button row onto
   its own line inside a space-between layout. An actions row is only as wide
   as its buttons. */
.elementor .fts-actions {
  width: auto;
  flex: 0 0 auto;
}

.fts-cta-band .fts-cta-body {
  font-size: 16px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .7);
  max-width: 50ch;
}

.fts-cta-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

.fts-cta-note .elementor-icon-list-icon svg,
.fts-cta-note svg { width: 16px; height: 16px; color: var(--yellow); fill: var(--yellow); }

/* ---------- 07b  Footer --------------------------------------------------- */
.fts-footer {
  background: var(--ink);
  color: var(--d-text);
}

/* contact strip: four bordered cells across the top */
.fts-footer-contact {
  border-bottom: 1px solid var(--d-line);
}

/* Four independent cells, each with its own breathing room, separated by a
   hairline. The padding is symmetric so the rule sits midway between two
   cells instead of hard against the next icon. */
.elementor .fts-footer-contact .fts-contact-item {
  display: flex;
  align-items: center;
  padding: 26px 28px;
  border-right: 1px solid var(--d-line);
}

.elementor .fts-footer-contact .fts-contact-item:first-child { padding-left: 0; }
.elementor .fts-footer-contact .fts-contact-item:last-child { padding-right: 0; border-right: 0; }

.fts-contact-item .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
}

/* The doubled selector keeps the tile ahead of the icon-box widget default,
   which resolves to the kit's ink Primary and would leave an ink glyph on an
   ink ground — invisible. */
.elementor .fts-contact-item.elementor-widget-icon-box .elementor-icon,
.elementor .fts-contact-item .elementor-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

/* every one of the four behaves the same: yellow tile, ink glyph */
.elementor .fts-contact-item:hover .elementor-icon,
.elementor .fts-contact-item:focus-within .elementor-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

.fts-contact-item .elementor-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* the value line firms up on hover without changing size, so the row never
   reflows under the cursor */
/* The source takes the whole cell's text to yellow on hover while the tile
   fills yellow with an ink glyph. Nothing dims — the label and the value both
   stay legible throughout. */
.elementor .fts-contact-item .elementor-icon-box-title,
.elementor .fts-contact-item .elementor-icon-box-description {
  transition: color .2s var(--ease), font-weight .18s var(--ease);
}

.elementor .fts-contact-item:hover .elementor-icon-box-description,
.elementor .fts-contact-item:focus-within .elementor-icon-box-description {
  color: var(--yellow);
  font-weight: 700;
}

.elementor .fts-contact-item:hover .elementor-icon-box-title,
.elementor .fts-contact-item:focus-within .elementor-icon-box-title {
  color: rgba(255, 200, 0, .75);
}

.fts-contact-item:hover .elementor-icon,
.fts-contact-item:focus-within .elementor-icon { box-shadow: 0 10px 22px -10px rgba(255, 200, 0, .8); }

/* The footer is an ink ground: the label and the value both sit in light on
   it. The doubled selector keeps them ahead of the icon-box widget defaults,
   which would otherwise paint them in the page's ink text colour. */
.elementor .fts-contact-item .elementor-icon-box-title {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  margin: 0 0 3px;
}

.elementor .fts-contact-item .elementor-icon-box-description {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  word-break: break-word;
  margin: 0;
}

/* column headings and link lists */
.fts-footer-h4,
.elementor .fts-footer-h4 .elementor-heading-title{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
}

.elementor .fts-footer-links .elementor-icon-list-item{
  margin-bottom: 11px;
}

.elementor .fts-footer-links .elementor-icon-list-text{
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  transition: color .2s var(--ease);
}

/* left column: logo, copy and socials all flush left */
.fts-footer-about {
  align-items: flex-start !important;
  text-align: left;
}

.fts-footer-about .elementor-widget-image,
.fts-footer-about .elementor-widget-image .elementor-widget-container {
  text-align: left;
}

.fts-footer-about .elementor-social-icons-wrapper {
  justify-content: flex-start;
}

.fts-footer-about .fts-footer-copy {
  font-size: 15px;
  line-height: 1.65;
  color: var(--d-muted);
  max-width: 42ch;
}

.fts-footer-about .elementor-widget-image img { height: 52px; width: auto; }

.elementor .fts-footer-links a:hover .elementor-icon-list-text{
  color: var(--yellow);
}

/* social buttons reuse the contact-mark shape */
/* The social-icons widget sizes itself from its own custom properties, so the
   44px tile with a 19px glyph is expressed through those rather than fought
   with a width its own stylesheet would win back. */
.fts-socials .elementor-social-icon {
  --icon-size: 19px;
  --icon-padding: 12.5px;
  height: 44px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--d-line);
  color: rgba(255, 255, 255, .8);
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}

.fts-socials .elementor-social-icon:hover,
.fts-socials .elementor-social-icon:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(255, 200, 0, .8);
}

/* the glyph follows the tile rather than Elementor's per-network colour */
.fts-socials .elementor-social-icon svg { fill: currentColor; }

/* payment marks */
.fts-pay {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fts-pay li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.fts-pay__card {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  aspect-ratio: 86 / 54;
}

.fts-pay__card svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fts-pay span {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fts-footer-bar {
  border-top: 1px solid var(--d-line);
  font-size: 14px;
  color: rgba(255, 255, 255, .48);
}

.fts-footer-bar a {
  color: inherit;
  text-decoration: none;
}

.fts-footer-bar a:hover {
  color: var(--yellow);
}

/* ---------- 07c  Back to top ---------------------------------------------
   Printed once by the child theme in wp_footer, outside Elementor, because
   it belongs to the document rather than to any one page. */
button.fts-btt {
  /* the kit styles bare <button> elements; this one is a fixed 44px disc */
  padding: 0;
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 300;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .32);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s var(--ease),
              transform .2s var(--ease), background .2s var(--ease);
}

button.fts-btt.is-visible { opacity: 1; visibility: visible; }
button.fts-btt:hover { background: var(--yellow-dark); transform: translateY(-3px); }
button.fts-btt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 07d  Reveal on scroll ----------------------------------------
   Gated on .fts-js so that a page whose script never runs — and the
   Elementor editor, which renders without the front-end script — still
   shows every section at full opacity. */
.fts-js [data-reveal],
.fts-js .fts-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.fts-js [data-reveal].is-in,
.fts-js .fts-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fts-js [data-reveal],
  .fts-js .fts-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 08  Responsive ------------------------------------------------
   Breakpoints mirror the source project: 1120 / 1024 / 900 / 680 / 380.
   1024 is Elementor's tablet breakpoint, where the nav collapses to the
   hamburger — the header CTAs leave the bar at the same moment so the island
   stays a single row. */
@media (max-width: 1120px) {
  .showcase__stage {
    aspect-ratio: 1 / .92;
    max-height: min(54vh, 460px);
  }

  /* aperture rings recede once the showcase sits under the copy */
  .fts-hero::after {
    opacity: .3;
  }

  /* The source drops the hero to one column here rather than at Elementor's
     own tablet breakpoint, so the split is driven from the stylesheet. The
     extra .e-con outranks Elementor's `.e-con.e-flex > .e-con-inner`. */
  .elementor .fts-hero__in.e-con > .e-con-inner {
    flex-direction: column;
    gap: 44px;
  }

  .elementor .fts-hero__in.e-con > .e-con-inner > .e-con { width: 100%; }
  .elementor .fts-hero__in.e-con > .e-con-inner > .e-con:last-child { max-width: 620px; margin-inline: auto; }

  /* the video and who-we-are splits follow the hero down to one column */
  .elementor .fts-split.e-con > .e-con-inner {
    flex-direction: column;
    gap: 40px;
  }

  .elementor .fts-split.e-con > .e-con-inner > .e-con { width: 100%; }

  /* a boxed split with no inner wrapper stacks directly */
  .elementor .fts-split.e-con-full.e-flex { flex-direction: column; gap: 40px; }
  .elementor .fts-split.e-con-full.e-flex > .e-con { width: 100%; }
}

@media (max-width: 1024px) {
  /* Tablet keeps the desktop navigation rather than collapsing to the
     hamburger. Only the lower-priority entries step aside, leaving
     Home / About / Services / Portfolio / Contact. */
  .fts-nav .hfe-nav-menu > li.fts-nav-secondary {
    display: none;
  }

  /* one CTA is enough at this width; Book a Call is the primary action */
  .fts-header__cta .elementor-element-ftsbtnq {
    display: none;
  }

  .fts-nav .hfe-menu-item {
    padding-inline: 9px !important;
    font-size: 14.5px !important;
  }

  /* The showcase stays beside the copy at tablet rather than dropping below,
     but three layered frames will not fit — so only the centre card shows
     and the arrows move inside it. */
  .showcase__slide {
    width: 100%;
    margin-left: -50%;
  }

  .showcase__slide.is-prev,
  .showcase__slide.is-next {
    opacity: 0;
    visibility: hidden;
  }

  .showcase__arrow--next { right: 8px; }

  .showcase__hud {
    inset: 0 0;
  }

  .showcase__stage {
    aspect-ratio: 1 / 1.1;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .fts-topbar .e-con-inner {
    justify-content: center;
  }

  /* flags only — the city names cost more width than they earn */
  .fts-regions a span {
    display: none;
  }

  .fts-regions {
    gap: 10px;
  }
}

/* The hamburger takes over here (HFE breakpoint: mobile), so the bar holds
   only the logo and the toggle. */
@media (max-width: 767px) {
  .fts-header__cta {
    display: none !important;
  }

  .fts-nav .hfe-nav-menu > li.fts-nav-secondary {
    display: block;
  }
}

@media (max-width: 680px) {
  :root {
    --fts-header-h: 56px;
    --fts-header-pad: 10px;
  }

  /* neighbours are hidden at this width, so the arrows come inside the frame */
  .showcase__arrow {
    width: 36px;
    height: 36px;
  }

  .showcase__arrow--next { right: 4px; }

  .fts-header__in {
    border-radius: 12px;
  }

  .fts-topbar .e-con-inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }

  /* contact icons only */
  .elementor .fts-topbar__l .elementor-icon-list-text{
    display: none;
  }

  /* nothing in the stacked hero should ever be clipped */
  .fts-hero {
    overflow: visible;
  }

  .fts-hero::after {
    display: none;
  }

  .fts-hero::before {
    height: 40%;
  }

  /* the toggle becomes a two-up grid rather than a shrinking pill pair */
  .fts-svc-toggle {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100% !important;
  }

  .fts-svc-toggle .elementor-widget-button,
  .elementor .fts-svc-toggle .elementor-button{
    width: 100%;
  }

  /* primary actions go full width */
  .fts-hero .elementor-widget-button,
  .elementor .fts-hero .elementor-widget-button .elementor-button{
    width: 100%;
  }

  .showcase__label {
    left: 50%;
    bottom: 9%;
    transform: translateX(-50%);
    padding: 6px 11px 6px 9px;
    font-size: 10.5px;
  }

  .showcase__meta {
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 380px) {
  .fts-svc-toggle {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__slide,
  .showcase__label,
  .fts-header,
  .fts-header__in {
    transition: none;
  }
}