/* ============================================================
   LinQ Capital — Theme
   Loaded AFTER bootstrap.min.css so these rules win.
   ============================================================ */

/* ---------- 0. Inter (self-hosted, variable) ----------
   One file covers weights 100-900, so there is nothing to add
   later if a heavier or lighter weight is needed. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  /* No unicode-range on purpose: this is the only face we ship, and a
     range would silently drop odd characters back to the system font. */
}

/* ---------- 1. Brand tokens ---------- */
:root {
  /* Typography - overrides Bootstrap's own body font variable */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Core brand */
  --linq-cyan: #0cc0df;
  --linq-cyan-dark: #0aa3bd;
  /* hover / pressed */
  --linq-cyan-deep: #077a8b;
  /* brand word on white - 5.0:1, where cyan is only 2.2:1 */
  --linq-cyan-soft: #e6f9fc;
  /* tinted backgrounds */
  --linq-navy: #0b1e3f;
  --linq-navy-light: #16305c;
  /* hover on navy surfaces */

  /* Neutrals derived from the navy so greys stay in-family */
  --linq-body: #4a5568;
  /* body copy */
  --linq-muted: #7b8794;
  /* secondary copy */
  --linq-border: #e3e8ef;
  --linq-surface: #f6f9fc;
  /* alternating section bg */

  /* Gap between the nav link and any dropdown panel */
  --linq-menu-gap: .65rem;

  /* Horizontal padding on each top-level nav link */
  --linq-nav-pad: 1.1125rem;
  /* 17.8px */

  /* Navbar geometry. --linq-nav-h is the number the hero uses to slide
     itself up underneath the header, so it is derived rather than typed:
     change the logo height or the vertical padding and the overlay follows. */
  --linq-nav-pad-y: .625rem;
  --linq-nav-pad-y-scrolled: .44rem;
  --linq-logo-h: 90px;
  --linq-logo-h-scrolled: 75px;
  --linq-nav-h: calc(var(--linq-logo-h) + (2 * var(--linq-nav-pad-y)) + 1px);
  --linq-nav-h-scrolled: calc(var(--linq-logo-h-scrolled) + (2 * var(--linq-nav-pad-y-scrolled)) + 1px);

  --linq-radius: 10px;
  --linq-shadow: 0 4px 24px rgba(11, 30, 63, .08);
}

/* Smaller logo on phones - redefining the variable keeps --linq-nav-h, and
   therefore the hero's overlap, correct without repeating the calc(). */
@media (max-width: 575.98px) {
  :root {
    --linq-logo-h: 72.5px;
    --linq-logo-h-scrolled: 65px;
  }
}

/* ---------- 2. Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  /* clears the sticky navbar on anchor jumps */
}

body {
  background-color: #fff;
  color: var(--linq-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--linq-navy);
  font-weight: 700;
  letter-spacing: -.01em;
}

a {
  text-decoration: none;
}

.txtcyan {
  color: var(--linq-cyan) !important;
}

.txtnavy {
  color: var(--linq-navy) !important;
}

/* ---------- 3. Brand buttons ---------- */
/* Navy at rest, cyan on hover.
   Hover text is navy, not white: white on #0cc0df is only 2.2:1 contrast
   and fails WCAG, while navy on cyan is 7.6:1. */
.btn-linq {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--linq-navy);
  --bs-btn-border-color: var(--linq-navy);
  --bs-btn-hover-color: var(--linq-navy);
  --bs-btn-hover-bg: var(--linq-cyan);
  --bs-btn-hover-border-color: var(--linq-cyan);
  --bs-btn-active-color: var(--linq-navy);
  --bs-btn-active-bg: var(--linq-cyan-dark);
  --bs-btn-active-border-color: var(--linq-cyan-dark);
  --bs-btn-focus-shadow-rgb: 12, 192, 223;
  font-weight: 600;
  white-space: nowrap;
  padding: .6rem 1.5rem;
  border-radius: var(--linq-radius);
}

.btn-linq-outline {
  --bs-btn-color: var(--linq-navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--linq-border);
  --bs-btn-hover-color: var(--linq-navy);
  --bs-btn-hover-bg: var(--linq-cyan-soft);
  --bs-btn-hover-border-color: var(--linq-cyan);
  --bs-btn-focus-shadow-rgb: 12, 192, 223;
  font-weight: 600;
  padding: .6rem 1.5rem;
  border-radius: var(--linq-radius);
}

/* ============================================================
   SECTION 1 — NAVBAR
   ============================================================ */
.linq-navbar {
  background-color: #fff;
  /* Bootstrap owns nav-link padding at >=1200px via this variable;
     setting it here is what actually moves the links apart. */
  --bs-navbar-nav-link-padding-x: var(--linq-nav-pad);
  padding-block: var(--linq-nav-pad-y);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, box-shadow .25s ease,
    padding .25s ease, border-color .25s ease;
}

/* Applied by js/main.js once the page is scrolled */
.linq-navbar.is-scrolled {
  padding-block: var(--linq-nav-pad-y-scrolled);
  border-bottom-color: var(--linq-border);
  box-shadow: var(--linq-shadow);
}

/* ---------- Overlay state ----------
   Pages opt in with <body class="linq-overlay-nav">: the hero slides up
   underneath the header so the slide photography shows through the bar.
   js/main.js drops .is-transparent the moment the page scrolls - or the
   mobile menu opens - which hands the bar back to the white treatment
   above. Pages without the body class are untouched. */
.linq-navbar.is-transparent {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* The logo is navy + cyan artwork and the navy half all but vanishes on the
   dark hero. Knocking it out to solid white is a stopgap that costs the cyan.
   Drop a reversed PNG in images/ and this rule becomes a src swap instead. */
.linq-navbar.is-transparent .linq-logo {
  filter: brightness(0) invert(1);
}

.linq-navbar.is-transparent .nav-link {
  color: #fff;
}

.linq-navbar.is-transparent .nav-link:hover,
.linq-navbar.is-transparent .nav-link:focus,
.linq-navbar.is-transparent .nav-link.active,
.linq-navbar.is-transparent .nav-item.show>.nav-link {
  color: var(--linq-cyan);
}

/* Navy on navy is unreadable here. The header CTA becomes an outline that
   fills with cyan, which also leaves the solid navy button inside the hero
   as the single obvious primary action. */
.linq-navbar.is-transparent .btn-linq {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, .65);
  --bs-btn-hover-color: var(--linq-navy);
  --bs-btn-hover-bg: var(--linq-cyan);
  --bs-btn-hover-border-color: var(--linq-cyan);
  --bs-btn-active-color: var(--linq-navy);
  --bs-btn-active-bg: var(--linq-cyan-dark);
  --bs-btn-active-border-color: var(--linq-cyan-dark);
}

.linq-navbar.is-transparent .navbar-toggler {
  border-color: rgba(255, 255, 255, .55);
}

.linq-navbar.is-transparent .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Logo --- */
.linq-logo {
  height: var(--linq-logo-h);
  /* stacked lockup needs height for the tagline */
  width: auto;
  display: block;
  transition: height .25s ease, filter .25s ease;
}

.linq-navbar.is-scrolled .linq-logo {
  height: var(--linq-logo-h-scrolled);
}

/* --- Links --- */
.linq-navbar .nav-link {
  color: var(--linq-navy);
  font-weight: 500;
  position: relative;
}

.linq-navbar .nav-link:hover,
.linq-navbar .nav-link:focus {
  color: var(--linq-cyan);
}

.linq-navbar .nav-link.active {
  color: var(--linq-cyan);
}

/* Bootstrap 5.3 puts its default blue ring on .nav-link:focus-visible, which
   shows as a stray light-blue border on the dropdown toggles once they have
   been clicked. Remove it - the cyan underline below (and the soft tint on
   smaller screens) carries the focus state, so keyboard users still get a
   clear indicator. */
.linq-navbar .nav-link:focus-visible {
  outline: 0;
  box-shadow: none;
}

@media (max-width: 1199.98px) {
  .linq-navbar .nav-link:focus-visible {
    background-color: var(--linq-cyan-soft);
    border-radius: 6px;
  }
}

/* Underline indicator — desktop only */
@media (min-width: 1200px) {
  .linq-navbar .nav-link::before {
    content: "";
    position: absolute;
    left: var(--linq-nav-pad);
    right: var(--linq-nav-pad);
    bottom: -.35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--linq-cyan);
    transform: scaleX(0);
    transition: transform .2s ease;
  }

  .linq-navbar .nav-link:hover::before,
  .linq-navbar .nav-link:focus-visible::before,
  .linq-navbar .nav-link.active::before,
  .linq-navbar .nav-item.show>.nav-link::before {
    transform: scaleX(1);
  }
}


