/* ABOUTME: Child theme header and site-specific styles for Flat Fee Direct Hire. */
/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Flat Fee Direct Hire child theme of Hello Elementor. Holds site-specific CSS/PHP so Hello Elementor stays updatable.
Author: Flat Fee Direct Hire
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/


/* Tokens: every V4 variable mirrored (variables.json is the source), then the root-only tokens V4 has no variable type for. */
:root {
  --c-fuchsia-600: #BE1A80;
  --c-fuchsia-700: #951063;
  --c-fuchsia-400: #E74BAB;
  --c-fuchsia-300: #F07CC0;
  --c-fuchsia-100: #FBDAF3;
  --c-fuchsia-50: #FFEAFA;
  --c-ink-900: #1F2630;
  --c-navy-900: #1C244B;
  --c-ink-950: #09101A;
  --c-text-body: #1F2630;
  --c-text-muted: #5B6270;
  --c-text-subtle: #485870;
  --c-text-on-dark: #FFFFFF;
  --c-text-on-dark-muted: #AEB6C4;
  --c-surface: #FFFFFF;
  --c-surface-ghost: #F7F9FE;
  --c-surface-mist: #E7ECFD;
  --c-periwinkle-200: #C6D3FA;
  --c-periwinkle-400: #7B96EE;
  --c-periwinkle-600: #3F5BC4;
  --c-gold-100: #FEEFC7;
  --c-gold-400: #FBC343;
  --c-gold-700: #8A6100;
  --c-border: #DEE2E6;
  --c-border-strong: #C8CEDB;
  --c-border-input: #7C8493;
  --c-success: #1F7A3A;
  --c-danger: #B42318;
  --font-brand: Poppins;
  --fs-display: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);
  --fs-h1: clamp(2.25rem, 1.833rem + 1.852vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.125rem + 0.5556vw, 1.625rem);
  --fs-h4: clamp(1.125rem, 1.083rem + 0.1852vw, 1.25rem);
  --fs-lead: clamp(1.062rem, 1rem + 0.2778vw, 1.25rem);
  --fs-body: clamp(1rem, 0.9792rem + 0.09259vw, 1.062rem);
  --fs-button: clamp(1rem, 0.9792rem + 0.09259vw, 1.062rem);
  --section-y: clamp(4rem, 2.833rem + 5.185vw, 7.5rem);
  --measure: 68ch;
  --fs-prose: 18px;
  --fs-small: 14px;
  --fs-eyebrow: 14px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 128px;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --container: 1140px;
  --container-wide: 1280px;
  --container-narrow: 900px;

  --sh-xs: 0 1px 2px rgba(31,38,48,.06);
  --sh-sm: 0 2px 10px rgba(31,38,48,.06);
  --sh-md: 0 8px 24px -6px rgba(31,38,48,.12);
  --sh-lg: 0 24px 48px -16px rgba(31,38,48,.22);
  --sh-brand: 0 6px 24px rgba(190,26,128,.13);
  --sh-cta: 0 8px 20px -6px rgba(190,26,128,.45);
  --ring: 0 0 0 3px #FFFFFF, 0 0 0 5px #BE1A80;
  --ring-on-dark: 0 0 0 3px #1F2630, 0 0 0 5px #F07CC0;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 400ms;
  --font-stack: var(--font-brand), ui-sans-serif, system-ui, sans-serif;
  --header-h: 72px;
  --header-h-scrolled: 60px;
}

/* Base */
body {
  font-family: var(--font-stack);
  color: var(--c-text-body);
  background: var(--c-surface);
}
/* Wrapping: no line ends on one word. Headings and short labels (the brief card's dt) balance their lines; body text (paragraphs, list items and definition values) only
   avoids a short last line, which "pretty" cannot always do on a two- or three-line label, so a label that runs to two lines would end on one word. A FAQ question
   is wrapped by "pretty" too: the render filter joins its last two words, which already keeps its last line off one word, and balancing a question that holds that
   join picks breaks that leave a stub first line ("Is the / guarantee a refund?" where "Is the guarantee / a refund?" fits). A filled box such as the step marker
   stays on "pretty": its width is set before balance shortens its lines, so a balanced marker would leave an empty strip of tint. Elementor's base sets no text-wrap,
   and :where() keeps these at zero specificity, so a component can still choose its own. Browsers without the values (older WebKit lacks "pretty") wrap as they always did.
   A lede (ffdh-lead) balances like a heading: the filter joins its last two words too, and on a phone "pretty" then leaves a stub line above them ("within / them starts a /
   replacement search:"). It follows the paragraph rule at the same zero weight, so it wins by order, and the CTA band's own lead rule still outranks it. */
