@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --navy: #0f172a;
  --navy2: #1e293b;
  --navy3: #334155;
  --amber: #0088cc;
  --amber2: #6bb333;
  --white: #fff;
  --bg: #f4f6fa;
  --muted: #7a8fa6;
  --body: #344055;
  --grad: linear-gradient(135deg, #0f172a 0%, #004d7a 100%);
  --sh-sm: 0 2px 12px rgba(15, 23, 42, 0.08);
  --sh-md: 0 8px 32px rgba(15, 23, 42, 0.14);
  --sh-lg: 0 20px 60px rgba(15, 23, 42, 0.2);
  --r: 12px;
  --r2: 20px;
  --t: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* The width every block is laid out on: header, hero, stats, sections and footer, so
     text starts on one line down the page, under the logo. 1200px until November 2026,
     which left a wide screen a third empty. */
  --site-width: 1440px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* The site width plus its 24px padding each side (see --site-width). */
.container {
  max-width: calc(var(--site-width) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 90px 0;
}

.section--compact {
  padding: 20px 0;
}

.section--dark {
  background: var(--navy);
  color: #fff;
}

.section--dark .section-title {
  color: #fff;
}

.section--dark .section-sub {
  color: rgba(255, 255, 255, 0.72);
}

.section--light {
  background: var(--bg);
}

.text-center {
  text-align: center;
}

.badge {
  display: inline-block;
  background: rgba(0, 136, 204, 0.15);
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid rgba(0, 136, 204, 0.3);
  margin-bottom: 6px;
}

.section--dark .badge {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 16px;
}

.section-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 16px;
}

.reporting-title {
  color: var(--navy);
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.reporting-title-sub {
  color: var(--body);
  font-size: 1rem;
  margin-bottom: 20px;
}

.cta-title-plain {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  margin-bottom: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Flush with the card's heading and paragraph above it, not indented (client, Nov 2026). */
.report-list {
  color: var(--body);
  line-height: 1.8;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-list-item {
  margin-bottom: 3px;
}

.report-list-title {
  font-weight: 700;
  color: var(--navy);
  margin-right: 6px;
}

.report-list-body {
  color: var(--body);
}

.section-title span {
  color: var(--amber);
}

.section-title--w {
  color: #fff;
}

.text-body-spaced {
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--body);
  margin-bottom: 24px;
  font-weight: 400;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 580px;
  margin-bottom: 48px;
}

.section-sub--c {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 6px;
  /* sharper, more industrial look than 50px pill */
  font-weight: 700;
  font-size: 0.9rem;
  transition: var(--t);
  cursor: pointer;
  border: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

a.btn.btn--industry {
  border: 2px solid var(--navy) !important;
  color: var(--navy) !important;
  background: transparent;
}

.btn--primary {
  background: linear-gradient(135deg, var(--amber) 0%, #0070a8 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 4px 15px rgba(0, 136, 204, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.btn--industry {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);


  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 26px;
  border-radius: 6px;

  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;

  transition: var(--t);
  cursor: pointer;
  white-space: nowrap;
}

.about-img-text {
  background: var(--grad);
  border-radius: var(--r2);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}



.btn--primary:hover {
  background: linear-gradient(135deg, var(--amber2) 0%, #569128 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(107, 179, 51, 0.45);
}

.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border: 2px solid var(--navy) !important;
  /* border: 2px solid rgba(255, 255, 255, 0.5); */
}

.btn--outline:hover {
  border-color: var(--amber);
  color: var(--amber) !important;
  transform: translateY(-2px);
}


.btn--dark {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy2);
}

.btn--dark:hover {
  background: var(--navy);
  color: #fff;
}

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0 24px;
  height: 95px;
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    background 0.4s,
    box-shadow 0.4s;
}

.navbar.scrolled {
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

/* The site width, so the logo starts where the page text does (see --site-width). */
.nav-inner {
  max-width: var(--site-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-side-gap);
}

/* The logo and the button keep their size; the bar's spare room is between them and
   the links (see the header sizing note at the foot of this file). */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* The mark alone (Site Settings "Header logo", fact-logo-mark.svg by default): the full
   logo's tagline shrinks to ~7px at this height, so it is carried by the footer instead.
   A wide upload is held to 220px and shrinks inside that box rather than stretching. */
.nav-brand-logo {
  width: auto;
  height: 64px;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* The text beside the header logo (Site Settings, "Text beside the header logo"): the
   full logo's tagline, in the logo's own green, left-aligned, as the client's mock-up of
   the header (November 2026). The block sits low: the last line stands on the foot of
   FACT. .nav-logo aligns on the last baseline, and a logo image's baseline is its bottom
   edge, which is where FACT stands in the mark, so this holds at every tagline size.
   One line per line typed; a line never wraps, so the block is as wide as its longest
   line. */
.nav-logo:has(.nav-brand-text) {
  align-items: last baseline;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  padding-left: 6px;
  color: #76c04e;
  font-size: var(--nav-tagline-size);
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

/* A phone has room for the logo and the hamburger only. */
@media (max-width: 480px) {
  .nav-brand-text {
    display: none;
  }
}

.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--amber);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}


.nav-links {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);

  margin-left: auto;
}

.nav-links a,
.nav-logout-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--nav-link-size);
  font-weight: 500;
  transition: color var(--t);
  position: relative;
}

.nav-logout-form {
  display: inline;
}

.nav-logout-link {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* Logout in the header bar is an icon (its name is the title and aria-label): with a
   client logged in the bar carries Dashboard and Logout, and a word would not fit. */
.nav-logout-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.nav-logout-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-logout-icon::after {
  display: none;
}

.nav-links a::after,
.nav-logout-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transition: transform var(--t);
}

.nav-links a:hover,
.nav-links a.active,
.nav-logout-link:hover {
  color: var(--amber);
}

.client-login-link {
  color: var(--amber2) !important;
  font-weight: 700;
}

.nav-links a:hover::after,
.nav-logout-link:hover::after {
  transform: scaleX(1);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--t);
}

