/* ============================================================
   ONE SUMMIT CAPITAL — Master Stylesheet

   TABLE OF CONTENTS
   1.  Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Navigation
   6.  Buttons
   7.  Footer
   8.  HOME — Hero
   9.  HOME — Funding Type Cards
   10. HOME — About/Teal Section
   11. HOME — How It Works
   12. HOME — FAQ Accordion
   13. HOME — Bottom CTA
   14. ABOUT US — Hero
   15. ABOUT US — Leadership
   16. ABOUT US — Values
   17. BUSINESS CAPITAL
   18. REAL ESTATE CAPITAL
   19. 404 Page
   20. Responsive (Mobile-first breakpoints)
   ============================================================ */


/* ============================================================
   1. CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* --- Brand Colors --- */
  --navy:          #0b0f1e;   /* Primary dark: nav, footer, dark sections */
  --navy-hover:    #141929;   /* Slightly lighter for hover states */
  --teal:          #1a4040;   /* Teal: "About" panel on homepage */
  --teal-dark:     #122e2e;   /* Darker teal for hover/borders */
  --gold:          #c9a465;   /* Gold: icon highlights, accents */
  --white:         #ffffff;
  --off-white:     #f5f4f0;   /* Warm off-white: light section backgrounds */
  --gray-100:      #f0efeb;
  --gray-200:      #e2e0db;
  --gray-400:      #b0aaa0;
  --gray-600:      #6b7280;
  --gray-800:      #374151;
  --text:          #1a1a2e;   /* Primary body text */

  /* --- Overlay Colors (on hero images) --- */
  --overlay-dark:  rgba(11, 15, 30, 0.55);
  --overlay-card:  linear-gradient(180deg, rgba(11,15,30,0) 30%, rgba(11,15,30,0.85) 100%);

  /* --- Typography ---
     Single font site-wide: Inter. --font-display kept as alias so
     existing rules don't need to change. */
  --font-display:  'Inter', system-ui, -apple-system, Arial, sans-serif;
  --font-ui:       'Inter', system-ui, -apple-system, Arial, sans-serif;

  /* --- Type Scale --- */
  --text-xs:   0.75rem;      /* 12px */
  --text-sm:   0.875rem;     /* 14px */
  --text-base: 1rem;         /* 16px */
  --text-lg:   1.125rem;     /* 18px */
  --text-xl:   1.25rem;      /* 20px */
  --text-2xl:  1.5rem;       /* 24px */
  --text-3xl:  1.875rem;     /* 30px */
  --text-4xl:  2.25rem;      /* 36px */
  --text-5xl:  3rem;         /* 48px */
  --text-6xl:  3.75rem;      /* 60px */
  --text-7xl:  4.5rem;       /* 72px */

  /* --- Spacing Scale --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);  /* responsive side padding */
  --nav-height:    70px;

  /* --- Borders & Shadows --- */
  /* Tighter radii for a more polished, less rounded appearance */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.22);

  /* --- Transitions --- */
  --ease-fast: 0.15s ease;
  --ease-base: 0.25s ease;
  --ease-slow: 0.4s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Prevents layout shift when scrollbar appears */
  overflow-y: scroll;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Remove default focus ring for mouse users, keep it for keyboard */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* Display / Hero Headlines — Playfair Display (serif, luxurious) */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Section Labels — small uppercase tracking */
.t-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.t-label--light {
  color: rgba(255,255,255,0.6);
}

