/* ==========================================================================
   Al Bariq AlFedhi Contracting Est. - Components
   ==========================================================================
   1.  Buttons
   2.  Badges, chips & tags
   3.  Media placeholder (stand-in until real photography is supplied)
   4.  Header / brand / desktop nav
   5.  Mobile navigation
   6.  Hero
   7.  Page header (inner pages)
   8.  Cards: service, equipment, project, industry, value
   9.  Feature rows & stat strip
   10. Filter bar
   11. CTA banner
   12. Contact blocks
   13. Forms
   14. Modal / lightbox
   15. Toast
   16. Footer
   17. Back to top
   18. Notice panel
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: 48px;               /* touch-friendly on every breakpoint */
  padding-inline: 1.5rem;
  padding-block: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition:
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.btn .icon { inline-size: 1.05em; block-size: 1.05em; }

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Primary - navy */
.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  box-shadow: var(--shadow-sm);
}

/* Accent - gold, reserved for the single most important CTA on a view */
.btn--accent {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-ink);
  box-shadow: var(--shadow-xs);
}

.btn--accent:hover {
  background: #b98b3f;
  border-color: #b98b3f;
}

/* Outline on light backgrounds */
.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--navy);
}

.btn--outline:hover {
  border-color: var(--navy);
  background: var(--navy-tint);
}

/* Outline on dark backgrounds */
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--white);
  backdrop-filter: blur(2px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--white);
}

