/*
Theme Name:   Fareteam
Theme URI:    https://www.fareteam.com/
Author:       Ewelina Blumicz
Author URI:   https://www.fareteam.com/
Description:  Classic WordPress theme for Fareteam by WTC — an exclusive flight booking platform for travel agents. Built from the static Fareteam HTML/CSS/JS site, no page builder required.
Version:      1.1.4
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fareteam
Tags:         custom-menu, featured-images, translation-ready, full-width-template, blog, news
*/

/*
  ─────────────────────────────────────────────────────────────
  Load order (see functions.php):
  1. assets/vendor/bootstrap.min.css   (enqueued separately)
  2. assets/vendor/bootstrap-icons.css (enqueued separately)
  3. assets/vendor/slick.css           (enqueued separately)
  4. style.css                         (this file — loaded last)

  This file merges the original variables.css + main.css +
  components.css + responsive.css. Relative asset paths were
  rewritten from ../fonts|images/ to fonts|images/ because
  style.css sits in the theme root.
  ─────────────────────────────────────────────────────────────
*/



/* ==================================================================
   VARIABLES — brand tokens, fonts, colour scale
   ================================================================== */

/* ─── Fonts ─────────────────────────────────────────────────── */

@font-face {
  font-family: 'Axiforma';
  src: url('fonts/AxiformaLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AxiformaLight';
  src: url('fonts/AxiformaLight.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Axiforma';
  src: url('fonts/Axiforma-Regular.woff2') format('woff2'),
       url('fonts/Axiforma-Regular.woff') format('woff'),
       url('fonts/Axiforma-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Axiforma';
  src: url('fonts/Axiforma-Bold.woff2') format('woff2'),
       url('fonts/Axiforma-Bold.woff') format('woff'),
       url('fonts/AxiformaBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AxiformaBold';
  src: url('fonts/AxiformaBold.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AngellaWhite';
  src: url('fonts/Angella_White.woff2') format('woff2'),
       url('fonts/Angella_White.woff') format('woff'),
       url('fonts/Angella_White.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  /* `block`, not `swap`: this is the display face behind the huge hero
     headline. With `swap` the browser paints the system cursive first and
     then jumps to Angella White — very visible at 12rem. `block` keeps the
     text invisible for a moment instead, and because the file is preloaded
     in functions.php that moment is normally imperceptible. */
  font-display: block;
}

/* ─── Brand Tokens ───────────────────────────────────────────── */

:root {
  /* Primary */
  --color-primary:       #184583;
  --color-primary-dark:  #143d76;
  --color-primary-medium:/*#4480b8*/#5999c2;
  --color-primary-light: rgb(227, 231, 241);

  /* Accent / Teal */
  --color-accent:        #32a1a3;
  --color-accent-light:  #8ccdd0;
  --color-accent-dark:   #3f7386;

  /* Neutral */
  --color-secondary:     #545359;
  --color-secondary-light: #615d60;
  --color-light:         #f1f3f7;
  --color-gray:          #f1f3f7; /* same value as --color-light; used by --bs-secondary */

  /* Type scale — only the two caps the responsive h1/h2 rules ask for.
     Every heading that carries a class sets its own size, so these apply
     to unclassed headings: the article title and anything typed into the
     WordPress editor. */
  --font-size-3xl:       2.25rem;
  --font-size-4xl:       3rem;
  --color-text:          rgb(34, 37, 41);
  --color-white:         #ffffff;
  --color-black:         #000000;

  /* UI */
  --color-muted:         #414f62;
  --color-border:        #e2e8f0;
  /* Border for interactive controls (inputs, selects, textareas).
     WCAG 2.1 AA (1.4.11) requires 3:1 against the adjacent colour; the
     decorative --color-border above is only 1.23:1 on white and must not be
     used to draw a control's boundary. #6b7a8f clears 3:1 on both surfaces
     these controls sit on: 4.37:1 on #fff, 3.93:1 on #f1f3f7. */
  --color-border-input:  #8f8f8f;
  --color-bg:            #ffffff;
  --color-bg-light:      #f1f3f7;

  /* Legacy aliases kept for compatibility */
  --color-blue-dark:     var(--color-primary);
  --color-blue-mid:      #5999c2;
  --color-teal:          var(--color-accent);
  --color-teal-dark:     var(--color-accent-dark);

  /* ─── Typography ─────────────────────────────────────────── */

  --font-body:    'Axiforma', Helvetica, Arial, sans-serif;
  --font-heading: 'Axiforma', Helvetica, Arial, sans-serif;
  --font-script:  'AngellaWhite', cursive;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-bold:    700;

  --line-height-tight:  1.15;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ─── Spacing ────────────────────────────────────────────── */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ─── Border Radius ──────────────────────────────────────── */

  --radius-sm:    12px;
  --radius-md:    24px;
  --radius-lg:    46px;
  --radius-round: 50%;

  /* ─── Shadows ────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-top: rgba(0, 0, 50, 0.10) 0px -15px 50px -22px;

  /* ─── Transitions ────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --base-ease:         cubic-bezier(0.25, 0.46, 0.45, 0.84);

  /* ─── Z-index ────────────────────────────────────────────── */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-nav:      1030;
  --z-toast:    1400;
}


/* ==================================================================
   BASE — Bootstrap variable overrides & typography (was main.css)
   ================================================================== */

/* ─── Bootstrap variable overrides ─────────────────────────────
   Map Fareteam brand tokens onto Bootstrap's own custom-property
   system so BS components pick up the brand automatically.
─────────────────────────────────────────────────────────────── */

:root {
  --bs-primary:         var(--color-blue-dark);
  --bs-primary-rgb:     24, 69, 131;

  --bs-secondary:       var(--color-gray);
  --bs-secondary-rgb:   241, 243, 247; /* kept in sync with --color-gray */

  --bs-success:         var(--color-teal);
  --bs-success-rgb:     50, 161, 163;

  --bs-link-color:      var(--color-blue-dark);
  --bs-link-hover-color: var(--color-blue-mid);

  --bs-border-color:    var(--color-border);
  --bs-border-radius:   var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);

  --bs-body-font-family: var(--font-body);
  --bs-body-color:       var(--color-text);
  --bs-body-bg:          var(--color-bg);
}

/* ─── Typography ─────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

p { max-width: 70ch; }

/* ─── Layout helpers ─────────────────────────────────────────── */

.ft-section {
  padding-block: var(--space-20);
}

.ft-section--sm { padding-block: var(--space-12); }
.ft-section--lg { padding-block: var(--space-24); }

/* ─── Focus visible (accessibility) ─────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ─── Smooth scroll ──────────────────────────────────────────── */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body{max-width: 100% !important; overflow-x: clip;}
html { overflow-x: clip; }

@media (max-width: 767.98px) {
  .modal-backdrop {
    background-color: var(--color-black);
    opacity: 0.8 !important;
  }
}

.script{font-family: "AngellaWhite";}

/* Placeholder text — #767676 on white meets WCAG AA 4.5:1 (SC 1.4.3) */
::placeholder {
  color: #767676;
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 0.875rem;
  opacity: 1;
}


/* ==================================================================
   COMPONENTS — Fareteam blocks
   ================================================================== */

/* ════════════════════════════════════════════════════════════
   COMPONENTS — Fareteam custom Bootstrap overrides
   ════════════════════════════════════════════════════════════ */

/* ─── Bootstrap variable bridge ─────────────────────────────── */

:root {
  --bs-primary:          var(--color-primary);
  --bs-primary-rgb:      24, 69, 131;
  --bs-body-font-family: var(--font-body);
  --bs-body-color:       rgb(34, 37, 41);
  --bs-body-color-rgb:   34, 37, 41;
  --bs-border-radius:    var(--radius-sm);
}

/* ─── Global utility overrides ───────────────────────────────── */

body, html {
  font-family: var(--font-body);
  color: rgb(34, 37, 41) !important;
}

h1, h2, h3, h4, h5, h6,
p, a, li, span, td, th, label {
  color: inherit;
}

.bg-primary  { background-color: var(--color-primary)  !important; }
.text-primary{ color: var(--color-primary) !important; }
.bg-accent   { background-color: var(--color-accent)   !important; }
.text-accent { color: var(--color-accent) !important; }
.bg-accent-dark { background-color: var(--color-accent-dark) !important; }
.bg-light    { background-color: var(--color-light) !important; }

.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.shadow-top  { box-shadow: var(--shadow-top); }

/* ─── Buttons ────────────────────────────────────────────────── */

.btn-primary {
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-md);
  padding: 10px 40px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 17px;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: #2a5a9e;
  color: #fff;
  transform: scale(1.06);
}
.btn-primary:active {
  background: var(--color-primary-dark);
}

.btn-accent {
  background: var(--color-accent-dark);
  border: 0;
  border-radius: var(--radius-md);
  padding: 7px 22px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 0.9375rem;
  transition: background var(--transition-fast), transform 200ms ease;
  white-space: nowrap;
}
.btn-accent:hover,
.btn-accent:focus-visible {
  background: #376474;
  color: #fff;
  transform: scale(1.06);
}

.btn-outlined {
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  color: #fff;
  padding: 7px 18px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 0.875rem;
  background: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 200ms ease;
  white-space: nowrap;
}
/* Light-surface variant. .btn-outlined is white-on-transparent and is only
   legible over dark backdrops (hero, navbar). On a white or #f1f3f7 surface it
   renders white-on-white — use this modifier there instead.
   #184583 on #fff = 8.31:1 (WCAG 1.4.3), border 4.37:1 (1.4.11). */
.btn-outlined--on-light {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outlined--on-light:hover,
.btn-outlined--on-light:focus-visible {
  background: rgba(24, 69, 131, 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outlined:hover,
.btn-outlined:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
  transform: scale(1.06);
}

/* Keep button links white when visited / tapped — without these the UA's
   default :visited and :active link colours (purple) show through on mobile. */
.btn-outlined:visited,
.btn-outlined:active,
.btn-outlined:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-outlined--on-light:visited,
.btn-outlined--on-light:active,
.btn-outlined--on-light:focus {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-accent:visited,
.btn-accent:active,
.btn-accent:focus {
  color: #fff;
}

/* Suppress the grey/coloured tap flash on touch devices */
.btn,
.btn-outlined,
.btn-accent,
.ft-side-panel__btn {
  -webkit-tap-highlight-color: transparent;
}

/* ─── Typography helpers ─────────────────────────────────────── */

.heading-1 {
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.heading-2 {
  font-size: clamp(2.4rem, 4vw, 3.0rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.heading-3 {
  font-size: clamp(2.2rem, 3vw, 2.4rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}
.section-title {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

/* Section label — small teal eyebrow text */
.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1.1rem;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

/* Section subtitle */
.section-subtitle {
  font-size: 1.125rem;
  color: var(--color-muted);
  max-width: 750px;
  margin-inline: auto;
  line-height: var(--line-height-normal);
}


.font-script { font-family: var(--font-script); }


.top-bar{ height: 0px; background: #fff; width: 100%; max-width: 100vw; top:0; left: 0}

/* ════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════ */
   @keyframes change-background {
     from { background-color: transparent; padding-top: 20px;} /* Start colour */
     to { background-color: var(--bs-primary);padding-top: 0; } /* End colour */
   }
.ft-navbar {
  background-color: var(--bs-primary);
  transition: box-shadow var(--transition-normal);
  padding-block: 0;
  max-width: 100vw;
}

/* Scrolled state — JS adds this class */
.ft-navbar.is-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 50, 0.18);
}

/* Logo */
.ft-navbar .navbar-brand img {
  width: 180px;
  height: auto;
}

/* Nav links */
.ft-navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-regular);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  letter-spacing: -0.01em;
}
.ft-navbar .navbar-nav .nav-link:hover,
.ft-navbar .navbar-nav .nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
.ft-navbar .navbar-nav .nav-link.active,
.ft-navbar .navbar-nav .nav-link[aria-current="page"] {
  color: #fff;
  font-weight: var(--font-weight-bold);
}

/* Dropdown: "What We Do" */
.ft-nav-dropdown {
  position: relative;
}
.ft-navbar .navbar-nav .nav-link.dropdown-toggle::after {
  vertical-align: 0.15em;
  margin-left: 0.4em;
}
.ft-dropdown-menu {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 12rem;
}
.ft-dropdown-menu .dropdown-item {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ft-dropdown-menu .dropdown-item:hover,
.ft-dropdown-menu .dropdown-item:focus-visible {
  background: var(--color-light);
  color: var(--color-primary);
}
.ft-dropdown-menu .dropdown-item.active {
  background: var(--color-light);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Divider between links and CTA group */
.ft-navbar-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.25);
  align-self: center;
  margin-inline: var(--space-4);
  flex-shrink: 0;
}

/* CTA group */
.ft-navbar-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Nav tooltip wrappers ──────────────────────────────────────── */

.nav-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

/* Remove scale from the three nav CTA buttons */
.ft-navbar-cta .btn-outlined:hover,
.ft-navbar-cta .btn-outlined:focus-visible,
.ft-navbar-cta .btn-accent:hover,
.ft-navbar-cta .btn-accent:focus-visible {
  transform: none;
}

/* Tooltip base */
.nav-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 50;
  background: #0c1929;
  border: 0.5px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #b5d4f4;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  /* WCAG 1.4.13 asks that hover-triggered content stay reachable with the
     pointer; it only ignores events while hidden, so it cannot swallow
     clicks on whatever sits underneath. */
  pointer-events: auto;
  visibility: hidden;
  font-family: var(--font-body);
  line-height: 1.4;
  text-align: center;
  /* hidden state */
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Arrow pointing up */
.nav-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(255,255,255,.15);
}
.nav-tooltip::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #0c1929;
}

/* Sub-line */
.nav-tooltip__sub {
  display: block;
  color: #5f8ab4;
  font-size: 12px;
  margin-top: 2px;
}

/* Bridges the gap between button and tooltip, so moving the pointer onto the
   tooltip does not drop out of :hover (WCAG 1.4.13, "hoverable"). */
.nav-tooltip-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

/* Show on hover and on keyboard focus */
.nav-tooltip-wrap:hover .nav-tooltip,
.nav-tooltip-wrap:focus-within .nav-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Escape dismisses it without moving the pointer or the focus
   (WCAG 1.4.13, "dismissible") — see initNavTooltips in main.js. */
.nav-tooltip-wrap.is-tooltip-dismissed .nav-tooltip {
  opacity: 0;
  visibility: hidden;
}

/* ── Toggler (mobile) ─────────────────────────────────────────── */

.ft-navbar .navbar-toggler {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  color: #fff;
  transition: border-color var(--transition-fast);
}
.ft-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(50, 161, 163, 0.45);
}
.ft-navbar .navbar-toggler:hover {
  border-color: #fff;
}
.ft-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Swap hamburger ↔ X via aria-expanded */
.ft-navbar .navbar-toggler[aria-expanded="true"] .ft-icon-menu { display: none; }
.ft-navbar .navbar-toggler[aria-expanded="false"] .ft-icon-close { display: none; }

/* ── Mobile collapsed menu ────────────────────────────────────── */

@media (max-width: 991.98px) {
  .ft-navbar .navbar-collapse {
    background: var(--color-primary-dark);
    margin-top: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
  }

  .ft-navbar .navbar-nav .nav-link {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ft-navbar .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  .ft-navbar-divider { display: none; }

  .ft-navbar-cta {
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--space-4);
    gap: var(--space-2);
  }
  .ft-navbar-cta .btn-outlined,
  .ft-navbar-cta .btn-accent {
    text-align: center;
    width: 100%;
    padding: 10px 20px;
    font-size: 0.9375rem;
  }
}

/* ── Breakpoint tweak for mid-sized screens ─────────────────── */

@media (min-width: 992px) and (max-width: 1249px) {
  .ft-navbar .navbar-nav .nav-link { font-size: 0.8125rem; padding-inline: 0.5rem; }
  .ft-navbar .navbar-brand img { width: 150px; }
  .btn-outlined, .btn-accent { font-size: 0.8125rem; padding: 6px 14px; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE SIDE PANEL
   ════════════════════════════════════════════════════════════ */

/* Overlay */
.ft-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 50, 0.55);
  z-index: 1040;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.ft-panel-overlay.is-visible {
  display: block;
}
.ft-panel-overlay.is-active {
  opacity: 1;
}

/* Panel */
.ft-side-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 88vw);
  height: 100dvh;
  background: #fff;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s var(--base-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ft-side-panel.is-open {
  transform: translateX(0);
}

/* Hide panel on desktop */
@media (min-width: 992px) {
  .ft-side-panel,
  .ft-panel-overlay { display: none !important; }
}

/* Panel header */
.ft-side-panel__header {
  flex-shrink: 0;
  min-height: 64px;
}
.ft-side-panel__close {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.ft-side-panel__close:hover,
.ft-side-panel__close:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Nav links */
.ft-side-panel__nav {
  flex: 1;
  padding: 0.5rem 0;
}
.ft-side-panel__link {
  display: block;
  padding: 1rem 1.5rem;
  font-size: 1.0625rem;
  font-family: var(--font-body);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: -0.01em;
}
.ft-side-panel__link:hover,
.ft-side-panel__link:focus-visible {
  background: transparent;
  color: var(--color-text);
}
.ft-side-panel__link.active {
  background: var(--color-light);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Expandable "What We Do" submenu */
.ft-side-panel__toggle {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ft-side-panel__chevron {
  transition: transform var(--transition-fast);
  font-size: 0.9em;
  color: var(--color-muted);
}
.ft-side-panel__group.is-open .ft-side-panel__chevron {
  transform: rotate(180deg);
}
.ft-side-panel__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
  background: var(--color-light);
}
.ft-side-panel__group.is-open .ft-side-panel__submenu {
  max-height: 16rem;
}
.ft-side-panel__sublink {
  display: block;
  padding: 0.85rem 1.5rem 0.85rem 2.5rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.ft-side-panel__sublink:hover,
.ft-side-panel__sublink:focus-visible {
  color: var(--color-primary);
}
.ft-side-panel__sublink.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* CTA section */
.ft-side-panel__cta {
  flex-shrink: 0;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  align-items: flex-start;
  text-align: center;
}

.ft-side-panel__btn {
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter var(--transition-fast);
  width: 70% !important;
}
.ft-side-panel__btn--accent {
  background: var(--color-accent-dark);
  color: #fff;
}
.ft-side-panel__btn--accent:hover,
.ft-side-panel__btn--accent:focus-visible {
  background: var(--color-accent-dark);
  color: #fff;
}
.ft-side-panel__btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.ft-side-panel__btn--primary:hover,
.ft-side-panel__btn--primary:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

/* Side-panel buttons: stay white when visited / tapped */
.ft-side-panel__btn:visited,
.ft-side-panel__btn:active,
.ft-side-panel__btn:focus,
.ft-side-panel__btn--accent:visited,
.ft-side-panel__btn--accent:active,
.ft-side-panel__btn--accent:focus,
.ft-side-panel__btn--primary:visited,
.ft-side-panel__btn--primary:active,
.ft-side-panel__btn--primary:focus {
  color: #fff;
}


/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */

/* `lvh` = large viewport height: the height with the browser UI retracted.
   It is stable while scrolling, and matches what Safari reports for `vh`,
   so Chrome (whose UI chrome is a different height) no longer renders a
   shorter hero. `vh` stays as the fallback for older browsers. */
.ft-hero {
  position: relative;
  min-height: 90vh; /* fallback for browsers without max()/lvh */
  min-height: max(700px, 90lvh); /* 90% of the viewport, never below 700px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ft-hero--slim {
  min-height: 65vh; /* fallback for browsers without max()/lvh */
  min-height: max(500px, 65lvh); /* 65% of the viewport, never below 500px */
}

.ft-hero--slim .hero-headline {
  font-size: clamp(3.5rem, 10vw, 11rem);
}

.ft-hero--slim .hero-subline {
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  margin-top: clamp(-28px, -5vw, -72px);
}

@media (max-width: 991.98px) {
  .ft-hero--slim .hero-headline {
    font-size: clamp(4rem, 14vw, 9rem);
  }
  .ft-hero--slim .hero-subline {
    font-size: clamp(1.6rem, 5vw, 3rem);
    margin-top: clamp(-10px, -2vw, -24px);
  }
}

@media (max-width: 575.98px) {
  .ft-hero--slim .hero-headline {
    font-size: clamp(4.94rem, 22vw, 7.8rem);
  }
  .ft-hero--slim .hero-subline {
    font-size: clamp(1.95rem, 8.5vw, 2.86rem);
    margin-top: -20px;
  }
}

/* Background image layer — fill with image via .hero-bg in your page CSS */
.hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-dark); /* fallback until image is added */
  background-image: url('images/headings/home.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Mobile-only hero images (portrait headers) */
@media (max-width: 767.98px) {
  .hero-bg--about    { background-image: url('images/headings/about-header-m.jpg') !important; background-position: top center !important; }
  .hero-bg--wwd      { background-image: url('images/headings/what-we-do-header-m.png') !important; background-position: top center !important; }
  .hero-bg--groups   { background-image: url('images/headings/groups-header-m.jpg') !important; background-position: top center !important; }
  .hero-bg--groups-form { background-image: url('images/headings/news-header-m.png') !important; background-position: top center !important; }
  .hero-bg--news     { background-image: url('images/headings/news-header-m.png') !important; background-position: top center !important; }
  .hero-bg--contact  { background-image: url('images/headings/contact-header-m.png') !important; background-position: top center !important; }
  .hero-bg--register { background-image: url('images/headings/register-header-m.png') !important; background-position: top center !important; }
  .hero-bg--demo     { background-image: url('images/headings/what-we-do-header-m.png') !important; background-position: top center !important; }
  .hero-bg--testimonials { background-image: url('images/headings/news-header-m.png') !important; background-position: top center !important; }
}

/* Dark overlay
   WCAG 2.1 AA (1.4.3): hero copy is white, and the photos behind it contain
   near-white regions (clouds, fuselage). A minimum alpha of 0.56 over pure
   white yields 4.94:1, so white body text clears 4.5:1 on ANY hero image —
   at every breakpoint, whatever the `cover` crop happens to show. Do not
   lower these stops below 0.56 without re-measuring. */
/*.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.66) 0%,
    rgba(0, 0, 0, 0.56) 50%,
    rgba(0, 0, 0, 0.62) 100%
  );
  z-index: 1;
}
*/
/* Content sits above overlay */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 2rem 0;
  width: 100%;
}
.hero-content h3{max-width: 580px; margin-top: 40px}
.hero-content p.lead{max-width: 500px}

/* Mobile — align hero text to the top */
@media (max-width: 767.98px) {
  /* Subpage hero height on mobile */
  .ft-hero--slim {
    align-items: flex-start;
    min-height: 80vh;
    min-height: 85lvh;
  }
  .ft-hero--slim .hero-content {
    padding-top: 0.5rem;
  }
  .ft-hero:not(.ft-hero--slim) {
    align-items: flex-start;
  }
  .ft-hero:not(.ft-hero--slim) .hero-content {
    padding-top: 4.5rem;
  }
  .ft-hero .hero-headline,
  .ft-hero .hero-subline,
  .ft-hero .hero-content h3,
  .ft-hero .hero-content p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}
/* ── Hero entrance animations ────────────────────────────────── */

@keyframes hero-slide-down {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-headline {
  animation: hero-slide-down 0.7s ease both;
  animation-delay: 0.1s;
}
.hero-subline {
  animation: hero-slide-up 0.7s ease both;
  animation-delay: 0.3s;
}
.hero-content .lead {
  animation: hero-fade-in 0.7s ease both;
  animation-delay: 0.55s;
  font-size:1.2rem
}
.hero-cta {
  animation: hero-fade-in 0.7s ease both;
  animation-delay: 0.75s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline, .hero-subline, .hero-content .lead, .hero-cta {
    animation: none;
  }
}

/* ── Headline — Angela White ─────────────────────────────────── */

.hero-headline {
  font-family: var(--font-script); /* AngellaWhite */
  font-weight: 100;
  font-size: clamp(3rem, 10vw, 12rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.15);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

/* ── Subline — Axiforma Bold ─────────────────────────────────── */

.hero-subline {
  font-family: var(--font-body); /* Axiforma */
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.2rem, 4vw, 3.65rem);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.10);
  letter-spacing: 0.04em;
  margin-bottom: 0;
  margin-top: clamp(-28px, -5vw, -72px);
}
.hero-slogan {
  margin-bottom: var(--space-6);
}

/* ── Hero responsive ─────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .hero-headline {
    font-size: clamp(6rem, 24vw, 16rem);
  }
  .hero-subline {
    font-size: clamp(1.2rem, 4.5vw, 2.5rem);
    margin-top: clamp(-8px, -1vw, -20px);
  }
}

@media (max-width: 575.98px) {
  .hero-headline {
    font-size: clamp(7.6rem, 30vw, 15rem);
  }
  .hero-subline {
    font-size: clamp(1.43rem, 7.15vw, 2.34rem);
    margin-top: -4px;
  }
  .hero-content .lead {
    font-size: 1rem;
  }
  .hero-content .container {
    align-items: center;
    text-align: center;
  }
  .hero-slogan {
    margin-top: var(--space-24);
  }
}
/* ── Hero social proof ───────────────────────────────────────── */

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  animation: hero-fade-in 0.7s ease both;
  animation-delay: 0.95s;
}

.hero-social-proof__avatars {
  display: flex;
}

.hero-social-proof__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  object-fit: contain;
  background: var(--color-white);
  margin-left: -10px;
}

.hero-social-proof__avatars .hero-social-proof__avatar:first-child {
  margin-left: 0;
}

.hero-social-proof__text {
  color: rgba(255,255,255,0.85);
  font-size: 0.875rem;
  margin: 0;
  max-width: none;
}

.hero-social-proof__text strong {
  color: #fff;
}
.hero-cta__btn.btn-primary{
  background-color: #3f7386 !important;
}
@media (max-width: 767.98px) {
  .hero-social-proof {
    display: none;
  }
  .hero-cta__btn {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
  }
  .hero-cta__btn.btn-outlined {
    background-color: #143a5f;
  }
}

/* ── Hero CTA buttons ────────────────────────────────────────── */

.hero-cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.hero-cta__btn {
  min-width: 160px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  border-radius: var(--radius-lg);
}

.hero-cta .btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
}

.hero-cta .btn-primary:hover,
.hero-cta .btn-primary:focus-visible {
  background-color: #3eb3b5;
}
@media(max-width:991.98px){
  .hero-content{
    padding:2rem var(--space-6);
  }
}

/* ════════════════════════════════════════════════════════════
   SECTION 1 — Value proposition
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   STATS
   ════════════════════════════════════════════════════════════ */

.ft-stats {
  background: #fff;
  padding: var(--space-12) 0;
}

.ft-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom:1px solid var(--color-border);
}

.ft-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  position: relative;
}

.ft-stats__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--space-8) / -2);
  top: 50%;
  transform: translateY(-50%);
  height: 48px;
  width: 1px;
  background: var(--color-border);
}

