:root {
  --navy:#0E1C36;
  --gold:#D4AF37;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#FFFFFF;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial; }
/* Prevent sideways scroll on all devices */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Sticky Header */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background:#fff; border-bottom:0px solid var(--navy);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px;
}
.brand { display:flex; gap:12px; align-items:center; }
.logo { height:70px; width:auto; }
@media (max-width: 860px) {
  .logo {
    height: 50px;
  }
}
@media (min-width: 861px) {
  .logo {
    height: 70px;
    width: auto;
  }
}

.brand-text { font-weight:800; letter-spacing:.5px; color:var(--ink); font-size: 1.4rem; }
.nav a { font-weight:600; color:#0b1324; margin-left:22px; text-decoration:none; font-size: 1.1rem; } 


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

/* Hero */
.hero { text-align:center; padding:64px 16px 24px; }
.hero-swan { height:120px; display:block; margin:0 auto 12px; }
.hero::before,
.hero::after {
  pointer-events: none;  /* allow clicks to pass through */
}

.hero h1 {
  font-family: sans-serif !important;
  font-weight: 700;
  color: #D1BFA7; /* Gold accent */
  font-size: 32px;
  line-height: 1.1;
  margin: 0 auto 8px;
  max-width: 980px;
  letter-spacing: 0.3px;
}
/* === Hero link styling === */
.hero-link {
  color: inherit;              /* keep same color as heading */
  text-decoration: none;       /* no underline by default */
  transition: text-decoration 0.2s ease;
}

.hero-link:hover {
  text-decoration: underline;  /* underline only on hover */
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;  /* adds nice spacing */
}

/* old hero h1 code disabled */
/* .hero h1 { ... } */

.subhead { font-size: 22px; color:#334155; max-width: 820px; margin: 0 auto; }
.cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin: 18px 0; }
.btn { display:inline-block; padding:12px 20px; border-radius:14px; font-weight:700; border:1px solid transparent; text-decoration:none; }
.btn.gold { background: var(--gold); color: var(--navy); }
.btn.outline { border-color: var(--navy); color: var(--navy); background:#fff; }
.badges {color: rgba(255, 255, 255, 0.7); /* brighter and more visible */ font-size: 18px;
  letter-spacing: 0.3px;
  margin-top: 10px;}


/* Sections */
.section { padding: 56px 16px; } #what-we-do.section {
    padding-top: 25px;
}
.section.alt { background:#f6f7f9; }
.section-inner { max-width: 1120px; margin: 0 auto; }
h2 { color: var(--navy); margin: 0 0 10px; }
.section-inner h2 {
  text-align: center;
  margin: 20px 0;
}

/* Cards */
.card-grid { display:grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 16px; }
.card-grid.three { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
@media (max-width: 980px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .card-grid.three {
    grid-template-columns: 1fr;
  }
}


.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(2, 6, 23, .06);
  padding: 20px;
  margin-bottom: 24px;
}


/* Steps */
.steps { margin: 8px 0 0 18px; }
.steps li { margin: 8px 0; }
/* Make the step titles clickable without looking like links */
.steps a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

/* Optional: a tiny hover cue (keep it subtle) */
.steps a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--gold-700);
}

/* ==============================
   Sellers Process Timeline
   ============================== */
#process {
  background: #ffffff; /* stays white */
  padding: 60px 0;
  text-align: center;
}

#process h2 {
  color: var(--navy);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 40px;
}

/* timeline wrapper */
.process-timeline {
  list-style: none;
  counter-reset: step;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
}

/* connecting line */
.process-timeline::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50px;
  right: 50px;
  height: 3px;
  background: linear-gradient(90deg, #e6be5a, #ffde8a, #c99a39);
  border-radius: 2px;
  opacity: 0.4;
}

/* each step */
.process-timeline li {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 60px 25px 25px;
  width: 22%;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* number circle */
.process-timeline li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  line-height: 52px;
  background: linear-gradient(135deg, #e6be5a, #ffde8a, #c99a39);
  border-radius: 50%;
  color: #0b1e33;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}

/* step title and text */
.process-timeline strong {
  display: block;
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.process-timeline p {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.5;
}

/* hover lift */
.process-timeline li:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}

/* responsive stack */
@media (max-width: 900px) {
  .process-timeline {
    flex-direction: column;
    align-items: center;
  }

  .process-timeline::before {
    content: none;
  }

  .process-timeline li {
    width: 90%;
    margin-bottom: 25px;
  }

  .process-timeline li::before {
    top: -30px;
  }
}

/* Contact */
.contact-form input, .contact-form textarea {
  width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:15px;
}
.contact-form textarea { min-height: 120px; }
.muted { color: #64748b; }
.muted { color: #64748b; }

/* Contact background styling */
#contact {
  position: relative;
  isolation: isolate;
  background: url('images/handshakes.jpg') center center / cover no-repeat;
  padding: 80px 0;
  color: #0b1324;
  overflow: hidden;
}

/* blue tint overlay */

/* blue tint overlay – lighter and more transparent */
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(12, 23, 42, 0.06), rgba(12, 23, 42, 0.06)),
    rgba(60, 120, 200, 0.14);
  mix-blend-mode: multiply;  /* keeps the photo contrast intact */
filter: grayscale(55%);
z-index: 0;
}


/* keep form and text above overlay */
#contact .section-inner {
  position: relative;
  z-index: 1;
}
/* Translucent card for the contact form */
.contact-card {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.82); /* semi-transparent white */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(2, 12, 23, 0.12);
}
/* Keep the submit button above anything below it */
#contact .contact-card button[type="submit"] {
  position: relative;
  z-index: 5;
  /* add a little extra space so you don't click through */
  margin-bottom: 16px;
}

/* Keep the email line below in a lower stack context */
#contact .contact-details {
  position: relative;
  z-index: 1;
}

/* A little breathing room inside the card so nothing overlaps */
#contact .contact-card {
  padding-bottom: 36px;   /* adjust as you like */
}
/* Prevent the mailto link below the form from intercepting clicks */
#contact .contact-details a[href^="mailto:"] {
  pointer-events: none;   /* disables clicking the mailto line */
  cursor: text;           /* looks like plain text */
  text-decoration: none;  /* no underline so it reads as text */
}

/* (Already good practice) Keep the submit button “on top” */
#contact .contact-card button[type="submit"] {
  position: relative;
  z-index: 10;
  margin-bottom: 20px;
}

/* Ensure the email line is in a lower stack order */
#contact .contact-details {
  position: relative;
  z-index: 1;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 720px) {
  .contact-card {
    padding: 24px 16px;
    border-radius: 14px;
  }
}

/* center heading */
#contact h2 {
  text-align: center;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 28px;
}

/* form container */
#contact .contact-form {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 780px;
  margin: 0 auto;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.10);
}