/* --- Toggler --- */
.linq-navbar .navbar-toggler {
  border: 1px solid var(--linq-border);
  padding: .4rem .6rem;
}

.linq-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(12, 192, 223, .25);
}

.linq-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230b1e3f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Mobile quick actions (call + Let's Chat beside the toggler) ---
   The call link, the chat button and the toggler read as one row, so they
   share one height (--linq-nav-ctrl-h) and the toggler's own corner radius.
   Both are set here rather than per control, so they cannot drift apart.
   The chat button is a trimmed .btn-linq: its full padding would not fit
   beside the logo on a phone. */
.linq-navbar {
  --linq-nav-ctrl-h: 2.75rem;
}

.linq-nav-quick {
  gap: .5rem;
  margin-right: .5rem;
}

/* No display here: Bootstrap hides the toggler at xl with a display rule
   of the same weight, and this file loads later, so setting it would put
   the hamburger back on desktop. Buttons centre their content vertically
   on their own; only the call link, an <a>, needs flex for that. */
.linq-nav-call,
.linq-nav-quick .btn-linq,
.linq-navbar .navbar-toggler {
  height: var(--linq-nav-ctrl-h);
  padding-block: 0;
  border-radius: var(--bs-navbar-toggler-border-radius);
}

.linq-nav-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--linq-nav-ctrl-h);
  border: 1px solid var(--linq-border);
  color: var(--linq-navy);
  font-size: 1.1rem;
  text-decoration: none;
}

.linq-nav-call:hover {
  color: var(--linq-cyan-deep);
  border-color: var(--linq-cyan-dark);
}

.linq-nav-call:focus-visible {
  outline: 2px solid var(--linq-cyan-dark);
  outline-offset: 2px;
}

.linq-nav-quick .btn-linq {
  padding: 0 .9rem;
  font-size: .9rem;
}

/* Over the homepage hero: white, matching the toggler's overlay state. */
.linq-navbar.is-transparent .linq-nav-call {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

.linq-navbar.is-transparent .linq-nav-call:hover {
  color: var(--linq-cyan);
  border-color: var(--linq-cyan);
}

/* The narrowest phones: tighten rather than wrap the row under the logo. */
@media (max-width: 379.98px) {
  .linq-nav-quick {
    gap: .35rem;
    margin-right: .35rem;
  }

  .linq-nav-quick .btn-linq {
    padding-inline: .65rem;
    font-size: .85rem;
  }

  /* Bootstrap's 1rem after the brand is the cheapest space to give back. */
  .linq-navbar .navbar-brand {
    margin-right: .5rem;
  }
}

/* At 320px the row still needs a slightly smaller logo. Redefining the
   variable, like the phone rule up top, keeps --linq-nav-h and the hero
   overlap in step. */
@media (max-width: 359.98px) {
  :root {
    --linq-logo-h: 62px;
    --linq-logo-h-scrolled: 56px;
  }

  .linq-navbar {
    --linq-nav-ctrl-h: 2.5rem;
  }

  .linq-nav-quick .btn-linq {
    padding-inline: .5rem;
  }

  .linq-navbar .navbar-toggler {
    padding-inline: .4rem;
  }
}

/* Mobile dropdown panel */
@media (max-width: 1199.98px) {
  .linq-navbar .navbar-collapse {
    padding-top: 1rem;
    margin-top: .75rem;
    border-top: 1px solid var(--linq-border);
  }

  .linq-navbar .nav-link {
    padding-inline: 0;
    padding-block: .5rem;
  }
}

/* ============================================================
   SECTION 1b - DROPDOWNS
   ============================================================ */

/* Caret */
.linq-navbar .dropdown-toggle::after {
  margin-left: .4rem;
  vertical-align: .15em;
  border-top-width: .32em;
  border-inline-width: .32em;
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}

.linq-navbar .nav-item.show>.dropdown-toggle::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---------- Shared panel look ---------- */
.linq-navbar .dropdown-menu {
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  box-shadow: var(--linq-shadow);
  padding: .5rem;
  margin-top: var(--linq-menu-gap);
}

@keyframes linqDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Simple dropdowns (Services, Resources) ---------- */
.linq-dropdown {
  min-width: 15rem;
}

.linq-dropdown .dropdown-item {
  display: block;
  padding: .4rem .6rem;
  border-radius: 7px;
  color: var(--linq-body);
  font-size: .94rem;
  line-height: 1.35;
  transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

.linq-dropdown .dropdown-item:hover,
.linq-dropdown .dropdown-item:focus {
  background-color: var(--linq-cyan-soft);
  color: var(--linq-navy);
  padding-left: .85rem;
}

.linq-dropdown .dropdown-item:active {
  background-color: var(--linq-cyan);
  color: #fff;
}

/* ---------- Desktop (xl and up) ---------- */
@media (min-width: 1200px) {

  .linq-navbar .dropdown-menu.show {
    animation: linqDropIn .18s ease both;
  }
}

/* ---------- Mobile / tablet (below xl) ---------- */
@media (max-width: 1199.98px) {

  .linq-navbar .navbar-collapse {
    max-height: 78vh;
    overflow-y: auto;
  }

  /* Panels sit inline in the stacked menu, not floating */
  .linq-navbar .dropdown-menu {
    border: 0;
    border-left: 2px solid var(--linq-cyan-soft);
    border-radius: 0;
    box-shadow: none;
    margin: .15rem 0 .6rem;
    padding: .25rem 0 .25rem .85rem;
    width: 100%;
  }

  .linq-dropdown .dropdown-item {
    padding-inline: .5rem;
  }
}

/* ============================================================
   SECTION 2 - HERO CAROUSEL
   ============================================================ */
.linq-hero {
  position: relative;
}

/* Overlay header: pull the hero up by exactly the header's height so the
   transparent bar sits on top of the slide, then hand the slide the same
   amount back as padding so the copy stays optically centred rather than
   tucking in behind the logo. */
body.linq-overlay-nav .linq-hero {
  margin-top: calc(-1 * var(--linq-nav-h));
}

body.linq-overlay-nav .linq-hero-slide {
  padding-top: calc(4rem + var(--linq-nav-h));
}

@media (max-width: 767.98px) {
  body.linq-overlay-nav .linq-hero-slide {
    padding-top: calc(3.25rem + var(--linq-nav-h));
  }
}

.linq-hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  /* Was clamp(460px, 76vh, 700px) - raised by 150px at every stop. */
  min-height: clamp(610px, calc(76vh + 150px), 850px);
  padding-block: 4rem;
  color: #fff;
  background-color: var(--linq-navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Content must sit above the texture layer */
.linq-hero-slide>.container {
  position: relative;
  z-index: 2;
}

/* Fine dot grid for texture.
   Alpha lives in the gradient rather than on `opacity`, so the mobile
   veil added to this same element further down is not diluted by it. */
.linq-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Layer order is top-to-bottom: cyan tint, navy scrim, then the photo.
   The scrim is heaviest on the left so the headline stays legible, and
   is tuned per image - the brighter the photo, the stronger the scrim. */

/* Dark wood flatlay, but with white paperwork under the headline column -
   so the left side of the scrim is as heavy as the bright photos get. The
   cyan tint is held back on the right because the poster in the photo is
   already a strong blue and the two fight each other. */
.linq-hero-slide--0 {
  background-image:
    radial-gradient(circle at 82% 30%, rgba(12, 192, 223, .14), transparent 56%),
    linear-gradient(90deg,
      rgba(11, 30, 63, .96) 0%,
      rgba(11, 30, 63, .89) 42%,
      rgba(11, 30, 63, .62) 70%,
      rgba(9, 24, 52, .46) 100%),
    url('../images/banner-finance-move-with-you.jpg');
}

/* Mid-tone photo (calculator + keys on brochures) */
.linq-hero-slide--1 {
  background-image:
    radial-gradient(circle at 80% 26%, rgba(12, 192, 223, .20), transparent 55%),
    linear-gradient(90deg,
      rgba(11, 30, 63, .95) 0%,
      rgba(11, 30, 63, .86) 40%,
      rgba(11, 30, 63, .58) 68%,
      rgba(9, 24, 52, .44) 100%),
    url('../images/banner-home-loan.jpg');
}

/* Bright photo (white shirt, light background) - stronger scrim */
.linq-hero-slide--2 {
  background-image:
    radial-gradient(circle at 22% 76%, rgba(12, 192, 223, .18), transparent 58%),
    linear-gradient(90deg,
      rgba(11, 30, 63, .97) 0%,
      rgba(11, 30, 63, .90) 42%,
      rgba(11, 30, 63, .66) 70%,
      rgba(9, 24, 52, .50) 100%),
    url('../images/banner-refinance.jpg');
}

/* Brightest photo (white floor plan) - strongest scrim */
.linq-hero-slide--3 {
  background-image:
    radial-gradient(circle at 72% 80%, rgba(12, 192, 223, .20), transparent 54%),
    linear-gradient(90deg,
      rgba(11, 30, 63, .97) 0%,
      rgba(11, 30, 63, .92) 44%,
      rgba(11, 30, 63, .70) 72%,
      rgba(9, 24, 52, .54) 100%),
    url('../images/banner-property-investment.jpg');
}

/* Darker, warmer photo - lighter scrim so it does not go muddy */
.linq-hero-slide--4 {
  background-image:
    radial-gradient(circle at 90% 52%, rgba(12, 192, 223, .18), transparent 60%),
    linear-gradient(90deg,
      rgba(11, 30, 63, .93) 0%,
      rgba(11, 30, 63, .80) 40%,
      rgba(11, 30, 63, .48) 70%,
      rgba(9, 24, 52, .30) 100%),
    url('../images/banner-business-asset-finance.jpg');
}

/* Slides now come from tblslideshow, so the photo arrives as an inline custom
   property and only the URL is per-slide - the scrim stays here in CSS.
   These are the mid-tone values from --1: the per-image tuning above cannot
   follow a photo the admin can swap at any time. If a slide ever needs its own
   scrim, give it a modifier class rather than an inline gradient.
   --0 to --4 above are now unused; they are the reference for that tuning. */
.linq-hero-slide--db {
  background-image:
    radial-gradient(circle at 80% 26%, rgba(12, 192, 223, .20), transparent 55%),
    linear-gradient(90deg,
      rgba(11, 30, 63, .95) 0%,
      rgba(11, 30, 63, .86) 40%,
      rgba(11, 30, 63, .58) 68%,
      rgba(9, 24, 52, .44) 100%),
    var(--linq-slide-photo, none);
}

/* ---------- Slide content ---------- */
.linq-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.1rem;
  padding: .35rem .9rem;
  border: 1px solid rgba(12, 192, 223, .5);
  border-radius: 999px;
  background: rgba(12, 192, 223, .12);
  color: var(--linq-cyan);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.linq-hero-title {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin-bottom: 1.15rem;
  max-width: 20ch;
}

.linq-hero-sub {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1rem, 1.35vw, 1.175rem);
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 2rem;
}

.linq-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

/* Outline button for dark backgrounds */
.btn-linq-ghost {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, .45);
  --bs-btn-hover-color: var(--linq-navy);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--linq-navy);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--linq-radius);
}