.ft-stats__number {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--color-primary);
  line-height: 1;
}

.ft-stats__suffix {
  font-size: 0.65em;
  font-weight: var(--font-weight-regular);
  opacity: 0.8;
}

.ft-stats__label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 0.9375rem;
  color: var(--color-muted);
  max-width: 160px;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .ft-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-4);
  }
  .ft-stats__item {
    padding-bottom: var(--space-8) ;
    border-bottom: 1px solid var(--color-border);
  }
  .ft-stats__grid {
    border-bottom:0;
  }
}

/* ════════════════════════════════════════════════════════════
   WHO WE ARE (About Us page)
   ════════════════════════════════════════════════════════════ */

.ft-who-we-are {
  background: #fff;
}

@media (max-width: 575.98px) {
  .ft-who-we-are.py-6 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .ft-who-we-are .col-lg-8 {
    padding-top: 12px;
  }
}

.ft-who-we-are__body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.ft-who-we-are__body:last-child {
  margin-bottom: 0;
}

.ft-value-prop { background: #fff;   }
@media(max-width:991.98px){
  .ft-value-prop{
    padding:0 var(--space-6);
  }
}


.py-6 { padding-block: 6rem; }

.vp-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}


.vp-body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}



.ft-vp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ft-vp-stat__value {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ft-vp-stat__label {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.3;
}

.btn-demo {
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 0.9375rem;
  border-radius: var(--radius-lg);
  padding: 0.6rem 2rem;
  border: 0;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  text-decoration: none;
  display: inline-block;
}
.btn-demo:hover,
.btn-demo:focus-visible {
  background-color: #2a5a9e;
  color: #fff;
  transform: scale(1.06);
}
.btn-demo:active {
  background-color: var(--color-primary-dark);
}


/* ════════════════════════════════════════════════════════════
   SECTION 2 — Image slider
   ════════════════════════════════════════════════════════════ */

.ft-slider {
  background: #fff;
  overflow: hidden;
}

/* Slide wrapper */
.slider-slide {
  padding: 0 8px;
}

.slider-slide img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Hide Slick default outline */
.city-slider .slick-slide:focus,
.city-slider .slick-slide > div:focus {
  outline: none;
}


/* ════════════════════════════════════════════════════════════
   TRUST SECTION
   ════════════════════════════════════════════════════════════ */

/* Section wrapper */
.ft-trust {
  padding-block: var(--space-20);
  background: var(--color-bg-light);
}

/* White card container */
.ft-trust__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);

}