/* Footer */
.footer { background:#f1f5f9; color:#0b1324; padding: 5px 30px; }
.footer-inner { max-width:1120px; margin: 0 auto; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.legal-links a { text-decoration: underline; margin-left: 8px; }
.footer-inner div {
  margin: 6px 0;
  color: #0b0b0b;
  font-size: 14px;
  text-align: center;
}
/* Ensure footer and links are always clickable and above overlays */
.site-footer, footer {
  position: relative;
  z-index: 2000;         /* higher layer */
  pointer-events: auto;  /* allow clicks */
}

footer a, .footer a, .legal-links a {
  position: relative;
  z-index: 2001;
  pointer-events: auto;  /* clickable links inside */
}


/* Cookie banner */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px;
  background:#0E1C36; color:#fff; border-radius:14px; padding:16px;
  box-shadow:0 10px 24px rgba(2,6,23,.3); display:none; z-index:9999;
}
.cookie-content{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-text{ max-width:720px; color:rgba(255,255,255,.9); }
.cookie-text a{ color:#fff; text-decoration:underline; }


/* ===== BSS band continuous background ===== */
#bss-band{ position:relative; isolation:isolate; }
#bss-band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(
      to bottom,
      rgba(15,25,47,0.74) 0%,
      rgba(15,25,47,0.58) 34%,
      rgba(15,25,47,0.36) 68%,
      rgba(15,25,47,0.18) 85%,
      rgba(255,255,255,0) 100%
    ),
    url('/images/hero-bg-optimized.jpg') center/cover no-repeat;
}
#bss-band > *{ position:relative; z-index:1; }
#bss-band .hero{ background:transparent !important; }
#bss-band .section .section-inner h2{ color:#ffffff; text-shadow:0 1px 6px rgba(0,0,0,.25); }

/* Gold headline + gold buttons */
.hero h1 {
  color: #E6BE5A !important; /* bright, vivid gold */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-family: 'Poppins', sans-serif;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 auto 8px;
  max-width: 980px;
  letter-spacing: 0.3px;
}

.hero .subhead{ color:#E6EBF3; text-shadow:0 1px 6px rgba(0,0,0,.25); }
.hero .cta-row .btn.gold {
  background: linear-gradient(135deg, #FFD87A, #E6BE5A, #D4AF37);
  color: #1C2B3F;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.8s ease;
}

.hero .cta-row .btn.gold:hover {
  background: #f1cb6a; /* lighter gold hover */
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.hero .cta-row .btn.gold:active {
  background: #d9a93c; /* slightly darker gold when pressed */
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.hero .cta-row a{ text-decoration:none; }

/* Card borders remain soft blue-gray */
.card{ border:1px solid #CAD1DB; }

/* === HERO BACKGROUND CAROUSEL === */

#bss-band {
  position: relative;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 520px;  /* adjust if you want it taller/shorter */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Two layers we cross-fade between */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 0;
}

.hero-bg.is-visible {
  opacity: 1;
}

/* Dark overlay on top of images */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(11, 19, 36, 0.85) 0%,
    rgba(11, 19, 36, 0.75) 35%,
    rgba(11, 19, 36, 0.5) 70%,
    rgba(11, 19, 36, 0.25) 100%
  );
}

/* Make sure content sits on top */
.hero-content {
  position: relative;
  z-index: 2;
}


/* Slight right adjustment for navigation alignment */
/* ==== HEADER LAYOUT: desktop-only fix (no impact on mobile) ==== */
@media (min-width: 1200px){
  /* 1) Header container centered with room on both sides */
  header.navbar{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;  /* brand left */
    max-width: 1600px;                        /* widen if needed */
    margin: 0 auto;
    padding: 16px 32px; /* equal spacing left/right for centering */
  }
/* MOBILE HEADER FIX — triggers at small screens */
@media (max-width: 860px) {

  .navbar {
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    text-align: center;
  }

  .brand {
    flex-direction: column;
    gap: 6px;
  }

  .logo {
    height: 60px;   /* no shrinking */
    width: auto;
  }

  .nav {
    flex-direction: column;
    gap: 10px;
    margin-left: 0;
    padding: 0;
  }

  .nav a {
    font-size: 1.2rem;
  }

}
/* 2) Brand stays on the left and creates space before the nav */
header.navbar .brand{
  display: flex !important;
  align-items: center !important;
  gap: 96px !important;          /* spacing between logo and title */
  margin-right: auto !important; /* <-- THIS pushes the nav away to the right */
}

/* 3) Nav sits on the right with normal link spacing */
header.navbar .nav{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* normal alignment inside the nav */
  gap: 28px !important;                   /* spacing between menu links */
  margin-left: 0 !important;
  padding-right: 0 !important;            /* remove the big right pad you added */
}


/* ==== MOBILE/TABLET: reset anything that made it 'wonky' ==== */
@media (max-width: 1199.98px){
  header.navbar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
  }
  header.navbar .nav{
    margin-left: 0 !important;
    padding-right: 0 !important;
    gap: 18px !important;
  }
}
.affiliation-note {
  margin-top: 24px;
  text-align: center;
  font-size: 18px;
  color: #475569; /* muted gray-blue */
  line-height: 1.5;
}
.affiliation-note strong {
  color: var(--navy);
  font-weight: 600;
}
.bateson-name {
  color: var(--gold);
  font-weight: 800;
}
.contact-details {
  margin-top: 18px;
  text-align: center;
  font-size: 16px;
  color: #1e293b; /* Deep slate navy tone for clean text */
  line-height: 1.6;
  font-family: 'Poppins', sans-serif;
}

.contact-details strong {
  color: var(--navy);
}

.contact-details a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-bottom 0.2s ease;
  border-bottom: 1px solid transparent;
}

.contact-details a:hover {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
}
.affil-line {
  text-align: center;
  margin-top: 14px;
  font-size: 15px;
  color: #334155;
}

.affil-link {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.affil-link:hover {
  color: var(--gold);                  /* matches your gold theme */
  border-bottom: 1px solid var(--gold);/* subtle gold underline on hover */
}
.affiliation-note {
  line-height: 1.3;
}

.affiliation-note br {
  line-height: 0.8;
}
.signature-line {
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  text-align: center;
  margin-top: 16px;
}
.affiliation-note strong {
  color: var(--gold);
  font-weight: 600;
  font-size: 18px;
}
.affiliation-note strong {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold);
  font-weight: 600;
}
.affiliation-note {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 10px;
  margin-top: 15px;
}
.affiliation-note strong {
  color: var(--gold);
  font-weight: 600;
}
.affiliation-note strong {
  font-size: 14px;
  color: var(--navy);
  font-weight: 700;
}

/* Base button (shared) */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* Gold (primary) – same as hero “Request a Confidential Consult” */
.btn.gold {
  background: var(--gold);
  color: var(--navy);
}

/* Navy (secondary) – same as hero “Explore Services” */
.btn.navy {
  background: var(--navy);
  color: #fff;
}

/* Outline variant, if you need it anywhere else */
.btn.outline {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
}

/* Hover effects (consistent for all) */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
}
/* Base button style for Opportunities cards */
.opportunity-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid var(--navy);
  background-color: #fff;
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.12s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Hover = gold background, dark navy text (matches hero buttons) */
.opportunity-btn:hover {
  background-color: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}




/* --- Send Confidentially button --- */
.contact-form .btn.gold {
  background: #fff;                     /* white base to match the new style */
  color: var(--navy);
  border: 1px solid var(--navy);
  font-weight: 700;
  border-radius: 14px;
  padding: 12px 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.12s ease,
    box-shadow 0.25s ease;
}

/* Hover = gold background + navy text (consistent with other CTAs) */
.contact-form .btn.gold:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}
/* --- Universal Button Styles with Metallic Finish --- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  transition: 
    transform 0.2s ease, 
    box-shadow 0.25s ease, 
    background 0.25s ease, 
    color 0.25s ease, 
    border-color 0.25s ease;
}

/* --- Metallic Gold Primary Button --- */
.btn.gold {
  color: var(--navy);
  background: linear-gradient(135deg, #FFD87A, #E6BE5A, #D4AF37);
  border: 1px solid #D4AF37;
}
.btn.gold:hover {
  background: linear-gradient(135deg, #FFE699, #F2C94C, #E6BE5A);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(212,175,55,0.35);
}

/* --- Metallic Navy Secondary Button --- */
.btn.navy {
  color: #fff;
  background: linear-gradient(135deg, #0B1324, #1C2741, #2A385A);
  border: 1px solid #1C2741;
}
.btn.navy:hover {
  background: linear-gradient(135deg, #233458, #2F4065, #394C73);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}

/* --- Metallic Outline Button (white base, gold on hover) --- */
.btn.outline {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn.outline:hover {
  background: linear-gradient(135deg, #FFD87A, #E6BE5A, #D4AF37);
  color: var(--navy);
  border-color: #D4AF37;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(212,175,55,0.25);
}
/* --- Metallic Shimmer Effect --- */
.btn.gold, .btn.navy {
  position: relative;
  overflow: hidden;
}

.btn.gold::after,
.btn.navy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.15) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.btn.gold:hover::after,
.btn.navy:hover::after {
  left: 125%;
  opacity: 1;
  transition: all 0.75s ease-in-out;
}
/* Make outline buttons capable of shimmer */
.btn.outline {
  position: relative;
  overflow: hidden;
  /* Give the outline button a faint surface so the sheen shows even before hover */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  background-clip: padding-box;
}

/* Shimmer overlay for outline buttons */
.btn.outline::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.15) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.5s ease;
  opacity: 0;
  pointer-events: none; /* safety — never intercept clicks */
}

/* Animate the shimmer on hover */
.btn.outline:hover::after {
  left: 125%;
  opacity: 1;
  transition: all 0.75s ease-in-out;
}
#opportunities {
  position: relative;
  background: 
    linear-gradient(
      rgba(10, 20, 40, 0.7),    /* dark blue overlay for consistency with hero */
      rgba(10, 20, 40, 0.85)
    ),
    url('/images/compass-bg.jpg') center/cover no-repeat;  /* your compass image path */
  color: #ffffff;
  padding: 80px 0;
  background-attachment: fixed;   /* gives subtle parallax depth */
}

/* Cards: pop cleanly off the darker background */
#opportunities .card {
  background: #ffffff;
  color: #0b1324;
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#opportunities .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.25);
}
#opportunities {
  position: relative;
  background:
    linear-gradient(
      rgba(10, 20, 40, 0.6),
      rgba(10, 20, 40, 0.85)
    ),
    url('/images/compass-bg.jpg') center top / contain no-repeat;  /* 👈 key change */
  background-color: #0b1324;   /* fallback */
  color: #ffffff;
  padding: 80px 0;
  background-attachment: fixed;
}
#opportunities::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 20, 40, 0.45);
  z-index: 0;
}
#opportunities > * {
  position: relative;
  z-index: 1;
}
#opportunities h2 {
  color: #ffffff !important;
}
/* ===== WHAT WE DO: Card Grid ===== */