/* Section Headings */
.t-section-heading {
  font-family: var(--font-ui);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Metadata line (date, read time) */
.t-meta {
  font-size: var(--text-sm);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.t-meta svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Two equal columns */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

/* Three equal columns */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

/* Four equal columns */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

/* Visually hidden (for accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   5. NAVIGATION
   Sticky dark navbar, transparent on home hero then fills on scroll.
   On interior pages: always solid navy.
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);

  /* Transparent at top — background fills in when .navbar--scrolled is added by JS.
     Both states share the same --navy color as the footer, ensuring visual consistency. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--ease-base), box-shadow var(--ease-base),
              border-color var(--ease-base);
}

/* Added by initNavbarScroll() in main.js after 20px of scroll.
   Glass effect: frosted blur over page content behind the nav.
   WEBFLOW: "Page Scroll" interaction at 20px — apply these styles via custom CSS. */
.navbar--scrolled {
  background: rgba(11, 15, 30, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Added by initMobileNav() in main.js when the drawer is opened.
   Solid navy matches the mobile drawer background exactly — no glass effect
   so the nav row and drawer look like one continuous panel.
   WEBFLOW: Add a combo class "nav-menu-open" triggered by the Navbar open state. */
.navbar--menu-open {
  background: var(--navy);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo — 25px (22px from iter2, +15% per iter3 request) */
.navbar__logo img {
  height: 16px;
  width: auto;
}

/* Desktop nav links */
.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.navbar__links a {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color var(--ease-fast);
  position: relative;
  padding-bottom: 2px;
}

/* Underline hover effect */
.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--ease-base);
  transform-origin: left;
}

.navbar__links a:hover,
.navbar__links a.active {
  color: var(--white);
}

.navbar__links a:hover::after,
.navbar__links a.active::after {
  transform: scaleX(1);
}

/* Mobile hamburger button — hidden on desktop */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: var(--nav-height);
  padding: 0;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--ease-base), opacity var(--ease-base);
}

/* Hamburger → X animation when open */
.navbar__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.navbar__mobile-drawer {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  /* Must be below the navbar (z-index 100) but above page content */
  z-index: 99;
  background: var(--navy);
  padding: var(--sp-6) var(--container-pad) var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(-20px);
  opacity: 0;
  /* Prevent invisible drawer from intercepting clicks when closed */
  pointer-events: none;
  transition: transform var(--ease-base), opacity var(--ease-base);
}

.navbar__mobile-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.navbar__mobile-drawer a {
  display: block;
  font-size: var(--text-lg);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color var(--ease-fast);
}

.navbar__mobile-drawer a:hover { color: var(--white); }
.navbar__mobile-drawer a:last-child { border-bottom: none; }


/* ============================================================
   6. BUTTONS
   Two primary styles:
   - .btn-white  : white filled, dark text — for dark/colored backgrounds
   - .btn-dark   : navy filled, white text — for light backgrounds
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast),
              border-color var(--ease-fast), transform var(--ease-fast);
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }

/* White button — use on dark/colored backgrounds */
.btn-white {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn-white:hover {
  background: transparent;
  color: var(--white);
}

/* Dark button — use on white/light backgrounds.
   Hover convention: filled → outline (matches .btn-white behaviour in reverse) */
.btn-dark {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.btn-dark:hover {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

/* Outline white — alternate dark-section CTA */
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

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


/* ============================================================
   7. FOOTER
   ============================================================ */
.footer {
  background: var(--navy);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-8);
  color: rgba(255,255,255,0.7);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Logo column */
.footer__brand img {
  height: 36px;
  width: auto;
  margin-bottom: var(--sp-4);
}

.footer__brand-tagline {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--sp-6);
}

.footer__contact-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--sp-1);
}

.footer__contact-value {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--sp-4);
}

/* Nav columns */
.footer__col-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--sp-5);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__col a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  transition: color var(--ease-fast);
}

.footer__col a:hover { color: var(--white); }

/* Bottom bar */
.footer__bottom {
  padding-top: var(--sp-8);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}


/* ============================================================
   8. HOME — Hero
   Full-viewport background VIDEO with dark overlay and headline.
   The <video> element is positioned absolutely to fill the section.
   Overlay is applied via .hero::before pseudo-element.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  /* Fallback background color if video fails to load */
  background-color: #1a2744;
}

/* Dark gradient overlay — sits above video, below content */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11,15,30,0.5) 0%,
    rgba(11,15,30,0.35) 60%,
    rgba(11,15,30,0.6) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Background video — fills the section like a background image */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Disable pointer events so video doesn't block nav clicks */
  pointer-events: none;
}

.hero__content {
  /* Sits above the overlay */
  position: relative;
  z-index: 2;
  /* Offset from top nav */
  padding-top: var(--nav-height);
  padding-bottom: var(--sp-24);
  max-width: 620px;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: var(--sp-5);
  letter-spacing: -0.01em;
}

.hero__subheadline {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--sp-8);
  max-width: 440px;
}