/* Header */
.ft-trust__header {
  margin-bottom: var(--space-10);
}
.ft-trust__header .section-title {
  margin-bottom: var(--space-3);
}

/* Badge grid — desktop: 4 equal + 1 wider */
.ft-trust__logos {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr 3fr;
  gap: var(--space-4);
}

/* Individual badge card */
.ft-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  border: 0px solid var(--color-border);
  background:var(--color-bg-light);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

/* Icon circle */
.ft-badge__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  /*background: var(--color-accent-dark);*/
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ft-badge__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /*filter: brightness(0) invert(1);*/
}

.ft-badge__icon i {
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
}

/* Text */
.ft-badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ft-badge__text strong {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.2;
}

.ft-badge__text span {
  font-size: 0.75rem;
  color: var(--color-secondary);
  line-height: 1.4;
}

/* ── Tablet ─────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .ft-trust {
    padding-block: var(--space-3);
  }

  .ft-trust__card {
    padding: var(--space-10) var(--space-6);
    margin-top: var(--space-16);
  }

  .ft-trust__logos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .ft-trust__logos .ft-badge:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 375.98px) {
  .ft-trust__logos {
    grid-template-columns: 1fr;

  }
  .ft-trust__logos .ft-badge:nth-child(5) {
    grid-column: auto;
  }

}


/* ════════════════════════════════════════════════════════════
   WHY CHOOSE FARETEAM
   ════════════════════════════════════════════════════════════ */

.ft-why-us {
  padding-block: var(--space-8);
  background: var(--color-bg-light);
}

/* Two-column grid: image left, content right */
.ft-why-us__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-16);
  align-items: stretch;
}

/* Image placeholder — swap background-image when asset is ready */
.ft-why-us__image {
  background-image: url('images/template/ft-home-1.jpg');
  background-size: cover;
  background-position: center;
  min-height: 340px;
  border-radius: var(--radius-lg);
}

/* White content box */
.ft-why-us__box {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-16);
  overflow: hidden;
}

/* Decorative graphic, pinned 40px to the right of the heading text */
.ft-why-us__box .section-title {
  display: inline-block;
  position: relative;
}

.ft-why-us__box .section-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 40px;
  width: 170px;
  height: 100%;
  background-image: url("images/4.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  pointer-events: none;
}

@media (min-width: 1400px) {
  .ft-why-us__box .section-title::after {
    top: -30px;
    width: 220px;
    height: 132%;
  }
}

@media (min-width: 1800px) {
  .ft-why-us__box .section-title::after {
    top: -46px;
    width: 270px;
    height: 165%;
  }
}

.ft-why-us__box > * {
  position: relative;
  z-index: 1;
}

.ft-why-us__box .section-title {
  margin-top: 0;
  margin-bottom: var(--space-10);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
}
.ft-why-us__box .section-subtitle{
    margin-bottom: var(--space-8);

}
/* Benefit list */
.ft-why-us__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.ft-why-us__list li {
  position: relative;
  padding: var(--space-6) var(--space-4) var(--space-6) 82px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  min-height: 72px;
  display: flex;
  align-items: center;
}

.ft-why-us__list li:last-child {
  border-bottom: none;
  padding-bottom: var(--space-4);
}

/* Icon circle */
.ft-why-us__list li .bi {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: #e8f1f8;
  color: var(--color-primary-medium);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Active / highlighted item */
.ft-why-us__list li.active .bi {
  background: #5a8fc0;
  color: #fff;
}

.ft-why-us__list li span {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  display: block;
  color: var(--color-text);
}

/* ── Tablet / Mobile ─────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .ft-why-us__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .ft-why-us__image {
    min-height: 280px;
  }

  .ft-why-us__box {
    padding: var(--space-12) var(--space-6);
  }

  .ft-why-us__list li span {
    font-size: 0.9375rem;
  }
}

/* Mobile: pull the decorative graphic left so it isn't cut off */
@media (max-width: 575.98px) {
  .ft-why-us__box .section-title::after {
    margin-left: 12px;
    width: 110px;
    max-width: calc(100vw - 100% - var(--space-12));
  }
}


/* ════════════════════════════════════════════════════════════
   HOW TO BOOK
   ════════════════════════════════════════════════════════════ */

.ft-how-to-book,
.ft-groups-what {
  padding-block: var(--space-12);
  background: var(--color-light);
  overflow: hidden;
}



/* ── Booking card ────────────────────────────────────────────── */

.ft-booking-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid rgba(15, 23, 42, 0.0);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  height: 100%;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.ft-booking-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.08);
  border-color: rgba(24, 69, 131, 0.1);
}

/* Highlighted (first) card */
.ft-booking-card--highlight {
  background: radial-gradient(circle,rgba(63, 115, 134, 1) 0%, rgba(48, 97, 115, 1) 100%);;
  border-color: transparent;
  color: var(--color-white);
}
.ft-booking-card--primary{
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-white) !important;
}
.ft-booking-card--medium {
  /* WCAG 1.4.3: this card prints white body copy, and --color-primary-medium
     (#5999c2) only reaches 3.11:1 against white. #37719c gives 5.24:1. */
  background: #37719c;
  border-color: transparent;
  color: var(--color-white);
}

.ft-booking-card--light{
  background: var(--color-light);
  border-color: transparent;
}

.ft-booking-card--medium p,
.ft-booking-card--medium h3,
.ft-booking-card--medium .ft-booking-card__step,
.ft-booking-card--medium .ft-booking-card__icon i,
.ft-booking-card--medium .ft-wwd-support__item,
.ft-booking-card--medium .ft-wwd-support__check {
  color: var(--color-white) !important;
}

.ft-booking-card--highlight p,
.ft-booking-card--highlight h3,
.ft-booking-card--highlight .ft-booking-card__step,
.ft-booking-card--highlight .ft-booking-card__icon i,
.ft-booking-card--highlight .ft-wwd-support__item,
.ft-booking-card--highlight .ft-wwd-support__check {
  color: var(--color-white) !important;
}
.ft-booking-card--primary p,
.ft-booking-card--primary h3,
.ft-booking-card--primary .ft-booking-card__step,
.ft-booking-card--primary .ft-booking-card__icon i,
.ft-booking-card--primary .ft-wwd-support__item,
.ft-booking-card--primary .ft-wwd-support__check {
  color: var(--color-white) !important;
}
/* Login button that opens the EUR / GBP choice.
   Opens on hover, on keyboard focus and on tap — see initLoginMenu in
   main.js, which mirrors those states onto .is-open and aria-expanded. */
.ft-login-menu {
  position: relative;
  display: inline-block;
}

.ft-login-menu__trigger {
  cursor: pointer;
}

/* The cards are positioned siblings, so a later one would paint over an open
   panel; lift the card that owns it. */
.ft-booking-card:has(.ft-login-menu.is-open) {
  z-index: 6;
}

.ft-login-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 100%;
  margin-top: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-white, #fff);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.ft-login-menu.is-open .ft-login-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ft-login-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-radius: 12px;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  /* #184583 on #fff = 8.31:1 (WCAG 1.4.3). */
  color: var(--color-primary) !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ft-login-menu__item i {
  font-size: 0.8125rem;
  opacity: 0.7;
}

.ft-login-menu__item:hover,
.ft-login-menu__item:focus-visible {
  background: rgba(24, 69, 131, 0.08);
  color: var(--color-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ft-login-menu__panel {
    transition: none;
    transform: none;
  }
}

/* Icon — top right corner */
.ft-booking-card__icon {
  position: absolute;
  top: var(--space-10);
  right: var(--space-10);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ft-booking-card__icon i {
  font-size: 2.5rem;
  color: var(--color-accent-dark);
  line-height: 1;
}

/* Step number */
.ft-booking-card__step {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1.2rem;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
  letter-spacing: 0.04em;
}

/* Card title */
.ft-booking-card__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

/* Card body text */
.ft-booking-card p {
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: 0;
  font-size: 0.9375rem;
}

/* btn-outlined on dark highlighted card */
.ft-booking-card--highlight .btn-outlined {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}
.ft-booking-card--highlight .btn-outlined:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .ft-booking-card {
    padding: var(--space-8);
  }

  .ft-booking-card__icon {
    top: var(--space-8);
    right: var(--space-8);
  }
}


/* ════════════════════════════════════════════════════════════
   NEWSLETTER
   ════════════════════════════════════════════════════════════ */

.ft-newsletter {
  padding-top: var(--space-10);
  background: var(--color-bg-light);

}

/* White card with rounded top corners only */
.ft-newsletter__card {
  background: var(--color-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 ;
  padding: var(--space-12) var(--space-12) 0;
}

/* Form */
.ft-newsletter__form {
  margin-top: var(--space-8);
  margin-bottom: var(--space-10);
}

.ft-newsletter__group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.ft-newsletter__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ft-newsletter__field label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  color: var(--color-text);
  padding-left: 3px;
}

.ft-newsletter__field label span {
  color: var(--color-accent-dark);
}

.ft-newsletter__field input[type="text"],
.ft-newsletter__field input[type="email"],
.ft-newsletter__field select {
  border: 1px solid var(--color-border-input);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.25rem;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.ft-newsletter__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23545359' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.ft-newsletter__field input:focus,
.ft-newsletter__field select:focus {
  outline: none;
  border-color: var(--color-accent-dark);
  background: var(--color-bg);
}

.ft-newsletter__submit {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.ft-newsletter__submit .btn-primary {
  width: fit-content;
  grid-column: 1;
}

.ft-newsletter__microcopy {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
  margin-top: calc(var(--space-2) * -1);
  max-width: none;
}

.ft-newsletter__submit .btn-primary {
  padding: 10px 40px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  width: fit-content;
}

/* Phone image — flush to bottom */
.ft-newsletter__image {
  width: 100%;
  display: block;
  object-fit: contain;
  object-position: bottom;
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .ft-newsletter{
    padding: 0 var(--space-3);
  }
  .ft-newsletter__card {
    padding: var(--space-8) var(--space-10) 0;
  }

  .ft-newsletter__image {
    margin-top: var(--space-8);
  }
}

@media (max-width: 767.98px) {
  .ft-newsletter__image {
    margin-top: var(--space-8);
    max-height: 200px;
    object-fit: cover;
    object-position: top;
  }
}

@media (max-width: 767.98px) {
  .ft-newsletter__group {
    grid-template-columns: 1fr;
  }
}


/* ── No lift/zoom in footer / how-to-book ────────────────────── */

.ft-footer .btn:hover,
.ft-footer .btn:focus-visible,
.ft-how-to-book .btn:hover,
.ft-how-to-book .btn:focus-visible {
  transform: none;
}

/* ── No zoom in navbar on mobile ────────────────────────────── */

@media (max-width: 991.98px) {
  .ft-navbar .btn:hover,
  .ft-navbar .btn:focus-visible {
    transform: none;
  }
  .ft-navbar .btn-accent:hover,
  .ft-navbar .btn-accent:focus-visible {
    background: var(--color-accent-dark);
    color: #fff;
  }
  .ft-navbar .btn-outlined:hover,
  .ft-navbar .btn-outlined:focus-visible {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
  }
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

.ft-footer {
  background: #111827;
  color: #fff;
  padding-top: var(--space-16);
}

/* Three-column grid */
.ft-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Logo */
.ft-footer__logo-link { display: inline-block; margin-bottom: var(--space-4); }
.ft-footer__logo { width: 200px; height: auto; }

/* Description */
.ft-footer__desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 0.875rem;
  line-height: 1.65;
  color: #fff;
  margin-bottom: var(--space-6);
  max-width: 280px;
}

/* Section heading */
.ft-footer__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-6);
}

/* Social icons — small square buttons */
.ft-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.ft-footer__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  color: rgba(255, 255, 255, 0.80);
  font-size: 2rem;
  line-height: 1;
}
.ft-footer__social-btn:hover,
.ft-footer__social-btn:focus-visible {
  opacity: 0.8;
  color: #fff;
}

.ft-footer__yt {
  height: 28px;
  width: auto;
  display: block;
}

/* Nav links + modal triggers */
.ft-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* min-height 24px satisfies WCAG 2.2 AA 2.5.8 (Target Size, Minimum); these
   are stacked block links, so the inline-text exception does not apply. */
