/*
Theme Name:   Avada Child
Description:  Avada Child Theme for Dignity Finance. Holds the utility-class shim and responsive fixes.
Author:       Dignity
Template:     Avada
Version:      1.0.0
Text Domain:  avada-child
*/

/* ==========================================================================
   FontAwesome re-declaration
   --------------------------------------------------------------------------
   Two problems made every icon on the site render as a blank box:

   1. XAMPP's mime.types has no woff/woff2 entries, so Apache served the fonts
      with no Content-Type and Chrome refused them ("A network error
      occurred"). Fixed in .htaccess with AddType.
   2. Browsers that loaded the site while it was broken cached that bad
      response. The ?v= below changes the cache key so they refetch instead of
      staying broken until the cache expires.

   The paths are RELATIVE on purpose. Avada compiles absolute URLs from the
   site address, which is exactly how the fonts broke when the site moved from
   port 80 to 8081. A relative path cannot break that way.

   This block must stay after Avada's own @font-face. It does: the child
   stylesheet is enqueued at priority 99999 (see functions.php).
   ========================================================================== */

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2?v=2") format("woff2"),
       url("../Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff?v=2") format("woff"),
       url("../Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.ttf?v=2") format("truetype");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-regular-400.woff2?v=2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-brands-400.woff2?v=2") format("woff2");
}

/* ==========================================================================
   UI cleanup
   --------------------------------------------------------------------------
   Four changes, all overrides of Avada theme-option values. Nothing here
   touches page copy. Each block says what it corrects and why, so any of them
   can be reverted independently.
   ========================================================================== */

/* --- 1. Stop forcing Title Case ----------------------------------------
   Avada's typography options set text-transform:capitalize on every heading
   level, and because text-transform inherits, body copy nested inside those
   containers picked it up too. The result read "Dignity Finance And
   Investment Limited (DFIL) Is A Foremost And Vibrant Finance Company".
   Title Case is slower to read than sentence case and looks unpolished on a
   regulated financial site. These are the only text-transform variables
   Avada sets to capitalize; everything else was already "none". */

/* :root:root, not :root — see functions.php. Avada's sheet loads after ours,
   so a plain :root would tie on specificity and lose on source order. */
:root:root {
  --h1_typography-text-transform: none;
  --h2_typography-text-transform: none;
  --h3_typography-text-transform: none;
  --h4_typography-text-transform: none;
  --h5_typography-text-transform: none;
  --h6_typography-text-transform: none;
  --post_title_typography-text-transform: none;
  --post_titles_extras_typography-text-transform: none;

  /* Avada's custom typography sets, used by image-frame captions among other
     things. Missing these left "Dr. Steve Olusegun Ogidan, mni" rendering as
     "...Ogidan, Mni" on /board/ — "mni" is a Nigerian post-nominal and must
     stay lowercase, which no amount of editing the text could fix while a
     capitalize transform was still applied on top of it. */
  --awb-typography1-text-transform: none;
  --awb-typography3-text-transform: none;
}

/* Image-frame captions need the property set directly, not via the variable.
   Avada writes --awb-caption-title-transform: capitalize as an INLINE style
   on the carousel element, which beats any :root declaration, so overriding
   the variable has no effect there. Hence !important on the property itself. */
.awb-imageframe-caption-container .awb-imageframe-caption-title,
.awb-imageframe-caption-title {
  text-transform: none !important;
}

/* Safety net for copy that inherited the transform from an ancestor. */
.post-content p,
.post-content li,
.fusion-text p,
.fusion-text li {
  text-transform: none;
}

/* --- 2. Brand accent colour --------------------------------------------
   Avada's global palette still carries the colours of the demo this site was
   built from: colour 5 is a pink (#f73760) that shows up on primary buttons,
   while the logo, cards and footer all use the brand red #d71920. Two
   different reds on one page reads as a mistake rather than a choice.
   Only the accent is remapped here. The neutrals (colours 1-4) are untouched,
   and the dark indigos (6-8) are nudged to the logo's charcoal rather than
   replaced, so surfaces keep their existing contrast relationships. */

:root:root {
  --awb-color5: #d71920;
  --awb-color5-h: 357;
  --awb-color5-s: 79%;
  --awb-color5-l: 47%;

  --awb-color6: #5b6472;
  --awb-color7: #3a4250;
  --awb-color8: #212934;
}

/* --- 3. Equal-height cards ---------------------------------------------
   Cards in a row sized to their own content, leaving ragged bottom edges:
   Mission painted 261px beside a 230px Vision card.

   Do NOT give .content-box-wrapper height:100%. A Fusion column can hold
   more than one content box — the Core Values grid is two columns of two —
   so height:100% makes EACH box claim the full column height. Two 588px
   boxes inside a 648px column overflowed and collided with the section
   below. That was a real regression; this is the corrected approach.

   Instead the column is a flex column and the boxes share its height, which
   equalises them against each other without any box exceeding its parent. */

.fusion-builder-row > .fusion-layout-column {
  align-self: stretch;
}

.fusion-layout-column > .fusion-column-wrapper {
  display: flex;
  flex-direction: column;
}