/* ============================================================
   9. HOME — Funding Type Cards
   Two large image cards side by side, text overlay at bottom.
   Section fills the full viewport height; cards grow to fill it.
   ============================================================ */
.funding-types {
  /* Full viewport height so cards dominate the screen */
  min-height: 100vh;
  padding: var(--sp-12) 0;
  background: var(--white);

  /* Flex column so we can distribute space between header and cards */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The container must also be flex-column so cards can flex-grow */
.funding-types .container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.funding-types__header {
  text-align: center;
  margin-bottom: var(--sp-8);
  /* Don't let header grow — keep it its natural size */
  flex-shrink: 0;
}

.funding-types__label {
  margin-bottom: var(--sp-3);
}

/* Matches .how-it-works__heading size for visual consistency */
.funding-types__heading {
  font-family: var(--font-ui);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.funding-types__subtext {
  margin-top: var(--sp-2);
  font-size: var(--text-base);
  color: var(--gray-600);
}

/* Card grid — grows to fill remaining height of the section */
.funding-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  flex: 1;          /* stretch to fill remaining space in flex container */
  min-height: 0;    /* required to allow flex shrink past content size */
  min-height: 400px; /* absolute floor so cards are never too short */
}

/* Individual card */
.funding-card {
  position: relative;
  /* No fixed aspect-ratio — card fills grid row height naturally */
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;        /* makes the whole card clickable as <a> */
  cursor: pointer;
}

/* Image fills the card — set via inline style or specific classes */
.funding-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-slow);
}

/* Hover zoom on image */
.funding-card:hover .funding-card__img {
  transform: scale(1.04);
}

/* Hover: entire card body (title + subtitle + arrow) floats up */
.funding-card:hover .funding-card__body {
  transform: translateY(-10px);
}

/* Dark gradient overlay — bottom heavy */
.funding-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,15,30,0.88) 100%);
  pointer-events: none;
}

.funding-card--business {
  background-color: #2a4a3e;
  background-image: url('../img/home-business-capital-funding-type.png');
  background-size: cover;
  /* top center anchors the image so faces at the top are never cropped */
  background-position: top center;
}

.funding-card--realestate {
  background-color: #1a2d44;
  background-image: url('../img/home-real-estate-capital-funding-type.png');
  background-size: cover;
  background-position: center;
}

/* Text block overlaid at bottom-left — transitions for hover float effect */
.funding-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  z-index: 1;
  transition: transform var(--ease-base);
}

.funding-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Hover slide arrow forward */
.funding-card:hover .funding-card__arrow {
  transform: translate(3px, -3px);
}

.funding-card__arrow {
  transition: transform var(--ease-base);
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.funding-card__subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
}


/* ============================================================
   10. HOME — About / Teal Feature Section
   Dark teal background, 4-column feature grid with gold icons.
   ============================================================ */
/* Background changed from teal to navy — matches FAQ section for brand consistency */
.about-panel {
  background: var(--navy);
  padding: var(--sp-20) 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-panel__label {
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--sp-4);
}

.about-panel__heading {
  /* Using Inter (UI font) instead of Playfair italic — more in line with
     the brand's clean, modern feel and matches surrounding section headings */
  font-family: var(--font-ui);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 600;
  color: var(--white);
  max-width: 700px;
  margin-bottom: var(--sp-12);
  line-height: 1.35;
}

/* 4-column feature grid */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--sp-10);
}

.feature__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-4);
  color: var(--gold);
}

.feature__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--sp-2);
}

.feature__body {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
}


/* ============================================================
   11. HOME — How It Works
   White background. Left: atmospheric photo. Right: 3 numbered steps.
   ============================================================ */
.how-it-works {
  padding: var(--sp-20) 0;
  background: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.how-it-works__inner {
  display: grid;
  /* 55% for image, 45% for content */
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* Left image panel — using placeholder.jpg until real photo is added */
.how-it-works__image {
  position: relative;
  height: 500px;
  border-radius: var(--radius-md);
  overflow: hidden;

  background-color: var(--navy);
  background-image: url('../img/how-it-works.png');
  background-size: cover;
  background-position: center;
}

/* Right content */
.how-it-works__content { }

/* H2 — Inter (not Playfair) per typography standardization.
   Playfair is reserved for H1 display moments only. */
.how-it-works__heading {
  font-family: var(--font-ui);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-4);
  line-height: 1.15;
}

.how-it-works__subtext {
  font-size: var(--text-base);
  color: var(--gray-600);
  margin-bottom: var(--sp-10);
}

/* Step list */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

/* Numbered box */
.step__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-800);
}