#what-we-do .section-inner {
  max-width: 1120px;
  margin: 0 auto;
}

#what-we-do h2 {
  color: var(--ink);
  margin: 0 0 24px;
}

.wwd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
}

@media (max-width: 980px) {
  .wwd-grid {
    grid-template-columns: 1fr;
  }
}

/* Card look to mirror Opportunities tiles */
.wwd-card {
  background: #fff;
  border: 1px solid #E5EAF1;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 10px 28px rgba(2, 24, 55, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;                 /* for shine pseudo-element if desired */
  overflow: hidden;                   /* clip shine */
}

.wwd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(2, 24, 55, 0.12);
  border-color: #D7DFEA;
}

/* Optional: a faint diagonal shine on hover (matches your metallic theme) */
.wwd-card::after {
  content: "";
  position: absolute;
  left: -60%;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-10deg);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.wwd-card:hover::after {
  transform: translateX(220%) skewX(-10deg);
  opacity: 1;
}

.wwd-card h3 {
  color: var(--navy);
  font-size: 22px;
  margin: 0 0 10px;
}

.wwd-card p {
  color: #334155;
  margin: 0 0 18px;
  line-height: 1.6;
}

/* Align the CTA button nicely to the content flow */
.wwd-card .card-cta {
  margin-top: auto;
}

/* Reuse your button system: outline => navy outline that turns gold on hover */
/* (These should already exist from our earlier work; keeping here for context)
.btn.outline {
  border: 1px solid #C5D1E3;
  color: var(--navy);
  background: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(2,24,55,0.06);
}

.btn.outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 8px 18px rgba(2,24,55,0.12);
}

.btn.outline::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-12deg);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.btn.outline:hover::before {
  transform: translateX(220%) skewX(-12deg);
  opacity: 1;
}
*/
/* === WHAT WE DO SECTION === */

/* === WHAT WE DO SECTION – SOLID LIGHT NAVY, NO COMPASS === */

.what-we-do-section {
  background: #102039; /* light navy */
  position: relative;
  padding: 80px 5%;
  color: #ffffff;
}

.what-we-do-section::before {
  content: none; /* remove dark overlay */
}

/* Heading */
.what-we-do-section h2 {
  color: #ffffff;
}

/* Cards */
.what-we-do-section .card {
  background: #ffffff;
  border: 1px solid #CAD1DB;
  color: #0b1324;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* === FOOTER ALIGNMENT – MATCH HOME PAGE === */
.footer {
  background: #f1f5f9;          /* same light gray as home */
  color: #0b1324;
}

.footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* address left, links right */
  gap: 10px;
  flex-wrap: wrap;
}

.footer .legal-links {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.footer .legal-links a {
  color: #4b5563;
  text-decoration: none;
  transition: color .2s ease;
}

.footer .legal-links a:hover {
  color: var(--gold, #D4AF37);
}

.what-we-do-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 19, 36, 0.65); /* subtle dark overlay */
  z-index: 0;
}

.what-we-do-section h2 {
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
  margin-bottom: 2.5rem;
  font-size: 2.2rem;
}
/* Center "Buyers: Opportunities" heading and subtitle */
#opportunities h2,
#opportunities p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Keep tile text dark inside the cards */
#opportunities .card p {
  color: var(--ink);        /* or #0b1324 / #111827 */
}
.card h3 a {
  color: inherit;
  text-decoration: none;
}

.card h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--gold, #D4AF37);
}
#opportunities h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

#opportunities p {
  font-size: 1.1rem;
  color: #cbd5e1;
  max-width: 700px;
  margin-bottom: 40px;
}

.what-we-do-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  justify-items: center;
  align-items: stretch;
}

/* === CONFIDENTIAL BUSINESS VALUATIONS – page specific === */
/* Hero */
.cbv-hero {
  position: relative;
  isolation: isolate;
  background: url("images/business-valuation-hero2.jpg") center/cover no-repeat;
  padding: 120px 0 80px;
  color: #fff;
  text-align: center;
}
/* Remove white space between contact form and content section */
#contact.contact-band {
  margin-bottom: 0;
  padding-bottom: 0;
}

.cbv-content {
  margin-top: 0;
  padding-top: 0;
}

/* Safety net — forces any leftover global section margin closed */
#contact.contact-band + .cbv-content {
  margin-top: 0 !important;
}
/* === Shared Background Across Hero + What's Included === */
.cbv-bg {
  position: relative;
  isolation: isolate;
}

.cbv-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:url("images/business-valuation-hero2.jpg") center / cover no-repeat;
  z-index: -1;
}

/* Make child sections transparent so the wrapper bg shows through */
.cbv-hero,
.cbv-band {
  background: transparent;
}

