/**
 * Section treatments
 * ---------------------------------------------------------------------------
 * Visual weight for the two homepage sections that read as bare: the quick
 * action band and the service cards. Styling hangs off `fa-` hook classes added
 * in the templates, so nothing here depends on the Tailwind build and the whole
 * file can be dequeued to revert.
 *
 * Motion here is covered by the prefers-reduced-motion block in interactions.css.
 */

/* ===========================================================================
 * Quick action band — four flat colour blocks become tiles with depth.
 * ========================================================================= */
.fa-qa-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 11.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* A soft light source at the top edge stops the fill reading as a flat swatch. */
.fa-qa-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

.fa-qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fa-qa-tile:hover .fa-qa-icon {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.06);
}

.fa-qa-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* The arrow stays out of the way until the tile is addressed. */
.fa-qa-arrow {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  transform: translateX(-4px);
  overflow: hidden;
  transition: max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fa-qa-tile:hover .fa-qa-arrow,
.fa-qa-tile:focus-visible .fa-qa-arrow {
  max-width: 1.5rem;
  opacity: 1;
  transform: translateX(2px);
}

/* On touch there is no hover, so the affordance is simply always present. */
@media (hover: none) {
  .fa-qa-arrow { max-width: 1.5rem; opacity: 0.75; transform: none; }
  .fa-qa-tile { min-height: 9.5rem; }
}

/* ===========================================================================
 * Service cards — give the icon weight and make the whole card clickable.
 * ========================================================================= */
.fa-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  background: rgba(73, 125, 89, 0.10);
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fa-svc-card:hover .fa-svc-icon {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}
/* The featured card already sits in the green state, so tint its badge to match. */
.fa-svc-card.bg-primary .fa-svc-icon {
  background: rgba(255, 255, 255, 0.16);
}

/* Even heights across a row so the grid reads as a set, not a ragged stack. */
.fa-svc-card {
  min-height: 19rem;
  border: 1px solid rgba(73, 125, 89, 0.10);
}
.fa-svc-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

/* Whole-card click target. The pill remains the only link in the accessibility
 * tree, so keyboard and screen reader behaviour is unchanged — the ::after just
 * extends its hit area over the card. */
.fa-svc-card .fa-svc-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.fa-svc-card { cursor: pointer; }

.fa-svc-arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fa-svc-card:hover .fa-svc-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .fa-svc-card { min-height: 0; }
}

/* ===========================================================================
 * Trust strip — five near-invisible tiles become a defined row.
 *
 * The base tint (bg-secondary/5) sits at about 5% on white, so the tiles barely
 * register as surfaces. This gives each one an edge and a light gradient, and
 * lifts the icon onto a white disc so it reads against the tint. Deliberately
 * the inverse of the service cards (tinted badge on white) so the two rows look
 * related rather than identical.
 * ========================================================================= */
#ss-trust-badges .fa-trust-item {
  background: linear-gradient(180deg, rgba(42, 90, 174, 0.075), rgba(42, 90, 174, 0.025));
  border: 1px solid rgba(42, 90, 174, 0.12);
  box-shadow: 0 1px 2px rgba(52, 52, 52, 0.03);
  transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ss-trust-badges .fa-trust-item:hover {
  border-color: rgba(42, 90, 174, 0.32);
}

.fa-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 2px 10px -2px rgba(42, 90, 174, 0.18);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fa-trust-item:hover .fa-trust-icon {
  transform: scale(1.06);
  box-shadow: 0 6px 18px -4px rgba(42, 90, 174, 0.30);
}

/* 22px at normal weight reads as body copy; these are claims, so give them
 * the weight of a label and pull the two-line wrap tighter. */
.fa-trust-label {
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .fa-trust-icon { width: 3.5rem; height: 3.5rem; }
  #ss-trust-badges .fa-trust-item { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* ===========================================================================
 * Why Choose Us — a near-white card with a 12% blue icon column reads as
 * unfinished. Gives the card a real surface and uses a left accent rail that
 * runs brand green into brand blue, so the palette is tied together by a
 * structural element rather than another flat colour block.
 * ========================================================================= */
#ss-why-choose-us .fa-why-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(42, 90, 174, 0.14);
  box-shadow: 0 1px 2px rgba(52, 52, 52, 0.04);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ss-why-choose-us .fa-why-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background-image: linear-gradient(180deg, var(--fa-sky-bright) 0%, var(--fa-sky) 55%, #0e7fae 100%);
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms;
  opacity: 0.9;
}
#ss-why-choose-us .fa-why-card:hover {
  border-color: rgba(42, 90, 174, 0.30);
}
#ss-why-choose-us .fa-why-card:hover::before {
  width: 6px;
  opacity: 1;
}

