/* =========================================================================
   FlyFirstFlight component stylesheet.
   This file is ONE of only two permitted homes for CSS on this site (the
   other is the child theme style.css, for brand tokens and global rules).
   Every block below states what it does and why native Elementor could not.
   Built 05/08/2026.
   ========================================================================= */

/* [SECTION RHYTHM] Fluid vertical padding on root sections, 64px at 320 -> 96px at 1440.
   Why not native: Elementor's dimensions (padding) control silently REJECTS clamp() -
   the element's entire CSS rule is dropped and the section collapses to zero padding.
   Applied via the container class field. Added 05/08/2026. */
/* !important is required: Elementor writes the container's padding into
   --padding-block-* in its per-element CSS file, which is enqueued AFTER this
   stylesheet and therefore wins at equal specificity. Without it these sections
   render with zero vertical padding. */
.fff-flow{padding-block:clamp(4rem, 3.429rem + 2.857vw, 6rem) !important;}
.fff-flow--tight{padding-block:clamp(2.75rem, 2.393rem + 1.786vw, 3.625rem) !important;}
.fff-flow--hero{padding-block:clamp(3rem, 2.036rem + 4.821vw, 6.375rem) !important;}

/* [HEADING HIGHLIGHT] Yellow marker sweep behind a run of heading text
   ("Worldwide." in the h1). Why not native: the heading widget styles the whole
   string, it has no control for highlighting one phrase. The span is written into
   the heading title; this rule paints it. Added 05/08/2026. */
.fff-hl{
  background:linear-gradient(to top, var(--fff-yellow) 0%, var(--fff-yellow) 34%, transparent 34%);
  color:var(--fff-purple);
  padding-inline:.06em;
}

/* [EYEBROW RULE] Short purple dash preceding an eyebrow label.
   Why not native: Elementor headings have no leading-rule control; a divider widget
   beside it would need its own container and break the text baseline.
   Used on: section eyebrow headings carrying .fff-eyebrow. Added 05/08/2026. */
.fff-eyebrow{display:flex;align-items:center;gap:14px;}
.fff-eyebrow::before{
  content:"";flex:0 0 auto;width:28px;height:3px;border-radius:2px;
  background:currentColor;opacity:.85;
}
.fff-eyebrow--center{justify-content:center;}

/* [LIVE DOT] Pulsing yellow status dot in the utility bar.
   Why not native: no Elementor control emits a keyframe animation.
   Used on: header utility bar. Added 05/08/2026. */
.fff-live-dot{display:inline-flex;align-items:center;gap:9px;}
.fff-live-dot::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--fff-yellow);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(254,246,11,.7);
  animation:fff-pulse 2.4s infinite;
}
@keyframes fff-pulse{
  0%{box-shadow:0 0 0 0 rgba(254,246,11,.65);}
  70%{box-shadow:0 0 0 9px rgba(254,246,11,0);}
  100%{box-shadow:0 0 0 0 rgba(254,246,11,0);}
}
@media (prefers-reduced-motion:reduce){.fff-live-dot::before{animation:none;}}

/* Opt out of the eyebrow global uppercase, for product names whose
   casing is part of the brand (FlyDesk). Added 25/08/2026. */
.fff-eyebrow--nocaps{
  --e-global-typography-fffeyebrow-text-transform:none;
  --e-global-typography-fffeyebrow-letter-spacing:0.2px;
}
/* [LOGO] Two-tone brand logo, recoloured per context from one asset.
   Why not native: the image widget cannot recolour an SVG's two paths
   independently, and uploading four colour variants would mean four assets to
   keep in sync. Added 05/08/2026. */
.fff-logo{display:inline-flex;line-height:0;}
.fff-logo svg{width:100%;height:auto;display:block;}
.fff-logo--brand .fff-logo__mark{fill:var(--fff-yellow);}
.fff-logo--brand .fff-logo__tag{fill:var(--fff-ink);}
.fff-logo--on-dark .fff-logo__mark{fill:var(--fff-yellow);}
.fff-logo--on-dark .fff-logo__tag{fill:var(--fff-white);}
.fff-logo--white .fff-logo__mark,
.fff-logo--white .fff-logo__tag{fill:var(--fff-white);}
.fff-logo--ink .fff-logo__mark,
.fff-logo--ink .fff-logo__tag{fill:var(--fff-ink);}