.btn--white {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

.btn--white:hover { background: var(--surface-alt); }

.btn--sm {
  min-block-size: 40px;
  padding-inline: 1.05rem;
  padding-block: 0.5rem;
  font-size: var(--fs-xs);
}

.btn--lg {
  min-block-size: 54px;
  padding-inline: 1.9rem;
  font-size: var(--fs-body);
}

.btn--block { display: flex; inline-size: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.btn-row--center { justify-content: center; }

/* Text link with arrow ---------------------------------------------------- */
/* Used as both <a> and <button>, so the button chrome is reset explicitly. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  background: none;
  border: 0;
  text-align: start;
}

.link-arrow .icon {
  inline-size: 1em;
  block-size: 1em;
  transition: transform var(--t-base) var(--ease);
}

.link-arrow:hover { color: var(--steel); }
.link-arrow:hover .icon { transform: translateX(4px); }

[dir="rtl"] .link-arrow:hover .icon { transform: translateX(-4px); }

.section--dark .link-arrow { color: var(--gold); }

/* --------------------------------------------------------------------------
   2. Badges, chips & tags
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  background: var(--navy-tint);
  color: var(--navy);
  white-space: nowrap;
}

.badge--gold  { background: var(--gold-soft); color: #7a5a1e; }
.badge--muted { background: var(--surface-sunken); color: var(--muted); }

.badge--outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--muted);
}

/* Fact chips - only ever carry information confirmed by the company. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

.chip .icon {
  inline-size: 1em;
  block-size: 1em;
  color: var(--gold);
}

.chip--light {
  background: var(--white);
  border-color: var(--border);
  color: var(--charcoal);
}

.chip--light .icon { color: var(--steel); }

/* --------------------------------------------------------------------------
   3. Media placeholder
   --------------------------------------------------------------------------
   No photography has been supplied yet. Rather than ship stock imagery or
   broken <img> tags, every image slot renders this deliberate navy panel.
   Swap it for a real <img> using the recipe in README.md.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  border-radius: var(--r-md);
  isolation: isolate;
}

.media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.media--16x9  { aspect-ratio: 16 / 9; }
.media--4x3   { aspect-ratio: 4 / 3; }
.media--3x2   { aspect-ratio: 3 / 2; }
.media--1x1   { aspect-ratio: 1 / 1; }
.media--tall  { aspect-ratio: 3 / 4; }

.media-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: var(--space-lg);
  text-align: center;
  background:
    var(--blueprint),
    linear-gradient(145deg, var(--navy) 0%, var(--navy-ink) 100%);
}

/* Faint gear watermark echoing the ABFC mark. */
.media-ph::before {
  content: "";
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -14%;
  inline-size: 58%;
  aspect-ratio: 1;
  border: 14px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.media-ph__icon {
  inline-size: 34px;
  block-size: 34px;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.4;
  fill: none;
}

.media-ph__label {
  position: relative;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  max-inline-size: 26ch;
}

.media-ph__note {
  position: relative;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

/* --------------------------------------------------------------------------
   4. Masthead: utility bar + white header
   --------------------------------------------------------------------------
   The masthead is a fixed two-part stack:

     .preheader    slim navy utility bar - contact details and social links
     .header__main white header - logo, navigation, primary CTA

   The header is solid white at all times. That is what lets the supplied logo
   sit directly on it: both logo files have an opaque near-white background
   (#FEFEFE), so on a white bar they read as transparent with no plaque, box or
   retouching of the artwork.

   The utility bar sits in normal flow and scrolls away; only the white header
   is pinned, with `position: sticky`. Sticky rather than fixed means the
   header occupies real space in the layout, so no section below needs to
   offset itself against a header height that changes per breakpoint.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 var(--border);
  transition: box-shadow var(--t-base) var(--ease);
}

.site-header.is-stuck { box-shadow: var(--shadow-md); }

/* Utility bar ------------------------------------------------------------ */
.preheader {
  background: var(--navy-ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-xs);
}

.preheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  block-size: var(--preheader-h);
}

.preheader__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 clamp(0.9rem, 0.4rem + 1.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.preheader__contact li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.preheader__contact .icon {
  inline-size: 15px;
  block-size: 15px;
  color: var(--gold);
}

.preheader__contact a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}

.preheader__contact a:hover { color: var(--gold); }

/* Phone and email are Latin-script even in an RTL layout. */
.preheader__ltr { direction: ltr; unicode-bidi: isolate; }

/* Shown on the right only while no social profile URLs are configured, so
   the bar is never lopsided. */
.preheader__cr {
  flex: none;
  margin: 0;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* Social links ----------------------------------------------------------- */
.social-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: none;
}

.social-list__link {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.social-list__link .icon { inline-size: 16px; block-size: 16px; }

.social-list__link:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

/* Footer variant sits on the same navy, but with more breathing room. */
.site-footer .social-list { gap: 0.25rem; }

/* In the bottom bar it sits beside the copyright line, so it needs no
   top margin of its own. */
.footer__bottom .social-list { margin-block: 0; }

.site-footer .social-list__link {
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* White header ----------------------------------------------------------- */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-block-size: var(--header-h);
  transition: min-block-size var(--t-base) var(--ease);
}

.site-header.is-stuck .header__inner { min-block-size: calc(var(--header-h) - 8px); }

/* Brand ------------------------------------------------------------------ */
/* The logo sits directly on the white header - no plaque, no box, no border.
   The artwork's own background is #FEFEFE, which is indistinguishable from
   the header's white at any size, so the mark reads as if it were cut out
   without a single pixel of the supplied file being altered. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

/* The supplied artwork is 1750x450, so it is a wide, shallow lockup - roughly
   3.9:1. A height that would suit a squarer mark leaves this one looking
   undersized, hence the generous block-size and the taller header to hold it. */
.brand__logo {
  block-size: 68px;
  inline-size: auto;
  transition: block-size var(--t-base) var(--ease);
}

.site-header.is-stuck .brand__logo { block-size: 56px; }

/* Desktop nav ------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.1rem + 0.9vw, 1.1rem);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--charcoal);
  white-space: nowrap;
  transition: color var(--t-base) var(--ease);
}

.nav__link:hover { color: var(--navy); }

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0.15rem;
  inset-inline-start: 0.35rem;
  inline-size: 0;
  block-size: 2px;
  background: var(--gold);
  transition: inline-size var(--t-base) var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current]::after {
  inline-size: calc(100% - 0.7rem);
}

/* "page" is the page itself; "true" is a page inside that section, which is
   how the six service pages keep Services lit. */
.nav__link[aria-current] { color: var(--navy); }

/* Services dropdown --------------------------------------------------------
   The link still goes to the services index; the caret beside it opens the
   six service pages. Hover and focus-within open it for pointer and keyboard
   users, and the button's aria-expanded / .is-open covers touch and screen
   readers, so the menu is never reachable only one way. */
.nav__group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__caret {
  display: grid;
  place-items: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--border-strong);
  cursor: pointer;
  transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.nav__caret .icon { inline-size: 14px; block-size: 14px; }

.nav__group:hover .nav__caret,
.nav__caret:hover { color: var(--navy); }

.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret,
.nav__group.is-open .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline-start: 0;
  z-index: 60;
  min-inline-size: 15.5rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility var(--t-base) var(--ease);
}

/* Invisible bridge across the gap, so the menu does not close while the
   pointer travels from the caret down to the first item. */
.nav__sub::before {
  content: "";
  position: absolute;
  inset-block-start: -0.6rem;
  inset-inline: 0;
  block-size: 0.6rem;
}

.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub,
.nav__group.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__sub a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--charcoal);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav__sub a:hover,
.nav__sub a:focus-visible { background: var(--navy-tint); color: var(--navy); }

.nav__sub a[aria-current="page"] { color: var(--navy); background: var(--navy-tint); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}

/* Hamburger --------------------------------------------------------------- */
.nav-toggle {
  display: none;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--navy);
}

.nav-toggle:hover {
  background: var(--navy-tint);
  border-color: var(--navy);
}

.nav-toggle__bars {
  position: relative;
  inline-size: 20px;
  block-size: 14px;
}

.nav-toggle__bars span {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle__bars span:nth-child(1) { inset-block-start: 0; }
.nav-toggle__bars span:nth-child(2) { inset-block-start: 6px; }
.nav-toggle__bars span:nth-child(3) { inset-block-start: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. Mobile navigation
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
  pointer-events: none;
}

.mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 26, 58, 0.55);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  border: 0;
  inline-size: 100%;
  padding: 0;
}