.cbv-hero .container,
.cbv-band .container {
  position: relative;
  z-index: 1;
}

.cbv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to bottom,
      rgba(11, 19, 52, 0.66),
      rgba(11, 19, 52, 0.78)
  );
  z-index: 0;
}
.cbv-hero .container {
  position: relative;
  z-index: 1;
}

.cbv-hero h1 {
  font-size: clamp(2rem, 2.5vw + 1.2rem, 3.2rem);
  margin: 0 0 12px;
  letter-spacing: 0.5px;
  text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* === Hero subtitle & navigation hover (Valuation Page) === */

/* Force hero subtitle text to white */
.cbv-hero .subhead,
.cbv-hero p.subhead {
  color: #fff !important;
}

/* Make top navigation links turn gold on hover (match home page) */
.nav a:hover,
header nav a:hover {
  color: var(--gold, #D4AF37);
}

.cbv-hero p.subhead {
  font-size: 1.05rem;
  opacity: .95;
  margin: 0 auto 28px;
  max-width: 900px;
}

/* === CBV page: make “What’s Included” text white === */
.cbv-band h2 {
  color: #ffffff !important;     /* “What’s Included” heading */
}

.cbv-band li,
.cbv-band p {
  color: #e6eefc !important;     /* bullets + paragraph copy in the dark band */
}

/* Optional: make “How We Deliver” heading in this band white too */
.cbv-band h3 {
  color: #ffffff !important;
}



.cbv-content .cta-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

/* === Bottom CTA Buttons (Valuation Page) === */
.cbv-content .cta-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.cbv-content .btn.gold.big {
  background-color: var(--gold, #D4AF37);
  color: #0b1324;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease;
}

.cbv-content .btn.gold.big:hover {
  background-color: #b9962d;
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
}

/* Align buttons like on home */
.cbv-hero .btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Make outline button mirror your home interactions */
.cbv-hero .btn.outline {
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(11, 19, 52, 0.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cbv-hero .btn.outline:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* Breadcrumbs (improved spacing/contrast) */
.crumbs {
  font-size: 1rem;
  margin: 16px auto 0;
  max-width: 1200px;
  padding: 0 16px;
}
.crumbs a {
  color: #6b46c1; /* your purple link color */
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crumbs .sep {
  opacity: .5;
  margin: 0 6px;
}

/* Dark band like “What We Do” on home, but no cards */
.cbv-band {
  background: linear-gradient(180deg, rgba(11,19,52, .92), rgba(11,19,52,.88));
  color: #fff;
  padding: 56px 0;
  margin-top: 24px;
}
.cbv-band .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.cbv-band h2 {
  font-size: clamp(1.6rem, 1.5vw + .9rem, 2.2rem);
  margin: 0 0 18px;
}
.cbv-band ul {
  margin: 0 0 30px 1.2rem;
  line-height: 1.7;
}

/* Same interactions for the two lower buttons */
.cbv-band .btn.outline {
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(11, 19, 52, 0.25);
}
.cbv-band .btn.outline:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* Make the primary gold button match home (already present globally, but safe) */
.cbv-hero .btn.gold,
.cbv-band .btn.gold {
  background: var(--gold);
  color: #0b0b2b; /* navy ink on gold */
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cbv-hero .btn.gold:hover,
.cbv-band .btn.gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

/* Make the header nav hover gold (if not already) */
header .navbar .nav a:hover {
  color: var(--gold);
}

/* Footer alignment to mirror home:
   address left, legal links right */
footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* === FOOTER LAYOUT — single-row alignment === */
.footer {
  background: #f1f5f9;
  color: #0b1324;
  font-size: 0.95rem;
  line-height: 1.2; /* tighter spacing */
}

.footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 0px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  /* lets it wrap nicely on small screens */
  flex-wrap: wrap;
}

/* columns */
.footer-left,
.footer-center,
.footer-right {
  flex: 1;
}

/* column alignments */
.footer-left { text-align: left; }
.footer-center { text-align: center; }
.footer-right { text-align: right; }

/* legal links */
.footer .legal-links a {
  color: #4b5563;
  text-decoration: none;
  margin-left: 12px;
  transition: color .2s ease;
}

.footer .legal-links a:first-child {
  margin-left: 0;
}

.footer .legal-links a:hover {
  color: var(--gold, #D4AF37);
}

/* stack nicely on mobile */
@media (max-width: 768px) {
  .footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-left,
  .footer-center,
  .footer-right {
    flex: 0 0 auto;
    text-align: left;
    width: 100%;
  }
}

/* Ensure legal links go right */
footer .legal-links {
  margin-left: auto;
}

/* Optional: tighten privacy links spacing on this page */
footer .legal-links a {
  margin: 0 6px;
}



.card {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
  max-width: 480px;
  text-align: left;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.card h3 {
  color: #0b1324;
  margin-bottom: 12px;
}

.card p {
  color: #334155;
  line-height: 1.6;
}

/* Metallic Gold Button */
.btn.gold {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(135deg, #e6be5a, #d4af37, #f1cf78);
  color: #0b1324;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.btn.gold:hover {
  background: linear-gradient(135deg, #f4d36c, #f8e09d, #e6be5a);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Responsive: Stack on mobile */
@media (max-width: 840px) {
  .what-we-do-grid {
    grid-template-columns: 1fr;
  }
}
/* === What We Do: force 2-column grid (quadrant) === */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
  gap: 28px;                                        /* space between tiles */
  align-items: stretch;
}

/* Ensure each card fills its grid cell nicely */
.card-grid .card {
  width: 100%;
  max-width: none;            /* remove any old max-widths */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Optional: keep the “Learn More” button aligned at the bottom if content varies */
.card-grid .card .btn {
  align-self: flex-start;
  margin-top: 16px;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }
}
#contact button[type="submit"] {
  margin-top: 24px; /* adjust between 20–32px to taste */
}
.address {
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}
.affiliation-note {
  margin-bottom: 2px; /* reduce the space below Bateson line */
}

.address {
  margin-top: 2px; /* smaller top margin for tighter spacing */
  text-align: center;
  line-height: 1.6;
}

/* CTA band */
.cta-band {
  background: radial-gradient(1200px 600px at 50% 0%, rgba(11, 32, 48, .08), transparent 60%) #f8fbff;
  border-radius: 18px;
  padding: 36px 24px;
  text-align: center;
}

.cta-band .section-inner {
  max-width: 980px;
  margin: 0 auto;
}

.cta-band h2 {
  margin: 0 0 8px 0;
}

.cta-band .lead {
  margin: 0 auto 18px;
  max-width: 780px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.btn.gold {
  background: #F0C566;          /* matches your gold accent */
  color: #0b2030;
  border: 1px solid #F0C566;
}

.cta-band .micro {
  margin-top: 12px;
  opacity: .75;
  font-size: .92rem;
}
/* === Fix: Allow footer and contact links to be clickable === */
.contact-details,
footer {
  position: relative;
  z-index: 9999;
}

.contact-details a,
footer a {
  pointer-events: auto;
  position: relative;
  z-index: 10000;
  cursor: pointer;
}

/* Prevent decorative overlays from blocking clicks */
.hero::before,
.hero::after,
#cookie-banner,
.banner-overlay,
#bss-band::before,
#bss-band::after {
  pointer-events: none !important;
}
/* -----------------------------------------------------
   CLICK FIX PATCH (put this at the very end of stylesheet)
   ----------------------------------------------------- */

/* 1) Guarantee the email/phone area can be clicked */
.contact-details,
.contact-details a {
  position: relative;
  z-index: 5000;
  pointer-events: auto;
}

/* 2) If the hero section uses overlays (::before/::after), 
      make them not intercept clicks. */
#hero::before,
#hero::after,
.hero::before,
.hero::after {
  pointer-events: none !important;
}

/* 3) Cookie banner can sit visually on top but should not
      block anything except its own buttons/links. */
.cookie-banner {
  pointer-events: none !important;
}
.cookie-banner a,
.cookie-banner button {
  pointer-events: auto !important;
}

/* 4) Any generic full-width decorative layers should not eat clicks */
[aria-hidden="true"],
[role="presentation"] {
  pointer-events: none !important;
}

/* 5) Make sure the entire footer area is click-safe */
.site-footer, footer, .footer-inner {
  position: relative;
  z-index: 4000;
  pointer-events: auto;
}
footer a, .legal-links a {
  position: relative;
  z-index: 4001;
  pointer-events: auto;
}
/* --- Contact section click fix --- */

/* 1) Ensure the email/phone block sits above local overlays */
#contact .contact-details,
#contact .contact-details a {
  position: relative;
  z-index: 9999 !important;   /* beat z-index:1, same selector specificity, force it */
  pointer-events: auto;
}

/* 2) Make sure any decorative overlays in #contact don't steal clicks */
#contact::before,
#contact::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* If you have a named overlay element inside #contact, also disable its pointer-events: */
/* #contact .overlay { pointer-events: none !important; } */
/* === CONTACT (shared) === */
.contact-band {
  position: relative;
  isolation: isolate;
  padding: 48px 0 28px;
  background: radial-gradient(1200px 600px at 70% 0%, rgba(255,255,255,.75), rgba(255,255,255,.9) 40%, #f1f5f9 85%);
}

.contact-band h2 {
  text-align: center;
  color: #0b1324;
  margin-bottom: 24px;
}

.contact-card {
  max-width: 980px;
  margin: 0 auto 16px;
  padding: 24px;
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,.15);
}

.contact-card form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-card label {
  font-weight: 600;
  color: #0b1324;
  display: grid;
  gap: 8px;
}

.contact-card input,
.contact-card textarea {
  width: 100%;
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0b1324;
  box-shadow: 0 1px 1px rgba(0,0,0,.03) inset;
}

.contact-card .btn.outline {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  background: var(--gold, #D4AF37);
  color: var(--navy, #0E1C36);
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.contact-card .btn.outline:hover {
  background: #b9962d; /* slightly darker gold */
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


.contact-card .btn.outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  background: linear-gradient(#ffffff, #f1f5f9);
}

.contact-info-row {
  text-align: center;
  color: #0b1324;
  margin-top: 12px;
}

.contact-info-row .sep { margin: 0 10px; color: #94a3b8; }

.contact-info-row a {
  color: #0b1324;
  text-decoration: none;
}

.contact-info-row a:hover {
  color: var(--gold, #D4AF37);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* === Page-specific hero backgrounds === */
.buy-hero {
  background-image: url("../images/buy-a-business.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Optional: dark overlay for better text contrast */
.buy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* tweak this to lighten or darken */
}

.cbv-hero {
  position: relative;
  z-index: 1; /* keeps your text above the overlay */
}
/* === Page-specific hero background for Growth & Development === */
.growth-hero .cbv-hero {
  background: transparent !important;
}

/* Optional: dark overlay to improve text readability */
.growth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* adjust 0.35 lighter/darker as needed */
  z-index: 0;
}
.growth-hero .cbv-hero {
  position: relative;
  z-index: 1;
}
/* === Page-specific hero background for Sell Your Business === */
.sell-hero .cbv-hero {
  background: transparent !important;
}

/* Optional: overlay for readability */
.sell-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* tweak opacity if needed */
  z-index: 0;
}
.sell-hero .cbv-hero {
  position: relative;
  z-index: 1;
}
/* Hero link hover underline effect */
.hero-inline-link {
  color: inherit;                /* keep gold heading color */
  text-decoration: none;         /* remove default underline */
  position: relative;
}

.hero-inline-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;                  /* spacing under the text */
  width: 100%;
  height: 2px;
  background-color: #d4af37;     /* your gold accent color */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.hero-inline-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* === HEADER SOCIAL ICONS === */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.social__link, .social_link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.social__link:hover, .social_link:hover {
  transform: translateY(-1px);
}

.social__icon, .social_icon {
  width: 50px;
  height: 50px;
  fill: currentColor;
}

/* Hover colors */
.social_link[aria-label^="LinkedIn"]:hover { color: #0A66C2; }
.social_link[aria-label^="Instagram"]:hover { color: #E1306C; }
.social_link[aria-label^="Facebook"]:hover { color: #1877F2; }

/* Keep Black Swan Solutions text on one line */
.navbar-logo span {
  white-space: nowrap;
}

/* Ensure logo layout stays clean */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .signature-line,
  .affiliation-note,
  .address,
  .signature-line *,
  .affiliation-note *,
  .address * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .mobile-center {
    text-align: center !important;
  }
}
/* FINAL FORCE FIX — Guarantees gold on all hero title links */
.hero h1 .hero-inline-link,
.hero h1 .hero-inline-link:link,
.hero h1 .hero-inline-link:visited,
.hero h1 .hero-inline-link:active {
    color: #E6BE5A !important;
    text-decoration: none !important;
}
/* Mobile-only header layout */
@media (max-width: 768px) {
  /* 1. Hide full nav and social icons on mobile */
  .nav {
    display: none;
  }

  .social {
    display: none !important;
  }

  /* 2. Show the “Menu” text on mobile only */
  .menu-toggle {
    display: inline-block;
    margin-left: auto;
    font-size: 1rem;
    font-weight: 600;
    color: #0066ff;            /* same blue as your screenshot */
    text-decoration: none;
  }

  /* 3. Make sure brand + Menu sit on one line and are centered vertically */
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* Desktop: hide the Menu text */
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}

/* MOBILE HEADER BEHAVIOR
   ========================= */
@media (max-width: 768px) {

  /* 1. Layout for header bar */
  header.navbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
  }

  header.navbar .brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* 2. Hide full nav + social by default on mobile, turn nav into dropdown */
  header.navbar .nav {
    display: none;                  /* 🔹 hidden until Menu is tapped */
    position: absolute;
    top: 100%;                      /* just below the header */
    right: 16px;
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    z-index: 100;
  }

  header.navbar .nav a {
    margin: 6px 0;
    font-size: 16px;
    color: #0b1324;
  }

  /* 3. When JS toggles this class, show the nav */
  header.navbar .nav.nav-open {
    display: flex;
  }

  /* 4. Hide social icons on mobile */
  header.navbar .social {
    display: none !important;
  }

  /* 5. Style the Menu button */
  .menu-toggle {
    display: inline-block;
    margin-left: auto;
    font-size: 1rem;
    font-weight: 600;
    color: #0066ff;
    text-decoration: none;
  }

}

/* Desktop: show normal nav, hide Menu text */
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}

/* Improve the Menu button styling on mobile */
@media (max-width: 768px) {

  .menu-toggle,
  .menu-toggle:link,
  .menu-toggle:visited {
    display: inline-block;
    margin-left: 12px;   /* space from logo text */
    margin-right: 12px;  /* space before social icons */
    font-size: 17px;
    font-weight: 600;
    color: #E6BE5A !important;      /* brand gold */
    text-decoration: none !important;
  }

  .menu-toggle:hover,
  .menu-toggle:active {
    color: #d1a94f !important;      /* subtle darker gold on tap */
    text-decoration: none !important;
  }

  /* Optional: slight nudge for the social icons group */
  header.navbar .social {
    margin-left: 12;
  }
}
/* Mobile override: force all card CTAs to gold */
@media (max-width: 768px) {
  .btn.card-cta,
  .btn.outline.card-cta {
    background: linear-gradient(135deg, #FFD87A, #E6BE5A, #D4AF37) !important;
    border: 1px solid #D4AF37 !important;
    color: var(--ink) !important;
    box-shadow: 0 12px 25px rgba(212, 175, 55, 0.35) !important;
  }
}
/* Mobile: make "What We Do" card buttons solid gold */
@media (max-width: 768px) {
  #what-we-do-section .card .btn.outline {
    background: linear-gradient(135deg, #FFD87A, #E6BE5A, #D4AF37) !important;
    color: var(--ink) !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 12px 25px rgba(212, 175, 55, 0.35) !important;
    text-decoration: none !important;
  }

  #what-we-do-section .card .btn.outline:hover {
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(212, 175, 55, 0.25);
  }
}

/* ========== CONFIDENTIAL BUSINESS VALUATIONS PAGE (CLEAN, SCOPED) ========== */
/* ========== CBV PAGE – MOBILE-ONLY TWEAKS ========== */
@media (max-width: 768px) {

  /* Center hero text on mobile */
  .cbv-page .cbv-hero h1,
  .cbv-page .cbv-hero .subhead {
    text-align: center;
  }

  .cbv-page .cbv-hero h1 {
    font-size: 2rem;
  }

  .cbv-page .cbv-hero .subhead {
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 24px;
  }

  /* Stack CTAs vertically on mobile */
  .cbv-page .cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .cbv-page .cta-row .btn {
    width: 100%;
    max-width: 340px;
    text-align: center;
  }

  /* Center breadcrumbs under hero */
  .cbv-page .crumbs {
    text-align: center;
    font-size: 0.9rem;
    padding: 0 20px;
    margin-bottom: 16px;
  }

  .cbv-page .crumbs a {
    display: inline-block;
    margin: 0 3px;
  }

  /* Slightly tighten dark band spacing */
  .cbv-page .cbv-band {
    padding: 24px 0 32px;
  }

  /* Contact band: stack form fields cleanly */
  .cbv-page .contact-band .container {
    padding: 32px 20px;
  }

  .cbv-page .contact-card {
    max-width: 640px;
    margin: 0 auto 24px;
  }

  .cbv-page .contact-card form {
    display: block !important;   /* override any global flex */
  }

  .cbv-page .contact-card label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.95rem;
  }

  .cbv-page .contact-card input,
  .cbv-page .contact-card textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .cbv-page .contact-card .btn {
    display: block;
    width: 100%;
    max-width: 260px;
    text-align: center;
    margin: 8px auto 0;
  }

  .cbv-page .contact-info-row {
    text-align: center;
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .cbv-mobile-logo-text {
    display: inline-block;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    color: #0b0b0b;
    text-transform: uppercase;

    /* This is what forces it into two lines */
    max-width: 150px; /* tweak this to get exactly 2 lines */
  }
}
.navbar-logo,
.navbar-logo *,
header.navbar .brand a,
header.navbar .brand a * {
    text-decoration: none !important;
}

/* Lock seller process pages to viewport width */
body.cbv-page {
  overflow-x: hidden;
  max-width: 100%;
}
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ensure all elements respect the box model */
*, *::before, *::after {
  box-sizing: inherit;
}
.growth-hero {
  background-image: url('../images/business-strategy1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sell-hero {
  background-image: url('/images/business-valueOG2.jpg'); /* <-- your file */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.buy-hero {
  background-image: url('/images/business-meeting-1920x1080.jpg'); /* replace file name with yours */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Buyers Opportunities – 3 cards desktop, 2 tablet, 1 mobile */
#opportunities .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop */
  gap: 24px;
}

/* Tablet */
@media (max-width: 980px) {
  #opportunities .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 640px) {
  #opportunities .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Center content inside opportunity cards */
#opportunities .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Make sure the button sits nicely under the text */
#opportunities .card .btn {
  margin-top: 16px;
}

/* Force buttons in opportunity cards to center properly */
#opportunities .card .btn {
  align-self: center !important;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* ----------------------------------------- */
/* POLISH CARD SPACING – OPPORTUNITIES ONLY */
/* ----------------------------------------- */

/* Increase padding inside cards for a more premium feel */
#opportunities .card {
  padding: 28px 26px 32px;
  gap: 14px; /* more breathing room between elements */
}

/* More space below titles */
#opportunities .card h3 {
  margin-bottom: 10px;
}

/* More readable paragraph spacing */
#opportunities .card p {
  margin-top: 6px;
  margin-bottom: 16px;
  line-height: 1.6;
  max-width: 90%; /* slight tightening so lines don't get too long */
}

/* Center and polish button placement */
#opportunities .card .btn {
  align-self: center !important;
  margin-top: 6px;
  padding: 10px 22px; /* slightly larger button, feels more premium */
}

/* Add subtle equal-height feel without forcing fixed heights */
#opportunities .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ----------------------------------------- */
/* EQUAL HEIGHT CARDS – OPPORTUNITIES ONLY  */
/* ----------------------------------------- */

/* Enable auto equal-height behavior */
#opportunities .card-grid {
  align-items: stretch; /* forces all items in a row to same height */
}

/* Make each card stretch fully inside the grid */
#opportunities .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* evenly distributes top and bottom */
}

/* Keep content centered inside the card */
#opportunities .card h3,
#opportunities .card p,
#opportunities .card .btn {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------- */
/* Balanced Title Sizes for All 15 Opportunity Cards */
/* ----------------------------------------------- */

/* 1. Central Florida Businesses */
#opportunities .card:nth-child(1) h3 { font-size: 30px; }

/* 2. Service-Based Businesses */
#opportunities .card:nth-child(2) h3 { font-size: 30px; }

/* 3. Home-Based Businesses */
#opportunities .card:nth-child(3) h3 { font-size: 30px; }

/* 4. Franchises for Sale */
#opportunities .card:nth-child(4) h3 { font-size: 30px; }

/* 5. Businesses $1M–$30M */
#opportunities .card:nth-child(5) h3 { font-size: 30px; }

/* 6. With $100K Down Payment */
#opportunities .card:nth-child(6) h3 { font-size: 30px; } /* long title */

/* 7. Businesses With Real Estate */
#opportunities .card:nth-child(7) h3 { font-size: 30px; } /* long title */

/* 8. Restaurants & Liquor */
#opportunities .card:nth-child(8) h3 { font-size: 30px; }

/* 9. Medical & Fitness */
#opportunities .card:nth-child(9) h3 { font-size: 30px; }

/* 10. Real Estate-Related */
#opportunities .card:nth-child(10) h3 { font-size: 30px; }

/* 11. Businesses Up to $1M */
#opportunities .card:nth-child(11) h3 { font-size: 30px; }

/* 12. Pre-Qualified Businesses */
#opportunities .card:nth-child(12) h3 { font-size: 30px; }

/* 13. Visa-Qualified Businesses */
#opportunities .card:nth-child(13) h3 { font-size: 30px; }

/* 14. Construction Businesses */
#opportunities .card:nth-child(14) h3 { font-size: 30px; }

/* 15. Wholesale & Distribution */
#opportunities .card:nth-child(15) h3 { font-size: 30px; }

/* Styled CTA Block – Buyers Section */
#buyer-register-block {
  margin-top: 40px;
  padding: 32px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(9,9,11,0.98));
  border: 1px solid rgba(148,163,184,0.32);
  box-shadow: 0 18px 32px rgba(0,0,0,0.65);
  text-align: center;
}

#buyer-register-block h3 {
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #f4f4f5;
}

#buyer-register-block p {
  max-width: 620px;
  margin: 0 auto 18px auto;
  color: #d4d4d8;
  font-size: 14px;
  line-height: 1.7;
}

#buyer-register-block .buyer-register-btn {
  margin-top: 12px;
  padding: 10px 24px;
}
/* Force CTA block text to white */
#buyer-register-block,
#buyer-register-block * {
  color: #ffffff !important;
}

/* Keep the gold button text navy, not white */
#buyer-register-block .buyer-register-btn {
  color: var(--navy) !important;
}

/* === WHAT WE DO BAND – CLEAN VERSION === */

/* Outer band behind What We Do (desktop + mobile) */
#services {
  background-color: #102039;          /* light navy */
  position: relative;
  z-index: 1;
}

/* Inner section – stay transparent so the band shows */
#what-we-do {
  background: transparent;
}

