@charset "utf-8";
/* ==========================================================================
   Rafee Elbatran & Co. - brand theme for Bootstrap 5.3.8
   Loaded AFTER bootstrap.min.css. Overrides Bootstrap's CSS custom properties
   and adds the components Bootstrap does not ship.
   Brand colour #005d7f sampled from the firm's own logo artwork.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens + Bootstrap variable overrides
   -------------------------------------------------------------------------- */
:root {
  --rb-900: #002d40;
  --rb-800: #00405a;
  --rb-700: #005d7f;
  --rb-600: #006c92;
  --rb-500: #0782ac;
  --rb-050: #eef6fa;
  --rb-025: #f7fbfd;

  --rb-accent-600: #8a6520;
  --rb-accent-500: #a8802c;
  --rb-accent-300: #c9a765;

  --rb-ink-900: #101820;
  --rb-ink-700: #33424f;
  --rb-ink-600: #4d5e6c;
  --rb-ink-500: #6b7c8a;
  --rb-ink-100: #e8edf1;
  --rb-ink-050: #f4f7f9;

  --rb-head: "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* Navbar field, sampled from the logo master */
  --rb-bar-on: #e2c791;   /* active-tab gold: 3.79:1 on the bar's lightest point */
  --rb-bar-dark: #024d6b;
  --rb-bar-mid: #02627a;
  --rb-bar-light: #046a80;

  /* --- Bootstrap overrides --- */
  --bs-primary: #005d7f;
  --bs-primary-rgb: 0, 93, 127;
  --bs-link-color: #005d7f;
  --bs-link-color-rgb: 0, 93, 127;
  --bs-link-hover-color: #00405a;
  --bs-link-hover-color-rgb: 0, 64, 90;

  --bs-body-color: #1d2833;
  --bs-body-color-rgb: 29, 40, 51;
  --bs-body-bg: #ffffff;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;

  --bs-border-color: #e8edf1;
  --bs-border-radius: .25rem;
  --bs-border-radius-lg: .5rem;

  --bs-emphasis-color: #101820;
  --bs-secondary-color: rgba(29, 40, 51, .68);

  --rb-section-y: clamp(3.5rem, 7vw, 6.5rem);
  --rb-tap: 44px;
}

/* Bootstrap's .btn-primary reads these */
.btn-primary {
  --bs-btn-bg: var(--rb-700);
  --bs-btn-border-color: var(--rb-700);
  --bs-btn-hover-bg: var(--rb-800);
  --bs-btn-hover-border-color: var(--rb-800);
  --bs-btn-active-bg: var(--rb-900);
  --bs-btn-active-border-color: var(--rb-900);
  --bs-btn-disabled-bg: var(--rb-700);
  --bs-btn-disabled-border-color: var(--rb-700);
}
.btn-outline-primary {
  --bs-btn-color: var(--rb-700);
  --bs-btn-border-color: var(--rb-700);
  --bs-btn-hover-bg: var(--rb-700);
  --bs-btn-hover-border-color: var(--rb-700);
  --bs-btn-active-bg: var(--rb-800);
}
.btn-light {
  --bs-btn-color: var(--rb-800);
  --bs-btn-hover-color: var(--rb-900);
}
.btn { font-weight: 600; min-height: var(--rb-tap); display: inline-flex;
       align-items: center; justify-content: center; gap: .45rem; }

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
/* Clear the sticky header when jumping to an anchor (e.g. /industries/#...) */
[id] { scroll-margin-top: 8.5rem; }

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--rb-head);
  font-weight: 600;
  color: var(--rb-ink-900);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }
h2, .h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); }
h4, .h4 { font-size: 1.0625rem; font-family: var(--bs-body-font-family); font-weight: 700; }

.lead { font-size: clamp(1.09rem, 1.02rem + .35vw, 1.28rem); color: var(--rb-ink-700); line-height: 1.6; }