:where(p, li, dd, summary) {
  text-wrap: pretty;
}
:where(h1, h2, h3, h4, h5, h6, dt, .ffdh-lead) {
  text-wrap: balance;
}
/* Focus ring. Hello Elementor's reset loads before this sheet and gives these elements a 2px black outline and a white halo at the specificity of its own
   selector list, (0,1,1) for a tag and (0,3,0) for [tabindex], so the ring repeats that list and replaces it by coming later. A component's class-level focus
   rule outranks the tag selectors; on an element with a tabindex it needs (0,3,0) or more. Hello's list has no summary. The outline stays, transparent, so
   forced-colours mode still draws one. */
[tabindex]:not([tabindex="-1"]):focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ring);
}
/* A dark ground draws the dark-ground ring: it redefines --ring for everything inside it, so a component that draws var(--ring) itself (the primary button's own focus-visible rule,
   at (0,3,0)) takes the ground's ring without a rule per class. The ring is the ground's: a light card with its own var(--ring) placed on a dark ground draws the on-dark ring. */
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) {
  --ring: var(--ring-on-dark);
}
/* On a dark ground each selector matches its light counterpart's specificity and comes after it. */
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) [tabindex]:not([tabindex="-1"]):focus-visible,
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) :is(a, button, input, select, textarea, summary):focus-visible {
  box-shadow: var(--ring-on-dark);
}