/* [PRODUCT LOGO] FlyDesk and RoomCalc lockups (FFF Product Logo widget). One SVG
   per product with class hooks; the variant class sets every fill so a single
   asset serves white pages, purple bands and dark grounds. On the site the
   purple is the working UI purple (--fff-purple), matching the eyebrows and
   buttons beside it; the brand files in 1. Branding use the logo orchid.
   Why not native: same reason as the site logo, and the image widget cannot
   carry a heading tag. */
.fff-plogo{display:inline-flex;line-height:0;margin:0;}
.fff-plogo svg{width:100%;height:auto;display:block;}
.fff-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.fff-plogo__glyph-stroke{fill:none;stroke-width:6;}
.fff-plogo--light .fff-plogo__tile{fill:var(--fff-purple);}
.fff-plogo--light .fff-plogo__glyph{fill:var(--fff-yellow);}
.fff-plogo--light .fff-plogo__glyph-stroke{stroke:var(--fff-yellow);}
.fff-plogo--light .fff-plogo__w1{fill:var(--fff-ink);}
.fff-plogo--light .fff-plogo__w2{fill:var(--fff-purple);}
.fff-plogo--light .fff-plogo__desc{fill:var(--fff-ink);}
.fff-plogo--on-dark .fff-plogo__tile{fill:var(--fff-yellow);}
.fff-plogo--on-dark .fff-plogo__glyph{fill:var(--fff-purple);}
.fff-plogo--on-dark .fff-plogo__glyph-stroke{stroke:var(--fff-purple);}
.fff-plogo--on-dark .fff-plogo__w1,
.fff-plogo--on-dark .fff-plogo__w2{fill:var(--fff-yellow);}
.fff-plogo--on-dark .fff-plogo__desc{fill:var(--fff-white);}
.fff-plogo--white .fff-plogo__tile{fill:var(--fff-white);}
.fff-plogo--white .fff-plogo__glyph{fill:var(--fff-purple);}
.fff-plogo--white .fff-plogo__glyph-stroke{stroke:var(--fff-purple);}
.fff-plogo--white .fff-plogo__w1,
.fff-plogo--white .fff-plogo__w2,
.fff-plogo--white .fff-plogo__desc{fill:var(--fff-white);}
.fff-plogo--ink .fff-plogo__tile{fill:var(--fff-ink);}
.fff-plogo--ink .fff-plogo__glyph{fill:var(--fff-white);}
.fff-plogo--ink .fff-plogo__glyph-stroke{stroke:var(--fff-white);}
.fff-plogo--ink .fff-plogo__w1,
.fff-plogo--ink .fff-plogo__w2,
.fff-plogo--ink .fff-plogo__desc{fill:var(--fff-ink);}

/* [CARD] The design's white panel: radius, soft shadow, hairline border.
   Why not native: reachable natively, but every card would repeat six settings
   and drift; one class keeps them identical. Added 05/08/2026. */
.fff-card{
  background:var(--fff-white);
  border:1px solid var(--fff-grey-200);
  border-radius:var(--fff-radius);
  box-shadow:var(--fff-shadow);
}

/* [STEP ROWS] Hero "How a disruption is handled" rows separated by hairlines,
   with no rule under the last row.
   Why not native: Elementor can add a bottom border to every child but cannot
   exclude the last one, which leaves a stray line above the card edge.
   Added 05/08/2026. */
.fff-steps > .elementor-element:not(:last-child){
  border-bottom:1px dashed var(--fff-grey-200);
}

/* [EQUAL CARDS] Cards in a row match height regardless of copy length.
   Why !important: Elementor's per-element CSS file is enqueued AFTER this
   stylesheet, so container flex_align_items beats a plain rule at equal
   specificity. Added 05/08/2026. */
.fff-row-stretch > .e-con-inner,
.fff-row-stretch{align-items:stretch !important;}

/* [BUTTON IMMUNITY] Lock button colours against browser extensions that inject
   their own button:hover backgrounds (this has produced client-visible pink
   buttons on a previous build). Also guarantees a 44px touch target.
   Added 05/08/2026. */
