/* ========================================
   JAMM FINANCIAL CONSULTANCY SERVICES
   Main Stylesheet
   ======================================== */

/* ===== Design Tokens ===== */
:root {
  --navy: #0B2545;
  --navy-soft: #13365E;
  --navy-light: #1A3A5C;

  --sky: #1CA7E0;
  --sky-dark: #1588B8;
  --sky-light: #E0F3FC;

  --orange: #E8722C;
  --orange-dark: #C95F1F;
  --orange-light: #FDE8DA;

  --success: #34A853;
  --success-dark: #2B8C45;

  --bg: #F7F9FB;
  --bg-alt: #EEF2F6;
  --text: #1F2A37;
  --text-soft: #64748B;
  --white: #FFFFFF;
  --border: #E1E6EB;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --container: 1140px;

  --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 37, 69, 0.08);
  --shadow-lg: 0 12px 40px rgba(11, 37, 69, 0.12);
  --shadow-xl: 0 20px 50px rgba(11, 37, 69, 0.16);

  --header-height: 110px; /* matches .site-header's actual rendered height */

  --section-bg: #FFFAF3;
  --section-text-soft: #2B3D4F;
  --section-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --card-on-light: rgba(255, 255, 255, 0.72);
}


/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Safety net so no stray element can scroll the page sideways on a phone.
     Several sections use oversized decorative pseudo-elements (the hero glow,
     the join-team blobs) that rely on their own overflow:hidden; this catches
     anything that slips past one. Deliberately NOT on html -- that element
     carries scroll-padding-top for the fixed header's anchor offsets, and
     making it a scroll container can break those. */
  overflow-x: hidden;
}


/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}

h1 { font-size: 52px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }

p  { margin: 0; }
ul { list-style: none; }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }


/* ===== Layout ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 72px 0;
}

.section-alt {
  background: var(--white);
}

.text-center {
  text-align: center;
}


/* ===== Section Headers ===== */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}

.section-title {
  font-size: 40px;
  color: var(--navy);
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 17px;
  color: var(--text-soft);
  max-width: 560px;
  line-height: 1.7;
}

.section-subtitle.centered {
  margin-left: auto;
  margin-right: auto;
}

.no-fee-highlight {
  margin-top: 20px;
  font-weight: 700;
  color: var(--navy);
}


/* ===== Shared Section Background Treatment ===== */
.hero,
.about-preview,
.how-to-apply,
.features,
.services-section,
.who-we-are,
.mission-vision,
.offerings,
.about-contact,
.privacy-section {
  background-color: var(--section-bg);
  box-shadow: var(--section-shadow);
  --text-soft: var(--section-text-soft);
}

.who-we-are {
  padding-bottom: 40px;
}

.offerings {
  padding-top: 40px;
}


/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-body);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
  line-height: 1;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(232, 114, 44, 0.3);
}

.btn-primary:hover {
  background: var(--orange-dark);
  box-shadow: 0 6px 20px rgba(232, 114, 44, 0.4);
}

.btn-secondary {
  background: var(--sky);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(28, 167, 224, 0.3);
}

.btn-secondary:hover {
  background: var(--sky-dark);
  box-shadow: 0 6px 20px rgba(28, 167, 224, 0.4);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

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

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

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

.btn-navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(11, 37, 69, 0.25);
}

.btn-navy:hover {
  background: var(--navy-soft);
}

.btn-sm {
  padding: 10px 24px;
  font-size: 14px;
}

.btn-block {
  width: 100%;
}

.link-arrow {
  display: inline-block;
  font-weight: 600;
  color: var(--sky-dark);
  border-bottom: 2px solid var(--sky);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

.link-arrow:hover {
  color: var(--sky);
}



/* ===== Main Content Wrapper ===== */
.main-content {
  margin-top: var(--header-height);
}


/* ===== Footer ===== */
.site-footer {
  background: var(--navy);
  padding: 64px 0 0;
}

.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col h3 {
  color: var(--white);
  font-size: 16px;
  margin-bottom: 16px;
}

.footer-brand .site-brand {
  margin-bottom: 0;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.6;
  max-width: 260px;
}

.footer-links ul,
.footer-contact ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--sky);
}

