/* ==========================================================================
   Freeman & Lourenco — shared design system
   Lifted VERBATIM from the source landing page (final.html: its <style> block,
   its inline style-hover attributes, and the design tokens the markup uses).
   Do not re-derive values by eye; change the source, then re-lift.

   1. Fonts            5. Component behaviour (source classes)
   2. Design tokens    6. Hover states (source style-hover attributes)
   3. Reset            7. Responsive
   4. Theme isolation  8. Mobile menu
                       9. Contact Form 7
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — bundled locally (the source linked fonts.googleapis.com).
   One variable woff2 per family/style/subset; the weight axis is declared as a
   range so 400–700 all resolve to the same file.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/newsreader-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/newsreader-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/newsreader-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/space-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/space-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS — the exact hex values the source markup uses. The markup
   keeps its literal inline hex (lifted verbatim); these back the isolation
   layer, the mobile menu and the Contact Form 7 styling below.
   -------------------------------------------------------------------------- */
.fl-scope{
  --fl-page:#EEF2F5;      /* page background          */
  --fl-paper:#FFFFFF;
  --fl-ink:#0B2434;       /* body text                */
  --fl-ink-2:#2E3944;
  --fl-ink-3:#4E5A66;     /* muted body               */
  --fl-brand:#026796;
  --fl-brand-dk:#024D71;
  --fl-brand-lt:#7FB8D6;
  --fl-navy:#072C42;
  --fl-navy-2:#0C3A55;
  --fl-navy-3:#041E2E;
  --fl-navy-hover:#0E415F;
  --fl-line:#D3DDE4;      /* light hairline           */
  --fl-line-2:#CFE0EC;
  --fl-line-dk:#17506F;   /* hairline on navy         */
  --fl-line-mid:#1E5B7E;
  --fl-muted:#6E8EA3;
  --fl-muted-2:#7C97AC;
  --fl-muted-3:#8FB0C4;
  --fl-cloud:#B2C6D4;
  --fl-fine:#7E8B96;
  --fl-rail:1400px;       /* container width          */
  --fl-ease:cubic-bezier(.16,.84,.32,1);
  --fl-font-body:'Hanken Grotesk',system-ui,sans-serif;
  --fl-font-display:'Newsreader',serif;
  --fl-font-mono:'Space Grotesk',sans-serif;
}

/* --------------------------------------------------------------------------
   3. RESET — the source's <style> reset, scoped to the widgets.
   -------------------------------------------------------------------------- */