/* Heading */
#what-we-do h2 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 32px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Cards stay white on dark band */
#what-we-do .card {
  background: #ffffff;
  border: 1px solid #CAD1DB;
  color: #0b1324;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Grid layout for the 4 cards */
.what-we-do-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  justify-items: stretch;
  align-items: stretch;
}

/* Mobile: stack cards in a single column */
@media (max-width: 840px) {
  .what-we-do-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 840px) {
  .what-we-do-section .card {
    text-align: center;
  }

  .what-we-do-section .card h3,
  .what-we-do-section .card p,
  .what-we-do-section .card a {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 840px) {
  #what-we-do h2 {
    font-size: 6rem !important;   /* adjust higher or lower */
  }
}

/* Center What We Do cards perfectly on mobile */
@media (max-width: 840px) {

  /* Center the entire card content */
  .what-we-do-section .card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Center the icon / emoji */
  .what-we-do-section .card h3 span {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: inline-block;
  }

  /* Center the H3 text block */
  .what-we-do-section .card h3 {
    width: 100%;
    text-align: center !important;
    display: block;
  }

  /* Center the paragraph text */
  .what-we-do-section .card p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center the button */
  .what-we-do-section .card a.btn {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}
/* Mobile: center What We Do cards */
@media (max-width: 840px) {
  /* Center the whole card content stack */
  #what-we-do .card {
    display: flex;
    flex-direction: column;
    align-items: center;   /* horizontally center children */
    text-align: center;    /* center text inside */
  }

  /* Icon + headline */
  #what-we-do .card h3 {
    width: 100%;
    text-align: center !important;
    margin-bottom: 1rem;
  }

  #what-we-do .card h3 span[aria-hidden="true"] {
    display: inline-block;
    margin-right: 0.25em;  /* little space between emoji + text */
  }

  /* Paragraph text */
  #what-we-do .card p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Button */
  #what-we-do .card a.btn {
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1rem;
  }
}
/* Mobile: larger What We Do heading */
@media (max-width: 840px) {
  #what-we-do h2 {
    font-size: 5rem !important;  /* tweak up/down as you like */
  }
}