#ss-why-choose-us .fa-why-iconcol {
  background-image: linear-gradient(160deg, rgba(42, 90, 174, 0.12) 0%, rgba(0, 71, 19, 0.09) 100%);
  transition: background-image 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ss-why-choose-us .fa-why-card:hover .fa-why-iconcol {
  background-image: linear-gradient(160deg, rgba(42, 90, 174, 0.18) 0%, rgba(0, 71, 19, 0.14) 100%);
}

/* 16px semi-muted reads as body copy; these are the reasons to choose them. */
#ss-why-choose-us .fa-why-title {
  font-size: 1.0625rem;
  color: #343434;
  line-height: 1.3;
}

/* ===========================================================================
 * Page rhythm
 *
 * Measured on the homepage: 11 of the 12 sections computed to
 * rgb(255, 255, 255). Roughly 10,000px of white with rounded cards sitting on
 * it, which is why every section read as the same section no matter how the
 * cards inside it were styled. This gives the page three surfaces so it scans
 * as chapters.
 *
 * Why Choose Us becomes the dark anchor. It already renders as an inset
 * rounded band (max-w-[1408px] + rounded-2xl), the same silhouette as the hero
 * and the services band, so it takes a dark fill with no layout change — and
 * its white cards finally have something to contrast against.
 * ========================================================================= */
#ss-why-choose-us {
  background-color: #013d14;
  /* Also overrides the module's `gradient` background variant, which is an
   * arbitrary-value Tailwind class and so loses to this ID selector. The
   * surface is a single hue — a band that travels green to teal to blue reads
   * as a gradient someone applied, not as a brand colour. */
  background-image: var(--fa-surface-dark);
  /* The module sets no vertical padding of its own — on white that was
   * invisible, but a filled band needs room or the content touches the
   * rounded edge. */
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  #ss-why-choose-us {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}
#ss-why-choose-us h2 {
  color: #ffffff;
}
#ss-why-choose-us .text-muted {
  color: rgba(255, 255, 255, 0.72);
}
/* The eyebrow dot is forest green, which disappears into the band. */
#ss-why-choose-us span.bg-forest {
  background-color: var(--fa-sky);
}
/* The cards keep their white fill and gradient rail; only the edge treatment
 * changes, since a hairline blue border and a 4% shadow are both invisible
 * against dark. */
#ss-why-choose-us .fa-why-card {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
}
#ss-why-choose-us .fa-why-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.6);
}

/* Two quieter tinted bands break up the remaining white without competing
 * with the dark anchor. */
#ss-testimonials,
#ss-brands {
  background-color: #f8faf2;
}

/* ===========================================================================
 * Header, small screens
 *
 * Measured at 375px: the bar was 117px tall and the toggle was a 24x18 tap
 * target. Both are fixed here rather than in the markup where that is possible,
 * so the desktop header is untouched.
 * ========================================================================= */

/* 24x18 is well under the 44x44 minimum. The padding is invisible — the three
 * lines stay exactly where they were, right-aligned and centred. */
#masthead .toggleBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  min-width: 44px;
  min-height: 44px;
}

/* A scrim was added behind the header on every non-home page in Customizer →
 * Additional CSS (September 2026) as `body:not(.home) #masthead::before`, so the
 * white logo reads over a subpage hero. Single posts and the 404 have no hero
 * and render the LIGHT header — dark nav and toggle — so that scrim puts dark
 * on dark and the toggle all but disappears.
 *
 * This cancels it on exactly those two templates. The `html` prefix is only
 * there to outrank the Customizer selector, which the database prints after
 * this file. Once that rule is deleted, this block can go with it. */
html body.single-post #masthead::before,
html body.error404 #masthead::before {
  display: none;
}