.mobile-nav.is-open .mobile-nav__scrim { opacity: 1; }

.mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(88vw, 400px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

[dir="rtl"] .mobile-nav__panel { transform: translateX(-100%); }

.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-block-end: 1px solid var(--border);
}

.mobile-nav__head .brand__logo { block-size: 46px; }

.mobile-nav__close {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--navy);
}

.mobile-nav__close:hover { background: var(--navy-tint); }

.mobile-nav__list {
  padding: var(--space-sm) var(--space-lg);
  margin: 0;
  list-style: none;
  flex: 1;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.95rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--navy-ink);
  text-decoration: none;
  border-block-end: 1px solid var(--border);
}

.mobile-nav__link .icon {
  color: var(--border-strong);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.mobile-nav__link:hover .icon,
.mobile-nav__link[aria-current] .icon { color: var(--gold); }

.mobile-nav__link[aria-current] { color: var(--navy); }

/* Services accordion in the drawer ----------------------------------------- */
.mobile-nav__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-block-end: 1px solid var(--border);
}

.mobile-nav__row .mobile-nav__link {
  flex: 1;
  border-block-end: 0;
}

.mobile-nav__caret {
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--border-strong);
  cursor: pointer;
  transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.mobile-nav__caret:hover { color: var(--navy); }

.mobile-nav__item.is-open .mobile-nav__caret {
  transform: rotate(180deg);
  color: var(--gold);
}

.mobile-nav__sub {
  display: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem var(--space-md);
  list-style: none;
}

.mobile-nav__item.is-open .mobile-nav__sub { display: block; }

.mobile-nav__sub a {
  display: block;
  padding-block: 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-block-end: 1px solid var(--border);
}

.mobile-nav__sub li:last-child a { border-block-end: 0; }

.mobile-nav__sub a:hover { color: var(--navy); }
.mobile-nav__sub a[aria-current="page"] { color: var(--navy); }

.mobile-nav__foot {
  padding: var(--space-lg);
  border-block-start: 1px solid var(--border);
  background: var(--surface-alt);
  display: grid;
  gap: var(--space-sm);
}

.mobile-nav__meta {
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.mobile-nav__meta a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* The sticky header sits above this in flow, so no offset is needed. */
  min-block-size: min(76vh, 700px);
  padding-block-start: clamp(3rem, 1.5rem + 6vw, 5.5rem);
  padding-block-end: clamp(3rem, 1.5rem + 6vw, 5.5rem);
  background: var(--navy-ink);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

/* Layered background: blueprint hatch + radial lift + diagonal wash.
   Replace with a real photograph via .hero__media (see README). */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    var(--blueprint),
    radial-gradient(120% 90% at 78% 12%, rgba(47, 93, 140, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-ink) 58%, #04122a 100%);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Scrim guarantees text contrast over any future photograph. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(7, 26, 58, 0.93) 0%,
    rgba(7, 26, 58, 0.82) 42%,
    rgba(7, 26, 58, 0.55) 100%
  );
}

/* Gold rule anchoring the hero to the section below. */
.hero::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: clamp(120px, 22vw, 320px);
  block-size: 4px;
  background: var(--gold);
}

/* Sits inside .container - it must not override the container's own
   max-width, or the auto margins would re-centre the whole block. */