/* === ACTIVE LISTINGS CAROUSEL – CLEAN VERSION === */

#active-listings {
  background: #ffffff;          /* white band, matches other sections */
  color: #0b1324;               /* deep navy text */
  padding: 80px 20px 70px;
}

#active-listings .section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

#active-listings h2 {
  text-align: center;
  font-size: 2.2rem;            /* TITLE SIZE – adjust here */
  margin-bottom: 16px;
  color: #0b1324;
}

.active-listings-subhead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
  color: #3a4660;
  font-size: 1.5rem;           /* SUBHEAD size */
}

/* Core carousel layout */

.listing-carousel {
  position: relative;
  max-width: 1150px;            /* DESKTOP CARD WIDTH – increase to make box wider */
  margin: 0 auto 24px;
}

.listing-carousel-viewport {
  overflow-x: hidden;   /* hide neighbor slides horizontally */
  overflow-y: visible;  /* BUT let tall cards show fully */
  width: 100%;
}

.listing-carousel-track {
  display: flex;
  flex-wrap: nowrap;          /* <-- add this line */
  transition: transform 0.5s ease;
}

/* Individual slide */

.listing-slide {
  flex: 0 0 100%; 
   max-width: 100%; /* always 1 slide per view */
  display: flex;
  align-items: stretch;
  gap: 32px;
  padding: 32px 40px;           /* DESKTOP padding – increase to make box taller */
  background: #0b1324;
  color: #ffffff;
  border-radius: 32px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.2);
}

