/* ============================================================
   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 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');
}

/* ---------- 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: 46px;
  text-align: center;
}

/* Connector line running back to the previous dot */
.linq-journey-step::before {
  content: "";
  position: absolute;
  top: 15px;
  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: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff url('../images/linq-bullet.png') center / 26px 26px 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 5px 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;
  }

  /* 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 46px;
  }

  .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: 36px;
    right: auto;
    bottom: 0;
    left: 15px;
    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;
}


/* ---------- 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;
  }
}

/* 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. */
.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);
  }
}

.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;
}