.hero__inner {
  position: relative;
  max-inline-size: 48rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  margin-block-end: var(--space-lg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(196, 154, 82, 0.12);
  border: 1px solid rgba(196, 154, 82, 0.35);
  border-radius: var(--r-md);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--white);
}

.hero__title em {
  font-style: normal;
  color: var(--gold);
}

.hero__text {
  margin-block-start: var(--space-lg);
  max-inline-size: 54ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions { margin-block-start: var(--space-xl); }

.hero__meta {
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   7. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-header {
  position: relative;
  padding-block-start: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-block-end: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background:
    var(--blueprint),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-ink) 100%);
  color: var(--white);
  overflow: hidden;
}

.page-header::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: clamp(100px, 18vw, 260px);
  block-size: 4px;
  background: var(--gold);
}

.page-header h1 { color: var(--white); max-inline-size: 20ch; }

.page-header p {
  margin-block-start: var(--space-md);
  max-inline-size: 58ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.78);
}

/* The service pages carry a "Service 0X" eyebrow above the title. Without this
   the rule above wins on specificity and renders it at lead size in body white,
   which is not an eyebrow at all. */
.page-header .eyebrow {
  margin-block-start: 0;
  margin-block-end: var(--space-sm);
  max-inline-size: none;
  font-size: var(--fs-eyebrow);
  color: var(--gold);
}

/* Breadcrumb -------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.62);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--gold); }

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: 0.5rem;
  color: rgba(255, 255, 255, 0.35);
}

[dir="rtl"] .breadcrumb li + li::before { content: "\\"; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  flex: 1;
}

/* The body is a column flexbox, so inline children must not stretch. */
.card__body > .badge { align-self: flex-start; }

.card__title { font-size: var(--fs-h4); }

.card__text {
  font-size: var(--fs-sm);
  color: var(--muted);
  flex: 1;
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
  margin-block-start: auto;
  border-block-start: 1px solid var(--border);
}

/* Service card ------------------------------------------------------------ */
.service-card {
  position: relative;
  padding: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

/* Gold indicator that grows on hover - the only decorative flourish. */
.service-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 3px;
  background: var(--gold);
  transition: inline-size var(--t-slow) var(--ease-out);
}

.service-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.service-card:hover::before { inline-size: 100%; }

.service-card__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--space-xs);
  background: var(--navy-tint);
  border-radius: var(--r-md);
  color: var(--navy);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.service-card__icon .icon { inline-size: 26px; block-size: 26px; }

.service-card:hover .service-card__icon {
  background: var(--navy);
  color: var(--white);
}

.service-card__text {
  font-size: var(--fs-sm);
  color: var(--muted);
  flex: 1;
}

.service-card__list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--charcoal);
}

.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.service-card__list .icon {
  inline-size: 15px;
  block-size: 15px;
  margin-block-start: 0.22em;
  color: var(--gold);
}

/* Equipment card ---------------------------------------------------------- */
.equipment-card .media { border-radius: 0; }

.equipment-card__cat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
}

.equipment-card__title { font-size: 1.05rem; }

/* Equipment category tile (large, image-led) ------------------------------- */
.cat-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--white);
  min-block-size: 260px;
  isolation: isolate;
}

/* The media fills the whole tile, so its aspect-ratio must be dropped -
   otherwise it sizes to 4:3 and leaves the lower band of the tile uncovered. */
.cat-tile .media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

/* The tile already shows a title, so the placeholder inside it is reduced to a
   compact top-start marker instead of a second centred caption. */
.cat-tile .media-ph {
  place-content: start;
  justify-items: start;
  text-align: start;
  gap: 0.3rem;
}

.cat-tile .media-ph__label { display: none; }

.cat-tile .media-ph__icon { inline-size: 26px; block-size: 26px; }

.cat-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(7, 26, 58, 0.92) 0%,
    rgba(7, 26, 58, 0.35) 55%,
    rgba(7, 26, 58, 0.1) 100%
  );
  transition: background-color var(--t-base) var(--ease);
}

.cat-tile__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 100%;
  min-block-size: 260px;
  padding: var(--space-lg);
  gap: 0.3rem;
}

.cat-tile__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--white);
}

.cat-tile__count {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
}

.cat-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.cat-tile__cta .icon { transition: transform var(--t-base) var(--ease); }

.cat-tile:hover .cat-tile__cta .icon { transform: translateX(4px); }

[dir="rtl"] .cat-tile:hover .cat-tile__cta .icon { transform: translateX(-4px); }