/* Image on left */

.listing-slide-image {
  flex: 0 0 33%;
  max-width: 340px;
  border-radius: 24px;
  overflow: hidden;
  align-self: stretch;
}

.listing-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text on right */

.listing-slide-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.listing-title {
  font-size: 1.7rem;            /* MAIN TITLE size – bump this up if you want */
  margin: 0 0 10px;
  font-weight: 700;
}

.listing-meta {
  font-size: 1.08rem;           /* META line (SDE / Asking) */
  margin: 0 0 14px;
  color: #e6ecff;
}

.listing-description {
  font-size: 1.02rem;           /* BODY TEXT size */
  margin: 0 0 22px;
  line-height: 1.55;
  color: #f5f7ff;
}

/* CTA button inside slide – reuse your gold button style, just center text */

.listing-cta {
  align-self: flex-start;
  text-align: center;
  min-width: 260px;
}

/* Arrows */

.listing-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(11, 19, 36, 0.9);
  color: #ffffff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.listing-arrow-prev {
  left: -18px;
}

.listing-arrow-next {
  right: -18px;
}

.listing-arrow:hover {
  background: #e6be5a;
  color: #0b1324;
}

/* Dots */

.listing-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.listing-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d3dde8;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.listing-dot.is-active {
  background: #e6be5a;
  transform: scale(1.2);
}

/* === MOBILE / TABLET ADJUSTMENTS === */

@media (max-width: 900px) {
  #active-listings {
    padding: 60px 16px 55px;
  }

  #active-listings h2 {
    font-size: 1.9rem;
  }

  .active-listings-subhead {
    font-size: .98rem;
    margin-bottom: 24px;
  }

  .listing-carousel {
    max-width: 100%;
  }

  .listing-slide {
    flex-direction: column;
    gap: 18px;
    padding: 22px 18px 26px;
    border-radius: 24px;
  }

  .listing-slide-image {
    flex: 0 0 auto;
    max-width: 100%;
    height: 180px;
  }

  /* Let tall cards (image + long description) fully expand on mobile */
  #active-listings .listing-carousel-viewport {
    overflow: visible;
  }

  .listing-slide-body {
    align-items: flex-start;
  }

  .listing-title {
    font-size: 1.35rem;
  }

  .listing-meta {
    font-size: 0.98rem;
  }

  .listing-description {
    font-size: 0.95rem;
  }

  .listing-cta {
    width: 100%;
    min-width: 0;
  }

  .listing-arrow {
    top: auto;
    bottom: -18px;
    transform: none;
    width: 34px;
    height: 34px;
  }

  .listing-arrow-prev {
    left: 8px;
  }

  .listing-arrow-next {
    right: 8px;
  }

  .listing-dots {
    margin-top: 30px;
  }
}
/* Medium phones */
@media (max-width: 600px) {
  .listing-slide-image {
    height: 160px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .listing-slide-image {
    height: 140px;
  }
}
/* Medium phones – force vertical stacking */
@media (max-width: 600px) {
  #active-listings .listing-slide {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #active-listings .listing-slide-image,
  #active-listings .listing-slide-body {
    width: 100% !important;
    max-width: 100% !important;
  }

  #active-listings .listing-carousel-viewport {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* Small phones – reuse same layout, just smaller image */
@media (max-width: 480px) {
  #active-listings .listing-slide-image {
    height: 140px; /* your existing value */
  }
}