/* ---------- Entrance animation ---------- */
@keyframes linqHeroUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.carousel-item.active .linq-hero-eyebrow {
  animation: linqHeroUp .55s .10s both;
}

.carousel-item.active .linq-hero-title {
  animation: linqHeroUp .55s .20s both;
}

.carousel-item.active .linq-hero-sub {
  animation: linqHeroUp .55s .30s both;
}

.carousel-item.active .linq-hero-actions {
  animation: linqHeroUp .55s .40s both;
}

/* ---------- Controls ---------- */
.linq-hero-ctrl {
  width: auto;
  padding: 0;
  opacity: 1;
  z-index: 3;
}

.linq-hero-ctrl i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-inline: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.4rem;
  backdrop-filter: blur(4px);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.linq-hero-ctrl:hover i,
.linq-hero-ctrl:focus-visible i {
  background: var(--linq-cyan);
  border-color: var(--linq-cyan);
  color: #fff;
}

/* ---------- Indicators ---------- */
.linq-hero-dots {
  z-index: 3;
  margin-bottom: 1.85rem;
  gap: .5rem;
}

.linq-hero-dots [data-bs-target] {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .35);
  opacity: 1;
  transition: background-color .25s ease, width .25s ease;
}

.linq-hero-dots [data-bs-target]:hover {
  background-color: rgba(255, 255, 255, .6);
}

.linq-hero-dots .active {
  width: 52px;
  background-color: var(--linq-cyan);
}

/* ---------- Small screens ---------- */
@media (max-width: 767.98px) {
  .linq-hero-slide {
    padding-block: 3.25rem;
  }

  .linq-hero-ctrl {
    display: none;
  }

  /* swipe instead */
  .linq-hero-title {
    max-width: none;
  }

  .linq-hero-actions .btn {
    width: 100%;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

  .carousel-item.active .linq-hero-eyebrow,
  .carousel-item.active .linq-hero-title,
  .carousel-item.active .linq-hero-sub,
  .carousel-item.active .linq-hero-actions {
    animation: none;
  }
}

/* On small screens the text spans the full width, so the left-weighted
   scrim is not enough on its own - add a flat veil over the photo. */
@media (max-width: 991.98px) {
  .linq-hero-slide::after {
    background-color: rgba(11, 30, 63, .55);
  }
}

/* ============================================================
   REUSABLE SECTION TYPOGRAPHY
   Use .section-title and .section-subtitle in every section.
   ============================================================ */

/* Consistent vertical rhythm for every content section */
.linq-section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* Alternating background - add alongside .linq-section */
.linq-section--tint {
  background-color: var(--linq-surface);
}

/* The brand wordplay: copy that would say "connect" or "linking" says
   "LinQ" instead, and the mark is picked out in cyan. Two tones are needed
   because the same word lands on both backgrounds - #0cc0df is 7.6:1 on
   navy but only 2.2:1 on white, so light sections take the deeper cyan.
   Weight is inherited: the colour is decoration, never the only cue. */
.linq-brand {
  color: var(--linq-cyan-deep);
}

.linq-brand--on-navy {
  color: var(--linq-cyan);
}

.section-title {
  color: var(--linq-navy);
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
}

.section-subtitle {
  color: var(--linq-cyan-dark);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  margin-bottom: 2.25rem;
}

/* Body copy inside a section */
.section-text {
  color: var(--linq-body);
  font-size: clamp(1rem, 1.15vw, 1.075rem);
  line-height: 1.75;
  margin-bottom: 1.15rem;
}

.section-text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   THE JOURNEY RAIL
   Was the homepage's "More than a loan" band; that section has been
   removed, so .linq-connect and .linq-journey* are now used only by
   Our Approach on about-linq.php. No index.html section number.
   ============================================================ */

.linq-connect {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 2.75rem);
  color: var(--linq-navy);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
  text-align: center;
}

/* ---------- The journey: five dots on a connecting line ---------- */
.linq-journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.linq-journey-step {
  position: relative;
  padding-top: 62px;
  text-align: center;
}

/* Connector line running back to the previous dot, through the dot's
   centre (half the 48px dot, less half the line) */
.linq-journey-step::before {
  content: "";
  position: absolute;
  top: 23px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--linq-cyan);
  opacity: .45;
}

.linq-journey-step:first-child::before {
  display: none;
}

/* The LinQ mark stands in for the plain circle. It is decorative - the
   step title carries the meaning, and the span is aria-hidden - so it is a
   background rather than an <img>: the box keeps a fixed size, so nothing
   shifts while the file loads. The white disc behind the artwork masks the
   connector line running underneath it; the art is transparent, and the
   line would otherwise show through the gaps in the two links. */
.linq-journey-dot {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff url('../images/linq-bullet.png') center / 39px 39px no-repeat;
  transition: scale .2s ease;
}

/* Final node is the destination. Every mark is at full strength, so the
   ring carries the distinction the filled dot used to - the same halo the
   circle version had. */
.linq-journey-step--end .linq-journey-dot {
  box-shadow: 0 0 0 6px rgba(12, 192, 223, .18);
}

.linq-journey-label {
  display: block;
  padding-inline: .35rem;
  color: var(--linq-navy);
  font-size: clamp(.82rem, 1.05vw, .975rem);
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- Rail with the copy in a tooltip (how-we-work.php) ----------
   The rail carries titles only and each step's paragraph hangs below it
   as a tooltip. The trigger is a <button> because it is the keyboard and
   touch handle for that reveal - tapping it focuses it, which is the only
   way to reach the copy without a mouse. It is stripped back to the label
   it wraps. */
.linq-journey-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--linq-radius);
  background: none;
  font-family: inherit;
  /* Follows the step: centred under the dot on the rail, left once stacked */
  text-align: inherit;
  cursor: pointer;
}

.linq-journey-trigger:focus-visible {
  outline: 2px solid var(--linq-cyan-dark);
  outline-offset: 3px;
}

/* Stacked, every step's copy simply follows its title */
.linq-journey-detail {
  margin: .6rem 0 0;
  color: var(--linq-body);
  font-size: .95rem;
  line-height: 1.65;
}