.mob-nav {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(20px);
  padding: 24px;
  flex-direction: column;
  gap: 18px;
  z-index: 9998;
}

.mob-nav.open {
  display: flex;
}

.mob-nav a,
.mob-logout-link {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mob-logout-form {
  margin: 0;
}

.mob-logout-link {
  width: 100%;
  background: none;
  cursor: pointer;
  text-align: left;
}

/* HERO */
.hero {
  min-height: 100vh;
  background: var(--grad);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 100px 24px 60px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%,
      rgba(0, 136, 204, 0.08),
      transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(26, 74, 122, 0.5), transparent 50%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 136, 204, 0.15);
  border: 1px solid rgba(0, 136, 204, 0.3);
  border-radius: 50px;
  padding: 8px 18px;
  color: var(--amber2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  margin-top: 15px;
}

.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--amber);
  border-radius: 50%;
  animation: pdot 2s infinite;
}

@keyframes pdot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}

.hero-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
}

.hero-title .hl {
  color: var(--amber);
}

.hl {
  color: var(--amber);
}

.hero-desc {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.78;
  margin-bottom: 40px;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-trust {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.83rem;
}

.trust-item .chk {
  color: var(--amber);
}

/* HERO VISUAL */
.hero-visual {
  display: flex;
  justify-content: right;
  align-items: center;
}

/* The FACT logo ringed by the services (frontend/partials/hero-orbit). The ring's 235px
   radius is set by the labels, not the badges: each label hangs under its badge, so on
   the upper half of the ring it points at the disc, and at 235px the nearest one passes
   the 260px disc ~7px clear (12px off the 250px disc, measured round a full turn). The labels reach ~40px past the
   540px square at the sides as they come round, which is why it is centred in its column,
   not pushed right. */
.orbit {
  position: relative;
  width: 540px;
  height: 540px;
  flex: none;
  margin: 0 auto;
}

.orbit-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 136, 204, 0.35) 0%, rgba(0, 136, 204, 0) 65%);
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Through the badges' centres. */
.orbit-ring--main {
  inset: 35px;
}

.orbit-ring--inner {
  inset: 120px;
  border-style: solid;
  border-color: rgba(0, 136, 204, 0.18);
}

/* A blue disc (November 2026, it was white), so the mark sits on the hero's own colour.
   The logo's 200 x 160px box, the mark's shape at that width, keeps its corners on the
   260px disc. The disc can't grow much more: the labels hanging off the upper badges
   pass it only ~7px clear (see .orbit). */
.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #0f4f86 0%, #0b3a66 60%, #0a2f55 100%);
  border: 1px solid rgba(0, 152, 218, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px rgba(0, 152, 218, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.35);
}

.orbit-core img {
  width: 200px;
  height: 160px;
  object-fit: contain;
  display: block;
}

/* The floating hero logo (Site Settings, "Hero logo style"): the logo without its drop,
   and the drop in the same frame laid exactly over it. Both take the img box above, so
   they line up; only the drop moves, and two rings ripple out where it lands.

   Two motions, both landing the same way (squash, one bounce, a lighter squash, rest,
   then sink away for the next drop), and the ripple keyed to the moment of impact:
   - default (drop-fall, 3.6s): the drop falls in from 56px above, speeding up (~0.45s).
   - .orbit-logo-float--drip (drop-drip, 4.4s): it first forms as a bead hanging 56px
     above, swells, stretches, lets go and falls.
   In the bundled frame the drop is at about 40% across, from 4% down to its tip at 44%
   (65px of the 160px box); the ripple is centred on the tip. The fall squashes on the
   tip; the drip grows from the top, so its keyframes add 65px x (1 - scaleY) to keep the
   tip on the ground when it squashes. The bundled logo has its leaf on a layer of its
   own (.orbit-logo-leaf, between the letters and the drop): when the drop lands the
   leaf dips clockwise about its stem, at about 33.5% across and 53% down, then sways
   back and forth until it settles (~1.1s), brightening for a moment like a wet sheen.
   It was the header logo's until November 2026, when it rose 2px at 64px tall. */
.orbit-logo-float {
  position: relative;
  display: block;
}

.orbit-logo-drop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform-origin: 40% 44%;
  animation: drop-fall 3.6s infinite;
}

.orbit-logo-float::before,
.orbit-logo-float::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 44%;
  z-index: 1;
  width: 26px;
  height: 7px;
  border: 1.5px solid rgba(140, 212, 245, 0.85);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: drop-ripple-fall 3.6s ease-out infinite;
}

.orbit-logo-float::after {
  border-color: rgba(140, 212, 245, 0.55);
  animation-delay: 0.14s;
}

.orbit-logo-leaf {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transform-origin: 33.5% 53%;
  animation: leaf-sway-fall 3.6s ease-in-out infinite;
}

.orbit-logo-float--drip .orbit-logo-leaf {
  animation-name: leaf-sway-drip;
  animation-duration: 4.4s;
}

.orbit-logo-float--drip .orbit-logo-drop {
  transform-origin: 40% 4%;
  animation: drop-drip 4.4s infinite;
}

.orbit-logo-float--drip::before,
.orbit-logo-float--drip::after {
  animation-name: drop-ripple-drip;
  animation-duration: 4.4s;
}

@keyframes drop-fall {

  /* Appear high up, stretched, and fall with gravity. */
  0% {
    opacity: 0;
    transform: translateY(-56px) scale(0.86, 1.14);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }

  4% {
    opacity: 1;
  }

  /* Impact: flatten. */
  13% {
    transform: translateY(0) scale(1.16, 0.82);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }

  /* Small rebound. */
  20% {
    transform: translateY(-8px) scale(0.95, 1.06);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }

  /* Land again with a lighter squash, then settle. */
  26% {
    transform: translateY(0) scale(1.06, 0.94);
    animation-timing-function: ease-out;
  }

  32%,
  84% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Sink away, then wait out of sight to fall again. */
  94% {
    opacity: 0;
    transform: translateY(4px) scale(0.7);
  }

  100% {
    opacity: 0;
    transform: translateY(-56px) scale(0.86, 1.14);
  }
}