/* Service pillar card (home page, image-led) -------------------------------
   Same construction as .cat-tile - picture fills the card, gradient over it,
   text on top - but taller, and it carries the service icon so the three
   cards still read as a set when no photography has been supplied yet. */
.pillar-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--white);
  min-block-size: 340px;
  isolation: isolate;
}

/* Two service lines rather than six categories: fewer cards, so each one is
   taller, and the summary beneath the title is a sentence rather than a
   tagline - the reserved two lines below would clip it. */
.pillar-card--wide { min-block-size: 420px; }
.pillar-card--wide .pillar-card__text { min-block-size: 0; }

/* The media fills the whole card, so its aspect-ratio must be dropped -
   otherwise it sizes to 4:3 and leaves the lower band uncovered. */
.pillar-card .media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.pillar-card .media img { transition: transform 600ms var(--ease); }

.pillar-card:hover .media img { transform: scale(1.04); }

/* The card states its own title, so the placeholder caption inside it would
   be a second, competing label. Hidden; the icon marker is enough. */
.pillar-card .media-ph { place-content: center; }

.pillar-card .media-ph__label,
.pillar-card .media-ph__note { display: none; }

.pillar-card .media-ph__icon {
  inline-size: 72px;
  block-size: 72px;
  opacity: 0.25;
}

.pillar-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(7, 26, 58, 0.94) 0%,
    rgba(7, 26, 58, 0.62) 45%,
    rgba(7, 26, 58, 0.22) 100%
  );
  transition: opacity var(--t-base) var(--ease);
}

.pillar-card:hover .pillar-card__overlay { opacity: 0.88; }

.pillar-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 100%;
  min-block-size: 340px;
  padding: var(--space-xl);
  gap: 0.4rem;
}

.pillar-card__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: var(--space-sm);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.pillar-card__icon .icon { inline-size: 24px; block-size: 24px; }

.pillar-card:hover .pillar-card__icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-ink);
}

.pillar-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

/* Two lines are reserved whether or not the tagline needs them. The content
   is bottom-aligned, so without this a tagline that wraps pushes its card's
   title up and the three titles stop lining up with each other. */
.pillar-card__text {
  min-block-size: 3em;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.pillar-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.pillar-card__cta .icon { transition: transform var(--t-base) var(--ease); }

.pillar-card:hover .pillar-card__cta .icon { transform: translateX(4px); }

[dir="rtl"] .pillar-card:hover .pillar-card__cta .icon { transform: translateX(-4px); }

/* Supporting services block (home page) ------------------------------------ */
.services-more {
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-2xl);
  border-block-start: 1px solid var(--border);
}

.services-more__title {
  margin-block-end: var(--space-xl);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.services-more__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-md);
}

/* Compact service row ------------------------------------------------------ */
.service-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

.service-row:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.service-row__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-sm);
  background: var(--navy-tint);
  color: var(--navy);
}

.service-row__icon .icon { inline-size: 20px; block-size: 20px; }

.service-row__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-inline-size: 0;
}

.service-row__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.service-row__text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
}

.service-row__chev {
  flex: none;
  align-self: center;
  color: var(--steel);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.service-row:hover .service-row__chev { color: var(--navy); transform: translateX(3px); }

[dir="rtl"] .service-row:hover .service-row__chev { transform: translateX(-3px); }

/* Service index card (services page) ---------------------------------------
   Keeps the base card's flex column - `display: block` here would kill it,
   and with it the auto margin that lines the "Read more" links up. */
.service-card--link {
  text-decoration: none;
  color: inherit;
}

/* Summaries differ in length, so push the link to the bottom of every card
   and the six links sit on a common line. */
.service-card--link .link-arrow { margin-block-start: auto; }

.service-card__num {
  position: absolute;
  inset-block-start: var(--space-lg);
  inset-inline-end: var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--border);
  transition: color var(--t-base) var(--ease);
}

.service-card--link:hover .service-card__num { color: var(--gold); }

/* Service detail sections (services page) ---------------------------------- */
.service-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* Anchored from the index above and from the footer, so the sticky header
   must not land on top of the heading. */
.service-detail {
  scroll-margin-block-start: calc(var(--header-h) + var(--space-xl));
}

.service-detail + .service-detail {
  padding-block-start: var(--space-3xl);
  border-block-start: 1px solid var(--border);
}

/* The copy column runs a good deal taller than a 4:3 picture, which left a
   dead gap under the image. Stretch the media to the height of the row
   instead; `object-fit: cover` on .media > img handles the crop once real
   photography replaces the placeholder. */