::selection { background: var(--rb-700); color: #fff; }

:focus-visible { outline: 3px solid var(--rb-500); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--rb-800); color: #fff; padding: .8rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --------------------------------------------------------------------------
   3. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--rb-section-y); }
.section-tint { background: var(--rb-ink-050); }

.sec-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head.is-center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-bottom: .5rem; }
.sec-head > p:last-child { color: var(--rb-ink-600); margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--bs-body-font-family);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--rb-accent-600);
  margin-bottom: .85rem;
}
.rule { width: 54px; height: 3px; background: var(--rb-accent-500);
        border: 0; opacity: 1; margin: 0 0 1.4rem; }
.is-center .rule { margin-inline: auto; }

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose li::marker { color: var(--rb-accent-500); }

/* --------------------------------------------------------------------------
   4. Header / navbar
   -------------------------------------------------------------------------- */
.site-header {
  /* Sampled from images/logo-master.jpg: the mark's own field runs
     #024d6b near the seam to #046a80 at the far edge, so the bar carries the
     logo's colour and the artwork sits on it rather than in a white box. */
  background: linear-gradient(90deg, var(--rb-bar-dark) 0%, var(--rb-bar-mid) 55%, var(--rb-bar-light) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1px 12px rgba(0, 45, 64, .18);
}
/* No vertical padding: the logo is the tallest thing in the bar, so the header
   collapses to exactly the logo's height. The artwork has its own background,
   so running it edge to edge reads as intentional rather than cramped. */
.navbar { --bs-navbar-padding-y: 0; }

/* --- Brand lockup: seal image + real HTML text ------------------------- */
/* Only the seal is an image. The name and tagline are live text, so they stay
   crisp at any zoom and are readable by search engines and screen readers. */
.navbar-brand { display: flex; align-items: center; gap: .7rem;
                padding: 0; margin: 0 1.5rem 0 0; flex: 0 1 auto; min-width: 0; }
.navbar-brand picture { display: contents; }

.brand-seal { display: block; width: 97px; height: 97px; flex-shrink: 0; }

.brand-text { display: flex; flex-direction: column; justify-content: center;
              min-width: 0; }

/* Type matched to the firm's original wordmark: bold Arial/Helvetica, line one
   set in caps, line two in title case and a touch smaller, both white with the
   same soft drop shadow the artwork carried. Arial and Helvetica are named
   explicitly rather than inheriting the body stack, so the lockup renders the
   same across platforms instead of picking up Segoe UI or Roboto. */
.brand-name, .brand-tag {
  font-family: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 30, 45, .45);
}
.brand-name {
  font-size: 1.78rem; line-height: 1.14;
  text-transform: uppercase; letter-spacing: .005em;
}
.brand-tag {
  font-size: 1.54rem; line-height: 1.14;
  letter-spacing: 0; margin-top: .06rem;
  text-transform: none;
}

/* Size ladder. Each step is the largest that still clears the nav in that
   breakpoint's container - measured against the real Bootstrap container
   widths, not guessed. The 992-1199 band is the tightest: the nav is still
   expanded but the container has already dropped to 960px, so the nav
   tightens there too and the wordmark steps down further than the seal does.
   Below 992 the nav collapses to a toggler and the lockup grows back. */