@keyframes drop-drip {

  /* A small bead appears 56px up and swells, hanging. */
  0% {
    opacity: 0;
    transform: translateY(-56px) scale(0.18);
    animation-timing-function: ease-out;
  }

  3% {
    opacity: 1;
  }

  20% {
    transform: translateY(-56px) scale(0.7, 0.72);
    animation-timing-function: ease-in;
  }

  /* It grows heavy and stretches, then lets go and falls with gravity. */
  30% {
    transform: translateY(-54px) scale(0.78, 1.08);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }

  /* Impact: flatten, tip kept on the ground. */
  40% {
    transform: translateY(12px) scale(1.16, 0.82);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }

  /* Small rebound. */
  46% {
    transform: translateY(-12px) scale(0.95, 1.06);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }

  /* Land again with a lighter squash, then settle. */
  52% {
    transform: translateY(4px) scale(1.06, 0.94);
    animation-timing-function: ease-out;
  }

  57%,
  86% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Sink away, then wait out of sight to form again. */
  95% {
    opacity: 0;
    transform: translateY(24px) scale(0.7);
  }

  100% {
    opacity: 0;
    transform: translateY(-56px) scale(0.18);
  }
}

/* The leaf struck by the drop: a dip, then a sway dying away. The same moves at the same
   seconds after impact in both, at 13% of 3.6s and at 40% of 4.4s. */
@keyframes leaf-sway-fall {

  0%,
  13%,
  43.5%,
  100% {
    transform: rotate(0) scale(1);
    filter: brightness(1);
  }

  16% {
    transform: rotate(3.2deg) scale(0.985);
    filter: brightness(1.12);
  }

  21.6% {
    transform: rotate(-1.6deg) scale(1.005);
  }

  27.2% {
    transform: rotate(0.8deg) scale(1);
  }

  32.5% {
    transform: rotate(-0.35deg);
    filter: brightness(1);
  }

  38.6% {
    transform: rotate(0.12deg);
  }
}

@keyframes leaf-sway-drip {

  0%,
  40%,
  65%,
  100% {
    transform: rotate(0) scale(1);
    filter: brightness(1);
  }

  42.5% {
    transform: rotate(3.2deg) scale(0.985);
    filter: brightness(1.12);
  }

  47% {
    transform: rotate(-1.6deg) scale(1.005);
  }

  51.6% {
    transform: rotate(0.8deg) scale(1);
  }

  56% {
    transform: rotate(-0.35deg);
    filter: brightness(1);
  }

  61% {
    transform: rotate(0.12deg);
  }
}

/* A flat ring that spreads and fades from the tip, starting on impact. */
@keyframes drop-ripple-fall {

  0%,
  12.9% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  13% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.35);
  }

  40%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
  }
}

@keyframes drop-ripple-drip {

  0%,
  39.9% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  40% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.35);
  }

  63%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
  }
}

@media (prefers-reduced-motion: reduce) {

  .orbit-logo-drop,
  .orbit-logo-leaf,
  .orbit-logo-float--drip .orbit-logo-drop,
  .orbit-logo-float--drip .orbit-logo-leaf {
    animation: none;
  }

  .orbit-logo-float::before,
  .orbit-logo-float::after {
    display: none;
  }
}

/* The track turns the badges round the centre; each badge's .orbit-upright turns back
   by the same amount at the same rate, so it travels the ring without tipping over. */
.orbit-track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: orbit-turn 60s linear infinite;
}

.orbit-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--angle)) translateY(-235px) rotate(calc(-1 * var(--angle)));
}

.orbit-upright {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  animation: orbit-turn 60s linear infinite reverse;
}

/* A badge and its name, anchored on the badge's centre, so the badge (not badge + label)
   sits on the ring. Not a link (App\Support\HeroOrbit), so it has no hover state. */
.orbit-body {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  transform: translate(-50%, -32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
}

/* Still while the pointer is over it, so a name can be read. */
.orbit:hover .orbit-track,
.orbit:hover .orbit-upright {
  animation-play-state: paused;
}

@keyframes orbit-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .orbit-track,
  .orbit-upright {
    animation: none;
  }
}

.orbit-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.orbit-badge--blue {
  background: linear-gradient(135deg, var(--amber) 0%, #005f8f 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(0, 136, 204, 0.12);
}

.orbit-badge--green {
  background: linear-gradient(135deg, #7cc443 0%, #4f8f22 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(107, 179, 51, 0.14);
}

.orbit-badge svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A two-word name like "Lubrication Monitoring" wraps onto two lines rather than running
   ~170px wide: that wide, the label's inner corner would cut into the disc as its badge
   comes round the upper half of the ring (see .orbit). */
.orbit-label {
  margin-top: 8px;
  padding: 3px 10px;
  max-width: 9.5em;
  text-align: center;
  line-height: 1.3;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
}

/* Two columns run down to 769px, where the hero visual is hidden: shrink the ring with
   its column. zoom scales the layout box too, so nothing spills into the headline. */
@media (max-width: 1100px) {
  .orbit {
    zoom: 0.8;
  }
}

@media (max-width: 960px) {
  .orbit {
    zoom: 0.62;
  }
}

.hero-visual-wrap {
  position: relative;
  width: 360px;
  height: 400px;
}

.hero-visual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r2);
  box-shadow: var(--sh-lg);
}