/* Level line: the fuchsia rule under a section heading, drawn in as the heading scrolls into view. */
.ffdh-h2-level::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: var(--sp-4);
  border-radius: 2px;
  background: var(--c-fuchsia-600);
  transform-origin: left;
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-h2-level::after {
  background: var(--c-fuchsia-400);
}
@keyframes ffdh-level-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@supports (animation-timeline: view()) {
  .ffdh-h2-level::after {
    animation: ffdh-level-draw linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}

/* Reveal: the one scroll-in per page. Without scroll-driven animation support the group is simply visible. */
@keyframes ffdh-reveal-in {
  from { opacity: 0; transform: translateY(var(--sp-5)); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  .ffdh-reveal {
    animation: ffdh-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* Class companions: what class CSS cannot hold (pseudo-elements, child selectors, calc over root-only tokens). */
/* A hero's H1 size is the kit's h1 default style (default-styles.json), which Elementor emits as ".elementor .e-default-h1" at (0,2,0): it outranks any theme rule
   on a bare h1, so a hero that wants another size sets it from its own CSS under .elementor. The measure is the one most heroes want, a headline that states a
   value and runs two or three balanced lines; a page whose headline is short beside a right-hand column narrows it from its own CSS (Home does). */
.ffdh-hero h1 {
  max-width: 24ch;
}
/* A hero H1 that states the price list (both prices: Pricing, About, Company facts) fills its first line from 768px instead of balancing: balance evens two lines by
   splitting a price from its unit ("$3,500 per Latin America / hire. $7,500 per US hire."), and filling the first line ends it where the first price ends. On phones
   neither price fits a line, and balance keeps the second price's unit together, so it stays. The prices are found by their data-fact attribute (the facts plugin's span),
   and the :has() arguments lift this past the kit's ".elementor .e-default-h1" at (0,2,0). */
@media (min-width: 768px) {
  .elementor .ffdh-hero h1:has([data-fact="price.latam"]):has([data-fact="price.us"]) {
    text-wrap: pretty;
  }
}

/* Dark grounds: default-styles.json sets heading and paragraph ink colours per tag, and Elementor emits them as ".elementor .e-default-<tag>"
   at (0,2,0), which beats inheritance from the ground, so dark grounds restate them one step higher, under the .elementor wrapper every
   Elementor document and Theme Builder part sits in. */
.elementor .ffdh-section--dark :is(h1, h2, h3, h4, h5, h6, p),
.elementor .ffdh-cta-band--dark :is(h1, h2, h3, h4, h5, h6, p),
.elementor .ffdh-fact-band :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--c-text-on-dark);
}
.elementor .ffdh-section--dark :is(.ffdh-lead, .ffdh-small, .ffdh-source),
.elementor .ffdh-cta-band--dark :is(.ffdh-lead, .ffdh-small, .ffdh-source),
.elementor .ffdh-fact-band :is(.ffdh-lead, .ffdh-small, .ffdh-source) {
  color: var(--c-text-on-dark-muted);
}
/* The band is centred, but the stack inside it, its lead and its button row default to the start edge. The lead never ends on one word; from tablet up,
   where it runs to two or three lines, it balances them under the centred heading. Chromium balances at most six lines, which a phone's lede can pass. */
.elementor .ffdh-cta-band .ffdh-stack {
  align-items: center;
}
.elementor .ffdh-cta-band .ffdh-btn-row {
  justify-content: center;
}
.elementor .ffdh-cta-band .ffdh-lead {
  text-wrap: pretty;
}
/* The band's margin below assumes a white section above, which is why it carries no margin above. Under a ghost or mist section the dark band would start exactly where
   the tint ends, its rounded corners on the edge, so it takes the same space above as below. */
.elementor :is(.ffdh-section--ghost, .ffdh-section--mist) + .ffdh-cta-band {
  margin-block-start: calc(var(--section-y) + 10px);
}
@media (min-width: 768px) {
  .elementor .ffdh-cta-band .ffdh-lead {
    text-wrap: balance;
  }
}
/* Plain links on dark grounds: the default fuchsia-600 link is about 2.6:1 on ink, fuchsia-300 about 6:1. */
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) a:not([class]) {
  color: var(--c-fuchsia-300);
}
/* Light cards nested in a dark ground take their ink back, at the same specificity as the dark-ground rules and after them. */
:is(.ffdh-card, .ffdh-price-card, .ffdh-brief-card, .ffdh-callout, .ffdh-team-card, .ffdh-banner-draft) a:not([class]) {
  color: var(--c-fuchsia-600);
}
.elementor :is(.ffdh-card, .ffdh-price-card, .ffdh-brief-card, .ffdh-callout, .ffdh-team-card, .ffdh-banner-draft) :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--c-text-body);
}
.elementor :is(.ffdh-card, .ffdh-price-card, .ffdh-brief-card, .ffdh-callout, .ffdh-team-card, .ffdh-banner-draft) :is(.ffdh-lead, .ffdh-small, .ffdh-source) {
  color: var(--c-text-muted);
}
/* The arrow is text in the link's last line, not a box beside it: with no space before it there is no break between it and the last word, so a wrapped link
   never leaves the arrow alone. The hover nudge moves it with an offset because an inline box cannot take a transform. */
/* One column of cards (the drawer breakpoint and below) holds each card to the stacked hero's measure, so its text and photo do not run the full column. */
@media (max-width: 1080px) {
  .elementor .ffdh-grid-2 > * {
    max-width: calc(var(--sp-12) * 5);
  }
}
/* An arrow link that closes a card keeps its 44px tap target, but the half of that height below its text would add to the card's bottom padding; it
   reaches into the padding instead, so the card's visible inset is even. The 1.375em is ffdh-link-arrow's line-height: change the two together. */
.elementor .ffdh-card > .ffdh-link-arrow:last-child {
  margin-block-end: calc((1.375em - 44px) / 2);
}
.ffdh-link-arrow::after {
  content: "\2192" / "";
  position: relative;
  inset-inline-start: 0;
  margin-inline-start: var(--sp-2);
  transition: inset-inline-start var(--dur) var(--ease-out);
}
.ffdh-link-arrow:hover::after {
  inset-inline-start: 2px;
}
/* The three rows are the timeline's (a subgrid), so every marker in a row is as tall as the tallest and the headings line up. This lives here, not in the
   ffdh-step class, because Elementor's class importer is not known to accept subgrid. A timeline that is not a grid leaves each step's rows its own. */