@media (max-width: 1399.98px) {
  .brand-seal { width: 88px; height: 88px; }
  .brand-name { font-size: 1.62rem; }
  .brand-tag  { font-size: 1.40rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .brand-seal { width: 75px; height: 75px; }
  .brand-name { font-size: 1.28rem; }
  .brand-tag  { font-size: 1.11rem; }
  .navbar .nav-link { font-size: .86rem; padding: .55rem .53rem; }
  .navbar .nav-item.ms-lg-3 { margin-left: .5rem !important; }
  .navbar .btn-light { font-size: .92rem; padding-inline: 1rem; }
}
@media (max-width: 767.98px) {
  .brand-seal { width: 79px; height: 79px; }
  .brand-name { font-size: 1.45rem; }
  .brand-tag  { font-size: 1.26rem; }
}
@media (max-width: 575.98px) {
  .navbar-brand { gap: .5rem; margin-right: .6rem; }
  .brand-seal { width: 59px; height: 59px; }
  .brand-name { font-size: 1.06rem; }
  .brand-tag  { font-size: .92rem; }
}
/* Narrowest phones: the tagline steps aside so the name is not truncated. */
@media (max-width: 399.98px) {
  .brand-seal { width: 53px; height: 53px; }
  .brand-name { font-size: .88rem; }
  .brand-tag { display: none; }
}

.navbar .nav-link {
  --bs-nav-link-color: rgba(255, 255, 255, .88);
  --bs-nav-link-hover-color: #ffffff;
  font-size: .95rem; font-weight: 600;
  padding: .6rem .8rem; border-radius: var(--bs-border-radius);
  position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.navbar .nav-link.active { color: #fff; }
@media (min-width: 992px) {
  .navbar .nav-link.active::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .05rem;
    height: 2px; background: var(--rb-bar-on);
  }
}
.navbar .btn-light { --bs-btn-color: var(--rb-800); --bs-btn-hover-color: var(--rb-900); }

.navbar-toggler { border-color: rgba(255, 255, 255, .55);
  width: var(--rb-tap); height: var(--rb-tap);
  display: inline-flex; align-items: center; justify-content: center; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }

/* Dropdown stays light: a menu of seven service names reads better on white,
   and it separates cleanly from the bar. */
.dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: var(--rb-ink-700);
  --bs-dropdown-link-color: var(--rb-ink-700);
  --bs-dropdown-border-color: var(--rb-ink-100);
  --bs-dropdown-border-radius: .5rem;
  --bs-dropdown-link-active-bg: var(--rb-050);
  --bs-dropdown-link-active-color: var(--rb-700);
  --bs-dropdown-link-hover-bg: var(--rb-025);
  --bs-dropdown-link-hover-color: var(--rb-700);
  --bs-dropdown-divider-bg: var(--rb-ink-100);
  --bs-dropdown-padding-y: .45rem;
  min-width: 18rem;
  box-shadow: 0 12px 32px rgba(0, 45, 64, .28);
}
.dropdown-item { padding: .55rem .9rem; border-radius: var(--bs-border-radius); font-size: .93rem; }
.dropdown-menu { padding-inline: .4rem; }

@media (max-width: 991.98px) {
  .navbar-collapse { padding-top: .5rem; padding-bottom: 1rem; max-height: 75vh; overflow-y: auto; }
  .navbar .nav-link { padding: .8rem .25rem; font-size: 1.02rem; }
  .navbar .nav-link.active { color: var(--rb-bar-on); }
  /* Inside the collapsed bar the menu sits on the dark field, so invert it. */
  .dropdown-menu {
    --bs-dropdown-bg: transparent;
    --bs-dropdown-link-color: rgba(255, 255, 255, .85);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .12);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: rgba(255, 255, 255, .16);
    border: 0; box-shadow: none;
    border-left: 2px solid rgba(255, 255, 255, .25);
    border-radius: 0; margin-left: .25rem; padding-left: .5rem; min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   5. Hero slider
   No text overlay and no crop. The lead photograph is a two-panel composite
   with its own signage running the full width, so the slide keeps the image's
   natural 1169:487 ratio and shows every pixel of it.
   -------------------------------------------------------------------------- */
.hero-slider { position: relative; background: var(--rb-900); }

/* Never render the photographs above their native 1169px width - upscaling a
   fixed-size JPEG just softens it. On wider screens the slider stays 1169px
   and the brand colour fills the rest. */
.hero-slider .carousel-inner {
  aspect-ratio: 1169 / 487;
  max-width: 1169px;
  margin-inline: auto;
}
.hero-slider .carousel-item { height: 100%; }
.hero-slider picture { display: contents; }
.hero-slider img {
  width: 100%; height: 100%;
  object-fit: contain;      /* never crop - the composite needs its full width */
  object-position: center;
}

/* --- Colour unification ------------------------------------------------
   The three photographs do not share a palette: the AHK ballroom is warm
   brown (#57463b sampled), the other two are cool, and neither matched the
   navbar. Every slide takes the same brand tint, in the navbar's family.
   Kept light at 14%: enough to pull the warm frame into the palette, not
   enough to dull the photographs. */
.hero-slider .carousel-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--rb-bar-mid);
  opacity: .14;
  pointer-events: none;
}