.footer-contact li {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

.footer-contact li a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.footer-contact li a:hover {
  color: var(--sky);
}

.copy-number {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease;
}

.copy-number:hover {
  color: var(--sky);
}

.copy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.copy-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.footer-bottom {
  padding: 20px 0;
  text-align: center;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* ===== Home: Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* was: calc(100vh - var(--header-height)) — hero now fills the full viewport itself since the header floats on top of it */
  margin-top: calc(-1 * var(--header-height)); /* pulls the hero up so its background starts at the very top of the page, underneath the header */
  padding-top: var(--header-height); /* pushes the actual text/content back down so it isn't hidden behind the header */
  display: flex;
  align-items: stretch; /* was: center — lets .hero-content fill the full section height (see .hero-visual below) */
  /* New hero background photo */
  background-image: url("../images/pictures/section1_background.3f0fc68e8ac5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(11, 37, 69, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 114, 44, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-content {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 32px 80px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 1fr; /* single row fills hero-content's full height */
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-text {
  align-self: center; /* re-center the text within the now full-height row */
}

.hero-text h1 {
  color: var(--navy);
  font-size: 52px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.hero-text .accent {
  color: var(--orange-dark);
}

/* Block (not inline-block) so this line is sized by its own 28px line-height
   instead of the h1's 52px strut, which used to pad it with dead leading. */
.hero-text .subheadline {
  font-size: 28px;
  display: block;
  line-height: 1.2;
  margin-top: 4px;
}


.hero-tagline {
  font-size: 18px;
  color: var(--section-text-soft);
  max-width: 480px;
  margin-bottom: 36px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

/* Sits directly above .hero-stats — the headline claim the two stats below back up. */
.hero-stats-banner {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 18px;
}

.hero-stats {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}

.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--navy);
}

.hero-stat strong span {
  color: var(--orange-dark);
}

.hero-stat small {
  color: var(--section-text-soft);
  font-size: 13px;
}

.hero-visual {
  display: flex;
  justify-content: center; /* anchor left edge in place, let the image overflow rightward instead of centering */
  align-items: flex-end; /* pin the model image to the very bottom */
  align-self: stretch; /* fill the full-height row */
  margin-bottom: -80px; /* break out of .hero-content's bottom padding so the image reaches .hero's true bottom edge */
  position: relative;
  min-width: 0; /* stop the oversized image from growing the grid column itself — let it overflow visually instead */
}

.hero-visual img {
  display: block;
  margin-left: 20px;
  width: 700px; /* bigger than the column on purpose — overflows past the column's right edge; .hero's overflow:hidden clips it gracefully if the viewport is narrow */
  max-width: none;
  height: 103%;
  -webkit-user-drag: none; /* prevent image drag */
  user-select: none; /* prevent the drag-via-text-selection ghost image */
}


/* ===== Home: About Preview ===== */
.about-preview-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.about-preview-text h2 {
  color: var(--orange);
}

.about-preview-text .subheadline2 {
  font-size: 30px;
  color: var(--navy);
}
.about-preview-text p {
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 16px;
  margin-bottom: 16px;
  line-height: 1.7;
}

.about-preview-text .link-arrow {
  margin-top: 8px;
}

.about-preview-visual {
  display: flex;
  justify-content: center;
}

.about-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-preview-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}


/* ===== Home: How to Apply ===== */
.how-to-apply {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
}

.how-to-apply .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.how-to-apply h2 {
  color: var(--navy);
  margin-bottom: 28px;
}

.how-to-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.how-to-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.how-to-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sky);
  color: var(--navy);
}

.how-to-step:nth-child(even) .step-number {
  background: var(--orange);
  color: var(--white);
}

.how-to-step h3 {
  color: var(--navy);
  font-size: 18px;
  margin-bottom: 6px;
}