/* The tooltip only exists where the rail is actually horizontal. Below
   this the rail stacks and there is no hover to reveal anything with, so
   the copy stays in the flow. */
@media (min-width: 768px) {

  /* Room for the tooltip to open into. Without it the card lands on top
     of the button below the rail. */
  .linq-process {
    padding-bottom: 7.5rem;
  }

  /* Squared up with the paragraphs above: the first mark's left edge on the
     text's left edge, the last mark's right edge on its right edge, the
     three between evenly spaced. It is the visible artwork that lines up,
     not the 48px disc: the art is ~36px wide once its transparent margin is
     discounted, so the end centres sit 18px in and the white disc overhangs
     the text edge unseen. Each step is a fifth of the rail, so a dot centred
     in its fifth would leave the ends short; --dot-x places it instead, as
     18px + n x (25% - 9px) for step n = 0..4 (% being the step's width). */
  .linq-process .linq-journey-step:nth-child(1) { --dot-x: 18px; }
  .linq-process .linq-journey-step:nth-child(2) { --dot-x: calc(25% + 9px); }
  .linq-process .linq-journey-step:nth-child(3) { --dot-x: 50%; }
  .linq-process .linq-journey-step:nth-child(4) { --dot-x: calc(75% - 9px); }
  .linq-process .linq-journey-step:nth-child(5) { --dot-x: calc(100% - 18px); }

  .linq-process .linq-journey-dot,
  .linq-process .linq-journey-step::after {
    left: var(--dot-x);
  }

  /* Middle titles follow their dot. translate's % is the button's own
     width, which is the step's width, so the same --dot-x applies. */
  .linq-process .linq-journey-trigger {
    translate: calc(var(--dot-x) - 50%) 0;
  }

  /* End titles align to the text edges instead of centring, so they do not
     hang past them. */
  .linq-process .linq-journey-step:first-child .linq-journey-trigger,
  .linq-process .linq-journey-step:last-child .linq-journey-trigger {
    translate: none;
  }

  .linq-process .linq-journey-step:first-child { text-align: left; }
  .linq-process .linq-journey-step:last-child  { text-align: right; }

  .linq-process .linq-journey-step:first-child .linq-journey-label { padding-left: 0; }
  .linq-process .linq-journey-step:last-child .linq-journey-label  { padding-right: 0; }

  /* Middle tooltips centre on the moved dot; the end ones keep their
     edge anchoring from above. */
  .linq-process .linq-journey-step:not(:first-child):not(:last-child) .linq-journey-detail {
    left: var(--dot-x);
  }

  /* With the dots off-centre the per-step connectors no longer meet, so one
     line runs the full rail from the first dot's centre to the last's. The
     dots' white discs mask it where it passes behind them. */
  .linq-process .linq-journey {
    position: relative;
  }

  .linq-process .linq-journey::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--linq-cyan);
    opacity: .45;
  }

  .linq-process .linq-journey-step::before {
    display: none;
  }

  /* Centred on the dot by half its own width, which leaves `translate`
     free to carry the lift. opacity rather than visibility: the copy
     stays in the accessibility tree whether or not it is on screen. */
  .linq-journey-detail {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 3;
    width: 17rem;
    margin: 0 0 0 -8.5rem;
    padding: .9rem 1.05rem;
    border: 1px solid var(--linq-border);
    border-radius: var(--linq-radius);
    background: #fff;
    box-shadow: var(--linq-shadow);
    text-align: left;
    opacity: 0;
    pointer-events: none;
    translate: 0 4px;
    transition: opacity .18s ease, translate .18s ease;
  }

  /* The two end steps would hang off the edge of the container */
  .linq-journey-step:first-child .linq-journey-detail {
    left: 0;
    margin-left: 0;
  }

  .linq-journey-step:last-child .linq-journey-detail {
    left: auto;
    right: 0;
    margin-left: 0;
  }

  /* The pointer sits on the step, not on the card, so it stays under the
     dot even where the card has been pushed sideways above. */
  .linq-journey-step::after {
    content: "";
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    z-index: 4;
    width: 12px;
    height: 12px;
    border-left: 1px solid var(--linq-border);
    border-top: 1px solid var(--linq-border);
    background: #fff;
    rotate: 45deg;
    translate: -50% 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, translate .18s ease;
  }

  .linq-journey-step:hover .linq-journey-detail,
  .linq-journey-step:focus-within .linq-journey-detail {
    opacity: 1;
    translate: 0 0;
  }

  .linq-journey-step:hover::after,
  .linq-journey-step:focus-within::after {
    opacity: 1;
    translate: -50% 0;
  }

  /* The step being read grows a little - there is no fill to switch on
     and no fade to lift, so scale carries the feedback. */
  .linq-journey-step:hover .linq-journey-dot,
  .linq-journey-step:focus-within .linq-journey-dot {
    scale: 1.12;
  }

  .linq-journey-step:hover .linq-journey-label,
  .linq-journey-step:focus-within .linq-journey-label {
    color: var(--linq-cyan-deep);
  }
}

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

  .linq-journey-dot,
  .linq-journey-detail,
  .linq-journey-step::after {
    transition: none;
  }
}

/* ---------- Stacked, with the copy in the flow ----------
   The rail's own small-screen rules below lay each step out as a flex row,
   which assumes a label and nothing else; these steps carry a paragraph
   too. Scoped to .linq-process so the bare component keeps its behaviour.
   The result is the vertical rail: dot at the top left, rule running down
   to the next one, copy indented beside it. */
@media (max-width: 767.98px) {
  /* Desktop gets its gap from the tooltip reserve above; down here there
     is no reserve, so the heading below needs the space explicitly. */
  .linq-process {
    margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  }

  .linq-process .linq-journey {
    gap: 0;
    max-width: none;
  }

  .linq-process .linq-journey-step {
    display: block;
    min-height: 0;
    padding: 0 0 1.75rem 62px;
  }

  .linq-process .linq-journey-step:last-child {
    padding-bottom: 0;
  }

  /* Half again on the stacked rail. Here the title heads the paragraph
     below it rather than captioning a dot, so it carries more weight.
     1.23rem is the .82rem the clamp bottoms out at, plus 50%. */
  .linq-process .linq-journey-label {
    font-size: 1.23rem;
  }

  .linq-process .linq-journey-dot {
    top: 0;
    translate: 0 0;
  }

  /* Runs down from this dot to the next, so it is the last step that has
     no line rather than the first. */
  .linq-process .linq-journey-step::before {
    top: 52px;
    right: auto;
    bottom: 0;
    left: 23px;
    width: 2px;
    height: auto;
    margin-bottom: 0;
  }

  .linq-process .linq-journey-step:first-child::before {
    display: block;
  }

  .linq-process .linq-journey-step:last-child::before {
    display: none;
  }
}

/* ---------- Stack vertically on small screens ---------- */
@media (max-width: 767.98px) {
  .linq-journey {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    max-width: 320px;
    margin-inline: auto;
  }

  .linq-journey-step {
    display: flex;
    align-items: center;
    min-height: 26px;
    padding: 0 0 0 46px;
    text-align: left;
  }

  /* Line becomes vertical, running up to the previous dot */
  .linq-journey-step::before {
    top: auto;
    bottom: 50%;
    left: 10px;
    right: auto;
    width: 2px;
    height: 1.35rem;
    margin-bottom: 13px;
  }

  .linq-journey-dot {
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }

  .linq-journey-label {
    padding-inline: 0;
  }
}

/* ============================================================
   THE STEP RAIL
   Vertical sibling of .linq-journey above. It was how-we-work.php,
   which now uses the horizontal rail instead and reveals each step's
   sentence on hover - so nothing renders these rules today. Kept
   because .linq-step-num is still used by the rail's titles, and this
   is the layout to come back to if the copy per step grows.
   ============================================================ */

.linq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linq-step {
  position: relative;
  padding: 0 0 clamp(1.75rem, 3.5vw, 2.6rem) 3.25rem;
}

/* Rail drops from this step's dot to the next one. bottom: 0 lands on the
   following <li>'s top edge, where its dot begins, so the padding-bottom
   gap above reads as one continuous line. */
.linq-step::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: var(--linq-cyan);
  opacity: .45;
}

.linq-step:last-child {
  padding-bottom: 0;
}

.linq-step:last-child::before {
  display: none;
}

.linq-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border: 3px solid var(--linq-cyan);
  border-radius: 50%;
  background: #fff;
}

/* Final node is the destination - filled, matching .linq-journey-step--end */
.linq-step--end::after {
  background: var(--linq-cyan);
  box-shadow: 0 0 0 5px rgba(12, 192, 223, .18);
}