.ffdh-step {
  grid-row: span 3;
  grid-template-rows: subgrid;
}
/* The step connector runs behind the marker pill across the grid gap (ffdh-grid-3 and ffdh-grid-4 both use --sp-6) to the next step's left edge, where that step's
   pill covers its end. It sits in the step's first grid row, the marker row shared across the timeline row, so its centre is the centre of every pill in the
   row. A step that ends its row draws none, because nothing sits beside it to run to; which steps end a row depends on the grid: ffdh-grid-3 keeps its three
   columns until the phone breakpoint, and ffdh-grid-4 has four, then two on tablet. On phones the steps stack, so every connector is dropped. */
.ffdh-step:not(:last-child)::after {
  content: "";
  position: absolute;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  top: calc(50% - 1px);
  left: 0;
  right: calc(var(--sp-6) * -1);
  height: 2px;
  background: var(--c-border-strong);
}
.ffdh-grid-3 > .ffdh-step:nth-child(3n)::after,
.ffdh-grid-4 > .ffdh-step:nth-child(4n)::after {
  display: none;
}
@media (max-width: 1080px) {
  .ffdh-grid-4 > .ffdh-step:nth-child(2n)::after {
    display: none;
  }
}
@media (max-width: 767px) {
  .ffdh-step:not(:last-child)::after {
    display: none;
  }
}
/* A marker can open with a fact whose display is lowercase ("net 15"). */
.ffdh-step-marker::first-letter {
  text-transform: uppercase;
}
@media (min-width: 1081px) {
  .ffdh-post-aside {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--sp-5));
  }
}

/* Rows, stacks and cards on a page. Every rule is scoped under .elementor, because Elementor emits each Global Class as ".elementor .<label>" at (0,2,0) in a sheet that
   loads after this one, and V4 gives flex children a shared width and a zero basis, so a row whose children should size to content says so. The Theme Builder parts
   reach only three of these rules, and none changes them: their CTA bands' button rows and their heroes' children are content-sized and full-width already, and the
   paragraphs in their stacks are ffdh-lead (a class with its own measure) or ffdh-small (the footer states its own). */
.elementor .ffdh-btn-row.ffdh-btn-row > * {
  flex: 0 0 auto;
  width: auto;
}
/* A hero's children fill their flex row or grid area at their natural height, because V4 gives flex children a shared width and a zero basis; a centred or
   gridded hero would otherwise narrow them to a third. */
.elementor .ffdh-hero .ffdh-stack > * {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}
/* On phones a hero's two buttons stack and span the column; from 768px up they stay content-sized. */
@media (max-width: 767px) {
  .elementor .ffdh-hero .ffdh-btn-row.ffdh-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
}
/* A container that is also a grid (Pricing's price cards) keeps the container's 10px, which is part of the content edge the header gutters align to. The grid classes
   zero their padding for the nested wrappers inside a container, and without this that zero reached the container too, 10px outside the edge every other block uses.
   The 10px is Elementor's own container padding, which no token holds. */
.elementor .ffdh-container:is(.ffdh-grid-2, .ffdh-grid-3, .ffdh-grid-4) {
  padding: 10px;
}
/* A split that stacks would turn its 48px column gap into the row gap; stacked, the gap between a lede and its content is the stack's 24px, as everywhere else.
   That holds for a split whose first column is a heading stack (a section's head beside its content). A split of two islands, the 404's search beside its links,
   holds two blocks of equal standing, so it keeps the class's 48px. */