.how-to-step p {
  color: var(--section-text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.how-to-visual {
  display: flex;
  justify-content: center;
}

.how-to-visual .how-to-image {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0;
  -webkit-user-drag: none;
  user-select: none;
}


/* ===== Home: Features ===== */
.features {
  padding: 56px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.feature-card {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--radius-md);
  background: var(--card-on-light);
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
}

.feature-icon-sky {
  background: var(--sky-light);
  color: var(--sky-dark);
}

.feature-icon-orange {
  background: var(--orange-light);
  color: var(--orange-dark);
}

.feature-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.feature-card p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.features-cta {
  display: flex;
  justify-content: center;
}


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

/* ===== About: Who We Are ===== */
.who-we-are-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.who-we-are-content h1 {
  margin-bottom: 28px;
}

.who-we-are-content p {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 16px;
}


/* ==========================================================================
   ABOUT PAGE — TALK TO A CONSULTANT CTA
   ========================================================================== */

.offerings-cta {
  text-align: center;
}

.offerings-cta p {
  font-size: 17px;
  color: var(--text-soft);
  margin-bottom: 20px;
}

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


/* ===== About: Mission & Vision ===== */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.mv-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Top accent bar — the only thing that differentiates Mission from Vision */
.mv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
}

.mv-card-mission::before { background: var(--sky); }
.mv-card-vision::before  { background: var(--orange); }

.mv-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
}

.mv-card-mission .mv-icon {
  background: var(--sky-light);
  color: var(--sky-dark);
}

.mv-card-vision .mv-icon {
  background: var(--orange-light);
  color: var(--orange-dark);
}

.mv-card h2 {
  font-size: 32px;
  margin-bottom: 16px;
  text-align: center;
}

.mv-card p {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
}


/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */

/* ===== Services: Grid =====
   HORIZONTAL cards: one full-width card per row (image left, content right).
   The vertical stack is the MOBILE layout — see user_responsiveness.css. */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}

.service-card {
  background: var(--card-on-light);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-height: 160px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.service-card-cover {
  width: 28%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card-cover-sky {
  background: linear-gradient(135deg, var(--sky) 0%, var(--sky-dark) 100%);
}

.service-card-cover-orange {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
}

.service-card-cover-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One horizontal row beside the image: heading on the left, the amount centered
   in its own column, and Apply flush right. Sized to the content so there's no
   dead vertical space. Reverts to a centered single column on mobile — see
   user_responsiveness.css. */
.service-card-body {
  padding: 20px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 28px;
  text-align: left;
  flex: 1;
}

.service-card h3 {
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 6px; /* the .service-card-sub below it supplies the rest of the gap */
}

.service-card-sub {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-dark);
}

/* The amount range — a headline figure, not a bulleted list item. */
.service-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  justify-self: center;
  text-align: center;
}

.service-card li {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

.service-card .btn {
  justify-self: end;
}

.service-reassurance {
  text-align: center;
  margin: 32px auto 0;
  max-width: 700px;
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.7;
}

.service-reassurance a {
  font-weight: 600;
  color: var(--sky-dark);
  border-bottom: 1px solid var(--sky);
}

.service-reassurance a:hover {
  color: var(--sky);
}


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

/* ===== Contact: Join Our Team ===== */
.join-team {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--navy) 70%);
  position: relative;
  overflow: hidden;
  box-shadow: var(--section-shadow);
  /* Deliberately NO min-height/flex centering here: forcing a full viewport
     left ~140px of dead space above AND below the content, which read as a big
     empty band before the footer. The section is sized by its own content plus
     the standard .section padding, like every other section on the page. */
}

.join-team::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232, 114, 44, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.join-team::after {
  content: "";
  position: absolute;
  bottom: -40%;
  right: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.join-team .container {
  width: 100%;
}

/* Two columns: the pitch on the left, the application form on the right. */
.join-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.join-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.join-wrap .eyebrow {
  color: var(--orange);
}

.join-wrap h2 {
  color: var(--white);
  font-size: 44px;
  margin-bottom: 20px;
}

.join-copy {
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  max-width: 560px;
  margin-bottom: 28px;
  line-height: 1.7;
}

/* Perk chips — sit on the dark gradient, so they're white-on-transparent */
.join-perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 720px;
  margin: 0;
}