.step__title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.step__body {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.7;
}


/* ============================================================
   12. HOME — FAQ Accordion
   Dark navy background. Left: heading. Right: expandable items.
   ============================================================ */
.faq {
  background: var(--navy);
  padding: var(--sp-20) 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.faq__inner {
  display: grid;
  /* 40% heading, 60% accordion */
  grid-template-columns: 2fr 3fr;
  gap: var(--sp-16);
  align-items: start;
}

/* H2 — Inter per typography standardization */
.faq__heading {
  font-family: var(--font-ui);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-8));
}

/* Accordion list */
.accordion {
  display: flex;
  flex-direction: column;
}

.accordion__item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.accordion__item:first-child {
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Toggle button */
.accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-5) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--ease-fast);
  gap: var(--sp-4);
}

.accordion__trigger:hover {
  color: var(--white);
}

/* Plus/minus icon */
.accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--ease-base), opacity var(--ease-base);
}

/* Horizontal bar */
.accordion__icon::before {
  width: 14px;
  height: 1.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Vertical bar — rotates to form an X when open */
.accordion__icon::after {
  width: 1.5px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* When open: collapse vertical bar */
.accordion__item.is-open .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Answer panel */
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--ease-slow), padding var(--ease-slow);
}

.accordion__panel-inner {
  padding-bottom: var(--sp-5);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
}


/* ============================================================
   13. HOME — Bottom CTA Section
   Background image with dark overlay. Text left, CTA.
   Using placeholder.jpg until real image is supplied.
   ============================================================ */
.bottom-cta {
  position: relative;
  padding: var(--sp-24) 0;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  background-image:
    linear-gradient(to right, rgba(11,15,30,0.9) 0%, rgba(11,15,30,0.6) 70%, rgba(11,15,30,0.4) 100%),
    url('../img/placeholder.jpg');
  background-size: cover;
  background-position: center;
  background-color: #1a2744;
}

.bottom-cta__content {
  max-width: 520px;
}

/* H2 — Inter per typography standardization */
.bottom-cta__heading {
  font-family: var(--font-ui);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: var(--sp-5);
}

.bottom-cta__body {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--sp-8);
  line-height: 1.75;
}


/* ============================================================
   14. ABOUT US — Hero
   Placeholder image background. Dark overlay at top ensures
   the transparent navbar links remain legible.
   ============================================================ */
.about-hero {
  padding-top: calc(var(--nav-height) + var(--sp-16));
  padding-bottom: var(--sp-16);
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;

  background-color: #d4dff5;
  background-image: url('../img/about-us-hero.png');
  background-size: cover;
  background-position: top right;
}

/* Dark gradient at top so transparent navbar links stay visible */
.about-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(11,15,30,0.55) 0%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.about-hero__content {
  position: relative;
  z-index: 1;
  max-width: 540px;
}

/* H1 — matches .page-hero__title size used on Business/RE Capital pages */
.about-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
}


/* ============================================================
   15. ABOUT US — Leadership Team
   ============================================================ */
.leadership {
  padding: var(--sp-24) 0;
  background: var(--white);
}

.section-header {
  text-align: center;
  margin-bottom: var(--sp-16);
}

.section-header__label {
  margin-bottom: var(--sp-3);
}

.section-header__heading {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--sp-4);
}

.section-header__subtext {
  font-size: var(--text-base);
  color: var(--gray-600);
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.75;
}

/* Team member cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.team-card { }

/* Photo area — square, full color */
.team-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin-bottom: var(--sp-4);
  background: var(--gray-200);  /* placeholder if no image */
  border-radius: var(--radius-lg);
}

.team-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.team-card__title {
  font-size: var(--text-sm);
  color: var(--gray-600);
}


/* ============================================================
   16. ABOUT US — Values
   ============================================================ */
.values {
  padding: var(--sp-24) 0;
  background: var(--off-white);
}