/* HERO BROCHURE CAROUSEL (frontend/partials/hero-brochures, Option B of the November 2026
   home page demo). The brochures sit at the foot of the hero as one glass strip, so the
   hero stacks: headline + ring, then the strip. --hb-per-view sets how many show (3 wide,
   2 tablet, 1 phone); main.js reads it, so change it here only.

   Without script the row scrolls sideways. main.js adds .is-carousel once there are more
   brochures than fit: the viewport clips, the track moves by transform with the transition
   below, and copies of the brochures sit after the last one so it loops on without
   rewinding. With everything fitting it adds .is-static: no arrows, no dots, no movement.
   The thumbnail is A4 portrait (1 : 1.414). */
.hero--with-brochures {
  flex-direction: column;
  justify-content: center;
  gap: 36px;
}

.hero-brochures {
  --hb-per-view: 3;
  --hb-gap: 14px;
  --hb-arrow: 40px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--hb-arrow) minmax(0, 1fr) var(--hb-arrow);
  align-items: center;
  column-gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
}

.hb-arrow {
  width: var(--hb-arrow);
  height: var(--hb-arrow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.hb-arrow svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hb-arrow:hover,
.hb-arrow:focus-visible {
  background: var(--amber);
  border-color: var(--amber);
}

.hb-arrow:active {
  transform: scale(0.92);
}

/* Everything fits: nothing to move to. The arrows keep their place so the strip does not
   change width. */
.hero-brochures.is-static .hb-arrow {
  visibility: hidden;
}

.hb-viewport {
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hb-viewport::-webkit-scrollbar {
  display: none;
}

.is-carousel .hb-viewport {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
}

.is-carousel.is-dragging .hb-viewport {
  cursor: grabbing;
}

.hb-track {
  display: flex;
  gap: var(--hb-gap);
}

.is-carousel .hb-track {
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.is-carousel .hb-track.is-jumping,
.is-dragging .hb-track {
  transition: none;
}

.hb-item {
  flex: 0 0 calc((100% - (var(--hb-per-view) - 1) * var(--hb-gap)) / var(--hb-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.hb-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border-radius: 12px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background var(--t), box-shadow var(--t);
}

/* Hover only where there is a pointer that hovers: a phone keeps :hover on whatever was
   last tapped, which left a highlighted box on the brochure after a swipe. */
.hb-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 136, 204, 0.5);
  outline: none;
}

@media (hover: hover) {
  .hb-link:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(0, 136, 204, 0.5);
  }

  .hb-link:hover .hb-cover {
    transform: translateY(-3px);
  }
}

.hb-cover {
  flex: none;
  width: 104px;
  height: 147px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  transition: transform var(--t);
}

.hb-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

/* No cover uploaded: the brochure's title on a FACT-coloured card, laid out like a
   brochure front page (group at the top, title, a footer band). */
.hb-cover--text {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0f172a 0%, #004d7a 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

.hb-cover-group {
  padding: 10px 9px 0;
  color: var(--amber2);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hb-cover-title {
  margin: auto 0;
  padding: 0 9px;
  font-family: "Outfit", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hb-cover-foot {
  padding: 5px 9px;
  background: var(--amber);
  font-family: "Outfit", sans-serif;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.hb-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hb-group {
  color: var(--amber2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hb-title {
  margin: 2px 0 8px;
  font-family: "Outfit", sans-serif;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hb-open {
  color: #4fb6ea;
  font-size: 0.82rem;
  font-weight: 700;
}

/* One dot per brochure, under the strip; the current one stretches into a bar. Filled in
   by main.js, so there are none without script or while everything fits. */
.hb-dots {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.hb-dots:empty {
  display: none;
}

.hb-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.4s ease, background 0.4s ease;
}

.hb-dot.is-active::before {
  width: 22px;
  background: var(--amber);
}

.hb-dot:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
  border-radius: 6px;
}

@media (max-width: 1024px) {
  .hero-brochures {
    --hb-per-view: 2;
  }
}

/* A phone: one brochure at a time, with smaller arrows either side, the dots under it,
   and swipe. */
@media (max-width: 640px) {
  .hero-brochures {
    --hb-per-view: 1;
    --hb-arrow: 34px;
    column-gap: 6px;
    row-gap: 4px;
    padding: 10px 8px 6px;
    border-radius: 14px;
  }

  .hb-link {
    gap: 14px;
    padding: 6px;
  }

  .hb-cover {
    width: 88px;
    height: 124px;
  }

  .hb-title {
    font-size: 1.02rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-carousel .hb-track {
    transition-duration: 0.01s;
  }
}

/* STATS */
.stats-bar {
  background: var(--amber);
  padding: 30px 24px;
}

.stats-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  text-align: center;
  padding: 8px 16px;
  border-right: 1px solid rgba(15, 23, 42, 0.15);
}

.stat:last-child {
  border: none;
}

.stat-num {
  font-family: "Outfit", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}

.stat-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.62);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* SERVICES */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.svc-card {
  background: #fff;
  border-radius: var(--r2);
  padding: 34px 26px;
  border: 1px solid #e8edf5;
  transition: var(--t);
  position: relative;
  overflow: hidden;
}

.svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}

.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}

.svc-card:hover::before {
  transform: scaleX(1);
}

.svc-icon {
  width: 54px;
  height: 54px;
  background: rgba(0, 136, 204, 0.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
  transition: var(--t);
}

.svc-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #e8edf5;
}

.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-card:hover .svc-icon {
  background: var(--amber);
}

.svc-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}

.svc-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 18px;
}

.svc-link {
  color: var(--amber);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--t);
}

.svc-card:hover .svc-link {
  gap: 10px;
}

/* ABOUT */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-grid--reverse> :first-child {
  order: 2;
}

.about-grid--reverse> :last-child {
  order: 1;
}

.about-img {
  background: white;
  border-radius: var(--r2);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

}

.about-img-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
  padding: 20px;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0.6;
  pointer-events: none;
  /* ensures it doesn't block clicks */
  z-index: 2;
}

.about-img-inner {
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 3;
  padding: 36px;
}


.about-img::after {
  content: "🔬";
  font-size: 7rem;
  opacity: 0.12;
  position: absolute;
  bottom: -10px;
  right: -10px;
  transform: rotate(-15deg);
  z-index: 3;
}




/* .about-img-inner {
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
  padding: 36px;


} */

.title-box {

  margin: auto;

  line-height: 1.2;
}

.about-img-inner h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.about-img-inner p {
  font-size: 0.9rem;
  opacity: 0.78;
}

.exp-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: var(--amber);
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
  box-shadow: var(--sh-md);
  z-index: 5;
}

.exp-badge .n {
  font-family: "Outfit", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--navy);
  display: block;
  line-height: 1;
}