.fff-btn .elementor-button{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.fff-btn--solid .elementor-button,
.fff-btn--solid .elementor-button:hover,
.fff-btn--solid .elementor-button:focus{
  background-color:var(--fff-purple) !important;color:var(--fff-white) !important;
}
.fff-btn--solid .elementor-button:hover{background-color:var(--fff-purple-dark) !important;}
.fff-btn--yellow .elementor-button,
.fff-btn--yellow .elementor-button:hover,
.fff-btn--yellow .elementor-button:focus{
  background-color:var(--fff-yellow) !important;color:var(--fff-ink) !important;
}
.fff-btn--yellow .elementor-button:hover{background-color:#e9e10a !important;}
.fff-btn--ghost .elementor-button,
.fff-btn--ghost .elementor-button:hover,
.fff-btn--ghost .elementor-button:focus{
  background-color:transparent !important;color:var(--fff-ink) !important;
  border:2px solid var(--fff-ink);
}
.fff-btn--ghost .elementor-button:hover{background-color:var(--fff-ink) !important;color:var(--fff-white) !important;}

/* [ICON] The design's own stroke icon set, optionally in a tinted badge.
   Why not native: Elementor colours icons with fill: only, which does nothing to
   a stroke-only path, and its icon library has no equivalent of these shapes.
   Added 05/08/2026. */
.fff-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--fff-purple);line-height:0;}
.fff-icon__svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;}
.fff-icon--badge{background:var(--fff-purple-tint-2);width:40px;height:40px;border-radius:11px;flex:0 0 auto;}

/* [DASH BULLETS] Service lists use a short purple dash, not a bullet or tick.
   Why not native: the icon-list widget draws either an icon or nothing; there is
   no control for a rule-style marker, and an icon would need an upload for what
   is a 10px line. Added 05/08/2026. */
.fff-dashes .elementor-icon-list-item{align-items:flex-start;}
.fff-dashes .elementor-icon-list-text{position:relative;padding-left:22px;display:block;}
.fff-dashes .elementor-icon-list-text::before{
  content:"";position:absolute;left:0;top:.72em;
  width:12px;height:2.5px;border-radius:2px;background:var(--fff-purple);
}

/* [CARD VARIANTS] The design gives each card family its own treatment. Kept as
   modifier classes so the Elementor data stays free of literal colours.
   Added 06/08/2026. */

/* Service cards: grey panel with a 5px brand bar across the top and a hover lift.
   Why not native: Elementor has no control for a full-bleed bar inside a padded
   container, and a border-top would sit outside the radius. */