.linq-step-title {
  margin: 0 0 .5rem;
  color: var(--linq-navy);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Navy on cyan-dark, not the mid cyan: the number is small type and
   --linq-cyan only clears 2.2:1 on white. */
.linq-step-num {
  margin-right: .4rem;
  color: var(--linq-cyan-dark);
}

.linq-step-text {
  margin: 0;
  color: var(--linq-body);
  font-size: 1rem;
  line-height: 1.7;
}

/* The dot column costs too much width on a phone */
@media (max-width: 575.98px) {
  .linq-step {
    padding-left: 2.5rem;
  }
}
/* ============================================================
   SECTION 3 - WHY LINQ CAPITAL
   ============================================================ */

.linq-people {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* The three cards under the Why LinQ intro on about-linq.php. The intro
   is .section-text, which zeroes its own margin as :last-child, so the
   whole gap has to come from here: two blank lines of that copy, i.e.
   2 x its 1.75 line-height at the top of the type clamp. */
.linq-why-cards {
  margin-top: 3.75rem;
}

/* position: relative is the containing block .stretched-link needs. Only
   the About page uses that (the card opens a modal); the homepage cards
   are inert and unaffected by it. */
.linq-person {
  position: relative;
  height: 100%;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background: #fff;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.linq-person:hover {
  border-color: rgba(12, 192, 223, .45);
  box-shadow: var(--linq-shadow);
  transform: translateY(-3px);
}

.linq-person-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.15rem;
}

/* 5:6 portraits cropped square; the offset keeps the face centred */
.linq-person-photo {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--linq-cyan);
}

.linq-person-name {
  margin: 0 0 .4rem;
  color: var(--linq-navy);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.015em;
}

.linq-person-chip {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--linq-cyan-soft);
  color: var(--linq-cyan-dark);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.linq-person-text {
  margin-bottom: 1.1rem;
  color: var(--linq-body);
  font-size: 1rem;
  line-height: 1.7;
}

.linq-person-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--linq-navy);
  font-size: .9rem;
  font-weight: 600;
  transition: color .18s ease;
}

/* Direct contact on a person card, and in their modal. position/z-index
   are load-bearing on the About cards: .linq-person-more is a
   .stretched-link covering the whole card, and without a stacking context
   of its own it would swallow every click on the phone and email. */
.linq-person-contact {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .4rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

.linq-person-contact li {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.linq-person-contact i {
  flex: 0 0 auto;
  color: var(--linq-cyan-dark);
}

/* The address is long against a half-width card, so let it break rather
   than push the card wider. */
.linq-person-contact a {
  color: var(--linq-body);
  font-size: .925rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .18s ease;
}

.linq-person-contact a:hover,
.linq-person-contact a:focus-visible {
  color: var(--linq-cyan-deep);
}

.linq-person-link i {
  color: var(--linq-cyan);
  font-size: 1.1rem;
}

.linq-person-link:hover {
  color: var(--linq-cyan-dark);
}

/* ---------- Card as a dialog trigger (About LinQ) ----------
   A <button> stripped back to look like .linq-person-link. It carries
   .stretched-link, so the hit area is the whole card while the
   accessible name stays "Read Raven's profile" rather than the card's
   entire text content. */
.linq-person-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--linq-navy);
  font-size: .9rem;
  font-weight: 600;
  transition: color .18s ease;
}

.linq-person-more i {
  color: var(--linq-cyan);
  font-size: 1.05rem;
  transition: transform .18s ease;
}

/* Driven off the card, not the button: the pointer is almost never over
   the button itself, since the stretched link covers everything. */
.linq-person:hover .linq-person-more {
  color: var(--linq-cyan-dark);
}

.linq-person:hover .linq-person-more i {
  transform: translateX(3px);
}

/* The ::after of .stretched-link is what actually receives the focus
   ring, so outline it there or the ring hugs the invisible button. */
.linq-person-more:focus-visible {
  outline: none;
}

.linq-person-more:focus-visible::after {
  outline: 3px solid var(--linq-cyan);
  outline-offset: 3px;
  border-radius: var(--linq-radius);
}

/* ---------- Dialog chrome, shared by the bio modals and the enquiry form ---------- */
.linq-person-modal .modal-content,
.linq-form-modal .modal-content {
  border: 0;
  border-radius: var(--linq-radius);
  box-shadow: 0 24px 60px rgba(11, 30, 63, .28);
}

.linq-person-modal .modal-header,
.linq-form-modal .modal-header {
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--linq-border);
}

.linq-person-modal .modal-title,
.linq-form-modal .modal-title {
  margin: 0;
  color: var(--linq-navy);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.025em;
}

.linq-person-modal-lead {
  margin: .3rem 0 0;
  color: var(--linq-muted);
  font-size: .95rem;
}

/* .linq-profile-figure is built for a full-width column; inside the
   dialog it only needs to stop the portrait dominating the layout. */
.linq-person-modal .linq-profile-figure {
  max-width: 16rem;
}

/* The bio comes out of tblpeople as editor-authored <p> elements, so
   .section-text cannot be put on each paragraph the way it is everywhere
   else — the markup does not know how many there are. Same four values,
   addressed through the wrapper, so the dialog keeps the body typography
   used across the site. */
.linq-person-bio > p {
  color: var(--linq-body);
  font-size: clamp(1rem, 1.15vw, 1.075rem);
  line-height: 1.75;
  margin-bottom: 1.15rem;
}
.linq-person-bio > p:last-child {
  margin-bottom: 0;
}

/* ---------- CMS-authored body copy ---------- */
/* .linq-richtext marks any block filled from a TinyMCE field - s_detail on the
   service pages, f_answer on the FAQs, p_detail in the profile dialogs, and
   pg_detail once tblpage has a template. An image inserted through the editor
   arrives with no class of its own, so it can only be reached through its
   container. The 20px keeps body text off the edge of a floated or inline
   image, which otherwise butts straight up against it. */
.linq-richtext img {
  margin: 20px;
}

/* The What We Do service pages (s_detail) opt out, by request: there the
   image sits flush. The other rich-text areas keep the 20px above. */
.linq-richtext--service img {
  margin: 0;
}


/* ---------- Enquiry form ---------- */
/* Bootstrap's own focus ring and :valid/:invalid styling are its blue
   #0d6efd, which is off-brand everywhere on this site. Only the tokens
   change here - the geometry stays Bootstrap's. */
.linq-form .form-label {
  margin-bottom: .35rem;
  color: var(--linq-navy);
  font-size: .9rem;
  font-weight: 600;
}

.linq-form-req {
  color: var(--linq-cyan-dark);
}

.linq-form .form-control,
.linq-form .form-select {
  border-color: var(--linq-border);
  border-radius: calc(var(--linq-radius) / 2);
  color: var(--linq-body);
}

.linq-form .form-control:focus,
.linq-form .form-select:focus {
  border-color: var(--linq-cyan);
  box-shadow: 0 0 0 .2rem rgba(12, 192, 223, .25);
}

.linq-form .form-control::placeholder {
  color: var(--linq-muted);
}

/* The select sits on the placeholder option until a real choice is made;
   grey it so it reads as prompt text rather than an answer. */
.linq-form .form-select:has(option[value=""]:checked) {
  color: var(--linq-muted);
}

.linq-form-consent {
  margin: .35rem 0 0;
  color: var(--linq-muted);
  font-size: .85rem;
  line-height: 1.6;
}

.linq-form-consent a {
  color: var(--linq-cyan-dark);
  text-decoration: underline;
}

/* ---------- Together ---------- */
.linq-together {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  border-radius: var(--linq-radius);
  background:
    radial-gradient(circle at 88% 22%, rgba(12, 192, 223, .28), transparent 58%),
    linear-gradient(120deg, #0b1e3f 0%, #123159 100%);
  color: #fff;
  text-align: center;
}

.linq-together-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .85rem;
  padding: .3rem .9rem;
  border: 1px solid rgba(12, 192, 223, .5);
  border-radius: 999px;
  background: rgba(12, 192, 223, .12);
  color: var(--linq-cyan);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.linq-together-label i {
  font-size: 1.15rem;
}

.linq-together-text {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
  .linq-person-head {
    gap: .9rem;
  }

  .linq-person-photo {
    width: 88px;
    height: 88px;
  }
}

/* ============================================================
   SECTION 4 - SERVICES
   ============================================================ */

.linq-service {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.4rem, 2.2vw, 1.85rem);
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background: #fff;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.linq-service:hover {
  border-color: rgba(12, 192, 223, .45);
  box-shadow: var(--linq-shadow);
  transform: translateY(-4px);
}

.linq-service-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.15rem;
  border-radius: 14px;
  background: var(--linq-cyan-soft);
  color: var(--linq-cyan-dark);
  font-size: 1.6rem;
  transition: background-color .25s ease, color .25s ease;
}