/* Value cards */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.value-card {
  background: var(--white);
  padding: var(--sp-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}

.value-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.value-card__icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
  margin-bottom: var(--sp-5);
}

.value-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-3);
}

.value-card__body {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.75;
}


/* ============================================================
   17. BUSINESS CAPITAL — Article Page
   Hero image with overlay, then article content sections.
   ============================================================ */
.page-hero {
  /* Used on Business Capital, Real Estate Capital */
  position: relative;
  height: 360px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Dark overlay for legibility */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,15,30,0.2) 0%, rgba(11,15,30,0.7) 100%);
}

.page-hero--business {
  background-color: #2a4a3e;
  background-image: url('../img/business-capital-hero.png');
  background-size: cover;
  background-position: top center;
}

.page-hero--realestate {
  background-color: #1a2d44;
  background-image: url('../img/real-estate-capital-hero.png');
  background-size: cover;
  background-position: center;
}

.page-hero__body {
  position: relative;
  z-index: 1;
  padding: 0 0 var(--sp-8);
  width: 100%;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
}

/* Body content area */
.article-layout {
  padding: var(--sp-10) 0 var(--sp-24);
}

.article-meta {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: var(--sp-12);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.article-meta__sep {
  width: 1px;
  height: 14px;
  background: var(--gray-400);
}

/* Article max-width for readability */
.article-body {
  max-width: 720px;
}

.article-section {
  margin-bottom: var(--sp-12);
}

/* H2 article section heading — Inter per typography standardization */
.article-section__heading {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}

.article-section p {
  font-size: var(--text-base);
  color: var(--gray-800);
  line-height: 1.85;
  margin-bottom: var(--sp-4);
}

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


/* ============================================================
   18. REAL ESTATE CAPITAL — Sidebar + Content Layout
   Sticky sidebar on left, main content on right.
   ============================================================ */
.re-layout {
  padding: var(--sp-10) 0 var(--sp-24);
}

.re-layout__inner {
  display: grid;
  /* Sidebar: 220px fixed, content: fills rest */
  grid-template-columns: 220px 1fr;
  gap: var(--sp-12);
  align-items: start;
}

/* Sticky sidebar */
.re-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-8));
}

.re-sidebar__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--gray-200);
}

.re-sidebar__nav {
  display: flex;
  flex-direction: column;
}

/* Sidebar link — highlights when its section is in view */
.re-sidebar__link {
  font-size: var(--text-sm);
  color: var(--gray-600);
  padding: var(--sp-2) 0;
  border-left: 2px solid transparent;
  padding-left: var(--sp-3);
  margin-left: calc(-1 * var(--sp-3));
  transition: color var(--ease-fast), border-color var(--ease-fast);
  display: block;
}

.re-sidebar__link:hover { color: var(--text); }

/* Active state — set by IntersectionObserver in main.js */
.re-sidebar__link.is-active {
  color: var(--navy);
  font-weight: 600;
  border-left-color: var(--gold);
}

/* Main content — reuses article styles */
.re-content { }

.re-section {
  margin-bottom: var(--sp-16);
  padding-top: var(--sp-4);
}

.re-section:first-child { padding-top: 0; }

/* H2 content section heading — Inter per typography standardization */
.re-section__heading {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}

.re-section p {
  font-size: var(--text-base);
  color: var(--gray-800);
  line-height: 1.85;
  margin-bottom: var(--sp-4);
}

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

/* Headings that contain a badge: remove h2 border so it doesn't extend under the pill.
   The underline is instead applied to the .re-section__heading-text wrapper span. */
.re-section__heading:has(.coming-soon) {
  border-bottom: none;
  padding-bottom: 0;
}

.re-section__heading-text {
  border-bottom: 2px solid var(--gold);
  padding-bottom: var(--sp-3);
}

/* "Coming Soon" pill badge — inline next to section headings */
.coming-soon {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-ui);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3a3a3a;
  background: #e2e2e2;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 0.5rem;
  position: relative;
  top: -2px;
}

/* Bottom CTA bar — light gray background so it reads as distinct from the dark footer.
   Text and button are dark so they're legible on the light background. */
.explore-cta {
  background: var(--gray-100);
  padding: var(--sp-10) 0;
}