.fff-card--svc{
  background:var(--fff-grey-100) !important;
  border:1px solid var(--fff-grey-200);
  border-radius:var(--fff-radius);
  position:relative !important;overflow:hidden !important;
  box-shadow:none !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Scoped .e-con.<class> and content marked important: Elementor implements a
   container's background overlay through its own `.e-con::before` rule, which is
   enqueued after this stylesheet at equal specificity and resets `content` to
   var(--background-overlay) - wiping this bar entirely. */
.e-con.fff-card--svc::before{
  content:"" !important;position:absolute;top:0;left:0;width:100%;height:5px;
  background:var(--fff-purple);z-index:1;
}
.fff-card--svc:hover{transform:translateY(-4px);box-shadow:var(--fff-shadow) !important;}

/* Why cards: outline only, border warms to brand purple on hover. */
.fff-card--why{
  background:transparent !important;
  border:1px solid var(--fff-grey-200);
  border-radius:var(--fff-radius);
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fff-card--why:hover{border-color:var(--fff-purple);box-shadow:var(--fff-shadow) !important;}

/* Contact form card: a white panel lifted off the near-black band. */
.fff-card--form{
  background:var(--fff-white) !important;
  border:0 !important;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.35) !important;
}

/* [FORM] Enquiry fields on the white card.
   Why not native: Elementor's form styling cannot set a distinct focus border
   colour, the focus background swap, or the placeholder colour. Added 06/08/2026. */
.fff-form .elementor-field-group .elementor-field{
  background:var(--fff-grey-100) !important;
  border:1.5px solid var(--fff-grey-500) !important;
  color:var(--fff-ink) !important;
  border-radius:10px !important;
  padding:12px 14px !important;
  font-size:.92rem !important;
  min-height:46px;
  transition:border-color .2s ease, background-color .2s ease;
}
.fff-form .elementor-field-group textarea.elementor-field{min-height:110px;resize:vertical;}
.fff-form .elementor-field::placeholder{color:var(--fff-grey-500) !important;opacity:1;}
.fff-form .elementor-field:focus{
  outline:none;
  border-color:var(--fff-purple) !important;
  background:var(--fff-white) !important;
}
.fff-form .elementor-field-label{
  color:var(--fff-ink) !important;
  font-size:.78rem !important;font-weight:600 !important;letter-spacing:.03em;
  margin-bottom:6px;
}
.fff-form .elementor-button{width:100%;margin-top:4px;}

/* [BUTTON MOTION] The design lifts buttons on hover and gives each variant its
   own coloured shadow. Added 06/08/2026. */
.fff-btn .elementor-button:hover{transform:translateY(-2px);}
.fff-btn--solid .elementor-button{box-shadow:0 6px 18px rgba(190,99,175,.35);}
.fff-btn--yellow .elementor-button{box-shadow:0 6px 18px rgba(19,19,19,.18);}
@media (prefers-reduced-motion:reduce){
  .fff-btn .elementor-button:hover,.fff-card--svc:hover{transform:none;}
}

/* =========================================================================
   Slide-in mobile menu (custom widget markup).
   House standard: every site ships a pop-out panel, never Elementor's native
   nav-menu mobile dropdown, which positions inside the widget wrapper and is
   unusable in a grouped header.
   Specificity and !important throughout: Elementor's frontend button reset and
   its global link colour are both enqueued after this stylesheet.
   ========================================================================= */
.fff-menu button.fff-menu__toggle{
  display:inline-flex !important;align-items:center;justify-content:center;gap:9px;
  min-width:44px;min-height:44px;padding:8px 14px !important;
  background:transparent;border:1.5px solid currentColor;border-radius:999px;
  color:inherit;cursor:pointer;width:auto !important;
  font-family:Inter,sans-serif !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.08em;text-transform:uppercase;
}
.fff-menu button.fff-menu__toggle:hover{background:rgba(255,255,255,.14);}
.fff-menu__bars{display:block;width:18px;height:12px;position:relative;flex:0 0 auto;}
.fff-menu__bars span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
}
.fff-menu__bars span:nth-child(1){top:0;}
.fff-menu__bars span:nth-child(2){top:5px;}
.fff-menu__bars span:nth-child(3){top:10px;}