.linq-service:hover .linq-service-icon {
  background: var(--linq-cyan);
  color: #fff;
}

.linq-service-title {
  margin-bottom: .65rem;
  color: var(--linq-navy);
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.linq-service-text {
  margin-bottom: 1.5rem;
  color: var(--linq-body);
  font-size: .975rem;
  line-height: 1.65;
}

/* mt-auto keeps every button on the same baseline regardless of copy length */
.linq-service-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  margin-top: auto;
  padding-inline: 1rem;
  font-size: .925rem;
  text-align: left;
}

.linq-service-btn i {
  flex: 0 0 auto;
  color: var(--linq-cyan);
  transition: transform .22s ease, color .22s ease;
}

.linq-service:hover .linq-service-btn i {
  transform: translateX(4px);
}

.linq-service-btn:hover i {
  color: var(--linq-cyan-dark);
}

/* ============================================================
   REUSABLE PANEL
   Light grey box with a cyan border. Wrap a section's content
   in <div class="linq-panel"> to lift it off the page.
   ============================================================ */
.linq-panel {
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--linq-cyan);
  border-radius: calc(var(--linq-radius) * 1.6);
  background-color: var(--linq-surface);
}

/* ============================================================
   SECTION 5 - SOCIAL PROOF
   ============================================================ */

.linq-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background: #fff;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.linq-quote:hover {
  border-color: rgba(12, 192, 223, .45);
  box-shadow: var(--linq-shadow);
  transform: translateY(-4px);
}

/* Decorative quote glyph, behind the text */
.linq-quote-mark {
  position: absolute;
  top: .5rem;
  right: 1rem;
  color: var(--linq-cyan);
  font-size: 3.25rem;
  line-height: 1;
  opacity: .16;
  pointer-events: none;
}

.linq-stars {
  display: flex;
  gap: .18rem;
  margin-bottom: .9rem;
  color: var(--linq-cyan);
  font-size: 1rem;
}

.linq-quote-text {
  margin: 0 0 1.4rem;
  color: var(--linq-body);
  font-size: 1rem;
  line-height: 1.7;
}

/* Footer pinned to the base so avatars line up across the row */
.linq-quote-foot {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linq-border);
}

.linq-quote-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--linq-cyan-soft);
  color: var(--linq-cyan-dark);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.linq-quote-name {
  display: block;
  color: var(--linq-navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.linq-quote-meta {
  display: block;
  color: var(--linq-muted);
  font-size: .85rem;
  line-height: 1.4;
}

/* ---------- Testimonial carousel ----------
   A native scroll-snap track rather than a Bootstrap carousel: the number
   of visible cards changes per breakpoint (3 / 2 / 1), which fixed
   carousel-items cannot do without duplicating markup. Touch swipe and
   keyboard scrolling come free with native overflow. */

.linq-quotes {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.linq-quotes-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .25rem .25rem 1.25rem;
  /* room for the hover lift + shadow */
  margin-inline: -.25rem;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
}

.linq-quotes-track::-webkit-scrollbar {
  display: none;
}

.linq-quotes-track:focus-visible {
  outline: 2px solid var(--linq-cyan);
  outline-offset: 4px;
  border-radius: var(--linq-radius);
}

.linq-quotes-item {
  flex: 0 0 calc((100% - 3rem) / 3);
  /* 3 up, minus the two gaps */
  scroll-snap-align: start;
}

@media (max-width: 991.98px) {
  .linq-quotes-item {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}

@media (max-width: 575.98px) {
  .linq-quotes-item {
    flex-basis: 100%;
  }
}

/* ---------- Controls ---------- */
.linq-quotes-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}

.linq-quotes-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linq-border);
  border-radius: 50%;
  background: #fff;
  color: var(--linq-navy);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.linq-quotes-arrow:hover:not(:disabled) {
  background: var(--linq-cyan);
  border-color: var(--linq-cyan);
  color: var(--linq-navy);
}

.linq-quotes-arrow:focus-visible {
  outline: 2px solid var(--linq-cyan);
  outline-offset: 2px;
}

.linq-quotes-arrow:disabled {
  opacity: .35;
  cursor: default;
}

.linq-quotes-dots {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.linq-quotes-dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 30, 63, .18);
  cursor: pointer;
  transition: background-color .25s ease, width .25s ease;
}

.linq-quotes-dot:hover {
  background: rgba(11, 30, 63, .35);
}

.linq-quotes-dot.is-active {
  width: 46px;
  background: var(--linq-cyan);
}

.linq-quotes-dot:focus-visible {
  outline: 2px solid var(--linq-cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .linq-quotes-track {
    scroll-behavior: auto;
  }
}

/* Nothing to page through - hide the controls entirely */
.linq-quotes.is-static .linq-quotes-nav {
  display: none;
}

/* ============================================================
   SCROLL REVEAL
   The .linq-reveal class is added by js/main.js, never in the HTML,
   so content stays visible if JS fails or is blocked.

   Uses the standalone `translate` property rather than `transform`
   so it cannot clash with the hover lifts on cards, which do use
   `transform`. Both can then animate independently.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .linq-reveal {
    opacity: 0;
    translate: 0 22px;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
      translate .7s cubic-bezier(.22, .61, .36, 1);
  }

  .linq-reveal.is-visible {
    opacity: 1;
    translate: none;
  }
}

/* ============================================================
   SECTION 6 - FOOTER
   Navy band closing the page. Everything sits on --linq-navy, so
   link colours are white at varying alpha rather than the greys
   used in the light sections.
   ============================================================ */
.linq-footer {
  background-color: var(--linq-navy);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

/* One shared focus ring - the browser default is close to invisible
   against navy, and none of these links carry an underline. */
.linq-footer a:focus-visible {
  outline: 2px solid var(--linq-cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Brand band ---------- */
.linq-footer-top {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* Below lg the brand spans the full width, where an unconstrained
   measure would run to 90+ characters. In the lg column the grid
   already does the constraining and this has no effect. */
.linq-footer-brand {
  max-width: 34rem;
}

.linq-footer-logo-link {
  display: inline-block;
}

/* Same knock-out as the overlay header: the navy half of the mark is
   invisible on navy. A reversed PNG would keep the cyan - see the note
   on .linq-navbar.is-transparent .linq-logo. */
.linq-footer-logo {
  display: block;
  height: 76px;
  width: auto;
  filter: brightness(0) invert(1);
}

.linq-footer-blurb {
  margin: 1.25rem 0 0;
  font-size: .975rem;
  line-height: 1.7;
}

.linq-footer-cta-text {
  margin: 0 0 1.25rem;
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
}

/* Navy on navy would vanish, so the footer CTA inverts to white and
   fills with cyan on hover. Navy text on both is 14:1 and 7.6:1. */
.linq-footer .btn-linq {
  --bs-btn-color: var(--linq-navy);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--linq-navy);
  --bs-btn-hover-bg: var(--linq-cyan);
  --bs-btn-hover-border-color: var(--linq-cyan);
  --bs-btn-active-color: var(--linq-navy);
  --bs-btn-active-bg: var(--linq-cyan-dark);
  --bs-btn-active-border-color: var(--linq-cyan-dark);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

/* ---------- Social ---------- */
.linq-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linq-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

/* border-radius is repeated here on purpose: the shared
   .linq-footer a:focus-visible rule sets a 3px radius, which outranks the
   50% above and would square these off the moment they take focus. */
.linq-footer-social a:hover,
.linq-footer-social a:focus-visible {
  border-radius: 50%;
  color: var(--linq-navy);
  background-color: var(--linq-cyan);
  border-color: var(--linq-cyan);
}

.linq-footer-title {
  margin-bottom: 1rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--linq-cyan);
}

.linq-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linq-footer-list li+li {
  margin-top: .5rem;
}

.linq-footer-list a {
  display: inline-block;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .18s ease;
}

.linq-footer-list a:hover,
.linq-footer-list a:focus-visible {
  color: var(--linq-cyan);
}

/* ---------- Bottom bar ---------- */
.linq-footer-bottom {
  padding-block: 1.5rem 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
}

/* Utility links left, social right. Both wrap, and once the pair no
   longer fits on one line the social row drops beneath the links rather
   than stranding itself against the right edge. */
.linq-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}

.linq-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linq-footer-meta a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .18s ease;
}

.linq-footer-meta a:hover,
.linq-footer-meta a:focus-visible {
  color: var(--linq-cyan);
}

/* Accreditation marks, below the social row. Both files are navy artwork
   and AFCA's carries its own white ground, so each sits on a white plate:
   on the footer navy the AFCA wordmark would otherwise be invisible and
   the MFAA badge would sink into the background. The plate's padding is
   what makes AFCA's baked-in white read as part of the plate. */
.linq-footer-member {
  margin-bottom: 1.5rem;
}

.linq-footer-member-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linq-footer-member-list li {
  display: flex;
  padding: .5rem .7rem;
  border-radius: var(--linq-radius);
  background: #fff;
}

/* Matched on height, not width - the two marks are different shapes */
.linq-footer-member-list img {
  width: auto;
  height: 52px;
}

.linq-footer-legal {
  max-width: 62rem;
  margin: 0 0 .75rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.7;
}

.linq-footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 575.98px) {
  .linq-footer-logo {
    height: 62px;
  }
}


/* ============================================================
   INNER PAGES - PAGE HEAD
   Navy band directly under the solid header. Inner pages have no
   hero, so this is what stops the content starting cold against
   the white navbar.
   ============================================================ */
.linq-pagehead {
  background-color: var(--linq-navy);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Breadcrumb ---------- */
.linq-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
}

.linq-crumbs li {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .55);
}