.join-perks li {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 20px;
}

/* "Not ready to apply?" block under the perks — sits on the dark gradient. */
.join-contact {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.join-contact-title {
  color: var(--white);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}

.join-contact-row {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.7;
}

.join-contact-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 6px;
}

.join-contact-sep {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 4px;
}

/* .copy-number already carries its own dotted underline + hover (it's shared
   with the footer), so only the resting colour is nudged here. */
.join-contact .copy-number {
  color: var(--white);
}

.join-contact a {
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.join-contact a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}


/* ===== Home: Join Our Team — the hiring form =====
   No card: the form sits directly on the section's gradient, so its fields are
   translucent rather than white. Every field rule below is scoped to .join-form
   because .form-group is SHARED with the apply page, which must keep its white
   inputs on a light background. */
.join-form-card h3 {
  color: var(--white);
  font-size: 26px;
  margin-bottom: 6px;
  text-align: center;
}

.join-form-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin-bottom: 18px;
  line-height: 1.6;
  text-align: center;
}

.join-form .form-row {
  margin-bottom: 14px;
}

.join-form .form-group label {
  color: rgba(255, 255, 255, 0.85);
}

/* Filled with the section's own navy + an inner shadow so each field reads as
   recessed INTO the gradient rather than floating on it. The 2px border is set
   here (not only on :focus) so focusing never changes the box width and shifts
   the layout — the shared .form-group base is 1px. */
.join-form .form-group input {
  background: rgba(11, 37, 69, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  color: var(--white);
}

.join-form .form-group input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.join-form .form-group input:focus {
  background: rgba(11, 37, 69, 0.7);
  border-color: var(--orange);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(232, 114, 44, 0.28);
}

/* Chrome's autofill repaints the field white, which would break the recessed
   look — this keeps the fill (and its text) matching the resting state above. */
.join-form .form-group input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 1000px rgba(11, 37, 69, 0.92) inset;
  transition: background-color 9999s ease-out;
}

.join-form button[type="submit"] {
  margin-top: 6px;
}

.join-form button[type="submit"]:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Transient result message, written by main.js. The height is reserved so the
   form never jumps when the message appears and disappears. */
.join-form-toast {
  min-height: 22px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.join-form-toast.is-visible {
  opacity: 1;
}

.join-form-toast.is-success {
  color: #7DF0B8;
}

.join-form-toast.is-error {
  color: #FFB3AE;
}


/* ==========================================================================
   ABOUT PAGE — TALK TO US / CONTACT
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.contact-card {
  text-align: center;
  padding: 32px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Neutral white chip: the phone/Facebook assets are already full-bleed colored
   circles while the Gmail asset is a bare glyph — a plain white ring is the only
   treatment that reads consistently across all three. */
.contact-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.contact-card-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.contact-card h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.contact-card-label {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 12px;
}

.contact-card-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  word-break: break-word;
}

.contact-card-value a {
  color: var(--sky-dark);
}

.contact-card-value a:hover {
  color: var(--sky);
}

/* .copy-number is styled white-on-navy for the footer — re-tint it for the light
   card, where the number itself is the click-to-copy control */
.contact-card .copy-number {
  font-size: 16px;
  font-weight: 600;
  color: var(--sky-dark);
  text-decoration: underline dotted rgba(28, 167, 224, 0.4);
  text-underline-offset: 4px;
}

.contact-card .copy-number:hover {
  color: var(--orange-dark);
}

.contact-card-hint {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 10px;
}

.contact-card .copy-tooltip {
  background: var(--navy);
  color: var(--white);
  text-transform: none;
  letter-spacing: 0;
}