/* --- Captions: slides 2 and 3 only -------------------------------------
   The caption sits in its own panel rather than behind a full-width wash.
   A wash dark enough to carry white type had to darken the entire frame to
   do it - measured, the left half of a captioned slide fell to L* 18-26 and
   the photographs read as murky. The panel confines that darkness to the
   text, so the rest of the image stays at its natural brightness (right side
   measured L* 59, up from 44-51).

   Panel at 86% over the 14% tint gives white text 10.3:1 across both
   captioned photographs - deliberately past the 4.5 AA floor so the caption
   stays legible whatever the photograph behind it happens to be doing. */
.hero-slider .carousel-caption {
  position: absolute; inset: 0; right: auto; left: 0;
  display: flex; align-items: center;
  width: 100%; padding: 0 clamp(1.25rem, 5vw, 3.5rem);
  text-align: left; z-index: 3;
}
.hero-slider .caption-inner {
  max-width: 30rem;
  background: rgba(1, 42, 60, .86);
  backdrop-filter: blur(3px);
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.8vw, 1.75rem);
  border-radius: var(--bs-border-radius-lg);
  border-left: 3px solid var(--rb-bar-on);
}
.hero-slider .eyebrow { color: var(--rb-accent-300); margin-bottom: .5rem; }
.hero-slider .slide-title {
  color: #fff; margin: 0 0 .6rem;
  font-family: var(--rb-head); font-weight: 600; line-height: 1.15;
  font-size: clamp(1.35rem, .95rem + 1.7vw, 2.4rem);
  letter-spacing: -.01em;
}
.hero-slider .slide-text {
  color: #cfe2ec; margin: 0 0 1.1rem;
  font-size: clamp(.95rem, .9rem + .3vw, 1.12rem);
  line-height: 1.5;
}

/* Below 768px the strip is only ~200px tall at 2.4:1 - not enough room for a
   caption without shrinking it past readable. The H1 band directly underneath
   already carries the message there. */
@media (max-width: 767.98px) {
  .hero-slider .carousel-caption { display: none; }
}

/* Indicators as slim bars, floated clear of the photo edge */
.hero-slider .carousel-indicators { margin-bottom: .9rem; gap: .5rem; z-index: 3; }
.hero-slider .carousel-indicators [data-bs-target] {
  width: 34px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .55); border: 0; opacity: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, .45);
  transition: background-color .2s ease, width .2s ease;
}
.hero-slider .carousel-indicators .active { background: var(--rb-accent-500); width: 52px; }

/* Controls as circles; hidden on small screens where the strip is short */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next { width: 8%; opacity: 1; z-index: 3; }
.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon {
  width: 44px; height: 44px; background-size: 40% 40%;
  background-color: rgba(0, 45, 64, .55);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  transition: background-color .2s ease;
}
.hero-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.hero-slider .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(0, 45, 64, .85);
}
@media (max-width: 767.98px) {
  .hero-slider .carousel-control-prev,
  .hero-slider .carousel-control-next { display: none; }
  .hero-slider .carousel-indicators { margin-bottom: .45rem; }
  .hero-slider .carousel-indicators [data-bs-target] { width: 26px; height: 3px; }
}