.exp-badge .l {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.about-visual {
  position: relative;
}

.features {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.feat-icon {
  width: 42px;
  height: 42px;
  background: rgba(0, 136, 204, 0.12);

  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.feat-icon--amber {
  background: var(--amber);
  color: var(--navy);
}


/* .feat-icon {
  width: 42px;
  height: 42px;
  background: rgba(0, 136, 204, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
} */

.feat-title {
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--navy);
  margin-bottom: 3px;
}

.section--dark .feat-title {
  color: #ffffff;
}

.feat-desc {
  font-size: 0.85rem;
  color: var(--muted);
}

/* PROCESS */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 48px;
}

.process-grid::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), rgba(0, 136, 204, 0.15));
  z-index: 0;
}

.step {
  text-align: center;
  padding: 16px 18px;
  position: relative;
  z-index: 1;
}

.step-num {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--amber);
  margin: 0 auto 18px;
  box-shadow: 0 0 0 8px rgba(0, 136, 204, 0.08);
}

.step-title {
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.step-desc {
  font-size: 0.82rem;
  color: var(--muted);
}

/* INDUSTRIES */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.ind-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 26px 22px;
  transition: var(--t);
}

.section--white .ind-card {
  background: var(--bg);
  border-color: #e8edf5;
}

.ind-card:hover {
  background: rgba(0, 136, 204, 0.1);
  border-color: rgba(0, 136, 204, 0.35);
  transform: translateY(-4px);
}

.section--white .ind-card:hover {
  background: #f7fbff;
  border-color: rgba(0, 136, 204, 0.22);
}

/* .ind-icon {
  font-size: 1.9rem;
  margin-bottom: 12px;
} */
.ind-icon {
  font-size: 2.5rem;
  background: var(--amber);
  color: var(--navy);
  padding: 15px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.ind-icon-single {
  font-size: 2.5rem;
  margin-bottom: 12px;
  line-height: 1;
}

.ind-title {
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.section--white .ind-title {
  color: var(--navy);
}

.ind-desc {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.52);
}

.section--white .ind-desc {
  color: var(--muted);
}

/* TESTIMONIALS */
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.test-card {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: var(--r2);
  padding: 28px;
  box-shadow: var(--sh-sm);
  transition: var(--t);
}

.test-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
}

.stars {
  color: var(--amber);
  font-size: 0.95rem;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.test-text {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}

.test-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.test-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
  overflow: hidden;
}

.test-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.test-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
}

.test-role {
  font-size: 0.78rem;
  color: var(--muted);
}

/* CTA */
.cta {
  background: var(--amber);
  padding: 64px 24px;
  text-align: center;
}

.cta--plain {
  padding: 64px 24px;
  text-align: center;
  background: var(--white);
}

.cta-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 14px;
}

.cta-sub {
  font-size: 1rem;
  color: rgba(15, 23, 42, 0.68);
  margin-bottom: 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.btn-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}

.contact-map {
  margin-top: 40px;
  border-radius: var(--r2);
  overflow: hidden;
  height: 250px;
  border: 1px solid #e8edf5;
}