.contact-meta {
  text-align: center;
  margin-top: 36px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.contact-meta p {
  font-size: 15px;
  color: var(--text-soft);
}

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

.contact-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}


/* ==========================================================================
   ABOUT PAGE — DATA PRIVACY NOTICE
   ========================================================================== */

.privacy-section {
  padding-top: 0;
}

.privacy-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.privacy-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-soft);
}

.privacy-body p + p {
  margin-top: 14px;
}

/* Legal citation — quieter than the body, set off by a hairline */
.privacy-law {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}



/* ==========================================================================
   APPLY PAGE (LOAN APPLICATION)
   ========================================================================== */

/* ===== Apply: Page Layout ===== */
.apply-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - var(--header-height));
  background: var(--section-bg);
}

/* Success state: sidebar hidden, content spans full width */
.apply-layout.is-success {
  grid-template-columns: 1fr;
}

.apply-layout.is-success .apply-sidebar {
  display: none;
}


/* ===== Apply: Sidebar ===== */
.apply-sidebar {
  background: var(--section-bg);
  border-right: 1px solid var(--border);
  padding: 40px 28px;
}

.apply-sidebar-title {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border);
}

.apply-sidebar-title .loan-type {
  color: var(--orange);
}

.sidebar-section {
  margin-bottom: 28px;
}

.sidebar-section h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--navy);
}

.sidebar-section ul {
  list-style: none;
}

.sidebar-section li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.sidebar-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sky);
}

/* The at-a-glance list at the top of each service (loan range, term, approval
   time...). Boxed one item per card so it reads as a set of facts instead of
   the wall of text a plain dotted list made of it. No bullet dot -- the card
   already separates the items. The "Requirements" lists below it keep the
   plain dotted .sidebar-section li styling. */
.sidebar-highlights {
  margin-bottom: 24px;
}

.sidebar-highlights li {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 500;
}

.sidebar-highlights li::before {
  display: none;
}

/* Intro line under the sidebar title: sets the expectation that nothing has to
   be uploaded or prepared before applying. */
.sidebar-note {
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}

.sidebar-subheading {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 16px 0 10px;
}

.requirement-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-item summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-arrow {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sky);
  border-bottom: 2px solid var(--sky);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.accordion-item[open] .accordion-arrow {
  transform: rotate(45deg);
}

.accordion-body {
  padding: 2px 0 10px 18px;
}


/* ===== Apply: Main Content ===== */
.apply-main {
  background: var(--section-bg);
  padding: 40px 48px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}


/* ===== Apply: Step Indicator ===== */
.step-indicator {
  display: flex;
  align-items: flex-start;
  margin: 0 auto 36px;
}

.is-hidden {
  display: none !important;
}

.step-indicator-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* Connector between circles: gray track + animated fill */
.step-indicator-item:not(:first-child)::before,
.step-indicator-item:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  height: 3px;
  left: calc(-50% + 24px);
  right: calc(50% + 24px);
  border-radius: 2px;
}

.step-indicator-item:not(:first-child)::before {
  background: var(--border);
}

.step-indicator-item:not(:first-child)::after {
  background: var(--success);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease;
}

.step-indicator-item.active::after,
.step-indicator-item.completed::after {
  transform: scaleX(1);
}

.step-dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  background: var(--border);
  color: var(--text-soft);
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.step-indicator-item.active .step-dot {
  background: var(--sky);
  color: var(--white);
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(28, 167, 224, 0.16);
}

.step-indicator-item.completed .step-dot {
  background: var(--success);
  color: var(--white);
}

.step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.step-indicator-item.active .step-label {
  color: var(--sky-dark);
}

.step-indicator-item.completed .step-label {
  color: var(--success-dark);
}