/* Ensure the whole carousel can show arrows outside the card */
.listing-carousel {
  position: relative;   /* should already be there, but safe */
  overflow: visible;    /* important so arrows aren't clipped */
}

/* Make sure both arrows sit on top of the card and shadow */
.listing-arrow {
  z-index: 10;
}

/* Optional: tweak horizontal position if they don't look perfectly even */
.listing-arrow-prev {
  left: -22px;          /* try -18px, -20px, -22px until it visually matches */
}

.listing-arrow-next {
  right: -22px;         /* keep this the same magnitude as the left */
}


/* === CONFIDENTIAL BUYER TICKER – CLEAN VERSION ==================== */

/* Wrapper band */
.buyer-ticker-wrapper {
  background: #050b15;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Header text inside band */
.buyer-ticker-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.buyer-ticker-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #D4AF37;
}

.buyer-ticker-sub {
  font-size: 0.9rem;
  opacity: 0.8;
  color: #D4AF37;
}

/* Ticker viewport */
.buyer-ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Moving track */
.buyer-ticker-track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  width: max-content;
  min-width: 200%;
  -webkit-animation: buyerTickerScroll 45s linear infinite;
          animation: buyerTickerScroll 45s linear infinite;
  will-change: transform;
}


/* Each buyer entry */
.buyer-ticker-item {
  display: inline-block;
  white-space: nowrap;
  padding-right: 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.18);
  font-size: 1.5rem;
}

/* Desktop: pause ticker when hovering the band */
@media (min-width: 769px) {
  .buyer-ticker-wrapper:hover .buyer-ticker-track {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
}

/* Mobile tweaks + never freeze on touch "hover" */
@media (max-width: 768px) {
  .buyer-ticker-wrapper {
    padding: 0.75rem 1rem;
  }

  .buyer-ticker-item {
    font-size: 0.9rem;
  }

  /* iOS can leave elements in :hover after a tap;
     keep animation running on touch devices. */
  .buyer-ticker-wrapper:hover .buyer-ticker-track {
    -webkit-animation-play-state: running !important;
            animation-play-state: running !important;
  }
}

/* One keyframe set used everywhere */
@-webkit-keyframes buyerTickerScroll {
  0%   { -webkit-transform: translateX(0);    transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes buyerTickerScroll {
  0%   { -webkit-transform: translateX(0);    transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* Desktop: pause ticker on hover */
@media (min-width: 769px) {
  .buyer-ticker-wrapper:hover .buyer-ticker-track {
    -webkit-animation-play-state: paused !important;
            animation-play-state: paused !important;
  }
}

/* Mobile: never pause on hover (touch) */
@media (max-width: 768px) {
  .buyer-ticker-wrapper:hover .buyer-ticker-track {
    -webkit-animation-play-state: running !important;
            animation-play-state: running !important;
  }
}

/* === FORCE MOBILE TICKER TO SCROLL === */
@media (max-width: 768px) {
  .buyer-ticker-track {
    -webkit-animation: buyerTickerScrollMobile 6s linear infinite !important;
            animation: buyerTickerScrollMobile 6s linear infinite !important;
  }
}

  .oppty-icon {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 12px !important;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    display: block;
  }


/* === About page testimonials === */
.about-testimonials {
  margin-top: 32px;
}

.about-testimonials h3 {
  text-align: center;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 1.5rem;
}

.about-testimonials-intro {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 22px;
  color: #334155;
  font-size: 0.98rem;
}

.testimonial-card .quote {
  font-style: italic;
  margin-bottom: 12px;
  color: #1f2933;
}

.testimonial-card .attribution {
  font-weight: 600;
  margin: 0;
  color: #0f172a;
}

.about-testimonials-cta {
  text-align: center;
  margin-top: 18px;
}

/* White text for all elements inside dark-texture sections */
.section.dark-texture,
.section.dark-texture p,
.section.dark-texture h1,
.section.dark-texture h2,
.section.dark-texture h3,
.section.dark-texture h4,
.section.dark-texture ul,
.section.dark-texture li {
  color: #ffffff !important;
}

/* Keep card text dark inside dark sections */
.section.dark-texture .card,
.section.dark-texture .card p,
.section.dark-texture .card .quote,
.section.dark-texture .card .attribution,
.section.dark-texture .card h3,
.section.dark-texture .card h4 {
  color: var(--navy) !important;
  background-color: #ffffff !important; /* ensure cards stay bright */
}

.dark-texture {
  background: url('/hero-texture-sellers-dark.jpg'), #0d1321;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Increase title size on testimonials page */
#testimonials h1 {
  font-size: 2.8rem;    /* adjust as needed */
  line-height: 1.2;
}

/* Increase intro paragraph size */
#testimonials .testimonials-intro {
  font-size: 1.25rem;   /* adjust to taste */
  line-height: 1.6;
}

#testimonials h1 {
  margin-bottom: 20px;
}

#testimonials .testimonials-intro {
  margin-bottom: 18px;
}

/* Testimonial page card font sizes */
#testimonials .testimonial-card .quote {
  font-size: 1.15rem;   /* increase/decrease as needed */
  line-height: 1.55;
}

#testimonials .testimonial-card .attribution {
  font-size: 1rem;   /* increase name size */
  font-weight: 600;
  line-height: 1.4;
}

/* === TESTIMONIALS – FORCE DARK BAND ON MOBILE === */
@media (max-width: 768px) {
  #testimonials.section.dark-texture {
    background:
      #0d1321
      url('/images/hero-texture-sellers-dark.jpg')
      center / cover
      no-repeat !important;
  }
}



/* === ACTIVE LISTINGS: stack cards on mobile, no slider === */
@media (max-width: 900px) {
  /* Let cards grow vertically, no clipping */
  #active-listings .listing-carousel-viewport {
    overflow: visible;
  }

  /* Stack slides instead of a horizontal track */
  #active-listings .listing-carousel-track {
    display: block;
    transform: none !important;
  }

  /* Card layout: image on top, text below */
  #active-listings .listing-slide {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 18px 26px;
    border-radius: 24px;
    margin-bottom: 24px;
  }

  #active-listings .listing-slide-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: 180px;          /* tweak to taste (e.g. 200px or 50vh) */
    overflow: hidden;
  }

  #active-listings .listing-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Arrows & dots are desktop-only now */
  #active-listings .listing-arrow,
  #active-listings .listing-dots {
    display: none !important;
  }
}

/* === FINAL MOBILE RULES — LAST IN THE FILE === */
@media (max-width: 768px) {

  /* Testimonials mobile background */
  body.testimonials-page {
    background-color: #0d1321;
  }

  /* Hide icons on mobile */
  img.oppty-icon,
  .oppty-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Lift card text up */
  #opportunities .card-grid.four .card {
    padding-top: 24px;
  }
}