/* Separator on every item except the first - a pseudo-element rather
   than markup, so screen readers read the trail without the slashes. */
.linq-crumbs li+li::before {
  content: "/";
  color: rgba(255, 255, 255, .3);
}

.linq-crumbs a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: color .18s ease;
}

.linq-crumbs a:hover,
.linq-crumbs a:focus-visible {
  color: var(--linq-cyan);
}

/* ---------- Title block ---------- */
.linq-pagehead-title {
  margin: 0 0 .75rem;
  color: var(--linq-cyan);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.linq-pagehead-lead {
  max-width: 46rem;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   INNER PAGES - PROFILE
   ============================================================ */
.linq-profile-figure {
  margin: 0;
  border-radius: var(--linq-radius);
  overflow: hidden;
  box-shadow: var(--linq-shadow);
}

.linq-profile-photo {
  display: block;
  width: 100%;
  height: auto;
}

.linq-profile-subhead {
  margin: 2rem 0 1.25rem;
  color: var(--linq-navy);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ============================================================
   TOPIC TABS
   Bootstrap's .nav-underline, rebranded through its 5.3 CSS
   variables rather than by out-specifying its rules: left alone a
   nav link is Bootstrap blue. The rail under the row is ours - the
   underline variant ships without one - and the links pull down
   over it so the active underline replaces it rather than
   doubling it.
   ============================================================ */
.linq-tabs-nav {
  --bs-nav-link-color: var(--linq-navy);
  --bs-nav-link-hover-color: var(--linq-cyan-deep);
  --bs-nav-underline-link-active-color: var(--linq-cyan-deep);
  --bs-nav-underline-border-width: 3px;
  --bs-nav-underline-gap: clamp(1.25rem, 3vw, 2.25rem);

  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--linq-border);
}

.linq-tabs-nav .nav-link {
  /* inline-flex so the icon sits on the text baseline row and the gap
     does not depend on a space in the markup */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: -1px;
  padding-bottom: .7rem;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 600;
}

/* The icon follows the label's colour through every state - active,
   hover and rest - so it is never left navy against cyan type. */
.linq-tabs-nav .nav-link i {
  font-size: 1.05em;
  line-height: 1;
}

.linq-tabs-nav .nav-link:focus-visible {
  outline: 2px solid var(--linq-cyan-dark);
  outline-offset: 2px;
}

/* The line each panel opens on. --linq-cyan-deep, not .txtcyan: the
   bright cyan is only 2.2:1 against this white body. */
.linq-tabs-lead {
  margin-bottom: .85rem;
  color: var(--linq-cyan-deep);
  font-size: 1.05rem;
  font-weight: 600;
}

.linq-tabs .tab-pane p {
  line-height: 1.7;
}

/* ---------- Partner logos ----------
   The files are square with their own white ground, so the card is what
   gives a row of differently shaped marks one footprint. The logo is
   capped on height rather than width: sized by width, a wide wordmark and
   a square badge would read as wildly different sizes. Padding is kept
   tight so the mark can fill the card at four across. */
.linq-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 14rem;
  padding: clamp(.85rem, 1.8vw, 1.15rem);
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background: #fff;
  /* A transform ignores max-width, so the zoomed mark could reach past the
     border on a narrow column. The card is sized to hold it; this is the
     backstop. */
  overflow: hidden;
}

.linq-partner img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 10rem;
  transition: scale .25s ease;
}

/* Zoom on the whole card, not the image alone: the padding is a thin band
   and switching the zoom on and off as the pointer crossed it would flicker.
   min-height above carries the 15% so the mark grows inside its card rather
   than being clipped by it. */
.linq-partner:hover img,
.linq-partner:focus-within img {
  scale: 1.15;
}

@media (prefers-reduced-motion: reduce) {
  .linq-partner img {
    transition: none;
  }
}

/* Two columns where there is room, one where there is not - no
   breakpoint needed, the track width decides. */
.linq-speciality {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linq-speciality li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--linq-body);
  line-height: 1.6;
}

/* bi-check2 drawn from the icon font already loaded on the page.
   The codepoint is read straight from css/bootstrap-icons.min.css. */
.linq-speciality li::before {
  content: "\f272";
  position: absolute;
  left: 0;
  top: 0;
  font-family: bootstrap-icons;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--linq-cyan);
}

/* A fixed 2 x 2 for lists of four. The base auto-fit track fits three
   columns in the article measure, which strands the fourth item alone on
   its own row; pinning the count keeps the pairs balanced. The row gap is
   the base .75rem plus one line of body copy, so the two rows read as
   separate pairs without a drawn divider between them. */
.linq-speciality--two-col {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 2.35rem;
}

@media (max-width: 575.98px) {
  .linq-speciality--two-col {
    grid-template-columns: 1fr;
  }
}

/* Justified points, by request. The columns are narrow, so hyphenation
   (driven by <html lang="en">) keeps the stretched word gaps from opening
   into rivers. */
.linq-speciality--justify li {
  text-align: justify;
  hyphens: auto;
}

/* The same treatment for a single block of running text - Bootstrap has no
   justify utility. */
.linq-justify {
  text-align: justify;
  hyphens: auto;
}

/* A landscape banner rather than a portrait photo - it now spans the
   main column, so cap how tall it can get on a wide screen. */
/* Campaign poster (campaign.php). Full column width on phones and tablets;
   from lg, where the sidebar sits beside it, 75% of the content column -
   a tall flyer at full width would run well over a screen high - and
   centred in that column, by request. Below lg it is full width, so
   centring changes nothing there. */
@media (min-width: 992px) {
  .linq-campaign-poster {
    width: 75%;
    margin-inline: auto;
  }
}

.linq-profile-figure--wide {
  margin-bottom: 2.25rem;
}

.linq-profile-figure--wide .linq-profile-photo {
  max-height: 26rem;
  object-fit: cover;
}

/* ============================================================
   INNER PAGES - SIDE NAV
   Sibling links for the section a page sits in. Deliberately
   carries no current-page highlight: aria-current marks the
   active item for screen readers and nothing styles it.
   ============================================================ */
.linq-sidenav {
  padding: 1.5rem;
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background-color: var(--linq-surface);
}

/* Sticky only where there is a second column to sit beside. The offset
   clears the shrunken header, which is what is on screen once the page
   has scrolled far enough for this to matter. */
@media (min-width: 992px) {
  .linq-sidenav {
    position: sticky;
    top: calc(var(--linq-nav-h-scrolled) + 1.5rem);
  }

  /* A side column holding the sidenav plus extras (campaign.php's Terms
     button) sticks as a whole, so the extras travel with the box. The
     sidenav inside must not stick on its own: it would slide down within
     the wrapper and over the button. Sticky also needs the column around
     .linq-sidecol to be taller than it - so no align-items-start on the row. */
  .linq-sidecol {
    position: sticky;
    top: calc(var(--linq-nav-h-scrolled) + 1.5rem);
  }

  .linq-sidecol .linq-sidenav {
    position: static;
  }
}

.linq-sidenav-title {
  margin: 0 0 1rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--linq-border);
  color: var(--linq-navy);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.linq-sidenav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linq-sidenav-list li+li {
  margin-top: .125rem;
}

.linq-sidenav-list a {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .5rem .625rem;
  border-radius: 8px;
  color: var(--linq-body);
  font-size: .9375rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}

/* bi-chevron-right from the icon font already on the page - codepoint
   read straight out of css/bootstrap-icons.min.css. */
.linq-sidenav-list a::before {
  content: "\f285";
  flex: 0 0 auto;
  font-family: bootstrap-icons;
  font-size: .7rem;
  color: var(--linq-cyan);
}