.ft-footer__nav a,
.ft-footer__modal-trigger,
.ft-footer__websites a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.ft-footer__nav a,
.ft-footer__modal-trigger {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 0.9375rem;
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

.ft-footer__nav a:hover,
.ft-footer__nav a:focus-visible,
.ft-footer__modal-trigger:hover,
.ft-footer__modal-trigger:focus-visible {
  color: #fff;
  font-weight: var(--font-weight-regular);
  outline: none;
}

.ft-footer__modal-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Websites + login links */
.ft-footer__websites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ft-footer__websites a {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 0.9375rem;
  color: #fff;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.ft-footer__websites a:hover,
.ft-footer__websites a:focus-visible {
  color: #fff;
  font-weight: var(--font-weight-regular);
}

/* Separator between Our Websites and Log In */
.ft-footer__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin: var(--space-6) 0;
}

/* Login pill buttons */
.ft-footer__login {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ft-footer__login-btn {
  border: 2px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: 0.8125rem;
  padding: 0.45rem 40px;
  background: transparent;
  text-align: center;
  min-width: 220px;
  max-width: 220px;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.ft-footer__login-btn:hover,
.ft-footer__login-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

/* Bottom bar */
.ft-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-6);
}

.ft-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ft-footer__copy {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  text-decoration: none;
}

/* Standalone link, not inline in a sentence, so WCAG 2.2 AA 2.5.8 applies. */
.ft-footer__copy--link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.ft-footer__copy--link:hover { color: rgba(255, 255, 255, 0.65); }

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .ft-footer{
    padding-left: var(--space-6);
  }
  .ft-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 575.98px) {
  .ft-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ft-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════ */

.ft-modal .modal-header.ft-modal__header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-8);
}

.ft-modal__header .modal-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1.375rem;
  color: var(--color-text);
}

.ft-modal__body {
  padding: var(--space-8);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text);
}

.ft-modal__body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.ft-modal__body ul {
  padding-left: var(--space-6);
  list-style: disc;
}

.ft-modal__footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-8);
}

.ft-modal__footer .btn-primary {
  padding: 0.5rem 2rem;
}

/* Demo modal */
.ft-modal--demo {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.ft-modal--demo__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  background-color: var(--bs-primary) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  border-radius: 50%;
  padding: 0.5rem;
  opacity: 1;
}

/* Register page — form card + separate image card */
.ft-register__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

.ft-register__layout--wide-form {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 767.98px) {
  .ft-register__layout--wide-form {
    grid-template-columns: 1fr;
  }
}

.ft-register__layout--sticky-media {
  position: relative;
  align-items: start;
}

.ft-register__layout--sticky-media .ft-register__mosaic {
  height: 100%;
  max-height: 500px;
  min-height: 0;
  height: 500px !important;
}

.ft-register__layout--sticky-media .ft-register__mosaic.is-pinned {
  position: fixed;
  top: 84px;
}

.ft-register__layout--sticky-media .ft-register__mosaic.is-bottomed {
  position: absolute;
  top: auto;
  bottom: 0;
}

@media (max-width: 767.98px) {
  .ft-register__layout--sticky-media .ft-register__mosaic {
    position: static !important;
    height: auto;
  }
}

.ft-register__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ft-register__contact-card {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.ft-register__contact-card .ft-contact-channel__text {
  justify-content: center;
}

.ft-register__contact-card .ft-contact-channel {
  background: transparent;
  padding: 0;
  border: none;
}

.ft-register__contact-card .ft-contact-channel__icon {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  width: 36px;
  height: 36px;
}

.ft-register__contact-card .ft-contact-channel__name {
  color: #fff;
}

.ft-register__contact-card .ft-contact-channel__email {
  color: rgba(255, 255, 255, 0.85);
}

.ft-register__contact-card .ft-contact-channel__email:hover {
  color: #fff;
}

.ft-register__form-card {
  background: var(--color-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .ft-register__form-card {
    padding: var(--space-12) var(--space-8);
  }
}

.ft-register__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  height: 100%;
  min-height: 480px;
}

.ft-register__mosaic-col {
  display: grid;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}

.ft-register__mosaic-col--left {
  grid-template-rows: 1.15fr 0.85fr;
}

.ft-register__mosaic-col--right {
  grid-template-rows: 0.85fr 1.15fr;
}

.ft-register__mosaic-item {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

@media (max-width: 767.98px) {
  .ft-register__layout {
    grid-template-columns: 1fr;
  }
  .ft-register__mosaic {
    min-height: 320px;
  }
}

/* Media column that takes its height from the form card next to it.
   Photos in an auto-height grid row set the row height from their own
   proportions, which leaves the shorter form card stretched and its content
   floating in the middle; taking the tiles out of flow reverses that. */
.ft-register__media {
  position: relative;
  min-height: 320px;
}

@media (min-width: 768px) {
  .ft-register__media > .ft-register__mosaic {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
}

/* Variant: Request a Demo — one wide image across the top, two beneath.
   Same tiles and gaps as the Register mosaic, different rhythm. */
.ft-register__mosaic--demo {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.2fr 0.8fr;
}

.ft-register__mosaic-item--wide {
  grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
  .ft-register__mosaic--demo {
    grid-template-rows: 1fr 0.7fr;
  }
}

/* Variant: contact card + image (left col) beside one tall image (right col) */
.ft-register__mosaic--contact {
  min-height: 0;
}

.ft-register__layout--sticky-media .ft-register__mosaic--contact {
  height: 400px !important;
  max-height: 400px;
}

.ft-register__mosaic--contact .ft-register__mosaic-col--left {
  grid-template-rows: auto 180px;
}

.ft-register__mosaic--contact .ft-register__mosaic-col--right {
  grid-template-rows: 1fr;
}

.ft-register__mosaic--contact .ft-register__contact-card {
  height: auto;
}

/* Single-image card — reused on form pages like request-demo.html */
.ft-form-page__image {
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ft-form-page__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-demo-modal__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.ft-demo-modal__image {
  overflow: hidden;
}

.ft-demo-modal__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-demo-modal__form-wrap {
  padding: var(--space-8);
  background: var(--color-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ft-demo-modal__form {
  grid-template-columns: 1fr !important;
}

.ft-signup-modal__intro {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

/* Compliance modal */
.ft-compliance-modal__body {
  padding: var(--space-8) !important;
}

.ft-compliance-modal__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: center;
  justify-items: center;
  margin-bottom: var(--space-8);
}

.ft-compliance-modal__row--last {
  grid-template-columns: 1fr 1fr 2fr;
  margin-bottom: 0;
}

.ft-compliance-modal__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.ft-compliance-modal__logo img {
  max-width: 140px;
  max-height: 100px;
  width: 100%;
  object-fit: contain;
}

.ft-compliance-modal__logo--wide img {
  max-width: 260px;
}

.ft-compliance-modal__logo--caption span {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.4;
}

@media (max-width: 575.98px) {
  .ft-compliance-modal__row {
    grid-template-columns: repeat(2, 1fr);
  }
  .ft-compliance-modal__row--last {
    grid-template-columns: repeat(2, 1fr);
  }
  .ft-compliance-modal__logo--wide {
    grid-column: 1 / -1;
  }
}

/* Contact modal */
.ft-contact-modal__offices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.ft-contact-modal__city {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  padding-left: calc(44px + var(--space-4));
}

.ft-contact-modal__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ft-contact-modal__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.ft-contact-modal__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.ft-contact-modal__emails {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.6rem;
}

.ft-contact-modal__list a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9375rem;
}

.ft-contact-modal__list a:hover {
  text-decoration: underline;
}

.ft-contact-modal__list span:not(.ft-contact-modal__icon):not(.ft-contact-modal__emails) {
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.6;
  padding-top: 0.6rem;
}

@media (max-width: 575.98px) {
  .ft-contact-modal__offices {
    grid-template-columns: 1fr;
  }
}

/* Privacy modal */
.ft-privacy-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.ft-privacy-modal__card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: center;
}

.ft-privacy-modal__card-title {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.ft-privacy-modal__btn {
  width: 100%;
  border-radius: 50px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.8125rem !important;
  padding: 0.65rem 1rem !important;
}

@media (max-width: 767.98px) {
  .ft-privacy-modal__grid {
    gap: var(--space-3);
  }
  .ft-privacy-modal__card-title {
    white-space: nowrap;
    font-size: 0.875rem;
  }
}

@media (max-width: 575.98px) {
  .ft-privacy-modal__grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 767.98px) {
  .modal-content.ft-modal,
  .modal-content.ft-modal.ft-modal--demo {
    border-radius: var(--radius-lg);
  }
  .ft-demo-modal__layout {
    grid-template-columns: 1fr;
  }
  .ft-demo-modal__image {
    height: 150px;
  }
  .ft-demo-modal__form-wrap {
    padding: var(--space-10);
    padding-top: var(--space-4);
  }
  .ft-demo-modal__form-wrap .ft-contact__form-title {
    font-size: 1.3rem;
    margin-bottom: var(--space-2);
  }
  .ft-demo-modal__form .ft-contact__field {
    margin-bottom: var(--space-2);
  }
  .ft-privacy-modal__card {
    padding: var(--space-4) var(--space-6);
  }

}


/* ════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ════════════════════════════════════════════════════════════ */

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease 100ms, transform 0.55s ease 100ms;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate="fade"].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for children */
[data-stagger] > *:nth-child(1) { transition-delay: 100ms; }
[data-stagger] > *:nth-child(2) { transition-delay: 200ms; }
[data-stagger] > *:nth-child(3) { transition-delay: 300ms; }
[data-stagger] > *:nth-child(4) { transition-delay: 400ms; }
[data-stagger] > *:nth-child(5) { transition-delay: 500ms; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Line-by-line reveal */
[data-line-reveal] > span {
  display: block;
  overflow: hidden;
}
[data-line-reveal] > span > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-line-reveal] > span:nth-child(1)  > span { transition-delay: 0ms; }
[data-line-reveal] > span:nth-child(2)  > span { transition-delay: 80ms; }
[data-line-reveal] > span:nth-child(3)  > span { transition-delay: 160ms; }
[data-line-reveal] > span:nth-child(4)  > span { transition-delay: 240ms; }
[data-line-reveal] > span:nth-child(5)  > span { transition-delay: 320ms; }
[data-line-reveal] > span:nth-child(6)  > span { transition-delay: 400ms; }
[data-line-reveal] > span:nth-child(7)  > span { transition-delay: 480ms; }
[data-line-reveal] > span:nth-child(8)  > span { transition-delay: 560ms; }
[data-line-reveal] > span:nth-child(9)  > span { transition-delay: 640ms; }
[data-line-reveal] > span:nth-child(10) > span { transition-delay: 720ms; }
[data-line-reveal] > span:nth-child(11) > span { transition-delay: 800ms; }
[data-line-reveal] > span:nth-child(12) > span { transition-delay: 880ms; }
[data-line-reveal] > span:nth-child(13) > span { transition-delay: 960ms; }
[data-line-reveal] > span:nth-child(14) > span { transition-delay: 1040ms; }
[data-line-reveal] > span:nth-child(15) > span { transition-delay: 1120ms; }
[data-line-reveal] > span:nth-child(16) > span { transition-delay: 1200ms; }
[data-line-reveal] > span:nth-child(17) > span { transition-delay: 1280ms; }
[data-line-reveal] > span:nth-child(18) > span { transition-delay: 1360ms; }
[data-line-reveal].is-visible > span > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-animate], [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Stats & split: scroll-driven drift ────────────────────── */

/* ════════════════════════════════════════════════════════════
   OUR PARTNERS (About Us page)
   ════════════════════════════════════════════════════════════ */

.ft-partners {
  background: #fff;
}

.ft-partners__title {
  color: var(--color-primary);
}

.ft-partners__slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-8);
  outline: none;
}

.ft-partners__logo {
  max-height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ════════════════════════════════════════════════════════════
   OUR CUSTOMERS (About Us page)
   ════════════════════════════════════════════════════════════ */

.ft-our-customers { background: var(--color-light); }

@media (max-width: 575.98px) {
  .ft-our-customers.py-6 {
    padding-top: 40px;
  }
}

.ft-our-customers__layout {
  display: grid;
  grid-template-columns: 1fr 40%;
  gap: var(--space-12);
  align-items: stretch;
}

.ft-our-customers__text {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
}

.ft-our-customers__body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}
.ft-our-customers__body:last-child { margin-bottom: 0; }

.ft-our-customers__image-col {
  display: flex;
}

.ft-our-customers__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  display: block;
}

@media (max-width: 991.98px) {
  .ft-our-customers__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ft-our-customers__image {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* ════════════════════════════════════════════════════════════
   HIGHLIGHTS BENTO (About Us page)
   ════════════════════════════════════════════════════════════ */

.ft-highlights {
  background: #fff;
  padding: 0 var(--space-1) var(--space-16) var(--space-1);
}

/* Flat 3-column grid: photo | col2 | col3 */
.ft-highlights__grid {
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
}

/* Photo cells */
.ft-highlights__photo-cell {
  grid-column: 1;
  grid-row: 1 / 3;
}

.ft-highlights__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

/* Desktop card placement */
.ft-highlights__card--dark   { grid-column: 2; grid-row: 1; }
.ft-highlights__card--light  { grid-column: 2; grid-row: 2; }
.ft-highlights__card--accent { grid-column: 3; grid-row: 1; }
.ft-highlights__card--muted  { grid-column: 3; grid-row: 2; }

.ft-highlights__card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  word-break: break-word;
}

.ft-highlights__card--dark  { background: var(--color-primary); color: #fff; }
.ft-highlights__card--accent { background: #0e2a5c; color: #fff; }
.ft-highlights__card--light { background: #fff; border: 1.5px solid var(--color-border); color: var(--color-text); }
.ft-highlights__card--muted { background: var(--color-light); color: var(--color-text); }

.ft-highlights__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.ft-highlights__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.ft-highlights__icon--muted {
  background: var(--color-border);
  color: var(--color-primary);
}

.ft-highlights__arrow { font-size: 1rem; opacity: 0.45; }

.ft-highlights__number {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  margin: var(--space-2) 0 var(--space-2);
  letter-spacing: -0.02em;
}

.ft-highlights__number--text { font-size: clamp(1.4rem, 2.4vw, 2rem); }

.ft-highlights__sup { font-size: 0.65em; vertical-align: super; line-height: 1; }

.ft-highlights__unit { font-size: 0.52em; font-weight: 400; color: var(--color-muted); letter-spacing: 0; }
.ft-highlights__card--dark .ft-highlights__unit,
.ft-highlights__card--accent .ft-highlights__unit{color: var(--color-white);}
.ft-highlights__card--muted .ft-highlights__unit{color: var(--color-text);}

.ft-highlights__desc { font-size: 0.875rem; line-height: 1.65; margin: 0; opacity: 0.8; }

.ft-highlights__card--light .ft-highlights__desc { opacity: 1; color: var(--color-muted); }
.ft-highlights__card--muted .ft-highlights__desc { opacity: 1; color: var(--color-text); }

/* Tablet & mobile: 2-column flow, photos visible */
@media (max-width: 991.98px) {
  .ft-highlights__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }

  /* Reset explicit placement — let items flow naturally */
  .ft-highlights__photo-cell,
  .ft-highlights__card--dark,
  .ft-highlights__card--light,
  .ft-highlights__card--muted,
  .ft-highlights__card--accent {
    grid-column: auto;
    grid-row: auto;
  }

  /* Single photo spans the full width above the cards */
  .ft-highlights__photo-cell { grid-column: 1 / -1; }

  .ft-highlights__photo { height: 100%; min-height: 160px; }
  .ft-highlights__card { min-height: 0; }
}


/* Mobile: same 2-column layout as tablet */
@media (max-width: 575.98px) {
  .ft-highlights__unit { font-size: 0.72em; }
  .ft-highlights__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: var(--space-2);
  }

  .ft-highlights__number { font-size: clamp(1.3rem, 5vw, 1.75rem); }
  .ft-highlights__number--text { font-size: clamp(1.1rem, 4vw, 1.4rem); }
  .ft-highlights__desc { font-size: 0.75rem; }
  .ft-highlights__icon { width: 45px; height: 45px; font-size: 1.25rem; }
  .ft-highlights__card { padding: var(--space-4) var(--space-4) var(--space-6); }

  .ft-highlights__card--dark,
  .ft-highlights__card--light,
  .ft-highlights__card--muted,
  .ft-highlights__card--accent {
    grid-column: auto;
    grid-row: auto;
  }

  .ft-highlights__photo-cell { grid-column: 1 / -1; grid-row: auto; }
}

/* ════════════════════════════════════════════════════════════
   MEET THE TEAM B — alt layout (About Us page)
   ════════════════════════════════════════════════════════════ */

.ft-team-b { background: var(--color-light); }

.ft-team-b__header {
  max-width: 760px;
  margin-inline: auto;
}

.ft-team-b__subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-muted);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.ft-team-b__slider-wrap {
  overflow: hidden;
  min-width: 0;
}

.ft-team-b__nav-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.ft-team-b__nav {
  display: flex;
  gap: var(--space-2);
}

.ft-team-b__nav .ft-testimonials__arrow {
  background: transparent;
  border-color: transparent;
  color: #111;
}

.ft-team-b__nav .ft-testimonials__arrow:hover,
.ft-team-b__nav .ft-testimonials__arrow:focus-visible {
  background: #e5e5e5;
  border-color: #e5e5e5;
  color: #111;
}

/* Slide wrapper */
.ft-team-b__slide { padding: 0 var(--space-3); outline: none; }

/* Before Slick runs the slides are plain block elements, so the photos flash
   full width. Lay them out like the finished slider and fade the whole thing
   in once it is initialised (JS adds .is-loading, then swaps it for .is-ready). */
.ft-team-b__slider:not(.slick-initialized) {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.ft-team-b__slider:not(.slick-initialized) > .ft-team-b__slide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

@media (max-width: 1199.98px) {
  .ft-team-b__slider:not(.slick-initialized) > .ft-team-b__slide {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (max-width: 767.98px) {
  .ft-team-b__slider:not(.slick-initialized) > .ft-team-b__slide {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.ft-team-b__slider.is-loading { opacity: 0; }

.ft-team-b__slider.is-ready {
  opacity: 1;
  transition: opacity 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .ft-team-b__slider.is-ready { transition: none; }
}

/* Card */
.ft-team-b-card { display: block; }

.ft-team-b-card__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ft-team-b-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 400ms ease;
}

.ft-team-b-card:hover .ft-team-b-card__photo { transform: none; }

/* Desktop hover overlay */
.ft-team-b-card__photo-wrap .ft-team-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 380ms ease, transform 380ms ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-6);
  overflow-y: auto;
  color: var(--color-text);
}

.ft-team-b-card:hover .ft-team-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Bio inside hover overlay */
.ft-team-b-card__photo-wrap .ft-team-card__bio {
  margin-bottom: var(--space-4);
}
.ft-team-b-card__photo-wrap .ft-team-card__bio-name {
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: var(--color-text);
}
.ft-team-b-card__photo-wrap .ft-team-card__bio-role {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0;
}

/* Facts inside hover overlay */
.ft-team-b-card__photo-wrap .ft-team-card__facts {
  list-style: none;
  padding: 0 ;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.ft-team-b-card__photo-wrap .ft-team-card__fact {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text);
}
.ft-team-b-card__photo-wrap .ft-team-card__fact:last-child { border-bottom: none; }
.ft-team-b-card__photo-wrap .ft-team-card__fact > i {
  color: var(--color-primary-medium);
  font-size: 0.8rem;
  flex-shrink: 0;
  width: 14px;
}
.ft-team-b-card__photo-wrap .ft-team-card__fact > div {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-wrap: wrap;
}
.ft-team-b-card__photo-wrap .ft-team-card__fact > div > span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-primary-medium);
  font-weight: 700;
  flex-shrink: 0;
}
/* Long-text facts: stacked */
.ft-team-b-card__photo-wrap .ft-team-card__fact:has(.bi-heart) > div,
.ft-team-b-card__photo-wrap .ft-team-card__fact:has(.bi-lightbulb) > div,
.ft-team-b-card__photo-wrap .ft-team-card__fact:has(.bi-star) > div,
.ft-team-b-card__photo-wrap .ft-team-card__fact:has(.bi-geo-alt) > div {
  flex-direction: column;
  gap: 2px;
}

.ft-team-b-card__name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  color: var(--color-text);
  margin: var(--space-3) 0 2px;
  line-height: 1.3;
}

.ft-team-b-card__role {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}


@media (max-width: 767.98px) {
  .ft-team-b__slider .slick-slide,
  .ft-team-b__slider .slick-slide > div {
    height: 100%;
  }

  .ft-team-b__slide {
    padding: 0 var(--space-2);
    height: 100%;
  }

  /* Card becomes 2-column grid; height driven by bio content */
  .ft-team-b-card {
    display: grid;
    grid-template-columns: 38% 62%;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    height: 100%;
  }

  /* photo-wrap disappears from layout — img and overlay become grid children */
  .ft-team-b-card__photo-wrap {
    display: contents;
  }

  /* Photo fills column 1, stretches to full row height */
  .ft-team-b-card__photo {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: none;
  }

  /* Overlay becomes column 2, in-flow, height drives the card */
  .ft-team-b-card__photo-wrap .ft-team-card__overlay {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    inset: unset;
    opacity: 1 !important;
    background: #fff;
    padding: var(--space-6) var(--space-4);
    border-radius: 0;
    overflow-y: visible;
    align-items: flex-start;
  }

  /* Name/role below photo hidden — bio has its own */
  .ft-team-b-card__name,
  .ft-team-b-card__role {
    display: none;
  }

  .ft-team-card__facts {
    gap: var(--space-2);
  }

  .ft-team-card__bio-name { font-size: 1rem; }
  .ft-team-card__bio-role { font-size: 0.75rem; }
}

/* Mobile ≤575px: redesigned card — circular photo + name/role header + facts table */
@media (max-width: 575.98px) {
  .ft-team-b-card {
    display: grid;
    grid-template-columns: 1fr 104px;
    grid-template-rows: auto auto;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    overflow: hidden;
    padding: 0;
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    height: auto;
  }

  /* photo-wrap dissolved — photo + overlay become grid children */
  .ft-team-b-card__photo-wrap {
    display: contents;
  }

  /* overlay dissolved — bio + facts become grid children */
  .ft-team-b-card__photo-wrap .ft-team-card__overlay {
    display: contents;
    position: static;
    opacity: 1 !important;
    background: transparent;
    padding: 0;
  }
  .ft-team-b-card__photo-wrap .ft-team-card__facts {
    margin: 0 20px;
  }

  /* Circular photo: col 2, row 1, top-right */
  .ft-team-b-card__photo {
    grid-column: 2;
    grid-row: 1;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    align-self: start;
    justify-self: end;
    margin-top: var(--space-4);
    margin-right: var(--space-4);
  }

  /* Bio (name + role): col 1, row 1 */
  .ft-team-card__bio {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding-top: calc(var(--space-4) + var(--space-2));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .ft-team-card__bio-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
  }

  .ft-team-card__bio-role {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-style: italic;
  }

  /* Facts: full width, row 2 */
  .ft-team-card__facts {
    grid-column: 1 / -1;
    grid-row: 2;
    list-style: none;
    margin: -20px var(--space-4) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Each fact row */
  .ft-team-card__fact {
    display: flex;
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    gap: 0;
  }

  .ft-team-card__fact:last-child {
    border-bottom: none;
    padding-bottom: var(--space-4);
  }

  /* Hide icon */
  .ft-team-card__fact > i {
    display: none;
  }

  /* Fact inner div: label + value inline */
  .ft-team-card__fact > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    width: 100%;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
  }

  /* Label */
  .ft-team-card__fact > div > span {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primary-medium);
    font-weight: 700;
    line-height: 1.5;
    flex-shrink: 0;
  }

  /* Long-text facts: label stacked above text */
  .ft-team-card__fact:has(.bi-heart) > div,
  .ft-team-card__fact:has(.bi-lightbulb) > div,
  .ft-team-card__fact:has(.bi-star) > div,
  .ft-team-card__fact:has(.bi-geo-alt) > div {
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .ft-team-b-card__name,
  .ft-team-b-card__role {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   MEET THE TEAM (About Us page)
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   TESTIMONIALS (About Us page)
   ════════════════════════════════════════════════════════════ */

.ft-testimonials {
  background: #fff;
}

.ft-testimonials__header {
  gap: var(--space-6) ;
}

.ft-testimonials__arrows {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  justify-content: flex-end;
}

.ft-testimonials__arrow {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1;
}

.ft-testimonials__arrow:hover,
.ft-testimonials__arrow:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  outline: none;
}

.ft-testimonials__slider {
  margin: -30px -12px 0 -12px;
}

/* Equal-height cards: make track + slides flex so all stretch to tallest */
.ft-testimonials__slider .slick-track {
  display: flex !important;
}

.ft-testimonials__slider .slick-slide {
  display: flex !important;
  height: auto;
}

.ft-testimonials__slider .slick-slide > div {
  display: flex;
  width: 100%;
}

.ft-testimonials__slide {
  padding: 12px;
  outline: none;
  display: flex !important;
  width: 100%;
}

/* ── Testimonials Spotlight (split layout) ───────────────── */
.ft-spotlight {
  background: var(--color-light);
}

.ft-spotlight__layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-12);
  align-items: start;
}