.fusion-column-wrapper > .fusion-content-boxes {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.fusion-content-boxes > .fusion-column,
.fusion-content-boxes > .content-box-column {
  flex: 1 1 auto;
  display: flex;
}

.fusion-content-boxes .col.content-box-wrapper {
  flex: 1 1 auto;
  width: 100%;
}

/* --- 3b. Credentials strip ----------------------------------------------
   The CBN / FHAN / NDPC bar was 276px tall: 100px of column padding around
   107px logos, which gave a supporting trust strip the visual weight of a
   full content section. Padding is reduced in the builder; the logo size is
   capped here because Avada sizes image frames by max_width rather than the
   height attribute, so the four badges came out at different heights.

   Scoped to .dfil-trust-bar, a class added to that container in the page
   content on purpose. Avada's own .fusion-builder-row-N classes are
   positional and silently point at a different section if one is inserted
   above, so they are not safe to style against. */

.dfil-trust-bar .fusion-imageframe img,
.dfil-trust-bar img {
  max-height: 64px;
  width: auto;
  object-fit: contain;
}

/* Each badge's caption is centred in its column, but the logo above it was
   not: Avada's image element is inline and left-aligned by default, so the
   label sat centred under a left-hugging logo. Centre the column's own
   contents so logo and caption share one axis, whatever the logo's width. */
.dfil-trust-bar .fusion-builder-column_inner > .fusion-column-wrapper,
.dfil-trust-bar .fusion_builder_column_inner > .fusion-column-wrapper {
  text-align: center;
}

.dfil-trust-bar .fusion-imageframe,
.dfil-trust-bar .imageframe-align-center,
.dfil-trust-bar .fusion-image-element {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* The four logos have very different aspect ratios: the CBN crest is nearly
   square at the 64px cap while the NDPC wordmark renders about 20px tall.
   Capping height alone left each one sitting at its own vertical position,
   so the captions below started on four different lines.

   Giving the image element a fixed 64px box and centring the logo inside it
   puts every logo on one shared band and every caption on one shared
   baseline, without scaling the small wordmarks up into blurriness. */
.dfil-trust-bar .fusion-image-element,
.dfil-trust-bar .fusion-imageframe {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

/* Kill the stray top margin Avada's first paragraph carries, so the gap
   between logo band and caption is the same in all four columns. */
.dfil-trust-bar .fusion-text p { margin-top: 0; }

/* The remaining misalignment was vertical, not horizontal. Avada gives each
   inner column `fusion-flex-justify-content-center`, which centres the whole
   logo+caption stack in a column as tall as the tallest one. Two captions
   wrap to two lines and two do not, so each stack had a different height and
   each got centred at a different offset: the logos stepped up and down
   across the row even though every one of them was horizontally centred.

   Top-aligning the stacks pins every logo to the same y, and the fixed logo
   band above puts every caption on the same line regardless of logo shape.
   Overriding the class Avada emits, rather than changing the builder
   setting, keeps this with the rest of the trust-bar rules. */
.dfil-trust-bar .fusion_builder_column_inner
  > .fusion-column-wrapper.fusion-flex-justify-content-center {
  justify-content: flex-start;
}

/* The captions were still off-centre against their logos, by 34px, 79px and
   24px in columns 1, 3 and 4. The cause is the pasted markup: each caption
   is wrapped in <div class="flex items-center space-x-4">, and this theme
   now gives .flex a real display:flex. That makes the <p> a flex item, so it
   shrinks to its text width and parks at the container's start. Its own
   text-align:center then centres text inside a box that is itself hard left.

   Column 2 looked fine only by accident: its caption wraps to two lines and
   fills the width, so shrink-to-fit and full width came out the same.

   Inside this strip the shim has no layout job at all, so it is flattened
   back to a block: the <p> then fills the width and its own text-align
   centres it under the logo. Centring the flex instead was not enough for
   the fourth badge, whose shim also holds a leftover empty <section>: as a
   second flex item that pulled the caption 24px left of its shield.

   Scoped to .dfil-trust-bar so the .flex utility keeps working elsewhere. */
.dfil-trust-bar .fusion-text .flex {
  display: block;
  width: 100%;
}

/* Two leftovers from the builder, both only on the fourth badge: a 10px top
   margin on its image element, which dropped the shield below the other
   three logos, and a missing 10px top margin on its caption, which pulled
   that caption up out of line with the rest. Normalise both so the gap
   between logo and label is identical across the strip. */
.dfil-trust-bar .fusion-image-element { margin-top: 0; }
.dfil-trust-bar .fusion-text { margin-top: 10px; }

@media (max-width: 849px) {
  .dfil-trust-bar .fusion-image-element,
  .dfil-trust-bar .fusion-imageframe { min-height: 52px; }
}

/* Breakpoint note: these blocks use 849px, not 800px.
   Avada's content_break_point option is 800px, but the theme does not
   actually switch its columns to a multi-up layout until 850px (its
   visibility_small value). Between 801px and 849px everything was still
   stacked one-per-row while these helper rules had already stopped, so an
   820px tablet got the worst of both: the credentials bar ballooned to
   634px and the footer to 1906px, both worse than at 768px AND at 1024px.
   849px hands over cleanly to Avada's own layout. */

@media (max-width: 849px) {
  .dfil-trust-bar img { max-height: 52px; }

  /* Stacked one-per-row, the four credentials filled 799px — most of two
     phone screens — before a visitor reached any content. Two-up keeps them
     readable at 52px while roughly halving the strip. */
  .dfil-trust-bar .fusion-builder-row-inner {
    display: flex;
    flex-wrap: wrap;
  }

  .dfil-trust-bar .fusion-builder-row-inner > .fusion_builder_column_inner {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
    margin-bottom: 10px;
  }

  /* The strip's 80px left and 60px right padding is fine on a desktop width
     but consumes 140px of a 326px phone column, leaving the badges 90px wide
     and wrapping their labels over four lines.

     Three class selectors, because Avada compiles the builder's padding to
     `.fusion-builder-column-N > .fusion-column-wrapper`, which ties a
     two-class rule and loads after this file. */
  .dfil-trust-bar .fusion-layout-column > .fusion-column-wrapper {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* --- Tawk.to greeting bubble on phones ---------------------------------
   Tawk auto-opens a "Hi! How can we help?" panel a few seconds after load.
   On a desktop it is a small 124x95 card in the corner; on a phone it
   expands to most of the width and sits over the footer, hiding the contact
   details and legal links underneath it.

   Tawk renders four separate wrappers. Only the greeting is suppressed:
     #min-widget      the launcher button      <- kept, chat still works
     #chat-bubble     the greeting panel       <- hidden below 800px
     #message-preview the message preview card <- hidden below 800px
     #branding-widget the tawk.to credit

   This is a front-end suppression, not a setting change. The proper fix is
   in the Tawk dashboard under Administration > Chat Widget, where the
   greeting can be turned off per device; that would also stop the request
   being made at all. Worth doing there if you have access. */

/* Tawk pins the greeting 124px wide against the right edge (right: 0,
   bottom: 30px) and the launcher 64px wide at right: 20px. The content
   column is Avada's 1320px, centred, so the greeting crosses into it below
   1568px and the launcher below 1488px: every common laptop width. There it
   sits on the lower-right card of a team grid, which since these cards
   became links also means it swallows clicks meant for that bio page.

   The greeting is the part worth suppressing. It opens by itself, it is the
   larger of the two, and nobody asked for it. The launcher stays at every
   width, so the chat is always reachable.

   1568px is where the greeting stops touching the column, not a device
   breakpoint, so it is written as the number it is. */
@media (max-width: 1567px) {
  #chat-bubble,
  #message-preview {
    display: none !important;
  }
}

/* --- Room for the cookie bar --------------------------------------------
   Avada's privacy bar is fixed to the bottom of the viewport at 92px tall
   and z-index 99999, and the page reserves nothing for it. The bottom 92px
   of every page is therefore unreachable until someone accepts: scroll to
   the end of /management/ and the last row of cards sits under the bar with
   no way to move it out from under.

   dfil_privacy_bar_room() measures the bar and publishes its height, so the
   page can give itself that much room and the chat launcher can step up
   over it rather than the two stacking in the same corner. The height is
   measured rather than hardcoded because the bar's text wraps to three
   lines on a phone, where it is nearer 160px.

   Both rules are inert until the script adds the class, which it only does
   while the bar is actually on screen. */

html.dfil-privacy-bar-open #wrapper {
  padding-bottom: var(--dfil-privacy-bar-h, 0px);
}

/* The launcher cannot be moved out of the way: Tawk writes
   `inset: auto 20px 20px auto !important` inline on its iframe, and an
   inline !important beats anything a stylesheet can say, transform
   included. It is also z-index 1000003 against the bar's 99999, so it
   paints over the bar whatever the order.

   So the bar moves instead. At 1366px the Accept All button ran from
   x1149 to x1307 and the launcher sits at x1282 to x1346: the right
   quarter of the button was underneath a chat widget. The centre still
   took the click, but a quarter of a consent control was not clickable.
   84px is the launcher's own footprint, 20px inset plus 64px wide; 100px
   leaves a visible gap beside it.

   Moving the launcher properly means Tawk_API.customStyle or the offset
   setting in the Tawk dashboard, which is also where the greeting above
   should really be turned off. */
@media (min-width: 850px) {
  .fusion-privacy-bar-main {
    padding-right: 100px;
  }
}

/* Stacked on a phone the bar is 170px tall and its button spans most of
   the width, so there is no room to give away sideways. Measured at 390px,
   the button ran to y756 against the launcher's top edge at y720, so the
   clearance comes out of the bottom instead. 56px lifts the button 20px
   clear; 88px, the launcher's full height, would take a third of an 800px
   viewport for no extra benefit. */
@media (max-width: 849px) {
  .fusion-privacy-bar-main {
    padding-bottom: 56px;
  }
}

/* Footer line-height. Avada renders the contact block at 30.6px leading on
   ~17px text (about 1.8), which pushed the address alone to 425px and set
   the height of the whole equal-height row. 1.6 is still comfortable. */
.fusion-tb-footer .fusion-title.title p,
.fusion-tb-footer .fusion-title.title div,
.fusion-tb-footer .fusion-text p {
  line-height: 1.6;
}

@media (max-width: 849px) {
  /* The footer stacks to a single column on a phone, so the desktop top
     padding reads as a large gap before the first heading. */
  .fusion-tb-footer .fusion-fullwidth {
    padding-top: 36px;
  }

  /* Quick Links and Services are short lists of five items. Stacked full
     width they cost 570px of the 1,745px footer for very little content,
     so they sit side by side. The logo blurb, Contact (two addresses) and
     the legal line stay full width because they need it.

     nth-child is a compromise: these columns have no distinguishing class.
     If a column is added or reordered in the footer template this will
     target the wrong ones, so it is worth re-checking after any footer
     edit in the builder. */
  .fusion-tb-footer .fusion-builder-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .fusion-tb-footer .fusion-builder-row > .fusion-layout-column:nth-child(3),
  .fusion-tb-footer .fusion-builder-row > .fusion-layout-column:nth-child(4) {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
  }

  /* The Services column carries a 20px top margin from the builder that
     Quick Links does not, so once they sat side by side their headings were
     misaligned by exactly that amount. */
  .fusion-tb-footer .fusion-builder-row > .fusion-layout-column {
    align-self: flex-start;
  }

  .fusion-tb-footer .fusion-builder-row > .fusion-layout-column:nth-child(3),
  .fusion-tb-footer .fusion-builder-row > .fusion-layout-column:nth-child(4) {
    margin-top: 0;
  }
}

/* --- 3c. Footer density -------------------------------------------------
   The footer was 1,304px tall, taller than a laptop viewport.

   The cause is that every footer link was built as its own Title element
   rather than as a menu, so each one carries heading margins: a 31px link
   occupying 56px. Five links per column is 280px of mostly air, which is why
   the four columns measured 606px each. The legal line at the bottom was
   worse, two one-line titles with 40px margins top and bottom making a 347px
   block.

   Rebuilding those as real menus would be the proper fix and belongs in the
   page editor. Tightening the inherited heading margins gets most of the
   benefit without touching the content. */

/* .fusion-title.title, not .fusion-title: Avada's own rule is
   `.fusion-body .fusion-title` which ties on specificity and loads after
   this file, so the plain version silently lost. The value it applies comes
   from an --awb-margin-top set inline per element, so overriding the
   variable does not help either; the property has to be set directly. */
.fusion-tb-footer .fusion-title.title {
  margin-top: 3px;
  margin-bottom: 8px;
}

/* Column headings ("Quick Links", "Services", "Contact Us") still need to
   separate from the list beneath them. */
.fusion-tb-footer .fusion-column-wrapper > .fusion-title.title:first-child {
  margin-bottom: 18px;
}

/* The social icons carried a 60px bottom margin, padding out the tallest
   column and therefore the whole row, since the columns are equal height. */
.fusion-tb-footer .fusion-social-links {
  margin-bottom: 16px;
}

/* The copyright strip is yet more pasted Tailwind markup. Its spacing scale
   was written for a full-width site footer, and once the shim made those
   classes real they stacked py-12 + mt-12 + pt-8 around a single line of
   text: 242px for one sentence. Inside a Fusion column that already has its
   own padding, that scale is far too generous. */
.fusion-tb-footer .fusion-text .py-12 { padding-block: 14px; }
.fusion-tb-footer .fusion-text .mt-12 { margin-top: 18px; }
.fusion-tb-footer .fusion-text .pt-8  { padding-top: 14px; }
.fusion-tb-footer .fusion-text .mb-12 { margin-bottom: 18px; }
.fusion-tb-footer .fusion-text p      { margin-block: 4px; }

/* --- 4. Section rhythm --------------------------------------------------
   Several sections carry 120px of padding top AND bottom, on top of 80-120px
   gaps between the sections themselves, so short content floated in a lot of
   empty space. Scaled back to a consistent rhythm that still breathes, and
   reduced further on phones where 120px of padding costs most of a screen. */

.fusion-fullwidth {
  --dfil-section-pad: 72px;
}

.fusion-fullwidth[style*="padding-top: 120px"],
.fusion-fullwidth[style*="padding-top:120px"] {
  padding-top: var(--dfil-section-pad) !important;
  padding-bottom: var(--dfil-section-pad) !important;
}

@media (max-width: 849px) {
  .fusion-fullwidth {
    --dfil-section-pad: 40px;
  }
}

/* ==========================================================================
   Utility-class shim
   --------------------------------------------------------------------------
   A lot of page content was pasted in as Tailwind/shadcn markup, but Tailwind
   was never loaded, so ~1,071 class usages across 30 pages rendered completely
   unstyled. Rather than pull in the whole framework for 86 classes, this
   implements just the ones actually in use.

   Everything is scoped to .fusion-text because that is the Fusion Builder
   element the pasted HTML lives inside. Scoping keeps these very generic names
   (.container, .flex, .border) from colliding with Avada's own CSS elsewhere
   on the page.

   The original markup had only THREE responsive-prefixed classes, so it would
   not have adapted to mobile even with real Tailwind. The grid and type rules
   below are therefore written mobile-first: single column by default, multi
   column only once there is room for it.
   ========================================================================== */

.fusion-text {
  /* Brand tokens, sampled from the compiled Avada stylesheet so the shim
     matches the rest of the site rather than Tailwind's defaults.
     Primary is the brand red, matching the logo, footer and the --awb-color5
     remap above. The theme also contains a stray green (#65bc7b) left over
     from the demo; it is deliberately not used here. */
  --dfil-primary:    #d71920;
  --dfil-secondary:  #212934;
  --dfil-accent:     #d71920;
  --dfil-card:       #ffffff;
  --dfil-background: #f9fafb;
  --dfil-foreground: #212934;

  --dfil-gray-50:  #f9fafb;
  --dfil-gray-200: #e5e7eb;
  --dfil-gray-300: #d1d5db;
  --dfil-gray-600: #4b5563;
  --dfil-gray-700: #374151;
  --dfil-red-100:  #fee2e2;
}

/* --- Layout containers -------------------------------------------------- */

.fusion-text .container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}
@media (min-width: 640px)  { .fusion-text .container { max-width: 640px; } }
@media (min-width: 768px)  { .fusion-text .container { max-width: 768px; } }
@media (min-width: 1024px) { .fusion-text .container { max-width: 1024px; } }
@media (min-width: 1280px) { .fusion-text .container { max-width: 1280px; } }

.fusion-text .mx-auto  { margin-inline: auto; }
.fusion-text .relative { position: relative; }
.fusion-text .h-full   { height: 100%; }
.fusion-text .w-full   { width: 100%; }
.fusion-text .w-16     { width: 4rem; }
.fusion-text .h-16     { height: 4rem; }

.fusion-text .max-w-2xl { max-width: 42rem; }
.fusion-text .max-w-4xl { max-width: 56rem; }

/* --- Flex --------------------------------------------------------------- */

.fusion-text .flex           { display: flex; }
.fusion-text .flex-col       { flex-direction: column; }
.fusion-text .items-center   { align-items: center; }
.fusion-text .items-start    { align-items: flex-start; }
.fusion-text .justify-center { justify-content: center; }

/* Horizontal flex rows wrap on small screens instead of squashing their
   children or forcing a sideways scroll. */
@media (max-width: 767px) {
  .fusion-text .flex:not(.flex-col) { flex-wrap: wrap; }
}

/* --- Grid --------------------------------------------------------------- */
/* Mobile-first: always one column, widen only when there is room. */

.fusion-text .grid { display: grid; }

.fusion-text .grid-cols-1,
.fusion-text .grid-cols-2,
.fusion-text .md\:grid-cols-1,
.fusion-text .md\:grid-cols-2,
.fusion-text .lg\:grid-cols-2 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .fusion-text .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fusion-text .grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fusion-text .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fusion-text .gap-6  { gap: 1.5rem; }
.fusion-text .gap-12 { gap: 2rem; }
@media (min-width: 1024px) { .fusion-text .gap-12 { gap: 3rem; } }

/* --- Spacing ------------------------------------------------------------ */

.fusion-text .p-4  { padding: 1rem; }
.fusion-text .p-6  { padding: 1.25rem; }
@media (min-width: 768px) { .fusion-text .p-6 { padding: 1.5rem; } }

.fusion-text .px-4 { padding-inline: 1rem; }
.fusion-text .pt-0 { padding-top: 0; }
.fusion-text .pt-8 { padding-top: 2rem; }
.fusion-text .pb-4 { padding-bottom: 1rem; }

/* Section padding is tightened on phones so pages don't become endless scroll. */
.fusion-text .py-12 { padding-block: 2rem; }
.fusion-text .py-16 { padding-block: 2.5rem; }
.fusion-text .py-20 { padding-block: 3rem; }
@media (min-width: 768px) {
  .fusion-text .py-12 { padding-block: 3rem; }
  .fusion-text .py-16 { padding-block: 4rem; }
  .fusion-text .py-20 { padding-block: 5rem; }
}

.fusion-text .mt-12 { margin-top: 3rem; }
.fusion-text .mb-2  { margin-bottom: 0.5rem; }
.fusion-text .mb-4  { margin-bottom: 1rem; }
.fusion-text .mb-6  { margin-bottom: 1.5rem; }
.fusion-text .mb-8  { margin-bottom: 2rem; }
.fusion-text .mb-12 { margin-bottom: 2rem; }
@media (min-width: 768px) { .fusion-text .mb-12 { margin-bottom: 3rem; } }

/* Tailwind's space-* applies the gap to every child but the first. */
.fusion-text .space-y-1 > * + * { margin-top: 0.25rem; }
.fusion-text .space-y-3 > * + * { margin-top: 0.75rem; }
.fusion-text .space-y-4 > * + * { margin-top: 1rem; }
.fusion-text .space-y-6 > * + * { margin-top: 1.5rem; }
.fusion-text .space-x-3 > * + * { margin-left: 0.75rem; }
.fusion-text .space-x-4 > * + * { margin-left: 1rem; }

/* When a horizontal row wraps on mobile, left margins would misalign the
   wrapped items, so convert the spacing to a gap instead. */
@media (max-width: 767px) {
  .fusion-text .flex.space-x-3,
  .fusion-text .flex.space-x-4 { gap: 0.75rem; }
  .fusion-text .flex.space-x-3 > * + *,
  .fusion-text .flex.space-x-4 > * + * { margin-left: 0; }
}

/* --- Typography --------------------------------------------------------- */
/* Large display sizes use clamp() so headings shrink on phones rather than
   overflowing their container. */

.fusion-text .text-sm   { font-size: 0.875rem; }
.fusion-text .text-lg   { font-size: 1.125rem; }
.fusion-text .text-xl   { font-size: 1.25rem; }
.fusion-text .text-2xl  { font-size: clamp(1.25rem, 1.05rem + 1vw,   1.5rem); }
.fusion-text .text-3xl  { font-size: clamp(1.5rem,  1.25rem + 1.2vw, 1.875rem); }
.fusion-text .text-4xl  { font-size: clamp(1.75rem, 1.35rem + 2vw,   2.25rem); }
.fusion-text .text-5xl  { font-size: clamp(2rem,    1.4rem + 3vw,    3rem); }

.fusion-text .font-semibold   { font-weight: 600; }
.fusion-text .font-bold       { font-weight: 700; }
.fusion-text .leading-none    { line-height: 1; }
.fusion-text .leading-relaxed { line-height: 1.625; }
.fusion-text .text-center     { text-align: center; }

.fusion-text .text-gray-200 { color: var(--dfil-gray-200); }
.fusion-text .text-gray-300 { color: var(--dfil-gray-300); }
.fusion-text .text-gray-600 { color: var(--dfil-gray-600); }
.fusion-text .text-gray-700 { color: var(--dfil-gray-700); }
.fusion-text .text-red-100  { color: var(--dfil-red-100); }
.fusion-text .text-white    { color: #fff; }

.fusion-text .text-primary    { color: var(--dfil-primary); }
.fusion-text .text-secondary  { color: var(--dfil-secondary); }
.fusion-text .text-foreground { color: var(--dfil-foreground); }

/* --- Backgrounds and borders -------------------------------------------- */

.fusion-text .bg-white      { background-color: #fff; }
.fusion-text .bg-gray-50    { background-color: var(--dfil-gray-50); }
.fusion-text .bg-card       { background-color: var(--dfil-card); }
.fusion-text .bg-background { background-color: var(--dfil-background); }
.fusion-text .bg-primary    { background-color: var(--dfil-primary); }
.fusion-text .bg-secondary  { background-color: var(--dfil-secondary); }

.fusion-text .bg-cover  { background-size: cover; }
.fusion-text .bg-center { background-position: center; }

.fusion-text .border          { border: 1px solid var(--dfil-gray-200); }
.fusion-text .border-t        { border-top: 1px solid var(--dfil-gray-200); }
.fusion-text .border-gray-600 { border-color: var(--dfil-gray-600); }

.fusion-text .rounded-lg   { border-radius: 0.5rem; }
.fusion-text .rounded-full { border-radius: 9999px; }

.fusion-text .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.fusion-text .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.fusion-text .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }

/* --- Interaction -------------------------------------------------------- */

.fusion-text .transition-shadow { transition: box-shadow .25s ease; }
.fusion-text .transition-colors { transition: color .25s ease, background-color .25s ease; }

.fusion-text .hover\:shadow-xl:hover    { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.fusion-text .hover\:underline:hover    { text-decoration: underline; }
.fusion-text .hover\:text-primary:hover { color: var(--dfil-primary); }
.fusion-text .hover\:text-white:hover   { color: #fff; }

/* --- Animation ---------------------------------------------------------- */
/* Honour the OS "reduce motion" setting: entrance animations that move content
   can trigger nausea for people with vestibular disorders. */

@media (prefers-reduced-motion: no-preference) {
  .fusion-text .animate-fade-in  { animation: dfil-fade-in .6s ease both; }
  .fusion-text .animate-slide-in { animation: dfil-slide-in .6s ease both; }
}
@keyframes dfil-fade-in  { from { opacity: 0; }                         to { opacity: 1; transform: none; } }
@keyframes dfil-slide-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive safety net
   ========================================================================== */

/* Media and tables inside pasted markup must never force a sideways scroll. */
.fusion-text img,
.fusion-text video,
.fusion-text iframe { max-width: 100%; height: auto; }

.fusion-text table { display: block; width: 100%; overflow-x: auto; }

/* Long URLs and unbroken strings are a common source of mobile overflow. */
.fusion-text { overflow-wrap: break-word; }

/* Empty leftover wrappers must not paint.
   The pasted markup contains a few content-free <section class="py-16
   bg-gray-50"> shells. While Tailwind was missing these were invisible, but
   giving the classes real styles above turned one of them into a visible grey
   rectangle beside the "Your Financial Security" badge. Collapse any shim
   container that holds no actual content, rather than deleting the markup —
   the page copy is not ours to edit.

   This deliberately does NOT use :not(:has(...)). Chrome parses that
   selector in CSS.supports() and in element.matches(), but silently drops
   the whole rule from a stylesheet — verified here: 117 rules parsed from
   this file, none containing :has. A rule that never loads is worse than no
   rule, because it looks correct in the source. The class below is applied
   by a small script in functions.php instead, which is boring and works. */
.fusion-text .dfil-empty-shim {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hero slide focal point.
   The slider is a fixed 700px tall while its width is fluid, and the photos
   are 2070x1188. On a 2036px-wide screen that shows only the middle 60% of
   each image; the rest is cropped away. Nothing is stretched — background
   -size is cover — but centring the crop cut the tops of people's heads on
   the meeting slide and the leaves off the plant on the next one.

   38% biases the visible band upward. Checked against all three slides: it
   keeps the faces and the plant intact while retaining most of the coin
   stacks on the third, which is the one slide that actually suited 50%.

   This is a compromise because one value serves three differently composed
   photos. The durable fix is to re-crop the sources to roughly 2.9:1 so
   nothing is discarded; failing that, Avada's slider has a per-slide
   background-position setting that can override this individually. */
.fusion-slider-container .background.background-image,
.tfs-slider .background-image {
  background-position: 50% 38%;
}

/* The hero sliders are CSS background images, so WordPress cannot serve a
   smaller file via srcset. Shorten the slide on phones so a 2070px-wide image
   is not stretched across a tiny viewport. */
@media (max-width: 767px) {
  .fusion-slider-container,
  .tfs-slider { max-height: 60vh !important; }
}

/* Full-bleed hero on phones.
   The hero sits in a section with 30px side padding, and its column wrapper
   adds another 6px each side, so on a 390px screen the slider was only
   317px wide. That cost 19% of the width and pushed the strapline onto six
   lines over a sliver of photo.

   Breaking out with calc(50% - 50vw) rather than zeroing the parent padding
   on purpose: that padding is on the generic .fusion-fullwidth and every
   other section relies on it to keep text off the screen edge. This widens
   only the slider. */
@media (max-width: 849px) {
  /* Two classes, because Avada's own .fusion-slider-container sets
     max-width:100% and loads after this file, so a single-class rule ties
     and loses. */
  .fusion-column-wrapper .fusion-slider-container,
  .post-content .fusion-slider-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Avada's slider script also writes an explicit pixel width onto the
     inner slide wrappers on resize, so they need the same treatment or the
     photo stays at the old narrow size inside a full-width container. */
  .fusion-column-wrapper .fusion-slider-container .fusion-slider-loading,
  .fusion-column-wrapper .fusion-slider-container .tfs-slider,
  .fusion-column-wrapper .fusion-slider-container .slides,
  .fusion-column-wrapper .fusion-slider-container .slides > li {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Avada's full-width sections break out to full bleed with -30px side margins,
   but the builder row nested inside adds its own negative gutter margins on
   top with no padding to absorb them. The row then measures wider than the
   viewport (406px inside 390px on /about/), pushing its descendants off-screen.
   Columns are already stacked at this width, so the gutter buys nothing here.

   The 800px bound is deliberate and must track Avada's `content_break_point`
   theme option, NOT the 768px Tailwind breakpoint used by the shim above.
   Capping this at 767px leaves the 768-800px band broken, which is exactly
   where /about/ and /governance/ overflowed on tablets. */
@media (max-width: 849px) {
  .fusion-fullwidth .fusion-builder-row.fusion-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* !important is needed here specifically: Avada's compiled stylesheet sets
     these gutters from a higher-specificity selector, and the child sheet
     cannot outrank it without matching every class in the chain. */
  .fusion-content-boxes.content-boxes.columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Buttons nudged sideways with a negative margin in the page editor (for
     example the "Watch More Videos" CTA on /help-center/, saved with an
     inline margin-left:-40px) hang off the screen edge once the column is
     only a phone wide. The offset may be deliberate on desktop, so this is
     scoped to small screens and leaves wider layouts untouched.
     !important is required because the offset is an inline style. */
  .fusion-button {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* The content-box columns carried 15px of padding purely to sit inside the
     negative gutter above. With the gutter gone that padding would double up
     against the section's own, so drop it at this width. */
  .fusion-content-boxes > .content-box-column {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   Accessibility pass (WCAG 2.1 AA)
   ========================================================================== */

/* --- Low-contrast text utilities ---------------------------------------
   These are the shim's own classes, so this is a defect I introduced.
   Measured against white:

     .text-gray-300  #d1d5db  1.47:1   far below the 4.5:1 minimum
     .text-gray-200  #e5e7eb  1.24:1
     .text-red-100   #fee2e2  1.22:1

   All three are confirmed in use as body copy on light backgrounds across
   several pages, where they are effectively invisible. They cannot simply
   be darkened: on the dark footer (#212934) the light values are correct
   and score ~10:1, which is why they were chosen.

   So the default is a mid grey that passes on white, and the original light
   values are restored only inside the dark footer. #6b7280 gives 4.83:1 on
   white and 4.76:1 on #f9fafb — both clear AA for normal text. */

.fusion-text .text-gray-300,
.fusion-text .text-gray-200 {
  color: #6b7280;
}

/* .text-red-100 is only ever used on the red CTA band (#dd0000), never on
   white, so the audit's "fails on white" reading did not apply. Pointing it
   at the brand red was my own error and made it red-on-red at 1.01:1.

   The original #fee2e2 measured 4.22:1 on that band, just under the 4.5
   needed for 20px normal-weight text. #fef2f2 is the same tint a shade
   lighter and clears it at 4.71:1. */
.fusion-text .text-red-100 {
  color: #fef2f2;
}

.fusion-tb-footer .fusion-text .text-gray-300,
.dfil-on-dark .text-gray-300 {
  color: #d1d5db;
}

.fusion-tb-footer .fusion-text .text-gray-200,
.dfil-on-dark .text-gray-200 {
  color: #e5e7eb;
}

/* --- Keyboard focus -----------------------------------------------------
   Avada has no :focus-visible rules anywhere and relies on inconsistent
   per-component :focus styles. One of them, .flexslider a:focus, sets
   outline:0 with no replacement at all, making those links invisible to
   keyboard users.

   :focus-visible rather than :focus so the ring appears for keyboard and
   assistive-tech users without outlining every mouse click. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.fusion-button:focus-visible,
.flexslider a:focus-visible,
.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible {
  outline: 3px solid var(--dfil-accent, #d71920);
  outline-offset: 2px;
  border-radius: 2px;
}

/* On the dark footer a red ring on near-black is hard to see, so the ring
   switches to white there. White on #212934 is 14.7:1. */
.fusion-tb-footer a:focus-visible,
.fusion-tb-footer button:focus-visible,
.fusion-tb-footer input:focus-visible {
  outline-color: #ffffff;
}

/* Visually hidden, still announced by screen readers and read by crawlers.
   Used by dfil_ensure_page_h1(). Deliberately not display:none, which would
   remove it from the accessibility tree and defeat the point. */
.dfil-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Wrapper added by dfil_team_card_links(). Must not change the card layout,
   only make the whole thing clickable. */
.dfil-team-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* ==========================================================================
   Inner-page hero banners
   ========================================================================== */

/* The bio pages and several others open with a Fusion Builder container whose
   column is empty and carries only a background image. With no content and no
   min_height set in the editor, Fusion emits an invisible placeholder <img>
   holding the attachment's natural aspect ratio, and the column height simply
   follows the viewport width at that ratio. dfil-1-1.jpg is 1080x409, so on a
   1920px screen the hero measured ~730px and pushed the Biography heading off
   the first screen entirely.

   Height is therefore taken off the placeholder and stated directly. The
   column already has --awb-bg-size:cover inline, so the photo crops instead
   of stretching.

   Scoped away from body.home: the front page uses the Fusion Slider plus its
   own empty-column hero, both deliberately full-height, and the 38% focal
   point rule above belongs to it. */
body:not(.home) .fusion-column-wrapper.fusion-empty-column-bg-image {
  height: 280px;
  /* 50% would centre on blank wall. Biasing down keeps the red DIGNITY
     lettering, which sits in the lower half of the photo, inside the crop. */
  background-position: 50% 78%;
}

body:not(.home) .fusion-column-wrapper.fusion-empty-column-bg-image
  .fusion-empty-dims-img-placeholder {
  display: none;
}

/* The second hero pattern (/management/, /board/, /governance/, the product
   pages) puts the background on the container itself and holds a real title,
   so its height is content-driven and landed at a different size. Matching it
   to 280px with min-height rather than height, because clipping the title
   would be worse than a slightly taller banner on a page with a long one.

   [data-bg] is the guard that keeps this off pages like /about/ and /contact-us/,
   whose first container is ordinary content with no hero image. */
body:not(.home) .post-content > .fusion-fullwidth[data-bg]:first-of-type {
  /* The 90px of top and bottom padding saved in the editor is what made this
     group 470px against the bio pages' 280px. Zeroing it lets the title block
     (290px with its own spacing) set the height, which lands on 280. The
     padding is only there to pad a banner that is now sized explicitly, so
     removing it costs nothing.

     !important and the real properties, not the --awb-padding-* custom
     properties: Avada writes those inline on the container, and an inline
     custom property beats any stylesheet declaration of it regardless of
     load order, so setting the variable here silently does nothing. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 280px;
  display: flex;
  align-items: center;
}

/* The column inside carries a 20px bottom margin from the editor, which with
   the padding gone would sit the title visibly above centre. */
body:not(.home)
  .post-content
  > .fusion-fullwidth[data-bg]:first-of-type
  .fusion-layout-column {
  margin-bottom: 0 !important;
}

/* Phones get a shorter banner so it stays a strip rather than a third of the
   screen. 849px tracks Avada's content_break_point, as the rules above do. */
@media (max-width: 849px) {
  body:not(.home) .fusion-column-wrapper.fusion-empty-column-bg-image {
    height: 180px;
  }
  body:not(.home) .post-content > .fusion-fullwidth[data-bg]:first-of-type {
    min-height: 180px;
  }
}

/* Hero title legibility.
   The titles in these banners are white and sit directly on the photo. Over
   the pale granite wall in bg-dignity_optimized-scaled.jpg they were close to
   invisible, and the standfirst was worse: it carries .text-gray-200, which
   the accessibility pass above remaps to #6b7280 for light backgrounds, so it
   rendered mid-grey on a mid-grey photo.

   A scrim fixes both at once and keeps the photo readable as a photo. 0.5 is
   the lowest value that held up over the lightest part of the wall; lower
   values passed on the darker left half only.

   ::before is free here: these containers use neither pseudo-element, and
   they are already position:relative. */
body:not(.home) .post-content > .fusion-fullwidth[data-bg]:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
  pointer-events: none;
}

/* The scrim is absolutely positioned over the container, so the row needs a
   stacking context of its own or the text sits underneath it. */
body:not(.home)
  .post-content
  > .fusion-fullwidth[data-bg]:first-of-type
  > .fusion-builder-row {
  position: relative;
  z-index: 1;
}

/* With a guaranteed dark backdrop the light greys are correct again, exactly
   as they are in the footer. Scoped to the hero so the remap still applies to
   the same classes everywhere else. */
body:not(.home) .post-content > .fusion-fullwidth[data-bg]:first-of-type .text-gray-200,
body:not(.home) .post-content > .fusion-fullwidth[data-bg]:first-of-type .text-gray-300 {
  color: #fff;
}

/* Spacing inside the banner, so the 280px holds without the title drifting.
   Two sources of slack, both saved in the editor rather than designed:

   - the fusion_title carries margin_top:50px, which was there to offset the
     old 90px container padding and is now pure overhang;
   - on /financials/ the pasted Tailwind shim wraps the standfirst in a
     <section> with py-20. That 160px is what kept that page at 461px while
     every sibling sat at 280px, and shortening its copy alone only got it
     to 396px.

   With both gone the content measures under 280px everywhere and min-height
   does the work, which is what makes the group land on one number. */
body:not(.home) .post-content > .fusion-fullwidth[data-bg]:first-of-type .fusion-title {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

body:not(.home) .post-content > .fusion-fullwidth[data-bg]:first-of-type section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* The off-canvas trigger sits at the far right of the header on every width,
   so above the breakpoint the page offers two menus at once: the full
   horizontal nav and a hamburger opening the same links.

   1281px is Avada's own large-screen bound, the same one the theme uses to
   show the horizontal nav in the first place (the generated page CSS splits
   at 850 / 851-1280 / 1281+). Below it the nav is hidden and this trigger is
   the only way to reach the menu, so it must stay.

   .fb-icon-element is specific enough because this header contains exactly
   one icon element. If another is ever added in the builder, this needs the
   numbered class instead. */
@media screen and (min-width: 1281px) {
  .fusion-tb-header .fb-icon-element {
    display: none;
  }
}

/* The logo is 131px tall and sets the header height, but the nav (68px) and
   the Let's Talk button (60px) were top-aligned inside it, so both sat hard
   against the top edge with all the slack below them.

   The columns are flex already; they were just saved with the wrong
   alignment. Two rules because the builder gives the logo and nav columns a
   column direction and the button column a row direction, so the cross axis
   differs. */
.fusion-tb-header .fusion-column-wrapper.fusion-content-layout-column {
  justify-content: center;
}

.fusion-tb-header .fusion-column-wrapper.fusion-content-layout-row {
  align-items: center;
}

/* Logo size and header height.
   The logo is a portrait 100x131 PNG and was rendered at full natural size
   with no padding, so it set the header height on its own and sat flush
   against both edges, reading as a pasted-on box rather than a mark in a bar.

   62px tall (47px wide, ratio preserved) leaves the nav as the tallest item
   at 68px, so 11px of padding plus the nav gives exactly the 90px bar.

   min-height has to be restated: the header container carries an inline
   --awb-min-height:100px from the builder, which would otherwise hold the
   bar at 100px no matter how small its contents get. */
.fusion-tb-header img {
  height: 62px;
  width: auto;
}

.fusion-tb-header > .fusion-fullwidth {
  min-height: 90px;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* ==========================================================================
   Content boxes
   ========================================================================== */

/* Each of these boxes is the only thing in its column, but the markup still
   carries the stacked bottom spacing Avada uses when several sit in a list:
   60px on .fusion-content-boxes, 40px on .content-box-column and 20px under
   .content-container, on top of the box's own 35px bottom padding. Inside a
   one-box column none of it separates anything, it just leaves a block of
   empty background below the text. On /corporate-sme-loans/ that was 155px
   per card and 200px under the "Why Choose" row.

   Scoped to .fusion-columns-total-1, a container holding a single box. Where
   a container holds several (the values grid on the home page is two per
   container) the 40px is the only thing separating the stacked rows, and
   zeroing it made those boxes touch.

   Kept below 850px too, where Avada stacks every column and that same 40px
   is what holds the boxes apart. 850 is the content_break_point this file
   uses elsewhere.

   !important throughout: Avada sets these from inline --awb-margin-bottom /
   --awb-item-margin-bottom custom properties read by its own stylesheet,
   which loads after this file, so a plain declaration ties on specificity
   and loses. Same reason the content-box gutter rule above needs it. */
@media screen and (min-width: 850px) {
  .fusion-content-boxes.fusion-columns-total-1 {
    margin-bottom: 0 !important;
  }

  .fusion-content-boxes.fusion-columns-total-1 .fusion-column {
    margin-bottom: 0 !important;
  }
}

/* The box's 35px of bottom padding already separates the copy from the edge,
   so this margin only ever doubled it. Safe at every width. */
.fusion-content-boxes .content-container {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Homepage: parity with the design reference
   ==========================================================================
   Target is https://dignity-wealth-hub.lovable.app/. The section order here
   already matched it, so everything below is spacing, alignment and card
   styling rather than new structure.

   Scoped to body.home throughout. The sections are addressed by Avada's
   fusion-builder-row-N classes, which are positional: adding or removing a
   container in the builder renumbers them and these rules will land on the
   wrong section. The mapping as built is
     row-2 hero | row-3 trust bar | row-4 About | row-5 Vision & Mission
     row-6 Core Values | row-7 Services | row-8 CTA
   ========================================================================== */

/* Section rhythm: the reference runs a flat 64px top and bottom on every
   section and alternates white against #f9fafb. Here About and Vision ran
   72px while Values, Services and the CTA ran none and leaned on their
   contents for spacing. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-4,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-5,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-6,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-7,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-8 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-3 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* #f4f5fa on Vision & Mission was the odd one out; the reference alternates
   strictly white / #f9fafb down the page. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-4,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 {
  background-color: #f9fafb !important;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-5,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-7 {
  background-color: #ffffff !important;
}

/* --- Hero ---------------------------------------------------------------
   Height, centring, the removal of the per-line grey slabs and the CTA
   buttons are all set in the slider's own settings (term 31 for the height,
   each slide's _fusion meta for the rest), not here. Forcing the height from
   CSS breaks the slider: Avada's script writes an inline height onto the
   container, .tfs-slider and each <li>, and an !important rule fights it
   into a collapsed layout with the caption stacked above the photo.

   What CSS is still needed is the scrim. The slabs were the only thing
   giving the white caption contrast; with them off the text sits straight on
   the photo and the lighter frames wash it out. One even overlay across the
   slide matches the reference and reads better than three taped boxes.

   The scrim goes on .background-image, not on the <li>. Inside each slide
   the photo div is position:relative, z-index:2 and comes after the caption
   in the DOM, so it paints over anything the <li> draws behind it, and over
   the caption too while they share a z-index. An ::after on the <li> is
   simply invisible; this cost an iteration to find. */
body.home .fusion-slider-container .background-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Lifted above the photo layer for the same reason. */
body.home .fusion-slider-container .slide-content-container,
body.home .fusion-slider-container .flex-direction-nav,
body.home .fusion-slider-container .fusion-slider-indicator {
  z-index: 3;
}

/* --- Trust bar ----------------------------------------------------------
   Built as a white card floating on the page with a shadow, 10px corners and
   red 2px rules between the four items. The reference runs the same four
   items as a flat strip on the page background with no card and no rules. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-3 .fusion-column-wrapper {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-3 .fusion-column-wrapper {
  border-left-width: 0 !important;
}

/* --- Cards --------------------------------------------------------------
   Reference card: white, 8px radius, 24px padding, no border, a soft
   two-stop shadow. Ours were square, unshadowed and padded 35px. Scoped to
   the homepage so the inner-page content boxes keep the spacing settled
   earlier in this file. */
body.home .post-content .content-box-wrapper {
  border-radius: 8px;
  padding: 24px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* --- Core Values --------------------------------------------------------
   882px against the reference's 464px, because the four cards render 2x2.
   The builder put two half-width columns side by side, each holding a
   content-box container with two boxes stacked inside it. Laying each
   container out as a flex row puts its two boxes beside each other, which
   gives four across overall without touching the page content.

   The width override is needed because Avada gives each box a col-lg-12
   class; flex alone would not beat it. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 .fusion-content-boxes.fusion-columns-total-2 {
  display: flex;
  /* fusion-columns-1 sets flex-direction:column, which is why display:flex
     alone left the boxes stacked at full width. */
  flex-direction: row !important;
  gap: 24px;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 .fusion-content-boxes.fusion-columns-total-2 .content-box-column {
  /* An explicit basis rather than flex:1, which left the pair 48px short of
     filling its half: Avada's trailing .fusion-clearfix is a flex item too,
     so it claimed a share of the free space and another 24px of gap. */
  flex: 0 0 calc(50% - 12px);
  width: auto !important;
  margin-bottom: 0 !important;
}

/* The clearfix exists to close floats that flex has made irrelevant here,
   and as a flex item it only adds a phantom column. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 .fusion-content-boxes.fusion-columns-total-2 > .fusion-clearfix {
  display: none;
}

/* Back to stacked below the content break point, where four across would be
   four slivers. */
@media screen and (max-width: 849px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 .fusion-content-boxes.fusion-columns-total-2 {
    display: block;
  }
}

/* --- Services -----------------------------------------------------------
   The reference gives each service card an outlined red button; Avada
   renders the same link as plain red text. Styling the existing anchor
   rather than swapping it for a button element in the page content. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-7 .fusion-read-more {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 20px;
  border: 1px solid #dd0000;
  border-radius: 6px;
  color: #dd0000;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-7 .fusion-read-more:hover {
  background-color: #dd0000;
  color: #ffffff;
}

/* Avada appends a chevron to read-more links with a pseudo-element that
   would sit outside the new border box. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-7 .fusion-read-more::after {
  display: none;
}

/* --- Homepage vertical slack -------------------------------------------
   With the section padding now fixed at 64px, the per-element bottom
   margins the builder saved on top of it are pure overshoot: every section
   carried 100-190px of empty background below its last line. The offenders
   are the layout column's 20px, and on the content-box sections the 60px /
   40px pair that the rule further up this file only neutralises for
   single-box containers.

   Zeroed only on the homepage and only above the stacking break point.
   Below 850px these same margins are what separates stacked columns. */
@media screen and (min-width: 850px) {
  body.home .post-content .fusion-layout-column {
    margin-bottom: 0 !important;
  }

  body.home .post-content .fusion-content-boxes,
  body.home .post-content .fusion-content-boxes .fusion-column {
    margin-bottom: 0 !important;
  }

  /* Avada's builder rows add their own bottom margin between stacked rows
     inside a section; with one row per section here it only pads the floor. */
  body.home .post-content .fusion-builder-row > .fusion-layout-column:last-child {
    margin-bottom: 0 !important;
  }
}

/* Even gaps across the four value cards.
   Three different gutters stack up here: 15px of side padding on each
   .content-box-column (with a -15px pull on the container to cancel it at
   the edges), plus a 26px margin on each half-column's wrapper. The result
   was 54px between the cards inside a pair and 124px across the middle,
   where both halves' gutters meet.

   Stripping Avada's gutters and letting the flex gap do all the spacing
   gives one 24px gap everywhere, as in the reference. */
@media screen and (min-width: 850px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 .fusion-content-boxes {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 .content-box-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 12px a side so the two halves meet at the same 24px as the flex gap. */
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-6 .fusion-layout-column .fusion-column-wrapper {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* --- Header -------------------------------------------------------------
   The reference bar is 80px, sticky, with a soft shadow separating it from
   the page. Ours was 90px, static and flat. The logo rule further up this
   file sets the image to 62px; 9px of padding plus the 68px nav gives 86,
   so the min-height is what holds the bar at 80 and the nav is the item
   that decides it. */
.fusion-tb-header > .fusion-fullwidth {
  min-height: 80px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Sticky rather than fixed: fixed would need a matching offset on every
   page's first section, and sticky needs neither that nor a JS fallback. */
.fusion-tb-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #ffffff;
}

/* --- Footer -------------------------------------------------------------
   Column for column this already matches the reference, newsletter form
   included. It was simply running at 972px against roughly 470px, all of it
   padding and per-column bottom margins. */
/* The builder row sits inside .fusion-footer-widget-area rather than
   directly under .fusion-tb-footer, and the newsletter row nests another
   .fusion-fullwidth inside itself, so a plain descendant selector padded
   the same strip twice and made the footer taller, not shorter. */
.fusion-tb-footer .fusion-footer-widget-area > .fusion-fullwidth {
  padding-top: 48px !important;
  padding-bottom: 32px !important;
}

/* The newsletter strip ran 623px for a single-line form: the form element
   carries its own generous bottom spacing and the column stretched to suit.
   Reclaiming it is most of the gap to the reference's footer height. */
.fusion-tb-footer .fusion-form,
.fusion-tb-footer .fusion-form-form-wrapper,
.fusion-tb-footer .fusion-form-field {
  margin-bottom: 0 !important;
}

@media screen and (min-width: 850px) {
  .fusion-tb-footer .fusion-layout-column {
    margin-bottom: 0 !important;
  }
}

/* The sticky header needs its own opaque background. Avada paints the bar
   on the inner container, not on .fusion-tb-header, so the wrapper alone
   scrolled over the red CTA section as a transparent strip with red nav
   text on red. */
.fusion-tb-header > .fusion-fullwidth {
  background-color: #ffffff !important;
}

/* CTA buttons side by side, as in the reference.
   Each button sits in its own bare <div>, and those divs are flex items of
   a column-direction wrapper, so they stacked. Turning the wrapper into a
   centred wrapping row puts them beside each other; the heading and the
   standfirst are forced to full width so they still take their own lines. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-8 .fusion-column-wrapper {
  /* !important because Avada's .fusion-content-layout-column sets the
     column direction from a rule that loads after this file. */
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-8 .fusion-column-wrapper > .fusion-title,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-8 .fusion-column-wrapper > .fusion-text {
  flex: 0 0 100%;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-8 .fusion-button {
  margin: 0 8px;
}

/* Header search field.
   Added to the Global Header section so the bar matches the reference. Left
   unconstrained it is wide enough to push the CTA onto a second line at
   1440px, which took the header from 80px to 122px. Capping it keeps the
   right-hand group on one line down to the point where the nav collapses. */
.fusion-tb-header .fusion-search-form,
.fusion-tb-header .searchform {
  max-width: 220px;
}

.fusion-tb-header .fusion-search-form .s,
.fusion-tb-header .searchform input[type="text"],
.fusion-tb-header .searchform input[type="search"] {
  height: 40px;
}

/* The field only fits from 1600px up. Below that the five nav items, the
   logo and the CTA already use the full content width, so keeping the search
   wrapped the right-hand group onto a second line and took the bar to 140px.
   It is hidden rather than shrunk; a 120px search box is not worth a broken
   header, and below 1280 the hamburger is the menu anyway. */
@media screen and (max-width: 1599px) {
  .fusion-tb-header .fusion-search-form,
  .fusion-tb-header .searchform {
    display: none;
  }
}

/* The builder gives the header three fixed-width columns (roughly 20/55/25).
   At 1440px the right one is 320px, which cannot hold a 220px field plus the
   CTA, so the group wrapped and the bar grew from 80px to 122px. Letting the
   nav column absorb the slack and the right column size to its contents
   keeps one line at every width where the nav is shown. */
@media screen and (min-width: 1281px) {
  /* The logo column was still the builder's ~20% (290px at 1440) around a
     131px logo, so ~160px of empty column sat between logo and nav and the
     centred nav was pushed right. Sizing it to the logo makes column 2 span
     the true gap, and the nav centres between logo and search. */
  .fusion-tb-header .fusion-builder-row > .fusion-layout-column:nth-child(1) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .fusion-tb-header .fusion-builder-row > .fusion-layout-column:nth-child(2) {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  .fusion-tb-header .fusion-builder-row > .fusion-layout-column:nth-child(3) {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* ==========================================================================
   Annual report cards on /about/
   ==========================================================================
   Five download cards built as half-width builder columns. As saved they
   were thin grey-outlined boxes with lopsided padding (3px 3px 11px 7px),
   a 22px margin above and below the title that opened a gap twice the size
   of any other, a Tailwind p-6 shim indenting the description by a further
   24px, and 40px-wide button padding that made each button a different
   width. Three across instead of two also clears the single orphan card.

   Scoped to this page: no other page uses this pattern, and the row class
   is positional, so adding a container above it in the builder would move
   these rules onto the wrong section. */

/* Three across from 1024px, two from 850px, one below. */
@media screen and (min-width: 1024px) {
  body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-layout-column {
    width: 33.3333% !important;
  }
}

@media screen and (min-width: 850px) and (max-width: 1023px) {
  body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-layout-column {
    width: 50% !important;
  }
}

/* The card itself: the site's shadow token in place of the grey outline,
   8px corners to match every other card, and even padding. */
body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-column-wrapper {
  border: 0 !important;
  border-radius: 8px;
  padding: 24px !important;
  background-color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  /* Column flow with the button pushed to the floor, so the buttons line up
     across a row no matter how many lines each description runs to. */
  display: flex;
  flex-direction: column !important;
  height: 100%;
}

/* Title: close to its own description instead of floating between the two. */
body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-title-heading {
  margin: 0 !important;
}

/* Drop the pasted shim's p-6, which was indenting each description by a
   different amount depending on which wrapper it landed in. */
/* Any depth, not just the direct child: the 2019 card nests its shim one
   level deeper than the other four, which is why its description alone sat
   48px in while the rest sat at 24px. */
body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-text,
body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-text div {
  padding: 0 !important;
}

body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-text p {
  margin-bottom: 20px !important;
}

/* Buttons: one size, sitting on the card floor. */
body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-column-wrapper > div:last-child {
  margin-top: auto;
}

body.page-id-844 .post-content > .fusion-fullwidth.fusion-builder-row-12 .fusion-button {
  padding: 12px 24px !important;
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   Team cards (/management/ and /board/)
   ==========================================================================
   The portraits are all 483x483, but the tiles are 433 wide, so each photo
   was overflowing its tile and being clipped by whatever happened to sit at
   the edges. Combined with the different studio backdrops in the source
   photos, the row read as a set of mismatched crops with grey bands.

   Scoped to .dfil-team-card-link, the wrapper dfil_team_card_links() adds,
   so this reaches the team grids on both pages and nothing else. */

.dfil-team-card-link .fusion-image-wrapper {
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  /* Square tiles whatever the source, so every card in a row matches. */
  aspect-ratio: 1 / 1;
}

/* !important on all three: Avada's carousel writes a pixel width onto the
   image and sets the caption colours from inline custom properties, both of
   which load after this file. */
.dfil-team-card-link .fusion-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  /* Avada's carousel centres an oversized image with translateX(-40px).
     Once the image is sized to the tile that offset just slides it
     off-centre and exposes the wrapper's near-black background down the
     right-hand edge. It is a transform, not a margin, so zeroing margins
     does nothing. */
  margin: 0 !important;
  transform: none !important;
  /* object-fit was `fill`, which is what let the tile clip rather than crop.
     40% biases the crop upward so the sitters' faces stay centred, rather
     than cutting foreheads to keep an even share of desk and backdrop. */
  object-fit: cover;
  object-position: 50% 40%;
}

/* A gradient behind the caption instead of nothing. The names were #dbdbdb
   straight on the photo, which held up over the darker suits and vanished
   over the pale backdrops. */
/* The scrim rides on the caption block itself, not on a fixed share of the
   card. It used to be a 34%-tall ::after on the container, which held up at
   the 433px desktop card where every name fits on one line, and failed on a
   phone: at 338px wide, Avada's fixed 24px caption type wrapped
   "Okpanachi Emmanuel Adamu" onto two lines, and with its 32/32/64 padding
   the caption block grew to 196px, 58% of the card. The top half of the
   name then sat above the scrim, in white, directly on the sitter's face.

   Sized to the text it is behind, the scrim cannot be outgrown. The stops
   are a touch stronger than the old 34% version because the gradient now
   covers a shorter run. */
.dfil-team-card-link .awb-imageframe-caption {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78),
    rgba(0, 0, 0, 0.42) 55%,
    rgba(0, 0, 0, 0)
  );
}

/* Below 850px the card is a third narrower than the desktop tile while the
   caption type stays at Avada's 24px and 20px, which is what pushed the
   block to 58% of the card. At 18px and 13px every name on both pages fits
   one line except "Alhaji Musa Ojeifo (Independent Director)", and the
   block drops to 22% of the card, 33% for that one. The padding comes down
   with it; 64px of bottom padding is a desktop figure. */
@media (max-width: 849px) {
  .dfil-team-card-link .awb-imageframe-caption {
    padding: 18px 16px 16px !important;
  }

  .dfil-team-card-link .awb-imageframe-caption-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .dfil-team-card-link .awb-imageframe-caption-text {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}

/* Carries the legibility the lighter scrim gives up, at no cost to the
   photograph. */
.dfil-team-card-link .awb-imageframe-caption-title,
.dfil-team-card-link .awb-imageframe-caption-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.dfil-team-card-link .awb-imageframe-caption {
  z-index: 1;
}

.dfil-team-card-link .awb-imageframe-caption-title {
  color: #ffffff !important;
}

/* The role was already in the markup but sat at opacity 0 behind a hover,
   and in red, which would be unreadable on a photo anyway. It is useful
   information and costs no space, so it is shown with the name. */
.dfil-team-card-link .awb-imageframe-caption-text {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 15px;
  margin-top: 2px;
}

/* --- Head scale on the team portraits -----------------------------------
   The fourteen headshots on /board/ and /management/ came from several
   photographers. Measured as a share of the frame the heads ran from 0.21
   to 0.54, which read as a set of mismatched crops rather than as fourteen
   portraits, and six of them carried flat grey letterbox bars down both
   edges, baked into the file: 157px a side on Ogidan.

   Both are fixed in the files, not here. Each source was re-cropped to a
   square sitting inside its own bars, sized so the head fills 0.60 of it
   with the top of the head 0.07 down, then resampled back to its original
   square and every derivative size and .webp sibling regenerated. 0.60 is
   not a taste call: cropping inside the bars forces a smaller square, which
   enlarges the head, and Ogidan's bars leave him only 586px to work with.
   That sets the floor the other thirteen rise to meet.

   So the CSS needs nothing per person. The one rule left is the clipping
   the tile should always have had. The crop geometry is recorded in
   .planning/DATABASE-CHANGES.md, because wp-content/uploads is gitignored
   and the replaced files do not travel with this repo; the untouched
   originals are in .planning/assets/. */

.dfil-team-card-link .fusion-image-wrapper {
  overflow: hidden;
}

/* --- The orphan row on /management/ -------------------------------------
   The grid is three stacked [fusion_images] carousels, 3 + 3 + 2, faking
   rows. Avada hands swiper slidesPerView 3 at >=1280px, but only when the
   carousel has three slides to show; the last one holds two, so swiper
   split the row in half and gave Abidemi Osode and Babatunde Dada 655px
   cards that lined up with nothing above them.

   Resizing the slides to a third each puts them back under the grid, left
   aligned, because the wrapper is not centred. The inline height swiper
   wrote for the taller cards has to go with them or the row keeps its old
   depth as white space.

   Matched with :has() on a carousel holding exactly two slides rather than
   on .fusion-image-carousel-3, which is a per-page counter that moves if a
   carousel is added above. A browser without :has() support just keeps the
   old behaviour.

   Only >=1280px: below that Avada drops every one of these carousels to a
   single slide per view, so the two rows already agree and forcing a third
   would wreck the phone layout. */

@media (min-width: 1280px) {
  body.page-id-3400 .fusion-image-carousel:has(.swiper-slide:nth-child(2):last-child) .swiper-slide {
    width: calc((100% - 20px) / 3) !important;
  }

  body.page-id-3400 .fusion-image-carousel:has(.swiper-slide:nth-child(2):last-child) .swiper-wrapper {
    height: auto !important;
  }
}

/* --- Team carousels below 1280px ----------------------------------------
   Avada drops these carousels to one slide per view below 1280px, so a
   phone visitor saw the first card of each carousel and nothing else: three
   of the eight managers, four of the six directors, with the rest reachable
   only by swiping a control whose arrows Avada had already hidden. Scrolling
   past, which is what people do, meant missing most of the team.

   dfil_team_card_stack() adds .dfil-stacked, so the rows below only reach a
   carousel the script has also de-duplicated. Without that the wrap would
   expose Avada's padding copies: it repeats each image three times in the
   markup to fill the track, which is invisible while only three show at
   once and would read as the same person listed twice once they wrap.

   Wrapping the flex track is enough. The track's width comes from swiper's
   inline per-slide widths, so overriding those is what moves the cards onto
   new rows; the inline wrapper height has to go too, or the extra rows are
   clipped at the single-row height swiper measured. */

/* Every rule here stops at 1279px. Swiper's own slide widths add up to
   10px more than the track at 1280px and up, which it hides by clipping;
   let the track wrap at that width and the 10px throws the third card onto
   a row of its own. */
@media (max-width: 1279px) {
  .dfil-stacked .swiper-wrapper {
    flex-wrap: wrap !important;
    height: auto !important;
    transform: none !important;
  }

  /* The arrows steer a track that no longer slides. */
  .dfil-stacked .awb-swiper-button {
    display: none !important;
  }
}

@media (max-width: 849px) {
  .dfil-stacked .swiper-slide {
    width: 100% !important;
    margin: 0 0 16px !important;
  }
}

/* Tablet keeps two a row. One full-width card per row at 1000px would be a
   940px portrait, which is larger than the photos are sharp at. */
@media (min-width: 850px) and (max-width: 1279px) {
  .dfil-stacked .swiper-slide {
    /* 30px, not 20px: two slides plus their 10px gutters have to come in
       under 100%, or the second card wraps and every row holds one. */
    width: calc((100% - 30px) / 2) !important;
    margin: 0 10px 10px 0 !important;
  }
}

/* ==========================================================================
   Consumer loan product tabs (/consumer-loans/)
   ==========================================================================
   The vertical tab panel listing each loan product. Scoped by the pasted
   markup's own classes (.loan-column, .features, p.label), which exist on
   this page and nowhere else in the site.

   The field labels and the feature bullets were all set in the brand red
   #d71920. Six red headings plus three red bullets in one small panel left
   nothing for the eye to rank, and the actual answers — the amounts, the
   tenure, the rate — were the quietest thing in the box. */

.loan-column p.label strong {
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.loan-column p.label {
  margin-bottom: 2px;
}

/* The values are what people came for, so they get the weight the labels
   were using. */
.loan-column p:not(.label) {
  color: #1f2937;
  font-size: 16px;
  margin-bottom: 18px;
}

/* Bullets readable, with the red kept as the marker only. */
.loan-column ul.features li {
  color: #1f2937 !important;
  margin-bottom: 6px;
}

.loan-column ul.features li::marker {
  color: #dd0000;
}

/* The panel picks up the card treatment used across the rest of the site in
   place of its 1px #efefef outline. */
.fusion-tabs.vertical-tabs .tab-pane {
  border: 0 !important;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 28px 32px !important;
}

/* The five tab buttons were ~96px tall each, which made the nav column 482px
   while the detail pane needed barely 310px, so every product left a block
   of empty white below its details. Tightening the buttons brings the two
   sides close enough that the gap stops reading as a mistake. */
.fusion-tabs.vertical-tabs .nav-tabs li .tab-link {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ==========================================================================
   Gallery album overview (/gallery/)
   ==========================================================================
   NextGEN's "compact album" layout, left as the plugin ships it. Three
   problems stacked up:

   - the items are floated at a fixed 332px, so on a 1320px container three
     fit and 324px of the row sat empty on the right;
   - the album title renders in #a6abcd, a pale lavender, and the "4 Photos"
     counter renders in pure white, which on a white page is invisible;
   - thumbnails carry a 1px black border inside a 1px grey box border, and
     object-fit:fill stretches each one to the frame.

   All of it is restyled here rather than in the plugin, which would be
   overwritten on its next update. */

/* Grid instead of floats: fills the width at any size and keeps the gaps
   even, with no trailing dead band. */
/* The class is repeated deliberately. NextGEN sets display:block with
   !important on the same single-class selector and its stylesheet loads
   after this one, so an identical selector ties and loses. Doubling the
   class outranks it without having to edit the plugin, which an update
   would overwrite. */
.ngg-albumoverview.ngg-albumoverview {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* The plugin's clearfix elements exist to close the floats and would
   otherwise each take a grid cell of their own. */
.ngg-albumoverview .ngg-clear {
  display: none;
}

.ngg-albumoverview .ngg-album-compact {
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Card treatment to match the report cards and team tiles elsewhere. */
.ngg-albumoverview .ngg-album-compactbox {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 8px;
  padding: 0 !important;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ngg-albumoverview .ngg-album-compactbox:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.12);
}

.ngg-albumoverview .ngg-album-link {
  display: block;
  width: auto !important;
  height: auto !important;
}

/* One ratio for every thumbnail, cropped rather than stretched, so the row
   reads as a set rather than a pile of different shapes. */
.ngg-albumoverview .ngg-album-compactbox img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Crop from the bottom, never the top: these are group photos and a
     centred crop was taking the heads off the back row. */
  object-position: center top;
  border: 0 !important;
  margin: 0 !important;
}

/* Title: the lavender was unreadable on white. The fixed 54px height with
   overflow:hidden also clipped any title that ran to two lines. */
.ngg-albumoverview .ngg-album-desc {
  height: auto !important;
  overflow: visible !important;
  padding: 14px 16px 0 !important;
  color: #1f2937 !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

/* Counter: was pure white, so it simply did not exist for the reader. */
.ngg-albumoverview .ngg-album-gallery-image-counter {
  padding: 4px 16px 14px !important;
  color: #6b7280 !important;
  font-size: 13px;
}

/* The album name is wrapped by the plugin's "shave" truncation script: the
   name ends up in a .js-shave span that the script hides, and a .js-shave-char
   span holding the ellipsis is left showing. With no album descriptions set,
   shave truncates an empty string, so every card showed a bare "…" and the
   name was the hidden half. Show the name, drop the ellipsis. */
.ngg-albumoverview .ngg-album-desc .js-shave {
  display: inline !important;
}

.ngg-albumoverview .ngg-album-desc .js-shave-char {
  display: none !important;
}

/* ==========================================================================
   Individual album pages (/gallery/nggallery/album/...)
   ==========================================================================
   The inside of each album, which NextGEN renders with the same defaults as
   the overview: inline-block thumbnails at a fixed 244px floated down the
   middle of a 1320px column, and both the breadcrumb and the slideshow link
   in #a6abcd, a pale lavender that barely registers on white.

   These selectors are the plugin's own, so every album page gets this, not
   just Valentine's Day. */

/* Doubled class for the same reason as the album overview above: NextGEN
   sets display:block !important on a single-class selector and loads after
   this file. */
.ngg-galleryoverview.ngg-galleryoverview.default-view {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  text-align: left;
}

.ngg-galleryoverview .ngg-gallery-thumbnail-box {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
}

.ngg-galleryoverview .ngg-gallery-thumbnail {
  width: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ngg-galleryoverview .ngg-gallery-thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.12);
}

/* One ratio for every frame. The thumbnails are generated at 240x160 but
   the sources are not all 3:2, and object-fit:fill was stretching them. */
.ngg-galleryoverview .ngg-gallery-thumbnail img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Breadcrumb: readable, and clearly a link back to the album list. */
.ngg-breadcrumb {
  margin-bottom: 20px;
  font-size: 15px;
  color: #6b7280;
}

.ngg-breadcrumb a {
  color: #6b7280 !important;
  text-decoration: none;
}

.ngg-breadcrumb a:hover {
  color: #dd0000 !important;
}

/* "View Slideshow" was 13px of pale lavender doing the job of a primary
   action. Same outlined button as the service cards use. */
/* The slideshow link and the plugin's clearfix are siblings of the
   thumbnails, so once the container became a grid they each took a cell:
   the link landed in column one of the next row and looked left-aligned
   under the first photo. Spanning the full row puts it back under the
   whole gallery, and the clearfix has nothing left to clear. */
.slideshowlink,
.ngg-galleryoverview .ngg-clear {
  grid-column: 1 / -1;
}

.ngg-galleryoverview .ngg-clear {
  display: none;
}

.slideshowlink {
  margin: 24px 0 8px;
  text-align: center;
}

.slideshowlink.slideshowlink a {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid #dd0000 !important;
  border-radius: 6px;
  color: #dd0000 !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.slideshowlink.slideshowlink a:hover {
  background-color: #dd0000;
  color: #ffffff !important;
}

/* ==========================================================================
   Testimonials (/testimonials/)
   ==========================================================================
   Four testimonials, each saved as its own full-width builder column, using
   Avada's classic speech-bubble style. Three things worked against it:

   - every quote ran the full 1320px, so the lines were far longer than is
     comfortable to read;
   - the grey bubble and the author block below it read as two separate
     things with a field of white to the right of the name;
   - the avatars are not a consistent shape. One source is 720x1280 and was
     being drawn at 120x213 under a border-radius of 200px, so it rendered
     as an ellipse next to a colleague's circle.

   Card styling is scoped to this page; the row class is positional, so
   adding a container above it in the builder would move these rules. */

/* Two across from 1024px: halves the line length and pairs the quotes. */
@media screen and (min-width: 1024px) {
  body.page-id-3657 .post-content > .fusion-fullwidth.fusion-builder-row-5 .fusion-layout-column {
    width: 50% !important;
  }
}

/* The quote and the author become one card. .review is their shared
   parent, so it carries the card and .awb-quote drops its own grey fill. */
body.page-id-3657 .fusion-testimonials .review {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

body.page-id-3657 .fusion-testimonials .awb-quote {
  background-color: transparent !important;
  padding: 0 !important;
}

/* The bubble's tail pointed at the author block from a background that no
   longer exists. */
body.page-id-3657 .fusion-testimonials .awb-triangle {
  display: none !important;
}

body.page-id-3657 .fusion-testimonials blockquote {
  margin: 0 0 20px !important;
}

body.page-id-3657 .fusion-testimonials .awb-quote-content {
  width: auto !important;
  color: #374151;
  font-size: 16px;
  line-height: 1.65;
}

/* Author row: avatar and name on one line, which also collapses the 213px
   the block was taking down to the height of the avatar. */
body.page-id-3657 .fusion-testimonials .author {
  display: flex;
  align-items: center;
  gap: 14px;
  width: auto !important;
}

body.page-id-3657 .fusion-testimonials .testimonial-thumbnail {
  flex: 0 0 auto;
  padding: 0 !important;
  width: 64px !important;
  height: 64px !important;
}

/* A true circle whatever the source aspect ratio. */
body.page-id-3657 .fusion-testimonials .testimonial-thumbnail img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 50% !important;
}

/* .company-name is a flex row, which is why display:block on the name and
   the role below changed nothing: flex items sit on one line whatever
   their display. Stacking has to happen on the container. */
body.page-id-3657 .fusion-testimonials .company-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 !important;
  font-size: 15px;
  color: #6b7280;
}

body.page-id-3657 .fusion-testimonials .company-name strong {
  display: block;
  color: #1f2937;
  font-size: 16px;
}

/* The markup is <strong>Name</strong><span>, </span><span>Role</span>.
   Stacking the name means the comma is stranded, but hiding it alone left
   the name and role butted together on one line, since that span was also
   the only thing separating them. Hide the comma AND give the role its own
   line. */
body.page-id-3657 .fusion-testimonials .company-name strong + span {
  display: none;
}

body.page-id-3657 .fusion-testimonials .company-name strong + span + span {
  display: block;
  padding: 0 !important;
}

/* Equal-height pairs were tried here and removed. Chaining height:100%
   from the builder column down to .review made every card stretch to the
   flex line's height rather than to its partner, which blew the cards out
   to 469px and 778px against a natural 190px to 269px. The small step
   between a pair is the better trade. */

/* Placeholder avatars.
   Two of the testimonials have no photo, so Avada falls back to a .doe
   class whose ::before draws an icon-font glyph at 90px. Sizing the span to
   64px did nothing to the glyph, which kept its own size and spilled well
   below the card onto the red section underneath.

   The glyph is sized to the box and toned down to a grey disc, so a missing
   photo reads as a placeholder rather than a black cut-out. */
body.page-id-3657 .fusion-testimonials .testimonial-thumbnail.doe {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background-color: #f3f4f6;
}

body.page-id-3657 .fusion-testimonials .testimonial-thumbnail.doe::before {
  font-size: 38px !important;
  line-height: 1 !important;
  color: #9ca3af !important;
}

/* ==========================================================================
   Financial statements (/financials/)
   ==========================================================================
   Eight content boxes in one row: three feature cards and five annual report
   cards. As saved they are flat #f9fafb panels with square corners and 35px
   of padding, and the download link is Avada's read-more in #a6abcd at 17px,
   which on a pale card is barely there. The actual download, the point of
   the page, was the least visible thing on it.

   Internal spacing was also uneven, from 35px of empty card below one box to
   136px below another, because the title block carries margins that only
   some of the cards' copy lengths absorb. */

body.page-id-3634 .post-content > .fusion-fullwidth.fusion-builder-row-4 .content-box-wrapper {
  background-color: #ffffff !important;
  border-radius: 8px;
  padding: 24px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  /* Column flow so the download can sit on the card floor and line up
     across a row whatever length each description runs to. */
  display: flex;
  flex-direction: column;
}

body.page-id-3634 .post-content > .fusion-fullwidth.fusion-builder-row-4 .heading {
  margin-bottom: 10px !important;
}

body.page-id-3634 .post-content > .fusion-fullwidth.fusion-builder-row-4 .content-box-heading {
  margin: 0 !important;
}

body.page-id-3634 .post-content > .fusion-fullwidth.fusion-builder-row-4 .content-container {
  margin-bottom: 16px !important;
}

/* The download becomes a real button, matching the ones on /about/. */
body.page-id-3634 .post-content > .fusion-fullwidth.fusion-builder-row-4 .fusion-read-more {
  display: inline-block;
  margin-top: auto;
  padding: 10px 20px;
  border: 1px solid #dd0000;
  border-radius: 6px;
  color: #dd0000 !important;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.page-id-3634 .post-content > .fusion-fullwidth.fusion-builder-row-4 .fusion-read-more:hover {
  background-color: #dd0000;
  color: #ffffff !important;
}

/* Avada appends a chevron with a pseudo-element that would hang outside the
   new border box. */
body.page-id-3634 .post-content > .fusion-fullwidth.fusion-builder-row-4 .fusion-read-more::after {
  display: none;
}

/* The testimonial row ends 20px above the red CTA band, so the lower cards
   looked like they were resting on it. The section carries no bottom
   padding of its own; the cards were simply the full height of it. */
body.page-id-3657 .post-content > .fusion-fullwidth.fusion-builder-row-5 {
  padding-bottom: 56px !important;
}

/* ==========================================================================
   No underline on hover, site-wide
   ==========================================================================
   Avada underlines links on hover through a theme option, which it exposes
   as --awb-link_decoration_line_hover and applies via body.awb-link-decoration.
   Redefining the variable on that same element is enough: it beats where the
   theme sets it on specificity, needs no !important, and keeps working
   through Avada's own mechanism rather than fighting it.

   No link on the site is underlined at rest (checked across the pages), so
   this removes the underline entirely rather than leaving a state mismatch. */
body.awb-link-decoration {
  --awb-link_decoration_line_hover: none;
}

/* The pasted Tailwind shim also carries an explicit hover:underline class,
   which the variable above cannot reach. */
.fusion-text .hover\:underline:hover {
  text-decoration: none;
}

/* Leaflet prints its own underline on the map credit in the corner. */
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
  text-decoration: none;
}

/* ==========================================================================
   Contact page (/contact-us/)
   ==========================================================================
   Two defects, both the same shape as ones found elsewhere on this site.

   The form's field labels render in pure white on a white column, so
   "Full Name" and "Message *" are invisible. The fields carry placeholders
   with the same text, which is why the form still looks usable, but a
   placeholder disappears the moment someone starts typing and leaves the
   field unlabelled. */
body.page-id-1287 .fusion-form-field label,
body.page-id-1287 .fusion-form-field .label {
  color: #1f2937 !important;
  font-size: 15px;
  font-weight: 500;
}

/* The phone numbers and the email sit in pasted .bg-gray-50 shim boxes that
   shrink to their contents, so the three panels came out 157px, 313px and
   504px wide and read as a layout accident rather than a set. Matching them
   to the column makes them a consistent stack. */
body.page-id-1287 .fusion-text .bg-gray-50 {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px !important;
  border-radius: 8px;
}

/* The panel can only be as wide as the .fusion-text block holding it, and
   those are flex items in the column wrapper, so each shrank to its own
   contents. Stretching the text blocks is what actually equalises them. */
body.page-id-1287 .fusion-column-wrapper > .fusion-text {
  width: 100%;
  align-self: stretch;
}

/* --- Header: search field and "Apply for Loan" button -------------------
   The two controls share one right-aligned flex column in the header
   layout, and nothing separated or matched them:

     search  220x50, 6px corners, top 15
     button  214x60, 100px corners, top 10

   So they touched edge to edge with no gap, stood 10px apart in height,
   and paired a near-square field with a pill. Three fixes below.

   Scoped to .fusion-tb-header, the Avada Layouts header wrapper, plus the
   justify-flex-end row that holds this pair, so other header rows and the
   site search elsewhere are untouched. */

/* 1. The gap. 16px reads as a deliberate pairing; zero read as a bug. */
.fusion-tb-header .fusion-column-wrapper.fusion-content-layout-row.fusion-flex-justify-content-flex-end {
  gap: 16px;
}

/* 2. Equal height. The button is brought down to the field's 50px rather
   than the field up to 60px: a 60px control crowds a 68px header row.
   The button is border-box with a 2px border on a 20.4px line box, so the
   padding that lands on 50px is 13px, not 15px. Horizontal padding drops
   with it to keep the pill's proportions. */
.fusion-tb-header .fusion-button.button-1 {
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 32px;
  padding-right: 32px;
}

/* 3. Matching corners. The field takes the button's pill radius, not the
   reverse: the CTA's shape is the brand element here, and a pill field
   also suits the leading search icon, which already has 50px of room.

   Avada styles the field as border-radius: var(--awb-border-radius), so
   the selector has to outrank .fusion-search-element
   .fusion-search-form-content input.s. Note the input sits inside a
   <label>, so the chain is not the obvious one. */
.fusion-tb-header .fusion-search-element .fusion-search-form-content input.s {
  border-radius: 100px;
}

/* --- Header: nav item spacing -------------------------------------------
   The menu element carried ~30px of padding on each side of every item, so
   five items spent ~300px on gaps alone and the bar read as loose even once
   the logo column was tightened. 18px a side keeps the items clearly
   separate while giving ~120px back to the bar.

   The padding is set on the anchor rather than through Avada's
   --awb-*-padding variables: the menu element re-declares those in a late
   inline <style> block that outranks a child-theme rule, the same reason
   the search field's radius is set as a literal above. Both the Layouts
   menu element (.awb-menu) and the classic menu (.fusion-main-menu) are
   covered, since the header can emit either. Top-level only, so submenu
   items keep their own padding. */
@media screen and (min-width: 1281px) {
  .fusion-tb-header .awb-menu > .awb-menu__main-ul > .menu-item > a,
  .fusion-tb-header .fusion-main-menu > ul > li > a {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* --- Homepage: Mission & Vision top gap ---------------------------------
   The section rhythm rule above sets 64px of top padding on row-5, but the
   container also carried a 120px top margin from its own builder settings,
   stacking to 184px of white above "Our Mission and Vision" while every
   other section opened at 64px. Margin is zeroed rather than reducing the
   padding, so the section keeps the same 64px as its neighbours. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 {
  margin-top: 0 !important;
}

/* --- Footer: copyright bar ----------------------------------------------
   The copyright line is a leftover Tailwind shim, a nested <footer
   class="bg-secondary"> pasted inside a text element of the real footer.
   It painted its own navy #212934 on a 1320px container sitting inside the
   2056px grey section, so it read as a floating inset slab with 32px of
   grey still showing below it, and it drew a border-t divider of its own
   directly above text that its background already separated.

   Rather than strip the navy, it is made the bottom bar it was trying to
   be: full-bleed, flush to the page bottom, one visual device instead of
   two. Scoped to .fusion-footer-widget-area so the shim classes, which are
   generic, cannot reach anything else. */

/* Full-bleed out of the centred builder column. overflow-x: clip on the
   area is the guard for 100vw: where the OS draws a classic (non-overlay)
   scrollbar, 100vw exceeds the content width and would otherwise add a
   horizontal scroll. */
.fusion-footer-widget-area {
  overflow-x: clip;
}

.fusion-footer-widget-area footer.bg-secondary {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* The section's own bottom padding left a 32px grey strip under the bar.
   Avada's generated CSS sets it from a two-class selector in a late inline
   <style> block, so a one-class rule ties on specificity and loses on
   order even with !important. .fusion-fullwidth is added to outrank it. */
.fusion-footer-widget-area .fusion-fullwidth.fusion-builder-row-10 {
  padding-bottom: 0 !important;
}

/* The shim's divider and its 48px top margin are both redundant once the
   bar has a background of its own. */
.fusion-footer-widget-area footer.bg-secondary .border-t {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* The shim's py-12 resolved to an uneven 14px/0; 20px a side centres the
   line in a 75px bar. */
.fusion-footer-widget-area footer.bg-secondary > .container {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* --- Header: keep the CTA on phones --------------------------------------
   The "Apply for Loan" button carries Avada's fusion-no-small-visibility, so
   it was hidden at the small breakpoint (<=800px) along with the search
   field. The off-canvas menu does not carry an Apply link either (37 links,
   none of them Apply), so phone and portrait-tablet visitors had no route to
   the primary conversion action from the header at all.

   The button is restored and shrunk instead of being added to the off-canvas,
   because a CTA behind a hamburger is a CTA most visitors never open. At
   390px the header has 246px of free space between the logo (ends at 67) and
   the off-canvas icon (starts at 313), so a ~130px pill fits on one line.

   Two classes plus the ancestor outrank Avada's single-class visibility
   rule, which is !important. */
@media screen and (max-width: 800px) {
  .fusion-tb-header .fusion-button.fusion-no-small-visibility {
    display: inline-flex !important;
    align-items: center;
    font-size: 14px;
    padding: 11px 18px;
    white-space: nowrap;
  }

  /* The builder splits the header row 50/50 at this width, which leaves the
     right column 175px for a 154px pill plus a 57px off-canvas icon: the
     pair wrapped and the bar grew from 80px to 130px. Sizing the logo
     column to the logo and letting the right column take the remainder
     keeps all three on one line. */
  .fusion-tb-header .fusion-builder-row > .fusion-layout-column:nth-child(1) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .fusion-tb-header .fusion-builder-row > .fusion-layout-column:nth-child(3) {
    flex: 1 1 auto !important;
    width: auto !important;
  }
}

/* --- Footer: touch targets ----------------------------------------------
   The footer link columns and the legal row render as inline <a> inside <p>,
   so each link was only 21px tall on mobile, well under the 44px touch
   guideline, with the links stacked close enough together to invite
   mis-taps. Padding to 44px rather than a larger font, so the footer's
   type scale is unchanged.

   Limited to the link lists: the social icons are already 42px, and the
   address block's phone and email links are prose, where inline-block
   padding would break the line rhythm. */
@media screen and (max-width: 768px) {
  .fusion-footer-widget-area .fusion-title-heading > a,
  .fusion-footer-widget-area a.text-gray-300,
  .fusion-footer-widget-area p > a {
    display: inline-block;
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 22px;
  }
}

/* ==========================================================================
   Mobile menu (off-canvas "Full Screen Menu", post 777)
   ==========================================================================
   The panel that opens from the hamburger below 1281px. It renders the
   Business Flyout Menu (term 29), which is a different menu from the one
   the desktop header uses, so nothing here reaches the desktop nav.

   Measured at 390x844 before these rules: 2321px of menu in an 844px
   viewport. Thirteen team bios sat at top level as siblings of "Home" and
   accounted for about 1900px of that; they have been removed from the menu
   itself, since hiding them in CSS would have left all thirteen in the DOM
   for screen readers. The rest is below. */

/* The panel was rgba(35,38,62,0.9), so the hero headline and the trust bar
   read straight through the menu text. */
.awb-off-canvas .awb-off-canvas-inner,
[id^="awb-oc"] .awb-off-canvas-inner {
  background-color: #23263e !important;
}

/* 34px wrapped "Products & Services" onto two lines and left the caret
   stranded between them. Avada writes these sizes from inline custom
   properties on the element, which beat a plain declaration. */
[id^="awb-oc"] .awb-menu .awb-menu__main-li > a {
  font-size: 22px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

[id^="awb-oc"] .awb-menu ul ul li > a {
  font-size: 16px !important;
}

/* A rule between items so the list reads as a list rather than floating
   words on a dark field. */
[id^="awb-oc"] .awb-menu .awb-menu__main-li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The caret measured 39px wide, under the 44px minimum tap target. Its
   height was already 61px, so only the width needs correcting. */
[id^="awb-oc"] .awb-menu__open-nav-submenu_mobile,
[id^="awb-oc"] .awb-menu__open-nav-submenu {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Sub-items were indented 90px from the panel edge, leaving about 280px for
   the label on a 390px screen. Zeroing the column margins above removed the
   indent entirely, so it is restored here as a deliberate 44px step.
   Structural `ul ul` rather than .awb-submenu, which does not match the
   markup Avada renders in the off-canvas panel. */
[id^="awb-oc"] .awb-menu ul ul li > a {
  padding-left: 44px !important;
}

/* The close control measured 42x32, under the 44px minimum on both axes. */
[id^="awb-oc"] .awb-off-canvas-close,
[id^="awb-oc"] [class*="off-canvas-close"] {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* The menu list was only 206px wide inside a 326px row and offset 90px from
   the left, which is why "Products & Services" still broke onto three lines
   after the type came down. The constraint is the builder column holding
   the menu, not the list, so widening the list alone changed nothing —
   the column wrapper has to go full width too. */
/* The 120px came from 60px side MARGINS on .fusion-column-wrapper, Avada's
   column spacing, not from padding and not from the list. That is what held
   the menu at 206px inside a 326px column and pushed the items 90px in from
   the panel edge, so width:100% on the list could never fix the wrap. */
[id^="awb-oc"] .fusion-layout-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

[id^="awb-oc"] .fusion-column-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[id^="awb-oc"] .fusion-layout-column,
[id^="awb-oc"] .fusion-column-wrapper,
[id^="awb-oc"] .awb-menu,
[id^="awb-oc"] .awb-menu > ul,
[id^="awb-oc"] .awb-menu > ul > li {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Mobile fixes found in phone screenshots, 2026-10-26
   ========================================================================== */

/* 1. Team card names printed on top of their roles.
   Avada's "navin" imageframe style slides the caption title up on hover by
   translating it down by its own height at rest: the title's layout box is
   at offsetTop 32 but it paints with transform: translateY(72px), landing
   on the role at offsetTop 104. On a desktop the hover undoes it. On a
   phone there is no hover, so it never undoes, and any name long enough to
   wrap to two lines translates 72px instead of 36px and collides.

   Cancelled at every width, not just on touch. Measuring found 21 of 24
   cards on /management/ and all 18 on /board/ overlapping at 1440px too:
   with a one-line name the title is pushed down exactly its own height and
   its baseline lands on the role. The hover reveal this transform belongs
   to adds nothing here, since the name and role are meant to be readable
   at rest. */
.dfil-team-card-link .awb-imageframe-caption-title,
.dfil-team-card-link .awb-imageframe-caption-text,
.dfil-team-card-link .awb-imageframe-caption {
  transform: none !important;
}

/* 2. Carousel arrows sitting over the portraits on phones. The cards are
   already a vertical stack at this width, so the arrows have nothing to
   page through. */
@media screen and (max-width: 849px) {
  /* .awb-swiper-button, not .fusion-carousel-nav — this carousel is Avada's
     Swiper build, and the older class names match nothing here. */
  .awb-swiper-button,
  .awb-swiper-button-prev,
  .awb-swiper-button-next {
    display: none !important;
  }
}

/* 3. A 32px icon element sits alone at the foot of the homepage About card
   with no label and no link beside it. Hidden rather than deleted from the
   page content, so it can be restored in the builder if it was meant to
   carry something. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-4 .fb-icon-element {
  display: none;
}

/* 4. Slack below the trust bar badges: the section ran 123px past its last
   content at 390px, which is the wide white gap before the About section.
   The desktop rules further up this file only trim this above 850px. */
@media screen and (max-width: 849px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-3 .fusion-layout-column {
    margin-bottom: 0 !important;
  }

  body.home .post-content > .fusion-fullwidth.fusion-builder-row-3 {
    padding-bottom: 24px !important;
  }
}

/* 5. The Mission card carried about 150px of empty red below its text and
   ran 30px taller than Vision. Both are content boxes in the same row, so
   trimming the inherited bottom spacing settles them together. */
@media screen and (max-width: 849px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .fusion-content-boxes,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .content-box-column,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .content-container {
    margin-bottom: 0 !important;
  }
}

/* Mission and Vision cards did not match on phones. The column wrappers were
   identical at every width, so the mismatch was in the painted box itself:
   at 414px the red Mission box measured 340px wide and the grey Vision box
   280px, both starting at the same x. The grey one was shrinking to its
   contents rather than filling its column.

   Equal widths, and equal heights so the shorter Vision copy does not leave
   the pair looking unfinished. align-items:stretch on the row is what makes
   the heights match without pinning either card to a fixed value, so the
   copy can still change. */
/* The 60px was padding-right saved on the Vision column's wrapper alone, in
   the builder. Its sibling has none, which is why the grey box came out
   exactly 60px short of the red one at every width, desktop included. */
body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .fusion-column-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .content-box-wrapper {
  width: 100% !important;
  box-sizing: border-box;
}

body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .fusion-content-boxes,
body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .content-box-column {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media screen and (max-width: 849px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .fusion-builder-row {
    align-items: stretch;
  }

  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .content-box-column,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .content-box-wrapper {
    height: 100%;
  }
}

/* Zeroing the column margins above also removed the gap between the two
   cards when they stack, so they met edge to edge. Restored only below the
   stacking breakpoint; side by side they are already separated by the
   builder's gutter. */
@media screen and (max-width: 849px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5 .fusion-layout-column:not(:last-child) {
    margin-bottom: 20px !important;
  }
}

/* Trust bar on desktop: the badges end 60px before the section does, and
   that 60px sits directly on top of the About section's own 64px of top
   padding, so the two white sections read as one large empty band. The
   phone-width trim further up this file did not cover desktop. */
@media screen and (min-width: 850px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-3 {
    padding-bottom: 16px !important;
  }

  body.home .post-content > .fusion-fullwidth.fusion-builder-row-3 .fusion-layout-column {
    margin-bottom: 0 !important;
  }
}

/* The band between the badges and the About heading was 108px, and trimming
   paddings barely moved it because 80px of it was neither section's padding:
   the About container carries margin-top: 80px, saved in the builder. That
   is the actual cause. With it gone the gap is the 28px below the badges
   plus 32px of About padding, around 60px.

   Measured rather than guessed: the trust section ends at y=879 and About
   starts at y=959, with nothing between them. */
@media screen and (min-width: 850px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-4 {
    margin-top: 0 !important;
    padding-top: 32px !important;
  }
}

/* Homepage section gaps, desktop.
   With the builder margins gone, the remaining voids are slack inside the
   sections: measured at 1512px, About ends 86px above its own edge and the
   Vision heading sits 208px below the top of its section, so 294px of empty
   page separates two lines of text. The other pairs run 190-215px.

   Two causes. The section padding is a flat 64px top and bottom, and the
   title blocks carry their own top margin on top of that. Trimming both
   brings each junction to roughly 110px, which still reads as a section
   break without the page feeling half empty. */
@media screen and (min-width: 850px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-6,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-7,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-8 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  body.home .post-content > .fusion-fullwidth.fusion-builder-row-4 {
    padding-bottom: 40px !important;
  }

  /* The heading blocks add their own margin above the section padding. */
  body.home .post-content > .fusion-fullwidth .fusion-title {
    margin-top: 0 !important;
  }
}

/* The same three causes are present at phone width, where the desktop rules
   above do not reach: the About container's 80px builder margin, a flat
   64px of section padding top and bottom, and the heading blocks' own top
   margin. Measured at 390px the footrooms ran 143-280px and the Vision
   heading again sat 208px below its section edge.

   Phone keeps 40px of section padding, the same as desktop. It reads as a
   clear break at this width because the sections are stacked full-bleed
   and alternate background colour. */
@media screen and (max-width: 849px) {
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-4 {
    margin-top: 0 !important;
  }

  body.home .post-content > .fusion-fullwidth.fusion-builder-row-4,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-5,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-6,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-7,
  body.home .post-content > .fusion-fullwidth.fusion-builder-row-8 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  body.home .post-content > .fusion-fullwidth .fusion-title {
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   Homepage slider: "Business Financing" slide
   ==========================================================================
   The slide is a 600px-tall background-image across the full width, roughly
   3.3:1, cropped from a 1.74:1 photo. Avada anchors it centre, which on this
   meeting photo cut the seated men off at the forehead. Anchor to the top so
   the crop takes the floor instead of the heads.

   Scoped by filename so the other slides keep their own framing. */
.fusion-slider-container .background.background-image[style*="slider3-2"] {
  background-position: center top !important;
}

/* Per-album cover framing. The top anchor above suits the group photos, where
   the people sit near the top of the frame. These are the exceptions: tall
   portrait shots whose subject sits lower, so a pure top anchor fills the card
   with sky. Scoped by the cover's filename. */
.ngg-albumoverview .ngg-album-compactbox img[src*="Opening-Ceremony-Speech"] {
  object-position: center 20% !important;
}

/* ==========================================================================
   Slideshow page (/gallery/nggallery/album/<album>/slideshow)
   ==========================================================================
   The slideshow rendered as a 750x0 sliver, so the page looked empty. Slick
   initialises fine; the problem is layout. NextGEN hands the container only a
   max-width, and Avada's builder column wraps it in a flex parent, so as a
   flex item with no width of its own and slick's absolutely-positioned track
   inside, it collapses to zero and takes every slide with it.

   Giving it a real width restores it. Plugin selectors, so this covers the
   slideshow for every album. */
.ngg-galleryoverview.ngg-slideshow {
  width: 100% !important;
  flex: 0 0 auto;
  margin: 0 auto;
}