@media (max-width: 1080px) {
  .elementor .ffdh-split.ffdh-split:has(> .ffdh-stack:first-child) {
    row-gap: var(--sp-5);
  }
}
.elementor .ffdh-step.ffdh-step {
  min-width: 0;
}
.elementor .ffdh-step > :is(h3, p) {
  margin: 0;
}
/* A card in a grid is a column, so cards of unequal text length stay equal height and an arrow link that closes the card sits on its bottom edge. */
.elementor :is(.ffdh-grid-2, .ffdh-grid-3) > .ffdh-card.ffdh-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.elementor .ffdh-grid-2 > .ffdh-card > .ffdh-link-arrow:last-child {
  align-self: flex-start;
  margin-top: auto;
}
.elementor :is(.ffdh-grid-2, .ffdh-grid-3) .ffdh-card :is(h3, p) {
  margin: 0;
}
/* A stack that is a column of a split is a container too, so it carries Elementor's 10px padding; its text sits on the content edge and level with the other column. */
.elementor .ffdh-split > .ffdh-stack {
  padding: 0;
}
/* Team cards: Home's teaser and About's team are both a centred, wrapping row of equal columns, so a last row with fewer people sits in the middle, not under the first
   column. A page chooses how many people share a row from tablet up with --team-cols; a phone always shows two, with the tighter gap and text sides that let a name and a role
   such as "Chief Sales Officer" fit one line at 390px. The headshot is a square crop from the top, and a name (a paragraph on Home, an h3 on About) is bold body-size text. */
.elementor .ffdh-team-grid {
  --team-cols: 2;
  --team-gap: var(--sp-5);
}
@media (max-width: 767px) {
  .elementor .ffdh-team-grid {
    --team-gap: var(--sp-4);
  }
}
.elementor .ffdh-team-grid.ffdh-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--team-gap);
}
.elementor .ffdh-team-grid > .ffdh-team-card.ffdh-team-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - var(--team-gap) * (var(--team-cols) - 1)) / var(--team-cols));
  gap: var(--sp-1);
  padding: 0 0 var(--sp-4);
}
.elementor .ffdh-team-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}
.elementor .ffdh-team-card > :is(p, h3) {
  margin: 0;
  padding-inline: var(--sp-4);
}
@media (max-width: 767px) {
  .elementor .ffdh-team-card > :is(p, h3) {
    padding-inline: var(--sp-3);
  }
}
.elementor .ffdh-team-card > :is(p, h3):not(.ffdh-small) {
  margin-top: var(--sp-3);
  font-weight: 700;
  line-height: 1.25; /* a name that wraps reads as one name, not two stacked words */
}
/* The kit's h3 style is a heading size; a name in a card is body text (a paragraph name already is, from the kit's p style). */
.elementor .ffdh-team-card > h3:not(.ffdh-small) {
  font-size: var(--fs-body);
}
/* A paragraph keeps a reading measure inside a wide stack. :where() holds the exclusion at zero weight, so the lead class keeps its own measure and the footer's
   40ch entity line (a (0,3,0) rule) still outranks this one. */
.elementor .ffdh-stack > p:where(:not(.ffdh-lead)) {
  max-width: 62ch;
}
/* An arrow link that ends a stack is as wide as its text, not the column V4 would stretch it across, so its focus ring hugs it. */
.elementor .ffdh-stack > .ffdh-link-arrow {
  align-self: flex-start;
}
/* A source line cites the table or figure above it, so it sits 12px under it instead of a stack gap (24px) away. The 24px is ffdh-stack's gap: change the two together. */
.elementor .ffdh-stack > .ffdh-island + .ffdh-source {
  margin-top: calc(var(--sp-3) - var(--sp-5));
}

/* Legal reading pages (Privacy, Terms). The draft banner is a notice that comes off after counsel's review; the reading layout is ffdh-legal on the body's stack and stays. */

/* The banner is a band across the page, its text on the content edge the hero below uses: the larger of the section gutter and the space beside the 1140px container, plus the container's own 10px (Elementor's, which no token holds). The
   class itself draws a boxed notice, which would sit 10px inside a page edge and square against the hero. */
.elementor .e-div-block-base.ffdh-banner-draft {
  padding-block: var(--sp-3);
  padding-inline: calc(max(var(--sp-5), (100% - var(--container)) / 2) + 10px);
  border-width: 0 0 1px;
  border-radius: 0;
}
.elementor .ffdh-banner-draft strong {
  color: var(--c-gold-700);
}
@media (max-width: 767px) {
  .elementor .e-div-block-base.ffdh-banner-draft {
    padding-inline: calc(max(var(--sp-4), (100% - var(--container)) / 2) + 10px);
  }
}