.ft-spotlight__sidebar {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ft-spotlight__rating-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  text-align: center;
}

.ft-spotlight__score {
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.ft-spotlight__stars {
  color: #f4a623;
  font-size: 1rem;
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.ft-spotlight__rating-label {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0;
}

.ft-spotlight__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Right column */
.ft-spotlight__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Hero pull-quote */
.ft-spotlight__hero {
  background: #15356b;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-10) var(--space-8);
  position: relative;
  overflow: hidden;
}

.ft-spotlight__deco {
  position: absolute;
  top: var(--space-6);
  right: var(--space-8);
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  pointer-events: none;
}

.ft-spotlight__hero .ft-spotlight__stars {
  justify-content: flex-start;
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}

.ft-spotlight__hero-quote {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-white);
  margin: 0 0 var(--space-8);
  padding: 0;
  border: none;
  font-style: normal;
}

.ft-spotlight__hero-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-6);
}

.ft-spotlight__hero-author .ft-spotlight__author-name {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
  margin: 0;
}

.ft-spotlight__hero-author .ft-spotlight__author-company {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8125rem;
  margin: 0;
}

/* Avatar monogram */
.ft-spotlight__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  flex-shrink: 0;
  overflow: hidden;
}

.ft-spotlight__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ft-spotlight__hero .ft-spotlight__avatar {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Grid of 7 cards */
.ft-spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.ft-spotlight__card {
  background: var(--color-white);
  border: 1px solid #e7eaf1;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ft-spotlight__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(21, 53, 107, 0.08);
}

.ft-spotlight__card .ft-spotlight__stars {
  justify-content: flex-start;
  font-size: 0.875rem;
  margin: 0;
}

.ft-spotlight__quote {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  flex: 1;
}

.ft-spotlight__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid #e7eaf1;
  margin-top: auto;
}

.ft-spotlight__author-name {
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  color: var(--color-text);
  margin: 0;
}

.ft-spotlight__author-company {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}

/* Responsive */
@media (max-width: 1023.98px) {
  .ft-spotlight__layout {
    grid-template-columns: 1fr;
  }
  .ft-spotlight__sidebar {
    position: static;
  }
}

@media (max-width: 639.98px) {
  .ft-spotlight__grid {
    grid-template-columns: 1fr;
  }
  .ft-spotlight__ctas .btn {
    width: 100%;
  }
}

/* ── Testimonials auto-scroll carousel ───────────────────── */
.ft-tcarousel {
  background: var(--color-light);
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .ft-tcarousel {
    margin-top: 0;
    padding-top: var(--space-12) !important;
  }
}

/* Hide slider content before Slick initializes to prevent layout flash */
.ft-tcarousel__slider:not(.slick-initialized) {
  opacity: 0;
}
.ft-tcarousel__slider.slick-initialized {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.ft-tcarousel__slider {
  padding-bottom: var(--space-4);
}

.ft-tcarousel__slider .slick-list {
  height: auto !important;
}

.ft-tcarousel__slider .slick-track {
  display: flex !important;
  align-items: stretch;
}

.ft-tcarousel__slider .slick-slide {
  height: auto !important;
  display: flex !important;
  flex-direction: column;
}

.ft-tcarousel__slider .slick-slide > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}


.ft-tcarousel__slide {
  padding: 0 var(--space-3);
}

.ft-tcarousel__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ft-tcarousel__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(21, 53, 107, 0.08);
}

.ft-tcarousel__stars {
  color: #f4a623;
  font-size: 0.875rem;
  display: flex;
  gap: 2px;
}

.ft-tcarousel__quote {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ft-tcarousel__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.ft-tcarousel__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  flex-shrink: 0;
  overflow: hidden;
}