.linq-sidenav-list a:hover,
.linq-sidenav-list a:focus-visible {
  background-color: #fff;
  color: var(--linq-navy);
}

/* ============================================================
   FAQS
   ============================================================ */

/* Native <details> disclosure, so no script is needed and the panel
   never picks up Bootstrap's blue. Rows are separated by a rule rather
   than boxed, which keeps a long list from reading as a stack of cards. */
.linq-faq-item {
  border-top: 1px solid var(--linq-border);
}

.linq-faq-item:last-child {
  border-bottom: 1px solid var(--linq-border);
}

.linq-faq-q {
  position: relative;
  display: block;
  padding: 1.15rem 2.5rem 1.15rem 0;
  color: var(--linq-navy);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  /* the default marker is replaced by the chevron below */
  transition: color .18s ease;
}

/* Safari still draws the triangle from the shadow DOM pseudo-element. */
.linq-faq-q::-webkit-details-marker {
  display: none;
}

/* bi-chevron-down from the icon font already on the page - codepoint
   read straight out of css/bootstrap-icons.min.css. */
.linq-faq-q::after {
  content: "\f282";
  position: absolute;
  right: 0;
  top: 1.15rem;
  font-family: bootstrap-icons;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--linq-cyan);
  transition: transform .2s ease;
}

.linq-faq-item[open] .linq-faq-q::after {
  transform: rotate(180deg);
}

.linq-faq-q:hover,
.linq-faq-item[open] .linq-faq-q {
  color: var(--linq-cyan-deep);
}

/* The row, not just the text, takes the focus ring - the summary is the
   whole hit area, so outlining it is what a keyboard user expects. */
.linq-faq-q:focus-visible {
  outline: 2px solid var(--linq-cyan-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.linq-faq-a {
  padding: 0 2.5rem 1.35rem 0;
  color: var(--linq-body);
  line-height: 1.7;
}

.linq-faq-a p:last-child {
  margin-bottom: 0;
}

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

  .linq-faq-q,
  .linq-faq-q::after {
    transition: none;
  }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* The enquiry form inline on the contact page. The modal gets its
   surround from Bootstrap's .modal-content; on the page the same form
   needs a card of its own, or it reads as loose fields on the section
   background. Tinted rather than white so it separates from the page
   without a heavy border. */
.linq-form-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background-color: var(--linq-surface);
  box-shadow: var(--linq-shadow);
}

/* The panel already carries the heading, so the section helpers' top
   margin would push it off the padding edge. */
.linq-form-panel .section-title {
  margin-top: 0;
}

.linq-form-panel .section-text {
  margin-bottom: 1.75rem;
}

/* White fields on the tinted panel - .form-control is transparent by
   default, which would sink the inputs into the card. */
.linq-form-panel .form-control,
.linq-form-panel .form-select {
  background-color: #fff;
}

/* Honeypot on the enquiry form. Off-screen rather than display:none or
   hidden - a bot that skips hidden fields is exactly the one worth
   catching, and this stays invisible while still being "rendered". */
.linq-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   WHO WE WORK WITH - scrolling lender logos (inc-partner-logos.php)
   ============================================================ */
/* The gap lives here, not on .linq-marquee, because still rows
   (.linq-marquee-list--static) sit outside any marquee and need the same
   spacing. */
.linq-logos {
  --linq-marquee-gap: 2rem;
  margin-block: 3.5rem;
}

.linq-logos .linq-profile-subhead {
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}

.linq-marquee:focus-visible {
  outline: 2px solid var(--linq-cyan-dark);
  outline-offset: 2px;
}

/* The row clips the track. Logos run hard to the edges - no fade, by
   request. */
.linq-marquee {
  overflow: hidden;
}

.linq-marquee-track {
  display: flex;
  width: max-content;
}

/* Trailing padding equal to the gap keeps the seam between the two copies
   the same width as every other gap, so the loop point cannot be seen. */
.linq-marquee-list {
  display: flex;
  align-items: center;
  gap: var(--linq-marquee-gap);
  margin: 0;
  padding: 0 var(--linq-marquee-gap) 0 0;
  list-style: none;
}

/* A category with plc_scroll = 0: one copy, wrapping onto as many lines as
   it needs, so every logo is visible without motion or a scrollbar. The
   trailing padding only exists to hide the marquee's loop seam. */
.linq-marquee-list--static {
  flex-wrap: wrap;
  row-gap: 1rem;
  padding-right: 0;
}

/* Capped on height, the same reasoning as .linq-partner img: the files
   share one 3:2 canvas, so equal height means equal visual weight. */
.linq-marquee-item img {
  display: block;
  width: auto;
  height: 5rem;
}

/* Animation only where motion is welcome. -50% is exactly one copy's
   width, because the track holds two identical copies. */
@media (prefers-reduced-motion: no-preference) {
  .linq-marquee-track {
    animation: linq-marquee var(--linq-marquee-duration, 30s) linear infinite;
  }

  /* Hover deliberately does not stop the rows, and there is no pause
     button - both removed on request. Keyboard focus still stops a row:
     it costs mouse users nothing, and without it a keyboard user has no
     way to hold a logo still. Visitors with reduced motion get no
     animation at all (below). */
  .linq-marquee:focus-within .linq-marquee-track {
    animation-play-state: paused;
  }
}

@keyframes linq-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* With reduced motion there is nothing to loop: the duplicate copy goes,
   and each row becomes an ordinary swipeable strip instead. */
@media (prefers-reduced-motion: reduce) {
  .linq-marquee {
    overflow-x: auto;
  }

  .linq-marquee-list[aria-hidden="true"],
  .linq-marquee-item[aria-hidden="true"] {
    display: none;
  }
}

/* ============================================================
   ARTICLES (articles.php)
   Summary cards, three to a row from lg, then the pager.
   ============================================================ */

/* The whole card opens the article: the title link is a .stretched-link,
   which needs position: relative here to stay inside the card. The hover
   lift matches .linq-service. */
.linq-article {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background: #fff;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.linq-article:hover {
  border-color: rgba(12, 192, 223, .45);
  box-shadow: var(--linq-shadow);
  transform: translateY(-4px);
}

.linq-article-title a {
  color: inherit;
  text-decoration: none;
}

/* The ring is drawn round the whole card rather than the title: the
   stretched link's ::after is what covers the card, so that is the thing a
   keyboard user is about to open. */
.linq-article-title a:focus-visible {
  outline: none;
}

.linq-article-title a:focus-visible::after {
  border-radius: var(--linq-radius);
  outline: 3px solid var(--linq-cyan);
  outline-offset: -3px;
}

.linq-article:hover .linq-article-title a {
  color: var(--linq-cyan-deep);
}

/* One fixed shape for every card's photo, whatever was uploaded, so the
   titles in a row line up. cover crops rather than letterboxes. */
.linq-article-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--linq-surface);
}

.linq-article-img--none {
  display: grid;
  place-items: center;
  color: var(--linq-cyan-deep);
  font-size: 2.5rem;
  background: var(--linq-cyan-soft);
}

.linq-article-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.15rem, 2vw, 1.5rem);
}

.linq-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .85rem;
  padding: 0;
  list-style: none;
}

/* cyan-deep on cyan-soft, not cyan: cyan type on a pale ground fails
   contrast (see --linq-cyan-deep). */
.linq-article-tags li {
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--linq-cyan-soft);
  color: var(--linq-cyan-deep);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

.linq-article-title {
  margin-bottom: .4rem;
  color: var(--linq-navy);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.linq-article-meta {
  margin-bottom: .85rem;
  color: var(--linq-muted);
  font-size: .85rem;
}

.linq-article-text {
  margin-bottom: 0;
  color: var(--linq-body);
  font-size: .95rem;
  line-height: 1.65;
}

/* Pager. Hand-rolled rather than Bootstrap's .pagination, whose active
   state is the off-brand #0d6efd. The current page is navy with white type. */
.linq-pagination {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.linq-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linq-pagination a,
.linq-pagination span {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: .5rem;
  border: 1px solid var(--linq-border);
  border-radius: var(--linq-radius);
  background: #fff;
  color: var(--linq-navy);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.linq-pagination a:hover {
  border-color: var(--linq-cyan);
  background: var(--linq-cyan-soft);
}

.linq-pagination a:focus-visible {
  outline: 3px solid var(--linq-cyan);
  outline-offset: 2px;
}

.linq-pagination a[aria-current="page"] {
  border-color: var(--linq-navy);
  background: var(--linq-navy);
  color: #fff;
}

.linq-pagination .is-disabled {
  color: var(--linq-border);
}

.linq-pagination .is-gap {
  border-color: transparent;
  background: transparent;
  color: var(--linq-muted);
}