.fff-menu__backdrop{
  position:fixed;inset:0;background:rgba(19,19,19,.55);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;z-index:9998;
}
.fff-menu__panel{
  position:fixed;top:0;right:0;height:100%;height:100dvh;
  width:min(360px,86vw);background:var(--fff-ink);color:var(--fff-white);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:9999;display:flex;flex-direction:column;
  padding:22px 26px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
}
.fff-menu.is-open .fff-menu__backdrop{opacity:1;visibility:visible;}
.fff-menu.is-open .fff-menu__panel{transform:translateX(0);}
@media (prefers-reduced-motion:reduce){
  .fff-menu__panel,.fff-menu__backdrop{transition:none;}
}
.fff-menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;}
.fff-menu__head .fff-logo{width:180px;}
.fff-menu .fff-menu__close{
  width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:0;border-radius:50%;color:var(--fff-white) !important;
  font-size:20px;line-height:1;cursor:pointer;
}
.fff-menu .fff-menu__close:hover{background:rgba(255,255,255,.2);}
.fff-menu__nav ul{list-style:none;margin:0;padding:0;}
.fff-menu__nav li{margin:0;}
.fff-menu .fff-menu__nav a{
  display:block;padding:15px 0;font-family:Fredoka,sans-serif;
  font-size:1.22rem;font-weight:600;color:var(--fff-white) !important;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.fff-menu .fff-menu__nav a:hover,
.fff-menu .fff-menu__nav .current-menu-item > a{color:var(--fff-yellow) !important;}
.fff-menu__foot{margin-top:auto;padding-top:26px;}
.fff-menu .fff-menu__cta{
  display:flex;align-items:center;justify-content:center;min-height:50px;
  background:var(--fff-yellow);color:var(--fff-ink) !important;border-radius:999px;
  font-weight:700;text-decoration:none;
}
.fff-menu .fff-menu__cta:hover{background:#e9e10a;color:var(--fff-ink) !important;}
.fff-menu .fff-menu__tel{display:block;margin-top:14px;text-align:center;
  color:rgba(255,255,255,.78) !important;text-decoration:none;font-size:.9rem;}
.fff-menu .fff-menu__tel:hover{color:var(--fff-yellow) !important;}
body.fff-menu-open{overflow:hidden;}

/* [CLOSED PANEL] The slide-in panel is closed by transform alone, which leaves
   its links in the tab order and in the accessibility tree until JS runs (and
   permanently if the script fails). visibility:hidden removes it from both while
   still allowing the transform to animate. Added 06/08/2026. */
.fff-menu__panel{visibility:hidden;}
.fff-menu.is-open .fff-menu__panel{visibility:visible;}

/* [PILL] Small status/tagline pills. Replaces inline font declarations that were
   overriding the widgets' bound typography globals. Added 06/08/2026. */
.fff-pill{
  display:inline-block;padding:6px 12px;border-radius:999px;white-space:nowrap;
  font-weight:700;letter-spacing:.08em;
}
.fff-pill--live{background:var(--fff-ink);color:var(--fff-yellow);}
.fff-pill--tagline{background:var(--fff-yellow);color:var(--fff-ink);font-weight:600;letter-spacing:normal;padding:5px 13px;}

/* [HAIRLINE] Tokenised divider on dark/brand surfaces, so the next panel does not
   invent a fourth arbitrary alpha. Added 06/08/2026. */
.fff-hairline-top{border-top:1px solid var(--fff-hairline);}

/* [FOOTER NAV] Footer navigation links: white on the brand band, and a visible
   list for assistive tech. The Elementor kit emits a global link colour that
   loads after this sheet, hence !important. Added 06/08/2026. */
.fff-footer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px;}
.fff-footer-nav a{color:var(--fff-white) !important;text-decoration:none;font-size:.92rem;font-weight:500;}
.fff-footer-nav a:hover,.fff-footer-nav a:focus-visible{color:var(--fff-yellow) !important;}
.fff-footer-nav [aria-current="page"]{color:var(--fff-yellow) !important;}

/* [FORM BUTTON] Elementor sets the submit button's hover colour to white, which
   on the yellow fill is 1.14:1 - the label disappears on hover. Lock it to ink.
   Added 06/08/2026. */
.fff-form .elementor-button[type="submit"],
.fff-form .elementor-button[type="submit"]:hover,
.fff-form .elementor-button[type="submit"]:focus{
  background-color:var(--fff-yellow) !important;
  color:var(--fff-ink) !important;
}

/* [BUTTON ARROW] The design's arrow inside the primary CTA. Drawn as a mask so a
   single rule serves both the white-on-purple and ink-on-yellow buttons via
   currentColor, and so no SVG upload has to be enabled on the site. Base64 rather
   than a percent-encoded data URI, which browsers rejected here and left the mask
   unset - painting a solid rectangle. Sized to the design's 14x11 with its 9px gap.
   Added 06/08/2026. */
.fff-btn--arrow .elementor-button-content-wrapper{align-items:center;}
.fff-btn--arrow .elementor-button-text::after{
  content:"";display:inline-block;vertical-align:middle;
  width:14px;height:11px;margin-left:9px;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSAxMmgxNE0xMyA2bDYgNi02IDYiLz48L3N2Zz4=");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSAxMmgxNE0xMyA2bDYgNi02IDYiLz48L3N2Zz4=");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

/* [PAGE HERO] Inner-page header rhythm: shallower than the homepage hero but the
   same family. 56px at 320 -> 84px at 1440. !important for the same reason as
   .fff-flow. Added 06/08/2026. */
.fff-flow--pagehero{padding-block:clamp(3.5rem, 3rem + 2.5vw, 5.25rem) !important;}

/* [MEASURE] Constrain intro paragraphs to a comfortable reading measure.
   Why here: Elementor's text-editor strips inline max-width through kses.
   Added 06/08/2026. */
/* !important: Elementor writes max-width:100% into a widget's own per-element CSS,
   which loads after this stylesheet, so an unmarked rule is ignored on text
   widgets (it worked on containers, which is why it looked applied). */
.fff-measure{max-width:700px !important;}
.fff-measure--center{max-width:660px !important;margin-inline:auto;}

/* [GHOST BUTTON ON DARK] Outline button for the near-black CTA band, where the
   standard ghost button's ink border and text would disappear.
   Added 06/08/2026. */
.fff-btn--ghostlight .elementor-button,
.fff-btn--ghostlight .elementor-button:hover,
.fff-btn--ghostlight .elementor-button:focus{
  background-color:transparent !important;
  color:var(--fff-white) !important;
  border:2px solid var(--fff-white);
}
.fff-btn--ghostlight .elementor-button:hover{
  background-color:var(--fff-white) !important;
  color:var(--fff-ink) !important;
}

/* [CARD GRID] Uniform card rows are real CSS grid rather than flex percentages.
   Why not native: Elementor emits a container's desktop width inside
   @media(min-width:561px), written AFTER the tablet block, so a per-breakpoint
   width override silently loses at tablet widths. Grid also gives equal columns
   and equal heights without align-items:stretch.

   The :is() pairs exist because the class may land on a plain container OR a
   boxed one. A boxed container wraps its children in .e-con-inner, so putting
   display:grid on the outer element lays out exactly one child and everything
   stacks - which is precisely what broke the homepage once. Targeting both
   shapes makes the class safe wherever it is applied.
   Added 06/08/2026. */
:is(.fff-grid:not(.e-con-boxed), .e-con-boxed.fff-grid > .e-con-inner){display:grid !important;}
:is(.fff-grid--2:not(.e-con-boxed), .e-con-boxed.fff-grid--2 > .e-con-inner){grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
:is(.fff-grid--3:not(.e-con-boxed), .e-con-boxed.fff-grid--3 > .e-con-inner){grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
:is(.fff-grid--4:not(.e-con-boxed), .e-con-boxed.fff-grid--4 > .e-con-inner){grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
:is(.fff-grid--5:not(.e-con-boxed), .e-con-boxed.fff-grid--5 > .e-con-inner){grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
@media (max-width:1200px){
  :is(.fff-grid--4:not(.e-con-boxed), .e-con-boxed.fff-grid--4 > .e-con-inner){grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:960px){
  :is(.fff-grid--3:not(.e-con-boxed), .e-con-boxed.fff-grid--3 > .e-con-inner),
  :is(.fff-grid--4:not(.e-con-boxed), .e-con-boxed.fff-grid--4 > .e-con-inner),
  :is(.fff-grid--5:not(.e-con-boxed), .e-con-boxed.fff-grid--5 > .e-con-inner){grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  /* The two service cards each carry two sub-lists, so they need the full band. */
  :is(.fff-grid--2:not(.e-con-boxed), .e-con-boxed.fff-grid--2 > .e-con-inner){grid-template-columns:1fr !important;}
}
@media (max-width:560px){
  :is(.fff-grid--2:not(.e-con-boxed), .e-con-boxed.fff-grid--2 > .e-con-inner),
  :is(.fff-grid--3:not(.e-con-boxed), .e-con-boxed.fff-grid--3 > .e-con-inner),
  :is(.fff-grid--4:not(.e-con-boxed), .e-con-boxed.fff-grid--4 > .e-con-inner),
  :is(.fff-grid--5:not(.e-con-boxed), .e-con-boxed.fff-grid--5 > .e-con-inner){grid-template-columns:1fr !important;}
}

/* [SPLIT] Two-column page splits (hero, crisis, contact, CTA band, footer).
   Same reasoning and the same :is() boxed/non-boxed pairing as [CARD GRID].
   Everything collapses to one column at 960. Added 06/08/2026. */
:is(.fff-split:not(.e-con-boxed), .e-con-boxed.fff-split > .e-con-inner){
  display:grid !important;align-items:center !important;
}
:is(.fff-split--top:not(.e-con-boxed), .e-con-boxed.fff-split--top > .e-con-inner){align-items:start !important;}
:is(.fff-split--hero:not(.e-con-boxed), .e-con-boxed.fff-split--hero > .e-con-inner){grid-template-columns:minmax(0,55fr) minmax(0,45fr) !important;}
:is(.fff-split--half:not(.e-con-boxed), .e-con-boxed.fff-split--half > .e-con-inner){grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
:is(.fff-split--cta:not(.e-con-boxed), .e-con-boxed.fff-split--cta > .e-con-inner){grid-template-columns:minmax(0,60fr) minmax(0,40fr) !important;}
:is(.fff-split--foot:not(.e-con-boxed), .e-con-boxed.fff-split--foot > .e-con-inner){grid-template-columns:minmax(0,38fr) minmax(0,62fr) !important;}
:is(.fff-split--copy:not(.e-con-boxed), .e-con-boxed.fff-split--copy > .e-con-inner){grid-template-columns:minmax(0,55fr) minmax(0,45fr) !important;}
:is(.fff-split--flip:not(.e-con-boxed), .e-con-boxed.fff-split--flip > .e-con-inner){grid-template-columns:minmax(0,45fr) minmax(0,55fr) !important;}
@media (max-width:960px){
  :is(.fff-split:not(.e-con-boxed), .e-con-boxed.fff-split > .e-con-inner){
    grid-template-columns:1fr !important;align-items:start !important;
  }
  /* --flip puts the visual panel on the LEFT at desktop. Stacked, that would put
     the panel above the heading it belongs to, so the copy is ordered first. */
  :is(.fff-split--flip:not(.e-con-boxed), .e-con-boxed.fff-split--flip > .e-con-inner) > :first-child{order:2;}
  :is(.fff-split--flip:not(.e-con-boxed), .e-con-boxed.fff-split--flip > .e-con-inner) > :last-child{order:1;}
}

/* [COMING SOON] Full-viewport holding page in the site's light palette: a purple
   logo bar over the same white -> tint gradient as the homepage hero, with the
   content block centred in the remaining space. !important throughout because
   Elementor writes min-height, display and align-items into its per-element CSS
   file, which loads after this stylesheet. Added 06/08/2026. */
.fff-coming{
  min-height:100vh !important;min-height:100dvh !important;
  display:flex !important;flex-direction:column !important;
  justify-content:flex-start !important;
}
.fff-coming__body{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.fff-coming__body .e-con-inner{align-items:center !important;justify-content:center !important;}

/* The status dot is yellow on the dark header bar; on a light background it needs
   the brand purple to be visible at all. */
.fff-live-dot--on-light::before{
  background:var(--fff-purple);
  box-shadow:0 0 0 0 rgba(156,74,143,.7);
  animation:fff-pulse-light 2.4s infinite;
}
@keyframes fff-pulse-light{
  0%{box-shadow:0 0 0 0 rgba(156,74,143,.55);}
  70%{box-shadow:0 0 0 9px rgba(156,74,143,0);}
  100%{box-shadow:0 0 0 0 rgba(156,74,143,0);}
}
@media (prefers-reduced-motion:reduce){.fff-live-dot--on-light::before{animation:none;}}

/* [HOTLINE] The one thing an airline landing here mid-disruption needs: a big,
   tappable number. Sized 24px -> 40px, rem-dominant so zoom still works. */
.fff-hotline a{
  display:inline-block;
  font-family:Fredoka,sans-serif;font-weight:600;
  font-size:clamp(1.5rem, 1.214rem + 1.429vw, 2.5rem);
  line-height:1.2;
  color:var(--fff-purple) !important;text-decoration:none;
  min-height:44px;
}
.fff-hotline a:hover{text-decoration:underline;}

/* [PRODUCT PANEL] The Innovation page's FlyDesk and RoomCalc panels. Rows are
   separated by a hairline with none under the last, which Elementor cannot do
   (it can add a border to every child but not exclude the last).
   Added 06/08/2026. */
.fff-panel > .elementor-element:not(:last-child){
  border-bottom:1px dashed var(--fff-grey-200);
}
.fff-panel-step{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  background:var(--fff-purple);color:var(--fff-white);
  font-family:Fredoka,sans-serif;font-weight:600;font-size:.82rem;line-height:1;
}