.ft-tcarousel__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ft-tcarousel__name {
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  color: var(--color-text);
  margin: 0;
}

.ft-tcarousel__company {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}

/* ── Testimonials masonry grid ──────────────────────────── */
.ft-tgrid-section {
  background: var(--color-light);
}

.ft-tgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.ft-tgrid__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ft-tcard {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
}

.ft-tcard--featured {
  background: var(--color-primary);
}

.ft-tcard__bigquote {
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
}

.ft-tcard__stars {
  color: #f5a623;
  font-size: 0.875rem;
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-3);
}

.ft-tcard__quote {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: none;
}

.ft-tcard--featured .ft-tcard__quote {
  color: var(--color-white);
}

.ft-tcard__divider {
  border-color: var(--color-border);
  margin: var(--space-4) 0;
  opacity: 1;
}

.ft-tcard--featured .ft-tcard__divider {
  border-color: rgba(255, 255, 255, 0.2);
}

.ft-tcard__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ft-tcard__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-white);
  overflow: hidden;
}

.ft-tcard__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ft-tcard__avatar--white {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

.ft-tcard__name {
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
  color: var(--color-text);
  margin: 0;
}

.ft-tcard--featured .ft-tcard__name {
  color: var(--color-white);
}

.ft-tcard__company {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}

.ft-tcard--featured .ft-tcard__company {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1199.98px) {
  .ft-tgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .ft-tgrid { grid-template-columns: 1fr; }
}

/* ── (legacy slider card) ──────────────────────────────── */
.ft-testimonial-card {
  background:var(--color-light);
  border-radius: var(--radius-lg);
  border: none;
  padding: var(--space-8);
  display: flex !important;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  transition: background 350ms ease, border-color 350ms ease, box-shadow 350ms ease, opacity 350ms ease;
}


.ft-testimonial-card__stars {
  display: flex;
  gap: 3px;
  font-size: 1.25rem;
  color: #F5A623;
  line-height: 1;
  margin-bottom: var(--space-6);
}

.ft-testimonial-card__quote {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text);
  font-style: normal;
  margin: 0;
  flex: 1;
}


.ft-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ft-testimonial-card__logo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #e8f1f8;
  border: 2px solid rgba(24, 69, 131, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.ft-testimonial-card__initials {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}


.ft-testimonial-card__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.ft-testimonial-card__name {
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}


.ft-testimonial-card__company {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
  margin-top: 2px;
  line-height: 1.3;
}


/* Slick dots */
.ft-testimonials__slider .slick-dots {
  display: none !important;
  padding: 0;
  list-style: none;
}

.ft-testimonials__slider .slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}

.ft-testimonials__slider .slick-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  font-size: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.ft-testimonials__slider .slick-dots li button::before {
  display: none;
}

.ft-testimonials__slider .slick-dots li.slick-active button {
  background: var(--color-primary);
  transform: scale(1.4);
}

@media (max-width: 991.98px) {
  .ft-testimonials__header {
    flex-direction: column;
    gap: var(--space-4);
  }
  .ft-testimonials__arrows {
    padding-top: 0;
  }
}

/* ── Disable hover MOTION on touch/mobile devices ───────────────────
   Only the movement/filter effects are dropped. Colours and borders keep
   whatever the stylesheet defines — `revert` here used to hand them back
   to the UA sheet, which repainted tapped buttons and links in the
   browser's default blue. */

@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .btn:focus-visible,
  a:hover {
    transform: none !important;
    filter: none !important;
  }
  .ft-side-panel__link:hover { background: transparent !important; }
  .ft-footer__nav a:hover,
  .ft-footer__modal-trigger:hover { font-weight: var(--font-weight-light) !important; }
}

/* ════════════════════════════════════════════════════════════
   WHAT WE DO page
   ════════════════════════════════════════════════════════════ */

.ft-wwd-tech {
  background: #fff;
}

@media (max-width: 575.98px) {
  .ft-wwd-tech {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .ft-wwd-features {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.ft-wwd-tech__layout {
  display: grid;
  grid-template-columns: 1fr 45%;
  gap: var(--space-16);
  align-items: center;
}

.ft-wwd-tech__text {
  display: flex;
  flex-direction: column;
}

.ft-wwd-tech__body {

  margin-top: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
}

.ft-wwd-tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--space-3);
  column-gap: var(--space-3);
  align-content: center;
}

.ft-wwd-tech__img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.ft-wwd-tech__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.ft-wwd-tech__img-wrap:hover .ft-wwd-tech__img {
  transform: scale(1.04);
}

@media (max-width: 991.98px) {
  .ft-wwd-tech__layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

}

@media (max-width: 575.98px) {
  .ft-wwd-tech__grid {
    gap: var(--space-3);
  }

}

/* ── What sets us apart ────────────────────────────────────── */

.ft-wwd-features {
  background: var(--color-light);
}

.ft-wwd-features__heading {
  font-family: 'AxiformaBold', Helvetica, Arial, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1em;
  letter-spacing: -0.02em;
  max-width: 1020px;
  margin-inline: auto;
}

.ft-wwd-features__subline {
  color: var(--color-muted);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

.ft-wwd-features__bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.ft-wwd-feature__icon .fareteam-icon{
  grid-column: 1;
  grid-row: 1;
  width: 47px;
  height: 47px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ft-wwd-feature {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-6);
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  align-content: start;
}

.ft-wwd-feature--span2 {
  grid-column: span 2;
}

.ft-wwd-feature--image {
  padding: 0;
  overflow: hidden;
  background-size: cover;
  background-position:center;
  background-repeat: no-repeat;
}

.ft-wwd-feature--image img {
  display: none;
}

.ft-wwd-feature__icon {
  grid-column: 1;
  grid-row: 1;
  width: 47px;
  height: 47px;
  border: none;
  border-radius: 50%;
  background: #e8f1f8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-medium);
  font-size: 1.25rem;
}

.ft-wwd-feature__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
  align-self: center;
}

.ft-wwd-feature__text {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 991.98px) {
  .ft-wwd-features__bento {
    grid-template-columns: 1fr 1fr;
  }

  .ft-wwd-feature--span2 {
    grid-column: span 2;
  }
}

@media (max-width: 575.98px) {
  .ft-wwd-feature--image {
    min-height: 250px !important;
  }

  .ft-wwd-features__heading {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.2;
  }

  .ft-wwd-features__subline {
    display: block;
    margin-top: var(--space-2);
  }

  .ft-wwd-features__bento {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .ft-wwd-feature--span2 {
    grid-column: span 1;
  }
}


/* ── Support banner ────────────────────────────────────────── */

.ft-wwd-support {
  background: #fff /*var(--color-light)*/;
  padding: var(--space-12) 0 var(--space-16) 0;
}

.ft-wwd-support__bg { display: none; }

.ft-wwd-support__layout {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: var(--space-8);
  align-items: stretch;
}
.ft-wwd-suport__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
  height: 90%;
  align-self: center;
}
.ft-wwd-tech__img{
  border-radius: var(--radius-lg);
}
.ft-wwd-support__img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}

.ft-wwd-support__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.ft-wwd-support__img-wrap:hover .ft-wwd-support__img {
  transform: scale(1.04);
}

.ft-wwd-support__img-col {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
}

.ft-wwd-support__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-wwd-support__text {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-10) var(--space-8);
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ft-wwd-support__text::before {
  display: none;
}

.ft-wwd-support__quote {
  position: relative;
  z-index: 1;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}

.ft-wwd-support__lead {
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: var(--space-6) 0 0 0;
}

.ft-wwd-support__card {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-14) var(--space-10);
}

.ft-wwd-support__list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0 0;
}

.ft-wwd-support__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.1rem;
  color: var(--color-text);
  font-family: 'AxiformaLight', Helvetica, Arial, sans-serif;
  font-weight: 400;
  padding: var(--space-1) 0;
}

.ft-wwd-support__item:first-child {
  padding-top: 0;
}

.ft-wwd-support__check {
  font-size: 1.5rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .ft-wwd-support__layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .ft-wwd-support__img-col {
    min-height: 240px;
  }

  .ft-wwd-support__text {
    padding: var(--space-8) var(--space-6);
  }

  .ft-wwd-support__card {
    padding: var(--space-8);
  }

  /* Align the image grid with the text card's horizontal padding */
  .ft-wwd-suport__grid {
    height: auto;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (max-width: 575.98px) {
  .ft-wwd-support {
    padding: var(--space-10) 0;
  }
}

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════════════════ */

/* Quick contact channels */
.ft-contact-channels {
  background: #fff;
}

.ft-contact-channels__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ft-contact-channel {
  background: #fff;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ft-contact-channel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ft-contact-channel:nth-child(1) { transition-delay: 0ms; }
.ft-contact-channel:nth-child(2) { transition-delay: 100ms; }
.ft-contact-channel:nth-child(3) { transition-delay: 200ms; }
.ft-contact-channel:nth-child(4) { transition-delay: 300ms; }

.ft-contact-channel__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-round);
  background: #e8f1f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary-medium);
  flex-shrink: 0;
}

.ft-contact-channel__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ft-contact-channel__name {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.ft-contact-channel__email {
  font-size: 0.85rem;
  color: var(--color-muted);
  text-decoration: none;
  line-height: 1.2;
}

.ft-contact-channel__email:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .ft-contact-channels__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ft-contact-channel:nth-child(2) { border-right: none; }
  .ft-contact-channel:nth-child(1),
  .ft-contact-channel:nth-child(2) { border-bottom: 1px solid var(--color-border); }
}

@media (max-width: 575.98px) {
  .ft-contact-channels__grid {
    grid-template-columns: 1fr;
  }
  .ft-contact-channel { border-right: none; border-bottom: 1px solid var(--color-border); }
  .ft-contact-channel:last-child { border-bottom: none; }
}

/* ── New contact page layout ─────────────────────────────── */
.ft-contact-main {
  background: var(--color-white);
}

.ft-contact-main__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.ft-contact-main__channels {
  position: sticky;
  top: 100px;
}

/* Sidebar variant: channels in 2-col grid */
.ft-contact-channels__grid--sidebar {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.ft-contact-channels__grid--sidebar .ft-contact-channel {
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  flex-direction: column;
  align-items: flex-start;
}

/* Offices section */
.ft-contact-offices {
  background: var(--color-light);
}

.ft-contact-offices__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.ft-contact__office-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ft-contact__office-card .ft-contact__office-info {
  padding: var(--space-6) var(--space-8);
}

.ft-contact__office-card .ft-contact__map {
  height: 100%;
  position: relative;
}

.ft-contact__map-label {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-medium);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
@media(max-width: 991.98px) {
  .ft-contact__map-label {
    bottom: 17%;
  }
}
.ft-contact__office-card .ft-contact__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-contact__map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  padding: var(--space-2) var(--space-6);
  width: fit-content;
  transition: background 0.2s ease, color 0.2s ease;
}

.ft-contact__map-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

.ft-contact-main__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: stretch;
}

.ft-contact-main__photo {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.ft-contact-promise {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease 0ms, transform 0.4s ease 0ms;
}
.ft-contact-promise.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ft-contact-main__photo {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease 100ms, transform 0.4s ease 100ms;
}
.ft-contact-main__photo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ft-contact-promise__label {
  font-size: 0.7875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin: 0 0 var(--space-4);
}

.ft-contact-promise__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ft-contact-promise__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1rem;
  color: rgba(255,255,255,0.95);
  line-height: 1.5;
  max-width: none;
}

.ft-contact-promise__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}

.ft-contact__office-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ft-contact__office-col .ft-contact__map iframe,
.ft-contact__office-col .ft-contact__map img {
  width: 70%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

@media (max-width: 991.98px) {
  .ft-contact-main__layout {
    grid-template-columns: 1fr;
  }
  .ft-contact-main__channels {
    position: static;
  }
  .ft-contact-channels__grid--sidebar {
    grid-template-columns: repeat(2, 1fr);
  }
  .ft-contact-offices__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .ft-contact-promise__list {
    gap: var(--space-4);
  }

}

@media (max-width: 575.98px) {
  .ft-contact-channels__grid--sidebar {
    grid-template-columns: 1fr;
  }
  .ft-contact__office-card {
    grid-template-columns: 1fr;
  }
  .ft-contact__office-card .ft-contact__map {
    height: 220px;
  }
  .ft-contact-main__bottom {
    grid-template-columns: 1fr;
  }
  .ft-contact-main__photo {
    min-height: 400px;
    max-height: 400px;
  }
  .ft-contact-channels__grid--sidebar .ft-contact-channel {
    flex-direction: row;
    align-items: center;
  }
  .ft-contact-main__layout {
    gap: var(--space-6);
  }
  .ft-contact-main {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .ft-contact-offices {
    padding-top: 40px;
  }
  .ft-contact-main__channels {
    display: flex;
    flex-direction: column;
  }
  .ft-contact-main__bottom {
    display: contents;
  }
  .ft-contact-main__photo {
    order: -1;
    margin-bottom: 12px;
  }
  .ft-contact-promise {
    order: 1;
  }
}
@media (max-width: 475.98px) {
  .ft-contact-main__photo {
    min-height: 340px;
    max-height: 340px;
  }
}
.ft-contact {
  background: var(--color-light);
}

.ft-contact__layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-16);
  align-items: start;
}

/* Form section 2-col layout */
.ft-contact-form__layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-12);
  align-items: center;
}

.ft-contact-form__image {

  overflow: hidden;
  height: 100%;
}

.ft-contact-form__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

/* Form card */
.ft-contact__form-card {
  border-radius: var(--radius-lg);
  background: var(--color-light);
  padding: var(--space-12) var(--space-8);
}

.ft-contact__form-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-8);
}

.ft-contact__form-title:has(+ .ft-contact__form-intro) {
  margin-bottom: var(--space-3);
}

.ft-contact__form-intro {
  color: var(--color-muted);
  margin-bottom: var(--space-8);
}

.ft-contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
}

.ft-contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.ft-contact__field--full {
  grid-column: 1 / -1;
}

.ft-contact__submit {
  grid-column: 1 / -1;
  width: fit-content;
}

.ft-contact__field label {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}

.ft-contact__required {
  color: #c00;
}