.service-detail .feature-row__media { align-self: stretch; }

.service-detail .media {
  block-size: 100%;
  aspect-ratio: auto;
  min-block-size: 20rem;
}

.service-detail__title {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  line-height: 1.2;
}

.service-detail__sub {
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Contact details band -----------------------------------------------------
   21rem holds this to three columns on a wide screen. A narrower minimum
   fits four, which strands the fifth card alone on its own row. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-grid .contact-item {
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
}

/* Industry card ----------------------------------------------------------- */
.industry-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.industry-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.industry-card__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  background: var(--navy);
  border-radius: var(--r-md);
  color: var(--white);
}

.industry-card__icon .icon { inline-size: 22px; block-size: 22px; }

.industry-card h3 { font-size: 1.05rem; margin-block-end: 0.3rem; }

.industry-card p { font-size: var(--fs-sm); color: var(--muted); }

/* Value / "why us" card --------------------------------------------------- */
.value-card {
  display: flex;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.value-card__num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  flex: none;
  padding-block-start: 0.25rem;
  min-inline-size: 2.4rem;
}

.value-card h3 {
  font-size: 1.02rem;
  color: var(--white);
  margin-block-end: 0.35rem;
}

.value-card p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
}

.value-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-list > li + li { border-block-start: 1px solid rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   9. Feature rows & fact strip
   -------------------------------------------------------------------------- */
.feature-row {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

/* Reverse visual order on wide screens only, so the DOM order stays logical. */
@media (min-width: 60em) {
  .feature-row--reverse > :first-child { order: 2; }
}

/* Form-led pages: columns of very different heights should align to the top
   rather than float in the middle of a tall row. */
.feature-row--top { align-items: start; }

/* Two cards side by side: stretch them to a single height so they line up top
   and bottom, whatever each one contains. The panels stay ordinary blocks, so
   their content still starts at the top and a shorter card simply carries more
   space under it. */
.feature-row--equal { align-items: stretch; }

@media (min-width: 62em) {
  .feature-row--wide-start { grid-template-columns: 1.45fr 1fr; }
}

.feature-row__media { position: relative; }

/* Offset accent frame behind the media block. */
.feature-row__media::before {
  content: "";
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 18px;
  inline-size: 100%;
  block-size: 100%;
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  z-index: -1;
  pointer-events: none;
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  background: var(--white);
}

.fact__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-ink);
  overflow-wrap: anywhere;
}

.fact__value--ltr { direction: ltr; unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   10. Filter bar
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
  min-inline-size: 0;
}

.filter-btn {
  padding: 0.5rem 0.95rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--charcoal);
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.filter-btn:hover {
  border-color: var(--steel);
  color: var(--navy);
}

/* Active state carries a check icon as well as colour (never colour alone). */
.filter-btn[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.filter-btn[aria-pressed="true"]::before {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-end: 0.45rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: 0.1em;
}

.filter-search {
  position: relative;
  flex: 0 1 260px;
  min-inline-size: 200px;
}

.filter-search .icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.75rem;
  transform: translateY(-50%);
  inline-size: 17px;
  block-size: 17px;
  color: var(--muted);
  pointer-events: none;
}