/* Long-form text reads at the prose size and line height. A heading starts a section: a hairline above every heading but the first and more space above it than below, so
   sections are found by their rules and each body stays with its heading (the class sets the tighter gap). The copy's own line breaks are kept (pre-line): a blank line is a paragraph
   break and a single line break stays a break, because a body is one text element and Elementor's paragraph text cannot hold two paragraphs. */
.elementor .ffdh-legal > p {
  font-size: var(--fs-prose);
  line-height: 1.7;
  white-space: pre-line;
}
.elementor .ffdh-legal > h2 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.elementor .ffdh-legal > h2:not(:first-child) {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
/* The column is the reading measure, so a section's hairline ends where its text does (wherever the narrow container is wider than the measure, from about 775px, it ran up
   to ~290px past it). The stack is as wide as the 62ch a stack paragraph keeps (the stack rule above: change the two together), with the prose size set on the stack so ch
   resolves there, plus the container's own 10px a side (Elementor's, which no token holds). Below that width the narrow container binds as before. (0,3,0) outranks the
   container class. */
.elementor .ffdh-container--narrow.ffdh-legal {
  font-size: var(--fs-prose);
  max-width: calc(62ch + 20px);
}

/* Break-even equation: a callout that holds a break-even figure (the fact the sum ends in) is a worked equation on a plate, not a sentence in a box; a callout without one is
   the class as the kit draws it. The three figures of each sum are the display size at the heaviest weight, the operators between them a lighter weight in the callout's gold,
   and the answer is the one fuchsia figure with a gold underline under it. The plate is the callout class kept (gold ground, ink) with its bar and tight padding replaced by
   room and a soft shadow. A sum wraps only at a space: balanced, it breaks before the equals sign on a phone (the price over the rate on the first line, the answer alone
   on the second), and the figures themselves never split (a fact is one span, held on one line). The display size would push the first half of a sum past the plate on the
   narrowest phones, so it is capped at 10vw (32px at 320px, where that half is 212px against 220px of room). The plate's side padding eases from 24px up to 48px with the
   viewport (5vw) rather than stepping at 768px: a step to 48px would leave the sum 7px short of its line from 768 to 779px. The underline sits 0.2em under the baseline,
   clear of the tail Poppins 800 gives its comma (0.124em). A plate that holds two sums sets them one under the other, the second pair under a hairline. The kit's paragraph style
   is (0,2,0) and the card-ink rule above (0,2,1); the hook's :has() argument lifts every rule here past both. The facts are matched by their data-fact attribute, because .ffdh-fact is the facts plugin's class, not a Global Class. */
.elementor .ffdh-callout:has([data-fact^="calc.breakeven"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sp-2);
  padding: var(--sp-8) clamp(var(--sp-5), 5vw, var(--sp-8));
  border: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
@media (max-width: 767px) {
  .elementor .ffdh-callout:has([data-fact^="calc.breakeven"]) {
    padding-block: var(--sp-6);
  }
}
/* A paragraph holding a fact is a sum; one holding none is the label that names it ("A US hire"), a small gold line that belongs to the sum under it. The row gap is
   the label-to-sum distance, so a paragraph that follows a sum takes the room between the pairs, with the hairline, above itself. */
.elementor .ffdh-callout:has([data-fact^="calc.breakeven"]) p:has([data-fact]) {
  margin: 0;
  color: var(--c-gold-700);
  font-size: min(var(--fs-display), 10vw);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.elementor .ffdh-callout:has([data-fact^="calc.breakeven"]) p:not(:has([data-fact])) {
  margin: 0;
  color: var(--c-gold-700);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
}
.elementor .ffdh-callout:has([data-fact^="calc.breakeven"]) p:has([data-fact]) + p {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid color-mix(in srgb, var(--c-gold-700) 30%, transparent);
}
.elementor .ffdh-callout:has([data-fact^="calc.breakeven"]) [data-fact] {
  color: var(--c-ink-900);
  font-weight: 800;
  white-space: nowrap;
}
.elementor .ffdh-callout:has([data-fact^="calc.breakeven"]) [data-fact]:last-child {
  color: var(--c-fuchsia-700);
  text-decoration: underline;
  text-decoration-color: var(--c-gold-400);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

/* FAQ: each question is a card; the chevron turns 180 degrees when it opens. Elementor emits the accordion's own rules as ".elementor .e-accordion-*"
   at (0,2,0) and V4 gives flex children a shared width, so the row's padding and gap, its layout and the answer padding are stated under .elementor, where every FAQ gets them. */
.ffdh-faq details {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: box-shadow var(--dur) var(--ease-out);
}
.ffdh-faq details:hover,
.ffdh-faq details[open] {
  box-shadow: var(--sh-brand);
}
.elementor .ffdh-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  padding-inline: var(--sp-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
/* The visible card is the <details>, so a focused question's ring is drawn on it (following its rounded corners, closed and open) and not on the square <summary>. The summary keeps a
   transparent outline for forced-colours mode, and the open card keeps its glow under the ring. */
.ffdh-faq summary:focus-visible {
  box-shadow: none;
}
.ffdh-faq details:has(> summary:focus-visible) {
  box-shadow: var(--ring);
}
.ffdh-faq details[open]:has(> summary:focus-visible) {
  box-shadow: var(--ring), var(--sh-brand);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-faq details:has(> summary:focus-visible) {
  box-shadow: var(--ring-on-dark);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-faq details[open]:has(> summary:focus-visible) {
  box-shadow: var(--ring-on-dark), var(--sh-brand);
}
.ffdh-faq summary::-webkit-details-marker {
  display: none;
}
.ffdh-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-inline-end: var(--sp-1);
  border-right: 2.5px solid var(--c-fuchsia-600);
  border-bottom: 2.5px solid var(--c-fuchsia-600);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.ffdh-faq details[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

/* Elementor's icon slot holds nothing (the chevron is the ::after above) but, as a flex item, still takes a 16px gap, which cost every question that width. */
.elementor .ffdh-faq summary > .e-accordion-item-icon-base {
  display: none;
}
/* The answer's top is the theme's too: Elementor's base gives the content box 10px there, which set the answer further from its question than the
   question sits from the card's top. */
.elementor .ffdh-faq details > .e-accordion-item-content-base {
  padding-inline: var(--sp-5);
  padding-block: 0 var(--sp-4);
}
.elementor .ffdh-faq details p {
  margin: 0;
}

/* Print: scroll-driven animations never advance on paper, so the reveal group and the level line print in their final state instead of blank. */
@media print {
  .ffdh-h2-level::after {
    animation: none;
    transform: none;
  }
  .ffdh-reveal {
    animation: none;
  }
}

/* Reduced motion: classes that transition or lift are switched off with !important, because Elementor's class stylesheet loads after the theme. Elementor compiles a class's hover as
   ":hover, :focus-visible", so a keyboard-focused button or card lifts as a hovered one does, and the lift is cancelled for both. */
@media (prefers-reduced-motion: reduce) {
  .ffdh-h2-level::after {
    animation: none;
    transform: none;
  }
  .ffdh-reveal {
    animation: none;
  }
  .ffdh-brief-card,
  .ffdh-btn-on-dark,
  .ffdh-btn-primary,
  .ffdh-btn-secondary,
  .ffdh-card,
  .ffdh-price-card
  {
    transition: none !important;
  }
  .ffdh-brief-card:is(:hover, :focus-visible),
  .ffdh-btn-on-dark:is(:hover, :focus-visible),
  .ffdh-btn-primary:is(:hover, :focus-visible),
  .ffdh-btn-secondary:is(:hover, :focus-visible),
  .ffdh-card:is(:hover, :focus-visible),
  .ffdh-price-card:is(:hover, :focus-visible)
  {
    transform: none !important;
  }
  .ffdh-link-arrow::after,
  .ffdh-faq summary::after,
  .ffdh-faq details {
    transition: none;
  }
  .ffdh-link-arrow:hover::after {
    inset-inline-start: 0;
  }
}