/* White variant — used on About Us where the preceding section is already --gray-100 */
.explore-cta--white {
  background: var(--white);
}

.explore-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.explore-cta__text { }

.explore-cta__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.explore-cta__sub {
  font-size: var(--text-sm);
  color: var(--gray-600);
}


/* ============================================================
   19. LEGAL PAGES (Cookie Policy, Terms of Use, Privacy Policy)
   Simple text-content layout. Navbar is always visible (scrolled
   state applied by default since page scrolls from the top).
   ============================================================ */
.legal-page {
  padding-top: calc(var(--nav-height) + var(--sp-16));
  padding-bottom: var(--sp-24);
  background: #000;
  min-height: 100vh;
}

.legal-page__body {
  max-width: 720px;
}

.legal-page__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-2);
  line-height: 1.15;
}

.legal-page__date {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--sp-12);
}

.legal-section {
  margin-bottom: var(--sp-10);
}

.legal-section h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.legal-section p,
.legal-section li {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
}

.legal-section ul {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.legal-section a {
  color: var(--gold);
  text-decoration: underline;
}


/* ============================================================
   19. 404 PAGE
   Clean white background. Left-aligned content, black text.
   WEBFLOW: Simple Section with white background, Div Block for
   content, set padding-top to nav height.
   ============================================================ */
.error-page {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* left-aligned like home page */
  justify-content: center;
  background-color: var(--white);
  background-image: url('../img/404.png');
  background-size: cover;
  background-position: left center;
}

.error-page__content {
  padding: var(--nav-height) var(--container-pad) var(--sp-24);
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: 12rem;
  font-weight: 700;
  color: var(--text);     /* black text */
  line-height: 1;
  margin-bottom: var(--sp-5);
}

.error-page__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--sp-3);
}

.error-page__sub {
  font-size: var(--text-base);
  color: var(--gray-600);
  margin-bottom: var(--sp-8);
}


/* ============================================================
   20. RESPONSIVE STYLES
   Mobile-first breakpoints. Main reflow at 768px (tablet) and
   640px (mobile). Desktop layout is the default above.
   ============================================================ */

/* --- Tablet (max-width: 960px) --- */
@media (max-width: 960px) {
  /* Nav: show hamburger, hide links */
  .navbar__links { display: none; }
  .navbar__toggle { display: flex; }
  .navbar__mobile-drawer { display: block; }

  /* Footer tablet: brand full-width top row, then 3 nav cols in one row */
  .footer__top {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }

  .footer__brand {
    grid-column: 1 / -1;  /* spans all 3 columns */
  }

  /* How It Works: stack vertically */
  .how-it-works__inner {
    grid-template-columns: 1fr;
  }

  .how-it-works__image {
    height: 300px;
  }

  /* FAQ: stack vertically */
  .faq__inner {
    grid-template-columns: 1fr;
  }

  .faq__heading {
    position: static;
    margin-bottom: var(--sp-8);
    font-size: var(--text-3xl);
  }

  /* About panel: 2-column features */
  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Values: 1 column */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* Sidebar: hidden on tablet/mobile — stacked layout has no room for it.
     Users can still scroll through all sections without the anchor nav.
     WEBFLOW: On tablet breakpoint, set sidebar display to None. */
  .re-layout__inner {
    grid-template-columns: 1fr;
  }

  .re-sidebar {
    display: none;
  }
}

/* --- Mobile (max-width: 640px) --- */
@media (max-width: 640px) {
  /* Funding cards: stack vertically */
  .funding-cards {
    grid-template-columns: 1fr;
  }

  /* Team cards: 1 column */
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
  }

  /* About panel: 1 column */
  .features {
    grid-template-columns: 1fr;
  }

  /* Footer: 1 column */
  .footer__top {
    grid-template-columns: 1fr;
  }

  /* Explore CTA: stack */
  .explore-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .bottom-cta {
    padding: var(--sp-16) 0;
  }

  .about-hero {
    min-height: 360px;
    align-items: flex-end;
  }

  .about-hero__heading {
    font-size: var(--text-4xl);
  }
}

/* --- Utility: no-scroll on body when mobile nav is open --- */
body.nav-open {
  overflow: hidden;
}