.filter-search input {
  inline-size: 100%;
  min-block-size: 44px;
  padding-block: 0.6rem;
  padding-inline: 2.4rem 0.9rem;
  font-size: var(--fs-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.filter-search input:focus-visible {
  background: var(--white);
  border-color: var(--navy);
}

.filter-status {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.filter-status strong { color: var(--navy-ink); }

.empty-state {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  background: var(--white);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--muted);
}

.empty-state .icon {
  inline-size: 30px;
  block-size: 30px;
  margin-inline: auto;
  margin-block-end: var(--space-sm);
  color: var(--border-strong);
}

/* --------------------------------------------------------------------------
   11. CTA banner
   -------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background:
    var(--blueprint),
    linear-gradient(115deg, var(--navy) 0%, var(--navy-ink) 100%);
  color: var(--white);
  overflow: hidden;
}

.cta-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.cta-banner__copy { max-inline-size: 56ch; }

.cta-banner h2 { color: var(--white); }

.cta-banner p {
  margin-block-start: var(--space-sm);
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   12. Contact blocks
   -------------------------------------------------------------------------- */
.contact-list {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.contact-item__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  background: var(--navy-tint);
  border-radius: var(--r-md);
  color: var(--navy);
}

.contact-item__icon .icon { inline-size: 20px; block-size: 20px; }

.contact-item__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 0.15rem;
}

.contact-item__value {
  font-weight: 600;
  color: var(--navy-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.contact-item__value:hover { color: var(--steel); }

.contact-item__value--ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Map embed slot ---------------------------------------------------------- */
.map-slot {
  position: relative;
  min-block-size: 320px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.map-slot iframe {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 320px;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--space-lg);
}

.form-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.field { display: grid; gap: 0.4rem; }

.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--charcoal);
}

.field .req {
  color: var(--danger);
  margin-inline-start: 0.15rem;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field textarea {
  min-block-size: 140px;
  resize: vertical;
  line-height: 1.6;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 18px;
  padding-inline-end: 2.5rem;
}

[dir="rtl"] .field select {
  background-position: left 0.85rem center;
  padding-inline-end: 0.9rem;
  padding-inline-start: 2.5rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: var(--focus-ring);
}

.field input::placeholder,
.field textarea::placeholder { color: #9aa4b2; }

/* Invalid state: red border AND an error message (never colour alone). */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--danger);
}

.field__error .icon { inline-size: 14px; block-size: 14px; }

.field__error.is-visible { display: flex; }

/* File upload placeholder ------------------------------------------------- */
.file-drop {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}

.file-drop .icon {
  inline-size: 24px;
  block-size: 24px;
  color: var(--steel);
  flex: none;
}

.file-drop__text {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.file-drop__text strong { display: block; color: var(--charcoal); font-size: var(--fs-sm); }

/* Checkbox ---------------------------------------------------------------- */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  color: var(--charcoal);
  cursor: pointer;
}

.check input[type="checkbox"] {
  inline-size: 20px;
  block-size: 20px;
  min-block-size: 0;
  margin-block-start: 0.18em;
  flex: none;
  accent-color: var(--navy);
  cursor: pointer;
}

/* Honeypot: hidden from humans, catches naive bots. */
.hp-field {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Form status message ----------------------------------------------------- */
.form-status {
  display: none;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}

.form-status.is-visible { display: flex; }

.form-status .icon { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 0.15em; }

.form-status--info {
  background: var(--navy-tint);
  border-color: #c5d2ea;
  color: var(--navy-deep);
}

.form-status--error {
  background: var(--danger-soft);
  border-color: #fbc8c3;
  color: var(--danger);
}

.form-status strong { display: block; margin-block-end: 0.15rem; }

/* Panel wrapper for forms ------------------------------------------------- */
.panel {
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.panel--flush { box-shadow: none; }

/* --------------------------------------------------------------------------
   14. Modal / lightbox
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  visibility: hidden;
  pointer-events: none;
}

.modal.is-open { visibility: visible; pointer-events: auto; }

.modal__scrim {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: rgba(7, 26, 58, 0.72);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.modal.is-open .modal__scrim { opacity: 1; }

.modal__dialog {
  position: relative;
  inline-size: min(100%, 720px);
  max-block-size: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.modal.is-open .modal__dialog {
  opacity: 1;
  transform: none;
}

.modal__close {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--navy-ink);
}

.modal__close:hover { background: var(--surface-alt); }

.modal__body {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  overflow-y: auto;
  display: grid;
  gap: var(--space-md);
}

.modal__body .media { margin-block-end: var(--space-xs); }

.modal__meta {
  display: grid;
  gap: 0.6rem;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.modal__meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.modal__meta dt {
  font-weight: 700;
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-inline-size: 9rem;
}

.modal__meta dd { margin: 0; color: var(--charcoal); }

/* --------------------------------------------------------------------------
   15. Toast
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--space-lg);
  z-index: 140;
  display: grid;
  gap: var(--space-xs);
  max-inline-size: min(92vw, 380px);
  pointer-events: none;
}

.toast {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  background: var(--navy-ink);
  color: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: toast-in var(--t-slow) var(--ease-out);
}

.toast .icon { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 0.15em; color: var(--gold); }

.toast--error { background: var(--danger); }
.toast--error .icon { color: var(--white); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-ink);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
}

/* Four columns: brand, links, contact, Vision 2030.
   `align-items: start` is what puts the three column headings on one line -
   without it the columns stretch and their contents drift apart. */
.footer__top {
  display: grid;
  align-items: start;
  gap: clamp(2rem, 1.4rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem);
}

@media (min-width: 62em) {
  /* minmax(0, ...) so a long line can never push a track past its share. */
  .footer__top {
    grid-template-columns:
      minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

/* Wide screens: the contact column is sized to its own content, which is what
   lets the address sit on a single line without squeezing its neighbours. */
@media (min-width: 75em) {
  .footer__top {
    grid-template-columns:
      minmax(0, 1.5fr) minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

.footer__col--brand { max-inline-size: 34ch; }

/* The brand column has no heading, so the logo would sit higher than the
   three headings beside it. This drops it onto the same optical line. */
@media (min-width: 62em) {
  .footer__col--brand { padding-block-start: 0.15rem; }
}

/* No plaque here either. The footer uses the supplied knockout file
   assets/logo/abfc-white-logo.png, which is already transparent, so the logo
   sits directly on the navy with no white box behind it. */
.footer__logo {
  display: block;
  block-size: 64px;
  inline-size: auto;
  max-inline-size: 100%;
  margin-block-end: var(--space-md);
}

/* Saudi Vision 2030. Supplied transparent, and its grey wordmark clears
   contrast against the navy, so it needs no light chip behind it either. */
.footer__vision {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 170px;
  opacity: 0.92;
}

.footer__about {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}

.footer h2,
.footer__heading {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
  margin-block-end: var(--space-md);
}

.footer__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.footer__list a:hover { color: var(--gold); }

.footer__contact {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__contact li { display: flex; gap: 0.7rem; align-items: flex-start; }

/* One line on wide screens; it may wrap below that, where there is no room. */
@media (min-width: 75em) {
  .footer__address { white-space: nowrap; }
}

.footer__contact .icon {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  margin-block-start: 0.2em;
  color: var(--gold);
}

.footer__contact a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.footer__contact a:hover { color: var(--gold); }

/* Quick Links and Contact are read across as much as down: row two of one
   sits beside row two of the other. They shared a heading line but not a
   rhythm - 0.6rem against 1rem - so every row drifted a few pixels further
   out of line than the one above it, which is exactly what the eye picks up
   in a footer. One pitch for both lists removes the drift, and tightens the
   five links at the same time. Change it here and both columns follow. */
.footer__list,
.footer__contact {
  row-gap: var(--footer-row-gap);
  line-height: 1.45;
}

.footer__ltr { direction: ltr; unicode-bidi: isolate; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.52);
}

.footer__bottom a { color: rgba(255, 255, 255, 0.66); text-decoration: none; }
.footer__bottom a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   17. Back to top
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  inset-block-end: var(--space-lg);
  /* End rather than start: the footer brand column and the Vision 2030 mark
     both sit at the start edge, and a fixed button there lands on top of
     them once the page is scrolled to the bottom. */
  inset-inline-end: var(--space-lg);
  z-index: 90;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  background: var(--navy);
  border: 1px solid var(--navy-deep);
  border-radius: var(--r-md);
  color: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility var(--t-base),
    background-color var(--t-base) var(--ease);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover { background: var(--navy-deep); }

/* --------------------------------------------------------------------------
   18. Notice panel
   --------------------------------------------------------------------------
   Used wherever content is genuinely pending from the company, so a visitor
   is never shown invented information.
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--navy-tint);
  border: 1px solid #c5d2ea;
  border-inline-start: 3px solid var(--navy);
  border-radius: var(--r-md);
}

.notice .icon {
  inline-size: 21px;
  block-size: 21px;
  flex: none;
  margin-block-start: 0.15em;
  color: var(--navy);
}

.notice h3 {
  font-size: var(--fs-h4);
  margin-block-end: 0.3rem;
}

.notice p { font-size: var(--fs-sm); color: var(--steel); }

.notice--gold {
  background: #fdf8ef;
  border-color: #ecdcc0;
  border-inline-start-color: var(--gold);
}

.notice--gold .icon { color: #a9781f; }
.notice--gold p { color: #7a5a1e; }

/* Definition list used for "at a glance" blocks ---------------------------- */
.spec-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-block-start: 1px solid var(--border);
}

.spec-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; font-weight: 600; color: var(--navy-ink); text-align: end; }

/* ==========================================================================
   19. Spacing utilities
   ==========================================================================
   Declared last on purpose. Components above reset `margin: 0` on lists and
   definition lists; a utility of equal specificity only wins if it comes
   afterwards in the cascade.
   ========================================================================== */
.mt-lg  { margin-block-start: var(--space-lg); }
.mt-xl  { margin-block-start: var(--space-xl); }
.mt-2xl { margin-block-start: var(--space-2xl); }