/* ===== Apply: Form Step Panels ===== */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.form-step-header {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

.form-step h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.form-step-desc {
  color: var(--text-soft);
  font-size: 15px;
  margin-bottom: 32px;
  line-height: 1.6;
  max-width: 560px;
}


/* ===== Apply: Form Elements ===== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #94A3B8;
}

/* A <select> still sitting on its "Select ..." option reads as a placeholder,
   not an answer. The class is toggled by main.js (the form is novalidate, so
   :invalid can't be relied on here). */
.form-group select.is-placeholder {
  color: #94A3B8;
}

/* The options inherit the <select>'s colour, which greyed out the whole open
   dropdown while it sat on its placeholder. Pin the real choices back to the
   normal text colour and leave only the "Select ..." row grey. */
.form-group select option {
  color: var(--text);
}

.form-group select option[value=""] {
  color: #94A3B8;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(28, 167, 224, 0.12);
}

.form-group input.field-error,
.form-group select.field-error,
.form-group textarea.field-error {
  border-color: #DC2626;
  background: #FEF2F2;
}

.form-group input.field-error:focus,
.form-group select.field-error:focus,
.form-group textarea.field-error:focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.form-group .field-error-text {
  display: none;
  color: #DC2626;
  font-size: 12px;
  margin-top: 4px;
}

.form-group .field-error-text.is-visible {
  display: block;
}

/* Page-level banner for errors raised by the server (see user_apply.html).
   Same red as the inline field errors so the two read as one system. */
.apply-form-errors {
  border: 1px solid #DC2626;
  border-radius: 8px;
  background: #FEF2F2;
  color: #DC2626;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.apply-form-errors p {
  margin: 0;
}

.apply-form-errors p + p {
  margin-top: 6px;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}


/* ===== Apply: Form Actions ===== */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}


/* ===== Apply: Review Table ===== */
.review-section {
  margin-bottom: 28px;
}

.review-section h3 {
  font-size: 16px;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 0;
}

.review-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  /* fixed + the wrapping rules below: a long address or email grows the row
     downwards instead of pushing its cell out past the table border. */
  table-layout: fixed;
}

.review-table tr {
  border-bottom: 1px solid var(--border);
}

.review-table tr:last-child {
  border-bottom: none;
}

.review-table td {
  padding: 12px 16px;
  font-size: 14px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.review-table td:first-child {
  font-weight: 600;
  color: var(--text);
  width: 40%;
  background: var(--bg);
}

.review-table td:last-child {
  color: var(--text-soft);
}


/* ===== Apply: Privacy Checkbox ===== */
.privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding: 20px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.privacy-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--sky);
  cursor: pointer;
}

.privacy-check label {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
  cursor: pointer;
}

.privacy-check label a {
  color: var(--sky-dark);
  text-decoration: underline;
}

.privacy-check.error {
  border-color: #DC2626;
  background: #FEF2F2;
  animation: privacyShake 0.4s ease;
}

@keyframes privacyShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}


/* ===== Apply: Success Screen ===== */
.success-screen {
  max-width: 520px;
  margin: 64px auto;
  text-align: center;
}

.success-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.success-check svg {
  width: 34px;
  height: 34px;
}

.success-check svg path {
  stroke: var(--white);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: successCheckDraw 0.35s ease 0.4s forwards;
}

@keyframes successPop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes successCheckDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.success-screen h2 {
  font-size: 28px;
  margin-bottom: 16px;
}

.success-message {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.success-contact {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.success-contact a {
  color: var(--sky-dark);
  text-decoration: underline;
}

/* .copy-number is styled white-on-navy for the footer — invisible on this white
   card, so re-tint it the same way .contact-card does. */
.success-contact .copy-number {
  font-weight: 600;
  color: var(--sky-dark);
  text-decoration: underline dotted rgba(28, 167, 224, 0.4);
  text-underline-offset: 3px;
}

.success-contact .copy-number:hover {
  color: var(--orange-dark);
}

.success-contact .copy-tooltip {
  background: var(--navy);
  color: var(--white);
}

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


/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .service-card,
  .feature-card,
  .contact-card,
  .mv-card {
    transition: none;
  }

  .btn:hover,
  .service-card:hover,
  .feature-card:hover,
  .contact-card:hover,
  .mv-card:hover {
    transform: none;
  }
}