.ft-contact__field input,
.ft-contact__field textarea {
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
  min-height: 44px;
}

.ft-contact__field textarea {
  min-height: 120px;
}

.ft-contact__field input:focus,
.ft-contact__field textarea:focus {
  border-color: var(--color-primary-medium);
  box-shadow: 0 0 0 3px rgba(89, 153, 194, 0.2);
}

.ft-contact__field-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.ft-contact__field-row .ft-contact__field {
  margin-bottom: 0;
  min-width: 0;
}

@media (max-width: 1199.98px) {
  .ft-contact__field-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-6);
  }
}

.ft-contact__group-size {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.ft-contact__group-size-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ft-contact__group-size-item label {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  text-align: left;
}

.ft-contact__group-size-item input {
  text-align: center;
  padding-inline: 0.5rem;
}

@media (max-width: 575.98px) {
  .ft-contact__group-size {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
}

.ft-contact__field textarea {
  resize: vertical;
  min-height: 110px;
}

.ft-contact__submit {
  margin-top: var(--space-2);
}

/* Info column */
.ft-contact__info-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-12);
}

.ft-contact__offices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.ft-contact__office {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  direction: rtl;
}

.ft-contact__office > * {
  direction: ltr;
}

.ft-contact__office-info {
  display: flex;
  flex-direction: column;
}

.ft-contact__map {
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: stretch;
}

.ft-contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;

}

.ft-contact__city {
  font-size: 1.5625rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.ft-contact__emails {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ft-contact__emails li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
}

.ft-contact__emails li .bi,
.ft-contact__phone .bi,
.ft-contact__address .bi {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: 0.95rem;
}

.ft-contact__emails a,
.ft-contact__phone a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.95rem;
}

.ft-contact__emails a:hover,
.ft-contact__phone a:hover {
  text-decoration: underline;
}

.ft-contact__phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-bold);
}

.ft-contact__phone a {
  font-size: 0.95rem;
  color: var(--color-muted);
}

.ft-contact__address {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.ft-contact__hours {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.ft-contact__hours .bi {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: 0.95rem;
  margin-top: 1px;
}

.ft-contact__hours-label {
  font-weight: var(--font-weight-bold);
  margin-bottom: 2px;
}

.ft-contact__map {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ft-contact__map iframe {
  display: block;
  border-radius: var(--radius-sm);
}

/* Responsive */
@media (max-width: 991.98px) {
  .ft-contact__layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 575.98px) {
  .ft-contact__offices {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .ft-contact__form-card {
    padding: var(--space-6);
    padding-top: var(--space-10);
  }
}

/* ── Groups CTA ─────────────────────────────────────────── */

.ft-groups-cta {
  background: var(--color-light);
  padding: var(--space-16) 0;
}

.ft-groups-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

.ft-groups-cta__heading {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.ft-groups-cta__divider {
  width: 60px;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
}

.ft-groups-cta__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── News ───────────────────────────────────────────────── */

.ft-news {
  background: var(--color-light);
}

@media (max-width: 575.98px) {
  .ft-news {
    padding-top: 40px;
  }
}

.ft-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.ft-news-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.ft-news-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.ft-news-card__img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 46.875%;
}

.ft-news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.ft-news-card:hover .ft-news-card__img {
  transform: scale(1.04);
}

.ft-news-card__logo-wrap {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.ft-news-card__airline-logo {
  height: 28px;
  width: auto;
  display: block;
}

.ft-news-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ft-news-card__date {
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-3);
}

.ft-news-card__title {
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  margin-bottom: var(--space-3);
}

.ft-news-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.ft-news-card__title a:hover {
  color: var(--color-primary);
}

.ft-news-card__excerpt {
  font-size: 0.9375rem;
  font-family: 'AxiformaLight', Helvetica, Arial, sans-serif;
  color: var(--color-text);
  line-height: 1.65;
  flex: 1;
  margin-bottom: var(--space-4);
}

.ft-news-card__read-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.ft-news-card__read-more::after {
  content: '→';
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.ft-news-card__read-more:hover {
  color: var(--color-primary);
}

.ft-news-card__read-more:hover::after {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

@media (max-width: 991.98px) {
  .ft-news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .ft-news__grid {
    grid-template-columns: 1fr;
  }
}


/* ==================================================================
   RESPONSIVE — breakpoint tweaks
   ================================================================== */

/* ─── Breakpoints ───────────────────────────────────────────── */
/*
  Mobile-first approach.
  xs  < 480px   (default — no media query needed)
  sm  ≥ 480px
  md  ≥ 768px
  lg  ≥ 1024px
  xl  ≥ 1280px
  2xl ≥ 1440px
*/

@media (min-width: 480px) {
  /* sm */
}

@media (min-width: 768px) {
  /* md */
  h1 { font-size: clamp(2rem, 5vw, var(--font-size-4xl)); }
  h2 { font-size: clamp(1.5rem, 4vw, var(--font-size-3xl)); }
}

@media (min-width: 1024px) {
  /* lg */
}

@media (min-width: 1280px) {
  /* xl */
}

@media (min-width: 1440px) {
  /* 2xl */
}

/* ─── Reduced Motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==================================================================
   WORDPRESS ADDITIONS
   Styles with no equivalent in the static build: the news category
   filter, pagination, WPForms mapping and single-post extras.
   ================================================================== */

/* ─── News: category filter bar ─────────────────────────────── */

.ft-news-filter {
  margin-bottom: var(--space-8, 2rem);
}

.ft-news-filter__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.ft-news-filter__link {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 999px;
  color: var(--color-text, rgb(34, 37, 41));
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ft-news-filter__link:hover,
.ft-news-filter__link:focus-visible {
  border-color: var(--color-blue-dark, #184583);
  color: var(--color-blue-dark, #184583);
}

.ft-news-filter__link.is-active {
  background-color: var(--color-blue-dark, #184583);
  border-color: var(--color-blue-dark, #184583);
  color: #fff;
}

/* ─── News: empty state ─────────────────────────────────────── */

.ft-news__empty {
  padding: 3rem 0 4rem;
}

.ft-news__empty .section-subtitle {
  margin-inline: auto;
}

/* ─── Pagination ────────────────────────────────────────────── */

.ft-pagination {
  margin-top: 3.5rem;
}

.ft-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ft-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  color: var(--color-text, rgb(34, 37, 41));
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ft-pagination .page-numbers:hover,
.ft-pagination .page-numbers:focus-visible {
  border-color: var(--color-blue-dark, #184583);
  color: var(--color-blue-dark, #184583);
}

.ft-pagination .page-numbers.current {
  background-color: var(--color-blue-dark, #184583);
  border-color: var(--color-blue-dark, #184583);
  color: #fff;
}

.ft-pagination .page-numbers.dots {
  border-color: transparent;
}

/* ─── Single post (article) ─────────────────────────────────────
   Lifted from the <style> block inside sample-news.html — these rules
   never existed in components.css. The mobile .ft-hero--slim override
   is scoped to .ft-single so it cannot affect other pages.
   ─────────────────────────────────────────────────────────────── */

.ft-article {
  padding: 1.5rem 0 5rem;
}

.ft-article__title-wrap {
  max-width: 750px;
  margin: 0 auto 1.5rem auto;
}
.ft-article__inner {
  max-width: 1000px;
  margin: 0px auto 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  background: #fff;
}
@media (min-width: 768px) {
  .ft-article {
    padding-top: 0;
  }
  .ft-article__title-wrap {
    transform: translateY(-20%);
    position: relative;
    z-index: 10;
    max-width: 750px;
  }
  .ft-article__inner {
    max-width: 1000px;
    margin: -30px auto 0 auto;
  }
}
@media (max-width: 575.98px) {
  .ft-article__inner {
    padding: 1.25rem;
    border: none;
    border-radius: 0;
  }
}
/* Single post: push the hero image below the fixed navbar so the photo's top
   edge stays visible. --ft-nav-h is published by main.js. */
.ft-single .ft-hero.ft-hero--slim .hero-bg {
  top: var(--ft-nav-h, 88px);
}

@media (max-width: 767.98px) {
  .ft-single .ft-hero.ft-hero--slim {
    height: auto !important;
    min-height: 0 !important;
    display: block;
    padding-top: 70px;
    background-color: var(--bs-primary);
  }
  .ft-single .ft-hero.ft-hero--slim .hero-bg {
    position: relative !important;
    inset: unset !important;
    width: 100%;
    padding-bottom: 46.875%;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-color: var(--bs-primary);
  }
  .ft-single .ft-hero.ft-hero--slim .hero-overlay,
  .ft-single .ft-hero.ft-hero--slim .hero-content {
    display: none;
  }
}

.ft-article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  /* WCAG 1.4.3: --color-primary-medium (#5999c2) is 3.11:1 on white,
     short of the 4.5:1 this 14px link needs. #2f6d99 gives 5.57:1. */
  color: #2f6d99;
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 200ms;
}
.ft-article__back:hover { color: var(--color-blue-dark); }
.ft-article__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.ft-article__date {
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.ft-article__tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-medium);
  background: #e8f1f8;
  padding: 3px 10px;
  border-radius: 100px;
}
.ft-article__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text);
  background: #fff;
	border: 1px solid var(--color-border);	
  border-radius: var(--radius-lg);
  padding: 2.8rem 2rem;
  margin: 0 0 2rem;
  text-align: center;
}
.ft-article__hero-img {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 2.5rem;
  display: block;
  max-height: 480px;
  object-fit: cover;
}
.ft-article__body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
}
.ft-article__body p { margin-bottom: 1.25rem; }
.ft-article__body h2 {
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold);
  margin: 2.5rem 0 1rem;
  color: var(--color-text);
}
.ft-article__body ul {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}
.ft-article__body ul li { margin-bottom: 0.5rem; }
.ft-article__body strong { color: var(--color-text); }
.ft-article__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0;
}
.ft-article__cta-box {
  background: var(--color-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  margin-top: 2.5rem;
}
@media (max-width: 575.98px) {
  .ft-article__cta-box .btn {
    display: block;
    width: 100%;
    margin: 0 0 0.75rem !important;
  }
  .ft-article__cta-box .btn:last-child { margin-bottom: 0 !important; }
  .ft-article__title {
    padding: 1.8rem 1rem;
}
}
.ft-article__cta-box p {
  font-size: 1rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.ft-article__schedule-img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
  margin: 0;
  padding: 0;
}

/* ─── Generic page.php content ──────────────────────────────── */

/* Full-bleed content column. The global `p { max-width: 70ch }` rule from
   the original main.css would otherwise keep paragraphs narrow, so it is
   released here — this is the one template meant to span the full width. */
.ft-page-content {
  width: 100%;
  max-width: 100%;
}

.ft-page-content p,
.ft-page-content ul,
.ft-page-content ol,
.ft-page-content blockquote {
  max-width: 100%;
}

.ft-page-content > :first-child {
  margin-top: 0;
}

.ft-page-content img,
.ft-article__body img {
  max-width: 100%;
  height: auto;
}

.ft-page-content .alignwide,
.ft-page-content .alignfull {
  max-width: 100%;
}

.ft-page-content .wp-caption-text,
.ft-article__body .wp-caption-text {
  color: var(--color-muted, #414f62);
  font-size: 0.875rem;
}

/* ─── WPForms: map the Fareteam form look onto plugin markup ── */

.ft-form-wrap .wpforms-container,
.ft-form-wrap .wpforms-form {
  margin: 0;
}

.ft-form-wrap .wpforms-field {
  padding: 0 0 1.25rem;
}

.ft-form-wrap .wpforms-field-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text, rgb(34, 37, 41));
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold, 700);
}

.ft-form-wrap .wpforms-required-label {
  color: var(--color-accent, #32a1a3);
}

.ft-form-wrap input[type="text"],
.ft-form-wrap input[type="email"],
.ft-form-wrap input[type="tel"],
.ft-form-wrap input[type="number"],
.ft-form-wrap input[type="url"],
.ft-form-wrap select,
.ft-form-wrap textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background-color: #fff;
  color: var(--color-text, rgb(34, 37, 41));
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
}

.ft-form-wrap input:focus,
.ft-form-wrap select:focus,
.ft-form-wrap textarea:focus {
  border-color: var(--color-blue-dark, #184583);
  outline: 2px solid var(--color-accent, #32a1a3);
  outline-offset: 2px;
}

.ft-form-wrap .wpforms-submit-container {
  padding-top: 0.5rem;
}

.ft-form-wrap button[type="submit"],
.ft-form-wrap .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: var(--radius-md, 8px);
  background-color: var(--color-blue-dark, #184583);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--font-weight-bold, 700);
  cursor: pointer;
  transition: background-color .2s ease;
}

.ft-form-wrap button[type="submit"]:hover,
.ft-form-wrap .wpforms-submit:hover {
  background-color: var(--color-blue-mid, #5999c2);
}

.ft-form-wrap .wpforms-error {
  color: var(--color-accent, #32a1a3);
  font-size: 0.875rem;
}

/* Administrator-only notice shown until a form ID is configured. */
.ft-form-placeholder {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--color-accent, #32a1a3);
  border-radius: var(--radius-md, 8px);
  background-color: rgba(50, 161, 163, .07);
  color: var(--color-text, rgb(34, 37, 41));
  font-size: 0.9375rem;
}


/* ==================================================================
   404 PAGE
   Lifted from the <style> block inside 404b.html — these rules never
   existed in components.css, so the ported template had no styling.
   ================================================================== */
/* ── 404b hero ──────────────────────────────────────────── */
    .ft-404b {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px var(--space-6) var(--space-16);
      overflow: hidden;
    }

    .ft-404b__bg {
      position: absolute;
      inset: 0;
      background-image: url('images/headings/404.jpg');
      background-size: cover;
      background-position: center 40%;
      background-repeat: no-repeat;
    }

    .ft-404b__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        160deg,
        rgba(4, 44, 83, 0.88) 0%,
        rgba(49, 91, 116, 0.78) 50%,
        rgba(4, 44, 83, 0.90) 100%
      );
    }

    .ft-404b__content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 780px;
      width: 100%;
    }

    .ft-404b__eyebrow {
      display: inline-block;
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color:  var(--color-white);
      margin-bottom: var(--space-4);
    }

    .ft-404b__script {
      font-family: var(--font-script);
      font-size: clamp(5rem, 14vw, 9rem);
      font-weight: 400;
      color:  var(--color-white);
      line-height: 1.1;
      margin: 0 0 var(--space-2);
    }

    .ft-404b__heading {
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 6vw, 3.75rem);
      font-weight: var(--font-weight-bold);
      color: var(--color-white);
      line-height: 1.2;
      margin: 0 0 var(--space-6);
    }

    .ft-404b__desc {
      font-size: clamp(1rem, 2.5vw, 1.125rem);
      color:  var(--color-white);
      line-height: 1.7;
      margin: 0 auto var(--space-8);
      max-width: 520px;
    }

    .ft-404b__cta {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      background: var(--color-primary);
      color: var(--color-white);
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: var(--font-weight-bold);
      padding: var(--space-4) var(--space-8);
      border-radius: var(--radius-round);
      text-decoration: none;
      border: 2px solid transparent;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    }

    .ft-404b__cta:hover {
      background: var(--color-primary-dark);
      border-color: rgba(255, 255, 255, 0.2);
      color: var(--color-white);
      transform: translateY(-2px);
    }

    .ft-404b__cta:focus-visible {
      outline: 3px solid #85b7eb;
      outline-offset: 3px;
    }

    .ft-404b__cta:active {
      transform: scale(0.97);
    }

    .ft-404b__tiles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
      margin-top: var(--space-8);
    }

    .ft-404b__tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-6) var(--space-4);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(133, 183, 235, 0.2);
      border-radius: var(--radius-md);
      color: #b5d4f4;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: var(--font-weight-bold);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .ft-404b__tile:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(133, 183, 235, 0.5);
      color: var(--color-white);
      transform: translateY(-3px);
    }

    .ft-404b__tile:focus-visible {
      outline: 3px solid #85b7eb;
      outline-offset: 2px;
    }

    .ft-404b__tile-icon {
      font-size: 1.5rem;
      color:  var(--color-white)
    }

    @media (max-width: 599.98px) {
      .ft-404b__tiles {
        grid-template-columns: repeat(2, 1fr);
      }
    }

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS PAGE
   ════════════════════════════════════════════════════════════ */

.ft-testimonials-page {
  background: #f6f8fc;
  border-top: 1px solid #eaeef5;
  border-bottom: 1px solid #eaeef5;
  padding: 76px 32px 88px;
}

.ft-testimonials-page__container {
  max-width: 1240px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
}

/* ── Left column ─────────────────────────────────────────── */

.ft-testimonials-page__aside {
  flex: 1 1 320px;
  max-width: 380px;
  position: sticky;
  top: 84px;
  align-self: flex-start;
}

.ft-testimonials-page__eyebrow {
  margin-bottom: var(--space-2);
}

.ft-testimonials-page__title {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.ft-testimonials-page__subtitle {
  font-size: 1.0625rem;
  color: var(--color-muted);
  line-height: var(--line-height-normal);
  margin: 0 0 var(--space-4);
}

.ft-testimonials-page__proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-8);
}

.ft-testimonials-page__proof-avatars {
  display: flex;
}

.ft-testimonials-page__proof-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16, 33, 66, 0.12);
  object-fit: contain;
  background: #fff;
  margin-left: -10px;
}

.ft-testimonials-page__proof-avatars .ft-testimonials-page__proof-avatar:first-child {
  margin-left: 0;
}

.ft-testimonials-page__proof-text {
  font-size: 1.0625rem;
  color: var(--color-muted);
  line-height: var(--line-height-normal);
  margin: 0;
}

.ft-testimonials-page__proof-text strong {
  color: var(--color-text);
}

.ft-testimonials-page__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ft-testimonials-page__cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.ft-testimonials-page__cta .btn-outlined--on-light:hover,
.ft-testimonials-page__cta .btn-outlined--on-light:focus-visible {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(1.06);
}

/* ── Right column: masonry grid ──────────────────────────── */

.ft-testimonials-page__grid {
  flex: 2 1 560px;
  column-count: 2;
  column-gap: 24px;
}

.ft-testimonials-page__card {
  break-inside: avoid;
  margin-bottom: 24px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: none;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(16, 33, 66, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.ft-testimonials-page__card:hover {
  transform: translateY(-2px);
}

.ft-testimonials-page__stars {
  display: flex;
  gap: 2px;
  font-size: 16px;
  color: #f4a623;
  line-height: 1;
}

.ft-testimonials-page__quote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-muted);
}

.ft-testimonials-page__divider {
  height: 1px;
  background: #eef0f5;
  border: 0;
  margin: 0;
}

.ft-testimonials-page__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ft-testimonials-page__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.ft-testimonials-page__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ft-testimonials-page__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.ft-testimonials-page__company {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ft-testimonials-page__card {
    transition: none;
  }
}

@media (max-width: 1023.98px) {
  .ft-testimonials-page__aside {
    position: static;
    max-width: none;
    flex-basis: 100%;
  }

  .ft-testimonials-page__grid {
    flex-basis: 100%;
  }
}

@media (max-width: 639.98px) {
  .ft-testimonials-page {
    padding: 56px 20px 64px;
  }

  .ft-testimonials-page__grid {
    column-count: 1;
  }

  .ft-testimonials-page__card {
    padding: var(--space-8);
  }

  .ft-testimonials-page__cta {
    flex-direction: column;
  }

  .ft-testimonials-page__cta a {
    width: 100%;
  }
}

/* ── Testimonials carousel header CTA (front-page.php) ───── */

.ft-tcarousel__header {
  position: relative;
}

.ft-tcarousel__cta {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: transparent;
  border: 1.5px solid #cbd3df;
  border-radius: 999px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform 200ms ease;
}

.ft-tcarousel__cta-text {
  display: inline-block;
  white-space: nowrap;
}

.ft-tcarousel__cta-icon {
  flex-shrink: 0;
  font-size: 0.9375rem;
}

/* Same hover treatment as the Sign Up button */
.ft-tcarousel__cta:hover,
.ft-tcarousel__cta:focus-visible {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
  text-decoration: none;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .ft-tcarousel__cta {
    transition: none;
  }
  .ft-tcarousel__cta:hover,
  .ft-tcarousel__cta:focus-visible {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .ft-tcarousel__cta {
    position: static;
    margin-top: var(--space-4);
    width: auto;
    height: auto;
    padding: 10px 22px;
    border-radius: var(--radius-md);
  }

  .ft-tcarousel__cta .ft-tcarousel__cta-text {
    max-width: none;
    opacity: 1;
    margin-right: 8px;
  }
}

/* ───────────────────────────────────────────────────────────────
   Forms: consent, validation feedback and the honeypot
   ─────────────────────────────────────────────────────────────── */

/* The honeypot is pushed off-screen rather than hidden with display:none,
   which bots have learned to skip. Nothing here is announced or focusable. */
.ft-form__hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ft-form__notice {
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.5;
}

.ft-form__notice:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.ft-form__notice p {
  margin: 0;
}

.ft-form__notice--success {
  background: #e8f5ec;
  border: 1px solid #b6dfc4;
  color: #1c5b32;
}

.ft-form__notice--error {
  background: #fdecec;
  border: 1px solid #f3bcbc;
  color: #8a1f1f;
}

.ft-form__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c0392b;
}

.ft-contact__field--error input,
.ft-contact__field--error textarea,
.ft-contact__field--error select,
.ft-newsletter__field--error input {
  border-color: #c0392b;
}

.ft-form__status {
  margin: 0;
}

/* Consent checkbox: box on the left, wording beside it, on one line.

   The theme sizes every .ft-contact__field input as a full-width text box
   (width:100%; min-height:44px), which turns a checkbox into a large
   square. Every one of those properties has to be undone explicitly —
   overriding width alone leaves the 44px height behind. */
.ft-form__consent {
  display: block;
}

.ft-form__consent .ft-form__consent-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}