.ci {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.ci-icon {
  width: 46px;
  height: 46px;
  background: rgba(0, 136, 204, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ci-icon-whatsapp {
  background: #25d366;
  color: #fff;
}

.ci-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
}

.ci-value {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.93rem;
}

.form-box {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: var(--r2);
  padding: 36px;
  box-shadow: var(--sh-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.fg {
  margin-bottom: 18px;
}

.fg label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}

.fg input,
.fg select,
.fg textarea {
  width: 100%;
  border: 1.5px solid #dde3ed;
  border-radius: 10px;
  padding: 11px 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: var(--body);
  background: var(--bg);
  transition:
    border-color var(--t),
    box-shadow var(--t);
  outline: none;
  resize: vertical;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
  background: #fff;
}

.fg textarea {
  min-height: 110px;
}

.contact-note {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin-top: 15px;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.panel-title {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--amber);
}

.panel-item+.panel-item {
  margin-top: 16px;
}

.panel-item-title {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.panel-item-body {
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.75;
}

.status-levels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.status-level {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.grade-badge {
  display: inline-block;
  min-width: 120px;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.status-description {
  color: var(--body);
  font-size: 0.95rem;
}

.login-container {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #e8edf5;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  color: var(--navy);
  margin-bottom: 10px;
}

.login-header p {
  color: var(--muted);
  font-size: 0.95rem;
}

.btn-login {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  margin-top: 10px;
}

.login-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.login-footer a {
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
}

.login-footer a:hover {
  text-decoration: underline;
}

.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  padding: 12px;
  background: #f0fdf4;
  color: #166534;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* FOOTER */
.footer {
  background: #060f1e;
  color: rgba(255, 255, 255, 0.6);
  padding: 60px 24px 0;
}

.footer-grid {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The full logo (Site Settings "Footer logo", fact-logo.png by default). 240px is about
   the smallest at which its three tagline lines still read; a tall upload stops at 160px. */
.footer-brand-logo {
  width: 240px;
  max-width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.footer-desc {
  font-size: 0.86rem;
  line-height: 1.75;
  margin-top: 14px;
}

.footer-col-title {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 0.85rem;
  transition: color var(--t);
}

.footer-links a:hover {
  color: var(--amber);
}

.footer-bottom {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

/* The oil drop from the logo (fact-logo-drop.svg), in front of the copyright line. */
.footer-copyright {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-copyright-drop {
  width: auto;
  height: 22px;
  flex-shrink: 0;
  display: block;
}

/* ANIMATIONS */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 1024px) {

  .services-grid,
  .ind-grid,
  .test-grid,
  .panel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section {
    padding: 15px 0px 20px 0;
  }

  .nav-links,
  .navbar .btn {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    display: none;
  }

  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat {
    border-right: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-grid--reverse> :first-child,
  .about-grid--reverse> :last-child {
    order: initial;
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid::before {
    display: none;
  }

  .services-grid,
  .ind-grid,
  .test-grid,
  .contact-grid,
  .panel-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* @media (max-width: 786px) {
  .section {
    padding: 35px 0;
  }
} */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--navy3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--amber);
}

a.btn.btn--industry {
  color: var(--navy) !important;
  border: 2px solid var(--navy) !important;
  background: transparent !important;
}

a.btn.btn--industry:hover {
  color: var(--amber) !important;
  border-color: var(--amber) !important;
}

.report-table-card {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  overflow-x: auto;
  opacity: 1;
  transform: none;
}

.report-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.report-table th {
  background: #f6f8fb;
  color: #020b20;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  padding: 15px 16px;
  border-bottom: 1px solid #e1e9f2;
}

.report-table td {
  color: #13213a;
  font-size: 15px;
  line-height: 1.3;
  padding: 14px 16px;
  border-bottom: 1px solid #e2eaf3;
  vertical-align: middle;
}

.report-table tbody tr:last-child td {
  border-bottom: 0;
}

.report-id {
  color: #22344f;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* The client's status colours, filled with black text as on the PDF report. */
.status-normal {
  color: #000000;
  background: #00b050;
}

.status-monitor,
.status-caution {
  color: #000000;
  background: #ffff00;
}

.status-critical {
  color: #000000;
  background: #ff0000;
}

.report-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.report-btn:hover {
  transform: translateY(-1px);
}

.report-btn-primary {
  color: #fff;
  background: #0784bf;
  border: 1px solid #0778ad;
  box-shadow: 0 6px 14px rgba(7, 132, 191, 0.2);
}

.report-btn-primary:hover {
  background: #006fa5;
  color: #fff;
}

.empty-reports {
  padding: 24px 18px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.report-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.report-pagination nav {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.report-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.report-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.report-pagination .page-item.active .page-link {
  background: #003366;
  border-color: #003366;
  color: #ffffff;
}

.report-pagination .page-item.disabled .page-link {
  opacity: 0.45;
  cursor: not-allowed;
}
.client-report-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 46px;
}

.client-report-sidebar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.client-report-menu-item {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 14px;
    color: #334155;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 12px;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.client-report-menu-item:hover {
    color: #075985;
    background: #f0f9ff;
    border-color: #bae6fd;
    transform: translateX(2px);
}

.client-report-menu-item.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-color: #0284c7;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.22);
}

.client-report-menu-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    border-radius: 10px;
}

.client-report-menu-item.is-active .client-report-menu-icon {
    color: #075985;
    background: #ffffff;
}

.client-report-menu-item strong,
.client-report-menu-item small {
    display: block;
}

.client-report-menu-item strong {
    margin-bottom: 3px;
    font-size: 14px;
    line-height: 1.25;
}

.client-report-menu-item small {
    font-size: 11px;
    line-height: 1.45;
    color: #64748b;
}

.client-report-menu-item.is-active small {
    color: rgba(255, 255, 255, 0.78);
}

.client-report-content {
    min-width: 0;
}

.client-content-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.client-content-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #0284c7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.client-content-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.2;
}

.client-content-header p {
    max-width: 660px;
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.report-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.memo-filter-form {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e6edf5;
    border-radius: 8px;
}

.memo-filter-controls {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.memo-filter-form label {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.memo-filter-form input[type="date"],
.memo-filter-form select,
.report-filter-form select {
    min-height: 38px;
    padding: 0 12px;
    color: #13213a;
    border: 1px solid #d7e1ec;
    border-radius: 6px;
    background: #ffffff;
}

.memo-export-btn {
    margin-left: auto;
}

/* PO and validity are the same for every memo on the selected sample date, so they sit
   above the table rather than in a column of their own. */
.memo-summary {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e6edf5;
    border-left: 4px solid #003366;
    border-radius: 8px;
}

.memo-summary-note {
    margin: 0;
    color: #334155;
    font-size: 14px;
    font-style: italic;
}

.memo-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 8px;
    color: #13213a;
    font-size: 14px;
}

.memo-summary-meta strong {
    color: #003366;
    font-weight: 800;
}


.memo-type {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    color: #075985;
    font-size: 12px;
    font-weight: 700;
    background: #e0f2fe;
    border-radius: 999px;
}

/* One sample row can carry an LCR and an MCR; each is shown as a type + rating pair. */
.report-type-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}


.action-unavailable {
    color: #94a3b8;
    font-size: 13px;
}

.graphs-toolbar {
    margin-bottom: 18px;
}

.graphs-filter-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e6edf5;
    border-radius: 8px;
}

.graphs-filter-field {
    display: grid;
    gap: 6px;
}

.graphs-filter-field label {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.graphs-filter-field input[type="date"],
.graphs-filter-field input[type="month"] {
    min-height: 38px;
    padding: 0 12px;
    color: #13213a;
    border: 1px solid #d7e1ec;
    border-radius: 6px;
    background: #ffffff;
}

.graphs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.graph-card {
    min-width: 0;
    padding: 34px 34px 30px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.13);
}

.graph-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    min-height: 104px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #dfe7ef;
}

.graph-card h4 {
    margin: 0;
    max-width: 360px;
    color: #001338;
    font-size: 28px;
    line-height: 1.55;
    font-weight: 900;
    letter-spacing: 0;
}

.graph-card-actions {
    display: grid;
    justify-items: start;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 132px;
    color: #7185a0;
    font-size: 16px;
    line-height: 1.4;
}

.graph-export-button {
    min-height: 33px;
    padding: 0 16px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: #08142d;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.graph-export-button:hover {
    background: #0f2858;
    transform: translateY(-1px);
}

.graph-canvas-wrapper {
    position: relative;
    height: 300px;
}

.graphs-empty-note {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 14px;
}

.client-user-card {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.client-user-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.client-user-field {
    min-width: 0;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e6edf5;
    border-radius: 8px;
}

.client-user-field span,
.client-password-field label {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.client-user-field strong {
    display: block;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.5;
}

.client-password-form {
    padding-top: 20px;
    border-top: 1px solid #e6edf5;
}

.client-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.client-password-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: #13213a;
    border: 1px solid #d7e1ec;
    border-radius: 6px;
    background: #ffffff;
}

.client-form-message {
    margin-bottom: 14px;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
}

.client-form-message.is-success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.client-field-error {
    display: block;
    margin-top: 6px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .client-report-layout {
        grid-template-columns: 1fr;
    }

    .client-report-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .client-report-menu-item {
        align-items: flex-start;
    }

    .client-report-menu-item:hover {
        transform: none;
    }

    .graphs-grid {
        grid-template-columns: 1fr;
    }

    .graph-card h4 {
        max-width: none;
    }

    .client-user-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .client-report-sidebar {
        grid-template-columns: 1fr;
    }

    .client-content-header h3 {
        font-size: 23px;
    }

    .graph-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .graph-card-header {
        display: grid;
        min-height: 0;
        gap: 14px;
    }

    .graph-card h4 {
        font-size: 23px;
        line-height: 1.35;
    }

    .graph-canvas-wrapper {
        height: 260px;
    }

    .client-password-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
  .report-table-card {
    margin-top: 20px;
    border-radius: 6px;
  }

  .report-table {
    min-width: 720px;
  }

  .report-table th,
  .report-table td {
    padding: 13px 14px;
  }

  .report-table th {
    font-size: 13px;
  }

  .report-table td {
    font-size: 14px;
  }

  .report-btn {
    min-height: 36px;
    padding: 0 13px;
    font-size: 11px;
  }
}

/* Client portal tables (Reports, Consolidated Memo): a table while the content column
   can hold every column, a stack of labelled cards below that, so the Reports chips
   and View & Download never sit past the card's edge behind a sideways scroll.
   Sized on the content column, not the viewport — on a desktop the sidebar takes
   288px of it. Browsers without container queries keep the scrolling table. */
.client-report-content {
  container: client-content / inline-size;
}

@container client-content (max-width: 840px) {
  .report-table-card,
  .report-table-scroll {
    overflow: visible;
  }

  .report-table-card {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .report-table {
    min-width: 0;
  }

  .report-table,
  .report-table tbody,
  .report-table tr,
  .report-table td {
    display: block;
    width: 100%;
  }

  /* The column headings move into each cell's label; kept for screen readers. */
  .report-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* One card per row on a phone, two side by side once there is room. */
  .report-table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
  }

  .report-table tr {
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  .report-table td,
  .report-table tbody tr:last-child td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef2f7;
  }

  .report-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .report-table tbody tr td:last-child {
    border-bottom: 0;
  }

  .report-table td.report-action-cell,
  .report-table td.empty-reports {
    display: block;
  }

  .report-table td.report-action-cell::before,
  .report-table td.empty-reports::before {
    content: none;
  }

  .report-table td.report-action-cell {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .report-action-cell .report-actions {
    display: block;
  }

  .report-action-cell .report-btn {
    display: flex;
    width: 100%;
  }

  .report-table td.empty-reports {
    text-align: center;
  }
}

/* The unit under "Welcome Back, <client>" on the client dashboard. */
.client-welcome-unit {
  margin: -6px 0 16px;
  color: var(--amber);
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
}

/* Contact form: the reason a send failed, shown at the top of the form. The page
   comes back scrolled to #contact-form; the margin keeps it clear of the fixed nav. */
.contact-form {
  scroll-margin-top: 110px;
}

.form-errors {
  margin-bottom: 20px;
  padding: 14px 16px;
  color: #7f1d1d;
  font-size: 0.9rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 8px;
}

.form-errors-title {
  margin-bottom: 6px;
  font-weight: 700;
}

.form-errors ul {
  margin: 0 0 6px;
  padding-left: 18px;
  list-style: disc;
}

.form-errors-note {
  margin: 0;
  font-size: 0.85rem;
}

.form-field-error {
  display: block;
  margin-top: 6px;
  color: #b91c1c;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ===== Brochures: the Resources page, the Home page band, the Services cards'
   brochure links and the client portal's Resources tab (frontend/partials/
   documents-section, document-card; partials/client/resources). ===== */
.res-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.res-filter {
  padding: 8px 18px;
  border: 1px solid #dce5ef;
  border-radius: 30px;
  background: #fff;
  color: var(--navy3);
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--t);
}

.res-filter span {
  margin-left: 6px;
  color: #94a3b8;
}

.res-filter:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.res-filter.is-active {
  border-color: var(--amber);
  background: var(--amber);
  color: #fff;
}

.res-filter.is-active span {
  color: rgba(255, 255, 255, 0.75);
}

.res-group {
  margin-bottom: 40px;
  scroll-margin-top: 110px;
}

.res-group:last-child {
  margin-bottom: 0;
}

.res-group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.res-group-head h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}

.res-group-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.res-group-head::after {
  content: "";
  flex: 1;
  height: 1px;
  align-self: center;
  background: #dce5ef;
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.res-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.res-card {
  display: flex;
  gap: 20px;
  padding: 18px;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.res-cover {
  flex: none;
  width: 100px;
  height: 141px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.res-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.res-cover--blank {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #eef4fa, #dbe7f3);
  color: var(--amber);
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.res-card--feature {
  gap: 30px;
  padding: 22px 28px;
  align-items: center;
}

.res-card--feature .res-cover {
  width: 130px;
  height: 184px;
}

.res-card--feature .res-title {
  font-size: 1.55rem;
}

.res-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.res-meta {
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.res-title {
  margin: 4px 0 5px;
  font-family: "Outfit", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
}

.res-desc {
  margin: 0 0 12px;
  color: #526074;
  font-size: 0.86rem;
  line-height: 1.6;
}

.res-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 14px;
}

.res-highlights li {
  padding: 3px 10px;
  border-radius: 6px;
  background: #eef4fa;
  color: var(--navy3);
  font-size: 0.78rem;
  font-weight: 600;
}

.res-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.res-btn {
  padding: 8px 14px;
  font-size: 0.75rem;
}

.res-btn svg,
.res-search svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.res-empty {
  padding: 30px;
  border: 2px dashed #c7d3e0;
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

/* The Home page's company brochure. */
.res-band {
  background: var(--grad);
  color: #fff;
}

.res-band .badge {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.res-band-inner {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.res-band-cover {
  justify-self: center;
  width: 190px;
  height: 268px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  transform: rotate(-3deg);
}

.res-band-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.res-band-cover span {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--amber);
  font-family: "Outfit", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
}

.res-band-sub {
  max-width: 560px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.02rem;
}

.res-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.res-btn--outline-light {
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}

.res-btn--outline-light:hover {
  border-color: #fff;
  transform: translateY(-2px);
}

.res-band-meta {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
}

/* The client portal's Resources tab. */
.res-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.res-tab {
  padding: 9px 16px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}

.res-tab span {
  margin-left: 6px;
  opacity: 0.6;
}

.res-tab.is-active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.res-grid--portal {
  grid-template-columns: minmax(0, 1fr);
}

.res-wear-card {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.res-wear-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.res-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  max-width: 340px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cfdae6;
  border-radius: 10px;
  color: #94a3b8;
}

.res-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
}

.res-wear-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.res-wear-table th {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.res-wear-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
}

.res-wear-element {
  width: 180px;
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}

.res-wear-element span {
  display: inline-block;
  min-width: 30px;
  margin-right: 8px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.res-wear-source {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 1px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: var(--navy3);
  font-size: 12px;
}

.res-wear-none td {
  padding: 18px 12px;
  color: var(--muted);
  text-align: center;
}

/* Header sizing. Ten links share the bar with the logo, its tagline and Get a Quote, so the
   bar is sized in three steps, each measured in Chrome at the narrowest screen it covers
   (a scrollbar's 16px and the navbar's 24px padding each side come off the screen width):

   - 1500px and wider, the full 1440px bar: 0.86rem links 18px apart.
   - 1350-1499px: 0.8rem links 13px apart.
   - 1261-1349px: 0.76rem links 10px apart, a smaller tagline and button.
   - 1260px and narrower: the menu goes behind the hamburger.

   Every step is full, so a longer link label, or an eleventh link, will not fit: measure it
   at the narrowest width of each step, logged out and logged in as a client. */
.navbar {
  --nav-side-gap: 32px;
  --nav-link-gap: 18px;
  --nav-link-size: 0.86rem;
  --nav-tagline-size: 0.72rem;
  --nav-btn-size: 0.88rem;
  --nav-btn-pad: 12px 20px;
}

@media (max-width: 1499px) {
  .navbar {
    --nav-side-gap: 22px;
    --nav-link-gap: 13px;
    --nav-link-size: 0.8rem;
    --nav-tagline-size: 0.68rem;
    --nav-btn-size: 0.8rem;
    --nav-btn-pad: 10px 16px;
  }
}

@media (max-width: 1349px) {
  .navbar {
    --nav-side-gap: 16px;
    --nav-link-gap: 10px;
    --nav-link-size: 0.76rem;
    --nav-tagline-size: 0.64rem;
    --nav-btn-size: 0.76rem;
    --nav-btn-pad: 9px 14px;
  }
}

/* With a client logged in the bar carries eleven items (Dashboard and a Logout icon in
   place of Client Login), so the links close up a little at every step. */
.navbar.navbar--client {
  --nav-link-gap: 14px;
}

@media (max-width: 1499px) {
  .navbar.navbar--client {
    --nav-link-gap: 11px;
  }
}

@media (max-width: 1349px) {
  .navbar.navbar--client {
    --nav-link-gap: 8px;
  }
}

.nav-links a {
  white-space: nowrap;
}

.navbar .btn {
  padding: var(--nav-btn-pad);
  font-size: var(--nav-btn-size);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1260px) {
  .nav-links,
  .navbar .btn {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

/* Card grids. Three columns leave a card alone on the last row of four, seven or eight
   cards, so those take four columns on a wide screen, where the 1440px site width gives
   each ~340px, and four cards take two columns below that. Other counts keep three. */
@media (min-width: 1281px) {

  .services-grid.cards-count-4,
  .services-grid.cards-count-7,
  .services-grid.cards-count-8,
  .ind-grid.cards-count-4,
  .ind-grid.cards-count-7,
  .ind-grid.cards-count-8 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {

  .services-grid.cards-count-4,
  .ind-grid.cards-count-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .res-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .res-band-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .res-band-cover {
    width: 150px;
    height: 212px;
  }
}

@media (max-width: 680px) {
  .res-card,
  .res-card--feature {
    gap: 14px;
    padding: 14px;
    align-items: flex-start;
  }

  .res-cover,
  .res-card--feature .res-cover {
    width: 76px;
    height: 107px;
  }

  .res-card--feature .res-title {
    font-size: 1.2rem;
  }

  /* View and Download side by side in the narrow column beside the cover. */
  .res-actions {
    gap: 8px;
  }

  .res-btn {
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.68rem;
  }

  .res-group-head p {
    display: none;
  }

  .res-wear-element {
    width: auto;
  }
}