/* Headline band directly under the slider - carries the H1 the slider does not */
.hero-intro {
  /* Same family as the navbar and the slider tint, so the whole hero block
     reads as one piece instead of two different blues stacked. */
  background: linear-gradient(150deg, #012f43 0%, var(--rb-bar-dark) 55%, var(--rb-bar-mid) 100%);
  color: #d3e4ee;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}
.hero-intro .eyebrow { color: var(--rb-accent-300); }
.hero-intro h1 { color: #fff; margin-bottom: 1rem; max-width: 24ch; }
.hero-intro .lead { color: #cfe2ec; max-width: 44rem; margin-bottom: 1.8rem; }

/* Interior page banner */
.page-head { background: var(--rb-800); color: #cfe2ec; }
.page-head .inner { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.page-head h1 { color: #fff; margin-bottom: .35rem; }
.page-head p { color: #bcd5e2; max-width: 46rem; margin-bottom: 0; }
.page-head .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.4);
                         --bs-breadcrumb-item-active-color: #fff; font-size: .85rem; }
.page-head .breadcrumb a { color: #cfe2ec; text-decoration: none; }
.page-head .breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.rb-card {
  height: 100%;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--rb-ink-100);
  border-radius: var(--bs-border-radius-lg);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rb-card h3 { margin-bottom: .5rem; }
.rb-card p { color: var(--rb-ink-600); font-size: .98rem; }
.rb-card .more { margin-top: auto; padding-top: 1rem; font-weight: 600;
                 color: var(--rb-700); text-decoration: none; display: inline-flex;
                 align-items: center; gap: .35rem; }
.rb-card .more::after { content: "\203A"; font-size: 1.25em; line-height: 1;
                        transition: transform .18s ease; }

.rb-card--link { position: relative; }
.rb-card--link:hover { border-color: var(--rb-500); transform: translateY(-2px);
                       box-shadow: 0 4px 12px rgba(16,24,32,.07); }
.rb-card--link:hover .more::after { transform: translateX(3px); }
.rb-card--link h3 a { color: inherit; text-decoration: none; }
.rb-card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.rb-card--link:focus-within { outline: 3px solid var(--rb-500); outline-offset: 2px; }
.rb-card--link h3 a:focus-visible { outline: none; }

.rb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1.1rem; flex-shrink: 0;
  color: var(--rb-700); background: var(--rb-050);
  border-radius: var(--bs-border-radius);
}
.rb-icon svg { width: 24px; height: 24px; }

.rb-card.value { border: 0; padding: 0; background: transparent; }
.value .rb-icon { background: transparent; color: var(--rb-accent-600);
                  width: 40px; height: 40px; margin-bottom: .8rem; }
.value .rb-icon svg { width: 30px; height: 30px; }

.panel {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--rb-025);
  border: 1px solid var(--rb-050);
  border-left: 3px solid var(--rb-700);
  border-radius: var(--bs-border-radius);
}
.panel + .panel { margin-top: 1.25rem; }
.panel h3 { margin-bottom: .5rem; }

.checks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; }
.checks svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: .3rem; color: var(--rb-700); }

/* --------------------------------------------------------------------------
   7. Client logo grid
   -------------------------------------------------------------------------- */
.logos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px; background: var(--rb-ink-100);
  border: 1px solid var(--rb-ink-100); border-radius: var(--bs-border-radius-lg);
  overflow: hidden; list-style: none; padding: 0; margin: 0;
}
.logos li { background: #fff; }
.logos a, .logos .logo-static {
  display: flex; align-items: center; justify-content: center;
  min-height: 104px; padding: 1.1rem 1rem; height: 100%; text-decoration: none;
  transition: background-color .2s ease;
}
.logos img { max-height: 58px; width: auto; object-fit: contain; }
.logos a:hover, .logos a:focus-visible { background: var(--rb-ink-050); }

/* --------------------------------------------------------------------------
   8. Partner profiles
   -------------------------------------------------------------------------- */
.person {
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: #fff; border: 1px solid var(--rb-ink-100);
  border-radius: var(--bs-border-radius-lg);
}
.person__head { padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rb-ink-100); }
.person__head h3 { margin-bottom: .15rem; }
.person__role { font-size: .88rem; font-weight: 700; letter-spacing: .07em;
                text-transform: uppercase; color: var(--rb-accent-600); margin: 0; }
.person p { color: var(--rb-ink-600); font-size: .98rem; }
.person h4 { margin: 1.4rem 0 .6rem; font-size: .8rem; letter-spacing: .12em;
             text-transform: uppercase; color: var(--rb-ink-500); }
.person ul { padding-left: 1.1rem; font-size: .94rem; color: var(--rb-ink-600); }
.person li::marker { color: var(--rb-accent-300); }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.form-label { font-size: .92rem; font-weight: 600; color: var(--bs-emphasis-color); margin-bottom: .38rem; }
.form-control, .form-select {
  min-height: var(--rb-tap);
  border: 1.5px solid #d6dde3;
  border-radius: var(--bs-border-radius);
  font-size: 1rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--rb-700);
  box-shadow: 0 0 0 3px rgba(0, 93, 127, .16);
}
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: #a32020; }
.req { color: #a32020; }
.field-err { font-size: .86rem; color: #a32020; font-weight: 600; margin: .3rem 0 0; }
.form-text { font-size: .84rem; color: var(--rb-ink-500); }

/* honeypot - off-screen for people, present for naive bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.contact-list { list-style: none; padding: 0; display: grid; gap: 1.3rem; margin: 0; }
.contact-list li { display: flex; gap: .9rem; }
.contact-list svg { width: 21px; height: 21px; color: var(--rb-700); flex-shrink: 0; margin-top: .28rem; }
.contact-list .k { font-size: .78rem; font-weight: 700; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--rb-ink-500); margin-bottom: .15rem; }
.contact-list a { font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.map-frame { border: 1px solid var(--rb-ink-100); border-radius: var(--bs-border-radius-lg);
             overflow: hidden; line-height: 0; }
.map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   10. CTA band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--rb-800); color: #cfe2ec; padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #bcd5e2; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--rb-ink-900); color: #9fb0bd; font-size: .95rem; }
.site-footer a { color: #c6d4dd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 { font-family: var(--bs-body-font-family); font-size: .8rem;
                  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                  color: #fff; margin-bottom: 1.1rem; }
.footer-main { padding-block: clamp(2.75rem, 6vw, 4rem); }
.footer-main li { margin-bottom: .55rem; }
/* The footer no longer repeats the brand lockup or the main nav - both were
   duplicating the header. What remains is what the header does not carry:
   the service list, contact details and the external authority links. */
.site-footer picture { display: contents; }
.footer-social { display: inline-flex; margin-top: .5rem; align-items: center; justify-content: center;
                 width: var(--rb-tap); height: var(--rb-tap);
                 border: 1px solid #2c3a45; border-radius: var(--bs-border-radius); }
.footer-social:hover { background: #1d2833; border-color: #45535f; }
.footer-social svg { width: 19px; height: 19px; }
.footer-credit { color: #8fa2b0; }
/* Copyright left, studio credit right. Wraps to a centred stack on narrow
   screens, where a split bar would leave both lines stranded at the edges. */
.footer-bottom {
  border-top: 1px solid #222d37;
  padding-block: 1.4rem;
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
@media (max-width: 575.98px) {
  .footer-bottom { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   12. 404
   -------------------------------------------------------------------------- */
.notfound { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.notfound .code { font-family: var(--rb-head); font-size: clamp(4rem, 14vw, 8rem);
                  line-height: 1; color: var(--rb-050); margin: 0 0 -.4em; }

/* --------------------------------------------------------------------------
   13. Motion + print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-fade .carousel-item { transition: none; }
  .rb-card--link:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .cta-band, .map-frame,
  .carousel-indicators, .carousel-control-prev, .carousel-control-next { display: none !important; }
  .hero-slider { display: none !important; }
  .hero-intro h1, .hero-intro .lead, .page-head h1, .page-head p { color: #000 !important; }
  .page-head, .hero-intro { background: none !important; }
  a { color: #000; text-decoration: underline; }
}