.ft-contact__field.ft-form__consent input[type="checkbox"],
.ft-newsletter__field.ft-form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  accent-color: var(--color-primary-medium);
}

.ft-form__consent .ft-form__consent-label > span {
  flex: 1 1 auto;
}

.ft-form__consent a {
  text-decoration: underline;
}

.ft-form__consent .ft-form__error {
  margin-left: 26px;
}

.ft-form__captcha {
  margin-bottom: 16px;
}

.ft-contact__submit.is-busy,
.ft-newsletter__submit .btn.is-busy {
  opacity: 0.7;
  cursor: progress;
}

/* Every control in a Fareteam form fills its column — text, email, tel,
   date, number, selects and textareas alike. Buttons and the consent
   checkbox are deliberately excluded: the submit keeps its fit-content
   width, and the checkbox its 16px box.

   The theme already sizes .ft-contact__field inputs, but not selects, and
   the rule is repeated here for the newsletter so both layouts behave the
   same way. box-sizing keeps the padding inside the 100%, so nothing
   overflows its grid cell. */
.ft-form .ft-contact__field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.ft-form .ft-contact__field select,
.ft-form .ft-contact__field textarea,
.ft-form .ft-newsletter__field input:not([type="checkbox"]):not([type="radio"]),
.ft-form .ft-newsletter__field select,
.ft-form .ft-newsletter__field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Selects inherit the same frame as the text inputs, which the theme only
   described for the newsletter. */
.ft-form .ft-contact__field select {
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.875rem;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: #fff;
}

/* The submit button must not be dragged to full width by the rules above. */
.ft-form .ft-contact__submit,
.ft-form .ft-newsletter__submit .btn {
  width: fit-content;
  max-width: 100%;
}

/* ── Forms on small screens ─────────────────────────────────────
   The contact grid is two columns at every width in the original
   theme, which squeezes First/Last name into half a phone screen.
   Below the tablet breakpoint every field takes the full width and
   the group-size row drops to two per line. */
@media (max-width: 767.98px) {
  .ft-contact__form,
  .ft-newsletter__group {
    grid-template-columns: 1fr;
  }

  .ft-form .ft-contact__field,
  .ft-form .ft-newsletter__field {
    grid-column: 1 / -1;
  }

  .ft-contact__group-size {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* The button stays as wide as its label on desktop; on a phone a
     full-width tap target is easier to hit. */
  .ft-form .ft-contact__submit,
  .ft-form .ft-newsletter__submit .btn {
    width: 100%;
  }
}

/* ── Forms: layout guards and tighter rhythm ────────────────────

   The page templates used to wrap the form in a div that repeated the
   .ft-contact__form class, so the grid was declared twice and the real
   form landed inside a single column of its own parent — every field
   came out half width. The templates no longer do that; this rule keeps
   any leftover wrapper harmless. */
.ft-form-wrap {
  display: block;
  width: 100%;
}

.ft-form-wrap > .ft-form,
.ft-contact__form > .ft-form {
  grid-column: 1 / -1;
  width: 100%;
}

/* The original spacing was drawn for a short WPForms embed. With five or
   six fields the card became very tall, so the vertical rhythm is pulled
   in — the 44px tap target on the controls themselves stays untouched. */
.ft-contact__form-card {
  padding: var(--space-8);
}

.ft-form .ft-contact__field {
  margin-bottom: var(--space-4);
}

.ft-form .ft-contact__field textarea {
  min-height: 96px;
}

.ft-form .ft-form__consent {
  margin-bottom: var(--space-4);
}

.ft-form .ft-form__captcha {
  margin-bottom: var(--space-4);
}

@media (max-width: 767.98px) {
  .ft-contact__form-card {
    padding: var(--space-6);
  }
}

/* The controls themselves: the theme's WPForms wrapper padded them to
   roughly 52px tall. Trimmed to the 44px minimum tap target, which takes
   a noticeable amount of height out of a six-field form. */
.ft-form .ft-contact__field input:not([type="checkbox"]):not([type="radio"]),
.ft-form .ft-contact__field select,
.ft-form .ft-contact__field textarea,
.ft-form .ft-newsletter__field input:not([type="checkbox"]),
.ft-form .ft-newsletter__field select {
  padding: 0.625rem 1rem;
  min-height: 44px;
}

.ft-form .ft-contact__field textarea {
  padding-top: 0.75rem;
}

/* Equal columns.

   Plain `1fr` is shorthand for minmax(auto, 1fr), and `auto` refuses to
   shrink below the content's minimum width — so the column holding
   "Agency Name" came out wider than the one holding "Contact".
   minmax(0, 1fr) removes that floor and the two halves match exactly. */
.ft-form .ft-contact__form,
.ft-form .ft-newsletter__group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ft-form .ft-contact__field,
.ft-form .ft-newsletter__field {
  min-width: 0;
}

/* Same reasoning for the four group-size boxes. */
.ft-form .ft-contact__group-size {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
  .ft-form .ft-contact__form,
  .ft-form .ft-newsletter__group {
    grid-template-columns: minmax(0, 1fr);
  }

  .ft-form .ft-contact__group-size {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Date fields.

   The theme frames its form controls in a rule that lists the types one
   by one — text, email, tel, number, url — and `date` was never on that
   list, so the date pickers fell back to the plainer default: a grey
   #8f8f8f border and a 12px radius instead of the light 24px pill. This
   states the frame once for every control the forms use, so a type added
   later cannot drift again. */
.ft-form .ft-contact__field input:not([type="checkbox"]):not([type="radio"]),
.ft-form .ft-contact__field select,
.ft-form .ft-contact__field textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.ft-form .ft-contact__field textarea {
  border-radius: var(--radius-sm);
}

/* The native date control brings its own chrome: an inner spacing box in
   WebKit and a calendar button that sits too close to the rounded edge. */
.ft-form .ft-contact__field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
}

.ft-form .ft-contact__field input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  color: inherit;
}

.ft-form .ft-contact__field input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: 0.25rem;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.ft-form .ft-contact__field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.ft-form .ft-contact__field input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Firefox draws its own clear button; keep it from crowding the edge. */
.ft-form .ft-contact__field input[type="date"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ft-form .ft-contact__field input:focus,
.ft-form .ft-contact__field select:focus,
.ft-form .ft-contact__field textarea:focus {
  border-color: var(--color-primary-medium);
  box-shadow: 0 0 0 3px rgba(89, 153, 194, 0.2);
  outline: none;
}