.fl-scope,.fl-scope *{box-sizing:border-box;margin:0;padding:0;}
.fl-scope{
  font-family:var(--fl-font-body);
  color:var(--fl-ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.fl-scope img,.fl-scope svg{display:block;max-width:100%;}
.fl-scope a{color:var(--fl-brand-dk);text-decoration:none;}
.fl-scope a:hover{color:var(--fl-brand);}
.fl-scope ul{list-style:none;}
.fl-scope input,.fl-scope select,.fl-scope textarea,.fl-scope button{font-family:inherit;}
.fl-scope summary::-webkit-details-marker{display:none;}
.fl-scope ::selection{background:var(--fl-brand);color:var(--fl-page);}
.fl-scope :focus-visible{outline:2px solid var(--fl-brand);outline-offset:3px;}

/* The source used html{scroll-behavior:smooth} for its in-page anchor nav. */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* --------------------------------------------------------------------------
   4. THEME ISOLATION — per-section widgets lose the source page's single outer
   wrapper, so anything relying on INHERITED font/colour would fall back to the
   theme. !important lives on the container (the parent) so it only governs
   inheritance: sections that set their own colour on the <section>, and
   headings with inline styles, are unaffected.
   -------------------------------------------------------------------------- */
[class*="elementor-widget-fl_"] > .elementor-widget-container{
  font-family:'Hanken Grotesk',system-ui,sans-serif!important;
  color:#0B2434!important;
  line-height:1.55;
  margin:0;
  padding:0;
}
[class*="elementor-widget-fl_"] .elementor-widget-container *{box-sizing:border-box;}
[class*="elementor-widget-fl_"] .elementor-widget-container :is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol){margin:0;}
[class*="elementor-widget-fl_"] .elementor-widget-container a{text-decoration:none!important;}
[class*="elementor-widget-fl_"] .elementor-widget-container button,
[class*="elementor-widget-fl_"] .elementor-widget-container input,
[class*="elementor-widget-fl_"] .elementor-widget-container select,
[class*="elementor-widget-fl_"] .elementor-widget-container textarea{font-family:inherit;}
[class*="elementor-widget-fl_"]{width:100%;}

/* CRITICAL — many themes ship img{height:auto!important;max-width:100%!important},
   which overrides even inline styles and collapses every object-fit:cover image
   (leaving the wrapper's navy background showing under it). Re-assert the exact
   sizing patterns this markup uses, keyed to the inline style. Logo heights are
   editable, so they travel as a custom property — themes cannot !important a
   custom property away. */
[class*="elementor-widget-fl_"] .elementor-widget-container img[style*="height:100%"]{height:100%!important;}
[class*="elementor-widget-fl_"] .elementor-widget-container img[style*="object-fit:cover"]{object-fit:cover!important;}
[class*="elementor-widget-fl_"] .elementor-widget-container img.fl-logo-img{height:var(--fl-logo-h)!important;width:auto!important;max-width:none;}

/* Prose typed into a WYSIWYG control renders adjacent block siblings; the reset
   above zeroes their margins, so restore spacing only inside editor content (a
   single paragraph — the default — stays pixel-identical to the source). */
.fl-scope .fl-rich :is(p,ul,ol) + :is(p,ul,ol){margin-top:.9em;}
.fl-scope .fl-rich :is(ul,ol){padding-left:1.15em;}
.fl-scope .fl-rich ul{list-style:disc;}
.fl-scope .fl-rich ol{list-style:decimal;}

/* --------------------------------------------------------------------------
   5. COMPONENT BEHAVIOUR — lifted verbatim from the source <style> block.
   These are real classes in the source, so the declarations carry over as-is.
   -------------------------------------------------------------------------- */
.fl-scope .cta-primary{transition:background .3s ease,transform .3s var(--fl-ease),box-shadow .3s ease;}
.fl-scope .trust-cell{transition:background .35s ease;}
.fl-scope .serve-card{transition:transform .4s var(--fl-ease),box-shadow .4s ease;}
.fl-scope .serve-card .serve-tab{transition:transform .5s var(--fl-ease);}
.fl-scope .serve-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(7,44,66,.55);}
.fl-scope .serve-card:hover .serve-tab{transform:scaleX(1) !important;}
.fl-scope .svc-card{position:relative;z-index:0;transition:background .45s var(--fl-ease),box-shadow .45s ease;}
.fl-scope .svc-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:#7FB8D6;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--fl-ease);z-index:2;}
.fl-scope .svc-card h3{transition:color .4s ease,transform .5s var(--fl-ease);}
.fl-scope .svc-card p,.fl-scope .svc-card li,.fl-scope .svc-card .fl-rich,.fl-scope .svc-card .svc-num,.fl-scope .svc-card .svc-flag,.fl-scope .svc-card svg{transition:color .4s ease,stroke .4s ease,border-color .4s ease;}
.fl-scope .svc-card:hover{background:#072C42 !important;z-index:1;box-shadow:0 34px 70px -36px rgba(3,20,32,.75);}
.fl-scope .svc-card:hover::before{transform:scaleX(1);}
/* Every bit of copy goes pure white against the navy fill.
   .fl-rich and its descendants are listed explicitly: the description is a
   <div class="fl-rich"> whose text is only wrapped in a <p> once someone has
   edited it in the WYSIWYG. Straight out of the box the text is a direct child
   of that div, so a `p` selector misses it entirely and the #4E5A66 inline
   colour survives — dark grey on navy. */
.fl-scope .svc-card:hover h3,
.fl-scope .svc-card:hover p,
.fl-scope .svc-card:hover li,
.fl-scope .svc-card:hover .fl-rich,
.fl-scope .svc-card:hover .fl-rich *{color:#FFFFFF !important;}
.fl-scope .svc-card:hover h3{transform:translateX(5px);}
.fl-scope .svc-card:hover .svc-num{color:#7FB8D6 !important;}
.fl-scope .svc-card:hover .svc-flag{border-color:#1E5B7E !important;color:#7FB8D6 !important;}
.fl-scope .svc-card:hover svg{stroke:#7FB8D6 !important;}
/* The service card's tick sits on the FIRST line of its item, at every width —
   its inline margin-top:2px leaves it high, and on a wrapped item a centred
   icon would drift to the middle of the block. The icon's BOX is grown to one
   line box of the text (17px × 1.55 = 26.35px); an SVG with a viewBox scales to
   fit, so the glyph stays 15px and centres itself inside that taller box. No
   per-item margin to keep in step with the type. */
.fl-scope .svc-card li > svg:first-child{margin-top:0 !important;height:26.35px !important;}

.fl-scope .journey-step:hover{opacity:1 !important;}
.fl-scope .journey-step:hover .journey-num{color:rgba(127,184,214,0.14);-webkit-text-stroke:1px rgba(127,184,214,0.6);}
.fl-scope .journey-step:hover .journey-title{transform:translateX(6px);}
.fl-scope .trust-cell svg{transition:transform .4s var(--fl-ease);}
.fl-scope .trust-cell:hover{background:#0E415F;}
.fl-scope .trust-cell:hover .trust-tab{transform:scaleX(1);}
.fl-scope .trust-cell:hover svg{transform:translateY(-3px);}
.fl-scope .cta-primary svg{transition:transform .35s var(--fl-ease);}
.fl-scope .cta-primary::before{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);pointer-events:none;transition:left .6s var(--fl-ease);}
.fl-scope .cta-primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(2,103,150,.75);}
.fl-scope .cta-primary:hover svg{transform:translateX(6px);}
.fl-scope .cta-primary:hover::before{left:150%;}

/* --------------------------------------------------------------------------
   6. HOVER STATES — one rule per style-hover="…" attribute in the source. The
   base values are inline, so every hover declaration needs !important to win
   (this is what the source's renderer did under the hood).
   -------------------------------------------------------------------------- */
.fl-scope .fl-nav-link:hover{color:#026796!important;}
.fl-scope .fl-nav-cta:hover{background:#024D71!important;}

/* A phone number is not a navigational link: on a desktop there is nothing to
   click, so it gets the normal text cursor and NO hover state of any kind. It
   stays a real tel: anchor so a phone can still dial it. The attribute selector
   outscores the component hover rules above, so this holds wherever a number
   appears — the header bar, the mobile panel, the assessment section — and for
   any number added later.
   :focus-visible is deliberately untouched; this is about hover, not keyboard
   focus. */
.fl-scope a[href^="tel:"]{cursor:default;}

/* Nothing may animate either, or a neutralised hover would still fade. */
.fl-scope a[href^="tel:"],
.fl-scope a[href^="tel:"] *{transition:none!important;}

/* Every property that could carry a visible hover, pinned on the ANCHOR.
   Deliberately not applied to descendants:
     - colour: the spans inside the phone block carry their own inline colours,
       and forcing inherit on them would CHANGE the number's colour on hover —
       creating the very effect this rule exists to remove.
     - background: the phone icon's circular tint is a descendant's background
       and has to survive. */
.fl-scope a[href^="tel:"]:hover{
  color:inherit!important;
  text-decoration:none!important;
  background-color:transparent!important;
  border-color:inherit!important;
  box-shadow:none!important;
  transform:none!important;
  opacity:1!important;
  letter-spacing:inherit!important;
}
/* An underline set on the anchor propagates into descendants, so it is cleared
   there too — safe, because none of them decorate their text by design. */
.fl-scope a[href^="tel:"]:hover *{text-decoration:none!important;}
/* Kills a decorative sweep or arrow if such a class is ever put on a number. */
.fl-scope a[href^="tel:"]:hover::before,
.fl-scope a[href^="tel:"]:hover::after{content:none!important;transform:none!important;}

.fl-scope .fl-hero-cta:hover{background:#7FB8D6!important;}
.fl-scope .fl-hero-ghost:hover{border-color:#7FB8D6!important;color:#7FB8D6!important;}
.fl-scope .fl-hero-card-link:hover{background:#024D71!important;}

.fl-scope .fl-tier-cta:hover{gap:12px!important;color:#026796!important;}
.fl-scope .fl-svc-cta:hover{background:#024D71!important;}
.fl-scope .fl-why-cta:hover{background:#7FB8D6!important;}
.fl-scope .fl-ind-card:hover{border-color:#026796!important;transform:translateY(-3px)!important;}
.fl-scope .fl-ind-cta:hover{background:#024D71!important;}
.fl-scope .fl-proc-cta:hover{background:#7FB8D6!important;}
.fl-scope .fl-rev-all:hover{border-color:#026796!important;box-shadow:0 8px 24px -16px rgba(7,44,66,.5)!important;}

/* The footer credit inherits the legal line's colour, so an underline is the
   only affordance available to it. */
.fl-scope .fl-foot-credit:hover{text-decoration:underline!important;}

@media (prefers-reduced-motion:reduce){
  .fl-scope .cta-primary,.fl-scope .cta-primary svg,.fl-scope .cta-primary::before{transition:none;}
  .fl-scope .cta-primary:hover{transform:none;}
}

/* The industry card's photo sits in an aspect-ratio:4/3 well with a navy
   backdrop. If the image is ever allowed to compute its own height (a theme's
   img{height:auto}, or a stray line-box under an inline image) the navy shows
   through under the photo as a band of empty space. Belt and braces: the well
   is a block with no line-height, and the image always fills it. */
.fl-scope .fl-ind-media{display:block;font-size:0;line-height:0;}
.fl-scope .fl-ind-media img{display:block;width:100%;height:100%;object-fit:cover;}

/* The review row is a centred flex row rather than a grid, so a partial last
   row (two reviews in a three-up layout) centres instead of hanging left. The
   column count arrives as --fl-rev-cols on the element, so the breakpoints only
   restate the count and never re-declare the basis. Inline custom properties
   win over stylesheet ones, hence the !important on the overrides below. */
.fl-scope .rev-grid > *{
  flex:0 1 calc((100% - (var(--fl-rev-cols,3) - 1) * 22px) / var(--fl-rev-cols,3));
  min-width:0;
}

/* A trimmed review ends "…text... Read more" — the link runs inline with the
   quote (it belongs to the sentence it interrupted), in the section's link blue
   and at the quote's own size so it never reads as a button. */
.fl-scope .rev-more{
  color:#024D71;
  font-weight:600;
  white-space:nowrap;
}
.fl-scope .rev-more:hover{text-decoration:underline;}

/* The reviewer photo option. Themes ship img{height:auto!important}, which would
   turn the 44px circle into a squashed oval, so the sizing is re-asserted. */
.fl-scope .rev-pic{
  width:44px!important;
  height:44px!important;
  object-fit:cover!important;
  border-radius:50%!important;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE
   The source's own breakpoints, plus the project's tablet/mobile rules. The
   source targeted its section padding with attribute selectors on the inline
   style; the widgets carry .fl-pad-96 / .fl-pad-120 instead, which survives
   the browser normalising the inline string.
   -------------------------------------------------------------------------- */

/* ---- ≤1199px: iPad (incl. Pro landscape) and every phone -----------------
   The mobile menu takes over the navigation (section 8), and the page's
   two-column bands become single-column full-width stacks. */
@media (max-width:1199px){
  /* Section rhythm tightens once the page is single-column. */
  .fl-scope.fl-pad-96,
  .fl-scope.fl-pad-120{padding-top:45px !important;padding-bottom:45px !important;}

  /* Hero: one full-width column — the checklist card follows the copy — on the
     same vertical rhythm as every other section. */
  .fl-scope .hero-grid{grid-template-columns:1fr !important;gap:40px !important;padding:45px 0 !important;}

  /* How-it-works: the sticky header column joins the flow above the steps. */
  .fl-scope .proc2{grid-template-columns:1fr !important;gap:44px !important;}
  .fl-scope .proc2-head{position:static !important;top:auto !important;}

  /* Google reviews: three-up becomes two-up. */
  .fl-scope .rev-grid{--fl-rev-cols:2 !important;}

  /* Services: three-up becomes two-up (this also covers 992–1199px, where the
     brief calls for exactly two columns). */
  .fl-scope .svc-grid{grid-template-columns:repeat(2,1fr) !important;}

  /* Every section header stacks to full width, and the headline drops its
     measure so it can use the whole row. */
  /* gap needs !important: the section header carries gap:30px inline, and an
     inline declaration outranks any stylesheet rule that is not important. */
  .fl-scope .sec-head{flex-direction:column;align-items:flex-start !important;gap:10px !important;}
  .fl-scope .sec-head > *{width:100% !important;max-width:none !important;}
  .fl-scope .sec-head .fl-sec-title,
  .fl-scope .sec-head h1,.fl-scope .sec-head h2,.fl-scope .sec-head h3,
  .fl-scope .sec-head .fl-sec-intro{max-width:none !important;}
  .fl-scope .sec-head .fl-sec-aside{justify-content:flex-start;}

  /* A heading that forces its own line break would waste the full-width row it
     was just given. The break is dropped; the space authored before the <br> is
     what keeps the words apart. */
  .fl-scope :is(h1,h2,h3,h4) br{display:none;}

  /* The hero and assessment headlines carry their own measure (20ch / 19.69ch)
     and sit outside any .sec-head, so the rule above does not reach them. Both
     sections are single-column from here down, which leaves that measure
     stranding the headline in the middle of an otherwise full-width row. */
  .fl-scope .fl-hero-title,
  .fl-scope .fl-cta-title{max-width:none !important;}

  /* LIST ICONS — optically centred on the FIRST line of their text.
     At desktop widths these rows are one line, so a centred icon and a
     first-line-centred icon are the same thing. Once the text wraps, a centred
     icon drifts to the middle of the block.

     Rather than hand-tuning a margin per list, the icon's BOX is grown to the
     height of one line of its text. An SVG with a viewBox scales to fit
     (preserveAspectRatio defaults to xMidYMid meet), so the glyph stays 15px
     and is centred inside that taller box — which puts it exactly on the
     first line's centre line, whatever the text does below it.

     Heights are the text's own line box: font-size × line-height. */
  .fl-scope li{align-items:flex-start !important;}
  .fl-scope li > svg:first-child{
    align-self:flex-start;
    margin-top:0 !important;
    height:26.35px !important;   /* 17px × 1.55 — the inherited default */
  }
  .fl-scope .fl-hero-checklist li > svg:first-child{height:23.8px !important;}  /* 17 × 1.4  */
  .fl-scope .serve-card li > svg:first-child{height:24.65px !important;}        /* 17 × 1.45 */
  .fl-scope .svc-card li > svg:first-child{height:26.35px !important;}          /* 17 × 1.55 */

  /* Every piece of prose loses its measure and uses the full row — the section
     intros, the process column's copy, the journey step bodies, the CTA blurb
     and the FAQ answers. */
  .fl-scope .fl-rich{max-width:none !important;}
  .fl-scope .journey-step .fl-rich,
  .fl-scope .proc2-head .fl-rich{max-width:none !important;}
}

/* ---- 992–1199px: the logo must not crowd or overflow its bar -------------- */
@media (min-width:992px) and (max-width:1199px){
  .fl-scope .fl-logo-link{min-width:0;flex:0 1 auto;overflow:hidden;}
  .fl-scope .fl-logo-img,
  [class*="elementor-widget-fl_"] .elementor-widget-container img.fl-logo-img{
    --fl-logo-h:40px;
    height:40px !important;
    max-height:calc(100% - 12px);
    width:auto !important;
    object-fit:contain;
  }
}

/* ---- 768–1199px: iPad ----------------------------------------------------
   The hero's three stats sit side by side in a column that is now the full
   width of a tablet, so each cell is roughly 210px. At the desktop type sizes
   the labels ("senior review on every file") wrap onto a second line and the
   row loses its single-line rhythm. Trimming the gutters and easing the type
   down buys enough room for one line per cell without restyling the block. */
@media (min-width:768px) and (max-width:1199px){
  .fl-scope .hero-stats > div{padding-left:12px !important;padding-right:12px !important;}
  .fl-scope .hero-stats > div:first-child{padding-left:0 !important;}
  .fl-scope .hero-stats > div:last-child{padding-right:0 !important;}
  /* The value is short enough to hold on one line outright. */
  .fl-scope .hero-stats > div > div:first-child{font-size:17px !important;white-space:nowrap;}
  .fl-scope .hero-stats > div > div:last-child{font-size:13.5px !important;}
}

/* ---- ≤991px: the header CTA moves into the menu panel -------------------- */
@media (max-width:991px){
  .fl-scope .fl-logo-img,
  [class*="elementor-widget-fl_"] .elementor-widget-container img.fl-logo-img{
    --fl-logo-h:40px;
    height:40px !important;
    width:auto !important;
  }
  .fl-scope .fl-nav-cta{display:none !important;}

  /* Announcement bar: the two halves centre instead of pushing apart. */
  .fl-scope.fl-topbar .fl-rail{justify-content:center !important;text-align:center;}

  /* Trust strip goes two-up, so the column rule belongs on the odd cells only —
     the even cell is at the end of its row and would rule against nothing. */
  .fl-scope .trust-grid{grid-template-columns:1fr 1fr !important;}
  .fl-scope .trust-cell{border-right:none !important;padding-top:20px !important;padding-bottom:20px !important;}
  .fl-scope .trust-cell:nth-child(odd){border-right:1px solid #17506F !important;}

  /* Copyright line centres once it is likely to wrap. */
  .fl-scope .fl-foot-row{justify-content:center !important;text-align:center;}
}

/* ---- ≤920px: the source's own stacking breakpoint ------------------------
   (The source's rule also listed .why-grid, .proc-grid and .foot-grid. No
   markup on the page carries those classes — they are leftovers from an earlier
   revision of the design — so they are not carried over here.) */
@media (max-width:920px){
  .fl-scope .serve-grid,
  .fl-scope .why-2col,
  .fl-scope .cta-grid{grid-template-columns:1fr !important;}
  .fl-scope .ind-grid{grid-template-columns:1fr 1fr !important;}
}

/* ---- ≤767px: mobile ------------------------------------------------------ */
@media (max-width:767px){
  /* Only the logo and the menu button remain in the bar — the phone block moves
     into the panel, which is where the mobile menu serves it from. */
  .fl-scope .fl-nav-phone{display:none !important;}

  /* Unless there IS no panel. A header with its navigation switched off (the
     thank-you page) renders no burger and no panel, so the number would have
     nowhere left to appear — it stays in the bar instead, beside the logo on one
     row. The icon is dropped: it is the widest part of the block and says
     nothing the number does not. The logo is 3:1, so at 40px it takes ~119px,
     leaving room for the number down to a 320px screen. */
  .fl-scope.fl-header-bare .fl-nav-phone{
    display:flex !important;
    gap:0 !important;
    flex:none;
    min-width:0;
  }
  .fl-scope.fl-header-bare .fl-nav-phone > span:first-child{display:none !important;}
  .fl-scope.fl-header-bare .fl-nav-phone span{white-space:nowrap;}
  .fl-scope.fl-header-bare .fl-nav-phone span span:last-child{font-size:19px !important;}
  /* Neither side may wrap or shrink the other out of the row. */
  .fl-scope.fl-header-bare .fl-logo-link{flex:none;}
  .fl-scope.fl-header-bare .fl-nav{min-width:0;gap:16px !important;}

  /* Single column throughout. */
  .fl-scope .svc-grid,
  .fl-scope .trust-grid,
  .fl-scope .ind-grid,
  .fl-scope .form-row{grid-template-columns:1fr !important;}
  .fl-scope .rev-grid{--fl-rev-cols:1 !important;}

  /* CTA section photo: shorter on mobile than the 200px desktop crop. */
  .fl-scope .fl-cta-photo{height:120px !important;}

  /* Stacked cells: the column rule between them would draw a stray line down
     the right edge of every cell, so it becomes a rule *between* the rows —
     and the last cell closes the strip, so it gets none.

     :nth-child(odd) is repeated here on purpose. The ≤991px rule that puts the
     rule on odd cells scores (0,2,1) because of the pseudo-class, which beats a
     plain .trust-cell at (0,2,0) — both being !important, specificity decides
     and the border would survive into the stacked layout. */
  .fl-scope .trust-cell,
  .fl-scope .trust-cell:nth-child(odd){
    border-right:none !important;
    border-bottom:1px solid #17506F !important;
  }
  .fl-scope .trust-cell:last-child{border-bottom:none !important;}

  /* Serve card: the tag/badge row stops splitting into two columns, and each
     keyword chip takes the full width rather than wrapping mid-row. */
  .fl-scope .serve-card .fl-serve-top{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;   /* inline gap:12px would otherwise win */
  }
  .fl-scope .serve-card .fl-serve-top > *{max-width:100%;}
  .fl-scope .serve-card .fl-serve-chips{flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;}
  .fl-scope .serve-card .fl-serve-chips > *{width:100% !important;justify-content:flex-start;}

  /* Every boxed layout gets the same 20px inset. */
  .fl-scope .fl-box{padding:20px !important;}

  /* Hero: the buttons go full width, one per row. */
  .fl-scope .fl-hero-actions{flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;}
  .fl-scope .fl-hero-actions > a{width:100% !important;justify-content:center !important;text-align:center;}

  /* Service card: the number/flag header row spans the full width instead of
     splitting into two columns. */
  .fl-scope .svc-card .fl-svc-top{flex-direction:column !important;align-items:flex-start !important;gap:10px;}
  .fl-scope .svc-card .fl-svc-top > *{max-width:100%;}

  /* FAQ: the +/× sits on the first line of the question rather than centred
     against a wrapped, multi-line question. The icon's line box is matched to
     the question's (19.5px × 1.55 ≈ 30px) so the glyph lands on that line. */
  .fl-scope .fl-faq-q{align-items:flex-start !important;}
  .fl-scope .fl-faq-icon{align-self:flex-start;line-height:1.38 !important;}

  /* The eyebrow's hairline rule sits beside its text, so once that text wraps a
     centred rule drifts to the middle of the block. Same idea as the list icons,
     but the rule is 1px tall and has its height set inline, so the box cannot be
     grown — the offset is half a line box instead: (16px × 1.55 − 1px) / 2.
     The FAQ's vertical eyebrow stacks its rule above the text and is excluded. */
  .fl-scope .fl-eyebrow:not(.fl-eyebrow-v){align-items:flex-start !important;}
  .fl-scope .fl-eyebrow:not(.fl-eyebrow-v) > span:first-child{margin-top:11.9px !important;}

  /* The eyebrow sits 16–24px above its title depending on the section, which is
     more air than a phone needs. Its margin is inline, hence !important. */
  .fl-scope .fl-eyebrow{margin-bottom:8px !important;}

  /* Section rhythm tightens again on the phone. */
  .fl-scope.fl-pad-96,
  .fl-scope.fl-pad-120{padding-top:30px !important;padding-bottom:30px !important;}
  .fl-scope .fl-rail{padding-left:20px !important;padding-right:20px !important;}
  .fl-scope .hero-grid{padding:30px 0 !important;gap:30px !important;}
  .fl-scope .hero-stats{grid-template-columns:1fr !important;}
  .fl-scope .hero-stats>div{padding:14px 0 !important;border-left:none !important;border-top:1px solid rgba(255,255,255,.16) !important;}
  .fl-scope .hero-stats>div:first-child{border-top:none !important;padding-top:0 !important;}
  .fl-scope .journey-step{grid-template-columns:1fr !important;gap:6px !important;}
  .fl-scope .journey-num{font-size:54px !important;}
  .fl-scope a.cta-primary,.fl-scope .fl-hero-ghost{min-height:44px;box-sizing:border-box;}
}

@media (hover:none){
  .fl-scope .cta-primary:hover{transform:none;}
  .fl-scope .svc-card:hover{box-shadow:none;}
  .fl-scope .serve-card:hover{transform:none;}
}

/* --------------------------------------------------------------------------
   8. STICKY HEADER
   The source set position:sticky on a <header> that was a direct child of the
   page wrapper, so it had the whole document to travel within. Here the header
   is an Elementor widget: its parent is .elementor-widget-container, a box
   exactly as tall as the header itself, so a sticky element has a zero-length
   range and never engages — the bar just scrolls away.

   So: sticky stays as the no-JS base (it costs nothing and does work if the
   widget is ever dropped into a tall container), and fl-interactions.js takes
   over, flipping the bar to fixed at exactly the scroll position where it would
   have stuck. A spacer holds the space it vacates so the page cannot jump.
   -------------------------------------------------------------------------- */
.fl-scope.fl-header{position:sticky;top:0;z-index:60;}

/* Once the script is in charge, the bar sits in normal flow until it sticks. */
.fl-scope.fl-header.fl-sticky-js{position:relative;top:auto;}
.fl-scope.fl-header.fl-sticky-js.is-stuck{
  position:fixed;
  top:0;left:0;right:0;
  /* Page-builder sections can stack unpredictably; sit above them. */
  z-index:999;
}
/* Holds the header's height while it is out of flow. */
.fl-header-spacer{display:block;width:100%;height:0;}

/* While the mobile panel is open the whole header is lifted above anything else
   fixed to the viewport — a theme's or plugin's floating call button and
   scroll-to-top control, which typically sit around z-index 9999. Those live
   outside this plugin, so they cannot be restyled from here; raising our own
   stacking position is what keeps them from sitting on top of the open menu.

   Only while the menu is open, so the header does not outrank a cookie banner
   or an Elementor popup the rest of the time. Tune it without a rebuild by
   redeclaring --fl-menu-z. */
.fl-scope.fl-header.fl-menu-open{z-index:var(--fl-menu-z,999999) !important;}

/* The same state is mirrored on <html>, so a floating control that still shows
   through can be hidden with one site-level rule, e.g.
     .fl-menu-open .my-floating-call-button{display:none} */

/* --------------------------------------------------------------------------
   9. MOBILE MENU — iPad and iPhone. The desktop nav links are hidden from
   ≤1199px and the same items are served from a panel that drops out of the
   sticky header. Built here (rather than as a third-party menu) so it inherits
   the page's own type, colours and easing.
   -------------------------------------------------------------------------- */
.fl-scope .fl-burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  flex:none;
  align-items:center;justify-content:center;
  background:transparent;
  border:1px solid #D3DDE4;
  color:#0B2434;
  cursor:pointer;
  padding:0;
  transition:background .3s ease,border-color .3s ease;
}
.fl-scope .fl-burger:hover{background:#EAF2F8;border-color:#026796;}
.fl-scope .fl-burger-bars{position:relative;display:block;width:20px;height:14px;}
.fl-scope .fl-burger-bars span{
  position:absolute;left:0;
  display:block;width:100%;height:2px;
  background:#024D71;
  transition:transform .32s var(--fl-ease),opacity .2s ease,top .32s var(--fl-ease);
}
.fl-scope .fl-burger-bars span:nth-child(1){top:0;}
.fl-scope .fl-burger-bars span:nth-child(2){top:6px;}
.fl-scope .fl-burger-bars span:nth-child(3){top:12px;}
.fl-scope .fl-burger[aria-expanded="true"] .fl-burger-bars span:nth-child(1){top:6px;transform:rotate(45deg);}
.fl-scope .fl-burger[aria-expanded="true"] .fl-burger-bars span:nth-child(2){opacity:0;}
.fl-scope .fl-burger[aria-expanded="true"] .fl-burger-bars span:nth-child(3){top:6px;transform:rotate(-45deg);}

.fl-scope .fl-mnav{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  background:#FFFFFF;
  border-bottom:1px solid #D3DDE4;
  box-shadow:0 24px 40px -28px rgba(7,44,66,.55);
  max-height:calc(100vh - 84px);
  overflow-y:auto;
  z-index:59;
}
.fl-scope .fl-mnav-inner{padding:8px 28px 24px;}
.fl-scope .fl-mnav a.fl-mnav-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid #E4EBF0;
  color:#0B2434;font-size:17px;font-weight:500;
  transition:color .25s ease,padding-left .25s var(--fl-ease);
}
.fl-scope .fl-mnav a.fl-mnav-link:hover{color:#026796;padding-left:4px;}
.fl-scope .fl-mnav a.fl-mnav-link svg{opacity:.45;}
.fl-scope .fl-mnav-phone{
  display:flex;align-items:center;gap:11px;
  padding:18px 0 4px;line-height:1.15;
}
.fl-scope .fl-mnav-cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:16px;
  background:#026796;color:#FFFFFF;
  font-weight:600;font-size:16px;
  padding:15px 20px;
  min-height:48px;
}
.fl-scope .fl-mnav-cta:hover{background:#024D71;color:#FFFFFF;}

/* Animated open/close. The panel is display:none until the breakpoint so it
   never steals clicks on desktop. */
@media (max-width:1199px){
  .fl-scope .fl-burger{display:inline-flex;}
  .fl-scope .fl-nav .nav-hide:not(.nav-keep){display:none !important;}
  .fl-scope .fl-mnav{
    display:block;
    overflow:hidden;
    max-height:0;
    opacity:0;
    visibility:hidden;
    transition:max-height .42s var(--fl-ease),opacity .28s ease,visibility .42s step-end;
  }
  .fl-scope .fl-mnav.is-open{
    max-height:calc(100vh - 84px);
    overflow-y:auto;
    opacity:1;
    visibility:visible;
    transition:max-height .42s var(--fl-ease),opacity .28s ease,visibility 0s;
  }
}
@media (prefers-reduced-motion:reduce){
  .fl-scope .fl-mnav,.fl-scope .fl-burger-bars span{transition:none !important;}
}

/* --------------------------------------------------------------------------
   10. THANK-YOU PANEL — the middle of a one-screen page.

   Header at the top, footer at the bottom, this panel taking whatever is left
   with its content centred both ways. The height it must give up to the header
   and footer is measured by fl-interactions.js and arrives as
   --fl-thanks-chrome; until that runs, the panel already fills the viewport, so
   the first paint is never short.

   dvh, not vh: on a phone, vh is the viewport with the address bar *hidden*, so
   a vh-based panel is taller than what you can see and the footer sits below the
   fold on load. dvh tracks the visible viewport, which keeps the proportions
   right as the bar collapses.
   -------------------------------------------------------------------------- */
.fl-scope .fl-thanks-inner{display:flex;align-items:center;justify-content:center;}

.fl-scope.fl-thanks-fit{
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--fl-thanks-chrome, 0px));
}
@supports (height:100dvh){
  .fl-scope.fl-thanks-fit{min-height:calc(100dvh - var(--fl-thanks-chrome, 0px));}
}
.fl-scope.fl-thanks-fit > .fl-thanks-inner{flex:1 1 auto;}

/* Not filling the screen (or a window too short to be worth it): the panel keeps
   a floor so it never collapses to the height of its text. */
.fl-scope .fl-thanks{min-height:var(--fl-thanks-min, 380px);}
@media (max-height:480px){
  .fl-scope.fl-thanks-fit{min-height:var(--fl-thanks-min, 380px);}
}

/* --------------------------------------------------------------------------
   11. CONTACT FORM 7 — scoped to the assessment card so the rendered CF7 markup
   matches the source form exactly (2-up grid rows, #EEF2F5 fields, 16px type,
   custom select chevron, full-width submit). Field-tag names live in the
   pasteable template that ships beside this plugin; only the surrounding HTML
   is styled here.
   -------------------------------------------------------------------------- */
.fl-scope .fl-form-card .wpcf7{margin:0;padding:0;}
.fl-scope .fl-form-card .wpcf7-form{margin:0;}

/* CF7 runs the form template through wpautop, which wraps the CONTENTS of each
   container in a <p>. That <p> then becomes the grid's only child — both labels
   land inside it, in column one, at half width — which is what breaks the 2-up
   rows. display:contents removes the wrapper from the box tree without removing
   its children, so the labels become grid items again. It is written to be a
   no-op if wpautop is ever disabled and the labels are already direct children. */
.fl-scope .fl-form-card .form-row > p,
.fl-scope .fl-form-card .fl-submit-row > p,
.fl-scope .fl-form-card .fl-personal-note > p{display:contents;}

/* wpautop also emits stray <br>s and empty paragraphs around block siblings. */
.fl-scope .fl-form-card .wpcf7-form > br,
.fl-scope .fl-form-card .form-row > br,
.fl-scope .fl-form-card .form-row > p > br,
.fl-scope .fl-form-card label > br{display:none;}
.fl-scope .fl-form-card .wpcf7-form > p:empty,
.fl-scope .fl-form-card .form-row > p:empty{display:none;}

/* The hidden-fields fieldset is layout-neutral in the source markup. */
.fl-scope .fl-form-card .hidden-fields-container{display:none;}

/* No line-height on the heading: the source inherits the page's 1.55. */
.fl-scope .fl-form-card .fl-form-title{font-family:'Newsreader',serif;font-weight:600;font-size:23px;letter-spacing:-.01em;margin-bottom:6px;color:#0B2434;}
.fl-scope .fl-form-card .fl-form-sub{color:#4E5A66;font-size:16px;margin-bottom:24px;}
.fl-scope .fl-form-card .fl-form-fine{text-align:center;font-size:16px;color:#7E8B96;margin-top:12px;}

.fl-scope .fl-form-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.fl-scope .fl-form-card .form-row-1{grid-template-columns:1fr;}
.fl-scope .fl-form-card label{display:flex;flex-direction:column;gap:6px;width:100%;}
.fl-scope .fl-form-card .fl-lab{font-size:16px;font-weight:600;color:#0B2434;}
.fl-scope .fl-form-card .fl-opt{color:#4E5A66;font-weight:400;}

/* CF7 wraps each control in an inline <span> — make it a full-width block so
   the label's flex-column layout still governs. */
.fl-scope .fl-form-card .wpcf7-form-control-wrap{display:block;width:100%;}

/* Do NOT set line-height on the controls: the UA stylesheet keeps them at
   `normal` and the source inherits that. Forcing 1.55 makes every field ~4px
   taller than the design. */
.fl-scope .fl-form-card input[type="text"],
.fl-scope .fl-form-card input[type="tel"],
.fl-scope .fl-form-card input[type="email"],
.fl-scope .fl-form-card select,
.fl-scope .fl-form-card textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #D3DDE4;
  border-radius:0;
  background:#EEF2F5;
  font-size:16px;
  color:#0B2434;
  box-shadow:none;
  outline:none;
}
/* The source strips the native arrow and draws its own chevron. CF7 gives us no
   wrapper to hang it on, so it is a background image on the control. */
.fl-scope .fl-form-card select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:12px 40px 12px 14px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B2434' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 19px center;
}
/* CF7 emits rows="10", which is ~250px — the source's box is 88px. Set the
   height explicitly and keep the drag handle. */
.fl-scope .fl-form-card textarea{resize:vertical;min-height:88px;height:88px;}
.fl-scope .fl-form-card input:focus,
.fl-scope .fl-form-card select:focus,
.fl-scope .fl-form-card textarea:focus{border-color:#026796;}
.fl-scope .fl-form-card ::placeholder{color:#8B98A3;opacity:1;}

.fl-scope .fl-form-card .fl-submit-row{position:relative;display:block;margin-top:20px;}
.fl-scope .fl-form-card .fl-submit,
.fl-scope .fl-form-card input[type="submit"]{
  position:relative;
  overflow:hidden;
  width:100%;
  background:#026796;
  color:#FFFFFF;
  font-weight:600;
  font-size:16px;
  padding:15px;
  border:none;
  border-radius:0;
  cursor:pointer;
}
.fl-scope .fl-form-card .fl-submit:hover,
.fl-scope .fl-form-card input[type="submit"]:hover{background:#024D71;color:#FFFFFF;}
/* Keep CF7's spinner from adding a wrapping line under the full-width submit. */
.fl-scope .fl-form-card .wpcf7-spinner{position:absolute;right:14px;top:50%;transform:translateY(-50%);margin:0;}

/* The "Personal tax only" notice — shown by fl-interactions.js, matching the
   source's conditional block. */
.fl-scope .fl-form-card .fl-personal-note{
  display:none;
  gap:10px;
  background:#E7F0F6;
  border:1px solid #BBD6E8;
  padding:12px 14px;
  margin-bottom:16px;
  font-size:16px;
  color:#024D71;
  line-height:1.5;
}
.fl-scope .fl-form-card .fl-personal-note.is-on{display:flex;}

/* CF7 validation + response messaging, restyled to the design. */
.fl-scope .fl-form-card .wpcf7-not-valid-tip{color:#B3261E;font-size:14px;margin-top:5px;}
.fl-scope .fl-form-card .wpcf7-response-output{
  margin:18px 0 0;
  padding:12px 14px;
  border:1px solid #D3DDE4;
  font-size:15px;
  line-height:1.55;
  color:#0B2434;
}
.fl-scope .fl-form-card form.sent .wpcf7-response-output{border-color:#026796;background:#E7F0F6;color:#024D71;}
.fl-scope .fl-form-card form.invalid .wpcf7-response-output,
.fl-scope .fl-form-card form.failed .wpcf7-response-output{border-color:#E0B4B0;background:#FBEDEC;color:#B3261E;}
.fl-scope .fl-form-card .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;}

/* Editor-only placeholder shown when no CF7 form is wired up yet. */
.fl-scope .fl-form-notice{
  margin-top:18px;padding:12px 14px;border:1px dashed #BBD6E8;background:#E7F0F6;
  font-size:13px;line-height:1.5;color:#024D71;font-family:'Space Grotesk',sans-serif;
}